/* ═══════════════════════════════════════════════════════════ QUORUM — Shared Design System Sports intelligence aesthetic. Barlow Condensed + Inter. Light/dark theme via [data-theme] on . ═══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Barlow+Condensed:wght@500;600;700;800&display=swap'); /* ── Reset ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Dark Theme (default) ── */ :root { --bg: #18181B; --surface: #27272A; --surface-2: #3F3F46; --border: #3F3F46; --border-light: #52525B; --text: #E4E4E7; --text-bright: #FAFAFA; --text-muted: #A1A1AA; --text-dim: #71717A; --accent: #3B82F6; --accent-light: #60A5FA; --accent-dim: rgba(59, 130, 246, 0.12); --accent-border: rgba(59, 130, 246, 0.3); --cta: #F97316; --cta-dim: rgba(249, 115, 22, 0.12); --cta-text: #FFFFFF; --green: #34D399; --green-dim: rgba(52, 211, 153, 0.10); --red: #F87171; --red-dim: rgba(248, 113, 113, 0.10); --gold: #FBBF24; --gold-dim: rgba(251, 191, 36, 0.10); --purple: #A78BFA; --purple-dim: rgba(167, 139, 250, 0.10); --nav-bg: rgba(24, 24, 27, 0.92); --nav-stripe: #F97316; --chart-grid: #3F3F46; --chart-label: #A1A1AA; --card-shadow: 0 1px 3px rgba(0,0,0,0.3); /* League colors (constant) */ --league-nba: #F97316; --league-nhl: #2563EB; --league-ncaab: #EAB308; --league-nfl: #16A34A; --league-mlb: #EF4444; --league-other: #A1A1AA; /* Typography */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --display: 'Barlow Condensed', 'Impact', sans-serif; --mono: 'Courier New', monospace; color-scheme: dark; } /* ── Light Theme ── */ [data-theme="light"] { --bg: #FAFAFA; --surface: #FFFFFF; --surface-2: #F4F4F5; --border: #E4E4E7; --border-light: #D4D4D8; --text: #3F3F46; --text-bright: #18181B; --text-muted: #71717A; --text-dim: #A1A1AA; --accent: #2563EB; --accent-dim: rgba(37, 99, 235, 0.08); --accent-border: rgba(37, 99, 235, 0.2); --cta: #EA580C; --cta-dim: rgba(234, 88, 12, 0.08); --cta-text: #FFFFFF; --green: #059669; --green-dim: rgba(5, 150, 105, 0.08); --red: #DC2626; --red-dim: rgba(220, 38, 38, 0.08); --gold: #D97706; --gold-dim: rgba(217, 119, 6, 0.08); --purple: #7C3AED; --purple-dim: rgba(124, 58, 237, 0.08); --nav-bg: rgba(255, 255, 255, 0.92); --nav-stripe: #EA580C; --chart-grid: #E4E4E7; --chart-label: #71717A; --card-shadow: 0 1px 3px rgba(0,0,0,0.08); color-scheme: light; } /* Auto-detect system preference when no explicit theme set */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #FAFAFA; --surface: #FFFFFF; --surface-2: #F4F4F5; --border: #E4E4E7; --border-light: #D4D4D8; --text: #3F3F46; --text-bright: #18181B; --text-muted: #71717A; --text-dim: #A1A1AA; --accent: #2563EB; --accent-dim: rgba(37, 99, 235, 0.08); --accent-border: rgba(37, 99, 235, 0.2); --cta: #EA580C; --cta-dim: rgba(234, 88, 12, 0.08); --cta-text: #FFFFFF; --green: #059669; --green-dim: rgba(5, 150, 105, 0.08); --red: #DC2626; --red-dim: rgba(220, 38, 38, 0.08); --gold: #D97706; --gold-dim: rgba(217, 119, 6, 0.08); --purple: #7C3AED; --purple-dim: rgba(124, 58, 237, 0.08); --nav-bg: rgba(255, 255, 255, 0.92); --nav-stripe: #EA580C; --chart-grid: #E4E4E7; --chart-label: #71717A; --card-shadow: 0 1px 3px rgba(0,0,0,0.08); color-scheme: light; } } /* ── Base ── */ body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Tabular numbers for data */ .tabnum { font-variant-numeric: tabular-nums; } /* ── Navigation ── */ .nav { border-bottom: 3px solid var(--nav-stripe); padding: 0 40px; height: 56px; display: flex; align-items: center; justify-content: space-between; background: var(--nav-bg); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 100; } .nav-brand { display: flex; align-items: center; text-decoration: none; } .nav-brand .mark { font-family: var(--display); font-size: 20px; color: var(--text-bright); letter-spacing: 4px; font-weight: 800; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--text-muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .nav-links a:hover, .nav-links a.active { color: var(--text-bright); border-bottom-color: var(--cta); text-decoration: none; } .nav-cta { font-family: var(--sans); font-size: 13px; font-weight: 600; background: var(--cta); color: var(--cta-text); padding: 8px 20px; border-radius: 20px; border: none; cursor: pointer; text-decoration: none; transition: opacity 0.15s; } .nav-cta:hover { opacity: 0.85; text-decoration: none; } /* Theme toggle */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; transition: color 0.15s, border-color 0.15s; } .theme-toggle:hover { color: var(--text-bright); border-color: var(--border-light); } .theme-toggle svg { width: 18px; height: 18px; } /* Show sun in dark mode, moon in light mode */ .icon-sun { display: block; } .icon-moon { display: none; } [data-theme="light"] .icon-sun { display: none; } [data-theme="light"] .icon-moon { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .icon-sun { display: none; } :root:not([data-theme]) .icon-moon { display: block; } } /* ── Section Labels ── */ .section-label { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--cta); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 16px; } /* ── Cards ── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; box-shadow: var(--card-shadow); } /* ── KPI Cards ── */ .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; text-align: center; border-top: 4px solid var(--cta); box-shadow: var(--card-shadow); } .kpi-value { font-family: var(--display); font-size: 32px; font-weight: 800; color: var(--text-bright); line-height: 1; font-variant-numeric: tabular-nums; } .kpi-value.accent { color: var(--accent); } .kpi-value.cta { color: var(--cta); } .kpi-value.green { color: var(--green); } .kpi-value.gold { color: var(--gold); } .kpi-label { font-family: var(--display); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 2px; margin-top: 6px; } /* ── Buttons ── */ .btn-primary { font-family: var(--sans); font-size: 14px; font-weight: 600; background: var(--cta); color: var(--cta-text); padding: 10px 24px; border-radius: 8px; border: none; cursor: pointer; transition: opacity 0.15s; } .btn-primary:hover { opacity: 0.85; } .btn-secondary { font-family: var(--sans); font-size: 14px; font-weight: 600; background: transparent; color: var(--text); padding: 10px 24px; border-radius: 8px; border: 2px solid var(--border-light); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .btn-secondary:hover { border-color: var(--accent); color: var(--text-bright); } /* ── Badges ── */ .badge { font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 12px; display: inline-block; } .badge-agent { background: var(--surface-2); color: var(--text-muted); } .badge-ai { background: var(--surface-2); color: var(--text-muted); } .badge-wallet { background: var(--cta-dim); color: var(--cta); } /* ── Category / League Pills ── */ .cat-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .cat-pill { font-family: var(--display); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 6px 16px; border-radius: 20px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s; } .cat-pill:hover { border-color: var(--border-light); color: var(--text); } .cat-pill.active { background: var(--accent); color: white; border-color: var(--accent); } .cat-pill.active[data-league="nba"] { background: var(--league-nba); border-color: var(--league-nba); } .cat-pill.active[data-league="nhl"] { background: var(--league-nhl); border-color: var(--league-nhl); } .cat-pill.active[data-league="ncaab"] { background: var(--league-ncaab); border-color: var(--league-ncaab); color: #18181B; } .cat-pill.active[data-league="nfl"] { background: var(--league-nfl); border-color: var(--league-nfl); } /* ── Consensus / Direction Bars ── */ .dir-bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; gap: 2px; } .dir-seg { display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 12px; font-weight: 700; transition: width 0.5s ease; } .dir-seg.yes { background: var(--accent-dim); color: var(--accent); } .dir-seg.no { background: var(--surface-2); color: var(--text-muted); } /* ── Form Inputs ── */ input[type="text"], input[type="email"], input[type="number"], input[type="search"], textarea, select { font-family: var(--sans); font-size: 14px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; outline: none; transition: border-color 0.15s; width: 100%; } input:focus, textarea:focus, select:focus { border-color: var(--accent); } /* ── Loading ── */ .loading { text-align: center; padding: 40px; color: var(--text-dim); font-size: 14px; } /* ── Footer ── */ footer { text-align: center; padding: 40px 20px; font-size: 13px; color: var(--text-dim); border-top: 1px solid var(--border); margin-top: 60px; } footer a { color: var(--text-muted); } /* ── Responsive ── */ @media (max-width: 768px) { .nav { padding: 0 16px; } .nav-brand .mark { font-size: 16px; letter-spacing: 3px; } .nav-links { gap: 16px; } .nav-links a { font-size: 13px; } .nav-cta { padding: 6px 14px; font-size: 12px; } .kpi-strip { grid-template-columns: repeat(3, 1fr); } .kpi-value { font-size: 24px; } .kpi-label { font-size: 9px; } .hide-mobile { display: none !important; } } @media (max-width: 480px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }