/* race.travel two-skin theme system. * Skin "trail" (default) — Trail Cinematic. Patagonia + Strava. Dark, sunset amber. * Skin "marathon" — Marathon Minimal. NYRR × Whoop. White, black, mono. * * Applied via [data-skin="X"] on . Selector rules OVERRIDE hardcoded inline styles * present in the legacy HTML files by wrapping them in high-specificity descendants. * If nothing wins, add a specific selector to the override block below. */ :root { /* trail default vars — mirror existing hardcoded palette */ --skin-bg: #0a0a0a; --skin-bg-alt: #181818; --skin-ink: #eee; --skin-muted: #aaa; --skin-accent: #ffb84a; --skin-line: #262626; --skin-header-fg: #ffb84a; --skin-btn-bg: #ffb84a; --skin-btn-fg: #111; --skin-input-bg: #181818; --skin-radius-card:12px; --skin-radius-btn: 10px; --skin-font-head: -apple-system, "Segoe UI", Roboto, sans-serif; --skin-font-body: -apple-system, "Segoe UI", Roboto, sans-serif; --skin-hero-weight: 700; } body[data-skin="marathon"] { --skin-bg: #ffffff; --skin-bg-alt: #f6f6f6; --skin-ink: #0a0a0a; --skin-muted: #666; --skin-accent: #0a0a0a; /* black CTA, minimal */ --skin-line: #e5e5e5; --skin-header-fg: #0a0a0a; --skin-btn-bg: #0a0a0a; --skin-btn-fg: #ffffff; --skin-input-bg: #f6f6f6; --skin-radius-card: 2px; --skin-radius-btn: 0; --skin-font-head: "Space Grotesk", -apple-system, sans-serif; --skin-font-body: -apple-system, "Segoe UI", Roboto, sans-serif; --skin-hero-weight: 500; } /* === Marathon skin overrides for legacy inline styles === */ body[data-skin="marathon"] { background: var(--skin-bg) !important; color: var(--skin-ink) !important; font-family: var(--skin-font-body) !important; } body[data-skin="marathon"] header { background: var(--skin-bg) !important; border-color: var(--skin-line) !important; } body[data-skin="marathon"] header h1, body[data-skin="marathon"] .hero h2 .hi { color: var(--skin-header-fg) !important; } body[data-skin="marathon"] header nav a { color: var(--skin-muted) !important; } body[data-skin="marathon"] header nav a:hover { color: var(--skin-accent) !important; } body[data-skin="marathon"] .hero h2, body[data-skin="marathon"] h1, body[data-skin="marathon"] h2 { color: var(--skin-ink) !important; font-family: var(--skin-font-head) !important; font-weight: var(--skin-hero-weight) !important; letter-spacing: -0.5px !important; } body[data-skin="marathon"] .hero p, body[data-skin="marathon"] p { color: var(--skin-muted) !important; } body[data-skin="marathon"] .stat, body[data-skin="marathon"] .card, body[data-skin="marathon"] .box, body[data-skin="marathon"] .row, body[data-skin="marathon"] .search input { background: var(--skin-bg-alt) !important; border-color: var(--skin-line) !important; color: var(--skin-ink) !important; border-radius: var(--skin-radius-card) !important; } body[data-skin="marathon"] .stat b { color: var(--skin-ink) !important; } body[data-skin="marathon"] .stat small { color: var(--skin-muted) !important; } body[data-skin="marathon"] .search button, body[data-skin="marathon"] button:not(.skin-toggle button):not(.no-theme) { background: var(--skin-btn-bg) !important; color: var(--skin-btn-fg) !important; border-radius: var(--skin-radius-btn) !important; font-weight: 700 !important; } body[data-skin="marathon"] a:not(header nav a):not(.no-theme) { color: var(--skin-accent) !important; } /* === Skin toggle badge (visible on any page) === */ .skin-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; gap: 6px; background: rgba(0,0,0,.75); padding: 6px 8px; border-radius: 999px; font-family: -apple-system, sans-serif; font-size: 11px; color: #ddd; box-shadow: 0 4px 20px rgba(0,0,0,.4); } body[data-skin="marathon"] .skin-toggle { background: rgba(255,255,255,.95); color: #0a0a0a; border: 1px solid #e5e5e5; } .skin-toggle button { background: transparent; border: 1px solid rgba(255,255,255,.25); color: inherit; padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: 11px; } body[data-skin="marathon"] .skin-toggle button { border-color: rgba(0,0,0,.15); } .skin-toggle button.active { background: var(--skin-accent, #ffb84a); color: var(--skin-btn-fg, #111); border-color: transparent; font-weight: 700; }