@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap'); /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } img, svg { display: block; max-width: 100%; } button { cursor: pointer; font: inherit; } a { color: inherit; text-decoration: none; } /* ── Design tokens ───────────────────────────────────────────────────────── */ /* Poolr v2 — Blackhawks-inspired red/gold/orange, cool charcoal-blue dark theme (was warm near-black under Arena), full light-theme support via the html.light class (toggled + persisted to localStorage — see the theme toggle script near the bottom of this file's consumers). */ :root { /* Backgrounds — dark (default) */ --bg: #23242e; --surf: #2e3040; --surf2: #383a4c; --border: #474a5f; --divider: rgba(255,255,255,0.07); --chip: rgba(255,255,255,0.09); --dash: #5c5f72; --navbg: rgba(35,36,46,0.96); --ice-tex: linear-gradient(rgba(35,36,46,0.86), rgba(35,36,46,0.8)), url('/public/images/ice-texture.png'); /* Legacy aliases for older includes — track the new tokens so old markup gets the new palette + theme-awareness for free */ --surface: var(--surf); --surface-2: var(--surf2); --border-dim: var(--divider); /* Brand colours */ --red: #cf0a2c; --red-d: #8f0016; --red-10: rgba(207,10,44,0.10); --red-12: rgba(207,10,44,0.12); --red-20: rgba(207,10,44,0.20); --red-25: rgba(207,10,44,0.25); --gold: #ffd100; --goldtxt: #ffd100; --gold-8: rgba(255,209,0,0.08); --gold-25: rgba(255,209,0,0.25); --orange: #ff671f; --green: #00c875; --alert: #ff4d5e; /* Text — dark (default) */ --txt: #f8f7f5; --txt2: #b6b4c0; --text: var(--txt); --text-sec: var(--txt2); --text-dim: var(--txt2); --text-muted: var(--dash); --text-deep: var(--border); /* Typography */ --font-ui: 'Space Grotesk', system-ui, sans-serif; --font-hd: 'Barlow Condensed', system-ui, sans-serif; --font-mono: monospace; /* Radii */ --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; /* Transitions */ --t-fast: 0.15s ease; } /* Light theme — toggled via , not just inverted tokens: --goldtxt/--alert are deliberately darker here for contrast on a light bg, the same way the Poolr mockup handles it. */ html.light { --bg: #eef0f4; --surf: #ffffff; --surf2: #e4e7ee; --border: #d3d6e0; --divider: rgba(20,22,35,0.08); --chip: rgba(20,22,35,0.06); --dash: #b3b6c4; --navbg: rgba(255,255,255,0.96); --ice-tex: linear-gradient(rgba(238,240,244,0.72), rgba(238,240,244,0.6)), url('/public/images/ice-texture.png'); --goldtxt: #a37f00; --alert: #cf0a2c; --txt: #191a22; --txt2: #5e6172; } /* ── Animations ──────────────────────────────────────────────────────────── */ @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.35); } } @keyframes scoreFlash { 0% { color: #fff; transform: scale(1.18); } 60% { color: var(--red); } 100% { color: var(--txt); transform: scale(1); } } @keyframes flyUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 70% { opacity: 1; transform: translateY(-48px) scale(1.1); } 100% { opacity: 0; transform: translateY(-72px) scale(0.9); } } @keyframes shimmerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.06); } 28% { transform: scale(1); } 42% { transform: scale(1.03); } } .heartbeat { animation: heartbeat 2.4s ease-in-out infinite; display: inline-block; } .live-pulse { animation: livePulse 1.4s ease-in-out infinite; } /* ── Base ────────────────────────────────────────────────────────────────── */ html, body { background: var(--bg); color: var(--txt); font-family: var(--font-ui); font-size: 14px; line-height: 1.5; min-height: 100%; -webkit-font-smoothing: antialiased; } /* Mobile viewport — screens are 390px wide, centred on desktop */ .screen { width: 100%; max-width: 390px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; background: var(--bg); } /* Applied to on every logged-in page — fills the dead space either side of the centered .screen column on wide screens with a blurred locker-room photo. .screen itself keeps its own solid --bg background unchanged, so the app column's look is untouched; this only ever shows in the margins around it. Pre-blurred JPEG, not a CSS filter, so there's no pseudo-element workaround needed and no runtime blur cost. */ .app-bg { background: linear-gradient(rgba(8,10,22,0.55), rgba(8,10,22,0.55)), url('/public/images/lockerroom-blur.jpg') center/cover fixed; } /* ── Rink boards stripe ──────────────────────────────────────────────────── */ /* Sits directly under the ticker on every screen — a thin blue rail / white board / yellow kickplate, like real NHL dasher boards. Small, cheap, distinctly "real hockey" rather than generic app chrome. */ .rink-boards { display: flex; flex-direction: column; width: 100%; flex-shrink: 0; } .rink-boards .rail { height: 4px; background: #1e63b0; } .rink-boards .board { height: 2px; background: rgba(255,255,255,0.85); } .rink-boards .plate { height: 3px; background: #f2c400; } /* ── Live Ticker ─────────────────────────────────────────────────────────── */ .ticker-bar { position: fixed; top: 0; left: 0; right: 0; width: auto; height: 26px; background: var(--red); overflow: hidden; display: flex; align-items: center; z-index: 100; } /* Inside the mobile-app shell (.screen), the ticker matches .screen's own width/centering rather than spanning the full viewport — mirrors .bottom-nav's exact technique. .screen-landing (the marketing page) has no override here, so it keeps the base full-width rule above. */ .screen .ticker-bar { left: 50%; right: auto; transform: translateX(-50%); width: 390px; } .ticker-live-badge { background: var(--red-d); padding: 0 12px; height: 100%; display: flex; align-items: center; gap: 6px; flex-shrink: 0; z-index: 1; } .ticker-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; animation: livePulse 1.4s ease-in-out infinite; } .ticker-live-label { font-family: var(--font-ui); font-size: 10px; font-weight: 800; color: #fff; letter-spacing: 1px; } .ticker-scroll { overflow: hidden; flex: 1; } .ticker-track { display: flex; gap: 0; white-space: nowrap; animation: ticker 28s linear infinite; will-change: transform; } .ticker-item { font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.4px; padding: 0 20px; flex-shrink: 0; display: inline-flex; align-items: center; } .ticker-tag { background: rgba(0,0,0,0.25); padding: 1px 6px; border-radius: 3px; margin-right: 8px; font-size: 9px; letter-spacing: 1px; } .ticker-dot { color: rgba(255,255,255,0.5); padding: 0 4px; } /* ── News detail (click-to-expand) ──────────────────────────────────────── */ .news-detail { display: none; } [data-expanded="1"] .news-detail { display: block; } /* ── Typography ──────────────────────────────────────────────────────────── */ .font-hd { font-family: var(--font-hd); } .font-ui { font-family: var(--font-ui); } .font-mono { font-family: var(--font-mono); } .text { color: var(--txt); } .text-sec { color: var(--text-sec); } .text-dim { color: var(--txt2); } .text-muted { color: var(--text-muted); } .text-red { color: var(--red); } .text-gold { color: var(--gold); } .text-green { color: var(--green); } .text-alert { color: var(--alert); } /* legacy */ .text-cyan { color: var(--red); } /* ── Page header ─────────────────────────────────────────────────────────── */ .page-header { display: flex; align-items: center; padding: 16px 20px; background: var(--surf); border-bottom: 1px solid var(--border); gap: 12px; position: sticky; top: 0; z-index: 50; } .page-header-title { font-family: var(--font-hd); font-size: 20px; font-weight: 700; color: var(--txt); letter-spacing: 0.5px; } .page-header-sub { font-size: 11px; color: var(--text-muted); } /* ── Logo ────────────────────────────────────────────────────────────────── */ /* Poolr's full wordmark lockup — a single wide transparent-background (hockey-stick "POOLR" lettering) that already carries the brand text, so no adjacent .logo-text span is needed. */ /* .logo is a fixed-size ice-texture "bar" — the crest logo is absolutely positioned and sized taller than the bar itself, so it dramatically overflows above/below (a badge-over-a-ribbon look), not just an image sitting inside a chip. overflow:visible is load-bearing here. */ .logo { position: relative; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: var(--ice-tex); background-size: cover; background-position: center; border-radius: 10px; width: 130px; height: 42px; overflow: visible; } .logo-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 92px; width: auto; object-fit: contain; pointer-events: none; } /* ── Bottom navigation ───────────────────────────────────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 390px; display: flex; background: var(--navbg); backdrop-filter: blur(14px); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 16px); z-index: 100; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 0 2px; background: none; border: none; gap: 3px; /* Always full-contrast text (not a dimmed default) — bottom-nav labels need to stay legible at a glance, including for older users; the red underline glow alone communicates the active tab. */ color: var(--txt); font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.3px; transition: color var(--t-fast); text-decoration: none; position: relative; cursor: pointer; } .nav-item:hover { color: var(--red); } .nav-item.active { color: var(--txt); font-weight: 800; } .nav-item.active::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; background: var(--red); border-radius: 0 0 3px 3px; box-shadow: 0 2px 10px var(--red); } .nav-icon { font-size: 18px; line-height: 1; } /* ── Bottom nav flyout menus (Live / Account) ───────────────────────────── */ .nav-item-wrap { flex: 1; position: relative; display: flex; } .nav-flyout { display: none; flex-direction: column; gap: 2px; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 168px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg, 12px); padding: 6px; box-shadow: 0 10px 32px rgba(0,0,0,0.45); z-index: 110; } .nav-flyout.open { display: flex; } .nav-flyout-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md, 8px); color: var(--txt); font-family: var(--font-ui); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; } .nav-flyout-item .nav-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; } .nav-flyout-item:hover { background: var(--surf2); } .nav-flyout-item.active { color: var(--red); background: rgba(207,10,44,0.08); } /* ── Theme toggle ────────────────────────────────────────────────────────── */ .theme-toggle { background: none; border: 1px solid var(--border); border-left: none; color: var(--txt2); cursor: pointer; font-size: 13px; padding: 6px 10px; border-radius: 0 8px 8px 0; line-height: 1; } .theme-toggle:hover { color: var(--txt); } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); } .card-red { background: linear-gradient(135deg, var(--red-12), rgba(207,10,44,0.03)); border-color: var(--red-20); } /* ── Stat cells ──────────────────────────────────────────────────────────── */ .stat-row { display: flex; background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; } .stat-cell { flex: 1; padding: 14px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--border); } .stat-cell:last-child { border-right: none; } .stat-value { font-family: var(--font-hd); font-size: 26px; font-weight: 800; color: var(--txt); } .stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* ── Pills / badges ──────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; font-family: var(--font-ui); letter-spacing: 0.3px; } .pill-red { background: var(--red-10); color: var(--red); border: 1px solid var(--red-20); } .pill-gold { background: var(--gold-8); color: var(--gold); border: 1px solid var(--gold-25); } .pill-green { background: rgba(0,200,117,0.10); color: var(--green); border: 1px solid rgba(0,200,117,0.25); } .pill-alert { background: rgba(255,71,87,0.10); color: var(--alert); border: 1px solid rgba(255,71,87,0.30); } .badge-live { background: rgba(255,71,87,0.15); border: 1px solid rgba(255,71,87,0.4); color: var(--alert); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; font-family: var(--font-ui); letter-spacing: 0.5px; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: var(--r-md); padding: 15px 20px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; transition: opacity var(--t-fast); text-align: center; } .btn:hover:not(:disabled) { opacity: 0.85; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--red); color: #fff; } .btn-secondary { background: rgba(255,255,255,0.05); color: var(--txt); border: 1px solid rgba(255,255,255,0.1); } .btn-ghost { background: none; color: var(--txt2); border: 1px solid var(--border); } .btn-danger { background: rgba(255,71,87,0.15); color: var(--alert); border: 1px solid rgba(255,71,87,0.3); } .btn-sm { padding: 7px 12px; font-size: 12px; border-radius: var(--r-sm); } /* ── Forms ───────────────────────────────────────────────────────────────── */ .input { background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; color: var(--txt); font-family: var(--font-ui); font-size: 14px; outline: none; width: 100%; transition: border-color var(--t-fast); } .input:focus { border-color: var(--red); } .input::placeholder { color: var(--text-muted); } /* ── Section headings ────────────────────────────────────────────────────── */ .section-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 6px; } .section-title { font-family: var(--font-hd); font-size: 13px; font-weight: 700; color: var(--txt); letter-spacing: 1px; text-transform: uppercase; } /* ── Chat bubbles ────────────────────────────────────────────────────────── */ .bubble-ai { background: var(--surf2); border: 1px solid var(--border); border-radius: 4px 12px 12px 12px; padding: 10px 13px; font-size: 13.5px; color: var(--txt); line-height: 1.5; max-width: 78%; } .bubble-user { background: var(--red-12); border: 1px solid var(--red-25); border-radius: 12px 4px 12px 12px; padding: 10px 13px; font-size: 13.5px; color: var(--txt); line-height: 1.5; max-width: 78%; } .ai-avatar { width: 28px; height: 28px; border-radius: 6px; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--font-hd); font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0; } /* ── Chat input bar ──────────────────────────────────────────────────────── */ .chat-bar { display: flex; gap: 8px; padding: 12px 16px 20px; border-top: 1px solid var(--border); background: var(--surf); } .chat-input { flex: 1; background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; color: var(--text-muted); font-size: 14px; font-family: var(--font-ui); } .send-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--red); border: none; color: #fff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity var(--t-fast); } .send-btn:hover:not(:disabled) { opacity: 0.85; } /* ── Position tag (roster rows) ──────────────────────────────────────────── */ .pos-tag { width: 28px; height: 20px; background: rgba(255,255,255,0.06); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--txt2); flex-shrink: 0; } /* ── Avatar circle ───────────────────────────────────────────────────────── */ .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--red-10); border: 1px solid var(--red-20); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--red); font-family: var(--font-ui); flex-shrink: 0; } /* ── NHL player/team imagery ─────────────────────────────────────────────── */ /* Hotlinked directly from assets.nhle.com — same trust posture as every other NHL API integration in this app, no local mirroring. */ .player-headshot { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surf2); border: 1px solid var(--border); flex-shrink: 0; } .team-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; } .team-logo-lg { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.35)); } /* Player hero banner — action-shot photo behind a gradient wash for text legibility, same visual family as index.php's hero treatment. */ .player-hero-banner { position: relative; height: 200px; background-size: cover; background-position: center 20%; display: flex; align-items: flex-end; padding: 20px; } .player-hero-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,22,0.15), var(--bg) 92%); } .player-hero-banner > * { position: relative; z-index: 1; } /* Team franchise banner — gradient + big logo by default; .has-photo swaps in a TheSportsDB banner photo behind the same gradient wash .player-hero-banner uses for text legibility, when one is available. */ .team-hero-banner { background: linear-gradient(135deg, var(--red), var(--red-d)); border-radius: 14px; padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 6px 26px rgba(207,10,44,0.35); } .team-hero-banner.has-photo { position: relative; background-size: cover; background-position: center; overflow: hidden; } .team-hero-banner.has-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(207,10,44,0.75), rgba(143,0,22,0.85)); } .team-hero-banner.has-photo > * { position: relative; z-index: 1; } /* Individual historic-game banner — generated in-situ (no real photo source exists for individual games), same gradient family as .team-hero-banner. */ .game-banner { background: linear-gradient(135deg, var(--red), var(--red-d)); border-radius: 14px; padding: 20px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; box-shadow: 0 6px 26px rgba(207,10,44,0.35); } .game-banner .game-banner-team { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; min-width: 0; } .game-banner .game-banner-team img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35)); } .game-banner .game-banner-score { font-family: var(--font-hd); font-size: 30px; font-weight: 900; color: #fff; } .game-banner .game-banner-code { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85); letter-spacing: 0.5px; } .game-banner .game-banner-vs { font-family: var(--font-ui); font-size: 11px; color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 1px; } .game-banner .game-banner-winner-tag { position: absolute; top: -14px; background: var(--gold); color: #1a1200; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } /* Monthly calendar grid — daily-standings.php's day picker. */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-weekday { text-align: center; font-size: 10px; font-weight: 700; color: var(--txt2); text-transform: uppercase; padding-bottom: 4px; } .cal-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: var(--font-ui); font-size: 13px; color: var(--txt); text-decoration: none; background: var(--surf2); border: 1px solid var(--border); position: relative; } .cal-day-empty { background: transparent; border: none; } .cal-day.has-data::after { content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); } .cal-day.is-today { border-color: var(--red); font-weight: 700; } .cal-day.selected { background: var(--red); color: #fff; border-color: var(--red); } .cal-day.selected.has-data::after { background: #fff; } /* ── Flash messages ──────────────────────────────────────────────────────── */ .flash { padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; margin: 10px 16px; } .flash-success { background: rgba(0,200,117,0.10); color: var(--green); border: 1px solid rgba(0,200,117,0.25); } .flash-error { background: rgba(207,10,44,0.10); color: var(--red); border: 1px solid rgba(207,10,44,0.25); } /* ── Tabs ────────────────────────────────────────────────────────────────── */ .tabs { display: flex; border-bottom: 1px solid var(--border); } .tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 0; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-muted); transition: color var(--t-fast); text-align: center; } .tab:hover { color: var(--text-sec); } .tab.active { color: var(--red); border-bottom-color: var(--red); } /* ── Grid / bg decoration ────────────────────────────────────────────────── */ .grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(207,10,44,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(207,10,44,0.03) 1px, transparent 1px); background-size: 32px 32px; } .glow-orb { position: absolute; top: -120px; right: -80px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(207,10,44,0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ── Utility ─────────────────────────────────────────────────────────────── */ .relative { position: relative; } .z1 { z-index: 1; } .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .flex-1 { flex: 1; } .ml-auto { margin-left: auto; } .pb-nav { padding-bottom: 90px; } .p-16 { padding: 16px; } .px-16 { padding-left: 16px; padding-right: 16px; } .overflow-y-auto { overflow-y: auto; } /* ── Responsive breakpoints ──────────────────────────────────────────────── */ /* Phablet / large phone */ @media (min-width: 480px) { .screen { max-width: 480px; box-shadow: 0 0 60px rgba(207,10,44,0.05); } .bottom-nav { width: 480px; } .screen .ticker-bar { width: 480px; } } /* Tablet */ @media (min-width: 768px) { .screen { max-width: 600px; box-shadow: 0 0 80px rgba(207,10,44,0.07); } .bottom-nav { width: 600px; } .screen .ticker-bar { width: 600px; } /* Two-column stat row on tablet+ */ .responsive-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Wider page headers */ .page-header { padding: 18px 28px; } } /* Desktop */ @media (min-width: 1024px) { .screen { max-width: 720px; box-shadow: 0 0 120px rgba(207,10,44,0.08); } .bottom-nav { width: 720px; } .screen .ticker-bar { width: 720px; } } /* Large desktop — the mobile-style shell keeps growing rather than plateauing at 720px forever, so it doesn't read as a tiny phone card floating in empty space on a big monitor. Still single-column; no layout/grid changes, just more breathing room. */ @media (min-width: 1280px) { .screen { max-width: 900px; box-shadow: 0 0 140px rgba(207,10,44,0.09); } .bottom-nav { width: 900px; } .screen .ticker-bar { width: 900px; } } /* Very large desktop */ @media (min-width: 1536px) { .screen { max-width: 1080px; box-shadow: 0 0 160px rgba(207,10,44,0.1); } .bottom-nav { width: 1080px; } .screen .ticker-bar { width: 1080px; } } /* ── Landing page — full-width, NOT constrained to .screen ───────────────── */ .screen-landing { width: 100%; max-width: none; background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* Landing two-column grid (copy left / hero right) */ .landing-grid { width: 100%; padding: 24px 20px 0; } .landing-hero-desktop { display: none; } .landing-hero-mobile { display: block; } @media (min-width: 768px) { .landing-grid { display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: center; padding: 32px 48px; max-width: 1280px; margin: 0 auto; } .landing-hero-desktop { display: block; } .landing-hero-mobile { display: none; } /* Wider nav on desktop */ .landing-nav-inner { padding: 16px 48px; max-width: 1280px; margin: 0 auto; width: 100%; } /* Sport tabs wider */ .landing-tabs-row { padding: 20px 48px 0; max-width: 1280px; margin: 0 auto; } /* Stats + trust strip */ .landing-trust-row { padding: 16px 48px; max-width: 1280px; margin: 0 auto; } .landing-trust-row { display: flex; gap: 32px; justify-content: center; } } /* Landing nav responsive */ .landing-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--surf); border-bottom: 1px solid var(--border); position: sticky; top: 24px; z-index: 50; } @media (min-width: 768px) { .landing-nav-inner { position: static; top: auto; } .landing-nav-desktop-links { display: flex; gap: 32px; } } @media (max-width: 767px) { .landing-nav-desktop-links { display: none; } }