/* ========================================================================== The Scalp Society — Shared Theme System Light (default) + Dark, toggled via [data-theme] on ========================================================================== */ /* ---------- LIGHT THEME (DEFAULT) ---------- */ :root, html[data-theme="light"] { --bg-primary: #d4cfc9; --bg-card: #c8c2bb; --bg-card-hover: #bfb8b0; --bg-input: #e8e3dd; --bg-overlay: rgba(212, 207, 201, 0.95); --bg-nav: rgba(42, 40, 38, 0.97); --gold: #C8A96E; --gold-light: #d4ba85; --gold-dark: #a8894e; --gold-glow: rgba(200, 169, 110, 0.20); --gold-border: rgba(200, 169, 110, 0.35); --gold-border-active: rgba(200, 169, 110, 0.60); --gold-border-hover: rgba(200, 169, 110, 0.90); --text-primary: #1a1514; --text-secondary: #4a4340; --text-muted: #7a7370; --text-on-dark: #f5f0eb; --border: rgba(26, 21, 20, 0.10); --border-light: rgba(26, 21, 20, 0.06); --shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12); --tss-body-bg: #d4cfc9; --tss-body-color: #1a1514; --tss-nav-bg: rgba(42, 40, 38, 0.97); --tss-nav-border: rgba(200, 169, 110, 0.20); --tss-link-muted: #7a7370; --tss-card-bg: #c8c2bb; --tss-sidebar-bg: #2a2826; --tss-sidebar-text: #d4cfc9; --tss-stat-bg: #c8c2bb; --tss-soft-bg: rgba(26, 21, 20, 0.04); } /* ---------- DARK THEME ---------- */ html[data-theme="dark"] { --bg-primary: #0a0a0a; --bg-card: #141414; --bg-card-hover: #1a1a1a; --bg-input: #1a1a1a; --bg-overlay: rgba(10, 10, 10, 0.92); --bg-nav: rgba(10, 10, 10, 0.95); --gold: #C8A96E; --gold-light: #d4ba85; --gold-dark: #a8894e; --gold-glow: rgba(200, 169, 110, 0.15); --gold-border: rgba(200, 169, 110, 0.20); --gold-border-active: rgba(200, 169, 110, 0.40); --gold-border-hover: rgba(200, 169, 110, 0.90); --text-primary: #f5f0eb; --text-secondary: #a0988e; --text-muted: #6b6560; --text-on-dark: #f5f0eb; --border: rgba(255, 255, 255, 0.08); --border-light: rgba(255, 255, 255, 0.12); --shadow: 0 4px 24px rgba(0, 0, 0, 0.30); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.50); --tss-body-bg: #0a0a0a; --tss-body-color: #f5f0eb; --tss-nav-bg: rgba(10, 10, 10, 0.95); --tss-nav-border: rgba(201, 169, 110, 0.12); --tss-link-muted: #9a9590; --tss-card-bg: #141414; --tss-sidebar-bg: #0e0e0e; --tss-sidebar-text: #9a9590; --tss-stat-bg: #141414; --tss-soft-bg: rgba(0, 0, 0, 0.20); } /* ============================================================ LIGHT MODE OVERRIDES — high specificity to override hardcoded colors that don't use the CSS variables. ============================================================ */ html[data-theme="light"] body { background-color: #d4cfc9 !important; color: #1a1514 !important; } /* ---- Top nav stays dark in both themes (kept dark as a brand bar) ---- */ html[data-theme="light"] nav, html[data-theme="light"] .top-nav, html[data-theme="light"] .site-nav { background: rgba(42, 40, 38, 0.97) !important; border-bottom-color: rgba(200, 169, 110, 0.25) !important; } /* Nav text stays light against the dark bar (no override needed), but if any nav link is forced dark by the page CSS, soften it. */ html[data-theme="light"] nav a { color: #d4cfc9; } /* ---- Sidebar (dashboard, classroom) — keep dark for contrast against beige body ---- */ html[data-theme="light"] .sidebar { background: #2a2826 !important; border-right-color: rgba(200, 169, 110, 0.20) !important; } html[data-theme="light"] .sidebar-label { color: #a8a09a !important; } html[data-theme="light"] .sidebar-link { color: #d4cfc9 !important; } html[data-theme="light"] .sidebar-link:hover { background: rgba(200, 169, 110, 0.12) !important; color: #f5f0eb !important; } html[data-theme="light"] .sidebar-link.active { background: rgba(200, 169, 110, 0.18) !important; color: #d4ba85 !important; } /* ---- Cards: stat, course, available, continue, settings, content, module ---- */ html[data-theme="light"] .stat-card, html[data-theme="light"] .dash-course-card, html[data-theme="light"] .available-card, html[data-theme="light"] .continue-card, html[data-theme="light"] .settings-card, html[data-theme="light"] .content-card, html[data-theme="light"] .module-card, html[data-theme="light"] .lesson-card, html[data-theme="light"] .video-card, html[data-theme="light"] .panel, html[data-theme="light"] .card { background: #c8c2bb !important; border-color: rgba(200, 169, 110, 0.45) !important; color: #1a1514 !important; } html[data-theme="light"] .stat-card:hover, html[data-theme="light"] .dash-course-card:hover, html[data-theme="light"] .available-card:hover, html[data-theme="light"] .continue-card:hover, html[data-theme="light"] .settings-card:hover, html[data-theme="light"] .content-card:hover, html[data-theme="light"] .module-card:hover { background: #bfb8b0 !important; border-color: rgba(200, 169, 110, 0.85) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10) !important; } /* ---- Stat card text ---- */ html[data-theme="light"] .stat-card .stat-label { color: #4a4340 !important; } html[data-theme="light"] .stat-card .stat-value { color: #8a6f3a !important; } /* ---- Generic muted text in light mode (was #9a9590 / #555 / #666 on dark bg) ---- */ html[data-theme="light"] .welcome-header p, html[data-theme="light"] .continue-info p, html[data-theme="light"] .course-card-info p, html[data-theme="light"] .available-card p, html[data-theme="light"] .progress-text, html[data-theme="light"] .settings-label, html[data-theme="light"] .empty-state p { color: #4a4340 !important; } /* Section / page titles */ html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] .section-title, html[data-theme="light"] .welcome-header h1, html[data-theme="light"] .continue-info h3, html[data-theme="light"] .course-card-info h3, html[data-theme="light"] .available-card h3 { color: #1a1514; } /* Continue / continue-arrow icons */ html[data-theme="light"] .continue-icon, html[data-theme="light"] .continue-arrow { background: rgba(200, 169, 110, 0.18) !important; } html[data-theme="light"] .continue-info .continue-label { color: #8a6f3a !important; } /* Progress bar track */ html[data-theme="light"] .progress-bar { background: rgba(26, 21, 20, 0.10) !important; } /* Status pills */ html[data-theme="light"] .status-active { background: rgba(200, 169, 110, 0.22) !important; color: #6e5727 !important; } html[data-theme="light"] .status-locked { background: rgba(26, 21, 20, 0.12) !important; color: #4a4340 !important; } html[data-theme="light"] .status-complete { background: rgba(76, 175, 80, 0.18) !important; color: #2e6a31 !important; } /* Buttons: outline button readable on beige */ html[data-theme="light"] .btn-sm-outline { color: #6e5727 !important; border-color: rgba(200, 169, 110, 0.55) !important; } html[data-theme="light"] .btn-sm-outline:hover { background: rgba(200, 169, 110, 0.15) !important; } /* Settings rows divider */ html[data-theme="light"] .settings-row { border-bottom-color: rgba(26, 21, 20, 0.08) !important; } /* Inputs / textareas */ html[data-theme="light"] input[type="text"], html[data-theme="light"] input[type="email"], html[data-theme="light"] input[type="password"], html[data-theme="light"] input[type="search"], html[data-theme="light"] input[type="url"], html[data-theme="light"] input[type="tel"], html[data-theme="light"] input[type="number"], html[data-theme="light"] textarea, html[data-theme="light"] select { background: #e8e3dd !important; color: #1a1514 !important; border-color: rgba(26, 21, 20, 0.15) !important; } /* ---- Inline-style fallbacks: HTML pages contain `style="background:#141414"` etc. These attribute selectors catch the most common inline patterns. ---- */ html[data-theme="light"] [style*="background:#141414"], html[data-theme="light"] [style*="background: #141414"], html[data-theme="light"] [style*="background:#0a0a0a"], html[data-theme="light"] [style*="background: #0a0a0a"], html[data-theme="light"] [style*="background:#0e0e0e"], html[data-theme="light"] [style*="background: #0e0e0e"], html[data-theme="light"] [style*="background:#1a1a1a"], html[data-theme="light"] [style*="background: #1a1a1a"] { background: #c8c2bb !important; } html[data-theme="light"] [style*="color:#9a9590"], html[data-theme="light"] [style*="color: #9a9590"], html[data-theme="light"] [style*="color:#f5f0eb"], html[data-theme="light"] [style*="color: #f5f0eb"] { color: #4a4340 !important; } html[data-theme="light"] [style*="color:#c9a96e"], html[data-theme="light"] [style*="color: #c9a96e"] { color: #8a6f3a !important; } /* ---- DARK THEME OVERRIDES ---- */ html[data-theme="dark"] body { background-color: #0a0a0a !important; color: #f5f0eb !important; } /* ---------- THEME TOGGLE BUTTON (injected by theme-toggle.js) ---------- */ .tss-theme-toggle { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 9999; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border-radius: 999px; border: 1px solid rgba(200, 169, 110, 0.55); background: #2a2826; color: #f5f0eb; font-family: 'Inter', -apple-system, sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease; -webkit-tap-highlight-color: transparent; } html[data-theme="light"] .tss-theme-toggle { background: #2a2826; color: #f5f0eb; border-color: rgba(200, 169, 110, 0.55); } html[data-theme="dark"] .tss-theme-toggle { background: #c8c2bb; color: #1a1514; border-color: rgba(200, 169, 110, 0.55); } .tss-theme-toggle:hover { transform: translateY(-1px); border-color: rgba(200, 169, 110, 0.95); } .tss-theme-toggle:active { transform: translateY(0); } .tss-theme-toggle .tss-toggle-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; } .tss-theme-toggle .tss-toggle-label { display: inline-block; } @media (max-width: 600px) { .tss-theme-toggle { bottom: 0.85rem; right: 0.85rem; padding: 0.5rem 0.8rem; font-size: 0.72rem; } .tss-theme-toggle .tss-toggle-label { display: none; } } /* Smooth element transitions when swapping themes */ html[data-theme] body, html[data-theme] nav, html[data-theme] .sidebar, html[data-theme] .stat-card, html[data-theme] .dash-course-card, html[data-theme] .available-card, html[data-theme] .continue-card, html[data-theme] .settings-card, html[data-theme] .content-card, html[data-theme] .module-card, html[data-theme] .card, html[data-theme] .panel { transition: background-color 0.30s ease, background 0.30s ease, color 0.30s ease, border-color 0.30s ease; }