/* ============================================================================= sos-system.css · Stats Over Score — single source of truth ----------------------------------------------------------------------------- Layered: 1. CORE sport-agnostic tokens (brand, surfaces, text, chrome, scale) 2. SPORT LAYER stat semantics scoped per sport [data-sport="mlb" | "nhl"] 3. TEAM LAYER team theming scoped under sport [data-sport][data-team] 4. BASE resets, app background, base typography 5. CHROME toolbar, banners, auth, footer, search, loading 6. PRIMITIVES reusable buttons / chips / badges / table / section headers 7. UTILITIES stat-color helpers, theme helpers ----------------------------------------------------------------------------- USAGE neutral / brand page (home, slate) team / player / game page (adopts team) Matchup blends: set --team-gradient inline on the card, away -> home, e.g. style="--team-gradient:linear-gradient(135deg,#1F4BA0,#BD3039)" Adding a sport later = add a [data-sport="xxx"] stat block + its team blocks. Nothing else moves. ============================================================================= */ /* ============================================================================ 1 · CORE TOKENS (sport-agnostic) ============================================================================ */ :root { /* -- Brand (the SOS lockup; primary product accent) -- */ --brand-lavender:#908FC6; --brand-mauve:#A67BB7; --brand-accent:#C9A9D6; /* legible brand text on dark */ --brand-gradient:linear-gradient(135deg, #908FC6 0%, #A67BB7 100%); /* -- Surfaces -- */ --bg-base:#0A0A0F; /* app background */ --bg-raised:#0F172A; /* panels, dropdowns */ --bg-card:#1E293B; /* cards, toolbar */ --bg-well:#142033; /* inset stat cells */ --app-bg:linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%); /* canonical body gradient */ /* -- Text -- */ --text-primary:#FFFFFF; --text-secondary:#E2E8F0; --text-muted:#94A3B8; --text-dim:#64748B; /* -- Borders -- */ --border-subtle:#334155; --border-default:#475569; --border-hover:#64748B; /* -- UI accents (interactive chrome only — never data) -- */ --accent-blue:#60A5FA; --accent-purple:#A78BFA; --accent-green:#34D399; --accent-emerald:#10B981; --accent-amber:#FBBF24; --accent-orange:#F97316; --accent-red:#EF4444; --accent-cyan:#22D3EE; /* -- Status (lineup / starter) -- */ --status-confirmed:#3FB950; --status-probable:#D29922; --status-tbd:#F85149; /* -- Confidence badges -- */ --badge-actual:#3FB950; --badge-expected:#58A6FF; --badge-estimated:#D29922; --badge-none:#8B949E; /* -- Type scale (fixed px — no compounding em) -- */ --font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono:ui-monospace, SFMono-Regular, Menlo, monospace; --fs-display:32px; --fw-display:800; --ls-display:-0.02em; --fs-h1:24px; --fw-h1:700; --ls-h1:-0.01em; --fs-h2:18px; --fw-h2:700; --fs-body:15px; --fw-body:400; --fs-label:13px; --fw-label:600; --fs-micro:11px; --fw-micro:700; --ls-micro:0.08em; /* -- Radius -- */ --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:16px; --radius-pill:9999px; /* -- Spacing -- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-7:32px; /* -- Elevation -- */ --shadow-sm:0 2px 8px rgba(0,0,0,0.2); --shadow-md:0 4px 15px rgba(0,0,0,0.3); --shadow-lg:0 8px 25px rgba(0,0,0,0.4); /* -- Motion -- */ --transition-fast:0.2s ease; --transition-normal:0.3s ease; /* -- Chrome gradients (standardized — one definition) -- */ --gradient-card:linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --gradient-header:linear-gradient(135deg, #1e293b 0%, #0f172a 100%); /* -- Active theme (defaults to brand; the team layer overrides these) -- */ --team-primary:var(--brand-mauve); --team-secondary:var(--brand-lavender); --team-accent:var(--brand-accent); --team-secondary-accent:var(--brand-lavender); --team-tint:rgba(166, 123, 183, 0.16); --team-tint-soft:rgba(166, 123, 183, 0.10); --team-gradient:var(--brand-gradient); /* -- LEGACY ALIASES (migration shim — let pre-overhaul markup keep working) -- */ --bg-primary:var(--bg-base); --bg-secondary:var(--bg-card); --bg-tertiary:var(--bg-raised); --bg-card-solid:var(--bg-card); --accent-yellow:var(--accent-amber); --accent-pink:#ec4899; --accent-gold:#ffd700; --border-primary:var(--border-subtle); --border-secondary:var(--border-default); --gradient-gold:linear-gradient(135deg, #ffd700 0%, #ffaa00 100%); } /* ============================================================================ 2 · SPORT LAYER · stat semantics (data-meaningful — never reuse for chrome) ============================================================================ */ /* MLB is the default sport so pages that don't set [data-sport] still resolve. */ :root, [data-sport="mlb"] { --stat-k:#F85149; /* strikeouts */ --stat-bb:#58A6FF; /* walks */ --stat-h:#7EE787; /* hits */ --stat-xbh:#D2A8FF; /* extra-base */ --stat-tb:#D2A8FF; /* total bases */ --stat-power:#D2A8FF; /* power / HR */ --stat-runs:#FFA657; /* runs */ --stat-era:#FB923C; /* ERA */ } /* NHL — placeholder semantics. Finalize when NHL pages are wired in. Established here so the pattern (and the file's multi-sport contract) is clear. */ [data-sport="nhl"] { --stat-g:#7EE787; /* goals */ --stat-a:#58A6FF; /* assists */ --stat-p:#D2A8FF; /* points */ --stat-sog:#FFA657; /* shots on goal*/ --stat-sv:#34D399; /* saves */ --stat-ga:#F85149; /* goals against*/ --stat-pp:#FBBF24; /* power play */ } /* ============================================================================ 3 · TEAM LAYER · contextual theming (zero-JS, pre-computed legible accents) ---------------------------------------------------------------------------- primary -> spines, headers, buttons, fills accent -> text / emphasis (lifted toward legible-on-dark for navy/black teams) tint -> wells & soft fills (primary @ ~16% / 10%) gradient -> card border / hero washes Stat colors above NEVER change with the team — only chrome does. ============================================================================ */ [data-sport="mlb"][data-team="ARI"]{ --team-primary:#e3d4ad; --team-secondary:#a71930; --team-accent:#bd5263; /* legible-on-dark · text / emphasis (Arizona Diamondbacks) */ --team-secondary-accent:#bd5263; --team-tint:rgba(227, 212, 173, 0.16); --team-tint-soft:rgba(227, 212, 173, 0.1); --team-gradient:linear-gradient(135deg, #e3d4ad, #a71930); } [data-sport="mlb"][data-team="ATH"]{ --team-primary:#eeb21e; --team-secondary:#003831; --team-accent:#eeb21e; /* legible-on-dark · text / emphasis (Athletics) */ --team-secondary-accent:#75938f; --team-tint:rgba(238, 178, 30, 0.16); --team-tint-soft:rgba(238, 178, 30, 0.1); --team-gradient:linear-gradient(135deg, #eeb21e, #003831); } [data-sport="mlb"][data-team="ATL"]{ --team-primary:#CE1141; --team-secondary:#13274F; --team-accent:#d73e65; /* legible-on-dark · text / emphasis (Atlanta Braves) */ --team-secondary-accent:#808ba1; --team-tint:rgba(206, 17, 65, 0.16); --team-tint-soft:rgba(206, 17, 65, 0.1); --team-gradient:linear-gradient(135deg, #CE1141, #13274F); } [data-sport="mlb"][data-team="BAL"]{ --team-primary:#DF4601; --team-secondary:#000000; --team-accent:#DF4601; /* legible-on-dark · text / emphasis (Baltimore Orioles) */ --team-secondary-accent:#b6b6b6; --team-tint:rgba(223, 70, 1, 0.16); --team-tint-soft:rgba(223, 70, 1, 0.1); --team-gradient:linear-gradient(135deg, #DF4601, #000000); } [data-sport="mlb"][data-team="BOS"]{ --team-primary:#BD3039; --team-secondary:#0D2B56; --team-accent:#c4464e; /* legible-on-dark · text / emphasis (Boston Red Sox) */ --team-secondary-accent:#7b8ba3; --team-tint:rgba(189, 48, 57, 0.16); --team-tint-soft:rgba(189, 48, 57, 0.1); --team-gradient:linear-gradient(135deg, #BD3039, #0D2B56); } [data-sport="mlb"][data-team="CHC"]{ --team-primary:#CC3433; --team-secondary:#0E3386; --team-accent:#cf4140; /* legible-on-dark · text / emphasis (Chicago Cubs) */ --team-secondary-accent:#6b81b5; --team-tint:rgba(204, 52, 51, 0.16); --team-tint-soft:rgba(204, 52, 51, 0.1); --team-gradient:linear-gradient(135deg, #CC3433, #0E3386); } [data-sport="mlb"][data-team="CIN"]{ --team-primary:#C6011F; --team-secondary:#000000; --team-accent:#d74b60; /* legible-on-dark · text / emphasis (Cincinnati Reds) */ --team-secondary-accent:#b6b6b6; --team-tint:rgba(198, 1, 31, 0.16); --team-tint-soft:rgba(198, 1, 31, 0.1); --team-gradient:linear-gradient(135deg, #C6011F, #000000); } [data-sport="mlb"][data-team="CLE"]{ --team-primary:#e21d38; --team-secondary:#002B5C; --team-accent:#e5354d; /* legible-on-dark · text / emphasis (Cleveland Guardians) */ --team-secondary-accent:#7990aa; --team-tint:rgba(226, 29, 56, 0.16); --team-tint-soft:rgba(226, 29, 56, 0.1); --team-gradient:linear-gradient(135deg, #e21d38, #002B5C); } [data-sport="mlb"][data-team="COL"]{ --team-primary:#c4ced3; --team-secondary:#33006F; --team-accent:#9f87bb; /* legible-on-dark · text / emphasis (Colorado Rockies) */ --team-secondary-accent:#9f87bb; --team-tint:rgba(196, 206, 211, 0.16); --team-tint-soft:rgba(196, 206, 211, 0.1); --team-gradient:linear-gradient(135deg, #c4ced3, #33006F); } [data-sport="mlb"][data-team="CWS"]{ --team-primary:#c4ced3; --team-secondary:#27251F; --team-accent:#8c8b88; /* legible-on-dark · text / emphasis (Chicago White Sox) */ --team-secondary-accent:#8c8b88; --team-tint:rgba(196, 206, 211, 0.16); --team-tint-soft:rgba(196, 206, 211, 0.1); --team-gradient:linear-gradient(135deg, #c4ced3, #27251F); } [data-sport="mlb"][data-team="DET"]{ --team-primary:#f26722; --team-secondary:#0C2340; --team-accent:#f26722; /* legible-on-dark · text / emphasis (Detroit Tigers) */ --team-secondary-accent:#8792a0; --team-tint:rgba(242, 103, 34, 0.16); --team-tint-soft:rgba(242, 103, 34, 0.1); --team-gradient:linear-gradient(135deg, #f26722, #0C2340); } [data-sport="mlb"][data-team="HOU"]{ --team-primary:#ea6e24; --team-secondary:#002D62; --team-accent:#ea6e24; /* legible-on-dark · text / emphasis (Houston Astros) */ --team-secondary-accent:#768eab; --team-tint:rgba(234, 110, 36, 0.16); --team-tint-soft:rgba(234, 110, 36, 0.1); --team-gradient:linear-gradient(135deg, #ea6e24, #002D62); } [data-sport="mlb"][data-team="KC"]{ --team-primary:#4a9be8; --team-secondary:#BD9B60; --team-accent:#4a9be8; /* legible-on-dark · text / emphasis (Kansas City Royals) */ --team-secondary-accent:#BD9B60; --team-tint:rgba(74, 155, 232, 0.16); --team-tint-soft:rgba(74, 155, 232, 0.1); --team-gradient:linear-gradient(135deg, #4a9be8, #BD9B60); } [data-sport="mlb"][data-team="LAA"]{ --team-primary:#BA0021; --team-secondary:#003263; --team-accent:#d05168; /* legible-on-dark · text / emphasis (Los Angeles Angels) */ --team-secondary-accent:#718da8; --team-tint:rgba(186, 0, 33, 0.16); --team-tint-soft:rgba(186, 0, 33, 0.1); --team-gradient:linear-gradient(135deg, #BA0021, #003263); } [data-sport="mlb"][data-team="LAD"]{ --team-primary:#5a8fd4; --team-secondary:#EF3E42; --team-accent:#5a8fd4; /* legible-on-dark · text / emphasis (Los Angeles Dodgers) */ --team-secondary-accent:#EF3E42; --team-tint:rgba(90, 143, 212, 0.16); --team-tint-soft:rgba(90, 143, 212, 0.1); --team-gradient:linear-gradient(135deg, #5a8fd4, #EF3E42); } [data-sport="mlb"][data-team="MIA"]{ --team-primary:#00A3E0; --team-secondary:#EF3340; --team-accent:#00A3E0; /* legible-on-dark · text / emphasis (Miami Marlins) */ --team-secondary-accent:#EF3340; --team-tint:rgba(0, 163, 224, 0.16); --team-tint-soft:rgba(0, 163, 224, 0.1); --team-gradient:linear-gradient(135deg, #00A3E0, #EF3340); } [data-sport="mlb"][data-team="MIL"]{ --team-primary:#FFC52F; --team-secondary:#12284B; --team-accent:#808c9f; /* legible-on-dark · text / emphasis (Milwaukee Brewers) */ --team-secondary-accent:#808c9f; --team-tint:rgba(255, 197, 47, 0.16); --team-tint-soft:rgba(255, 197, 47, 0.1); --team-gradient:linear-gradient(135deg, #FFC52F, #12284B); } [data-sport="mlb"][data-team="MIN"]{ --team-primary:#D31145; --team-secondary:#002B5C; --team-accent:#db3b65; /* legible-on-dark · text / emphasis (Minnesota Twins) */ --team-secondary-accent:#7990aa; --team-tint:rgba(211, 17, 69, 0.16); --team-tint-soft:rgba(211, 17, 69, 0.1); --team-gradient:linear-gradient(135deg, #D31145, #002B5C); } [data-sport="mlb"][data-team="NYM"]{ --team-primary:#FF5910; --team-secondary:#002D72; --team-accent:#FF5910; /* legible-on-dark · text / emphasis (New York Mets) */ --team-secondary-accent:#738cb2; --team-tint:rgba(255, 89, 16, 0.16); --team-tint-soft:rgba(255, 89, 16, 0.1); --team-gradient:linear-gradient(135deg, #FF5910, #002D72); } [data-sport="mlb"][data-team="NYY"]{ --team-primary:#FFFFFF; --team-secondary:#003087; --team-accent:#6c88ba; /* legible-on-dark · text / emphasis (New York Yankees) */ --team-secondary-accent:#6c88ba; --team-tint:rgba(255, 255, 255, 0.16); --team-tint-soft:rgba(255, 255, 255, 0.1); --team-gradient:linear-gradient(135deg, #FFFFFF, #003087); } [data-sport="mlb"][data-team="PHI"]{ --team-primary:#E81828; --team-secondary:#284898; --team-accent:#eb3543; /* legible-on-dark · text / emphasis (Philadelphia Phillies) */ --team-secondary-accent:#5b73b0; --team-tint:rgba(232, 24, 40, 0.16); --team-tint-soft:rgba(232, 24, 40, 0.1); --team-gradient:linear-gradient(135deg, #E81828, #284898); } [data-sport="mlb"][data-team="PIT"]{ --team-primary:#FDB827; --team-secondary:#27251F; --team-accent:#8c8b88; /* legible-on-dark · text / emphasis (Pittsburgh Pirates) */ --team-secondary-accent:#8c8b88; --team-tint:rgba(253, 184, 39, 0.16); --team-tint-soft:rgba(253, 184, 39, 0.1); --team-gradient:linear-gradient(135deg, #FDB827, #27251F); } [data-sport="mlb"][data-team="SD"]{ --team-primary:#FFC425; --team-secondary:#2F241D; --team-accent:#8e8884; /* legible-on-dark · text / emphasis (San Diego Padres) */ --team-secondary-accent:#8e8884; --team-tint:rgba(255, 196, 37, 0.16); --team-tint-soft:rgba(255, 196, 37, 0.1); --team-gradient:linear-gradient(135deg, #FFC425, #2F241D); } [data-sport="mlb"][data-team="SEA"]{ --team-primary:#005C5C; --team-secondary:#0C2C56; --team-accent:#488a8a; /* legible-on-dark · text / emphasis (Seattle Mariners) */ --team-secondary-accent:#7a8ba2; --team-tint:rgba(0, 92, 92, 0.16); --team-tint-soft:rgba(0, 92, 92, 0.1); --team-gradient:linear-gradient(135deg, #005C5C, #0C2C56); } [data-sport="mlb"][data-team="SF"]{ --team-primary:#FD5A1E; --team-secondary:#27251F; --team-accent:#FD5A1E; /* legible-on-dark · text / emphasis (San Francisco Giants) */ --team-secondary-accent:#8c8b88; --team-tint:rgba(253, 90, 30, 0.16); --team-tint-soft:rgba(253, 90, 30, 0.1); --team-gradient:linear-gradient(135deg, #FD5A1E, #27251F); } [data-sport="mlb"][data-team="STL"]{ --team-primary:#C41E3A; --team-secondary:#0C2340; --team-accent:#ce425a; /* legible-on-dark · text / emphasis (St. Louis Cardinals) */ --team-secondary-accent:#8792a0; --team-tint:rgba(196, 30, 58, 0.16); --team-tint-soft:rgba(196, 30, 58, 0.1); --team-gradient:linear-gradient(135deg, #C41E3A, #0C2340); } [data-sport="mlb"][data-team="TB"]{ --team-primary:#8FBCE6; --team-secondary:#092C5C; --team-accent:#8FBCE6; /* legible-on-dark · text / emphasis (Tampa Bay Rays) */ --team-secondary-accent:#798ca6; --team-tint:rgba(143, 188, 230, 0.16); --team-tint-soft:rgba(143, 188, 230, 0.1); --team-gradient:linear-gradient(135deg, #8FBCE6, #092C5C); } [data-sport="mlb"][data-team="TEX"]{ --team-primary:#C0111F; --team-secondary:#003278; --team-accent:#cf4a55; /* legible-on-dark · text / emphasis (Texas Rangers) */ --team-secondary-accent:#6d8ab2; --team-tint:rgba(192, 17, 31, 0.16); --team-tint-soft:rgba(192, 17, 31, 0.1); --team-gradient:linear-gradient(135deg, #C0111F, #003278); } [data-sport="mlb"][data-team="TOR"]{ --team-primary:#5caae5; --team-secondary:#1D2D5C; --team-accent:#5caae5; /* legible-on-dark · text / emphasis (Toronto Blue Jays) */ --team-secondary-accent:#7a839f; --team-tint:rgba(92, 170, 229, 0.16); --team-tint-soft:rgba(92, 170, 229, 0.1); --team-gradient:linear-gradient(135deg, #5caae5, #1D2D5C); } [data-sport="mlb"][data-team="WSH"]{ --team-primary:#AB0003; --team-secondary:#14225A; --team-accent:#ca5f60; /* legible-on-dark · text / emphasis (Washington Nationals) */ --team-secondary-accent:#838aa8; --team-tint:rgba(171, 0, 3, 0.16); --team-tint-soft:rgba(171, 0, 3, 0.1); --team-gradient:linear-gradient(135deg, #AB0003, #14225A); } /* ============================================================================ 4 · BASE · resets, app background, base typography ============================================================================ */ * { margin:0; padding:0; box-sizing:border-box; } body { font-family:var(--font-sans); background:var(--app-bg); background-attachment:fixed; color:var(--text-primary); min-height:100vh; padding:15px; padding-bottom:70px; -webkit-font-smoothing:antialiased; } .container { max-width:1400px; margin:0 auto; } a { color:inherit; } ::selection { background:rgba(166, 123, 183, 0.35); } /* Page header / wordmark area (shared across pages) */ header { text-align:center; padding:20px 0; margin-bottom:25px; } header img { max-width:400px; width:100%; height:auto; display:block; margin:0 auto 10px; } h1 { font-size:var(--fs-display); font-weight:var(--fw-display); letter-spacing:var(--ls-display); line-height:1.05; margin-bottom:5px; background:var(--brand-gradient); /* brand-led (retired the old blue->pink) */ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .tagline { color:var(--text-dim); font-size:0.75em; font-style:italic; margin-bottom:10px; } .subtitle { color:var(--text-muted); font-size:1em; } /* ============================================================================ 5 · CHROME · toolbar / banners / auth / footer / search / loading ============================================================================ */ /* -- Beta + WIP banners -- */ .beta-banner { background:linear-gradient(135deg, var(--accent-amber) 0%, #f59e0b 100%); color:#000; text-align:center; padding:6px 12px; font-size:0.75em; font-weight:600; border-radius:var(--radius-sm); margin-bottom:15px; box-shadow:0 2px 8px rgba(251,191,36,0.3); } .beta-banner a { color:#1e293b; text-decoration:underline; font-weight:700; } .beta-banner a:hover { color:#0f172a; } .wip-banner { background:linear-gradient(135deg, rgba(249,115,22,0.15) 0%, rgba(251,191,36,0.15) 100%); border:1px solid rgba(249,115,22,0.4); color:var(--accent-amber); text-align:center; padding:8px 16px; font-size:0.8em; font-weight:600; border-radius:8px; margin:0 auto 15px; max-width:900px; } /* -- Navigation toolbar -- */ .sos-toolbar { display:flex; flex-direction:column; gap:8px; align-items:center; background:var(--gradient-card); border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:10px 12px; margin:0 auto 8px; max-width:1600px; } .tb-row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; width:100%; position:relative; } .tb-btn { background:var(--bg-card); color:#cbd5e1; border:1px solid var(--border-default); padding:5px 12px; border-radius:14px; cursor:pointer; font-size:0.75em; font-weight:600; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; transition:all var(--transition-fast); text-decoration:none; font-family:inherit; } .tb-btn:hover { border-color:var(--border-hover); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-sm); } .tb-btn.nhl { background:var(--bg-card); border-color:#3b82f6; color:var(--accent-blue); } .tb-btn.nhl:hover { background:#1e3a5f; border-color:var(--accent-blue); color:#93bbfd; } .tb-btn.home { background:var(--bg-card); border-color:#8b5cf6; color:var(--accent-purple); } .tb-btn.home:hover { background:#2e1f5e; border-color:var(--accent-purple); color:#c4b5fd; } .tb-btn.slate { background:var(--bg-card); border-color:var(--border-default); color:#cbd5e1; } .tb-btn.slate:hover { background:var(--border-subtle); border-color:var(--border-hover); color:#fff; } .tb-btn.overview { background:var(--bg-card); border-color:#06b6d4; color:var(--accent-cyan); } .tb-btn.overview:hover { background:#164e63; border-color:var(--accent-cyan); color:#67e8f9; } .tb-btn.matchup { background:var(--bg-card); border-color:var(--accent-orange); color:#fb923c; } .tb-btn.matchup:hover { background:#431407; border-color:#fb923c; color:#fdba74; } .tb-btn.bullpen { background:var(--bg-card); border-color:var(--accent-emerald); color:var(--accent-green); } .tb-btn.bullpen:hover { background:#064e3b; border-color:var(--accent-green); color:#6ee7b7; } .tb-btn.streaks { background:linear-gradient(135deg, rgba(251,146,60,0.18), rgba(239,68,68,0.12)); border-color:#fb923c; color:#fdba74; } .tb-btn.streaks:hover { background:linear-gradient(135deg, rgba(251,146,60,0.3), rgba(239,68,68,0.2)); border-color:#fdba74; color:#fed7aa; } .tb-btn.umpire { background:var(--bg-card); border-color:var(--accent-red); color:#f87171; } .tb-btn.umpire:hover { background:#450a0a; border-color:#f87171; color:#fca5a5; } .tb-btn.sb { background:var(--bg-card); border-color:#c2745b; color:#d4917a; } .tb-btn.sb:hover { background:#3b1f14; border-color:#d4917a; color:#e8b4a2; } .tb-btn.research { background:linear-gradient(135deg, rgba(251,191,36,0.15), rgba(249,115,22,0.15)); border-color:var(--accent-amber); color:var(--accent-amber); } .tb-btn.about { background:var(--bg-card); border-color:var(--text-dim); color:var(--text-muted); } .tb-btn.about:hover { background:var(--border-subtle); border-color:var(--text-muted); color:#cbd5e1; } .tb-search { background:var(--bg-raised); border:1px solid var(--border-default); padding:5px 10px; border-radius:14px; color:#fff; width:180px; font-size:0.75em; font-family:inherit; } .tb-search:focus { outline:none; border-color:var(--accent-blue); } .search-wrapper { position:relative; display:inline-block; } .search-wrapper .search-results { position:absolute; top:100%; left:0; width:280px; margin-top:4px; z-index:999; } .tb-date { background:var(--bg-raised); border:1px solid var(--border-default); padding:5px 10px; border-radius:14px; color:#fff; font-size:0.75em; width:140px; font-family:inherit; } .tb-date:focus { outline:none; border-color:var(--accent-blue); } .tb-date::-webkit-calendar-picker-indicator { filter:invert(1); cursor:pointer; } .tb-divider { width:1px; height:18px; background:var(--border-default); margin:0 2px; } .tb-contact { display:flex; align-items:center; gap:6px; } .tb-contact a { color:var(--text-muted); transition:color var(--transition-fast); display:flex; align-items:center; } .tb-contact a:hover { color:var(--accent-blue); } /* -- Player search dropdown -- */ .search-results { position:absolute; top:100%; left:0; width:280px; background:var(--bg-card); border:1px solid var(--border-default); border-radius:8px; margin-top:4px; max-height:300px; overflow-y:auto; z-index:1000; display:none; } .search-results.active { display:block; } .search-result-item { padding:12px 20px; cursor:pointer; border-bottom:1px solid var(--border-subtle); transition:background var(--transition-fast); } .search-result-item:hover { background:var(--border-subtle); } .search-result-item:last-child { border-bottom:none; } .search-result-item .position-badge { display:inline-block; font-size:0.65em; font-weight:700; padding:2px 5px; border-radius:4px; margin-left:6px; vertical-align:middle; } .position-badge.pitcher { background:linear-gradient(135deg, #f85149 0%, #ff6b6b 100%); color:#fff; } .position-badge.batter { background:linear-gradient(135deg, #7ee787 0%, #56d364 100%); color:#000; } /* -- Auth status -- */ .auth-status-section { display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px 20px; margin-bottom:12px; } .auth-cta-btn { background:linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(245,158,11,0.15) 100%); color:var(--accent-amber); border:1px solid rgba(251,191,36,0.4); padding:8px 24px; border-radius:20px; font-weight:600; font-size:0.8em; cursor:pointer; transition:all var(--transition-fast); text-transform:uppercase; letter-spacing:0.05em; font-family:inherit; } .auth-cta-btn:hover { background:linear-gradient(135deg, rgba(251,191,36,0.25) 0%, rgba(245,158,11,0.25) 100%); border-color:rgba(251,191,36,0.7); color:#ffd700; transform:translateY(-1px); } .premium-info-link { color:var(--text-muted); font-size:0.75em; cursor:pointer; text-decoration:none; transition:color var(--transition-fast); } .premium-info-link:hover { color:var(--accent-amber); text-decoration:underline; } .signed-in-status { display:flex; align-items:center; gap:12px; font-size:0.75em; } .signed-in-email { color:#4ade80; font-weight:500; } .signed-in-links { display:flex; gap:8px; align-items:center; } .signed-in-links .link-divider { color:var(--border-default); } .signed-in-links a { color:var(--text-muted); font-size:0.75em; text-decoration:none; cursor:pointer; } .signed-in-links a:hover { color:var(--accent-blue); text-decoration:underline; } .auth-logged-out { display:flex; } .auth-logged-in { display:none; } /* -- Footer -- */ .footer-logo { text-align:center; padding:40px 0 20px; margin-top:30px; border-top:1px solid var(--border-subtle); } .footer-logo img { height:50px; width:auto; opacity:0.6; transition:opacity var(--transition-fast); } .footer-logo img:hover { opacity:1; } .legal-footer { text-align:center; padding:20px; color:var(--text-dim); font-size:0.85em; } .legal-footer a { color:var(--accent-blue); text-decoration:none; margin:0 10px; } .legal-footer a:hover { text-decoration:underline; } /* -- Loading -- */ .loading { text-align:center; padding:40px 20px; color:var(--text-muted); font-size:1.1em; } .loading::after { content:'...'; animation:dots 1.5s steps(4, end) infinite; } @keyframes dots { 0%,20% { content:'.'; } 40% { content:'..'; } 60%,100% { content:'...'; } } @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } /* ============================================================================ 6 · PRIMITIVES · reusable, theme-aware building blocks for new pages ---------------------------------------------------------------------------- These read the active --team-* vars, so an Orioles page (data-team="BAL") themes them automatically. Use on any page going forward. ============================================================================ */ /* Primary (brand/team) pill button + outline variant */ .sos-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 22px; border-radius:var(--radius-pill); font-size:var(--fs-label); font-weight:700; color:#fff; background:var(--team-gradient); border:1px solid transparent; cursor:pointer; font-family:inherit; transition:transform var(--transition-fast), box-shadow var(--transition-fast); } .sos-btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-sm); } .sos-btn--ghost { background:transparent; color:var(--team-accent); border-color:var(--team-primary); } /* Filter chips */ .sos-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:var(--radius-md); font-size:12px; font-weight:700; background:var(--bg-card); color:var(--text-muted); border:1px solid var(--border-subtle); cursor:pointer; transition:all var(--transition-fast); } .sos-chip:hover { border-color:var(--border-hover); color:var(--text-secondary); } .sos-chip.is-active { background:var(--team-tint); border-color:var(--team-primary); color:var(--team-accent); } /* Confidence / lineup badges */ .sos-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--radius-pill); font-size:11px; font-weight:600; } .sos-badge .dot { width:6px; height:6px; border-radius:50%; } .sos-badge.actual { background:rgba(63,185,80,0.18); color:var(--badge-actual); } .sos-badge.actual .dot { background:var(--badge-actual); } .sos-badge.expected { background:rgba(88,166,255,0.18); color:var(--badge-expected); } .sos-badge.expected .dot { background:var(--badge-expected); } .sos-badge.estimated { background:rgba(210,153,34,0.18); color:var(--badge-estimated); } .sos-badge.estimated .dot { background:var(--badge-estimated); } .sos-badge.none { background:rgba(139,148,158,0.18); color:var(--badge-none); } .sos-badge.none .dot { background:var(--badge-none); } /* Card with team-tinted gradient border (the signature SOS card frame) */ .sos-card { position:relative; overflow:hidden; border-radius:var(--radius-xl); background:var(--gradient-card); } .sos-card::before { content:''; position:absolute; inset:0; border-radius:var(--radius-xl); padding:2px; background:var(--team-gradient); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .sos-card__body { position:relative; z-index:1; padding:18px 20px; } /* Collapsible section header (team-tinted) */ .sos-section-header { display:flex; align-items:center; justify-content:space-between; padding:11px 16px; background:linear-gradient(135deg, var(--team-tint), var(--team-tint-soft)); border:1px solid var(--team-primary); border-radius:var(--radius-md); } .sos-section-header h2, .sos-section-header .title { font-size:var(--fs-h2); font-weight:700; color:var(--team-accent); margin:0; } /* Data table */ .sos-table { width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; } .sos-table thead th { text-align:center; padding:7px 8px; color:var(--text-dim); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; background:rgba(15,23,42,0.6); border-bottom:1px solid var(--border-subtle); } .sos-table thead th:first-child { text-align:left; padding-left:10px; } .sos-table tbody td { text-align:center; padding:6px 8px; border-bottom:1px solid rgba(51,65,85,0.2); color:var(--text-secondary); } .sos-table tbody td:first-child { text-align:left; padding-left:10px; font-weight:600; } .sos-table tbody tr:last-child td { border-bottom:none; } .sos-table tbody tr:hover td { background:rgba(96,165,250,0.04); } /* ============================================================================ 7 · UTILITIES ============================================================================ */ /* Stat-color helpers (resolve through the active sport layer) */ .k-c { color:var(--stat-k)!important; } .bb-c { color:var(--stat-bb)!important; } .h-c { color:var(--stat-h)!important; } .xbh-c { color:var(--stat-xbh)!important; } .tb-c { color:var(--stat-tb)!important; } .r-c { color:var(--stat-runs)!important; } /* Theme helpers */ .themed-text { color:var(--team-accent); } .themed-spine { border-left:4px solid var(--team-primary); } .themed-fill { background:var(--team-tint); } .brand-text { background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* Matchup blend helper — set --away / --home inline (away -> home) */ .sos-matchup { --team-gradient:linear-gradient(135deg, var(--away, var(--border-subtle)), var(--home, var(--border-default))); } @media (max-width:768px) { body { padding:12px; padding-bottom:60px; } .sos-toolbar { padding:8px; gap:6px; } .tb-row { gap:5px; } .tb-row:first-child { flex-wrap:nowrap; } .tb-search { flex:1; min-width:0; } .search-wrapper { flex:1; min-width:0; } .search-wrapper .tb-search { width:100%; } .tb-date { width:130px; } .tb-btn { padding:5px 8px; font-size:0.65em; } .tb-divider { display:none; } .tb-contact { margin-left:auto; } .search-results { width:calc(100vw - 40px)!important; min-width:200px; } h1 { font-size:26px; } .beta-banner { font-size:0.65em; } }