/* OutRun theme — the neutral "app shell" skin. * * Loaded AFTER wo-shared.css on shell pages (sign-up, /home, /install, account, * /rewards, /dashboard) together with ``. Event pages * (/, /gallery, /wo-real, /running) omit the class and stay on the WO?! sunset * skin — that's the brand switch. * * Why a body-class instead of a bare :root override: wo-shared.css is loaded by * every page and sets :root vars + a fixed `body` sunset gradient. `body.theme-outrun` * beats the bare `body` rule on specificity, so this file re-paints ONLY the * shell subtree and never leaks onto event pages, regardless of load order. * * Tokens are lifted from landing/styles/landing.css so the shell matches the * outrunworld.com landing exactly. */ body.theme-outrun { /* --- OutRun palette (used by new shell pages: home/rewards/dashboard) --- */ --ink: #0E0F13; --ink2: #16171F; --paper: #FBF7F0; --paper2: #F3ECE1; --card: #FFFFFF; --on-dark: #F7EFE4; --on-dark-soft: rgba(247, 239, 228, 0.72); --on-light: #1B1714; --on-light-soft: #6E6357; --a1: #FF6A3D; /* vivid orange */ --a2: #F7345E; /* pink-red */ --teal: #16B3A3; --sage: #7BAE4F; --line-l: rgba(27, 23, 20, 0.10); --line-d: rgba(247, 239, 228, 0.12); /* --- WO?! "peek" tokens — only for the event-teaser card on the home hub --- */ --wo-coral: #D96A3A; --wo-gold: #E8A654; --wo-blue: #2B3F6B; --wo-cream: #F5E2C7; --wo-night: #0A1430; /* --- Legacy var remap so existing components (register.css, .card, .wo-btn-*) reskin to OutRun automatically without per-rule edits. wo-shared.css and page sheets reference these names; here they resolve to OutRun values. --- */ --coral: #FF6A3D; /* WO?! coral → OutRun orange */ --gold: #FF8A4D; /* → warm orange (accent gradient mid) */ --blue: #16171F; /* dark strip → OutRun ink2 */ --grey: #20212B; --cream: #F7EFE4; /* WO?! cream → OutRun on-dark (near-identical) */ /* OutRun hero gradient (matches mockup-1-hub stage + landing dark hero) */ background: radial-gradient(900px 600px at 50% -10%, #241a1f, #0b0c10 60%); background-attachment: fixed; color: var(--on-dark); } /* h1 accent: OutRun has no "?!" — neutralise the coral .q so any stray markup doesn't flash WO?! coral on a shell page. */ body.theme-outrun h1 .q { color: var(--a1); } /* --- shared chrome overrides (menu / buttons / toast) so the reused wo-shared.css scaffolding reads OutRun on shell pages --- */ body.theme-outrun .menu-btn { background: rgba(247, 239, 228, 0.07); border-color: rgba(247, 239, 228, 0.20); color: var(--on-dark); } /* avatar-as-menu-button (consistent across every page, filled by wo-user.js) */ body.theme-outrun .menu-btn.has-avatar { padding: 0; overflow: hidden; } body.theme-outrun .menu-btn.has-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } body.theme-outrun .menu-btn .menu-av { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 800; font-size: 16px; } body.theme-outrun .menu-dropdown { background: rgba(14, 15, 19, 0.96); border-color: rgba(247, 239, 228, 0.16); } body.theme-outrun .menu-dropdown a, body.theme-outrun .menu-dropdown button { color: var(--on-dark); } body.theme-outrun .menu-dropdown a:hover, body.theme-outrun .menu-dropdown button:hover { background: rgba(247, 239, 228, 0.10); } body.theme-outrun .menu-dropdown a.nav-current { color: var(--a1); font-weight: 800; } body.theme-outrun .menu-dropdown .menu-section { font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--on-dark-soft); opacity: 0.65; padding: 10px 14px 3px; } body.theme-outrun .menu-dropdown .menu-section:first-child { padding-top: 4px; } /* Primary button → OutRun orange→pink gradient pill (matches landing .btn-primary) */ body.theme-outrun .wo-btn-primary { background: linear-gradient(100deg, var(--a1), var(--a2)); color: #fff; border-radius: 999px; box-shadow: 0 10px 26px rgba(247, 52, 94, 0.32); } body.theme-outrun .wo-btn-ghost { border-color: rgba(247, 239, 228, 0.30); color: var(--on-dark); border-radius: 999px; } body.theme-outrun .wo-btn-ghost:hover { background: rgba(247, 239, 228, 0.10); } body.theme-outrun .toast { background: var(--ink2); border-color: rgba(247, 239, 228, 0.16); color: var(--on-dark); } /* In-content links pick up the OutRun orange instead of WO?! gold/coral. */ body.theme-outrun .card a, body.theme-outrun .hint a, body.theme-outrun p a { color: var(--a1); text-decoration-color: rgba(255, 106, 61, 0.5); } body.theme-outrun .card a:hover, body.theme-outrun .hint a:hover, body.theme-outrun p a:hover { color: var(--a2); text-decoration-color: var(--a2); } /* The "powered by outrunworld.com" badge is already the OutRun tie-in; on shell pages it's redundant chrome, so soften it (pages may simply omit it). */ body.theme-outrun .powered-by b { color: var(--a1); } /* --- shared bottom tab bar (auto-filled by wo-util.js where #tabbar exists) --- */ body.theme-outrun .tabbar { display: flex; justify-content: space-around; padding: 12px 8px; margin-top: 16px; background: var(--ink2); border: 1px solid var(--line-d); border-radius: 18px; } body.theme-outrun .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; color: var(--on-dark-soft); text-decoration: none; } body.theme-outrun .tabbar a.active { color: var(--a1); } body.theme-outrun .tabbar .ti { font-size: 19px; } /* ============================================================ UX polish === Three consolidated iterations applied app-wide: 1) native app-shell feel (sticky safe-area nav + press feedback + focus), 2) entrance motion (staggered fade-in + animated meters), 3) count-up numbers (JS, see wo-util.js). All motion respects prefers-reduced-motion. */ /* 1 — sticky, safe-area-aware bottom nav so "home" is always one tap */ body.theme-outrun .tabbar { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 20; background: rgba(22, 23, 31, 0.92); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } body.theme-outrun .tabbar a { transition: color .15s ease, transform .06s ease; } /* 1 — press feedback on every tappable surface */ body.theme-outrun .tile, body.theme-outrun .dash-card, body.theme-outrun .ev-act, body.theme-outrun .team, body.theme-outrun .rw-row, body.theme-outrun .btn, body.theme-outrun .wo-btn-primary, body.theme-outrun .wo-btn-ghost { transition: transform .07s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; } body.theme-outrun .tile:active, body.theme-outrun .dash-card:active, body.theme-outrun .ev-act:active, body.theme-outrun .btn:active, body.theme-outrun .tabbar a:active, body.theme-outrun .wo-btn-primary:active, body.theme-outrun .wo-btn-ghost:active { transform: translateY(1px) scale(0.992); } /* 1 — clearer keyboard focus ring in the OutRun accent */ body.theme-outrun :focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; border-radius: 8px; } /* 2 — entrance motion (staggered) + meter fill, motion-safe only */ @media (prefers-reduced-motion: no-preference) { @keyframes orFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } body.theme-outrun .home-body, body.theme-outrun .ev-head, body.theme-outrun .racemap-card, body.theme-outrun .prize-banner, body.theme-outrun .podium, body.theme-outrun .me-strip, body.theme-outrun .stat, body.theme-outrun .team, body.theme-outrun .rw-row, body.theme-outrun .dash-card { animation: orFade .42s cubic-bezier(.2,.7,.2,1) both; } /* stagger the repeating rows/cards */ body.theme-outrun .team:nth-child(2), body.theme-outrun .rw-row:nth-child(2), body.theme-outrun .stat:nth-child(2) { animation-delay: .05s; } body.theme-outrun .team:nth-child(3), body.theme-outrun .rw-row:nth-child(3), body.theme-outrun .stat:nth-child(3) { animation-delay: .10s; } body.theme-outrun .rw-row:nth-child(4), body.theme-outrun .stat:nth-child(4) { animation-delay: .15s; } body.theme-outrun .rw-row:nth-child(n+5) { animation-delay: .2s; } } /* 3 — count-up helper hook (number tween handled in JS) */ body.theme-outrun .num-tween { font-variant-numeric: tabular-nums; } /* --- OutRun brand lockup (mark + wordmark) — shared by all shell pages --- */ body.theme-outrun .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } body.theme-outrun .brand-mark { width: 24px; height: 35px; flex-shrink: 0; } body.theme-outrun .wordmark { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; line-height: 1; color: var(--on-dark); } body.theme-outrun .wordmark .run { background: linear-gradient(100deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }