/*
====================================================================
🌌 AURORA & MESH GRADIENT THEME (aurora-theme.css) 🌌
====================================================================
HOW TO USE:
1. Save this code as "aurora-theme.css".
2. In your HTML, add this *AFTER* your main CSS file.
...
*/
/* --- 0. Font Import --- */
/* Replacing blocky font with a softer, modern one */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
:root {
/* 1. Re-defined Color Palette (Aurora Theme) */
--primary-purple: #9F70FD; /* Soft violet */
--secondary-cyan: #00D4FF; /* Bright, watery cyan */
--accent-pink: #FF6B-B9; /* Vibrant pink */
--text-light: #E0E0FF; /* Soft, light blueish-white */
/* 2. Re-defined Backgrounds & Text */
--dark-bg: #0D0B1A; /* Deep midnight blue */
--darker-bg: #070611; /* Even darker blue */
--card-bg: rgba(25, 22, 49, 0.7); /* Dark purple glass */
--glass-bg: rgba(255, 255, 255, 0.05); /* Light glass tint */
/* 3. Re-defined Effects */
--text-glow: 0 0 12px rgba(159, 112, 253, 0.5); /* Soft purple glow */
/* 4. Keep existing variables */
--transition: all 0.4s ease; /* Slower, smoother transitions */
}
/*
====================================================================
1. GLOBAL & TYPOGRAPHY OVERRIDES
- Removing uppercase, blocky text for a softer feel.
====================================================================
*/
body {
font-family: 'Manrope', 'Poppins', sans-serif;
color: var(--text-light);
background-color: var(--dark-bg); /* Solid fallback */
position: relative; /* Needed for the ::before element */
overflow-x: hidden; /* Prevent horizontal scroll from gradients */
}
/* --- The Aurora Background Effect --- */
/* This creates the blurry, animated gradient circles */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
/* Defines the gradient "circles" */
background:
radial-gradient(circle at 15% 25%, rgba(159, 112, 253, 0.3) 0%, transparent 40%),
radial-gradient(circle at 85% 75%, rgba(0, 212, 255, 0.3) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(255, 107, 185, 0.2) 0%, transparent 35%);
filter: blur(80px); /* This blurs the circles into a "mesh" */
z-index: -1;
animation: float-aurora 20s infinite alternate ease-in-out;
}
@keyframes float-aurora {
0% { transform: scale(1) rotate(0deg) translateX(0); }
100% { transform: scale(1.3) rotate(20deg) translateX(-50px); }
}
h1, h2, h3, h4, h5, h6,
.logo-text,
.hero-title,
.stat-number,
.countdown-number,
.section-title,
.about-title {
font-family: 'Manrope', 'Poppins', sans-serif;
font-weight: 700;
text-transform: none; /* Removing brutalist uppercase */
}
/*
====================================================================
2. STRUCTURAL & LAYOUT OVERRIDES
- Adding back border-radius.
- Using semi-transparent "glass" borders.
====================================================================
*/
/* Change button style to soft pills */
.btn {
border-radius: 50px;
border: 1px solid transparent; /* Handled by specific button styles */
}
/* Change all cards to "Glassmorphism" */
.card-bg,
.floating-card,
.premium-card,
.next-stream-card,
.sidebar-module,
.stream-player {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
background: var(--card-bg);
backdrop-filter: blur(12px); /* The "frosted glass" effect */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Soft shadow */
}
/*
====================================================================
3. INTERACTION & EFFECT OVERRIDES
- Adding back soft glows and "lift" hovers.
====================================================================
*/
/* --- Buttons --- */
.btn-primary {
background: linear-gradient(45deg, var(--primary-purple), var(--secondary-cyan));
color: #FFFFFF;
font-weight: 600;
box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3); /* Soft cyan glow */
}
.btn-primary:hover {
box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5); /* Brighter glow */
transform: translateY(-3px); /* "Lift" effect */
}
.btn-secondary {
color: var(--secondary-cyan);
border-color: var(--secondary-cyan);
background: transparent;
box-shadow: none;
}
.btn-secondary:hover {
background: rgba(0, 212, 255, 0.1); /* Soft fill */
box-shadow: 0 0 15px rgba(0, 212, 255, 0.3); /* Add glow */
}
/* --- Nav Links --- */
.nav-link:hover, .nav-link.active {
color: var(--secondary-cyan);
text-shadow: 0 0 10px var(--secondary-cyan);
}
.nav-link::after {
background: var(--secondary-cyan);
height: 2px;
}
/* --- Card Hovers --- */
.premium-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(159, 112, 253, 0.3); /* Soft purple shadow */
}
.support-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); /* Darker shadow */
}
/*
====================================================================
4. SPECIFIC COMPONENT THEMING
- Re-skinning all elements with gradients and soft glows.
====================================================================
*/
/* --- Logo & Scrollbar --- */
.logo-icon {
background: linear-gradient(135deg, var(--primary-purple), var(--accent-pink));
border-radius: 12px;
}
.logo-text {
background: linear-gradient(45deg, var(--text-light), var(--secondary-cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--primary-purple);
border-radius: 10px;
}
/* --- Hero Section --- */
.hero-badge {
background: rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 50px;
backdrop-filter: blur(5px);
}
.live-indicator {
background: var(--accent-pink);
box-shadow: 0 0 12px var(--accent-pink);
/* Assumes 'pulse' animation exists in main.css */
animation: pulse 1.5s infinite;
}
.badge-text {
color: var(--accent-pink);
font-weight: 600;
}
/* --- Gradients (Titles & Stats) --- */
.hero-title,
.section-title,
.about-title,
.stat-number,
.countdown-number,
.card-title {
background: linear-gradient(45deg, var(--text-light), var(--secondary-cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- Premium Card Top Border --- */
.premium-card::before {
background: linear-gradient(90deg, var(--primary-purple), var(--accent-pink));
height: 4px; /* Softer bar */
}
/* --- Support Card Gradient --- */
.support-card {
background: linear-gradient(135deg, var(--primary-purple), var(--accent-pink));
}