/*
====================================================================
🌲 PROFESSIONAL FOREST THEME (forest-theme.css) 🌲
====================================================================
HOW TO USE:
1. Save this code as "forest-theme.css".
2. In your HTML, add this *AFTER* your main CSS file.
...
*/
/* --- 0. Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&family=Nunito+Sans:wght@400;600&display=swap');
:root {
/* 1. Re-defined Color Palette (Forest Theme) */
--electric-pink: #2A7D4B; /* Deep forest green */
--aqua-cyan: #5C9E5F; /* Lighter mossy green */
--bright-yellow: #FDEE9D; /* Soft sunlight yellow */
--vivid-orange: #D97706; /* Rustic/autumn orange */
--royal-blue: #4A6C82; /* Slate/river blue */
--deep-purple: #4A3E54; /* Deep shadow/stone color */
--neon-green: #9AE66E; /* Bright leaf green */
/* 2. Re-defined Backgrounds & Text */
--dark-bg: #221D1A; /* Dark earthy brown */
--darker-bg: #1A1512; /* Very dark soil color */
--card-bg: rgba(42, 69, 50, 0.7); /* Mossy-green glass */
--glass-bg: rgba(240, 240, 230, 0.1); /* Warm-tinted light glass */
--text-light: #F0F0E6; /* Warm, off-white */
/* 3. Re-defined Effects */
--text-glow: 0 0 8px rgba(154, 230, 110, 0.3); /* Softer, subtle green glow */
/* 4. Keep existing variables */
--transition: all 0.3s ease-in-out; /* Changed to a standard ease */
}
/*
====================================================================
1. GLOBAL & TYPOGRAPHY OVERRIDES
- Change the entire feel by switching fonts.
- We'll use a serif (Lora) for headings and a clean sans-serif (Nunito Sans) for body.
====================================================================
*/
body {
font-family: 'Nunito Sans', 'Poppins', sans-serif; /* New default font */
color: rgba(240, 240, 230, 0.9); /* Slightly softer body text */
}
h1, h2, h3, h4, h5, h6,
.logo-text,
.hero-title,
.stat-number,
.countdown-number,
.section-title,
.about-title {
font-family: 'Lora', 'Poppins', serif; /* New elegant heading font */
font-weight: 600;
}
/*
====================================================================
2. STRUCTURAL & LAYOUT OVERRIDES
- Change component shapes and layout.
====================================================================
*/
/* Reverse the Hero Section Layout on Desktop */
@media (min-width: 1024px) {
.hero-main {
flex-direction: row-reverse; /* Flips the text and visual card */
}
}
/* Change button style from rounded to squared/modern */
.btn {
border-radius: 8px; /* Your original was 50px (fully rounded) */
}
/* Change all cards to have a more subtle, organic border */
.card-bg,
.floating-card,
.premium-card,
.next-stream-card,
.sidebar-module,
.stream-player {
border: 1px solid rgba(92, 158, 95, 0.3); /* Mossy green border */
}
/*
====================================================================
3. INTERACTION & EFFECT OVERRIDES
- This is key. We remove all "cyber" glows and replace them
with natural shadows and subtle hovers.
====================================================================
*/
/* --- Buttons --- */
.btn-primary {
background: var(--electric-pink); /* Solid deep green */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Soft dark shadow */
}
.btn-primary:hover {
background: var(--aqua-cyan); /* Lighter moss green on hover */
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-2px); /* Keep the lift */
}
.btn-secondary {
color: var(--vivid-orange); /* Rustic orange */
border-color: var(--vivid-orange);
box-shadow: 0 0 10px rgba(217, 119, 6, 0.2); /* Faint orange glow */
}
.btn-secondary:hover {
background: rgba(217, 119, 6, 0.1); /* 10% orange fill */
box-shadow: 0 0 20px rgba(217, 119, 6, 0.4);
}
/* --- Nav Links --- */
.nav-link:hover, .nav-link.active {
color: var(--bright-yellow); /* Sunlight yellow on hover */
text-shadow: 0 0 8px rgba(253, 238, 157, 0.5); /* Soft yellow glow */
}
.nav-link::after {
background: var(--bright-yellow); /* Solid yellow underline */
}
/* --- Card Hovers --- */
.premium-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); /* Deeper, natural shadow */
}
.support-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(42, 125, 75, 0.3); /* Greenish shadow */
}
/*
====================================================================
4. SPECIFIC COMPONENT THEMING
- Re-skinning elements that were hard-coded with cyber colors.
====================================================================
*/
/* --- Logo & Scrollbar --- */
.logo-icon {
background: linear-gradient(135deg, var(--electric-pink), var(--aqua-cyan));
}
.logo-text {
background: linear-gradient(45deg, var(--aqua-cyan), var(--bright-yellow));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, var(--electric-pink), var(--aqua-cyan));
}
/* --- Hero Section --- */
.hero-badge {
background: rgba(92, 158, 95, 0.25); /* Mossy green badge */
border: 1px solid rgba(92, 158, 95, 0.4);
}
.live-indicator {
background: var(--neon-green); /* Bright leaf green */
box-shadow: 0 0 10px var(--neon-green);
}
.badge-text {
color: var(--neon-green);
}
/* --- Gradients (Titles & Stats) --- */
.hero-title,
.section-title,
.about-title,
.stat-number,
.countdown-number,
.card-title {
background: linear-gradient(45deg, var(--aqua-cyan), var(--bright-yellow));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- Premium Card Top Border --- */
.premium-card::before {
background: linear-gradient(to right, var(--electric-pink), var(--aqua-cyan));
}
/* --- Support Card Gradient --- */
.support-card {
background: linear-gradient(135deg, var(--electric-pink), var(--royal-blue));
}