/* ============================================================ * marketing-theme.css * * Light-mode CSS variable overrides for the marketing site (homepage, * features, pricing, about, blog, FAQ, login, register, etc.). Each page * defines its own dark-mode :root variables inline; this stylesheet * supplies the light counterparts so a single theme toggle flips the * whole site without page-by-page edits. * * Trigger: (set by marketing-theme.js). * * Brand colors are intentionally untouched — Remotracker purple should * stay consistent across themes for recognisability. * ============================================================ */ [data-theme="light"] { /* Backgrounds — soft off-white surfaces, not pure white, to keep some warmth and avoid the "blinding spreadsheet" feel of #FFF everywhere */ --bg: #F4F5FA; --bg-soft: #FFFFFF; --bg-card: #FFFFFF; --bg-card-hover: #EEF0F6; /* Borders — black at low opacity matches the dark-mode pattern of white-at-low-opacity, just inverted */ --border: rgba(0,0,0,.08); --border-strong: rgba(0,0,0,.14); /* Text — high-contrast near-black for body, mid-greys for hierarchy */ --text: #1A1A2E; --text-dim: #4B5563; --text-muted: #6B7280; /* Shadows — softened for the lighter background; same offsets, lower opacity so cards still lift visually but don't look like cutouts */ --shadow-lg: 0 20px 50px -15px rgba(15, 15, 35, 0.18); --shadow-glow: 0 0 80px -20px rgba(168, 85, 247, 0.25); } /* The browser's handles status bar colour for mobile, but it's set at page load and doesn't change live. So when we toggle to light mode, also smooth the page background colour transition to avoid a jarring flash. */ html { transition: background-color .25s ease; } /* ── Theme toggle button (placed in the nav) ── */ .nav-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text); cursor: pointer; font-size: 17px; line-height: 1; padding: 0; margin-right: 10px; transition: background-color .2s ease, transform .2s ease, border-color .2s ease; /* Crisp emoji rendering at small sizes — without this the moon glyph gets antialiased into mush on Windows. */ -webkit-font-smoothing: antialiased; user-select: none; } .nav-theme-toggle:hover { background: rgba(255,255,255,.10); border-color: var(--border-strong, rgba(255,255,255,.18)); transform: translateY(-1px); } .nav-theme-toggle:active { transform: scale(.92); } .nav-theme-toggle:focus-visible { outline: 2px solid var(--brand, #818CF8); outline-offset: 2px; } /* Light-mode button — invert the surface so it still looks like a chip on the lighter background */ [data-theme="light"] .nav-theme-toggle { background: rgba(0,0,0,.04); border-color: var(--border); } [data-theme="light"] .nav-theme-toggle:hover { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.14); } /* Mobile-menu version of the toggle (shown inside .nav-mobile when the burger opens). Same look, full-width tap target. */ .nav-mobile .nav-theme-toggle { width: 100%; height: 44px; justify-content: flex-start; padding: 0 16px; font-size: 14px; font-weight: 500; gap: 10px; margin-right: 0; } /* ============================================================ * LIGHT-MODE OVERRIDES — comprehensive fix for hardcoded colors * * Why this section exists: the marketing pages use a mix of CSS * variables AND hardcoded hex / rgba colors. Just flipping the * variables above isn't enough — every hardcoded value needs its * own light-mode counterpart, otherwise we get the "dark text on * dark bg" failure mode visible in the screenshots. * * The general pattern below: anything that hardcoded * rgba(255,255,255, X) for a "subtle surface tint on dark" * becomes rgba(15,15,35, X) — same opacity, same intent, just * inverted for a light background. Anything that hardcoded a * dark hex (#0A0A14, #06060D) gets its light equivalent. * * Specificity: every rule here is [data-theme="light"] + * selector, which beats both the page's inline