/* theme-toggle.css — SITE-WIDE light/dark foundation for EMBER. * Injected into every HTML response by the server (see server.mjs htmlInject). * * Design contract (read before editing): * - The toggle engine (theme-toggle.js) sets . * - NEWER course pages already ship BOTH palettes keyed on data-theme; they * switch for free once data-theme flips. * - OLDER pages use a dark-only "cool" palette (--bg #0e1116, --ink, --panel, * --line, --muted …) with no light values. This file supplies those. * - This is injected LAST in , so its [data-theme="light"] rules * win on precedence ties. To avoid clobbering the newer pages' own light * palette, every SHARED variable below is set to the SAME value the newer * pages already use for light — a harmless match on those pages, a helpful * fill-in on the older ones. Cool-palette-only vars get sensible light values. * - We only override for LIGHT. Dark is every page's :root default already. */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ---- LIGHT MODE: variable palette --------------------------------------- */ :root[data-theme="light"] { /* shared / warm-palette vars — values MATCH the newer pages' light palette */ --bg: #FAFAF8; --bg-2: #f2f2ee; --bg-card: #FFFFFF; --bg-hover: #F3F2EE; --text: #1A1B23; --text-sec: #6B6860; --ink: #1a2029; --muted: #5a6675; --line: #d8dee6; --divider: #e3e6ea; --accent: #D4740A; --em-accent: #D4740A; /* cool-palette-only vars (older pages) — chosen light equivalents */ --panel: #FFFFFF; --panel2: #F3F2EE; --card: #FFFFFF; --brand: #D4740A; --brand2: #2b6cb0; --good: #2f9e44; --green: #2f9e44; --bad: #C4342D; --red: #C4342D; --partial: #B8860B; --amber: #B8620A; --blue: #2B6CB0; --crimson: #B53030; /* status pales — lighten for a white ground */ --green-pale:#e7f6ec; --red-pale: #fbeaea; --amber-pale:#fdf1e2; /* ember signature accents kept warm but slightly deepened for white bg */ --ember-c1: #D4740A; --ember-c2: #E8923A; --ember-c3: #F0A868; /* soft shadow tuned for light ground */ --shadow: 0 1px 2px rgba(20,22,30,.06), 0 8px 24px rgba(20,22,30,.08); } /* ── EMBER mascot — LIGHT-MODE flame treatment ────────────────────────────── On cream, the flame's warm base reads as a heavy/dark blob. In LIGHT MODE ONLY: make the two flame PATHS translucent ("reduce the opacity instead of making it dark") + a set-once warm glow so it reads as luminous light-fire. The face is a nested , so `.ember-body > path` never matches the eyes/smile — they stay crisp. Only STATIC props here (opacity + filter) so they COMPOSE with the mascot's flicker animation (morph `d` + `transform` sway + `filter` brightness, defined in mascot.js) instead of overriding its `animation`. Dark mode untouched; overflow:visible + reduced-motion are handled globally in mascot.js's injected CSS. */ :root[data-theme="light"] .ember-sprite .ember-body > path:nth-of-type(1) { opacity: .62; } /* outer flame → soft coral, not dark */ :root[data-theme="light"] .ember-sprite .ember-body > path:nth-of-type(2) { opacity: .30; } /* inner highlight (overrides inline 0.35) */ :root[data-theme="light"] .ember-sprite .ember-body { filter: drop-shadow(0 0 4px rgba(255,140,50,.42)); } /* warm glow, behind the art */ /* ---- Shared chrome: the top nav bar owns its own --en* locals (nav.css), so * override those directly. Higher specificity than nav.css's .ember-nav rule → * wins regardless of stylesheet load order. The account trigger/dropdown and the * chat/a11y chrome already read the global palette above, so they switch for free. */ :root[data-theme="light"] .ember-nav, :root[data-theme="light"] .en-subnav { --enbg: 250, 250, 248; --enink: #1A1B23; --enmut: #5a6675; --enline: rgba(20, 22, 30, .12); --enbrand:#D4740A; } /* Gentle cross-fade when the user flips the switch (not on first paint — * theme-toggle.js adds .theme-anim only after the initial theme is applied). */ :root.theme-anim, :root.theme-anim body, :root.theme-anim .ember-nav, :root.theme-anim .top-actions { transition: background-color .28s ease, color .28s ease, border-color .28s ease; } /* ---- The nav toggle button --------------------------------------------- */ .ember-theme-toggle { order: 4; /* sits AFTER the account trigger (order:3) */ margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 9px; border: 1px solid var(--line, #2a323d); background: var(--panel2, rgba(255,255,255,.06)); color: var(--ink, #e7edf3); cursor: pointer; line-height: 1; font-size: 16px; transition: background-color .18s ease, border-color .18s ease, transform .12s ease; -webkit-appearance: none; appearance: none; } .ember-theme-toggle:hover { border-color: var(--accent, #D4740A); background: var(--bg-hover, rgba(255,255,255,.1)); } .ember-theme-toggle:active { transform: scale(.92); } .ember-theme-toggle:focus-visible { outline: 2px solid var(--accent, #D4740A); outline-offset: 2px; } .ember-theme-toggle .tt-ico { pointer-events: none; } /* show the sun in dark mode (tap → go light) and the moon in light mode */ .ember-theme-toggle .tt-sun { display: inline; } .ember-theme-toggle .tt-moon { display: none; } :root[data-theme="light"] .ember-theme-toggle .tt-sun { display: none; } :root[data-theme="light"] .ember-theme-toggle .tt-moon { display: inline; } /* Safety net for UNIFIED theming: the interactives were originally built with * their OWN light/dark toggle button (.theme-btn / #themeBtn). The unified system * (this file + theme-toggle.js) is now the single source of truth, so hide any * leftover built-in toggle. Our own button (#ember-theme-toggle) is unaffected. */ .theme-btn:not(#ember-theme-toggle), #themeBtn:not(#ember-theme-toggle), .theme-toggle:not(#ember-theme-toggle), #themeToggle:not(#ember-theme-toggle), button[aria-label*="light/dark" i]:not(#ember-theme-toggle), button[title*="Toggle theme" i]:not(#ember-theme-toggle) { display: none !important; } /* When the account cluster floats standalone (no .top-actions host), keep the * toggle reachable as a small fixed control top-right. */ .ember-theme-toggle.tt-float { position: fixed; top: 10px; right: 12px; z-index: 99998; } /* ══════════════════════════════════════════════════════════════════════════ LIGHT-MODE LEGIBILITY FIXES — from the dark↔light computer-vision audit. Every rule is scoped to :root[data-theme="light"] and this sheet is injected LAST, so these win specificity ties WITHOUT changing dark mode. Selectors are page/interactive-specific but harmless where they don't match. (The many --brand2 text findings — phase pills, category labels, eyebrows, consent link — are fixed systemically by theme.js no longer pinning --brand2 in light, so --brand2 resolves to the light palette's #2b6cb0.) ══════════════════════════════════════════════════════════════════════════ */ /* Shared chart donut/ring TRACK (charts.js draws the track as the first ; stroke:var(--line) = #d8dee6 vanishes on white). */ :root[data-theme="light"] .chart-donut svg > circle:first-of-type { stroke: #cfd5de; } /* HOME dashboard */ :root[data-theme="light"] .welcome-copy h1 { color: #f4f7fb; } /* hero heading sits on a PERMANENT dark scrim → keep light in both themes */ :root[data-theme="light"] .comp-icon .pring circle:first-of-type { stroke: #c8ced6; } /* per-module status ring track (white-on-white otherwise) */ :root[data-theme="light"] .progress-bar { background: #e7eaef; border-color: #cfd5de; } /* unfilled progress track container */ /* LEARN */ :root[data-theme="light"] .mcard { border-color: #d8dee6; box-shadow: 0 1px 2px rgba(26,27,35,.05), 0 4px 12px rgba(26,27,35,.06); } /* card edge/lift on white */ :root[data-theme="light"] .jbar { background: #cfd5de; } /* journey progress track */ /* SIM / scenarios */ :root[data-theme="light"] .sim-dot.on { background: var(--brand, #ff7a18); } /* active pagination dot keeps its orange 'you-are-here' signal */ /* ADMIN dashboard */ :root[data-theme="light"] .comp-table td.c-good { color: var(--good, #2f9e44); } /* status count digits readable on white */ :root[data-theme="light"] .comp-table td.c-warn { color: var(--amber, #B8620A); } :root[data-theme="light"] .comp-table td.c-bad { color: var(--bad, #C4342D); } :root[data-theme="light"] .mbar { background: #cfd5de; } /* mastery-bar track visible on white */ /* INTERACTIVES (this sheet is injected into each interactive too) */ /* FSS-INT-04 fire-triangle — the triangle outline + flame glow */ :root[data-theme="light"] #triangleOutline { stroke: #c8ced6; opacity: .9; } :root[data-theme="light"] #flameGroup circle { opacity: .5; } /* FSS-INT-08 spot-the-hazard — elevated checklist chips (scoped, not the global var) */ :root[data-theme="light"] .hazard-list li:not(.found):not(.revealed) { background: #F1F0EA; border-left-color: #c8ced6; } /* FSS-INT-11 fire-classes-matching — recessed icon chips */ :root[data-theme="light"] .fire-icon, :root[data-theme="light"] .ext-icon { background: #F4F2EC; border-color: #d8dee6; } /* FSS-INT-12 aset-rset-timer — slider rails + progress tracks */ :root[data-theme="light"] .slider-track input[type="range"] { background: #cbd2db; } :root[data-theme="light"] .prog-track, :root[data-theme="light"] .bar-track { background: #cbd2db; }