/* ============================================================ LampOn — theme.css v1.0 Light / Dark theme system + Theme Switcher button styles. HOW TO USE: Add this line to EVERY HTML page, AFTER main.css: (use "../css/theme.css" inside /pages/) The element gets data-theme="dark" (default) or data-theme="light" by the JS in navbar.js. ============================================================ */ /* ── 1. DARK theme — mirrors the values already in :root ──── */ /* Listed here so the switcher JS never breaks the dark */ /* look even if someone edits :root in main.css. */ [data-theme="dark"] { --ink: #14141f; --deep: #1a1a2a; --surface: #1f1f30; --card: #252538; --border: #35355a; --muted: #454568; --gold: #c9a84c; --gold-light: #e8c97a; --gold-dim: #7a6030; --gold-glow: rgba(201,168,76,0.15); --text-primary: #f2ede0; --text-secondary: #b8b4c4; --text-muted: #7a769a; /* Navbar / dropdown helpers */ --navbar-bg: rgba(10,10,15,0.95); --navbar-scrolled: rgba(10,10,15,0.98); --dropdown-bg: var(--surface); --dropdown-shadow: 0 16px 48px rgba(0,0,0,0.55); --mega-bg: var(--surface); --mobile-nav-bg: var(--deep); } /* ── 2. LIGHT theme ─────────────────────────────────────────── */ [data-theme="light"] { --ink: #f5f2eb; --deep: #ede9df; --surface: #faf8f3; --card: #ffffff; --border: rgba(100,90,60,0.14); --muted: rgba(100,90,60,0.28); --gold: #9a7318; --gold-light: #c9a84c; --gold-dim: #c9a84c; --gold-glow: rgba(154,115,24,0.12); --text-primary: #1a1610; --text-secondary: #4e4838; --text-muted: #8c8272; /* Navbar / dropdown helpers */ --navbar-bg: rgba(245,242,235,0.94); --navbar-scrolled: rgba(245,242,235,0.98); --dropdown-bg: #ffffff; --dropdown-shadow: 0 16px 48px rgba(0,0,0,0.13); --mega-bg: #ffffff; --mobile-nav-bg: var(--deep); } /* ── 3. Apply variables to concrete elements ────────────────── */ /* Body */ body { background-color: var(--ink); color: var(--text-primary); } /* Navbar backgrounds */ .navbar { background: linear-gradient(180deg, var(--navbar-bg) 0%, transparent 100%); border-bottom-color: var(--border); } .navbar.scrolled { background: var(--navbar-scrolled); } /* All surface/card areas */ .card, .article-card, .realm-card, .quote-card, .series-card, .stat-card, .featured-card, .admin-card, .table-container { background: var(--card); border-color: var(--border); } .article-card:hover, .realm-card:hover, .card:hover { background: var(--surface); } /* Dropdowns — user menu */ .user-dropdown { background: var(--surface); border-color: var(--border); box-shadow: var(--dropdown-shadow); } .dropdown-item:hover { background: var(--card); } /* Dropdowns — lang */ .lang-dropdown { background: var(--surface); border-color: var(--border); box-shadow: 0 16px 40px rgba(0,0,0,0.18); } .lang-option:hover, .lang-option.active { background: var(--card); } /* Search box */ .nav-search-box { background: var(--card); border-color: var(--border); box-shadow: var(--dropdown-shadow); } .nav-search-input { color: var(--text-primary); border-bottom-color: var(--border); } .nav-sug-item { color: var(--text-primary); border-bottom-color: var(--border); } .nav-sug-item:hover { background: var(--surface); } .nav-sug-type { background: var(--surface); border-color: var(--border); } /* Notification dropdown */ .nav-notif-dropdown { background: var(--card); border-color: var(--border); box-shadow: var(--dropdown-shadow); } .nav-notif-item:hover { background: var(--surface); } .nav-notif-item.unread { background: rgba(201,168,76,0.05); } /* Mega menu */ .realms-mega { background: var(--mega-bg); border-color: var(--border); box-shadow: 0 24px 64px rgba(0,0,0,0.18); } .realms-mega-inner { background: var(--border); } .realm-mega-col { background: var(--mega-bg); } .realm-mega-col:hover { background: var(--surface); } /* Face rows inside mega */ .realm-mega-face { border-top-color: var(--border); } /* Mobile nav */ .mobile-nav { background: var(--mobile-nav-bg); border-left-color: var(--border); } [dir="rtl"] .mobile-nav { border-right-color: var(--border); } .mobile-nav ul li { border-bottom-color: var(--border); } /* Forms */ .form-input, .form-select, .newsletter-input { background: var(--surface); border-color: var(--border); color: var(--text-primary); } .form-input:focus, .form-select:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 3px var(--gold-glow); } /* Auth modal */ .modal { background: var(--surface); border-color: var(--border); } .modal-overlay { background: rgba(0,0,0,0.6); } [data-theme="light"] .modal-overlay { background: rgba(40,30,10,0.45); } /* Sections */ .newsletter-section { background: var(--deep); } .footer { background: var(--deep); border-top-color: var(--border); } /* Light-specific hero tint */ [data-theme="light"] .hero { background: linear-gradient(145deg, #f0ebe0 0%, #e9e2d0 50%, #ede5d3 100%); } [data-theme="light"] .hero-orb-1, [data-theme="light"] .hero-orb-2, [data-theme="light"] .hero-orb-3 { opacity: 0.12; } /* Selection */ [data-theme="light"] ::selection { background: var(--gold-glow); color: var(--gold); } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--deep); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(154,115,24,0.35); } /* ── 4. Theme Switcher Button ──────────────────────────────── */ .theme-switcher { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.25s; flex-shrink: 0; padding: 0; } .theme-switcher:hover { border-color: var(--gold-dim); color: var(--gold); transform: rotate(20deg); } .theme-switcher:active { transform: rotate(0deg) scale(0.9); } /* Sun icon = shown in dark mode (click → go light) */ /* Moon icon = shown in light mode (click → go dark) */ .theme-switcher .t-sun { display: block; } .theme-switcher .t-moon { display: none; } [data-theme="light"] .theme-switcher .t-sun { display: none; } [data-theme="light"] .theme-switcher .t-moon { display: block; } /* Also hide theme-switcher in the mobile breakpoint's "hide navbar-actions" rule — we keep it visible */ @media (max-width: 768px) { /* Switcher stays in nav-actions on mobile (hamburger shows too) */ .theme-switcher { display: inline-flex; } } /* ── 5. Smooth palette transitions on swap ─────────────────── */ html { transition: background-color 0.28s ease, color 0.28s ease; } body, .navbar, .user-dropdown, .lang-dropdown, .nav-search-box, .nav-notif-dropdown, .realms-mega, .realm-mega-col, .mobile-nav, .card, .article-card, .realm-card, .stat-card, .form-input, .form-select, .modal, .footer { transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease; }