/* ============================================================ AESOP AI Academy — Dark Mode Theme academy-dark-mode.css v1.0.1 | April 2026 AesopAcademy.org Usage: Applied by adding data-theme="dark" to . Preference persisted in localStorage key: "aesop-theme". ============================================================ */ /* ─── DARK MODE TOKEN OVERRIDES ─────────────────────────── */ [data-theme="dark"] { /* Surface colors */ --cream: #0f1923; /* page background */ --white: #17232f; /* card / panel background */ /* Navy STAYS dark navy — do NOT flip to gold. Elements that need gold in dark mode are handled with explicit rules below, not via this token. */ --navy: #0d1b2a; --navy-mid: #16293d; --navy-light: #1e3a52; /* Gold stays gold */ --gold: #c9a05a; --gold-light: #dbb87a; --gold-pale: rgba(201,160,90,0.12); /* Ink → inverted to near-white for body text */ --ink: #e8e3db; --ink-mid: #cec8be; --ink-light: #a89f93; --ink-muted: #6e6861; /* Borders → subtle on dark surface */ --border: #2a3a4a; --border-light: #1e2d3d; /* Teal stays vibrant on dark */ --teal: #3dd6c0; --teal-dark: #2ba898; /* Semantic colors — slightly brightened for dark bg */ --green: #4fcf8a; --amber: #f0b429; --red: #f07070; /* Shadows → deeper on dark */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25); --shadow-md: 0 4px 20px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30); --shadow-lg: 0 12px 48px rgba(0,0,0,0.55), 0 4px 20px rgba(0,0,0,0.35); --shadow-gold: 0 4px 24px rgba(201,160,90,0.22); } /* ─── BODY & PAGE BACKGROUND ─────────────────────────────── */ [data-theme="dark"] body { background: var(--cream); color: var(--ink); } /* ─── NAV ────────────────────────────────────────────────── */ [data-theme="dark"] .nav { background: rgba(15, 25, 35, 0.96); border-bottom-color: var(--border); } [data-theme="dark"] .nav-brand-primary { color: var(--gold-light); } [data-theme="dark"] .nav-brand-primary:hover { color: var(--gold); } [data-theme="dark"] .nav-link { color: var(--ink-light); } [data-theme="dark"] .nav-link:hover { background: var(--border); color: var(--ink); } [data-theme="dark"] .nav-btn--primary { background: var(--gold); color: #0f1923; border-color: var(--gold); } [data-theme="dark"] .nav-btn--primary:hover { background: var(--gold-light); border-color: var(--gold-light); } /* ─── HERO (index page — already dark, tweak overlays) ─── */ [data-theme="dark"] .hero { background: #080f17; } [data-theme="dark"] .hero-bg { background: radial-gradient(ellipse 80% 60% at 65% 40%, rgba(201,160,90,0.14) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 10% 80%, rgba(61,214,192,0.10) 0%, transparent 55%), linear-gradient(175deg, #080f17 0%, #0f1923 60%, #080f17 100%); } /* ─── SECTIONS ───────────────────────────────────────────── */ [data-theme="dark"] .section--alt { background: #17232f; } [data-theme="dark"] .section--cream { background: #0f1923; } [data-theme="dark"] .section--dark { background: #080f17; } /* section-title: gold accent on dark is intentional here */ [data-theme="dark"] .section-title { color: var(--gold-light); } [data-theme="dark"] .section-lead { color: var(--ink-light); } /* ─── CARDS ──────────────────────────────────────────────── */ [data-theme="dark"] .card { background: #17232f; border-color: var(--border); } [data-theme="dark"] .card:hover { border-color: rgba(201,160,90,0.35); } /* ─── HEADINGS that use color: var(--navy) in light mode ─── */ /* In light mode these are dark navy text; in dark mode they should be light ink — NOT gold. */ [data-theme="dark"] .section-title, [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--ink); } /* section-title overrides the above intentionally to gold */ [data-theme="dark"] .section-title { color: var(--gold-light); } /* ─── BADGES ─────────────────────────────────────────────── */ [data-theme="dark"] .badge--dev { background: rgba(240,180,41,0.14); border-color: rgba(240,180,41,0.30); } [data-theme="dark"] .badge--live { background: rgba(79,207,138,0.12); border-color: rgba(79,207,138,0.28); } [data-theme="dark"] .badge--pending { background: rgba(240,112,112,0.12); border-color: rgba(240,112,112,0.25); } [data-theme="dark"] .badge--gold { background: rgba(201,160,90,0.14); border-color: rgba(201,160,90,0.30); } /* ─── STATUS LIST ────────────────────────────────────────── */ [data-theme="dark"] .status-item { border-bottom-color: var(--border); } [data-theme="dark"] .status-name { color: var(--ink-mid); } /* ─── EYEBROW ────────────────────────────────────────────── */ [data-theme="dark"] .eyebrow { border-color: rgba(201,160,90,0.35); background: rgba(201,160,90,0.10); } /* ─── FOOTER ─────────────────────────────────────────────── */ [data-theme="dark"] .footer { background: #080f17; border-top: 1px solid var(--gold-pale, rgba(201,160,90,0.18)); color: var(--ink-mid); } [data-theme="dark"] .footer-inner { border-bottom-color: var(--border); } [data-theme="dark"] .footer-brand { color: var(--gold-light); } [data-theme="dark"] .footer-tagline { color: var(--ink-light); } [data-theme="dark"] .footer-link { color: var(--ink-mid); } [data-theme="dark"] .footer-link:hover { color: var(--gold-light); } [data-theme="dark"] .footer-tm, [data-theme="dark"] .footer-patent { color: var(--ink-light); } /* ─── BANNER STRIP ───────────────────────────────────────── */ [data-theme="dark"] .banner-strip { background: #c9a05a; color: #0f1923; } /* ─── BUTTONS ────────────────────────────────────────────── */ [data-theme="dark"] .btn--primary { background: var(--gold); color: #0f1923; } [data-theme="dark"] .btn--primary:hover { background: var(--gold-light); } /* ─── DARK MODE TOGGLE BUTTON ────────────────────────────── */ .dark-mode-toggle { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; background: none; border: none; padding: 0.35rem 0.6rem; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--ink-light); transition: background var(--transition), color var(--transition); user-select: none; flex-shrink: 0; } .dark-mode-toggle:hover { background: var(--border-light); color: var(--ink); } .dark-mode-toggle__track { position: relative; width: 34px; height: 19px; border-radius: 99px; background: var(--border); border: 1.5px solid var(--border); transition: background var(--transition), border-color var(--transition); flex-shrink: 0; } .dark-mode-toggle__thumb { position: absolute; top: 1.5px; left: 1.5px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-muted); transition: transform var(--transition), background var(--transition); } [data-theme="dark"] .dark-mode-toggle__track { background: var(--gold); border-color: var(--gold); } [data-theme="dark"] .dark-mode-toggle__thumb { transform: translateX(15px); background: #0f1923; } [data-theme="dark"] .dark-mode-toggle { color: var(--ink-light); } [data-theme="dark"] .dark-mode-toggle:hover { background: var(--border); } .dark-mode-toggle__icon { font-size: 0.85rem; line-height: 1; } /* ─── SMOOTH TRANSITION ON THEME SWITCH ─────────────────── */ html { transition: color 0.25s ease, background-color 0.25s ease; } body, .nav, .card, .footer, .section--alt, .section--cream, .section--dark { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ─── DARK-BACKGROUND HERO SECTIONS ─────────────────────── */ /* These sections have permanently dark backgrounds — their headings must stay white/gold regardless of dark mode token overrides. Scoped tightly to avoid affecting other h1/h2. */ [data-theme="dark"] .tx-hero h1, [data-theme="dark"] .courses-hero h1, [data-theme="dark"] .tracker-hero h1 { color: #ffffff; } [data-theme="dark"] .tx-hero h1 span, [data-theme="dark"] .courses-hero h1 span, [data-theme="dark"] .tracker-hero h1 span { color: #dbb87a; } [data-theme="dark"] .tx-hero p, [data-theme="dark"] .courses-hero p, [data-theme="dark"] .tracker-hero p { color: rgba(255,255,255,0.65); } /* ─── POLICY PAGES ───────────────────────────────────────── */ /* Accordion-style pages (ada-policy, ai-policy) */ [data-theme="dark"] .pol-section-head h2 { color: var(--ink); } [data-theme="dark"] .pol-body { color: var(--ink-light); } [data-theme="dark"] .pol-body strong { color: var(--ink-mid); } [data-theme="dark"] .group-label { color: var(--ink-mid); } [data-theme="dark"] .policy-body h2, [data-theme="dark"] .policy-body h3 { color: var(--ink); } [data-theme="dark"] .policy-body p, [data-theme="dark"] .policy-body li { color: var(--ink-light); } [data-theme="dark"] .policy-body p strong, [data-theme="dark"] .callout p strong { color: var(--ink-mid); } /* Doc-style pages (ferpa-coppa, data-retention, bias-audit, engine-transparency) */ [data-theme="dark"] .policy-eyebrow { color: var(--ink-mid); } [data-theme="dark"] .doc-section h2, [data-theme="dark"] .doc-section h3 { color: var(--ink); border-bottom-color: var(--border); } [data-theme="dark"] .doc-section p, [data-theme="dark"] .doc-section li { color: var(--ink-light); } [data-theme="dark"] .doc-section strong { color: var(--ink-mid); } [data-theme="dark"] .doc-section a { color: var(--teal); } [data-theme="dark"] .law-line { background: var(--border); } [data-theme="dark"] .law-badge { background: var(--navy-mid); color: var(--ink-mid); } [data-theme="dark"] .law-cite { color: var(--ink-light); } [data-theme="dark"] .data-table th { background: var(--navy-mid); color: var(--ink-mid); } [data-theme="dark"] .data-table td { color: var(--ink-light); border-bottom-color: var(--border); } [data-theme="dark"] .data-table tr:hover td { background: var(--navy-light); } [data-theme="dark"] .callout-blue { background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.3); color: var(--ink-light); } [data-theme="dark"] .callout-green { background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.3); color: var(--ink-light); } [data-theme="dark"] .callout-gold { background: rgba(201,160,90,0.12); border-color: rgba(201,160,90,0.3); color: var(--ink-light); } [data-theme="dark"] .contact-card { background: var(--navy-mid); border-color: var(--border); } [data-theme="dark"] .contact-card .role { color: var(--ink-light); } [data-theme="dark"] .contact-card a { color: var(--teal); } [data-theme="dark"] .vendor-link { background: var(--navy-mid); color: var(--ink-mid); border-color: var(--border); } [data-theme="dark"] .badge-green { background: rgba(22,163,74,0.15); color: var(--green); } [data-theme="dark"] .badge-amber { background: rgba(201,160,90,0.15); color: var(--amber); } [data-theme="dark"] .pipeline-step, [data-theme="dark"] .flow-step { background: var(--navy-mid); color: var(--ink); } [data-theme="dark"] .flow-diagram { background: var(--navy-mid); }