/* Single source of color for the panel. Light values match the existing design; dark values are new. Each page's own stylesheet still owns its detailed component tokens (--card, --ok, --bad, …) but pairs every one of them with a [data-theme="dark"] override, so this file only needs to carry the handful of primitives shared chrome (splash, toggles, logo) draws from. */ :root { --bg: #ffffff; --surface: #f5f5f5; --text: #1a1a1a; --muted: #666666; --border: #e0e0e0; --accent: #0d4f47; --logo-color: var(--text); --logo-ink: #0e1a19; --logo-sub: #0d4f47; } [data-theme="dark"] { --bg: #0e1412; --surface: #17201d; --text: #ececec; --muted: #9a9a9a; --border: #2a332f; --accent: #35a086; --logo-color: var(--text); /* Badge itself needs no dark override (opaque white base circle keeps it legible), but the wordmark ink is near-black in the source art and would vanish against this near-black background, so only the two text fills get a dark-mode swap. */ --logo-ink: var(--text); --logo-sub: var(--accent); } /* Cairo/Manrope are only used by the logo wordmark. Bundled locally (no CDN) at the two weights the mark actually uses. */ @font-face { font-family: "Cairo"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/cairo-800.woff2") format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/manrope-700.woff2") format("woff2"); } html, body { background: var(--bg); color: var(--text); } /* ---------------------------------------------------------------- logo */ .wa-logo { display: inline-flex; line-height: 0; color: var(--logo-color); } .wa-logo svg { display: block; } .wa-logo--sm svg { width: 26px; height: 26px; } .wa-logo--md svg { width: 56px; height: 56px; } .wa-logo--lg svg { width: 132px; height: 132px; } /* ---------------------------------------------------------- theme toggle */ .wa-theme-btn, .wa-lang-btn { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; font-family: inherit; } .wa-lang-btn { width: auto; padding: 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; } .wa-theme-btn:hover, .wa-lang-btn:hover { border-color: var(--accent); color: var(--accent); } .wa-theme-btn svg { width: 16px; height: 16px; } .wa-theme-btn .wa-i-sun { display: none; } [data-theme="dark"] .wa-theme-btn .wa-i-sun { display: block; } [data-theme="dark"] .wa-theme-btn .wa-i-moon { display: none; } /* ------------------------------------------------------------- splash */ /* Critical rules are duplicated inline in (see chrome.js) so the overlay covers the very first paint; this file just keeps them in sync for anything that arrives after. */ .wa-splash { position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity .35s ease; } .wa-splash[hidden] { display: none; } .wa-splash .wa-logo { color: var(--logo-color); opacity: 0; transform: scale(.86); } .wa-splash.wa-play .wa-logo { animation: wa-splash-in 1.15s cubic-bezier(.2,.8,.2,1) forwards; } .wa-splash.wa-out { opacity: 0; pointer-events: none; } @keyframes wa-splash-in { 0% { opacity: 0; transform: scale(.86); } 55% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .wa-splash .wa-logo { opacity: 1; transform: none; animation: none; } .wa-splash.wa-play .wa-logo { animation: none; } }