/* * ═══════════════════════════════════════════════════════════════ * SATURDAY RACING — SCOREBOARD THEME (shared paper-cream palette * + structural atoms used by every points-based scoreboard page). * * Used by: * /my-picks/ (voting/static/voting/css/my_picks.css) * /steamers/ (races/static/races/css/steamers_board.css) * Future paper-cream scoreboards adopt by: * 1. Adding `scoreboard-theme` to * 2. Linking this file before the page-specific CSS * 3. Reusing `.sb-*` atoms; only writing page-unique rules * * Why scoped (not :root): * The base site is cinematic-dark (see static/css/base.css). * Paper-cream is a deliberate departure for these specific pages. * We scope the tokens to `.scoreboard-theme` so they can't leak * into dark pages and the dark tokens can't leak in here. * * Tintable knobs (override on the page-specific selector): * --sb-accent primary brand accent for the page * (gold for /my-picks/, flame for /steamers/) * --sb-accent-soft tinted background derived from accent * --sb-hero-tint the radial gradient wash behind the hero * * BEM atoms exposed: * .sb-hero / .sb-hero__inner / .sb-hero__kicker * / .sb-hero__title / .sb-hero__sub / .sb-hero__lede * .sb-periods / .sb-periods__inner / .sb-period / .sb-period--active * .sb-stats / .sb-stat / .sb-stat__num / .sb-stat__lbl * / .sb-stat--good / .sb-stat--warm / .sb-stat--bad / .sb-stat--live * .sb-empty / .sb-empty__icon / .sb-empty__title / .sb-empty__sub * .sb-footer / .sb-footer__link * ═══════════════════════════════════════════════════════════════ */ /* ── Palette (paper-cream) ─────────────────────────────────── */ .scoreboard-theme { /* Surfaces */ --sb-paper: #FAFAF7; --sb-card: #FFFFFF; --sb-card-warm: #F7F5EE; --sb-rule: #E7E5DD; --sb-rule-md: #D6D2C5; /* Ink */ --sb-ink: #11151F; --sb-ink-70: #41474F; --sb-ink-40: #9CA3AF; /* Brand accents */ --sb-gold: #D4AF37; --sb-gold-dk: #9C7B12; --sb-gold-wash: #FAF1D7; /* Signal colours */ --sb-emerald: #1A7D4A; --sb-emerald-lt: #2DBD7A; --sb-emerald-soft: rgba(26, 125, 74, 0.10); --sb-amber: #B8860B; --sb-amber-wash: #FAE7B0; --sb-red: #C0392B; --sb-red-soft: rgba(192, 57, 43, 0.08); --sb-blue: #1E4FBE; --sb-blue-soft: rgba(30, 79, 190, 0.10); --sb-flame: #DD5A1E; --sb-flame-soft: rgba(221, 90, 30, 0.10); /* Page-tintable knobs — overridden by .page-* selectors */ --sb-accent: var(--sb-gold-dk); --sb-accent-soft: var(--sb-gold-wash); --sb-hero-tint: var(--sb-gold-wash); background: var(--sb-paper); color: var(--sb-ink); font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); } /* ══ HERO — paper-cream (default) ═══════════════════════════ */ .scoreboard-theme .sb-hero { position: relative; padding: clamp(36px, 5vw, 56px) clamp(16px, 4vw, 32px) clamp(24px, 3vw, 32px); background: radial-gradient(ellipse 60% 55% at 50% 0%, var(--sb-hero-tint) 0%, transparent 70%), var(--sb-paper); border-bottom: 1px solid var(--sb-rule); text-align: center; } .scoreboard-theme .sb-hero__inner { max-width: 780px; margin: 0 auto; } .scoreboard-theme .sb-hero__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 0.20em; color: var(--sb-accent); text-transform: uppercase; margin-bottom: 12px; } .scoreboard-theme .sb-hero__title { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04; margin: 0 0 12px; color: var(--sb-ink); } .scoreboard-theme .sb-hero__sub { font-size: clamp(14px, 1.8vw, 16px); color: var(--sb-ink-70); line-height: 1.55; max-width: 560px; margin: 0 auto 0; } .scoreboard-theme .sb-hero__sub strong { color: var(--sb-ink); font-weight: 700; } .scoreboard-theme .sb-hero__lede { font-size: 14px; color: var(--sb-ink-70); line-height: 1.6; max-width: 580px; margin: 14px auto 0; padding-top: 14px; border-top: 1px dashed var(--sb-rule); } .scoreboard-theme .sb-hero__lede em { color: var(--sb-flame); font-style: normal; font-weight: 700; } /* ══ HERO — cinematic dark variant ═══════════════════════════ * Drop-in `.sb-hero--dark` modifier matches the design pattern of * the racing pages (re-hero) — black background with radial gold/red * accents, italic "eyeline" + bold gold "name", inline stats bar. * * Pulls tokens from base.css (--c-midnight, --c-gold, --c-red, * --c-text-*, --c-border, --font-display) so the dark hero stays in * lockstep with the rest of the cinematic chrome. * * Page authors override these knobs (on `.page-X .sb-hero--dark`): * --sb-hero-dark-kicker-bg accent chip background * --sb-hero-dark-kicker-border accent chip border * --sb-hero-dark-kicker-color accent chip text colour * * Children supported: * .sb-hero__eyebrow flex row holding kicker + date * .sb-hero__eyebrow-kicker small uppercase tag chip * .sb-hero__eyebrow-date ALL CAPS dateline * .sb-hero__eyeline italic "Today's" / "This Saturday" * .sb-hero__name big bold gold serif name (h1 line2) * .sb-hero__subline grey subtitle under name * .sb-hero__stats inline pipe-separated stat bar * .sb-hero__stat stat cell (number + label) * .sb-hero__stat-num tabular gold number * .sb-hero__stat-lbl uppercase tiny label * .sb-hero__tagline single-line italic flourish */ .scoreboard-theme .sb-hero--dark { --sb-hero-dark-kicker-bg: rgba(192, 57, 43, 0.10); --sb-hero-dark-kicker-border: rgba(192, 57, 43, 0.25); --sb-hero-dark-kicker-color: var(--c-red); position: relative; overflow: hidden; padding: clamp(32px, 5vw, 56px) clamp(16px, 4vw, 32px) clamp(24px, 4vw, 36px); background: radial-gradient(ellipse 65% 80% at -5% 60%, rgba(10, 30, 60, 0.9) 0%, transparent 55%), radial-gradient(ellipse 55% 70% at 108% 40%, rgba(100, 15, 50, 0.35) 0%, transparent 55%), radial-gradient(ellipse 40% 55% at 60% 70%, rgba(50, 10, 80, 0.30) 0%, transparent 50%), var(--c-midnight, #060812); border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.09)); color: var(--c-text-75, rgba(236, 238, 245, 0.80)); text-align: left; } .scoreboard-theme .sb-hero--dark::after { /* Subtle vertical vignette + bottom fade, mirrors .re-hero__vignette. */ content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6, 8, 18, 0.30) 0%, transparent 30%, transparent 60%, rgba(6, 8, 18, 0.90) 100%); z-index: 1; pointer-events: none; } .scoreboard-theme .sb-hero--dark > * { position: relative; z-index: 2; } .scoreboard-theme .sb-hero--dark .sb-hero__inner { max-width: 1120px; margin: 0 auto; text-align: left; } /* Eyebrow row */ .scoreboard-theme .sb-hero__eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .scoreboard-theme .sb-hero__eyebrow-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 800; letter-spacing: 0.28em; color: var(--sb-hero-dark-kicker-color); text-transform: uppercase; background: var(--sb-hero-dark-kicker-bg); border: 1px solid var(--sb-hero-dark-kicker-border); padding: 4px 10px; border-radius: var(--r-pill, 100px); } .scoreboard-theme .sb-hero__eyebrow-date { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-55, rgba(236, 238, 245, 0.72)); } .scoreboard-theme .sb-hero__eyebrow-kicker ~ .sb-hero__eyebrow-date::before { content: '·'; color: rgba(255, 255, 255, 0.20); margin-right: 8px; font-size: 14px; } /* Title — italic eyeline above, bold gold name below */ .scoreboard-theme .sb-hero--dark .sb-hero__title { display: flex; flex-direction: column; line-height: 0.96; margin: 0 0 10px; color: inherit; /* override paper-cream rule */ } .scoreboard-theme .sb-hero__eyeline { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(20px, 3vw, 38px); font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.88); letter-spacing: 0.005em; } .scoreboard-theme .sb-hero__name { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(36px, 5vw, 68px); font-weight: 900; color: var(--c-gold, #D4AF37); letter-spacing: -0.02em; line-height: 0.94; margin-top: 4px; } .scoreboard-theme .sb-hero__subline { font-size: clamp(13px, 1.5vw, 15px); color: var(--c-text-55, rgba(236, 238, 245, 0.72)); margin: 0 0 18px; max-width: 720px; line-height: 1.55; } .scoreboard-theme .sb-hero__subline em { font-style: normal; font-weight: 700; color: var(--c-gold, #D4AF37); } /* Inline stats bar (under the title) */ .scoreboard-theme .sb-hero__stats { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 14px; } .scoreboard-theme .sb-hero__stat { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 18px 6px 0; margin-right: 18px; border-right: 1px solid rgba(255, 255, 255, 0.08); min-width: 70px; } .scoreboard-theme .sb-hero__stat:last-child { border-right: none; margin-right: 0; padding-right: 0; } .scoreboard-theme .sb-hero__stat-num { font-family: var(--font-display, Georgia, serif); font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; color: var(--c-gold, #D4AF37); line-height: 1; font-variant-numeric: tabular-nums; } .scoreboard-theme .sb-hero__stat-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--c-text-35, rgba(236, 238, 245, 0.45)); text-transform: uppercase; margin-top: 4px; } /* Tagline — single-line italic flourish under the stats bar */ .scoreboard-theme .sb-hero__tagline { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--c-text-35, rgba(236, 238, 245, 0.45)); text-transform: uppercase; margin: 8px 0 0; } /* When the dark hero is immediately followed by sticky tabs, drop the border so the two surfaces fuse cleanly. */ .scoreboard-theme .sb-hero--dark + .sb-periods { background: rgba(6, 8, 18, 0.92); border-bottom: 1px solid var(--c-border, rgba(255, 255, 255, 0.09)); } .scoreboard-theme .sb-hero--dark + .sb-periods .sb-period { color: var(--c-text-55, rgba(236, 238, 245, 0.72)); } .scoreboard-theme .sb-hero--dark + .sb-periods .sb-period:hover { color: #fff; background: rgba(255, 255, 255, 0.04); } .scoreboard-theme .sb-hero--dark + .sb-periods .sb-period--active { color: var(--c-midnight, #0B0B0F); background: var(--c-gold, #D4AF37); border-color: var(--c-gold, #D4AF37); } /* ══ STICKY PERIOD TABS ═════════════════════════════════════ */ .scoreboard-theme .sb-periods { position: sticky; top: 0; z-index: 30; background: rgba(250, 250, 247, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sb-rule); } .scoreboard-theme .sb-periods__inner { max-width: 1120px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .scoreboard-theme .sb-periods__inner::-webkit-scrollbar { display: none; } .scoreboard-theme .sb-period { flex: 1 0 auto; text-align: center; padding: 10px 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--sb-ink-70); text-decoration: none; border: 1px solid transparent; border-radius: 999px; scroll-snap-align: center; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .scoreboard-theme .sb-period:hover { color: var(--sb-ink); background: var(--sb-card-warm); } .scoreboard-theme .sb-period--active { color: var(--sb-ink); background: var(--sb-card); border-color: var(--sb-rule-md); box-shadow: 0 1px 0 rgba(17, 21, 31, 0.04); } @media (min-width: 720px) { .scoreboard-theme .sb-periods__inner { padding: 12px 24px; gap: 8px; justify-content: center; } .scoreboard-theme .sb-period { flex: 0 0 auto; min-width: 140px; padding: 12px 22px; font-size: 14px; } } /* ══ STATS STRIP — rich big-number cards ═══════════════════ * * Card anatomy (each .sb-stat is a flex column): * * ┌──────────────────────┐ * │ ╭─╮ │ .sb-stat__icon — circular glyph (top-left) * │ ╰─╯ │ * │ │ * │ 178 │ .sb-stat__num — big serif number * │ ───── │ * │ TRACKED │ .sb-stat__lbl — uppercase chip label * │ of 178 settled │ .sb-stat__sub — small denominator/context * │ ━━━━━━━ │ * │ ▰▰▱▱▱▱▱ │ .sb-stat__bar — optional thin progress bar * └──────────────────────┘ * * The icon + sub-line + bar are all optional; layouts work fine when * a card uses just .sb-stat__num + .sb-stat__lbl. State variants * (--good/warm/bad/live) tint the icon ring + accent line. */ .scoreboard-theme .sb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; } .scoreboard-theme .sb-stat { --sb-stat-accent: var(--sb-ink-40); --sb-stat-tint: var(--sb-card-warm); position: relative; background: var(--sb-card); border: 1px solid var(--sb-rule); border-radius: 16px; padding: 18px 18px 16px; text-align: left; display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; } .scoreboard-theme .sb-stat::before { /* Soft top wash echoing the state colour. */ content: ''; position: absolute; inset: 0 0 auto 0; height: 56px; background: linear-gradient(180deg, var(--sb-stat-tint), transparent); pointer-events: none; z-index: 0; } .scoreboard-theme .sb-stat > * { position: relative; z-index: 1; } .scoreboard-theme .sb-stat:hover { transform: translateY(-1px); border-color: var(--sb-rule-md); box-shadow: 0 6px 18px rgba(17, 21, 31, 0.05); } /* Anchor variant — when a stat card is also a filter chip. Keeps the card layout intact, removes default underline + colour, adds a focus ring for keyboard nav. */ .scoreboard-theme a.sb-stat { color: inherit; text-decoration: none; cursor: pointer; } .scoreboard-theme a.sb-stat:focus-visible { outline: 2px solid var(--sb-stat-accent); outline-offset: 3px; } /* Active / selected — the card whose cohort is currently filtering the table. Lifts off the page with an accent-coloured border + ring, bumps the top wash to the full accent tint and adds a small check glyph in the corner via a pseudo-element. */ .scoreboard-theme .sb-stat--active { border-color: var(--sb-stat-accent); box-shadow: 0 0 0 2px var(--sb-stat-accent) inset, 0 10px 24px rgba(17, 21, 31, 0.08); transform: translateY(-1px); } .scoreboard-theme .sb-stat--active::before { /* Deepen the top wash so the active state reads even when colour vision is impaired (the lift + ring are the primary cue). */ height: 80px; opacity: 0.85; } .scoreboard-theme .sb-stat--active::after { content: '✓'; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--sb-card); background: var(--sb-stat-accent); z-index: 2; } .scoreboard-theme .sb-stat--active:hover { transform: translateY(-1px); /* don't double-lift on hover */ } .scoreboard-theme .sb-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sb-card); border: 1px solid var(--sb-stat-accent); color: var(--sb-stat-accent); font-size: 16px; line-height: 1; margin-bottom: 4px; } .scoreboard-theme .sb-stat__num { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; line-height: 1; color: var(--sb-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .scoreboard-theme .sb-stat__num small { font-size: 0.45em; color: var(--sb-ink-40); font-weight: 600; margin-left: 2px; } .scoreboard-theme .sb-stat__lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sb-ink); } .scoreboard-theme .sb-stat__sub { font-size: 12px; color: var(--sb-ink-70); font-weight: 600; margin-top: 2px; line-height: 1.35; } .scoreboard-theme .sb-stat__sub strong { color: var(--sb-stat-accent); font-weight: 800; font-variant-numeric: tabular-nums; } .scoreboard-theme .sb-stat__bar { width: 100%; height: 3px; background: var(--sb-rule); border-radius: 999px; overflow: hidden; margin-top: 8px; } .scoreboard-theme .sb-stat__bar-fill { display: block; height: 100%; width: var(--bar, 0%); background: var(--sb-stat-accent); border-radius: 999px; transition: width .5s ease; } /* State-coloured variants — drive accent + tint via the local var */ .scoreboard-theme .sb-stat--good { --sb-stat-accent: var(--sb-emerald); --sb-stat-tint: var(--sb-emerald-soft); } .scoreboard-theme .sb-stat--good .sb-stat__num { color: var(--sb-emerald); } .scoreboard-theme .sb-stat--warm { --sb-stat-accent: var(--sb-amber); --sb-stat-tint: var(--sb-amber-wash); } .scoreboard-theme .sb-stat--warm .sb-stat__num { color: var(--sb-amber); } .scoreboard-theme .sb-stat--bad { --sb-stat-accent: var(--sb-red); --sb-stat-tint: var(--sb-red-soft); } .scoreboard-theme .sb-stat--bad .sb-stat__num { color: var(--sb-red); } .scoreboard-theme .sb-stat--live { --sb-stat-accent: var(--sb-blue); --sb-stat-tint: var(--sb-blue-soft); } .scoreboard-theme .sb-stat--live .sb-stat__num { color: var(--sb-blue); } .scoreboard-theme .sb-stat--gold { --sb-stat-accent: var(--sb-gold-dk); --sb-stat-tint: var(--sb-gold-wash); } .scoreboard-theme .sb-stat--gold .sb-stat__num { color: var(--sb-gold-dk); } @media (max-width: 640px) { .scoreboard-theme .sb-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } .scoreboard-theme .sb-stat { padding: 14px 14px 12px; } } @media (max-width: 380px) { .scoreboard-theme .sb-stats { grid-template-columns: 1fr; } } /* ══ EMPTY STATE ════════════════════════════════════════════ */ .scoreboard-theme .sb-empty { padding: clamp(40px, 8vw, 80px) 24px; text-align: center; background: var(--sb-card); border: 1px solid var(--sb-rule); border-radius: 18px; } .scoreboard-theme .sb-empty--inline { /* For empty states embedded inside a table — drop the card chrome. */ background: transparent; border: none; border-radius: 0; } .scoreboard-theme .sb-empty__icon { font-size: 36px; display: block; margin-bottom: 12px; } .scoreboard-theme .sb-empty__title { font-family: var(--font-display, 'Playfair Display', Georgia, serif); font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; margin: 0 0 8px; color: var(--sb-ink); } .scoreboard-theme .sb-empty__sub { font-size: 14px; color: var(--sb-ink-70); max-width: 460px; margin: 0 auto 20px; line-height: 1.55; } /* ══ FOOTER ════════════════════════════════════════════════ */ .scoreboard-theme .sb-footer { text-align: center; margin-top: 24px; padding: 24px; border-top: 1px dashed var(--sb-rule); } .scoreboard-theme .sb-footer p { font-size: 13px; color: var(--sb-ink-70); line-height: 1.6; margin: 0; } .scoreboard-theme .sb-footer strong { color: var(--sb-ink); font-weight: 700; } .scoreboard-theme .sb-footer__link { display: inline-block; margin-top: 6px; color: var(--sb-accent); font-weight: 700; text-decoration: none; letter-spacing: 0.02em; } .scoreboard-theme .sb-footer__link:hover { text-decoration: underline; } /* ══ BODY WRAPPER ══════════════════════════════════════════ */ /* Pages wrap their content under `.sb-body` for a consistent max-width + padding container (matches the periods inner width). */ .scoreboard-theme .sb-body { max-width: 1120px; margin: 0 auto; padding: clamp(18px, 3vw, 24px) clamp(12px, 3vw, 16px) clamp(64px, 8vw, 96px); } /* ══ PAGINATION ════════════════════════════════════════════ * Generic Prev / numbers / Next pager — preserves whatever query * params each chooses to carry (callers append ?page=N to the * current querystring so period filters etc. survive paging). * * */ .scoreboard-theme .sb-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: clamp(14px, 2vw, 18px) clamp(12px, 2vw, 18px); background: var(--sb-card-warm); border-top: 1px solid var(--sb-rule); font-variant-numeric: tabular-nums; } .scoreboard-theme .sb-pager__meta { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-ink-40); margin-right: auto; } .scoreboard-theme .sb-pager__num, .scoreboard-theme .sb-pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--sb-ink-70); background: var(--sb-card); border: 1px solid var(--sb-rule); border-radius: 10px; text-decoration: none; transition: background .15s, border-color .15s, color .15s; } .scoreboard-theme .sb-pager__num:hover, .scoreboard-theme .sb-pager__btn:hover { background: var(--sb-paper); border-color: var(--sb-rule-md); color: var(--sb-ink); } .scoreboard-theme .sb-pager__num--current { background: var(--sb-ink); border-color: var(--sb-ink); color: var(--sb-paper); cursor: default; } .scoreboard-theme .sb-pager__num--current:hover { background: var(--sb-ink); border-color: var(--sb-ink); color: var(--sb-paper); } .scoreboard-theme .sb-pager__btn[aria-disabled="true"], .scoreboard-theme .sb-pager__btn--disabled { opacity: 0.4; pointer-events: none; cursor: default; } .scoreboard-theme .sb-pager__ellipsis { display: inline-flex; align-items: flex-end; justify-content: center; min-width: 24px; height: 36px; color: var(--sb-ink-40); font-weight: 700; padding-bottom: 6px; } @media (max-width: 480px) { .scoreboard-theme .sb-pager { gap: 4px; padding: 12px 10px; } .scoreboard-theme .sb-pager__meta { display: none; } .scoreboard-theme .sb-pager__num, .scoreboard-theme .sb-pager__btn { min-width: 32px; height: 32px; padding: 0 8px; font-size: 12px; } }