/* ========================================= PREETBEACON DARK MODE (AdSense Optimized) ========================================= */ /* LOGIC: We use a class 'dark-mode' on the tag. When active, we override the CSS variables defined in style.css. */ body.dark-mode { /* --- CORE COLORS (Slate/Night Theme) --- */ --bg-color: #0f172a; /* Main Background (Not Pitch Black) */ --card-bg: #1e293b; /* Cards/Containers */ /* --- TEXT COLORS --- */ --text-main: #f1f5f9; /* High Contrast White for Headings */ --text-muted: #94a3b8; /* Soft Grey for Paragraphs */ /* --- BORDERS & SHADOWS --- */ --border-color: #334155; /* Subtle Borders */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.6); /* --- ACCENTS (Slightly brighter for dark bg) --- */ --primary-color: #6366f1; /* Brighter Indigo */ --secondary-color: #f472b6; /* Softer Pink */ } /* ========================================= COMPONENT OVERRIDES ========================================= */ /* 1. NAVBAR & FOOTER */ body.dark-mode .navbar, body.dark-mode footer { background: rgba(15, 23, 42, 0.95); /* Darker Glassmorphism */ border-bottom-color: var(--border-color); } body.dark-mode .logo span { color: white; } /* 2. HERO SECTION */ body.dark-mode .hero { /* Adds a dark overlay to existing hero image so text pops */ background-blend-mode: overlay; background-color: rgba(0, 0, 0, 0.7); } body.dark-mode .hero h1 { color: #ffffff; text-shadow: 0 0 20px rgba(99, 102, 241, 0.5); /* Neon Glow Effect */ } body.dark-mode .badge { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, 0.3); } /* 3. INPUTS & SEARCH BARS */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background-color: #0f172a; color: white; border-color: #475569; } body.dark-mode input::placeholder { color: #64748b; } body.dark-mode .search-box { background-color: var(--card-bg); } /* 4. BUTTONS */ body.dark-mode .btn-primary, body.dark-mode button { box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); /* Glowy Buttons */ } /* ========================================= ADSENSE SAFETY ZONE (CRITICAL) ========================================= */ /* NOTE: Google Ads often come with white backgrounds or transparent ones. In Dark Mode, transparent ads with black text become INVISIBLE. We style the container to prevent this. */ /* Container for all ads */ body.dark-mode .ad-slot, body.dark-mode .ad-banner, body.dark-mode .sidebar-widget.ad-widget { background-color: #e2e8f0; /* Light Grey Background */ color: #000; /* Force text color back to black for placeholder */ border: 2px dashed #475569; border-radius: 8px; overflow: hidden; position: relative; } /* Label "Sponsored" needs to be visible */ body.dark-mode .ad-slot::before, body.dark-mode .ad-banner::before { color: #475569; font-size: 0.7rem; background: #cbd5e1; padding: 2px 6px; border-radius: 4px; } /* Why Light Grey Background for Ads? 1. Most Display Ads are designed for white backgrounds. 2. If an Ad has a transparent background and black text, putting it on a dark background makes it unreadable. 3. This creates a "Box" effect which draws attention (Good for CTR). */ /* ========================================= VIRAL TOOLS SPECIFIC ========================================= */ /* Exam War Room & Calculators */ body.dark-mode .tracker-box, body.dark-mode .progress-section, body.dark-mode .result-box { background: var(--card-bg); border: 1px solid var(--border-color); } body.dark-mode .topic-item { background: #0f172a; border-color: #334155; } /* Table Colors (Date sheet etc) */ body.dark-mode table th { background-color: #334155; color: white; } body.dark-mode table td { border-color: #334155; } /* Scrollbar (Custom Dark) */ body.dark-mode ::-webkit-scrollbar { width: 10px; } body.dark-mode ::-webkit-scrollbar-track { background: #0f172a; } body.dark-mode ::-webkit-scrollbar-thumb { background: #475569; border-radius: 5px; } body.dark-mode ::-webkit-scrollbar-thumb:hover { background: #64748b; }