/* ============================================================================ T&G MLB Edge - Bad Bets dashboard. Sportsbook-dark aesthetic (DK / FanDuel / Underdog inspired) with MLB iconography touches. All existing class names preserved so the HTML pages render unchanged. ============================================================================ */ /* ---- Design tokens --------------------------------------------------- */ :root { /* Surface palette - warmer than pure black, more app-like */ --bg: #0b0d12; --surface: #14171f; --surface-2: #1a1e28; --surface-3: #20242f; --border: #262b38; --border-2: #323847; /* Brand + semantic */ --amber: #ffaa00; --amber-soft:#3a2c0a; --amber-dim: #b58323; --green: #28d670; --green-soft:#103c20; --red: #ff4757; --red-soft: #3a121a; --yellow: #ffd23f; --blue: #4a9eff; --purple: #b06bff; /* Text */ --text: #eef0f4; --text-2: #cad0db; /* secondary text — high contrast */ --muted: #9aa4b8; /* tertiary text / labels */ /* Image fade-in to smooth headshot loading */ --image-load-fade: 0.25s ease-out; --faint: #4d5566; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Radii */ --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 20px; --r-full: 999px; /* Type — magazine editorial: Playfair Display for headlines, Inter for body */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "DM Mono", Menlo, Consolas, "Roboto Mono", monospace; /* Big Shoulders Display: modern condensed sports sans (think ESPN broadcast titles, The Athletic). Heavy weights only — designed for huge headlines. */ --font-display: "Big Shoulders Display", "Bebas Neue", Impact, Oswald, sans-serif; /* Elevation */ --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 4px 14px rgba(0,0,0,0.5); --shadow-glow-amber: 0 0 24px rgba(255,170,0,0.15); --shadow-glow-green: 0 0 24px rgba(40,214,112,0.15); --shadow-glow-red: 0 0 24px rgba(255,71,87,0.15); } * { box-sizing: border-box; margin: 0; padding: 0; } *::selection { background: var(--amber); color: #000; } html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* ============================================================================ PAGE BACKGROUND — three layers stacked for depth: 1. Aurora gradients (color glow, drifts slowly) body::before 2. Dot-grid pattern (tech/dashboard feel) main::before 3. Baseball diamond watermark (MLB identity) main::after Vignette overlay added at body::after to keep contrast. ============================================================================ */ body::before { content: ""; position: fixed; inset: -25%; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 50% 40% at 20% 25%, rgba(255,170,0,0.16) 0%, transparent 60%), radial-gradient(ellipse 45% 55% at 80% 65%, rgba(74,158,255,0.12) 0%, transparent 60%), radial-gradient(ellipse 40% 35% at 55% 95%, rgba(40,214,112,0.09) 0%, transparent 60%), radial-gradient(ellipse 35% 30% at 95% 15%, rgba(176,107,255,0.07) 0%, transparent 60%); filter: blur(80px) saturate(1.1); opacity: 0.85; animation: aurora-drift 32s ease-in-out infinite alternate; } /* BACKGROUND DESIGN — diagonal repeating "BAD BETS" wordmark. Animated: the pattern slowly scrolls diagonally so the page feels alive. Combined with the aurora drift (different speed), the two layers create subtle parallax depth — alive, 3D-ish, not distracting. */ body::after { content: ""; position: fixed; inset: -25%; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,BAD BETS"); background-repeat: repeat; background-size: 760px 240px; /* Tilt for diagonal feel + perspective for depth */ transform: rotate(-9deg) perspective(1200px) rotateX(8deg); transform-origin: 50% 50%; animation: wordmark-drift 70s linear infinite; will-change: background-position; } @keyframes wordmark-drift { 0% { background-position: 0 0; } 100% { background-position: 760px -240px; } } /* Vignette overlay so the wordmark fades into the page edges. */ main::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 85% 65% at 50% 40%, transparent 0%, rgba(11,13,18,0.6) 100%); } /* Watermark removed for the editorial overhaul — typography does the work now. */ @keyframes aurora-drift { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-3%, 2%) scale(1.05); } 50% { transform: translate(2%, -2.5%) scale(1.08); } 75% { transform: translate(1.5%, 2%) scale(1.03); } 100% { transform: translate(-1%, -1.5%) scale(1.06); } } @keyframes watermark-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } a { color: var(--amber); text-decoration: none; transition: color .15s; } a:hover { color: var(--text); } /* ---- Header / nav ---------------------------------------------------- */ /* z-index 70 (was 50) so its child drawer can layer above the body-level .nav-backdrop (z 55). Stacking contexts: child z-indexes are relative to the parent's, so the header itself must beat the backdrop. */ .site-header { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; background: rgba(11,13,18,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* Brand mark (logo + wordmark). Either an linking home or a static div. */ .brand, a.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); transition: opacity .15s; } a.brand:hover { opacity: 0.85; } .brand-logo { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; background: var(--surface); /* Same screen blend as the hero logo so the dark bg of the meme PNG disappears against the dark header. */ mix-blend-mode: screen; } .brand-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.3px; color: var(--text); } /* Legacy text brand (still rendered on pages that haven't been updated) */ .brand .mark { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--amber); letter-spacing: -0.5px; background: linear-gradient(135deg, var(--amber), #ffd266); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .brand .title { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-2); padding: 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-s); } /* v0.8: hamburger-everywhere nav. The primary nav is ALWAYS a drawer now — no inline horizontal nav at any breakpoint. Header shows: ☰ · brand · auth The drawer slides in from the LEFT (matches the hamburger on the left). */ nav.primary { position: fixed; top: 64px; /* sits below the header */ left: 0; width: min(360px, calc(100vw - 0px)); height: calc(100vh - 64px); background: rgba(11,13,18,0.97); backdrop-filter: blur(14px); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0; padding: 12px 0 24px; transform: translateX(-100%); opacity: 0; pointer-events: none; transition: transform .22s ease, opacity .18s ease; z-index: 60; overflow-y: auto; } body.nav-open nav.primary { transform: translateX(0); opacity: 1; pointer-events: auto; } nav.primary a { color: var(--text-2); padding: 14px 24px; font-size: 15px; font-weight: 600; letter-spacing: 0.3px; border-bottom: 1px solid var(--border); border-radius: 0; transition: background .15s, color .15s; } nav.primary a:hover { color: var(--text); background: var(--surface); } nav.primary a.active { color: var(--amber); background: var(--surface); } /* NFL gets amber accent + MLB gets green accent inside the drawer. Each section pops in its own sport color so the drawer reads as genuinely multi-sport instead of one undifferentiated list. */ nav.primary a[data-section="nfl"] { color: var(--amber); font-weight: 700; } nav.primary a[data-section="nfl"]:hover, nav.primary a[data-section="nfl"].active { background: var(--amber-soft); color: var(--amber); } nav.primary a[data-section="mlb"] { color: var(--green); font-weight: 700; } nav.primary a[data-section="mlb"]:hover, nav.primary a[data-section="mlb"].active { background: rgba(40,214,112,0.14); color: var(--green); } nav.primary a[data-section="hub"] { color: var(--text-2); font-weight: 600; } nav.primary a[data-section="hub"]:hover, nav.primary a[data-section="hub"].active { background: var(--surface-2); color: var(--text); } /* ---- Per-link icons (CSS-only via data-page) ----------------------------- Each nav link already carries data-page, so a single pseudo-element selector per page assigns an icon. No HTML edits needed. */ nav.primary a::before { display: inline-block; margin-right: 8px; font-size: 1.05em; vertical-align: -1px; /* Emoji-only — keep its native color */ filter: none; } nav.primary a[data-page="nfl"]::before { content: "🏈"; } nav.primary a[data-page="nfl-today"]::before { content: "🎯"; } nav.primary a[data-page="nfl-live"]::before { content: "📡"; } nav.primary a[data-page="nfl-history"]::before{ content: "📋"; } nav.primary a[data-page="nfl-stats"]::before { content: "📊"; } nav.primary a[data-page="players"]::before { content: "👥"; } nav.primary a[data-page="news-nfl"]::before { content: "📰"; } nav.primary a[data-page="props"]::before { content: "🃏"; } nav.primary a[data-page="today"]::before { content: "⚾"; } nav.primary a[data-page="live"]::before { content: "📡"; } nav.primary a[data-page="history"]::before { content: "📋"; } nav.primary a[data-page="stats"]::before { content: "📊"; } nav.primary a[data-page="news-mlb"]::before { content: "📰"; } nav.primary a[data-page="news"]::before { content: "📰"; } nav.primary a[data-page="schedule"]::before { content: "📅"; } nav.primary a[data-page="hub"]::before { content: "🎛"; } nav.primary a[data-page="leagues"]::before { content: "🏆"; } nav.primary a[data-page="methodology"]::before{ content: "🔬"; } nav.primary a[data-page="account"]::before { content: "👤"; } nav.primary a[data-page="home"]::before { content: "🏠"; } /* Backdrop dim when drawer is open */ .nav-backdrop { position: fixed; inset: 64px 0 0 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 55; } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } /* Section labels appear above each grouped set of links */ .nav-section-label { display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 10px; color: var(--muted); padding: 18px 24px 8px; border-bottom: 1px solid var(--border); } .nav-section-label.nav-section-nfl { color: var(--amber); border-left: 3px solid var(--amber); } .nav-section-label.nav-section-mlb { color: var(--green); border-left: 3px solid var(--green); } .nav-section-label.nav-section-hub { color: var(--text-2); border-left: 3px solid var(--border); } nav.primary > .nav-section-label:first-child { padding-top: 8px; } /* ---- Hero section (home page only) ---------------------------------- */ .hero { position: relative; z-index: 1; overflow: hidden; background: radial-gradient(ellipse at 70% 30%, rgba(255,170,0,0.12) 0%, transparent 55%), radial-gradient(ellipse at 20% 80%, rgba(74,158,255,0.06) 0%, transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%); border-bottom: 1px solid var(--border); padding: 80px 28px 100px; } /* Slow-pulsing amber glow behind everything */ .hero::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(ellipse at 70% 40%, rgba(255,170,0,0.06) 0%, transparent 45%); animation: hero-pulse 8s ease-in-out infinite; pointer-events: none; z-index: 0; } /* Faint baseball-stitch pattern tiled across the hero. */ .hero::after { content: ""; position: absolute; inset: 0; background-image: /* tiny red stitches in a diagonal pattern */ radial-gradient(circle 1px at 12px 8px, rgba(255,71,87,0.18) 0, transparent 2px), radial-gradient(circle 1px at 28px 24px, rgba(255,71,87,0.14) 0, transparent 2px), radial-gradient(circle 1px at 44px 40px, rgba(255,71,87,0.10) 0, transparent 2px); background-size: 60px 60px; opacity: 0.55; mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%); pointer-events: none; z-index: 0; } @keyframes hero-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .hero-inner { position: relative; z-index: 1; } .hero-inner { max-width: 1320px; margin: 0 auto; /* Was 1.4fr 1fr — give the art column more real estate so the new full-composition meme logo dominates. */ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .hero-copy { max-width: 620px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--amber); padding: 8px 0; background: transparent; border-top: 1px solid var(--amber); border-bottom: 1px solid var(--amber); margin-bottom: 32px; } .hero-eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--amber); } .hero-headline { font-family: var(--font-display); font-size: clamp(56px, 9vw, 128px); font-weight: 900; line-height: 0.88; letter-spacing: -1.5px; text-transform: uppercase; color: var(--text); margin-bottom: 22px; } .hero-sub { font-family: var(--font-sans); font-size: clamp(17px, 1.7vw, 20px); font-weight: 400; color: var(--text-2); line-height: 1.5; margin-bottom: 32px; max-width: 560px; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .hero-art { display: flex; justify-content: center; align-items: center; perspective: 1000px; /* isolation: isolate creates a new stacking context so the logo's mix-blend-mode only blends with this container's background — NOT with the floating sports-emoji layer or hero gradient behind it. Without this, the blend tries to combine through the emojis and the "transparent" square ends up faintly tinted. */ isolation: isolate; } /* ---- 3D floating background layer behind the hero ---------------------- Each .float-obj is a sports emoji absolutely positioned on a perspective plane. Custom properties (--x/--y/--z/--d/--r) come from inline style, so each instance drifts independently. GPU composited via transform + opacity only. */ .hero-3d { position: absolute; inset: 0; pointer-events: none; z-index: 0; perspective: 1200px; perspective-origin: 50% 60%; overflow: hidden; } .float-obj { position: absolute; left: var(--x); top: var(--y); font-size: clamp(48px, 6vw, 84px); opacity: 0.10; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)); will-change: transform, opacity; transform: translate3d(0, 0, var(--z)) rotate(var(--r)); animation: float-drift var(--d) ease-in-out infinite; animation-delay: calc(var(--d) * -0.5); /* desync start times */ } @keyframes float-drift { 0%, 100% { transform: translate3d(0, 0, var(--z, -200px)) rotate(var(--r, 0deg)); opacity: 0.10; } 50% { transform: translate3d(0, -32px, calc(var(--z, -200px) + 80px)) rotate(calc(var(--r, 0deg) + 15deg)); opacity: 0.20; } } @media (prefers-reduced-motion: reduce) { .float-obj { animation: none; } } .hero-logo { /* Bigger on desktop so the new meme logo dominates the hero column. Three things conspire to kill the navy square: 1. isolation:isolate on the parent (above) limits the blend scope 2. contrast(1.18) pushes the dark navy in the PNG closer to true black so screen blend can cancel it cleanly 3. mix-blend-mode: screen treats near-black pixels as transparent */ width: 100%; max-width: 560px; height: auto; mix-blend-mode: screen; filter: contrast(1.18) saturate(1.1) drop-shadow(0 30px 60px rgba(0,0,0,0.7)) drop-shadow(0 0 40px rgba(255,170,0,0.22)); /* Vignette mask — feathers the outer ~6% of the image so any residual edge fades smoothly into the page instead of reading as a hard square. Character + wordmark sit well inside the safe zone. */ -webkit-mask-image: radial-gradient(ellipse 92% 92% at center, black 78%, transparent 100%); mask-image: radial-gradient(ellipse 92% 92% at center, black 78%, transparent 100%); /* Gentle float only — the new logo has embedded text, so the previous slow tumble would wobble the wordmark and look broken. */ animation: hero-float 7s ease-in-out infinite; will-change: transform; } @keyframes hero-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } } @keyframes hero-tumble { 0% { transform: rotate(-3deg) rotateY(0deg); } 50% { transform: rotate(3deg) rotateY(8deg); } 100% { transform: rotate(-3deg) rotateY(0deg); } } /* Same circular crop trick for the small nav brand mark */ .brand-logo { -webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 64%); mask-image: radial-gradient(circle at center, black 50%, transparent 64%); } /* ---- Buttons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--r-m); font-family: var(--font-sans); font-weight: 700; font-size: 14px; letter-spacing: 0.2px; text-decoration: none; border: 1px solid transparent; transition: transform .12s, background .12s, border-color .12s, color .12s, box-shadow .12s; cursor: pointer; } .btn:hover { transform: translateY(-1px); } .btn.primary { background: var(--amber); color: #0b0d12; box-shadow: 0 4px 14px rgba(255,170,0,0.25); } .btn.primary:hover { background: #ffc14d; box-shadow: 0 6px 20px rgba(255,170,0,0.4); color: #0b0d12; } .btn.ghost { background: transparent; color: var(--text); border-color: var(--border-2); } .btn.ghost:hover { background: var(--surface); border-color: var(--amber); color: var(--amber); } /* ---- Section CTA + Substack callout --------------------------------- */ .section-cta { margin: 16px 0 44px; text-align: center; } .section-cta a { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font-weight: 700; font-size: 13px; letter-spacing: 0.5px; } .section-cta a:hover { color: var(--text); } .substack-cta { margin: 60px 0 40px; padding: 44px 32px; background: radial-gradient(ellipse at center, rgba(255,170,0,0.08) 0%, transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r-l); text-align: center; } .substack-cta p { font-size: 16px; color: var(--text-2); margin-bottom: 24px; max-width: 500px; margin-left: auto; margin-right: auto; } /* ---- Page wrapper ---------------------------------------------------- */ main { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 32px 28px 80px; } /* MAGAZINE EDITORIAL TYPE SYSTEM — Big Shoulders Display headlines, Inter body. All display headlines render in uppercase to lean into the condensed-sans sports broadcast feel. */ h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 6.5vw, 88px); letter-spacing: -1px; line-height: 0.9; text-transform: uppercase; color: var(--text); margin-bottom: 4px; } h1 .sub { font-family: var(--font-sans); display: block; margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--text-2); letter-spacing: 1.5px; text-transform: uppercase; } h2 { font-family: var(--font-display); font-size: clamp(28px, 3.8vw, 46px); font-weight: 900; letter-spacing: -0.5px; line-height: 1; color: var(--text); text-transform: uppercase; margin: 56px 0 24px; padding-bottom: 14px; border-bottom: 2px solid var(--text); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } h2::before { display: none; } h2::after { content: ""; flex: 0 0 80px; height: 1px; background: var(--amber); margin-bottom: 6px; } p { margin-bottom: 12px; color: var(--text-2); } .muted { color: var(--muted); font-size: 13px; } .amber-text { color: var(--amber); } /* ---- KPI ribbon ------------------------------------------------------ */ .ribbon { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 24px 0 32px; } .stat { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r-l); padding: 18px 22px; transition: transform .15s, border-color .15s; } .stat:hover { transform: translateY(-2px); border-color: var(--border-2); } .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--amber); opacity: 0.6; } .stat.red { box-shadow: var(--shadow-glow-red); } .stat.red::before { background: var(--red); } .stat.red .v { color: var(--red); } .stat.green { box-shadow: var(--shadow-glow-green); } .stat.green::before { background: var(--green); } .stat.green .v { color: var(--green); } .stat.yellow::before { background: var(--yellow); } .stat.yellow .v { color: var(--yellow); } .stat .k { font-size: 11px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; } .stat .v { font-family: var(--font-display); font-size: 32px; font-weight: 800; letter-spacing: -0.5px; margin-top: 4px; font-variant-numeric: tabular-nums; } .stat .sub { font-size: 12px; color: var(--muted); margin-top: 4px; } /* ---- Filter chips (Today page) -------------------------------------- */ .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-2); cursor: pointer; text-transform: uppercase; transition: background .15s, color .15s, border-color .15s; } .chip:hover { background: var(--surface-2); color: var(--text); } .chip.active { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); } .chip .count { font-family: var(--font-mono); font-weight: 700; font-size: 10px; padding: 1px 7px; background: var(--surface-3); border-radius: var(--r-full); color: var(--text-2); text-transform: none; letter-spacing: 0; } .chip.active .count { background: var(--amber); color: #0b0d12; } /* ---- Live score inline on Today cards (compact) -------------------- */ .live-score { display: flex; align-items: center; gap: 12px; padding: 5px 10px; margin: 6px 0 4px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-m); font-family: var(--font-mono); font-size: 12px; font-weight: 700; } .live-score .mini { display: inline-flex; align-items: center; gap: 5px; color: var(--text); } .live-score .mini b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; min-width: 14px; text-align: right; } .live-score .live-tag-mini { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: 1.2px; color: var(--red); background: var(--red-soft); padding: 2px 8px; border-radius: var(--r-full); } .live-score.final { border-color: var(--amber-dim); } .live-score .live-tag-mini .live-dot { width: 5px; height: 5px; background: var(--red); border-radius: 50%; animation: pulse 1.5s infinite; } /* ---- Game cards (Today page) ---------------------------------------- */ .slate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; /* Prevent siblings from stretching to match a tall expanded card. */ align-items: start; } /* ---- Editorial game card (Today, Home top picks) ------------------- */ .game-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--text); /* heavy editorial top rule */ border-radius: 0; /* sharp magazine corners */ padding: 22px 22px 20px; transition: background .15s, border-color .15s; } .game-card:hover { background: var(--surface-2); border-color: var(--border-2); } .game-card.lock { border-top-color: var(--red); } .game-card.solid { border-top-color: var(--yellow); } .game-card::before { display: none; } /* Card top row: state pill (left) + direction tag (right). Each is its own element with nowrap whitespace, so neither can squeeze the other. */ .game-card .card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; min-height: 22px; } .game-card .card-top .state { font-family: var(--font-sans); font-size: 9px; letter-spacing: 2px; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: 0; white-space: nowrap; border: 1px solid var(--border); } /* Matchup row: just the two team badges + an "@" separator. Never wraps. */ .game-card .matchup-row { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.2px; text-transform: uppercase; color: var(--text); white-space: nowrap; overflow: hidden; } .game-card .matchup-row .vs { color: var(--muted); font-weight: 400; font-size: 14px; font-family: var(--font-sans); } /* Pitchers row: small-caps style under the matchup. */ .game-card .pitchers-row { font-family: var(--font-sans); font-size: 11px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin: 4px 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-card .pitchers-row .sep { margin: 0 6px; opacity: 0.5; font-weight: 400; } /* The pick: big serif team name + huge edge */ .game-card .pick { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .game-card .team { font-family: var(--font-display); font-size: clamp(40px, 5vw, 58px); font-weight: 900; letter-spacing: -1px; line-height: 0.9; text-transform: uppercase; color: var(--text); } .game-card .edge { font-family: var(--font-mono); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); } .game-card .edge.lock { color: var(--red); } .game-card .edge.solid { color: var(--yellow); } .game-card .edge.lean { color: var(--amber); } .game-card .edge.passive { color: var(--muted); } /* Stat grid: each cell is a vertical stack (LABEL on top, mono value below). Stops "MARKET CHC 54.5%" from ever wrapping mid-line. */ .game-card .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-top: 6px; } .game-card .grid > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; /* allows ellipsis on overflow */ } .game-card .grid .label { font-family: var(--font-sans); font-size: 9px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; } .game-card .grid b { color: var(--text); font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; text-transform: none; letter-spacing: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-card .footer-row { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--border); font-family: var(--font-sans); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; } /* ---- Status tags / pills -------------------------------------------- */ .tag { display: inline-flex; align-items: center; font-size: 10px; letter-spacing: 1px; font-weight: 800; padding: 4px 10px; border-radius: var(--r-full); text-transform: uppercase; } .tag.agree { background: var(--green-soft); color: var(--green); } .tag.flip { background: rgba(255,210,63,0.12); color: var(--yellow); } .tag.no-market { background: rgba(120,128,144,0.15); color: var(--muted); } /* v0.7: morning vs lineup-aware run provenance */ .tag.morning-tag { background: rgba(120,128,144,0.10); color: var(--muted); border: 1px solid rgba(120,128,144,0.25); } .tag.lineup-tag { background: rgba(255,170,0,0.16); color: var(--amber); border: 1px solid rgba(255,170,0,0.40); } .card-tags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .lineup-delta { font-size: 10px; letter-spacing: 0.5px; font-weight: 700; padding: 3px 7px; border-radius: 4px; } .lineup-delta.flip { background: rgba(255,71,87,0.14); color: var(--red); } .lineup-delta.up { background: rgba(40,214,112,0.12); color: var(--green); } .lineup-delta.down { background: rgba(255,71,87,0.12); color: var(--red); } /* ---- Ledger / history table ----------------------------------------- */ .controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 16px; font-size: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); } .controls input, .controls select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 7px 11px; border-radius: var(--r-s); font-family: var(--font-sans); font-size: 12px; } .controls input:focus, .controls select:focus { outline: none; border-color: var(--amber); } .controls label { color: var(--muted); align-self: center; font-weight: 500; display: flex; align-items: center; gap: 6px; } /* ---- Editorial ledger: stat-sheet style, no card chrome ---------- */ table.ledger { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: transparent; border: none; border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); border-radius: 0; } table.ledger th { text-align: left; font-family: var(--font-sans); color: var(--text-2); letter-spacing: 2px; text-transform: uppercase; font-size: 10px; font-weight: 700; padding: 16px 12px; border-bottom: 1px solid var(--text); background: transparent; } table.ledger td { padding: 13px 12px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-2); } table.ledger tr:last-child td { border-bottom: none; } table.ledger tbody tr { transition: background .12s; } table.ledger tbody tr:hover { background: rgba(255,170,0,0.04); } .win { color: var(--green); font-weight: 700; } .loss { color: var(--red); font-weight: 700; } .pending { color: var(--muted); } /* ---- Trend cards (Stats: last 7 vs all-time) ----------------------- */ .trend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-bottom: 36px; } .trend-card { background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--text); padding: 20px 22px; } .trend-card.green { border-top-color: var(--green); } .trend-card.red { border-top-color: var(--red); } .trend-label { font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; } .trend-roi { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -1px; margin: 8px 0 4px; text-transform: uppercase; color: var(--text); } .trend-card.green .trend-roi { color: var(--green); } .trend-card.red .trend-roi { color: var(--red); } .trend-hit { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); } .trend-sub { font-size: 11px; color: var(--muted); margin-top: 8px; } /* ---- Data table (Stats: per-segment breakdowns) -------------------- */ .data-table-wrap { overflow-x: auto; margin-bottom: 36px; } .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: transparent; border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); } .data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .data-table thead th { font-family: var(--font-sans); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--text); } .data-table th .bk-range { font-family: var(--font-mono); font-size: 9px; color: var(--muted); margin-left: 6px; font-weight: 400; letter-spacing: 0; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: rgba(255,170,0,0.04); } .data-table .ci { color: var(--muted); font-size: 11px; } .data-table .dir-agree { color: var(--green); font-weight: 700; } .data-table .dir-flip { color: var(--yellow); font-weight: 700; } /* Calibration grid cells (Stats: AGREE vs FLIP x bucket) */ .cal-cell { vertical-align: middle; text-align: center; } .cal-shrink { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; padding: 6px 0; } .cal-shrink.neutral { color: var(--text-2); } .cal-shrink.soft { color: var(--amber); } .cal-shrink.mid { color: var(--yellow); } .cal-shrink.hard { color: var(--red); } .cal-rec { font-size: 11px; color: var(--text); font-family: var(--font-mono); } .cal-hr { font-size: 10px; color: var(--muted); font-family: var(--font-mono); } /* ---- Stats page charts ---------------------------------------------- */ .chart-card { background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r-l); padding: 22px 24px; margin-bottom: 20px; } .chart-card h3 { font-family: var(--font-display); font-size: 13px; color: var(--text-2); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .chart-card h3::before { content: ""; width: 3px; height: 12px; background: var(--amber); border-radius: var(--r-s); } .chart-card canvas { max-height: 320px; } /* ---- Methodology page (prose) --------------------------------------- */ .prose { max-width: 760px; font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--text-2); } .prose h2 { margin-top: 32px; font-family: var(--font-display); font-size: 22px; text-transform: none; color: var(--text); letter-spacing: -0.3px; border-left: none; padding-left: 0; } .prose h2::before { width: 4px; height: 22px; background: var(--amber); border-radius: var(--r-s); display: inline-block; margin-right: 10px; vertical-align: middle; } .prose ul { padding-left: 22px; margin: 8px 0 16px; } .prose li { margin-bottom: 6px; } .prose code { background: var(--surface); padding: 2px 8px; border-radius: var(--r-s); font-family: var(--font-mono); font-size: 14px; color: var(--amber); border: 1px solid var(--border); } /* ---- Footer ---------------------------------------------------------- */ .site-footer { position: relative; z-index: 1; border-top: 1px solid var(--border); padding: 24px 28px; font-size: 11px; color: var(--muted); text-align: center; letter-spacing: 0.5px; } .site-footer strong { color: var(--amber-dim); font-weight: 700; } /* ---- Loading + empty ------------------------------------------------ */ .loading, .empty { padding: 80px 0; text-align: center; color: var(--muted); font-size: 14px; letter-spacing: 1px; } .loading::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); margin-right: 8px; vertical-align: middle; animation: pulse-loading 1.2s infinite; } @keyframes pulse-loading { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } } /* ============================================================================ LIVE PAGE — sportsbook-style live scoreboard + momentum bars ============================================================================ */ .live-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 4px; } .viewer-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 8px 16px; font-size: 12px; color: var(--text-2); font-weight: 500; } .viewer-pill b { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; } .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(40,214,112,0.7); animation: pulse 1.8s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(40,214,112,0.7); } 70% { box-shadow: 0 0 0 10px rgba(40,214,112,0); } 100% { box-shadow: 0 0 0 0 rgba(40,214,112,0); } } .last-refresh { font-size: 11px; margin-top: 8px; margin-bottom: 24px; color: var(--muted); } .live-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; /* expanding one card doesn't stretch its row-mates */ } .live-card { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r-l); padding: 18px 20px; transition: transform .15s, border-color .15s, box-shadow .15s; } .live-card:hover { transform: translateY(-2px); border-color: var(--border-2); } .live-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--faint); } .live-card.live::before { background: var(--amber); } .live-card.live.up::before { background: var(--green); box-shadow: 0 0 14px rgba(40,214,112,0.5); } .live-card.live.down::before { background: var(--red); box-shadow: 0 0 14px rgba(255,71,87,0.5); } .live-card.pre::before { background: var(--muted); } .live-card.final.win::before { background: var(--green); } .live-card.final.loss::before { background: var(--red); } .game-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; } .game-header .matchup { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.4px; } .game-header .sp { color: var(--muted); font-weight: 500; font-size: 12px; } .game-header .state { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase; padding: 5px 11px; border-radius: var(--r-full); white-space: nowrap; } .live-tag { color: var(--red); background: var(--red-soft); display: inline-flex; align-items: center; gap: 6px; } .pre-tag { color: var(--muted); background: var(--surface-3); } .final-tag { color: var(--amber); background: var(--amber-soft); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse 1.5s infinite; } /* Scoreboard rows - cleaner grid so nothing wraps awkwardly */ .score-row { margin: 4px 0 10px; } .score-row.big .team-row { font-size: 20px; padding: 6px 0; } /* New 4-col team row: [logo] [abbr] [pitcher SP name] [runs] */ .team-row { display: grid; grid-template-columns: 30px auto 1fr auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 16px; font-weight: 700; color: var(--text-2); } .team-row.pick { color: var(--amber); } .team-row .team-logo { width: 26px; height: 26px; } .team-row .team-abbr { font-family: var(--font-display); letter-spacing: -0.3px; font-size: 1em; } .team-row .team-sp { font-size: 11px; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .team-row .runs { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); font-size: 1.4em; min-width: 28px; text-align: right; } /* ========== Live card v5.2 (flattened structure) ========== Each direct child of .lcv5 is full-width and stacks top-to-bottom. No more nested .scoreboard wrapper. */ .live-card.lcv5 { display: flex; flex-direction: column; gap: 14px; width: 100%; } .lcv5 > * { width: 100%; } .lcv5-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-family: var(--font-display); font-weight: 700; color: var(--muted); } .lcv5-teams { display: flex; flex-direction: column; gap: 4px; margin: 0; } .lcv5-teams .team-row { font-size: 18px; padding: 6px 0; } .lcv5-broadcast-wrap { width: 100%; display: block; } .lcv5-momentum { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .lcv5-momentum-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); font-family: var(--font-display); } .lcv5-momentum-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; min-width: 70px; } .lcv5-momentum-pick { font-weight: 900; color: var(--text); font-size: 16px; letter-spacing: 1px; } .lcv5-momentum-spread { margin-left: auto; font-weight: 700; } .lcv5-momentum-spread.win { color: var(--green); } .lcv5-momentum-spread.loss { color: var(--red); } /* Legacy compat — still used by non-v5 cards (preCard / finalCard) */ .scoreboard { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 12px; width: 100%; } .scoreboard .field, .scoreboard .scoreboard-teams { width: 100%; } .bcv5-broadcast { width: 100%; display: block; } /* ============================================================ AT-BAT VIEW (v6) — pitch-by-pitch tracker Replaces the field/defense view as the live card centerpiece. ============================================================ */ .atbat-wrap { width: 100%; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin: 6px 0 12px; position: relative; overflow: hidden; } /* ----- Batter side-switch animation ----- Fires when the AB ends and a new batter steps up. Pitch tracker fades out + slides, batter card slides in from the right, then a subtle amber flash lights the top border. */ .atbat-switching .atbat-side.batter { animation: atbat-batter-slide-in 0.6s cubic-bezier(.4,0,.2,1); } .atbat-switching .atbat-bottom { animation: atbat-tracker-reset 0.6s ease-out; } .atbat-switching::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--amber); animation: atbat-top-flash 1.2s ease-out; } @keyframes atbat-batter-slide-in { 0% { transform: translateX(60px); opacity: 0; } 50% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 1; } } @keyframes atbat-tracker-reset { 0% { opacity: 0; filter: blur(2px); } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; filter: blur(0); } } @keyframes atbat-top-flash { 0% { opacity: 0; box-shadow: 0 0 0 var(--amber); } 20% { opacity: 1; box-shadow: 0 0 12px var(--amber); } 100% { opacity: 0; box-shadow: 0 0 0 var(--amber); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .atbat-switching .atbat-side.batter, .atbat-switching .atbat-bottom, .atbat-switching::before { animation: none; } } /* Top row — pitcher card | VS | batter card with headshots */ .atbat-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); align-items: center; } .atbat-side { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; min-width: 0; } .atbat-side.batter { grid-template-columns: 1fr 56px; text-align: right; } .atbat-side.batter .atbat-side-info { align-items: flex-end; } .atbat-vs { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--muted); letter-spacing: 1px; padding: 0 4px; } /* Circular headshot with team color ring */ .atbat-headshot { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 2px solid var(--head-color, var(--amber)); overflow: hidden; position: relative; flex-shrink: 0; } .atbat-headshot img { width: 100%; height: 100%; object-fit: cover; display: block; /* Fade-in prevents flash when re-rendered. img loading="lazy" hints help too. */ animation: img-fade-in var(--image-load-fade); } @keyframes img-fade-in { from { opacity: 0.4; } to { opacity: 1; } } /* Sitewide: prefers-reduced-motion safety net */ @media (prefers-reduced-motion: reduce) { .atbat-headshot img, .bb-ticker-skeleton-bar, .live-dot { animation: none !important; } } .atbat-headshot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 8px var(--head-color, transparent); pointer-events: none; opacity: 0.4; } .atbat-side-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .atbat-side-label { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; } .atbat-side.batter .atbat-side-label { justify-content: flex-end; } .atbat-side-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.3px; color: var(--text); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atbat-side-name .atbat-hand, .atbat-side-name .atbat-pos { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: 0.5px; margin-left: 6px; } .atbat-side-stats { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.3px; } .atbat-meta-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 11px; letter-spacing: 0.5px; font-family: var(--font-display); color: var(--text-2); border-bottom: 1px solid var(--border); } .atbat-meta-row b { color: var(--text); font-weight: 800; } .atbat-meta-row a { color: var(--amber); text-decoration: none; } /* Bottom row — zone visual | pitch sequence */ .atbat-bottom { display: grid; grid-template-columns: 1fr 280px; gap: 14px; padding-top: 12px; } @media (max-width: 700px) { .atbat-bottom { grid-template-columns: 1fr; } .atbat-top { grid-template-columns: 1fr; gap: 12px; } .atbat-side.batter { text-align: left; align-items: flex-start; } .atbat-side.batter .atbat-side-label { flex-direction: row; } } /* Count indicators */ .atbat-counts { display: flex; justify-content: space-around; margin-bottom: 14px; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.5px; color: var(--text-2); text-transform: uppercase; } .atbat-counts > div { display: flex; align-items: center; gap: 8px; } .atbat-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); } .atbat-dot.on.balls { background: var(--green); border-color: var(--green); } .atbat-dot.on.strikes { background: var(--red); border-color: var(--red); } .atbat-dot.on.outs { background: var(--text-2); border-color: var(--text-2); } /* Strike zone SVG */ .atbat-zone-wrap { position: relative; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; align-items: center; justify-content: center; min-height: 240px; } .atbat-zone-svg { width: 100%; max-width: 280px; height: auto; display: block; } /* ESPN-style 3x3 strike zone with cool-to-hot heat map */ .atbat-zone-cell { stroke: rgba(255,255,255,0.04); stroke-width: 0.3; transition: fill .4s; } /* Outer cells are cool (blue), inner cells are warm (red/orange) */ .atbat-zone-cell.cool-1 { fill: rgba(74,144,226,0.16); } .atbat-zone-cell.cool-2 { fill: rgba(74,144,226,0.10); } .atbat-zone-cell.warm-1 { fill: rgba(255,180,80,0.16); } .atbat-zone-cell.warm-2 { fill: rgba(255,71,87,0.22); } .atbat-zone-cell.warm-3 { fill: rgba(255,71,87,0.35); } .atbat-zone-frame { fill: none; stroke: white; stroke-width: 0.7; } .atbat-zone-extended { /* dashed boundary just outside true zone */ fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 0.3; stroke-dasharray: 1 1; } .atbat-pitch-marker { font-family: var(--font-display); font-weight: 900; font-size: 4.5px; fill: white; paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 0.4; } .atbat-pitch-circle { stroke: rgba(0,0,0,0.6); stroke-width: 0.4; } /* Only the NEWEST pitch dot bounces in — older dots stay static. This prevents the glitchy "all dots re-bounce" effect on every 5s poll. */ .atbat-pitch-circle.is-newest { animation: atbat-pitch-land 0.6s ease-out; } .atbat-pitch-circle.ball { fill: #28d670; } .atbat-pitch-circle.strike { fill: #ff4757; } .atbat-pitch-circle.foul { fill: #8a8e96; } /* gray for fouls — ESPN style */ .atbat-pitch-circle.in-play { fill: #ffb400; } @keyframes atbat-pitch-land { 0% { transform: translate(0, -40px) scale(1.5); opacity: 0; } 60% { transform: translate(0, 0) scale(1.15); opacity: 1; } 100% { transform: translate(0, 0) scale(1); opacity: 1; } } /* Batter silhouette next to the zone */ .atbat-batter-svg { position: absolute; width: 70px; height: 200px; right: 14px; bottom: 18px; pointer-events: none; animation: atbat-batter-breath 4.2s ease-in-out infinite; transform-origin: 50% 95%; } .atbat-batter-svg.lefty { left: 14px; right: auto; transform: scaleX(-1); } @keyframes atbat-batter-breath { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-2px); } } .atbat-batter-svg .body { fill: #f5f5f7; opacity: 0.85; } .atbat-batter-svg .pants { fill: #f5f5f7; opacity: 0.78; } .atbat-batter-svg .helmet { fill: var(--bat-color, var(--amber)); } .atbat-batter-svg .belt { fill: rgba(0,0,0,0.5); } .atbat-batter-svg .bat { stroke: #8b6234; stroke-width: 2.5; stroke-linecap: round; fill: none; } .atbat-batter-svg .stripe { stroke: var(--bat-color, var(--amber)); stroke-width: 1.2; fill: none; } /* Linescore grid (W/L 1-9 + R/H/E) */ .atbat-linescore { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); overflow-x: auto; } .atbat-linescore-table { width: 100%; border-collapse: collapse; font-family: var(--font-display); font-variant-numeric: tabular-nums; } .atbat-linescore-table th, .atbat-linescore-table td { padding: 5px 6px; text-align: center; font-size: 12px; min-width: 28px; border-bottom: 1px solid var(--border); } .atbat-linescore-table thead th { font-size: 10px; letter-spacing: 0.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; } .atbat-linescore-table .team-cell { text-align: left; min-width: 60px; font-weight: 800; padding: 5px 10px; } .atbat-linescore-table .team-cell img { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; object-fit: contain; } .atbat-linescore-table .totals { background: rgba(255,255,255,0.04); font-weight: 800; } .atbat-linescore-table .current-inning { background: rgba(255,170,0,0.12); color: var(--amber); font-weight: 900; } /* ----- DUE UP (next 3 batters with day stats) ----- */ .atbat-dueup { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .atbat-dueup-header { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .atbat-dueup-header .team-tag { font-size: 12px; letter-spacing: 1px; font-weight: 900; } .atbat-dueup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 700px) { .atbat-dueup-grid { grid-template-columns: 1fr; } } .atbat-dueup-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-left: 3px solid var(--dueup-color, var(--amber)); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .atbat-dueup-card.atbat-now { background: rgba(255,170,0,0.06); border-color: rgba(255,170,0,0.3); } .atbat-dueup-slot { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; } .atbat-dueup-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text); line-height: 1.15; letter-spacing: 0.3px; } .atbat-dueup-stat { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.3px; } /* Bad Bets pick overlay — the differentiator */ .atbat-bb-overlay { margin-top: 12px; padding: 10px 14px; background: linear-gradient(90deg, rgba(255,170,0,0.10), rgba(255,170,0,0.02)); border: 1px solid rgba(255,170,0,0.35); border-left: 3px solid var(--amber); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-family: var(--font-display); } .atbat-bb-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); font-weight: 800; } .atbat-bb-pick { font-size: 14px; color: var(--text); font-weight: 800; } .atbat-bb-edge { font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 5px; font-variant-numeric: tabular-nums; } .atbat-bb-edge.cashed { background: rgba(40,214,112,0.18); color: var(--green); } .atbat-bb-edge.live { background: rgba(74,144,226,0.18); color: #4a90e2; } .atbat-bb-edge.missed { background: rgba(255,71,87,0.18); color: var(--red); } /* Bases mini at bottom */ .atbat-bases { display: flex; justify-content: center; gap: 14px; margin-top: 10px; font-size: 11px; color: var(--text-2); font-family: var(--font-display); } .atbat-bases-item { display: flex; gap: 4px; align-items: center; } .atbat-bases-dot { width: 8px; height: 8px; transform: rotate(45deg); background: rgba(255,255,255,0.10); } .atbat-bases-dot.occupied { background: var(--amber); box-shadow: 0 0 4px var(--amber); } /* Pitch sequence panel (right side) */ .atbat-seq { display: flex; flex-direction: column; gap: 4px; } .atbat-seq-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-display); transition: background .15s; } .atbat-seq-row:hover { background: rgba(255,255,255,0.05); } .atbat-seq-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; color: white; } .atbat-seq-num.ball { background: #28d670; } .atbat-seq-num.strike { background: #ff4757; } .atbat-seq-num.in-play { background: #ffb400; } .atbat-seq-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .atbat-seq-call { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; color: var(--text); text-transform: uppercase; } .atbat-seq-type { font-size: 10px; color: var(--muted); letter-spacing: 0.3px; } .atbat-seq-speed { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-2); } /* ===================== v5 Broadcast layout (ESPN-inspired) ===================== Two sections inside the live card: 1) DUE UP strip: next 3 batters in offense's lineup w/ at-bat day stats 2) FIELD: big SVG with full defensive alignment + bases + count/outs */ /* Section header used by Due Up + Field */ .bcv5-header { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; } .bcv5-header .bcv5-team { font-size: 13px; letter-spacing: 1px; } .bcv5-header img.bcv5-logo { width: 18px; height: 18px; object-fit: contain; } /* ---- DUE UP row ---- */ .bcv5-dueup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .bcv5-dueup-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid var(--bcv5-color, var(--amber)); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .bcv5-dueup-card.atbat { background: rgba(255,170,0,0.06); border-color: rgba(255,170,0,0.3); } .bcv5-dueup-slot { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; } .bcv5-dueup-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--text); line-height: 1.15; letter-spacing: 0.3px; } .bcv5-dueup-stat { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.3px; } .bcv5-dueup-stat .stat-good { color: var(--green); font-weight: 700; } .bcv5-dueup-stat .stat-bad { color: var(--red); font-weight: 700; } /* ---- FIELD section ---- */ .bcv5-field-wrap { position: relative; background: radial-gradient(ellipse at 50% 60%, rgba(40,160,80,0.06), transparent 65%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 12px 16px; margin: 8px 0; width: 100%; display: flex; justify-content: center; } .bcv5-field-wrap svg.bcv5-field { width: 100%; max-width: 560px; height: auto; display: block; } /* SVG element classes — only those still used by v5.3 */ .bcv5 .home-plate { fill: white; stroke: rgba(0,0,0,0.3); stroke-width: 0.4; } .bcv5 .base { fill: rgba(255,255,255,0.85); stroke: rgba(0,0,0,0.35); stroke-width: 0.3; /* belt-and-suspenders: no CSS positioning leaking from old .bases rules */ position: static !important; } .bcv5 .base.on { fill: white; filter: drop-shadow(0 0 1.5px var(--bcv5-glow, var(--amber))) drop-shadow(0 0 4px var(--bcv5-glow, rgba(255,170,0,0.5))); animation: bcv5-base-pulse 2.2s ease-in-out infinite; } @keyframes bcv5-base-pulse { 0%,100% { filter: drop-shadow(0 0 1.5px var(--bcv5-glow, var(--amber))) drop-shadow(0 0 4px var(--bcv5-glow, rgba(255,170,0,0.5))); } 50% { filter: drop-shadow(0 0 3px var(--bcv5-glow, var(--amber))) drop-shadow(0 0 7px var(--bcv5-glow, rgba(255,170,0,0.7))); } } /* Hide any stray rendering of bases OUTSIDE the field SVG (defensive) */ .lcv5-broadcast-wrap > .bases, .lcv5 > .bases { display: none !important; } /* Lock down the field SVG: nothing may render outside the viewBox bounds. Belt-and-suspenders for the floating-diamond issue. */ .bcv5-field-wrap { overflow: hidden; } svg.bcv5-field { overflow: hidden !important; /* Visually clip any rect that has its origin outside the field clip path */ } /* Any rogue .base element NOT inside an SVG.bcv5-field is invisible */ .lcv5 .base:not(svg.bcv5-field .base) { display: none !important; } body > .base, .lcv5-broadcast-wrap > .base, .lcv5-momentum .base, .lcv5-header .base { display: none !important; } /* Defender labels on the field — position abbr + last name */ .bcv5 .pos-label { font-family: var(--font-display); font-weight: 800; font-size: 4.5px; letter-spacing: 0.6px; fill: rgba(255,255,255,0.65); } .bcv5 .pos-name { font-family: var(--font-display); font-weight: 800; font-size: 6px; fill: white; paint-order: stroke; stroke: rgba(0,0,0,0.9); stroke-width: 0.9; } .bcv5 .pos-name.pitcher { fill: #ffd266; } .bcv5 .pos-name.catcher { fill: #ffd266; } /* Runner-on-base label — tinted offense color so it's distinct from defenders. Rendered slightly larger with a heavier black stroke for legibility on the field. */ .bcv5 .runner-on-base { font-family: var(--font-display); font-weight: 900; font-size: 6px; letter-spacing: 0.3px; paint-order: stroke; stroke: rgba(0,0,0,0.95); stroke-width: 1.1; } /* Caption row below the field (count / batter / runners) */ .bcv5-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; padding: 10px 4px 4px; font-family: var(--font-display); font-size: 13px; color: var(--text-2); } .bcv5-caption .cap-block { display: flex; flex-direction: column; gap: 2px; } .bcv5-caption .cap-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 700; } .bcv5-caption .cap-value { font-size: 14px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; } .bcv5-caption .cap-value.atbat { color: var(--amber); } @media (max-width: 640px) { .bcv5-dueup { grid-template-columns: 1fr; gap: 6px; } .bcv5-dueup-name { font-size: 13px; } } /* Situation row (bases, count, batter vs pitcher) */ .situation { display: flex; align-items: center; gap: 14px; padding: 10px 0; margin-bottom: 12px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); } .situation .count { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; padding: 3px 8px; background: var(--surface-3); border-radius: var(--r-s); } .situation .ab { flex: 1; } .situation .ab b { color: var(--text); font-weight: 600; } /* Baseball-diamond bases indicator */ .bases { position: relative; display: inline-block; width: 32px; height: 32px; } .bases .base { position: absolute; width: 11px; height: 11px; transform: rotate(45deg); background: transparent; border: 1.5px solid var(--border-2); font-size: 0; transition: background .2s, border-color .2s; } .bases .base.on { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 6px rgba(255,170,0,0.5); } .bases .base:nth-child(1) { top: 0; left: 10px; } /* 2B */ .bases .base:nth-child(2) { top: 10px; left: 0; } /* 3B */ .bases .base:nth-child(3) { top: 10px; left: 20px; } /* 1B */ /* Momentum bar */ .momentum-block { margin-top: 4px; } .momentum-label { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600; } .momentum-label b { color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; text-transform: none; } .bar-track { position: relative; height: 12px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-full); overflow: hidden; } .bar-fill { height: 100%; background: var(--amber); transition: width .6s cubic-bezier(.4,0,.2,1); border-radius: var(--r-full); } .bar-fill.up { background: linear-gradient(90deg, var(--green), #5be891); } .bar-fill.down { background: linear-gradient(90deg, var(--red), #ff7a87); } .bar-fill.flat { background: var(--amber-dim); } .bar-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); opacity: 0.9; border-radius: 1px; box-shadow: 0 0 4px rgba(255,255,255,0.4); } .total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .total-row b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; text-transform: none; } .pre-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--muted); margin-top: 4px; } .pre-row b { color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; } .result-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text); font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 10px; } /* ============================================================================ BROADCAST SCOREBOARD — team badges, animated field, score flash, sparkline, play-by-play modal. All powered by helpers in app.js. ============================================================================ */ /* Team badge (logo + abbr) */ .team-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); } .team-logo { display: inline-block; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); } .team-abbr { font-family: var(--font-display); letter-spacing: -0.3px; } /* Score-flash animation (triggered by JS when a team scores) */ @keyframes score-flash { 0% { transform: scale(1); text-shadow: 0 0 0 transparent; } 20% { transform: scale(1.25); text-shadow: 0 0 16px var(--flash-color, var(--amber)); color: var(--flash-color, var(--amber)); } 100% { transform: scale(1); text-shadow: 0 0 0 transparent; } } .runs.flash { animation: score-flash 1.6s ease-out; } /* ---- Animated baseball field (broadcast-style SVG) ---------------- */ .field { position: relative; width: 100%; max-width: 180px; aspect-ratio: 1 / 1; margin: 0 auto; } .field-svg { width: 100%; height: 100%; display: block; } /* Player-name labels rendered ON the field SVG */ .field-text .runner-name { font-size: 4.5px; font-weight: 700; letter-spacing: 0.3px; fill: var(--text); paint-order: stroke; stroke: rgba(0,0,0,0.85); stroke-width: 0.6; font-family: var(--font-display); } .field-text .batter-name, .field-text .pitcher-name { font-size: 6.5px; font-weight: 800; letter-spacing: 0.6px; fill: var(--text); paint-order: stroke; stroke: rgba(0,0,0,0.9); stroke-width: 0.7; font-family: var(--font-display); } .field-text .role-label { font-size: 3.5px; font-weight: 800; letter-spacing: 0.8px; fill: var(--muted); text-transform: uppercase; } /* Team badge in the field corners (offense top-left, defense top-right) */ .field-team-badge { font-size: 5.5px; font-weight: 800; letter-spacing: 0.8px; font-family: var(--font-display); } /* Mound subtle pulse for "alive" feel */ .field-mound { transform-origin: 60px 62px; animation: mound-breathe 3.4s ease-in-out infinite; } @keyframes mound-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } /* Bases: clean solid white diamonds (always visible). Occupied bases get a subtle team-color glow underneath rather than a garish fill swap. Uses a CSS var --base-glow so the SVG can override per-team with the offense's color. */ .base { fill: rgba(255,255,255,0.85); stroke: rgba(0,0,0,0.35); stroke-width: 0.4; transform-origin: center center; transition: filter .25s; } .base.on { fill: #ffffff; filter: drop-shadow(0 0 2px var(--base-glow, rgba(255,170,0,0.65))) drop-shadow(0 0 5px var(--base-glow, rgba(255,170,0,0.45))); animation: base-pulse 2.2s ease-in-out infinite; } @keyframes base-pulse { 0%, 100% { filter: drop-shadow(0 0 2px var(--base-glow, rgba(255,170,0,0.65))) drop-shadow(0 0 5px var(--base-glow, rgba(255,170,0,0.45))); } 50% { filter: drop-shadow(0 0 3px var(--base-glow, rgba(255,170,0,0.85))) drop-shadow(0 0 8px var(--base-glow, rgba(255,170,0,0.55))); } } /* Pitch animation: subtle ball travels mound → plate when count changed. v3: no dashed trail; just a fast clean white pellet. */ .field-svg.pitching .pitch-ball { animation: pitch-throw 0.45s cubic-bezier(.55,0,.45,1); } @keyframes pitch-throw { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 27px); } } /* Scoreboard text */ .field-text text { font-family: var(--font-mono); text-anchor: middle; fill: var(--text); } .field-text .lbl { font-size: 5px; fill: var(--muted); font-weight: 700; letter-spacing: 1.2px; } .field-text .val { font-size: 9px; font-weight: 800; letter-spacing: 0.5px; } /* ---- Win-prob sparkline -------------------------------------------- */ .sparkline-wrap { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; } .sparkline { flex: 1; height: 28px; } .sparkline path.line { fill: none; stroke: var(--amber); stroke-width: 1.5; } .sparkline path.line.up { stroke: var(--green); } .sparkline path.line.down { stroke: var(--red); } .sparkline path.area { opacity: 0.18; } .sparkline circle { fill: var(--text); } /* ---- Play-by-play expanded panel ----------------------------------- */ .live-card.expanded { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-soft), var(--shadow-2); } .expand-toggle { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); cursor: pointer; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; transition: color .15s; } .expand-toggle:hover { color: var(--amber); } .expand-toggle .chev { transition: transform .25s; } .expanded .expand-toggle .chev { transform: rotate(180deg); } .pbp { margin-top: 10px; padding: 12px; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--r-m); max-height: 320px; overflow-y: auto; } .pbp .pbp-row { /* 4-column grid: inning · team logo · description · bases SVG */ display: grid; grid-template-columns: 44px 32px 1fr 48px; gap: 12px; align-items: center; padding: 12px 6px; border-bottom: 1px solid var(--border); font-size: 14px; position: relative; transition: background .2s ease; } .pbp .pbp-row:last-child { border-bottom: none; } .pbp .pbp-row:hover { background: rgba(255,255,255,0.02); } .pbp .pbp-inning { color: var(--text-2); text-align: center; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.5px; } .pbp .pbp-team-logo { display: flex; align-items: center; justify-content: center; } .pbp .pbp-team-logo img { width: 28px; height: 28px; object-fit: contain; } .pbp .pbp-abbr { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--muted); letter-spacing: 0.5px; } .pbp .pbp-desc { color: var(--text-2); line-height: 1.4; min-width: 0; font-size: 14px; } .pbp .pbp-desc-main { color: var(--text-2); } .pbp .pbp-desc-main b{ color: var(--text); } .pbp .pbp-pitches { margin-top: 4px; font-size: 12px; color: var(--muted); font-family: var(--font-sans); letter-spacing: 0.2px; } /* ---- Scoring digest header (top of expanded PBP) ---- */ .pbp-scoring-digest { background: linear-gradient(180deg, rgba(255,170,0,0.07), rgba(255,170,0,0.02)); border: 1px solid rgba(255,170,0,0.25); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; } .pbp-scoring-digest-title { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 1px; color: var(--amber); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .pbp-scoring-digest ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; } .pbp-scoring-digest li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--text-2); line-height: 1.35; } .pbp-scoring-digest .digest-inning { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--muted); letter-spacing: 0.5px; text-align: center; } .pbp-scoring-digest .digest-score { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--text); letter-spacing: 0.5px; font-variant-numeric: tabular-nums; } .pbp-scoring-empty { font-size: 12px; color: var(--muted); font-style: italic; } /* ---- PBP filter chips ---- */ .pbp-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; padding: 0 2px; } .pbp-filter-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-right: 6px; font-weight: 700; } .pbp-filter-chip { background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; padding: 4px 10px; border-radius: 12px; cursor: pointer; transition: all .15s; font-family: var(--font-sans); } .pbp-filter-chip:hover { border-color: var(--text-2); color: var(--text); } .pbp-filter-chip.active { background: rgba(255,170,0,0.15); border-color: var(--amber); color: var(--amber); } .pbp-row.hidden { display: none; } .pbp .pbp-bases-wrap { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; } .pbp .pbp-bases { width: 32px; height: 32px; } /* Per-result-type color (background + left rule) */ .pbp .pbp-row.pbp-hr { background: rgba(255,170,0,0.06); } .pbp .pbp-row.pbp-hr .pbp-desc-main b { color: var(--amber); } .pbp .pbp-row.pbp-hit { background: rgba(40,214,112,0.04); } .pbp .pbp-row.pbp-hit .pbp-desc-main b { color: var(--green); } .pbp .pbp-row.pbp-walk .pbp-desc-main b { color: var(--yellow); } .pbp .pbp-row.pbp-out .pbp-desc-main { color: var(--muted); } /* In-progress at-bat: red live border + slow pulse so the eye knows this row is updating live, not historical. */ .pbp .pbp-row.pbp-inprogress { background: rgba(255,71,87,0.04); border-left: 2px solid var(--red); } .pbp .pbp-row.pbp-inprogress .pbp-desc-main { color: var(--text); } .pbp .pbp-row.pbp-inprogress .pbp-pitches b { color: var(--amber); } @keyframes pbp-inprogress-pulse { 0%, 100% { background: rgba(255,71,87,0.04); } 50% { background: rgba(255,71,87,0.10); } } .pbp .pbp-row.pbp-inprogress { animation: pbp-inprogress-pulse 2.4s ease-in-out infinite; } /* ---- Animations ---- */ @keyframes pbp-slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .pbp .pbp-row-newest { animation: pbp-slide-in .35s ease-out; } @keyframes pbp-hr-flash { 0% { box-shadow: 0 0 0 0 rgba(255,170,0,0.6); } 50% { box-shadow: 0 0 14px 4px rgba(255,170,0,0.3); } 100% { box-shadow: 0 0 0 0 rgba(255,170,0,0); } } .pbp .pbp-row.pbp-row-newest.pbp-hr { animation: pbp-slide-in .35s ease-out, pbp-hr-flash 1.2s ease-out; } @keyframes pbp-hit-flash { 0% { box-shadow: 0 0 0 0 rgba(40,214,112,0.5); } 50% { box-shadow: 0 0 10px 3px rgba(40,214,112,0.25); } 100% { box-shadow: 0 0 0 0 rgba(40,214,112,0); } } .pbp .pbp-row.pbp-row-newest.pbp-hit { animation: pbp-slide-in .35s ease-out, pbp-hit-flash 1.2s ease-out; } /* Pulse the diamond when runners are on, to subtly draw the eye */ @keyframes bases-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .pbp .pbp-bases-wrap.has-runners .pbp-bases circle[style*="--amber"] { animation: bases-pulse 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .pbp .pbp-row-newest, .pbp .pbp-bases-wrap.has-runners .pbp-bases circle { animation: none !important; } } .pbp .pbp-loading { text-align: center; padding: 16px; color: var(--muted); font-size: 12px; } .pbp .pbp-empty { text-align: center; padding: 16px; color: var(--muted); font-size: 12px; } /* Override the old tiny diamond on cards now that we have the full field */ .live-card .situation { gap: 16px; } /* ---- Responsive ------------------------------------------------------ */ @media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; } .hero-headline { font-size: 40px; } .hero-ctas { justify-content: center; } .hero-copy { max-width: 100%; margin: 0 auto; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-art { order: -1; } .hero-logo { max-width: 300px; } .hero { padding: 50px 20px 70px; } } /* ---- Hamburger button — visible at every breakpoint, sits at LEFT --- */ .nav-toggle { display: inline-flex; width: 40px; height: 40px; background: transparent; border: 1px solid var(--border); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; margin-right: 4px; transition: border-color .15s ease; } .nav-toggle:hover { border-color: var(--amber); } .nav-toggle-bar { display: block; width: 20px; height: 2px; background: var(--text); transition: transform .2s ease, opacity .2s ease; } body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 720px) { /* --- Slim sticky header on mobile: brand + auth + toggle in one row --- */ .site-header { flex-direction: row; align-items: center; gap: 8px; padding: 10px 14px; flex-wrap: nowrap; } .brand-logo { width: 32px; height: 32px; } .brand-wordmark{ font-size: 16px; } /* Auth slot shows just the avatar on mobile (handle hides) */ .auth-slot { margin-left: auto; } .auth-handle { display: none; } .auth-chip-btn { padding: 4px; } .auth-cta { padding: 7px 12px; font-size: 12px; } /* Drawer becomes full-width on mobile so the side-slide looks right */ nav.primary { top: 56px; width: 100vw; border-left: 0; height: calc(100vh - 56px); } .nav-backdrop { inset: 56px 0 0 0; } /* --- Tighten dead space in main flow --- */ main { padding: 18px 14px 56px; } h1 { font-size: clamp(32px, 9vw, 44px); margin-bottom: 18px; } h1 .sub { margin-top: 8px; font-size: 12px; letter-spacing: 1px; } h2 { margin: 32px 0 14px; font-size: clamp(22px, 6vw, 28px); } /* Ribbons + KPIs: 2 columns on phone, compact text */ .ribbon { grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 24px; } .stat { padding: 14px 14px; } .stat .v { font-size: 26px; } .stat .k { font-size: 11px; } .stat .sub { font-size: 10px; } /* Game cards: tighter + force single column under 480 */ .slate-cards, .live-cards { grid-template-columns: 1fr; gap: 12px; } .game-card { padding: 14px 14px 12px; } .game-card .matchup-row { gap: 8px; } .game-card .pick .team { font-size: clamp(28px, 12vw, 38px); } .game-card .grid { gap: 8px; } .game-card .grid b { font-size: 13px; } /* Trend + leagues grids collapse cleanly */ .trend-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 24px; } .leagues-grid { grid-template-columns: 1fr; gap: 10px; } .league-card { padding: 14px; } /* Filter chips wrap nicely; reduce hover-only padding */ .filter-chips, .league-filters { gap: 6px; } .filter-chips .chip, .league-filters .chip { padding: 7px 12px; font-size: 11px; } /* Tables stay readable */ table.ledger { font-size: 11px; } table.ledger th, table.ledger td { padding: 8px 8px; } .data-table th, .data-table td { padding: 8px 6px; font-size: 11px; } /* CTAs */ .substack-cta { padding: 28px 18px; } .auth-card { padding: 22px 18px; } .profile-card { padding: 18px; } /* Auth menu fits screen */ .auth-menu { right: 0; min-width: 200px; } } /* ========================================================================== COMMENTS (pick-thread) ========================================================================== */ .cmt-toggle { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: 0.3px; transition: color .15s, border-color .15s; } .cmt-toggle:hover, .cmt-toggle.active { color: var(--amber); border-color: var(--amber); } .cmt-mount { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); } .cmt-thread-head { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; font-size: 11px; color: var(--muted); margin-bottom: 10px; } .cmt-thread-count { background: var(--surface-2); color: var(--text); padding: 2px 8px; font-size: 11px; } .cmt-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; } .cmt { padding: 10px 12px; background: var(--surface-2); border-left: 2px solid var(--border); } .cmt-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 4px; } .cmt-handle { color: var(--amber); font-weight: 700; } .cmt-time { letter-spacing: 0.3px; } .cmt-del { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0; margin-left: auto; text-decoration: underline; text-decoration-style: dotted; } .cmt-del:hover { color: var(--red); } .cmt-body { font-size: 13px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-wrap: break-word; } .cmt-empty { color: var(--muted); font-size: 12px; font-style: italic; padding: 8px 0; list-style: none; } .cmt-form { display: flex; flex-direction: column; gap: 8px; } .cmt-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 10px 12px; border-radius: 0; font-family: var(--font-sans); font-size: 13px; line-height: 1.4; resize: vertical; } .cmt-input:focus { outline: none; border-color: var(--amber); } .cmt-form-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cmt-counter { font-size: 11px; color: var(--muted); font-family: var(--font-sans); } .cmt-submit { background: var(--amber); color: #0b0d12; border: 1px solid var(--amber); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; padding: 8px 14px; cursor: pointer; } .cmt-submit:disabled { opacity: 0.5; cursor: wait; } .cmt-status { font-size: 11px; color: var(--muted); min-height: 14px; } .cmt-status-err { color: var(--red); } .cmt-signin { font-size: 12px; color: var(--muted); padding: 10px 12px; background: var(--surface-2); text-align: center; } .cmt-signin a { color: var(--amber); } /* ========================================================================== HOMEPAGE HUB ========================================================================== */ .hub-grid { display: grid; gap: 18px; margin: 8px 0 28px; grid-template-columns: 2fr 1fr; } .hub-grid.hub-grid-3 { grid-template-columns: 1.4fr 1fr 1.2fr; } @media (max-width: 980px) { .hub-grid.hub-grid-3 { grid-template-columns: 1fr 1fr; } } .hub-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; } .hub-card-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; font-size: 12px; color: var(--muted); margin: 0 0 14px; display: flex; align-items: center; justify-content: space-between; } .hub-card-title .hub-tag { font-family: var(--font-sans); font-size: 10px; font-weight: 700; background: var(--surface-2); padding: 2px 8px; color: var(--text); letter-spacing: 0.5px; } .hub-card-title .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); margin-right: 5px; box-shadow: 0 0 8px var(--red); animation: pulse 1.6s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Live mini-scoreboard rows */ .hub-live-list { display: flex; flex-direction: column; gap: 8px; } .hub-live-row { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border-left: 2px solid var(--border); } .hub-live-row.live { border-left-color: var(--red); } .hub-live-row.final { border-left-color: var(--muted); } .hub-live-team { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .hub-live-team b { font-family: var(--font-display); font-size: 18px; font-weight: 800; } .hub-live-team.away { justify-content: flex-end; text-align: right; } .hub-live-vs { font-size: 11px; color: var(--muted); padding: 0 4px; } .hub-live-state { font-size: 11px; color: var(--muted); text-align: right; font-family: var(--font-display); letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; min-width: 70px; } .hub-live-state.live { color: var(--red); } .hub-live-row a { display: contents; color: var(--text); } .hub-live-empty { font-size: 12px; color: var(--muted); font-style: italic; padding: 18px 0; text-align: center; } /* Trending picks list */ .hub-trending { display: flex; flex-direction: column; gap: 8px; } .hub-trend-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--surface-2); border-left: 2px solid var(--amber); font-size: 13px; } .hub-trend-game { font-weight: 600; display: flex; align-items: center; gap: 6px; } .hub-trend-count { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--amber); } /* Activity feed */ .hub-feed { display: flex; flex-direction: column; gap: 10px; } .hub-feed-item { padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12px; line-height: 1.5; } .hub-feed-item:last-child { border-bottom: 0; } .hub-feed-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; } .hub-feed-meta .hub-feed-handle { color: var(--amber); font-weight: 700; } .hub-feed-body { color: var(--text); white-space: pre-wrap; word-wrap: break-word; } @media (max-width: 720px) { .hub-grid { grid-template-columns: 1fr; gap: 12px; } } /* ========================================================================== PLAYERS BROWSE PAGE ========================================================================== */ .players-filters { display: grid; gap: 12px; margin: 14px 0 18px; grid-template-columns: 1fr; } .players-search input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 12px 16px; font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color .15s ease; } .players-search input:focus { border-color: var(--amber); } .players-team-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .players-team-wrap select { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; min-width: 140px; font-family: var(--font-sans); font-size: 13px; } .players-status-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; } .players-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-size: 12px; } .players-pagination { display: flex; align-items: center; gap: 8px; } .players-pagination .chip:disabled { opacity: 0.4; cursor: not-allowed; } .players-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .player-card { background: var(--surface); border: 1px solid var(--border); padding: 12px 14px; text-align: left; cursor: pointer; color: var(--text); font-family: var(--font-sans); display: flex; transition: border-color .15s, background .15s; } .player-card:hover { border-color: var(--amber); background: var(--surface-2); } .player-card-top { display: flex; align-items: center; gap: 12px; width: 100%; } .player-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; } .player-photo-placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--muted); } .player-photo-lg { width: 96px; height: 96px; } .player-card-id { min-width: 0; flex: 1; } .player-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .player-pos { background: var(--surface-2); padding: 2px 8px; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 1px; color: var(--text); } .player-team { font-weight: 700; color: var(--text); letter-spacing: 0.3px; } .player-team-logo { width: 16px; height: 16px; object-fit: contain; } .player-depth { background: var(--amber-soft); color: var(--amber); padding: 2px 7px; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1px; } .player-injury { padding: 2px 7px; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1px; } .player-injury.injury-q { background: rgba(255,210,63,0.18); color: var(--yellow); } .player-injury.injury-doubt { background: rgba(255,140,0,0.18); color: #ff8c00; } .player-injury.injury-out { background: rgba(255,71,87,0.18); color: var(--red); } .player-detail { display: flex; gap: 18px; align-items: flex-start; } .player-detail-dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; margin: 0; flex: 1; } .player-detail-dl dt { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); align-self: center; } .player-detail-dl dd { margin: 0; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; } @media (max-width: 720px) { .players-grid { grid-template-columns: 1fr; } .player-detail { flex-direction: column; align-items: center; text-align: center; } .player-detail-dl { width: 100%; grid-template-columns: 1fr 2fr; gap: 8px; } } /* ========================================================================== TRENDING PLAYERS WIDGET (Hub right column) ========================================================================== */ .trending-players { display: flex; flex-direction: column; gap: 6px; } .trending-player-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border-left: 2px solid var(--amber); border-radius: 6px; text-decoration: none; color: var(--text); transition: background .15s, transform .15s; } .trending-player-row:hover { background: var(--surface); transform: translateX(2px); } .trending-player-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface); flex-shrink: 0; border: 1px solid var(--border); } .trending-player-placeholder { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--muted); } .trending-player-id { flex: 1; min-width: 0; } .trending-player-name { font-family: var(--font-display); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .trending-player-id { min-width: 0; /* lets the flex child shrink so ellipsis can kick in */ overflow: hidden; } .trending-player-meta { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trending-player-meta .player-team-logo { width: 14px; height: 14px; } .trending-player-count { text-align: right; flex-shrink: 0; } .trending-player-count b { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--amber); display: block; line-height: 1; } /* ========================================================================== PER-PLAYER PAGE (/player.html?id=...) ========================================================================== */ .player-back { display: inline-block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-display); font-weight: 700; margin-bottom: 14px; } .player-back:hover { color: var(--amber); } .player-hero { display: flex; gap: 24px; align-items: center; padding: 22px 24px; margin-bottom: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; border-top: 4px solid var(--amber); } .player-photo-xl { width: 140px; height: 140px; border-radius: 50%; border: 2px solid var(--border); object-fit: cover; background: var(--surface-2); flex-shrink: 0; } .player-hero-id { flex: 1; min-width: 0; } .player-hero-name { margin: 0 0 8px; font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 4vw, 44px); line-height: 1; text-transform: uppercase; letter-spacing: -0.5px; } .player-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .player-hero-meta .player-pos { background: var(--surface-2); padding: 4px 10px; font-size: 12px; } .player-hero-meta .player-team-logo { width: 22px; height: 22px; } .player-hero-meta .player-team { font-size: 15px; } .player-hero-sub { font-size: 13px; } .player-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; } @media (max-width: 880px) { .player-detail-grid { grid-template-columns: 1fr; gap: 18px; } .player-hero { flex-direction: column; text-align: center; } .player-hero-meta { justify-content: center; } .player-photo-xl { width: 110px; height: 110px; } } /* Trend chart (bars) — for "recent fantasy points" on player page */ .trend-chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 0 4px; margin: 8px 0 0; } .trend-bar { flex: 1; background: var(--amber); position: relative; min-width: 16px; border-radius: 3px 3px 0 0; transition: filter .15s ease; display: flex; justify-content: center; } .trend-bar:hover { filter: brightness(1.2); } .trend-bar-val { position: absolute; top: -16px; font-size: 10px; font-weight: 700; color: var(--text); font-family: var(--font-display); letter-spacing: 0.5px; } .trend-axis { display: flex; gap: 8px; padding: 8px 4px 0; font-size: 10px; color: var(--muted); font-family: var(--font-display); letter-spacing: 0.5px; } .trend-axis span { flex: 1; text-align: center; } /* ========================================================================== NEWS RAIL (homepage hub + per-pick) ========================================================================== */ .news-rail { display: flex; flex-direction: column; gap: 10px; } .news-item { padding: 12px 14px; background: var(--surface-2); border-left: 3px solid var(--amber); border-radius: 6px; /* soften so the rail doesn't read brutalist */ display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s, transform .15s; } .news-item:hover { border-left-color: var(--amber); background: var(--surface); color: var(--text); transform: translateX(2px); } .news-item-title { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); } .news-item-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .news-item-source { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.5px; } .news-item-teams { display: flex; gap: 4px; } .news-item-team-pill { background: var(--surface); padding: 1px 6px; font-family: var(--font-display); font-weight: 800; font-size: 9px; letter-spacing: 1px; color: var(--amber); } .news-item-time { margin-left: auto; } /* News attached to a pick card (under "Discuss / news" toggle) */ .pick-news { margin-bottom: 12px; } .pick-news:empty { display: none; } .pick-news-head { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; font-size: 11px; color: var(--muted); margin: 0 0 8px; } /* ========================================================================== PER-LEAGUE PAGE (/league.html?slug=...) ========================================================================== */ .league-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 6px 0 2px; } .league-header-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .league-header-actions { display: flex; gap: 8px; flex-wrap: wrap; } .league-year-pill, .league-pub-pill { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 9px; background: var(--surface-2); color: var(--muted); } .league-pub-pill.private { color: var(--text-2); } .league-featured-pill { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.2px; padding: 3px 9px; background: var(--amber); color: #0b0d12; } /* Member roster grid */ .league-members-grid { display: grid; gap: 10px; margin: 14px 0 28px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .league-member-card { background: var(--surface); border: 1px solid var(--border); padding: 14px 16px; } .league-member-card.is-me { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255,170,0,0.10); } .league-member-handle { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.5px; color: var(--muted); text-transform: lowercase; display: flex; align-items: center; gap: 6px; } .league-member-team { margin-top: 4px; font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text); } /* My roster */ .league-roster { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 28px; } .league-roster-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface-2); border-left: 2px solid var(--amber); } .league-roster-slot { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; padding: 3px 8px; background: var(--amber); color: #0b0d12; min-width: 32px; text-align: center; } .league-roster-name { font-weight: 700; font-size: 13px; } .league-roster-meta { font-size: 11px; color: var(--muted); } .league-roster-empty { font-size: 13px; color: var(--muted); font-style: italic; padding: 12px 0; text-align: center; } /* Other members' roster snapshots */ .league-rosters-grid { display: grid; gap: 12px; margin: 14px 0 28px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .league-roster-card { background: var(--surface); border: 1px solid var(--border); padding: 14px 16px; } .league-roster-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .league-roster-card-head strong { font-family: var(--font-display); font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: 0.3px; } .league-roster-card-count { font-size: 11px; color: var(--amber); font-weight: 600; margin-bottom: 8px; } .league-roster-card-list { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; } .league-roster-card-list li { font-size: 12px; color: var(--text); padding: 4px 0; border-bottom: 1px dashed var(--border); } .league-roster-card-list li:last-child { border-bottom: 0; } /* Standings placeholder */ .league-standings-empty { background: var(--surface); border: 1px dashed var(--border); padding: 28px 22px; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 28px; } /* Featured league treatment on the hub */ .league-card.league-card-featured { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255,170,0,0.15), 0 4px 24px rgba(255,170,0,0.08); } /* Standings table (per-league leaderboard) */ .standings-table th, .standings-table td { padding: 10px 12px; font-size: 13px; } .standings-table .rank { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--amber); width: 38px; } .standings-team { font-family: var(--font-display); font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text); } .standings-handle { font-size: 10px; color: var(--muted); margin-top: 2px; } .standings-row-me { background: var(--amber-soft); } .standings-row-me .rank { color: var(--text); } /* Player picker modal */ .picker-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .picker-filters input[type="search"] { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 10px 14px; font-family: var(--font-sans); font-size: 14px; outline: none; } .picker-filters input[type="search"]:focus { border-color: var(--amber); } .picker-results { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; } .picker-row { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border-left: 2px solid var(--border); } .picker-pos { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 1.2px; color: var(--amber); } .picker-name { font-weight: 600; font-size: 13px; } .picker-team { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.5px; color: var(--muted); } /* ========================================================================== SCHEDULE PAGE (/schedule.html) — 7-day calendar of MLB + NFL games ========================================================================== */ .sched-rangenav { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 22px; font-size: 12px; } .sched-day { margin-bottom: 28px; } .sched-day-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .sched-day-label { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; font-size: 22px; color: var(--amber); } .sched-day-date { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-2); letter-spacing: 0.5px; } .sched-day-count { margin-left: auto; font-size: 11px; color: var(--muted); font-family: var(--font-display); letter-spacing: 1px; } .sched-day-games { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .sched-day-empty { font-size: 12px; padding: 14px; font-style: italic; background: var(--surface); border: 1px dashed var(--border); } .sched-game { background: var(--surface); border: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s ease; } .sched-game:hover { border-color: var(--amber); } .sched-game-live { border-left: 3px solid var(--red); } .sched-game-final { border-left: 3px solid var(--muted); opacity: 0.85; } .sched-game-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; } .sched-time { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.5px; color: var(--text); } .sched-game-live .sched-time { color: var(--red); } .sched-game-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .sched-team { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; } .sched-team img { width: 22px; height: 22px; object-fit: contain; } .sched-team b { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text); margin-left: auto; } .sched-vs { font-size: 11px; color: var(--muted); } .sched-venue { font-size: 11px; padding-top: 6px; border-top: 1px dashed var(--border); } /* ========================================================================== DEDICATED NEWS PAGE (/news.html) ========================================================================== */ /* Two-column layout: main feed on left, trending sidebars on right. minmax(0,1fr) is critical — without it the 1fr column can refuse to shrink (its grid items have intrinsic widths from the cards) and we get phantom dead space on the left side. */ .news-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 4px; } /* Compact filter bar replacing the old wall of chips */ .news-filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; } .news-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 8px 12px; font-family: var(--font-sans); font-size: 13px; min-width: 160px; cursor: pointer; transition: border-color .15s ease; } .news-select:hover, .news-select:focus { border-color: var(--amber); outline: none; } .news-select optgroup { font-family: var(--font-display); letter-spacing: 0.5px; } /* Time-section headers ("Last hour", "Earlier today", etc.) — minimal, just a quiet rule between sections so the eye knows when the time bucket flips. */ .news-section-head { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; color: var(--muted); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .news-section-head:first-of-type { margin-top: 4px; } .news-section-head .muted { color: var(--text-2); } .news-grid-inner { display: grid; gap: 12px; /* Wider min card so titles + summaries breathe — 380px ensures at most 2 cards per row on the typical feed-column width, with room for summary text below the title. */ grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } @media (max-width: 720px) { .news-grid-inner { grid-template-columns: 1fr; } } /* News card — readable, breathing, scan-friendly */ .news-card-compact { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s, background .15s; } .news-card-compact:hover { border-color: var(--amber); background: var(--surface-2); transform: translateY(-1px); } .news-card-compact .news-card-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.2; margin: 0; color: var(--text); text-transform: none; letter-spacing: 0; } .news-card-compact .news-card-summary { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0; } .news-card-compact .news-card-meta { font-size: 11px; color: var(--muted); padding-top: 4px; border-top: 1px dashed rgba(255,255,255,0.04); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Trending Players|Teams toggle inside the sidebar card */ .trending-toggle { display: inline-flex; background: var(--surface-2); border-radius: 6px; padding: 2px; } .trending-toggle-btn { background: transparent; border: 0; cursor: pointer; padding: 5px 10px; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); border-radius: 4px; transition: background .15s, color .15s; } .trending-toggle-btn.active { background: var(--amber); color: #0b0d12; } @media (max-width: 980px) { .news-page-grid { grid-template-columns: 1fr; } } /* Active filter status (shown when a player or team is filtered) */ .news-active-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; } .news-active-chip { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; font-size: 12px; padding: 4px 10px; border-radius: 4px; } .news-active-player { background: var(--amber); color: #0b0d12; } .news-active-team { background: rgba(74,158,255,0.18); color: #79c0ff; } /* Sidebar = stack of hub-card widgets */ .news-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; align-self: start; } @media (max-width: 980px) { .news-sidebar { position: static; } } /* Trending teams list (right sidebar) */ .trending-teams { display: flex; flex-direction: column; gap: 4px; } .trending-team-row { background: var(--surface-2); border: 0; border-left: 2px solid var(--green); border-radius: 4px; padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-sans); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s; } .trending-team-row:hover { background: var(--surface); border-left-color: var(--amber); } .trending-team-abbr { font-family: var(--font-display); font-weight: 800; letter-spacing: 1px; font-size: 13px; } .trending-team-count { font-family: var(--font-display); font-weight: 800; color: var(--amber); font-size: 14px; } .news-tabs { display: flex; gap: 0; margin: 10px 0 18px; border-bottom: 1px solid var(--border); } .news-tab { background: none; border: 0; cursor: pointer; padding: 12px 22px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .news-tab:hover { color: var(--text); } .news-tab.active { color: var(--amber); border-bottom-color: var(--amber); } .news-featured { margin-bottom: 14px; } /* The outer .news-grid is now a vertical stack of time-section blocks. The actual card grid lives inside each .news-grid-inner. Was previously `display: grid` (one column per card) but that fought with our new structure of

+
siblings — H3 was claiming column 1 and the inner grid was getting shoved to column 2, leaving dead space on the left. Vertical flex stack fixes it cleanly. */ .news-grid { display: flex; flex-direction: column; gap: 0; } .news-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; /* match the polished hub feel */ text-decoration: none; color: var(--text); display: flex; flex-direction: column; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; } .news-card:hover { border-color: var(--amber); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.35); } .news-card-img { width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--surface-2); border-bottom: 1px solid var(--border); } .news-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .news-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); } .news-card-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.2; letter-spacing: 0.2px; margin: 0; color: var(--text); text-transform: none; } .news-card-summary { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 0; } /* Featured article — bigger, side-by-side on wide screens. Bumped border accent + a Top Story label so it clearly leads the page vs blending with the compact cards below. */ .news-card-featured { display: grid; grid-template-columns: 1.4fr 1fr; border: 2px solid var(--amber); border-radius: 12px; box-shadow: 0 0 0 1px rgba(255,170,0,0.18), 0 6px 28px rgba(255,170,0,0.10); margin-bottom: 6px; position: relative; } .news-card-featured::before { content: "Top story"; position: absolute; top: 12px; left: 12px; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 9px; background: var(--amber); color: #0b0d12; border-radius: 4px; z-index: 1; } .news-card-featured .news-card-img { aspect-ratio: auto; height: 100%; min-height: 240px; border-bottom: 0; border-right: 1px solid var(--border); } .news-card-featured .news-card-body { padding: 24px 26px; } .news-card-featured .news-card-title { font-size: 26px; line-height: 1.15; } .news-card-featured .news-card-summary { font-size: 14px; } .news-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; font-size: 12px; } .news-pagination .chip:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 720px) { .news-card-featured { grid-template-columns: 1fr; } .news-card-featured .news-card-img { min-height: 0; aspect-ratio: 16/9; border-right: 0; border-bottom: 1px solid var(--border); } .news-card-featured .news-card-body { padding: 18px 18px; } .news-card-featured .news-card-title { font-size: 20px; } .news-tab { padding: 10px 16px; font-size: 13px; } } /* ========================================================================== HUB PAGE — dedicated operational dashboard (/hub.html) ========================================================================== */ .hub-page-head { border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 6px; } .hub-refresh-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .hub-poll-status { display: inline-flex; gap: 6px; flex-wrap: wrap; } .hub-poll-pill { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; background: var(--surface-2); color: var(--muted); transition: background .2s, color .2s; } .hub-poll-pill.ok { background: rgba(40,214,112,0.10); color: var(--green); } .hub-poll-pill.err { background: rgba(255,71,87,0.14); color: var(--red); } /* Slate-date pill on the locks KPI (green when today, amber when stale) */ .dash-kpi-slate { display: inline-block; margin-left: 6px; font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: 0.6px; padding: 2px 6px; border-radius: 3px; background: var(--surface-2); color: var(--muted); vertical-align: middle; } .dash-kpi-slate.fresh { background: rgba(40,214,112,0.12); color: var(--green); } .dash-kpi-slate.stale { background: rgba(255,180,40,0.14); color: #ffb428; } /* Stale-slate banner inside the top-edges card */ .hub-stale-banner { margin: -4px 0 12px; padding: 10px 12px; background: rgba(255,180,40,0.08); border: 1px solid rgba(255,180,40,0.30); border-left: 3px solid #ffb428; border-radius: 6px; font-size: 12px; line-height: 1.45; color: var(--text); } .hub-stale-banner b { color: #ffb428; } .hub-stale-dot { color: #ffb428; margin-right: 6px; animation: pulse-stale-dot 1.8s ease-in-out infinite; } @keyframes pulse-stale-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .hub-stale-dot { animation: none; } } .hub-refresh-btn { margin-left: auto; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 5px 12px; border-radius: 6px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.5px; cursor: pointer; transition: border-color .15s, color .15s; } .hub-refresh-btn:hover { border-color: var(--amber); color: var(--amber); } .hub-refresh-btn.spinning { animation: hub-refresh-spin .8s linear; } @keyframes hub-refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hub-page-grid { display: grid; gap: 18px; margin-top: 22px; grid-template-columns: 1.4fr 1fr; } .hub-page-col { display: flex; flex-direction: column; gap: 14px; } @media (max-width: 980px) { .hub-page-grid { grid-template-columns: 1fr; } } /* ========================================================================== GLOBAL LIVE TICKER (injected by app.js, appears below header on every page except the marketing home). Marquee scroll, score + news interleaved. ========================================================================== */ .bb-ticker { position: sticky; top: 64px; /* sits right below the sticky header */ z-index: 65; display: flex; align-items: stretch; height: 76px; /* two stacked tracks: 38px each */ background: rgba(11,13,18,0.98); border-bottom: 2px solid var(--red); border-top: 1px solid var(--border); backdrop-filter: blur(12px); overflow: hidden; font-size: 13px; } /* Two-row stack (scores on top, news on bottom) */ .bb-ticker-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bb-ticker-row { flex: 1; display: flex; align-items: center; min-height: 0; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.06); } .bb-ticker-row:last-child { border-bottom: 0; } .bb-ticker-row-scores { background: rgba(255,71,87,0.04); } .bb-ticker-row-news { background: rgba(255,255,255,0.02); } .bb-ticker-label { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; height: 100%; color: #fff; font-family: var(--font-display); font-weight: 900; letter-spacing: 1.3px; font-size: 12px; text-transform: uppercase; } .bb-ticker-label-scores { background: var(--red); } .bb-ticker-label-news { background: var(--amber); color: #0b0d12; } .bb-ticker-label .live-dot { background: #fff; box-shadow: 0 0 6px #fff; } .bb-ticker-track { flex: 1; overflow: hidden; display: flex; gap: 28px; white-space: nowrap; animation: bb-ticker-scroll 40s linear infinite; will-change: transform; } .bb-ticker-track:hover { animation-play-state: paused; } @keyframes bb-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .bb-ticker-item { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 0 12px; text-decoration: none; color: var(--text); border-right: 1px solid var(--border); } .bb-ticker-item.bb-ticker-news:hover { color: var(--amber); } .bb-ticker-score b { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.6px; } .bb-ticker-num { font-family: var(--font-display); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; } .bb-ticker-score.pre .bb-ticker-state { color: var(--muted); background: transparent; } .bb-ticker-score.final .bb-ticker-state { color: var(--text-2); } .bb-ticker-state { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.8px; padding: 3px 8px; border-radius: 3px; background: var(--surface-2); } .bb-ticker-score.live .bb-ticker-state { background: rgba(255,71,87,0.18); color: var(--red); } .bb-ticker-src { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.5px; color: var(--muted); flex-shrink: 0; } .bb-ticker-title { font-size: 15px; line-height: 1.2; } .bb-ticker-empty { padding: 0 14px; font-size: 12px; } .bb-ticker-close { flex-shrink: 0; background: transparent; border: 0; color: var(--muted); font-size: 22px; line-height: 1; padding: 0 12px; cursor: pointer; height: 100%; } .bb-ticker-close:hover { color: var(--text); } @media (max-width: 720px) { /* Mobile: still two rows, slightly slimmer, smaller labels */ .bb-ticker { top: 56px; height: 64px; font-size: 12px; } .bb-ticker-label { padding: 0 10px; font-size: 10px; letter-spacing: 1px; } .bb-ticker-num { font-size: 14px; } .bb-ticker-score b { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .bb-ticker-track { animation: none; } } /* ========================================================================== TOAST NOTIFICATIONS — slide-in from top-right for breaking news. ========================================================================== */ .bb-toasts { position: fixed; top: 80px; right: 16px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: 380px; pointer-events: none; /* lets clicks pass through gaps */ } .bb-toast { pointer-events: auto; background: var(--surface); border: 1px solid var(--amber); border-left: 4px solid var(--red); border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,170,0,0.10); text-decoration: none; color: var(--text); transform: translateX(420px); opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.3,1.2), opacity .25s; display: block; } .bb-toast.bb-toast-shown { transform: translateX(0); opacity: 1; } .bb-toast:hover { background: var(--surface-2); box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,170,0,0.25); } .bb-toast-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .bb-toast-src { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--red); } .bb-toast-team { font-family: var(--font-display); font-weight: 800; font-size: 9px; letter-spacing: 1px; background: var(--amber-soft); color: var(--amber); padding: 2px 6px; border-radius: 3px; } .bb-toast-close { background: transparent; border: 0; color: var(--muted); font-size: 18px; line-height: 1; padding: 0; cursor: pointer; margin-left: auto; } .bb-toast-close:hover { color: var(--red); } .bb-toast-title { font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1.3; color: var(--text); } @media (max-width: 720px) { .bb-toasts { top: auto; bottom: 16px; right: 8px; left: 8px; max-width: none; } .bb-toast { border-radius: 8px; } } @media (prefers-reduced-motion: reduce) { .bb-toast { transform: none; transition: opacity .2s; } } /* ========================================================================== HOMEPAGE DASHBOARD BAND — KPI tiles + live ticker + this-week strip ========================================================================== */ .dash-band { margin: 0 0 32px; display: flex; flex-direction: column; gap: 14px; } /* ---- KPI tiles ---- */ .dash-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .dash-kpi { background: var(--surface); border: 1px solid var(--border); padding: 14px 16px; border-top: 3px solid var(--amber); position: relative; } .dash-kpi:nth-child(1) { border-top-color: var(--red); } .dash-kpi:nth-child(2) { border-top-color: var(--green); } .dash-kpi:nth-child(3) { border-top-color: var(--amber); } .dash-kpi:nth-child(4) { border-top-color: var(--amber); } .dash-kpi:nth-child(5) { border-top-color: var(--green); } .dash-kpi-k { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; font-size: 10px; color: var(--muted); } .dash-kpi-v { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 3.2vw, 40px); line-height: 1; margin-top: 6px; color: var(--text); letter-spacing: -0.5px; } .dash-kpi-sub { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--font-sans); } /* ---- Live ticker (marquee scroll) ---- */ .dash-ticker { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--red); display: flex; align-items: center; gap: 12px; padding: 10px 0 10px 14px; overflow: hidden; position: relative; } .dash-ticker-label { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; color: var(--red); display: flex; align-items: center; gap: 6px; padding-right: 12px; border-right: 1px solid var(--border); flex-shrink: 0; } .dash-ticker-track { display: flex; gap: 28px; animation: ticker-scroll 18s linear infinite; will-change: transform; } .dash-ticker-track:hover { animation-play-state: paused; } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* duplicated track */ } .ticker-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .ticker-item b { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--text); } .ticker-vs { color: var(--muted); font-size: 11px; } .ticker-inn { margin-left: 4px; padding: 2px 7px; background: rgba(255,71,87,0.18); color: var(--red); font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.8px; } /* ---- This-week strip ---- */ .dash-week { background: var(--surface); border: 1px solid var(--border); padding: 14px 16px; } .dash-week-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .dash-week-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; color: var(--muted); } .dash-week-link { font-size: 11px; color: var(--amber); text-transform: uppercase; letter-spacing: 1px; font-family: var(--font-display); font-weight: 700; } .dash-week-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .dwd { background: var(--surface-2); padding: 10px 8px; text-align: center; text-decoration: none; color: var(--text); border-left: 2px solid var(--border); transition: border-color .15s ease, background .15s ease; display: flex; flex-direction: column; gap: 3px; } .dwd:hover { border-left-color: var(--amber); background: var(--surface); } .dwd-day { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); } .dwd-date { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1; color: var(--text); } .dwd-status { font-size: 10px; color: var(--muted); margin-top: 2px; } .dwd-live { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-weight: 700; } .dwd-live .live-dot { width: 5px; height: 5px; margin-right: 0; } .dwd-final { color: var(--muted); } .dwd-pre { color: var(--green); } @media (max-width: 720px) { .dash-kpis { grid-template-columns: 1fr 1fr; } .dash-week-strip { grid-template-columns: repeat(5, 1fr); gap: 5px; } .dwd { padding: 8px 4px; } .dwd-date { font-size: 20px; } .dwd-day, .dwd-status { font-size: 9px; } .dash-ticker-label { padding-right: 8px; font-size: 10px; } .dash-ticker { padding-left: 10px; } .ticker-item { font-size: 12px; } .ticker-item b { font-size: 14px; } } /* ========================================================================== HOMEPAGE — multi-sport additions ========================================================================== */ /* NFL kickoff countdown strip — sits between hero and the MLB receipts. */ .nfl-strip { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--amber); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 32px; } .nfl-strip-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .nfl-strip-msg { font-size: 14px; line-height: 1.4; } .nfl-strip-msg strong { color: var(--amber); font-weight: 700; } .nfl-strip-right { display: flex; gap: 8px; flex-wrap: wrap; } .btn-sm { padding: 8px 14px !important; font-size: 11px !important; } /* Small inline tag next to an h2 — e.g. "MLB · 2026" on "The receipts" */ .h2-tag { display: inline-block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); padding: 3px 9px; background: var(--amber-soft); border: 1px solid rgba(255,170,0,0.30); margin-left: 10px; vertical-align: middle; } /* Two-card CTA at bottom of homepage: NFL leagues + MLB Substack */ .dual-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0 0; } .dual-cta-card { background: var(--surface); border: 1px solid var(--border); padding: 24px 22px; display: flex; flex-direction: column; } .dual-cta-card h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; font-size: 22px; margin: 12px 0 10px; line-height: 1.1; } .dual-cta-card p { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0 0 18px; } .dual-cta-card .btn { margin-top: auto; align-self: flex-start; } @media (max-width: 720px) { .dual-cta { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; } .dual-cta-card { padding: 18px; } .nfl-strip { padding: 12px 14px; } .nfl-strip-right { width: 100%; } .nfl-strip-right .btn { flex: 1; } .h2-tag { display: inline-block; margin-left: 0; margin-top: 6px; } } /* ========================================================================== NFL HUB PAGE ========================================================================== */ .nfl-hub { max-width: 1100px; margin: 0 auto; } .nfl-status { text-align: center; background: var(--surface); border: 1px solid var(--border); padding: 36px 24px; margin: 8px 0 36px; position: relative; overflow: hidden; } .nfl-status::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,170,0,0.10) 0%, transparent 60%); pointer-events: none; } .nfl-countdown { position: relative; font-family: var(--font-display); font-weight: 900; font-size: clamp(54px, 11vw, 110px); line-height: 1; color: var(--amber); letter-spacing: -2px; } .nfl-status-label { position: relative; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; color: var(--muted); margin-top: 14px; } .nfl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .nfl-card { background: var(--surface); border: 1px solid var(--border); padding: 22px; display: flex; flex-direction: column; } .nfl-card-primary { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255,170,0,0.15); } .nfl-card h2 { font-size: 22px; margin: 14px 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .nfl-card p { margin: 0 0 12px; line-height: 1.55; color: var(--text); } .nfl-card ul { color: var(--text); } .nfl-card-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; } .nfl-card-actions .auth-submit { max-width: 200px; margin-top: 0; } .nfl-cta { background: var(--surface-2); border: 1px solid var(--border); padding: 18px 22px; margin-top: 32px; text-align: center; } @media (max-width: 720px) { .nfl-status { padding: 26px 16px; margin-bottom: 24px; } .nfl-grid { grid-template-columns: 1fr; } .nfl-card { padding: 18px; } } /* Mobile header rebuild — was too tight only at 380px which left the 400-700px band squishing the wordmark + auth button against the hamburger. Now graceful at every viewport. */ @media (max-width: 720px) { .site-header { padding: 10px 14px; gap: 10px; } .brand-logo { width: 34px; height: 34px; } .brand-wordmark { font-size: 16px; } .nav-toggle { width: 40px; height: 40px; flex-shrink: 0; } .auth-slot { flex-shrink: 0; } .auth-cta { font-size: 11px; padding: 7px 12px; letter-spacing: 0.6px; } } @media (max-width: 520px) { /* Wordmark hides earlier — logo + hamburger + auth need the real estate */ .brand-wordmark { display: none; } .site-header { padding: 10px 12px; gap: 8px; } } @media (max-width: 380px) { main { padding: 14px 10px 48px; } .site-header { padding: 8px 10px; gap: 6px; } .nav-toggle { width: 36px; height: 36px; } .ribbon { grid-template-columns: 1fr; } .stat .v { font-size: 22px; } } /* Header itself must never wrap onto two lines — caused the "doesn't sit flush" look the user reported. */ .site-header { flex-wrap: nowrap; min-height: 56px; } .brand { min-width: 0; overflow: hidden; } .brand-wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== AUTH + LEAGUES (Bad Bets social hub) ========================================================================== */ /* Header auth slot — sits to the right of nav.primary */ .site-header { display: flex; align-items: center; gap: 18px; } .auth-slot { margin-left: auto; display: inline-flex; align-items: center; } .auth-cta { display: inline-flex; align-items: center; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; font-weight: 800; font-size: 13px; padding: 8px 16px; background: var(--amber); color: #0b0d12; border: 1px solid var(--amber); text-decoration: none; transition: filter .15s ease; } .auth-cta:hover { filter: brightness(1.1); } .auth-chip { position: relative; } .auth-chip-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 5px 10px 5px 5px; cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 600; } .auth-chip-btn:hover { border-color: var(--amber); } .auth-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--amber); color: #0b0d12; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.5px; } .auth-handle { font-size: 13px; } .auth-menu { position: absolute; top: calc(100% + 4px); right: 0; background: var(--surface); border: 1px solid var(--border); min-width: 180px; display: none; z-index: 100; box-shadow: 0 6px 24px rgba(0,0,0,0.4); } .auth-chip[data-open="true"] .auth-menu { display: flex; flex-direction: column; } .auth-menu a, .auth-menu button { background: none; border: 0; text-align: left; padding: 11px 14px; color: var(--text); text-decoration: none; font-family: var(--font-sans); font-size: 13px; cursor: pointer; } .auth-menu a:hover, .auth-menu button:hover { background: var(--surface-2); color: var(--amber); } /* Auth pages (account, leagues gate) */ .auth-section { max-width: 720px; margin: 0 auto; } .auth-card { background: var(--surface); border: 1px solid var(--border); padding: 28px 28px 24px; margin-top: 8px; } .auth-form { display: flex; flex-direction: column; gap: 8px; } .auth-label { font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-top: 12px; } .auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="number"], .auth-form input[type="password"], .auth-form select, .auth-form textarea { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 11px 13px; border-radius: 0; font-family: var(--font-sans); font-size: 14px; outline: none; transition: border-color .15s ease; } .auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus { border-color: var(--amber); } .auth-form textarea { resize: vertical; min-height: 70px; } .auth-submit { margin-top: 18px; background: var(--amber); color: #0b0d12; border: 1px solid var(--amber); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; font-size: 13px; padding: 12px 16px; cursor: pointer; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: filter .15s ease; } .auth-submit:hover:not(:disabled) { filter: brightness(1.08); } .auth-submit:disabled { opacity: 0.5; cursor: wait; } .auth-submit-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); } .auth-submit-secondary:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); } .auth-submit-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); } .auth-submit-ghost:hover:not(:disabled) { border-color: var(--red); color: var(--red); } .auth-submit-small { padding: 9px 14px; font-size: 11px; } /* Discord OAuth button — official brand blurple (#5865F2). Used on /account.html for both sign-in and sign-up flows. */ .auth-discord { background: #5865F2; color: #fff; border-color: #5865F2; display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; } .auth-discord:hover:not(:disabled) { background: #4752c4; border-color: #4752c4; color: #fff; filter: none; } .auth-discord-icon { flex-shrink: 0; } /* Avatar uploader on /account.html */ .bb-avatar-uploader { display: flex; align-items: center; gap: 16px; padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 18px; } .bb-avatar-preview { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 2px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--muted); } .bb-avatar-img { width: 100%; height: 100%; object-fit: cover; } .bb-avatar-actions { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .bb-avatar-actions .auth-submit { max-width: 180px; } /* Discord (Whop) community CTA — site-wide, lives above each footer */ .bb-discord-cta { margin: 0 auto 12px; max-width: 720px; } .bb-discord-link { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%); color: #fff; text-decoration: none; border-radius: 12px; font-family: var(--font-sans); font-size: 14px; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 14px rgba(88,101,242,0.3); } .bb-discord-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(88,101,242,0.5); color: #fff; } .bb-discord-glyph { font-size: 22px; flex-shrink: 0; } .bb-discord-link b { font-family: var(--font-display); font-weight: 900; letter-spacing: 1px; } .bb-discord-arrow { margin-left: auto; font-family: var(--font-display); font-weight: 900; font-size: 18px; } @media (max-width: 600px) { .bb-discord-link { font-size: 12px; padding: 10px 14px; gap: 10px; } .bb-discord-glyph { font-size: 18px; } } /* Bigger hero variant for the Hub callout */ .bb-discord-card { margin-top: 18px; } .bb-discord-card-link { display: flex; align-items: center; gap: 16px; padding: 18px 24px; background: radial-gradient(80% 100% at 100% 0%, rgba(255,255,255,0.15) 0%, transparent 60%), linear-gradient(135deg, #5865F2 0%, #4752c4 100%); border-radius: 14px; text-decoration: none; color: #fff; transition: transform .15s, box-shadow .15s; box-shadow: 0 6px 20px rgba(88,101,242,0.3); } .bb-discord-card-link:hover { transform: translateY(-2px); color: #fff; box-shadow: 0 10px 28px rgba(88,101,242,0.5); } .bb-discord-card-icon { font-size: 36px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .bb-discord-card-body { flex: 1; } .bb-discord-card-title { font-family: var(--font-display); font-weight: 900; font-size: 20px; letter-spacing: 1px; } .bb-discord-card-sub { font-size: 13px; opacity: 0.9; margin-top: 2px; } .bb-discord-card-cta { font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: 1px; padding: 8px 16px; background: rgba(255,255,255,0.15); border-radius: 8px; } @media (max-width: 600px) { .bb-discord-card-link { padding: 14px 16px; gap: 12px; } .bb-discord-card-icon { font-size: 28px; } .bb-discord-card-title { font-size: 16px; } .bb-discord-card-sub { font-size: 11px; } } /* Official Bad Bets NFL fantasy league banner (top of /leagues.html) */ .bb-official-banner { display: flex; align-items: center; gap: 18px; padding: 18px 22px; margin: 14px 0 22px; background: radial-gradient(80% 100% at 100% 0%, rgba(255,170,0,0.18) 0%, transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)); border: 1px solid rgba(255,170,0,0.4); border-radius: 14px; box-shadow: 0 6px 20px rgba(255,170,0,0.15); } .bb-official-banner-icon { font-size: 40px; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .bb-official-banner-body { flex: 1; min-width: 0; } .bb-official-banner-title { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.5px; color: var(--text); margin-bottom: 2px; } .bb-official-banner-sub { font-size: 13px; color: var(--text-2); } .bb-official-banner-sub b { color: var(--amber); font-family: var(--font-display); } .bb-official-banner-cta { max-width: 160px; flex-shrink: 0; } @media (max-width: 600px) { .bb-official-banner { flex-direction: column; align-items: stretch; text-align: center; padding: 16px; gap: 12px; } .bb-official-banner-cta { max-width: none; } } /* "You're in!" welcome banner shown on league.html right after a successful join/create. Auto-dismisses on next page load — see sessionStorage flag. */ .bb-league-welcome { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin: 14px 0; background: linear-gradient(135deg, rgba(40,214,112,0.15) 0%, rgba(40,214,112,0.05) 100%); border: 1px solid rgba(40,214,112,0.4); border-radius: 12px; animation: bb-welcome-in 0.4s cubic-bezier(0.34, 1.4, 0.64, 1); transition: opacity .2s; } @keyframes bb-welcome-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .bb-league-welcome-icon { font-size: 28px; } .bb-league-welcome-body { flex: 1; } .bb-league-welcome-title { font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: 0.5px; color: var(--green); } .bb-league-welcome-sub { font-size: 12px; color: var(--text-2); margin-top: 2px; } .bb-league-welcome-close { background: transparent; border: 0; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; width: 28px; height: 28px; } .bb-league-welcome-close:hover { color: var(--text); } /* League card enhancements: my-team highlight, draft countdown pill, your-team label */ .league-card.is-mine { border-color: rgba(40,214,112,0.35); background: linear-gradient(180deg, rgba(40,214,112,0.04), transparent 30%); } .league-team-label { color: var(--muted); font-family: var(--font-display); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; margin-right: 6px; } .league-draft-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 5px; background: rgba(255,170,0,0.16); color: var(--amber); font-family: var(--font-mono, monospace); font-weight: 800; font-size: 11px; } .league-draft-pill.urgent { background: rgba(255,80,80,0.18); color: #ff8080; animation: bb-draft-pulse 1.5s ease-in-out infinite; } @keyframes bb-draft-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } .league-draft-row { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,170,0,0.2); } /* Share link button on /league.html */ .bb-share-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 18px 0; } .bb-share-row .label { font-family: var(--font-display); font-size: 11px; letter-spacing: 1.5px; font-weight: 800; text-transform: uppercase; color: var(--muted); } .bb-share-row .link { flex: 1; font-family: var(--font-mono, monospace); font-size: 12px; color: var(--text); background: transparent; border: 0; outline: none; overflow: hidden; text-overflow: ellipsis; } .bb-share-copy { background: var(--amber); color: #0b0d12; border: 0; font-family: var(--font-display); font-weight: 900; font-size: 11px; letter-spacing: 1px; padding: 6px 12px; border-radius: 6px; cursor: pointer; text-transform: uppercase; white-space: nowrap; } .bb-share-copy:hover { filter: brightness(1.1); } .bb-share-copy.copied { background: var(--green); color: #0b0d12; } /* Your-team + draft-countdown bar on /league.html */ .bb-my-team-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; margin: 14px 0; background: linear-gradient(135deg, rgba(40,214,112,0.12) 0%, rgba(40,214,112,0.04) 100%); border: 1px solid rgba(40,214,112,0.3); border-radius: 12px; } .bb-my-team-label { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--green); } .bb-my-team-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.5px; color: var(--text); margin-top: 2px; } .bb-draft-countdown { text-align: right; } .bb-draft-countdown-label { font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); } .bb-draft-countdown-value { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--text); margin-top: 2px; } @media (max-width: 600px) { .bb-my-team-bar { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; } .bb-draft-countdown { text-align: left; } } .auth-status { margin-top: 10px; font-size: 13px; color: var(--muted); font-family: var(--font-sans); min-height: 18px; } .auth-status.success { color: var(--green); } .auth-status.error { color: var(--red); } .auth-status-inline { margin-top: 2px; font-size: 11px; min-height: 14px; } /* Sign-in / Sign-up tab switcher */ .auth-tabs { display: flex; gap: 0; margin: 0 0 22px; border-bottom: 1px solid var(--border); } .auth-tab { flex: 1; background: none; border: 0; padding: 12px 16px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .auth-tab:hover { color: var(--text); } .auth-tab.active { color: var(--amber); border-bottom-color: var(--amber); } /* "or" divider between password form and magic-link button */ .auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-family: var(--font-display); font-weight: 700; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* Profile editor */ .profile-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 14px; } .profile-card { background: var(--surface); border: 1px solid var(--border); padding: 22px 22px 26px; } .profile-card h2 { margin-top: 0; font-size: 18px; letter-spacing: 1px; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .profile-fav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .account-meta dt { font-family: var(--font-display); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-top: 12px; } .account-meta dd { margin: 4px 0 0; font-size: 14px; color: var(--text); } @media (max-width: 720px) { .profile-grid { grid-template-columns: 1fr; } .profile-fav-row { grid-template-columns: 1fr; } } /* Leagues hub */ .league-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; } .league-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .leagues-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .league-card { background: var(--surface); border: 1px solid var(--border); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s ease; } .league-card:hover { border-color: var(--amber); } .league-card-top { display: flex; justify-content: space-between; align-items: center; } .league-year { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 1px; } .league-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.1; } .league-team { font-size: 13px; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 8px; } .league-meta { font-size: 11px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; letter-spacing: 0.3px; } .league-desc { font-size: 13px; color: var(--text); margin: 4px 0 0; font-style: italic; opacity: 0.8; } .league-card-actions { margin-top: auto; padding-top: 10px; } .league-empty { grid-column: 1 / -1; background: var(--surface); border: 1px dashed var(--border); padding: 28px 22px; text-align: center; } .league-empty p { margin: 4px 0; } .sport-tag { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 1.2px; padding: 3px 9px; text-transform: uppercase; } .sport-nfl { background: rgba(255,170,0,0.18); color: var(--amber); } .sport-mlb { background: rgba(40,214,112,0.18); color: var(--green); } .sport-nba { background: rgba(255,128,128,0.18); color: #ff8080; } .sport-ncaaf { background: rgba(193,159,255,0.18); color: #c19fff; } .sport-mixed { background: rgba(120,128,144,0.18); color: var(--muted); } .role-pill { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 2px 7px; text-transform: uppercase; } .role-owner { background: rgba(255,170,0,0.16); color: var(--amber); } .role-commissioner{ background: rgba(40,214,112,0.16); color: var(--green); } /* Modal */ .modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); cursor: pointer; } .modal-card { position: relative; background: var(--surface); border: 1px solid var(--border); max-width: 560px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; padding: 26px 28px 30px; } .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 16px; } .modal-close { background: none; border: 0; color: var(--muted); font-size: 28px; font-weight: 300; cursor: pointer; line-height: 1; padding: 0 6px; } .modal-close:hover { color: var(--red); } /* ========================================================================== ESPN-Zone Live wall — compact tile per game in a dense grid, with a momentum strip pinned above showing top WP swings. Tiles expand into the existing broadcast card on click. ========================================================================== */ /* Momentum strip — pinned above the wall when at least one game qualifies */ .zone-momentum { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, rgba(255,180,40,0.10), transparent); border: 1px solid rgba(255,180,40,0.28); border-left: 4px solid #ffb428; border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; overflow-x: auto; } .zone-momentum-label { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 1.5px; color: #ffb428; flex-shrink: 0; } .zone-momentum-track { display: flex; gap: 18px; flex: 1; min-width: 0; } .zone-momentum-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; background: var(--surface); text-decoration: none; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; border: 1px solid var(--border); transition: border-color .15s, transform .15s; flex-shrink: 0; } .zone-momentum-item:hover { border-color: #ffb428; transform: translateY(-1px); } .zone-momentum-logo { width: 16px; height: 16px; object-fit: contain; } .zone-momentum-score { font-size: 14px; } .zone-momentum-swing { margin-left: 6px; font-size: 10px; letter-spacing: 0.8px; padding: 2px 6px; border-radius: 3px; } .zone-momentum-swing.win { background: rgba(40,214,112,0.16); color: var(--green); } .zone-momentum-swing.loss { background: rgba(255,71,87,0.16); color: var(--red); } /* Wall grid — 3 cols desktop (bigger tiles), scales down. The wider minmax forces fewer columns so each tile gets more real estate for the score, logo, WP bar, etc. */ .zone-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; } @media (max-width: 1100px) { .zone-wall { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } @media (max-width: 700px) { .zone-wall { grid-template-columns: 1fr; gap: 12px; } } /* When a tile is expanded, it spans the full wall width so the broadcast card has room. The expanded tile is just a thin wrapper around the existing .live-card markup. */ .zone-tile.expanded { grid-column: 1 / -1; padding: 0; background: transparent; border: 0; } .zone-tile.expanded .live-card { margin: 0; /* the wall provides the gap */ } /* Tile shell — sized for readability at arm's length */ .zone-tile { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px 18px; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; display: flex; flex-direction: column; gap: 12px; min-height: 200px; } .zone-tile:hover { transform: translateY(-2px); border-color: var(--amber); box-shadow: 0 8px 22px rgba(0,0,0,0.35); } .zone-tile.live { border-color: rgba(255,71,87,0.45); } .zone-tile.final.won { border-color: rgba(40,214,112,0.5); background: linear-gradient(180deg, rgba(40,214,112,0.05), var(--surface)); } .zone-tile.final.lost { border-color: rgba(255,71,87,0.45); background: linear-gradient(180deg, rgba(255,71,87,0.05), var(--surface)); } .zone-tile.pre { border-color: var(--border); opacity: 0.85; } .zone-tile.placeholder { cursor: default; opacity: 0.6; } /* Corner AGREE/FLIP badge */ .zone-tile-dir { position: absolute; top: 6px; right: 6px; font-family: var(--font-display); font-weight: 800; font-size: 9px; letter-spacing: 0.8px; padding: 2px 6px; border-radius: 3px; } .zone-tile-dir.agree { background: rgba(40,214,112,0.18); color: var(--green); } .zone-tile-dir.flip { background: rgba(255,71,87,0.18); color: var(--red); } .zone-tile-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 1px; font-family: var(--font-display); font-weight: 700; color: var(--muted); margin-right: 50px; /* leave room for the dir badge */ min-height: 16px; } .zone-tile-status.live { color: var(--red); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .zone-tile-status.final { color: var(--muted); font-size: 13px; } .zone-tile-status.pre { color: var(--muted); font-size: 12px; } .zone-tile-count { color: var(--text-2); font-size: 11px; font-weight: 600; } /* Teams rows */ .zone-tile-teams { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; } .zone-tile-team { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,0.02); position: relative; } .zone-tile-team.lead { background: rgba(255,255,255,0.06); } .zone-tile-team.ourpick::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 4px; background: var(--amber); border-radius: 2px; } .zone-tile-logo { width: 28px; height: 28px; object-fit: contain; } .zone-tile-abbr { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: 1px; } .zone-tile-score { font-family: var(--font-display); font-weight: 800; font-size: 36px; font-variant-numeric: tabular-nums; text-align: right; min-width: 40px; line-height: 1; color: var(--text); transition: color .2s, transform .2s; } .zone-tile-score.muted { color: var(--muted); } /* Score-flash: pulse + flash with team color when a new run lands */ .zone-tile-score.flash { animation: zone-score-flash 1.6s ease-out; } @keyframes zone-score-flash { 0% { color: var(--text); transform: scale(1); text-shadow: none; } 20% { color: var(--flash-color, var(--amber)); transform: scale(1.35); text-shadow: 0 0 18px var(--flash-color, var(--amber)), 0 0 32px var(--flash-color, var(--amber)); } 100% { color: var(--text); transform: scale(1); text-shadow: none; } } /* Win-prob bar */ .zone-tile-wpbar { position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin-top: 4px; } .zone-tile-wpbar-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 4px; transition: width .8s cubic-bezier(.5,0,.2,1), background .3s; } .zone-tile-wpbar-marker { position: absolute; top: -2px; bottom: -2px; width: 2px; background: rgba(255,255,255,0.65); } .zone-tile-wpbar-label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.5px; font-family: var(--font-display); font-weight: 700; color: var(--text-2); } .zone-tile-wpbar-label b { color: var(--text); } .zone-tile-wpbar-label .win { color: var(--green); } .zone-tile-wpbar-label .loss { color: var(--red); } /* Bottom row: mini bases on left, tap hint on right */ .zone-tile-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-2); margin-top: auto; } .zone-tile-bases svg { width: 26px; height: 26px; } .zone-tile-tap { font-family: var(--font-display); letter-spacing: 0.5px; color: var(--amber); } /* Pre-game + final tiles */ .zone-tile-pre, .zone-tile-final-result { font-size: 13px; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.5px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); } .zone-tile-final-result.won { color: var(--green); } .zone-tile-final-result.lost { color: var(--red); } @media (prefers-reduced-motion: reduce) { .zone-tile-score.flash { animation: none; } .zone-tile-wpbar-fill { transition: none; } .zone-tile:hover { transform: none; } } /* NFL-specific extras layered onto the same zone-tile chassis */ .zone-tile-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .nfl-rec { font-size: 10px; letter-spacing: 0.5px; font-family: var(--font-display); font-weight: 600; } .nfl-live-situation { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; line-height: 1.4; } .nfl-live-dd { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.5px; color: var(--amber); font-size: 12px; margin-bottom: 4px; } .nfl-live-lastplay { color: var(--muted); }