/* ============================================================================ BIRDIE BUDDY — Design System tokens (served copy) "Et lite stykke PGA" — a small taste of the PGA for the amateur golfer. Dark-first, broadcast-grade. Olive + antique gold. Norwegian (bokmål). Source of truth: docs/design-system/styles.css (web(ds-1)). The :root block below is that file verbatim; tests/test_marketing_page.py fails on any drift. The source's Google Fonts import rule is NOT copied — the CSP has no font-src, so the five families are self-hosted from /static/fonts/ (latin subsets, OFL). ========================================================================== */ /* ---- Self-hosted fonts (replaces the design system's Google Fonts rule) --- */ @font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/Marcellus-latin-400.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/static/fonts/CormorantGaramond-latin-wght.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500 600; font-display: swap; src: url("/static/fonts/CormorantGaramond-latin-wght-italic.woff2") format("woff2"); } @font-face { font-family: "Questrial"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/Questrial-latin-400.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/static/fonts/Archivo-latin-wght.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/IBMPlexMono-latin-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/IBMPlexMono-latin-500.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/IBMPlexMono-latin-600.woff2") format("woff2"); } :root { /* ---- Brand core ---------------------------------------------------- */ --bb-olive: #56652f; /* primary brand green (the ball mark) */ --bb-olive-deep: #3f4b22; /* pressed / deep fills */ --bb-olive-bright: #6f8140; /* hover / lifted olive */ --bb-gold: #b8a060; /* antique gold — secondary accent */ --bb-gold-bright: #e9d79a; /* gold highlight — winners, 1st place */ --bb-gold-deep: #8c7638; /* gold on light backgrounds */ /* ---- Dark surfaces (primary / TV) ---------------------------------- */ --bb-bg: #070a06; /* near-black, olive-tinted — the stage */ --bb-surface: #10150c; /* raised panel */ --bb-surface-2: #141a10; /* card / row fill */ --bb-glass: rgba(20, 26, 16, 0.55); /* frosted leaderboard row */ --bb-line: rgba(255, 255, 255, 0.07); /* hairline on dark */ --bb-line-gold: rgba(184, 160, 96, 0.5); /* gold hairline / lead row */ /* ---- Text on dark -------------------------------------------------- */ --bb-text: #f2f0e8; /* paper white — primary text */ --bb-text-dim: #9aa08c; /* secondary / labels */ --bb-text-mute: #7f866c; /* tertiary / column heads */ /* ---- Light surfaces (app / marketing — logo's native ground) ------- */ --bb-paper: #f4f2ea; /* warm paper background */ --bb-paper-2: #ffffff; /* card on paper */ --bb-ink: #1b1e14; /* near-black ink text on light */ --bb-ink-dim: #5c6150; /* secondary on light */ --bb-line-light: rgba(27, 30, 20, 0.12); /* hairline on light */ /* ---- Signal ------------------------------------------------------- */ --bb-live: #e23b3b; /* LIVE / recording red (flag red) */ --bb-tracer: #7cf5c4; /* live shot tracer / current ball mint */ --bb-positive: #6f9e7d; /* turf green — success */ /* ---- Turf (imagery / feed placeholders) --------------------------- */ --bb-turf-light: #4f7d5c; --bb-turf-mid: #35603f; --bb-turf-deep: #24462e; /* ---- Player ball-marker palette (assign per player) --------------- Muted, broadcast-safe. Leader typically uses gold-bright. */ --bb-marker-gold: #e9d79a; --bb-marker-blue: #8fb8e0; --bb-marker-clay: #c98f6a; --bb-marker-lilac: #a99bd0; --bb-marker-teal: #84b6a3; --bb-marker-amber: #d0b26a; --bb-marker-mint: #7cf5c4; /* ---- Typography ---------------------------------------------------- */ --bb-font-display: 'Marcellus', 'Times New Roman', serif; /* championship caps headings */ --bb-font-serif: 'Cormorant Garamond', Georgia, serif; /* editorial / slogans */ --bb-font-wordmark:'Questrial', 'Century Gothic', sans-serif; /* BIRDIE BUDDY wordmark */ --bb-font-sans: 'Archivo', -apple-system, 'Segoe UI', sans-serif;/* UI / body */ --bb-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* data: distance, hcp, time */ /* Type scale (rem, 1rem = 16px base) */ --bb-text-xs: 0.75rem; /* 12 */ --bb-text-sm: 0.875rem; /* 14 */ --bb-text-base: 1rem; /* 16 */ --bb-text-md: 1.25rem; /* 20 */ --bb-text-lg: 1.5rem; /* 24 */ --bb-text-xl: 2rem; /* 32 */ --bb-text-2xl: 2.75rem; /* 44 */ --bb-text-3xl: 4rem; /* 64 */ --bb-tracking-wordmark: 0.32em; /* wide-tracked geometric wordmark */ --bb-tracking-caps: 0.16em; /* label caps */ --bb-tracking-display: 0.04em; /* serif display */ /* ---- Spacing (8px base) ------------------------------------------- */ --bb-space-1: 4px; --bb-space-2: 8px; --bb-space-3: 12px; --bb-space-4: 16px; --bb-space-5: 24px; --bb-space-6: 32px; --bb-space-7: 48px; --bb-space-8: 64px; /* ---- Radii -------------------------------------------------------- */ --bb-radius-sm: 7px; --bb-radius-md: 11px; --bb-radius-lg: 16px; --bb-radius-pill: 999px; /* ---- Elevation ---------------------------------------------------- */ --bb-shadow-panel: 0 30px 80px rgba(0, 0, 0, 0.5); --bb-shadow-card: 0 8px 28px rgba(0, 0, 0, 0.35); --bb-glow-gold: 0 0 16px rgba(184, 160, 96, 0.45); --bb-glow-tracer: 0 0 16px rgba(124, 245, 196, 0.6); } /* ---- Ergonomic helpers (optional, opt-in) --------------------------- */ .bb-tnum { font-variant-numeric: tabular-nums; } .bb-wordmark { font-family: var(--bb-font-wordmark); letter-spacing: var(--bb-tracking-wordmark); text-transform: uppercase; } .bb-caps { font-family: var(--bb-font-sans); letter-spacing: var(--bb-tracking-caps); text-transform: uppercase; } /* ---- Motion (README §Interactions) ---------------------------------- The three system keyframes. All gated on prefers-reduced-motion: the pulse is decorative, the ring degrades to an instant appearance, the float stops. Elements opt in with the .bb-pulse / .bb-ring / .bb-float classes; a page may set its own duration on the element. */ @media (prefers-reduced-motion: no-preference) { @keyframes bbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .32; } } @keyframes bbLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @keyframes bbRing { 0% { transform: translate(-50%, -50%) scale(.5); opacity: .85; } 100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } } @keyframes bbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .bb-pulse { animation: bbPulse 2s infinite; } .bb-live-pulse { animation: bbLivePulse 1.6s infinite; } .bb-ring { animation: bbRing 1.9s ease-out infinite; } .bb-float { animation: bbFloat 7s ease-in-out infinite; } }