/* BobFit theme system. Three selectable visual directions, switched via [data-theme] on . "glass" is the default and what renders with no attribute at all (see :root below) - matches the pattern of "default look needs no JS/attribute to render correctly", so first paint is never themeless even before the theme-switcher script runs. Every color pair here was chosen or adjusted to clear WCAG 2.1 AA contrast (4.5:1 normal text, 3:1 large text/UI components) - notably, glass panels use a higher opacity white fill than a "true" glassmorphism mockup would, specifically so text stays legible regardless of what's behind the panel. See ACCESSIBILITY.md for the full contrast audit. */ :root, :root[data-theme="glass"] { --font-display: 'Manrope', system-ui, sans-serif; --font-body: 'Figtree', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --ground: #EEF1F6; --ground-blob-1: rgba(76, 111, 255, 0.30); --ground-blob-2: rgba(34, 211, 176, 0.24); --ground-blob-3: rgba(140, 110, 255, 0.20); --surface: rgba(255, 255, 255, 0.82); --surface-strong: rgba(255, 255, 255, 0.92); --surface-border: rgba(255, 255, 255, 0.9); --ink: #12151C; --ink-muted: #4A5468; --accent: #3556E6; --accent-contrast: #FFFFFF; --accent-2: #128A70; --danger: #B3273F; --danger-bg: rgba(255, 90, 90, 0.16); --focus-ring: #1D3FD1; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --blur: blur(16px) saturate(150%); --shadow: 0 8px 24px -12px rgba(30, 50, 100, 0.28); } /* ============================= Athletic Charge ============================= */ :root[data-theme="athletic"] { --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Public Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --ground: #14161A; --ground-blob-1: transparent; --ground-blob-2: transparent; --ground-blob-3: transparent; --surface: #1E2127; --surface-strong: #23262D; --surface-border: #2A2E36; --ink: #F3F4F1; --ink-muted: #9DA2AE; --accent: #FF6A47; --accent-contrast: #14161A; --accent-2: #FFB020; --danger: #FF6A47; --danger-bg: rgba(255, 106, 71, 0.16); --focus-ring: #FFB020; --radius-lg: 8px; --radius-md: 6px; --radius-sm: 4px; --blur: none; --shadow: none; } /* ============================= Training Journal ============================= */ :root[data-theme="journal"] { --font-display: 'Schibsted Grotesk', system-ui, sans-serif; --font-body: 'Nunito Sans', system-ui, sans-serif; --font-mono: 'Courier Prime', ui-monospace, monospace; --ground: #F2ECDF; --ground-blob-1: transparent; --ground-blob-2: transparent; --ground-blob-3: transparent; --surface: #FFFDF7; --surface-strong: #FFFFFF; --surface-border: #D9CDAF; --ink: #2B2A25; --ink-muted: #625B45; --accent: #5B4C86; --accent-contrast: #FFFFFF; --accent-2: #3D6650; --danger: #A03E3E; --danger-bg: #F7E9E4; --focus-ring: #5B4C86; --radius-lg: 6px; --radius-md: 4px; --radius-sm: 3px; --blur: none; --shadow: 0 1px 0 var(--surface-border); } /* Base page: every theme's ground/ink applied at the document level. */ html { /* Percentage height, not 100vh/100dvh - html's own height resolves against the viewport as a special case, and body's min-height below chains off THIS rather than a viewport unit directly. vh/dvh are prone to subpixel rounding on some zoom/DPI combinations that makes the document a fraction of a pixel taller than the viewport, forcing a phantom vertical scrollbar on pages with no content that actually needs it - percentage heights don't have that quirk. */ height: 100%; background: var(--ground); } body { /* Guarantees body's own box (and therefore its background) always covers at least one full viewport - background-attachment: fixed is meant to keep the blobs pinned to the viewport on top of that, but it's unreliable on mobile Safari, so this is the real fix for a short page revealing an uncovered gap below the fold, not just a nice-to-have. */ min-height: 100%; background: radial-gradient(circle at 12% 8%, var(--ground-blob-1), transparent 45%), radial-gradient(circle at 90% 15%, var(--ground-blob-2), transparent 42%), radial-gradient(circle at 25% 95%, var(--ground-blob-3), transparent 45%), var(--ground); background-attachment: fixed; color: var(--ink); font-family: var(--font-body); } h1, h2, h3, h4, .font-display { font-family: var(--font-display); } code, .font-mono, .tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Visible focus indicator on every interactive element, in every theme - never rely on the browser default, since custom backgrounds/blur can make it disappear entirely. */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } /* Respect reduced-motion system preference everywhere, not just per-component. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--accent); color: var(--accent-contrast); padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; z-index: 2000; transition: top 0.15s ease; } .skip-link:focus { top: 1rem; }