/* ============================================================================ bb-core.css — BleacherBots shared design system (Phase 0) ---------------------------------------------------------------------------- One source of truth for tokens + the shared chrome (header, sport switcher, bottom-nav, footer). Each hub keeps its own page-specific styles but inherits these so the look/feel is identical. Per-sport personality = ONE override: set `--bb-accent` / `--bb-accent-2` on (e.g. ). ============================================================================ */ :root { /* Surfaces */ --bb-bg: #0a1420; --bb-surface: #0d1b26; --bb-surface-2: #162436; --bb-border: rgba(255,255,255,0.08); /* Text */ --bb-text: #f0f4f8; --bb-muted: #94a3b8; --bb-dim: #4a6a85; /* Accent (gold→orange default; overridden per sport) */ --bb-accent: #f0b429; --bb-accent-2: #f97316; --bb-accent-ink: #000; /* readable text ON the accent */ /* Status */ --bb-red: #ef4444; --bb-green: #22c55e; --bb-blue: #38bdf8; /* Shape + type */ --bb-radius: 14px; --bb-radius-sm: 8px; --bb-pill: 999px; --bb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --bb-maxw: 1100px; --bb-header-h: 52px; } /* Per-sport accent presets — set on a hub. */ html[data-accent="red"] { --bb-accent:#ef4444; --bb-accent-2:#dc2626; --bb-accent-ink:#fff; } html[data-accent="blue"] { --bb-accent:#38bdf8; --bb-accent-2:#0ea5e9; --bb-accent-ink:#000; } html[data-accent="green"] { --bb-accent:#22c55e; --bb-accent-2:#16a34a; --bb-accent-ink:#000; } html[data-accent="orange"]{ --bb-accent:#fb923c; --bb-accent-2:#f97316; --bb-accent-ink:#000; } /* default (gold) needs no attribute */ /* ─── Shared header ───────────────────────────────────────────────────────── */ .bb-header { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 0.85rem; padding: 0.5rem 1.1rem; min-height: var(--bb-header-h); background: rgba(10,20,32,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--bb-border); font-family: var(--bb-font); } .bb-logo { font-weight: 800; font-size: 1.05rem; color: var(--bb-text); text-decoration: none; white-space: nowrap; letter-spacing: 0.2px; } .bb-logo span { color: var(--bb-accent); } /* Sport switcher (native select = accessible + mobile-friendly). Accent-styled so the CURRENT sport is unmistakable in the sticky header — it reads as "you are viewing X" and the caret signals it's switchable. */ .bb-switcher { appearance: none; -webkit-appearance: none; background: rgba(240,180,41,0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23f0b429' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 0.6rem center; color: var(--bb-accent); font-family: var(--bb-font); font-size: 0.85rem; font-weight: 800; border: 1px solid var(--bb-accent); border-radius: var(--bb-pill); padding: 0.38rem 1.85rem 0.38rem 0.9rem; cursor: pointer; box-shadow: 0 0 0 3px rgba(240,180,41,0.10); } .bb-switcher:focus { outline: none; box-shadow: 0 0 0 3px rgba(240,180,41,0.30); } .bb-switcher option { color: var(--bb-text); background: var(--bb-surface-2); font-weight: 700; } .bb-nav { margin-left: auto; display: flex; align-items: center; gap: 0.85rem; } .bb-nav a { color: var(--bb-muted); text-decoration: none; font-size: 0.82rem; font-weight: 700; white-space: nowrap; transition: color 0.15s; } .bb-nav a:hover { color: var(--bb-text); } .bb-nav a.bb-live { color: var(--bb-red); } .bb-nav a.bb-active { color: var(--bb-accent); } .bb-cta { background: var(--bb-accent); color: var(--bb-accent-ink) !important; padding: 0.32rem 0.9rem; border-radius: var(--bb-pill); border: none; cursor: pointer; font-weight: 800; font-size: 0.8rem; font-family: var(--bb-font); } @media (max-width: 820px) { .bb-nav { display: none; } } /* ─── Shared bottom-nav (mobile) ──────────────────────────────────────────── */ .bb-bottom-nav { display: none; } @media (max-width: 820px) { .bb-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: rgba(8,16,26,0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--bb-border); padding: 0.3rem 0 calc(0.3rem + env(safe-area-inset-bottom)); } .bb-bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; cursor: pointer; text-decoration: none; color: var(--bb-dim); font-family: var(--bb-font); padding: 0.15rem 0; } .bb-bnav-item .bb-bnav-icon { font-size: 1.15rem; line-height: 1; } .bb-bnav-item .bb-bnav-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2px; } .bb-bnav-item.bb-active { color: var(--bb-accent); } /* Keep page content clear of the fixed bar */ body { padding-bottom: 56px; } } /* Sport-switcher popup (bottom-nav "Hubs") */ .bb-hubs-popup { display: none; position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%); z-index: 1001; background: var(--bb-surface-2); border: 1px solid var(--bb-border); border-radius: var(--bb-radius); padding: 0.5rem; min-width: 210px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); } .bb-hubs-popup.open { display: block; } .bb-hubs-popup a { display: block; color: var(--bb-text); text-decoration: none; font-size: 0.85rem; font-weight: 700; padding: 0.55rem 0.7rem; border-radius: var(--bb-radius-sm); } .bb-hubs-popup a:hover, .bb-hubs-popup a.bb-active { background: rgba(255,255,255,0.06); color: var(--bb-accent); } /* ─── Shared footer ───────────────────────────────────────────────────────── */ .bb-footer { border-top: 1px solid var(--bb-border); background: var(--bb-surface); padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom)); font-family: var(--bb-font); color: var(--bb-muted); font-size: 0.78rem; } .bb-footer-inner { max-width: var(--bb-maxw); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; } .bb-footer a { color: var(--bb-muted); text-decoration: none; } .bb-footer a:hover { color: var(--bb-text); } .bb-footer .bb-foot-rg { width: 100%; color: var(--bb-dim); font-size: 0.7rem; line-height: 1.5; margin-top: 0.5rem; } /* Shared focus-visible for keyboard users */ .bb-header a:focus-visible, .bb-switcher:focus-visible, .bb-cta:focus-visible, .bb-bnav-item:focus-visible, .bb-hubs-popup a:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 2px; }