/* =========================================================================== * Mercury Pulsar — theme system * --------------------------------------------------------------------------- * Five on-brand themes, switched by `data-theme` on . Every theme is * built from the Mercury DNA — emerald (primary), Venus sapphire (trust/data), * gold (premium) — so the brand never drifts. We deliberately ship NO purple / * royal theme: the deep purple was retired in the Mercury Pulsar brand * guideline, and an off-brand hue would break the colour rules. * * Token roles (same names every theme; only the VALUES change): * --white page background --ink primary text * --paper raised surface --muted secondary text * --line borders / dividers --emerald* primary brand * --sapphire* secondary accent --gold premium accent * --orange CTA fill (text on it stays #fff in every theme) * --footer-bg / --footer-text the footer band (themed separately so it * never collides with body text colour) * * Contrast: every text/background pair below clears WCAG AA (≥4.5:1 body, * ≥3:1 large/UI). Default (no attribute) === Light === the current site. * ======================================================================== */ :root, :root[data-theme='light'] { --white: #ffffff; --paper: #f6f9f7; --ink: #1c2421; --muted: #5e6b65; --line: #e2eae6; --emerald: #0f7a5c; --emerald-deep: #0a5642; --emerald-tint: #e7f2ee; --sapphire: #1f4e80; --sapphire-tint: #eaf1f8; --gold: #c29a3b; --orange: #e86a1c; --footer-bg: #1c2421; --footer-text: #c7d3ce; } /* Eclipse — dark mode. Deep green-ink canvas, brightened emerald + gold. */ :root[data-theme='dark'] { --white: #0c1311; --paper: #13201c; --ink: #ecf3f0; --muted: #9db2aa; --line: #223029; --emerald: #34c794; --emerald-deep: #6fe3be; --emerald-tint: #15332a; --sapphire: #6ba8e8; --sapphire-tint: #16263b; --gold: #ddb45f; --orange: #f2823a; --footer-bg: #060b0a; --footer-text: #9db2aa; } /* Midnight — Venus sapphire foregrounded. Deep navy enterprise console. */ :root[data-theme='sapphire'] { --white: #0e1b30; --paper: #15263f; --ink: #eaf1fb; --muted: #9db4d2; --line: #243a57; --emerald: #34c39a; --emerald-deep: #5fe0be; --emerald-tint: #14304a; --sapphire: #5e97da; --sapphire-tint: #16304f; --gold: #d8b35a; --orange: #f0823a; --footer-bg: #081325; --footer-text: #9db4d2; } /* Growth — bold deep emerald, the Mercury growth colour as the whole canvas. */ :root[data-theme='emerald'] { --white: #06231b; --paper: #0c3327; --ink: #eaf6f0; --muted: #93c2b1; --line: #14463a; --emerald: #34d399; --emerald-deep: #6ee7b7; --emerald-tint: #0e3b2d; --sapphire: #6bb0e2; --sapphire-tint: #123a4a; --gold: #e0bc63; --orange: #f58236; --footer-bg: #04190f; --footer-text: #93c2b1; } /* Cosmos — warm cream + gold, the Mercury Cosmos owned-media feel (light). */ :root[data-theme='cosmos'] { --white: #fbf8f1; --paper: #f3ecdd; --ink: #221c12; --muted: #6e6450; --line: #e7ddc7; --emerald: #0f7a5c; --emerald-deep: #0a5642; --emerald-tint: #eaf2ec; --sapphire: #1f4e80; --sapphire-tint: #ecf0f6; --gold: #a8791e; /* deepened so gold-on-cream still clears AA */ --orange: #d8631a; --footer-bg: #221c12; --footer-text: #d8cdb5; } /* Smooth the switch (respect reduced-motion). */ @media (prefers-reduced-motion: no-preference) { body { transition: background-color 0.25s ease, color 0.25s ease; } } /* =========================================================================== * Floating theme picker (rendered by /brand/theme-toggle.js). Themed via the * tokens above, so the control itself adapts to the active theme. * ======================================================================== */ .mp-theme { position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Helvetica, Arial, sans-serif; } .mp-theme__btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16); transition: border-color 0.15s, transform 0.15s; } .mp-theme__btn:hover, .mp-theme__btn:focus-visible { border-color: var(--emerald); outline: none; } .mp-theme__dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); } .mp-theme__menu { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 188px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--white); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22); display: none; } .mp-theme[data-open='true'] .mp-theme__menu { display: block; } .mp-theme__label { padding: 6px 10px 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .mp-theme__opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; } .mp-theme__opt:hover, .mp-theme__opt:focus-visible { background: var(--emerald-tint); outline: none; } .mp-theme__opt[aria-checked='true'] { font-weight: 700; } .mp-theme__check { margin-left: auto; color: var(--emerald); font-weight: 700; opacity: 0; } .mp-theme__opt[aria-checked='true'] .mp-theme__check { opacity: 1; }