/* * Spaarc marketing — shared theme tokens + theme-toggle component. * * Every color on the marketing site flows through these `--sp-*` custom * properties. `:root` holds the DARK values (the site's original appearance, * byte-identical). `:root[data-spaarc-theme="light"]` holds the LIGHT set. * * The effective scheme is written to `document.documentElement`'s * `data-spaarc-theme` attribute by the inline FOUC bootstrap in each page's * and by /theme.js. localStorage key `spaarc:theme:v1` (absent => dark) * is shared with the Spaarc portals so a visitor's choice carries across * surfaces on the same browser. */ :root { color-scheme: dark; /* Brand accent */ --sp-turquoise: #00d1c1; --sp-tiffany: #8af0e6; --sp-tiffany-dim: rgba(0, 209, 193, 0.15); --sp-on-accent: #000000; /* Background hierarchy */ --sp-bg: #000000; --sp-bg-card: #0a0a0a; --sp-bg-card-hover: #141414; --sp-surface: #121212; --sp-border: #262626; --sp-border-faint: rgba(255, 255, 255, 0.05); --sp-grid-line: #1a1a1a; /* Text */ --sp-text: #ffffff; --sp-text-secondary: #a3a3a3; --sp-text-dim: #737373; /* Semantic */ --sp-danger: #f87171; --sp-success: #22c55e; --sp-warning: #fbbf24; /* Chrome (translucent nav / menu backdrops) */ --sp-nav-bg: rgba(0, 0, 0, 0.85); --sp-nav-menu-bg: rgba(0, 0, 0, 0.95); /* Accent effects */ --sp-accent-glow: rgba(0, 209, 193, 0.25); /* button hover shadow */ --sp-accent-soft: rgba(0, 209, 193, 0.10); /* subtle turquoise tint fills */ --sp-accent-border: rgba(0, 209, 193, 0.25); /* turquoise-tinted borders */ --sp-glow-1: rgba(0, 209, 193, 0.07); /* hero/section radial glow, inner */ --sp-glow-2: rgba(0, 209, 193, 0.03); /* hero/section radial glow, mid */ --sp-shadow: rgba(0, 0, 0, 0.5); /* neutral elevation (light carries the weight) */ --sp-selection: rgba(0, 209, 193, 0.30); } :root[data-spaarc-theme="light"] { color-scheme: light; /* Brand accent — darker teals so accent text clears WCAG on off-white */ --sp-turquoise: #00b3a4; /* fills / icons / selected states */ --sp-tiffany: #0b7e74; /* links & accent text (>=4.5:1 on --sp-bg) */ --sp-tiffany-dim: rgba(0, 179, 164, 0.12); --sp-on-accent: #062b27; /* dark ink on turquoise fills */ /* Background hierarchy — warm off-white, white cards */ --sp-bg: #f7f6f3; --sp-bg-card: #ffffff; --sp-bg-card-hover: #f2f1ee; --sp-surface: #f1f0ec; --sp-border: #e3e1db; --sp-border-faint: rgba(20, 20, 20, 0.06); --sp-grid-line: #eceae4; /* Text */ --sp-text: #141414; --sp-text-secondary: #5a5751; --sp-text-dim: #8b887f; /* Semantic — proven-on-white */ --sp-danger: #d1242f; --sp-success: #1a7f37; --sp-warning: #9a6700; /* Chrome */ --sp-nav-bg: rgba(247, 246, 243, 0.85); --sp-nav-menu-bg: rgba(247, 246, 243, 0.97); /* Accent effects */ --sp-accent-glow: rgba(0, 179, 164, 0.22); --sp-accent-soft: rgba(0, 179, 164, 0.10); --sp-accent-border: rgba(0, 179, 164, 0.30); --sp-glow-1: rgba(0, 179, 164, 0.06); --sp-glow-2: rgba(0, 179, 164, 0.02); --sp-shadow: rgba(28, 25, 20, 0.12); --sp-selection: rgba(0, 179, 164, 0.22); } ::selection { background: var(--sp-selection); color: var(--sp-text); } /* ── Theme-switch transition ───────────────────────────────────────────── Suppressed on first paint (no `sp-anim` class yet) so the page never fades in. /theme.js adds `sp-anim` after load, so a toggle — or a live OS scheme change while on "system" — animates smoothly. */ html.sp-anim body, html.sp-anim nav, html.sp-anim footer, html.sp-anim .stats-section { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ── Light-mode design nudges ───────────────────────────────────────────── Dark relied on glow + borders for elevation; light needs soft neutral shadows and darker accent *text*. Prefixed with html[...] so they beat the pages' own `.class` / `.class.class` rules regardless of source order. */ html[data-spaarc-theme="light"] .feature-card, html[data-spaarc-theme="light"] .plan-card:not(.featured) { box-shadow: 0 1px 2px var(--sp-shadow), 0 8px 24px rgba(28, 25, 20, 0.05); } html[data-spaarc-theme="light"] .feature-card:hover, html[data-spaarc-theme="light"] .plan-card:not(.featured):hover { box-shadow: 0 6px 24px rgba(28, 25, 20, 0.1); } html[data-spaarc-theme="light"] .plan-card.featured { box-shadow: 0 0 0 1px var(--sp-turquoise), 0 10px 30px rgba(0, 179, 164, 0.14); } /* Accent *text* uses the darker tiffany for contrast on off-white. */ html[data-spaarc-theme="light"] .section-label, html[data-spaarc-theme="light"] .doc-eyebrow, html[data-spaarc-theme="light"] .code, html[data-spaarc-theme="light"] .badge, html[data-spaarc-theme="light"] .plan-trial, html[data-spaarc-theme="light"] .interval-toggle .save-badge, html[data-spaarc-theme="light"] .waitlist-success, html[data-spaarc-theme="light"] .nav-links a.nav-login:hover { color: var(--sp-tiffany); } /* ══ Theme toggle ═════════════════════════════════════════════════════════ Three-segment radiogroup (Light / Dark / System) with a sliding turquoise thumb. Native buttons + radiogroup semantics; keyboard accessible. */ .sp-theme-toggle { position: relative; display: inline-flex; align-items: center; padding: 3px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 100px; flex-shrink: 0; } .sp-theme-thumb { position: absolute; top: 3px; left: 3px; bottom: 3px; width: calc((100% - 6px) / 3); border-radius: 100px; background: var(--sp-turquoise); transform: translateX(0); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease; pointer-events: none; } .sp-theme-toggle[data-active="dark"] .sp-theme-thumb { transform: translateX(100%); } .sp-theme-toggle[data-active="system"] .sp-theme-thumb { transform: translateX(200%); } .sp-theme-opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 28px; padding: 0; background: transparent; border: none; border-radius: 100px; cursor: pointer; color: var(--sp-text-dim); transition: color 0.2s ease; } .sp-theme-opt:hover { color: var(--sp-text-secondary); } .sp-theme-opt[aria-checked="true"] { color: var(--sp-on-accent); } .sp-theme-opt[aria-checked="true"]:hover { color: var(--sp-on-accent); } .sp-theme-opt svg { width: 16px; height: 16px; display: block; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .sp-theme-opt:focus-visible { outline: 2px solid var(--sp-turquoise); outline-offset: 2px; }