/* ============================================================ THE PAVILION — IPL 2026 personal dashboard Broadcaster aesthetic · cream canvas · team-color flood ============================================================ */ /* Fonts are loaded via in index.html for parallel fetch (avoid @import FOUT). */ :root { /* ---- CANVAS (cream paper palette) ---- */ --canvas: #EEE6D1; --paper: #F5EEDA; --paper-2:#FBF5E1; --ink: #0E0D0B; --ink-2: #2C2A25; --ink-3: #6B6758; --ink-4: #9E9A88; --rule: rgba(14,13,11,0.10); --rule-strong: rgba(14,13,11,0.20); /* ---- TEAM TOKENS (overridden by JS on team select) ---- */ /* ---- BRAND (Pavilion house color, before team pick — IPL navy) ---- */ --brand: #0F3379; --brand-soft: #2B6FD9; --brand-ink: #08224E; --team-primary: #D71920; --team-secondary: #A7A9AC; --team-ink: color-mix(in srgb, var(--team-primary) 75%, #000); --team-edge: color-mix(in srgb, var(--team-primary) 55%, #000); --team-wash: color-mix(in srgb, var(--team-primary) 9%, var(--paper)); --team-wash-hi: color-mix(in srgb, var(--team-primary) 16%, var(--paper)); --team-glow: color-mix(in srgb, var(--team-primary) 35%, transparent); --team-glow-soft: color-mix(in srgb, var(--team-primary) 12%, transparent); /* ---- TYPE ---- Display: Bebas Neue — big editorial moments only. Headline/UI: Space Grotesk — technical, readable, premium. Editorial: Instrument Serif — ceremonial accent for callouts/monikers. Body: Inter. Score: JetBrains Mono. */ --font-display: 'Bebas Neue', 'Space Grotesk', system-ui, sans-serif; --font-headline: 'Space Grotesk', system-ui, sans-serif; --font-editorial: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-score: 'JetBrains Mono', ui-monospace, monospace; /* ---- RHYTHM ---- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --shadow-paper: 0 1px 0 rgba(14,13,11,0.04), 0 20px 50px -28px rgba(14,13,11,0.25); --shadow-lift: 0 1px 0 rgba(14,13,11,0.05), 0 30px 60px -20px rgba(14,13,11,0.3); --ease-out: cubic-bezier(.2,.8,.2,1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100vw; } /* ---- Pavilion crest (reusable inline SVG) ---- */ .crest { width: 1em; height: 1em; display: inline-block; vertical-align: middle; color: currentColor; line-height: 1; flex: 0 0 auto; } body { font-family: var(--font-body); color: var(--ink); min-height: 100vh; width: 100%; font-size: 15px; line-height: 1.55; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: radial-gradient(ellipse 80% 50% at 100% 0%, var(--team-wash-hi) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 0% 100%, rgba(14,13,11,0.05) 0%, transparent 60%), var(--canvas); background-attachment: fixed; transition: background 0.8s var(--ease-out); } .hidden { display: none !important; } a { color: var(--team-ink); text-decoration: none; border-bottom: 1px dashed currentColor; } a:hover { color: var(--team-edge); } ::selection { background: var(--team-primary); color: #fff; } /* ========================================================== TOP MASTHEAD — editorial paper band, double-ruled Cream paper, Bebas display mark, italic editorial middle, monospace clock. No black chrome; the emphasis is typography, not strip-lighting. ========================================================== */ .broadcast-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 14px 28px 10px; background: var(--paper-2); color: var(--ink); font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; text-transform: none; border-bottom: 0; position: relative; overflow: visible; transition: background 0.8s var(--ease-out); } /* Double-rule editorial divider at the foot — newspaper convention */ .broadcast-bar::after { content: ''; position: absolute; left: 28px; right: 28px; bottom: -3px; height: 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: transparent; pointer-events: none; } .bb-left, .bb-right, .bb-mid { position: relative; z-index: 1; } .bb-left { display: flex; align-items: center; gap: 10px; } .bb-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--ink); color: var(--canvas); border-radius: 2px; animation: none; flex: 0 0 auto; transition: background 0.6s var(--ease-out); } .bb-mark svg { width: 11px; height: 11px; } .bb-label { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.05em; line-height: 1; color: var(--ink); text-transform: uppercase; } .bb-mid { text-align: center; font-family: var(--font-editorial); font-style: italic; font-size: 15px; color: var(--ink-3); letter-spacing: 0; text-transform: none; opacity: 1; } .bb-mid em { font-family: var(--font-score); font-style: normal; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; font-size: 12px; padding: 0 2px; } .bb-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; font-family: var(--font-headline); letter-spacing: 0; } .bb-clock { font-family: var(--font-score); color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; transition: color 0.6s var(--ease-out); } .bb-clock::before { content: none; display: none; } .bb-status { display: inline-flex; align-items: center; gap: 7px; padding: 0; border-radius: 0; font-family: var(--font-headline); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; background: transparent; border: 0; color: var(--ink-3); transition: color 0.4s var(--ease-out); box-shadow: none; animation: none !important; } .bb-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: none; } .bb-status[data-state="checking"] { color: #B45309; } .bb-status[data-state="live"] { color: #0F5132; } .bb-status[data-state="live"] .bb-status-dot { box-shadow: 0 0 0 0 rgba(15,81,50,0.5); animation: bb-live-halo 1.8s ease-out infinite; } .bb-status[data-state="snapshot"] { color: var(--ink-4); } .bb-status[data-state="snapshot"] .bb-status-dot { opacity: 0.7; } @keyframes bb-live-halo { 0% { box-shadow: 0 0 0 0 rgba(15,81,50,0.5); } 70% { box-shadow: 0 0 0 7px rgba(15,81,50,0); } 100% { box-shadow: 0 0 0 0 rgba(15,81,50,0); } } /* ========================================================== TICKER — editorial dispatch rail, em-dash separators Paper-on-paper with italic labels and monospace numbers. Feels like a newspaper stock ticker, not an ESPN bug. ========================================================== */ .ticker { display: flex; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--rule); overflow: hidden; height: 40px; position: relative; transition: background 0.8s var(--ease-out); } .tk-badge { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: transparent; color: var(--team-primary); font-family: var(--font-headline); font-weight: 700; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; position: relative; z-index: 2; border-right: 1px solid var(--rule); box-shadow: none; transition: color 0.6s var(--ease-out), border-color 0.6s var(--ease-out); } .tk-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: none; animation: tk-pulse 1.4s ease-in-out infinite; } @keyframes tk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } .tk-badge::after { content: none; display: none; } .tk-track { flex: 1 1 auto; overflow: hidden; position: relative; mask-image: linear-gradient(90deg, transparent 0, black 48px, black calc(100% - 48px), transparent 100%); } .tk-rail { display: flex; gap: 0; height: 100%; animation: tk-scroll 38s linear infinite; will-change: transform; } .ticker:hover .tk-rail { animation-play-state: paused; } @keyframes tk-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tk-group { flex: 0 0 auto; display: flex; align-items: center; height: 100%; padding-right: 0; } .tk-item { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 8px; padding: 0 24px; border-right: 0; font-family: var(--font-body); font-size: 12.5px; color: var(--ink); white-space: nowrap; position: relative; } /* em-dash separator replaces the colored dot */ .tk-item::before { content: '—'; position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: auto; height: auto; margin: 0; border-radius: 0; background: transparent; color: var(--ink-4); font-family: var(--font-editorial); font-size: 15px; font-style: normal; opacity: 0.6; } .tk-item:first-child::before { display: none; } .tk-item .tk-k { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: 13.5px; letter-spacing: 0.005em; text-transform: none; color: var(--ink-3); padding: 0; background: transparent; border: 0; border-radius: 0; } .tk-item .tk-v { color: var(--ink); font-weight: 600; font-size: 12.5px; letter-spacing: 0.005em; } .tk-item .tk-num { font-family: var(--font-score); font-weight: 700; color: var(--ink); letter-spacing: 0; font-size: 13px; } /* ========================================================== ONBOARDING — full-screen cricket-fan intro Design intent: the IPL logo *is* the hero. Cream canvas feels like a match-day programme. Typography confident but not loud. Pitch line down the centre keeps it unmistakably cricket. ========================================================== */ .onboarding { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; overflow: hidden; background: var(--canvas); } /* --- backdrop --- */ .onb-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .onb-bg-blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.22; transition: background 0.9s var(--ease-out), opacity 0.9s var(--ease-out); } .onb-bg-blob.a { top: -26%; left: -18%; width: 62vw; height: 62vw; background: radial-gradient(circle, var(--brand) 0%, transparent 66%); animation: blob-drift-a 26s ease-in-out infinite alternate; } .onb-bg-blob.b { bottom: -34%; right: -22%; width: 70vw; height: 70vw; background: radial-gradient(circle, var(--brand-soft) 0%, transparent 72%); opacity: 0.14; animation: blob-drift-b 32s ease-in-out infinite alternate; } .onboarding.has-team .onb-bg-blob.a { background: radial-gradient(circle, var(--team-primary) 0%, transparent 66%); opacity: 0.52; } .onboarding.has-team .onb-bg-blob.b { background: radial-gradient(circle, var(--team-secondary) 0%, transparent 72%); opacity: 0.42; } @keyframes blob-drift-a { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(-4vw, 4vw) scale(1.04); } } @keyframes blob-drift-b { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(3vw, -3vw) scale(1.06); } } /* cricket pitch — two faint wicket-to-wicket lines down the centre */ .onb-pitch { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent calc(50% - 80px), rgba(14,13,11,0.045) calc(50% - 80px), rgba(14,13,11,0.045) calc(50% - 79px), transparent calc(50% - 79px)), linear-gradient(90deg, transparent calc(50% + 79px), rgba(14,13,11,0.045) calc(50% + 79px), rgba(14,13,11,0.045) calc(50% + 80px), transparent calc(50% + 80px)), radial-gradient(ellipse 55% 35% at 50% 102%, rgba(14,13,11,0.07), transparent 70%), radial-gradient(ellipse 75% 45% at 50% -2%, rgba(245,238,218,0.55), transparent 70%); } @media (max-width: 760px) { .onb-pitch { opacity: 0.6; } } /* giant team-logo watermark — fades in when a team is picked, dominates the entire backdrop so the screen feels like "you've entered their world" */ .onb-team-watermark { position: absolute; left: 50%; top: 50%; width: min(92vh, 92vw); height: min(92vh, 92vw); transform: translate(-50%, -50%) scale(0.82); object-fit: contain; opacity: 0; z-index: 1; pointer-events: none; filter: drop-shadow(0 0 60px color-mix(in srgb, var(--team-primary) 35%, transparent)) saturate(1.15); transition: opacity 0.9s var(--ease-out), transform 1.2s var(--ease-out), filter 0.9s var(--ease-out); } .onboarding.has-team .onb-team-watermark { opacity: 0.26; transform: translate(-50%, -50%) scale(1); animation: wm-breathe 9s ease-in-out infinite 1.2s; filter: drop-shadow(0 0 80px color-mix(in srgb, var(--team-primary) 55%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--team-primary) 35%, transparent)) saturate(1.35) contrast(1.05); } @keyframes wm-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.025); } } /* Click ripple — one hairline ring expanding from the click point. Deliberately restrained: no fill, no glow, just a precision stroke that fades as it grows. Reads as a refined ping, not a splash. */ .onb-flood { position: absolute; left: var(--flood-x, 50%); top: var(--flood-y, 50%); width: 820px; height: 820px; border: 1.5px solid color-mix(in srgb, var(--team-primary) 80%, transparent); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; z-index: 2; will-change: transform, opacity; } /* Fixed size + transform:scale instead of width/height animation — avoids layout thrash and paints on GPU. Critical for first-click smoothness. */ .onb-flood.firing { animation: flood-ring 0.95s cubic-bezier(.22,.85,.28,1) forwards; } @keyframes flood-ring { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.85; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* Stadium-roar shockwave — 3 expanding rings always emanating from screen centre so the whole page feels charged, not just the clicked tile. */ .onb-shockwave { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; } .sw-ring { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%) scale(0); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--team-primary) 70%, transparent); opacity: 0; will-change: transform, opacity; } /* Two rings, thin and slow — radar ping instead of explosion. sw-3 is unused now; kept in markup to avoid a DOM churn but styled as nothing. Animation uses transform + opacity only (no border-width tween) so the whole thing composites on GPU and never repaints — critical for the first-click smoothness. */ .onb-shockwave.firing .sw-1 { animation: sw-ring 1.6s cubic-bezier(.16,1,.3,1) forwards 0s; } .onb-shockwave.firing .sw-2 { animation: sw-ring 1.7s cubic-bezier(.16,1,.3,1) forwards 0.18s; } .onb-shockwave.firing .sw-3 { display: none; } @keyframes sw-ring { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.7; } 60% { opacity: 0.25; } 100% { transform: translate(-50%, -50%) scale(100); opacity: 0; } } /* Full-screen team-color tint — brief atmospheric wash. Reads as "the whole stadium has switched to their colour for a second". */ .onb-tint { position: absolute; inset: 0; background: var(--team-primary); opacity: 0; pointer-events: none; z-index: 1; /* Was: mix-blend-mode: multiply. Dropped — on older Android WebViews (Instagram in-app browser uses one) blend-mode during an opacity animation causes compositor thrash + the team-select flicker. Plain opacity fade reads nearly identical and composites cheaply. */ } .onb-tint.firing { animation: tint-flash 1.4s var(--ease-out) forwards; } @keyframes tint-flash { 0% { opacity: 0; } 25% { opacity: 0.14; } 100% { opacity: 0; } } /* Edge blades — 4 hairline bars sweep in from each side in quick sequence. Top blade comes from the left; right from the top; bottom from the right; left from the bottom — a spiral of atmosphere around the perimeter. */ .onb-edges { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; } .edge { position: absolute; background: linear-gradient(90deg, transparent, var(--team-primary) 40%, var(--team-primary) 60%, transparent); opacity: 0; box-shadow: 0 0 28px color-mix(in srgb, var(--team-primary) 55%, transparent); } .edge-t, .edge-b { left: -10%; width: 120%; height: 3px; } .edge-l, .edge-r { top: -10%; height: 120%; width: 3px; background: linear-gradient(180deg, transparent, var(--team-primary) 40%, var(--team-primary) 60%, transparent); } .edge-t { top: 0; } .edge-b { bottom: 0; } .edge-l { left: 0; } .edge-r { right: 0; } .onb-edges.firing .edge-t { animation: edge-sweep-h 0.85s cubic-bezier(.2,.7,.25,1) forwards 0s; } .onb-edges.firing .edge-r { animation: edge-sweep-v 0.85s cubic-bezier(.2,.7,.25,1) forwards 0.08s; } .onb-edges.firing .edge-b { animation: edge-sweep-h 0.85s cubic-bezier(.2,.7,.25,1) forwards 0.16s; } .onb-edges.firing .edge-l { animation: edge-sweep-v 0.85s cubic-bezier(.2,.7,.25,1) forwards 0.24s; } @keyframes edge-sweep-h { 0% { opacity: 0; transform: translateX(-100%); } 40% { opacity: 1; } 60% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(10%); } } @keyframes edge-sweep-v { 0% { opacity: 0; transform: translateY(-100%); } 40% { opacity: 1; } 60% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(10%); } } /* Corner vignette flash — broadcast cut feel. */ .onb-corners { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .cnr { position: absolute; width: 34vw; height: 34vw; max-width: 420px; max-height: 420px; opacity: 0; background: radial-gradient(circle at var(--cx,0%) var(--cy,0%), color-mix(in srgb, var(--team-primary) 70%, transparent) 0%, color-mix(in srgb, var(--team-primary) 20%, transparent) 40%, transparent 75%); } .cnr-tl { top: 0; left: 0; --cx: 0%; --cy: 0%; } .cnr-tr { top: 0; right: 0; --cx: 100%; --cy: 0%; } .cnr-bl { bottom: 0; left: 0; --cx: 0%; --cy: 100%; } .cnr-br { bottom: 0; right: 0; --cx: 100%; --cy: 100%; } .onboarding.corners-firing .cnr { animation: cnr-flash 0.9s var(--ease-out) forwards; } .onboarding.corners-firing .cnr-tr { animation-delay: 0.06s; } .onboarding.corners-firing .cnr-bl { animation-delay: 0.12s; } .onboarding.corners-firing .cnr-br { animation-delay: 0.18s; } @keyframes cnr-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } /* pitch lines pick up team color once chosen */ .onboarding.has-team .onb-pitch { background: linear-gradient(90deg, transparent calc(50% - 80px), color-mix(in srgb, var(--team-primary) 22%, transparent) calc(50% - 80px), color-mix(in srgb, var(--team-primary) 22%, transparent) calc(50% - 79px), transparent calc(50% - 79px)), linear-gradient(90deg, transparent calc(50% + 79px), color-mix(in srgb, var(--team-primary) 22%, transparent) calc(50% + 79px), color-mix(in srgb, var(--team-primary) 22%, transparent) calc(50% + 80px), transparent calc(50% + 80px)), radial-gradient(ellipse 55% 35% at 50% 102%, rgba(14,13,11,0.07), transparent 70%), radial-gradient(ellipse 75% 45% at 50% -2%, rgba(245,238,218,0.55), transparent 70%); transition: background 0.9s var(--ease-out); } /* --- broadcast strip — editorial paper band, matches dashboard masthead --- */ .onb-topstrip { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 14px 28px 10px; background: var(--paper-2); color: var(--ink); font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; text-transform: none; animation: onb-ts-in 0.7s var(--ease-out) 0.05s both; overflow: visible; } .onb-topstrip::after { content: ''; position: absolute; left: 28px; right: 28px; bottom: -3px; height: 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: transparent; pointer-events: none; } .onboarding.has-team .onb-topstrip::after { border-top-color: color-mix(in srgb, var(--team-primary) 45%, var(--ink)); border-bottom-color: color-mix(in srgb, var(--team-primary) 45%, var(--ink)); } .onb-ts-left, .onb-ts-mid, .onb-ts-right { position: relative; z-index: 1; display: inline-flex; align-items: center; } .onb-ts-left { justify-content: flex-start; gap: 10px; } .onb-ts-right { justify-content: flex-end; gap: 10px; } .onb-ts-crest { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--canvas); border-radius: 2px; flex: 0 0 auto; transition: background 0.6s var(--ease-out); } .onboarding.has-team .onb-ts-crest { background: var(--team-primary); } .onb-ts-crest .crest { width: 11px; height: 11px; } .onb-ts-label { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0.05em; line-height: 1; color: var(--ink); text-transform: uppercase; } .onb-ts-mid { text-align: center; justify-self: center; font-family: var(--font-editorial); font-style: italic; font-size: 15px; color: var(--ink-3); letter-spacing: 0; text-transform: none; } .onb-ts-mid em { font-family: var(--font-score); font-style: normal; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; font-size: 12px; padding: 0 2px; } .onb-ts-gate { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-3); font-family: var(--font-headline); font-weight: 700; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; } .onb-ts-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; animation: onb-ts-pulse 1.8s ease-out infinite; } @keyframes onb-ts-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.8); } } @keyframes onb-ts-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } } @keyframes onb-ts-sweep { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } } /* --- ambient motion — diagonal speed lines drifting through the stage --- */ .onb-motion { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; mix-blend-mode: multiply; } .onb-speed { position: absolute; height: 1px; left: -40%; width: 55%; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--brand) 28%, transparent) 50%, transparent 100%); transform: rotate(-18deg); opacity: 0; transition: background 0.9s var(--ease-out); } .onboarding.has-team .onb-speed { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--team-primary) 38%, transparent) 50%, transparent 100%); } .onb-speed.sl-1 { top: 22%; animation: onb-speed-drift 7s linear infinite 0s; } .onb-speed.sl-2 { top: 54%; animation: onb-speed-drift 9s linear infinite 2.2s; } .onb-speed.sl-3 { top: 78%; animation: onb-speed-drift 8s linear infinite 4.1s; } @keyframes onb-speed-drift { 0% { transform: translateX(0) rotate(-18deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(240%) rotate(-18deg); opacity: 0; } } /* --- scanline + radar ring — step-2 ambient motion --- */ .onb-scanline { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease-out); overflow: hidden; } .onb-scanline::before { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--brand) 22%, transparent) 50%, transparent 100%); top: -2px; animation: onb-scan 7s linear infinite; } .onboarding.step-2-active .onb-scanline { opacity: 1; } .onboarding.has-team .onb-scanline::before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--team-primary) 30%, transparent) 50%, transparent 100%); } @keyframes onb-scan { 0% { top: -2px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } } .onb-radar { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease-out); } .onboarding.step-2-active .onb-radar { opacity: 1; } .rr-ring { position: absolute; left: 50%; top: 50%; border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; } .onboarding.has-team .rr-ring { border-color: color-mix(in srgb, var(--team-primary) 26%, transparent); } .onboarding.step-2-active .rr-ring.rr-1 { animation: rr-pulse 5s ease-out infinite 0s; } .onboarding.step-2-active .rr-ring.rr-2 { animation: rr-pulse 5s ease-out infinite 1.6s; } .onboarding.step-2-active .rr-ring.rr-3 { animation: rr-pulse 5s ease-out infinite 3.2s; } @keyframes rr-pulse { 0% { width: 80px; height: 80px; opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 100% { width: 80px; height: 80px; opacity: 0; transform: translate(-50%, -50%) scale(14); } } /* --- side chrome — visible on step 1 only, hidden on mobile --- */ .onb-side { position: absolute; top: 92px; bottom: 72px; width: 200px; z-index: 4; pointer-events: none; display: flex; opacity: 0; transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); } .onb-side-left { left: 0; justify-content: flex-start; padding-left: 28px; flex-direction: column; align-items: flex-start; justify-content: space-between; transform: translateX(-20px); } .onb-side-right { right: 0; justify-content: flex-end; padding-right: 28px; flex-direction: column; align-items: flex-end; justify-content: center; transform: translateX(20px); } .onboarding.step-1-active .onb-side { opacity: 1; transform: none; transition-delay: 0.3s; } .onb-rail-text { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.42em; color: var(--ink-3); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; opacity: 0.75; } .onb-rail-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; background: var(--ink); color: var(--canvas); font-family: var(--font-headline); font-weight: 700; font-size: 9.5px; letter-spacing: 0.3em; border-radius: 2px; box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--ink) 60%, transparent); writing-mode: horizontal-tb; } .rc-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 0 rgba(255,59,48,0.55); animation: onb-ts-pulse 1.4s ease-out infinite; } .onb-rail-card { width: 230px; padding: 18px 18px 16px; background: var(--ink); color: var(--canvas); border-radius: 3px; font-family: var(--font-headline); position: relative; overflow: hidden; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--canvas) 12%, transparent), 0 24px 50px -20px color-mix(in srgb, var(--ink) 60%, transparent); transform: rotate(-2deg); animation: onb-card-float 6s ease-in-out infinite; } .onb-rail-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 40%, transparent) 100%); } .onb-rc-head { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: 0.22em; color: color-mix(in srgb, var(--canvas) 65%, transparent); margin-bottom: 14px; text-transform: uppercase; } .onb-rc-label { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 700; } .onb-rc-label .crest { width: 11px; height: 11px; } .onb-rc-serial { font-family: var(--font-score); font-weight: 600; font-size: 10px; letter-spacing: 0.12em; color: color-mix(in srgb, var(--canvas) 72%, transparent); } .onb-rc-name { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; color: var(--canvas); margin-bottom: 10px; min-height: 28px; word-break: break-word; } .onb-rc-meta { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: 0.28em; color: color-mix(in srgb, var(--canvas) 55%, transparent); text-transform: uppercase; margin-bottom: 12px; } .onb-rc-sep { width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--canvas) 40%, transparent); display: inline-block; } .onb-rc-strap { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--canvas) 18%, transparent); font-size: 8.5px; letter-spacing: 0.24em; color: color-mix(in srgb, var(--canvas) 78%, transparent); } @keyframes onb-card-float { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-1.5deg) translateY(-6px); } } /* --- bottom status strip — 'NEXT UP' live widget on step 1 --- */ .onb-bottom-strip { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(12px); z-index: 5; display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 999px; font-family: var(--font-headline); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--ink) 35%, transparent); opacity: 0; transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); } .onboarding.step-1-active .onb-bottom-strip { opacity: 1; transform: translateX(-50%) translateY(0); transition-delay: 0.5s; } .obs-mark { display: inline-flex; width: 14px; height: 14px; color: var(--brand); } .obs-mark .crest { width: 14px; height: 14px; } .obs-loud { color: var(--brand); font-weight: 800; letter-spacing: 0.3em; } .obs-sep { color: color-mix(in srgb, var(--ink) 22%, transparent); font-size: 8px; } .obs-text { color: var(--ink); font-weight: 600; } @media (max-width: 1180px) { .onb-side { width: 170px; } .onb-rail-card { width: 190px; padding: 14px; } .onb-rc-name { font-size: 22px; } } @media (max-width: 960px) { .onb-side, .onb-bottom-strip { display: none; } } /* --- stage & step container --- */ .onb-stage { position: relative; z-index: 3; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; /* `safe center` keeps short content centered, but falls back to flex-start when content overflows, so the first rows never get clipped on mobile. */ justify-content: safe center; padding: 84px 44px 56px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .onb-stage > .onb-step { flex-shrink: 0; } .onb-step { position: relative; width: 100%; max-width: 780px; text-align: center; animation: step-in 0.6s var(--ease-out) both; } .onb-step[data-step="2"] { max-width: 1240px; } .onb-step[data-step="3"] { max-width: 720px; } @keyframes step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ---------- STEP 1 : the IPL logo is the hero ---------- */ .onb-hero-logo { position: relative; width: clamp(180px, 20vw, 260px); margin: 0 auto 28px; display: flex; justify-content: center; animation: hero-logo-in 1.1s var(--ease-out) 0.05s both; } .onb-hero-logo::before, .onb-hero-logo::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent); transform: translate(-50%, -50%) scale(1); pointer-events: none; transition: border-color 0.6s var(--ease-out); } .onb-hero-logo::before { width: 160%; height: 260%; animation: hero-halo 4.2s ease-in-out infinite; } .onb-hero-logo::after { width: 210%; height: 340%; opacity: 0.4; animation: hero-halo 5s ease-in-out infinite 0.7s; } .onboarding.has-team .onb-hero-logo::before, .onboarding.has-team .onb-hero-logo::after { border-color: color-mix(in srgb, var(--team-primary) 42%, transparent); } @keyframes hero-halo { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.15; } } .onb-hero-logo svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; fill: var(--brand); filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--brand) 40%, transparent)); transition: fill 0.6s var(--ease-out), filter 0.6s var(--ease-out); } .onboarding.has-team .onb-hero-logo svg { fill: var(--team-primary); filter: drop-shadow(0 14px 40px color-mix(in srgb, var(--team-primary) 52%, transparent)); } @keyframes hero-logo-in { from { opacity: 0; transform: translateY(-12px) scale(0.92); } to { opacity: 1; transform: none; } } /* ---------- STEP 2 : compact header, grid-led ---------- */ .onb-step2-head { max-width: 780px; margin: 0 auto 6px; } .onb-mini-logo { width: clamp(58px, 6vw, 76px); margin: 0 auto 14px; display: flex; justify-content: center; animation: hero-logo-in 0.9s var(--ease-out) 0.05s both; } .onb-mini-logo svg { width: 100%; height: auto; fill: var(--brand); transition: fill 0.6s var(--ease-out); } .onboarding.has-team .onb-mini-logo svg { fill: var(--team-primary); } .onb-step2-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-headline); font-weight: 800; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; animation: eyebrow-in 0.7s var(--ease-out) 0.15s both; } /* ---------- shared bits ---------- */ .onb-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-headline); font-weight: 800; font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; animation: eyebrow-in 0.7s var(--ease-out) 0.1s both; } .eb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand); transition: background 0.6s var(--ease-out); } .onboarding.has-team .eb-dot { background: var(--team-primary); } @keyframes eyebrow-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .onb-headline { font-family: var(--font-display); font-size: clamp(40px, 5.2vw, 76px); line-height: 1; letter-spacing: 0.015em; color: var(--ink); margin: 0 0 18px; text-transform: uppercase; } .onb-h2 { font-size: clamp(36px, 4.4vw, 64px); } .onb-headline .hl-word { display: inline-block; margin: 0 0.1em; opacity: 0; transform: translateY(14px); animation: hl-word-in 0.7s var(--ease-out) forwards; } .onb-headline .hl-word:nth-child(1) { animation-delay: 0.15s; } .onb-headline .hl-word:nth-child(2) { animation-delay: 0.22s; } .onb-headline .hl-word:nth-child(3) { animation-delay: 0.29s; } .onb-headline .hl-word:nth-child(4) { animation-delay: 0.36s; } .onb-headline .hl-word:nth-child(5) { animation-delay: 0.43s; } .onb-headline .hl-word:nth-child(6) { animation-delay: 0.50s; } .onb-headline .hl-word:nth-child(7) { animation-delay: 0.57s; } @keyframes hl-word-in { to { opacity: 1; transform: none; } } .onb-headline .hl-accent { color: var(--team-ink); transition: color 0.6s var(--ease-out); position: relative; } .onboarding:not(.has-team) .onb-headline .hl-accent { color: var(--brand); } .onb-headline .hl-accent::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -0.08em; height: 0.08em; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: left center; animation: hl-underline 0.8s var(--ease-out) 0.9s forwards; } @keyframes hl-underline { to { transform: scaleX(1); } } .onb-subheadline { font-family: var(--font-body); font-weight: 500; font-size: clamp(14px, 1.15vw, 17px); color: var(--ink-3); margin: 0 auto 32px; max-width: 540px; line-height: 1.6; opacity: 0; animation: sub-in 0.7s var(--ease-out) 0.55s forwards; } @keyframes sub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- Step 1: name input ---------- */ .onb-input-wrap { max-width: 520px; margin: 8px auto 32px; position: relative; opacity: 0; animation: sub-in 0.7s var(--ease-out) 0.7s forwards; } .onb-input { width: 100%; background: transparent; border: none; border-bottom: 2px solid var(--rule-strong); color: var(--ink); padding: 10px 8px; font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 46px); font-weight: 400; letter-spacing: 0.04em; text-align: center; text-transform: uppercase; transition: border-color 0.3s var(--ease-out); border-radius: 0; } .onb-input::placeholder { color: var(--ink-4); font-family: var(--font-display); letter-spacing: 0.04em; font-weight: 400; } .onb-input:focus { outline: none; box-shadow: none; } .onb-input-wrap::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--brand); transition: width 0.55s var(--ease-out), background 0.6s var(--ease-out); } .onboarding.has-team .onb-input-wrap::after { background: var(--team-primary); } .onb-input-wrap:focus-within::after { width: 100%; } /* fan credit at bottom of screen 1 */ .onb-fancredit { margin: 40px auto 0; max-width: 640px; font-family: var(--font-headline); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); opacity: 0; animation: sub-in 0.9s var(--ease-out) 1s forwards; } .onb-fancredit::before, .onb-fancredit::after { content: '✦'; margin: 0 12px; font-size: 14px; color: color-mix(in srgb, var(--brand) 55%, var(--ink-3)); } .onboarding.has-team .onb-fancredit::before, .onboarding.has-team .onb-fancredit::after { color: color-mix(in srgb, var(--team-primary) 55%, var(--ink-4)); } /* ---------- Step 2: team grid ---------- */ .onb-teams { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 20px 0 18px; } @media (max-width: 1100px) { .onb-teams { grid-template-columns: repeat(5, 1fr); gap: 10px; } } @media (max-width: 760px) { .onb-teams { grid-template-columns: repeat(3, 1fr); gap: 10px; } } @media (max-width: 480px) { .onb-teams { grid-template-columns: repeat(2, 1fr); gap: 9px; } } .onb-team { --tile-color: var(--brand); position: relative; aspect-ratio: 3 / 4; border: 1.5px solid var(--rule); background: rgba(251,245,225,0.72); backdrop-filter: blur(8px); border-radius: 14px; padding: 16px 12px 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: transform 0.38s var(--ease-out), border-color 0.38s var(--ease-out), background 0.38s var(--ease-out), box-shadow 0.38s var(--ease-out); overflow: hidden; isolation: isolate; opacity: 0; transform: translateY(14px); animation: team-in 0.55s var(--ease-out) forwards; } .onb-team:nth-child(1) { animation-delay: 0.05s; } .onb-team:nth-child(2) { animation-delay: 0.09s; } .onb-team:nth-child(3) { animation-delay: 0.13s; } .onb-team:nth-child(4) { animation-delay: 0.17s; } .onb-team:nth-child(5) { animation-delay: 0.21s; } .onb-team:nth-child(6) { animation-delay: 0.25s; } .onb-team:nth-child(7) { animation-delay: 0.29s; } .onb-team:nth-child(8) { animation-delay: 0.33s; } .onb-team:nth-child(9) { animation-delay: 0.37s; } .onb-team:nth-child(10) { animation-delay: 0.41s; } @keyframes team-in { to { opacity: 1; transform: none; } } .onb-team::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 72% at 50% 0%, var(--tile-color) 0%, transparent 62%); opacity: 0; transition: opacity 0.4s var(--ease-out); z-index: -1; } .onb-team::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tile-color); transform: scaleX(0); transform-origin: left center; transition: transform 0.45s var(--ease-out); } .onb-team img { width: 68%; flex: 1 1 auto; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(14,13,11,0.14)); transition: transform 0.45s var(--ease-out), filter 0.45s var(--ease-out); margin-top: 4%; } .onb-team-label { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: auto; } .onb-team-name { font-family: var(--font-display); font-size: clamp(15px, 1.3vw, 19px); letter-spacing: 0.05em; color: var(--ink); text-transform: uppercase; line-height: 1; } .onb-team-sub { font-family: var(--font-headline); font-weight: 700; font-size: 8.5px; letter-spacing: 0.22em; color: var(--ink-4); text-transform: uppercase; transition: color 0.3s var(--ease-out); } .onb-team:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tile-color) 65%, transparent); box-shadow: 0 22px 40px -18px color-mix(in srgb, var(--tile-color) 55%, transparent); } .onb-team:hover::before { opacity: 0.16; } .onb-team:hover::after { transform: scaleX(1); } .onb-team:hover img { transform: scale(1.05) rotate(-1.5deg); } .onb-team:hover .onb-team-sub { color: color-mix(in srgb, var(--tile-color) 65%, #000); } .onb-team.selected { border-color: var(--tile-color); background: color-mix(in srgb, var(--tile-color) 14%, rgba(251,245,225,0.92)); transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile-color) 45%, transparent), 0 32px 60px -16px color-mix(in srgb, var(--tile-color) 70%, transparent); transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1), border-color 0.35s var(--ease-out), background 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); z-index: 2; } .onb-team.selected::before { opacity: 0.28; } .onb-team.selected::after { transform: scaleX(1); height: 5px; } .onb-team.selected img { transform: scale(1.1); filter: drop-shadow(0 18px 30px color-mix(in srgb, var(--tile-color) 55%, transparent)); } .onb-team.selected .onb-team-sub { color: color-mix(in srgb, var(--tile-color) 75%, #000); } /* Prior-team marker — shown on Switch Team so user sees where they came from. Dashed team-colour border + soft tint. Reverts to solid once a new team is selected (the .selected class wins). */ .onb-team.is-prior:not(.selected) { border-color: color-mix(in srgb, var(--tile-color) 65%, transparent); border-style: dashed; background: color-mix(in srgb, var(--tile-color) 6%, rgba(251,245,225,0.92)); } .onb-team.is-prior .onb-team-sub::before { content: 'currently · '; font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; opacity: 0.78; } .onb-team.is-prior.selected .onb-team-sub::before { content: none; } /* When the world is themed to a team, non-selected tiles recede */ .onboarding.has-team .onb-team:not(.selected) { opacity: 0.48; filter: saturate(0.55); transition: opacity 0.6s var(--ease-out), filter 0.6s var(--ease-out), transform 0.38s var(--ease-out), border-color 0.38s var(--ease-out), box-shadow 0.38s var(--ease-out); } .onboarding.has-team .onb-team:not(.selected):hover { opacity: 0.9; filter: saturate(0.85); } /* moniker callout under grid */ .onb-callout { min-height: 48px; display: flex; align-items: center; justify-content: center; margin: 4px 0 14px; } .onb-callout-text { font-family: var(--font-editorial); font-weight: 400; font-style: italic; font-size: clamp(28px, 3.4vw, 44px); color: var(--team-ink); letter-spacing: -0.005em; text-transform: none; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.6s var(--ease-out); line-height: 1.05; } .onb-callout-text.show { opacity: 1; transform: none; text-shadow: 0 0 28px color-mix(in srgb, var(--team-primary) 35%, transparent); animation: callout-stamp 0.55s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes callout-stamp { 0% { opacity: 0; transform: translateY(12px) scale(0.94); letter-spacing: 0.04em; } 60% { opacity: 1; transform: translateY(-2px) scale(1.02); letter-spacing: -0.005em; } 100% { opacity: 1; transform: none; letter-spacing: -0.005em; } } /* Stats strap — 3–4 facts stamped in sequence under the callout. Readable first, decorative second. Space Grotesk 600, generous size. */ .onb-stats-strap { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px auto 24px; min-height: 26px; max-width: 880px; font-family: var(--font-headline); font-weight: 600; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--team-ink); opacity: 0; transition: opacity 0.4s var(--ease-out); } .onb-stats-strap.show { opacity: 1; } .onb-stats-strap .stamp-fact { display: inline-block; opacity: 0; transform: translateY(6px); animation: stamp-in 0.55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(0.55s + var(--i) * 0.14s); padding: 7px 14px; border: 1px solid color-mix(in srgb, var(--team-primary) 40%, transparent); background: color-mix(in srgb, var(--team-primary) 8%, rgba(251,245,225,0.72)); backdrop-filter: blur(3px); border-radius: 2px; color: color-mix(in srgb, var(--team-primary) 85%, #000); } .onb-stats-strap .stamp-sep { color: color-mix(in srgb, var(--team-primary) 50%, transparent); font-size: 7px; transform: translateY(-1px); opacity: 0; animation: stamp-fade 0.5s var(--ease-out) 0.8s forwards; } @keyframes stamp-in { 0% { opacity: 0; transform: translateY(10px) scale(0.92); letter-spacing: 0.06em; } 60% { opacity: 1; transform: translateY(-1px) scale(1.02); } 100% { opacity: 1; transform: none; letter-spacing: 0.16em; } } @keyframes stamp-fade { to { opacity: 0.7; } } @media (max-width: 760px) { .onb-stats-strap { gap: 7px; font-size: 11px; letter-spacing: 0.12em; min-height: 22px; } .onb-stats-strap .stamp-fact { padding: 5px 10px; } .onb-stats-strap .stamp-sep { display: none; } } /* CTA gets a team-color halo once a team is locked in */ .onboarding.has-team .onb-step[data-step="2"] .onb-btn:not(:disabled) { background: var(--team-primary); color: #fff; border-color: color-mix(in srgb, var(--team-primary) 70%, #000); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent), 0 22px 44px -18px color-mix(in srgb, var(--team-primary) 75%, transparent); } .onboarding.has-team .onb-step[data-step="2"] .onb-btn:not(:disabled):hover { background: var(--team-ink); border-color: var(--team-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent), 0 26px 54px -18px color-mix(in srgb, var(--team-primary) 90%, transparent); } .onboarding.has-team .onb-step[data-step="2"] .onb-btn:not(:disabled) .btn-rule { background: rgba(255,255,255,0.3); } /* CTA pulse — draws the eye once the team is locked in. */ .onboarding.has-team .onb-step[data-step="2"] .onb-btn:not(:disabled)::before { content: ''; position: absolute; inset: -2px; border-radius: 3px; pointer-events: none; border: 1px solid color-mix(in srgb, var(--team-primary) 55%, transparent); animation: cta-pulse 2.2s var(--ease-out) infinite; } @keyframes cta-pulse { 0% { opacity: 0.9; transform: scale(1); } 70% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.08); } } /* ---------- Onboarding responsive polish ---------- */ @media (max-width: 760px) { .onb-stage { padding: 68px 20px 40px; } .onb-topstrip { padding: 10px 14px 8px; gap: 10px; grid-template-columns: 1fr auto; } .onb-topstrip::after { left: 14px; right: 14px; } .onb-topstrip .onb-ts-mid { display: none; } .onb-ts-label { font-size: 18px; letter-spacing: 0.05em; } .onb-ts-crest { width: 16px; height: 16px; } .onb-ts-crest .crest { width: 10px; height: 10px; } .onb-ts-gate { font-size: 9px; letter-spacing: 0.22em; } .onb-hero-logo { margin-bottom: 20px; } .onb-subheadline { margin-bottom: 24px; } .onb-fancredit { margin-top: 30px; font-size: 11.5px; letter-spacing: 0.14em; } .onb-fancredit::before, .onb-fancredit::after { margin: 0 8px; font-size: 13px; } .onb-step2-head { margin-bottom: 2px; } .onb-mini-logo { margin-bottom: 10px; } } @media (max-width: 480px) { .onb-stage { padding: 60px 16px 32px; } .onb-topstrip { padding: 9px 12px 7px; } .onb-topstrip::after { left: 12px; right: 12px; } .onb-ts-label { font-size: 16px; } .onb-headline { margin-bottom: 14px; } .onb-input-wrap { margin-bottom: 24px; } .onb-callout { min-height: 40px; } } /* ========================================================== STEP 3 — the Pass stub Restrained on team colour; lets paper + ink do the heavy lifting. Team colour shows up only at: top stamp, a hairline on the identity block, the perforation diamond, and the CTA. ========================================================== */ .onb-pass-card { position: relative; max-width: 620px; margin: 0 auto; padding: 36px 48px 34px; text-align: left; background: linear-gradient(180deg, rgba(252,247,230,0.98) 0%, rgba(248,241,218,0.96) 100%); border: 1px solid var(--rule-strong); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 30px 70px -28px rgba(14,13,11,0.4), 0 8px 24px -14px rgba(14,13,11,0.15), 0 0 0 6px color-mix(in srgb, var(--team-primary) 8%, transparent); backdrop-filter: blur(8px); animation: step-in 0.6s var(--ease-out) both; overflow: hidden; } .onb-pass-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--team-primary) 0%, color-mix(in srgb, var(--team-primary) 60%, var(--team-secondary, var(--ink))) 50%, var(--team-primary) 100%); transition: background 0.6s var(--ease-out); } .onb-pass-card::after { content: ""; position: absolute; top: -40%; right: -20%; width: 60%; height: 120%; background: radial-gradient(ellipse, color-mix(in srgb, var(--team-primary) 14%, transparent) 0%, transparent 70%); pointer-events: none; transition: background 0.6s var(--ease-out); } /* ticket-edge notches */ .onb-pass-notch { position: absolute; top: 50%; width: 22px; height: 22px; background: var(--canvas); border: 1px solid var(--rule-strong); border-radius: 50%; transform: translateY(-50%); } .onb-pass-notch-l { left: -12px; } .onb-pass-notch-r { right: -12px; } /* On step 3 the team watermark fades back — we're in a quiet moment now. Set via the .step-3-active class toggled in JS. */ .onboarding.step-3-active .onb-team-watermark { opacity: 0.14; } /* ---- Top strip: season stamp + pass serial ---- */ .pass-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); position: relative; } .pass-top::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 88px; background: linear-gradient(90deg, var(--team-primary) 0%, color-mix(in srgb, var(--team-primary) 30%, transparent) 100%); transition: background 0.6s var(--ease-out); } .pass-top-mark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-headline); font-weight: 600; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .pass-top-mark::before { content: ''; width: 9px; height: 9px; background: var(--team-primary); display: inline-block; margin-right: 4px; transform: rotate(45deg); box-shadow: 0 0 12px color-mix(in srgb, var(--team-primary) 55%, transparent); transition: background 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); } .pass-top-dot { color: var(--ink-4); } .pass-top-serial { font-family: var(--font-score); font-weight: 600; font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.08em; } /* ---- Identity block ---- */ .pass-identity { margin-bottom: 24px; } .pass-identity-label { font-family: var(--font-headline); font-weight: 500; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; } .pass-identity-name { font-family: var(--font-editorial); font-weight: 400; font-style: italic; font-size: clamp(40px, 5.2vw, 62px); line-height: 1; color: var(--ink); margin-bottom: 18px; letter-spacing: -0.01em; word-break: break-word; } .pass-identity-team { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: color-mix(in srgb, var(--team-primary) 8%, transparent); border-left: 3px solid var(--team-primary); border-radius: 0 4px 4px 0; transition: background 0.6s var(--ease-out), border-color 0.6s var(--ease-out); } .pass-team-logo { width: 44px; height: 44px; object-fit: contain; padding: 4px; background: color-mix(in srgb, var(--team-primary) 10%, transparent); border-radius: 50%; filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--team-primary) 35%, transparent)); flex: 0 0 auto; transition: background 0.6s var(--ease-out), filter 0.6s var(--ease-out); } .pass-identity-team-text { display: flex; flex-direction: column; gap: 2px; } .pass-team-moniker { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--team-ink); transition: color 0.6s var(--ease-out); } .pass-team-name { font-family: var(--font-body); font-size: 12px; color: var(--ink-3); letter-spacing: 0.02em; } /* ---- Perforated divider ---- */ .pass-perf { display: flex; align-items: center; gap: 8px; margin: 4px 0 24px; } .pass-perf-dot { width: 5px; height: 5px; background: var(--ink-4); border-radius: 50%; } .pass-perf-line { flex: 1 1 auto; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-4) 0 3px, transparent 3px 8px); opacity: 0.55; } .pass-perf-diamond { color: var(--team-primary); display: inline-flex; align-items: center; } .pass-perf-diamond .crest { width: 14px; height: 14px; } /* ---- Choice block ---- */ .pass-choice-eyebrow { font-family: var(--font-headline); font-weight: 500; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px; } .pass-choice-headline { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: 1; color: var(--ink); margin: 0 0 22px; letter-spacing: 0.01em; text-transform: uppercase; } .pass-choice-headline em { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: 1.06em; letter-spacing: -0.01em; text-transform: none; color: var(--team-primary); } /* ---- Input ---- */ .pass-input-wrap { margin-bottom: 22px; } .pass-input-label { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-headline); font-weight: 500; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .pass-input-optional { font-weight: 500; font-size: 9.5px; letter-spacing: 0.22em; color: var(--ink-4); padding: 2px 7px; border: 1px solid var(--rule-strong); border-radius: 2px; } .pass-input { width: 100%; display: block; background: rgba(251,245,225,0.6); border: none; border-bottom: 1.5px solid var(--rule-strong); color: var(--ink); padding: 12px 2px; font-family: var(--font-score); font-size: 15px; font-weight: 500; letter-spacing: 0.02em; transition: border-color .25s var(--ease-out); text-align: left; border-radius: 0; } .pass-input::placeholder { color: var(--ink-4); font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 14px; } .pass-input:focus { outline: none; border-bottom-color: var(--team-primary); } .pass-input-help { margin: 10px 0 0; font-family: var(--font-body); font-size: 12.5px; line-height: 1.55; color: var(--ink-3); } .pass-input-help a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--team-primary) 60%, transparent); text-underline-offset: 2px; } .pass-input-help a:hover { text-decoration-color: var(--team-primary); } /* ---- Actions — primary lives on top, skip sits quietly under it ---- */ .onb-step[data-step="3"] .onb-actions { flex-direction: column; align-items: stretch; gap: 10px; } .onb-step[data-step="3"] .onb-actions .onb-btn { width: 100%; justify-content: center; } /* Step 3 Skip CTA — proper outlined button. Used to be borderless text, which made it read as an afterthought. Skip is a legitimate choice (~90% of visitors use the season snapshot), so the button gives it the same visual weight as "Enter the Pavilion" without competing in colour. */ .onb-step[data-step="3"] .onb-actions .onb-btn-ghost { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: transparent; color: var(--ink-2); letter-spacing: 0.22em; } .onb-step[data-step="3"] .onb-actions .onb-btn-ghost:hover:not(:disabled) { color: var(--ink); background: rgba(14, 13, 11, 0.04); border-color: color-mix(in srgb, var(--ink) 50%, transparent); } /* Primary CTA uses team colour here — the only strong team moment on the card. */ .onboarding.has-team .onb-step[data-step="3"] .onb-btn:not(.onb-btn-ghost) { background: var(--team-primary); color: #fff; border-color: color-mix(in srgb, var(--team-primary) 70%, #000); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 36px -18px color-mix(in srgb, var(--team-primary) 70%, transparent); } .onboarding.has-team .onb-step[data-step="3"] .onb-btn:not(.onb-btn-ghost):hover { background: var(--team-ink); border-color: var(--team-ink); } .pass-credit { margin-top: 22px; } /* Keep the old optional pill available in case it's referenced elsewhere */ .onb-optional { font-family: var(--font-headline); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; color: var(--ink-4); text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--rule-strong); border-radius: 2px; } /* ---- Responsive ---- */ @media (max-width: 560px) { .onb-pass-card { padding: 28px 22px 24px; } .onb-pass-notch { width: 16px; height: 16px; } .onb-pass-notch-l { left: -9px; } .onb-pass-notch-r { right: -9px; } .pass-top { flex-wrap: wrap; gap: 8px; } .pass-identity-name { font-size: 44px; } .pass-choice-headline { font-size: 32px; } } /* ---- Buttons — ticketed pass aesthetic: sharp corners, hairline inset, thin rule and chevron. No translateY bounce. ---- */ .onb-btn { display: inline-flex; align-items: center; gap: 16px; padding: 17px 28px 17px 30px; background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); border-radius: 3px; font-family: var(--font-headline); font-weight: 700; font-size: 11.5px; letter-spacing: 0.32em; text-transform: uppercase; cursor: pointer; transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); position: relative; overflow: hidden; opacity: 0; animation: sub-in 0.7s var(--ease-out) 0.85s forwards; box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 0 0 1px rgba(255,255,255,0.05), 0 14px 30px -18px rgba(14,13,11,0.45); } .onb-step[data-step="2"] .onb-btn, .onb-step[data-step="3"] .onb-btn { animation-delay: 0.4s; } .onb-btn > span:first-child { transform: translateY(0.5px); } .onb-btn .btn-rule { width: 22px; height: 1px; background: rgba(255,255,255,0.28); transition: width 0.35s var(--ease-out), background 0.35s var(--ease-out); display: inline-block; } .onb-btn .btn-arrow { font-size: 14px; font-weight: 500; letter-spacing: 0; transform: translateY(-0.5px); transition: transform 0.35s var(--ease-out); display: inline-block; } .onb-btn:hover:not(:disabled) { background: var(--team-primary); color: #fff; border-color: var(--team-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.08), 0 22px 46px -20px var(--team-glow); } .onb-btn:hover:not(:disabled) .btn-rule { width: 30px; background: rgba(255,255,255,0.55); } .onb-btn:hover:not(:disabled) .btn-arrow { transform: translate(4px, -0.5px); } .onboarding:not(.has-team) .onb-btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.08), 0 22px 46px -20px color-mix(in srgb, var(--brand) 55%, transparent); } .onb-btn:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; } .onb-btn:disabled .btn-rule { background: rgba(255,255,255,0.14); } /* Ghost variant — transparent, hairline outline, no arrow */ .onb-btn-ghost { background: transparent; color: var(--ink-3); border: 1px solid var(--rule-strong); box-shadow: none; } .onb-btn-ghost .btn-rule, .onb-btn-ghost .btn-arrow { display: none; } .onb-btn-ghost:hover:not(:disabled) { background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none; } .onboarding:not(.has-team) .onb-btn-ghost:hover:not(:disabled) { background: transparent; border-color: var(--ink); box-shadow: none; } .onb-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* Step 2 action row — Back on the left, primary "Lock it in" on the right. Both centred as a pair, primary keeps its original visual weight. */ .onb-actions-step2 { margin-top: 22px; align-items: stretch; } .onb-actions-step2 .onb-btn-ghost.onb-back { padding-left: 16px; padding-right: 18px; } .onb-actions-step2 .onb-btn-ghost .btn-arrow-back { display: inline-block; font-size: 20px; line-height: 1; margin-right: 4px; transform: translateY(-1px); } /* On very narrow screens, stack Back under the primary so they don't crush. */ @media (max-width: 420px) { .onb-actions-step2 { flex-direction: column-reverse; gap: 8px; } .onb-actions-step2 .onb-btn { width: 100%; } } /* ========================================================== TOAST ========================================================== */ .toast-container { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { background: var(--ink); color: var(--canvas); padding: 14px 22px 14px 18px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.12); border-left: 4px solid #34D399; font-family: var(--font-headline); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; box-shadow: 0 24px 50px -20px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 10px; animation: toast-in 0.35s var(--ease-out), toast-out 0.35s var(--ease-out) 4.5s forwards; pointer-events: auto; } .toast.toast-error { border-left-color: #F87171; } .toast-icon { color: #34D399; font-size: 14px; font-weight: 900; } .toast.toast-error .toast-icon { color: #F87171; } @keyframes toast-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(-14px); } } /* ========================================================== DASHBOARD CONTAINER ========================================================== */ .dashboard { max-width: 1160px; margin: 0 auto; padding: 28px 28px 80px; } /* ========================================================== MASTHEAD — editorial pass-stub hero Cream paper dominance. Team colour is a kiss, not a flood: only the top diamond, the perforation diamond, the moniker emphasis, and the hairline under the identity carry colour. ========================================================== */ .mast { position: relative; padding: 34px 48px 28px; background: linear-gradient(180deg, rgba(252,247,230,0.98) 0%, rgba(248,241,218,0.97) 100%); border: 1px solid var(--rule-strong); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 30px 70px -34px rgba(14,13,11,0.32), 0 8px 24px -18px rgba(14,13,11,0.12); overflow: visible; isolation: isolate; } /* ticket-edge notches, same as pass-stub */ .mast-notch { position: absolute; top: 50%; width: 22px; height: 22px; background: var(--canvas); border: 1px solid var(--rule-strong); border-radius: 50%; transform: translateY(-50%); z-index: 2; } .mast-notch-l { left: -12px; } .mast-notch-r { right: -12px; } /* ---- Top strip ---- */ .mast-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; margin-bottom: 22px; border-bottom: 1px solid var(--rule); } .mast-top-mark { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-headline); font-weight: 600; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .mast-top-diamond { color: var(--team-primary); display: inline-flex; align-items: center; margin-right: 6px; transition: color 0.6s var(--ease-out); } .mast-top-diamond .crest { width: 14px; height: 14px; } .mast-top-dot { color: var(--ink-4); } .mast-top-serial { font-family: var(--font-score); font-weight: 600; font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.08em; } /* ---- Identity ---- */ .mast-identity { margin-bottom: 2px; } .mast-id-eyebrow { font-family: var(--font-headline); font-weight: 500; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; } .mast-id-title { display: flex; align-items: center; gap: 22px; margin-bottom: 12px; } .mast-id-avatar { flex: 0 0 auto; width: clamp(68px, 7.5vw, 108px); height: clamp(68px, 7.5vw, 108px); border-radius: 50%; overflow: hidden; padding: 0; border: 3px solid var(--ink); background: var(--paper-2); cursor: pointer; box-shadow: 0 0 0 4px var(--team-primary), 0 12px 24px -14px rgba(14,13,11,0.25); transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out); } .mast-id-avatar[hidden] { display: none; } .mast-id-avatar:hover, .mast-id-avatar:focus-visible { transform: translateY(-1px) scale(1.02); outline: none; } .mast-id-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .mast-id-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 8vw, 104px); line-height: 0.92; color: var(--ink); margin: 0 0 12px; letter-spacing: 0.02em; text-transform: uppercase; word-break: break-word; position: relative; flex: 1 1 auto; min-width: 0; } .mast-id-title .mast-id-name { margin-bottom: 0; } .mast-id-name::after { content: ''; display: block; width: 56px; height: 4px; background: var(--team-primary); margin-top: 10px; border-radius: 2px; transition: background 0.6s var(--ease-out); } .mast-id-chant { font-family: var(--font-headline); font-weight: 600; font-size: clamp(12px, 1.2vw, 14px); color: var(--team-ink); margin-bottom: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: color 0.6s var(--ease-out); } .mast-id-dispatch { font-family: var(--font-editorial); font-style: italic; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.4; color: var(--ink-2); max-width: 46ch; margin-bottom: 24px; letter-spacing: 0; } .mast-id-dispatch::before { content: '— '; color: var(--ink-4); font-style: normal; margin-right: 2px; } .mast-id-anchor { display: flex; align-items: center; gap: 16px; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--team-primary) 55%, transparent); transition: border-color 0.6s var(--ease-out); } .mast-team-logo { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(14,13,11,0.14)); flex: 0 0 auto; } .mast-team-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; } .mast-team-moniker { font-family: var(--font-headline); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .mast-team-moniker em { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin-left: 6px; font-style: normal; } .mast-team-meta { font-family: var(--font-body); font-size: 13px; color: var(--ink-3); letter-spacing: 0.01em; line-height: 1.4; } .mast-team-meta-sep { color: var(--ink-4); margin: 0 6px; } /* Switch-team — quiet ghost link on the right of the anchor */ .mast-switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-3); padding: 7px 12px; border-radius: 2px; font-family: var(--font-headline); font-weight: 500; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: border-color .2s var(--ease-out), color .2s var(--ease-out); } .mast-switch-arrow { font-size: 11px; } .mast-switch:hover { border-color: var(--ink); color: var(--ink); } /* ---- Perforated divider ---- */ .mast-perf { display: flex; align-items: center; gap: 8px; margin: 22px 0 18px; } .mast-perf-dot { width: 5px; height: 5px; background: var(--ink-4); border-radius: 50%; } .mast-perf-line { flex: 1 1 auto; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-4) 0 3px, transparent 3px 8px); opacity: 0.55; } .mast-perf-diamond { color: var(--team-primary); display: inline-flex; align-items: center; transition: color 0.6s var(--ease-out); } .mast-perf-diamond .crest { width: 16px; height: 16px; } /* ---- Dateline (subsumes old .data-status) ---- */ .mast-dateline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-family: var(--font-headline); font-weight: 500; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; } .mast-dateline-day { font-family: var(--font-display); font-weight: 400; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .mast-dateline-date { color: var(--ink-2); } .mast-dateline-sep { color: var(--ink-4); } .mast-dateline-rule { flex: 1 1 60px; height: 1px; background: var(--rule); min-width: 30px; } .mast-dateline-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-score); font-size: 10px; letter-spacing: 0.08em; text-transform: none; color: var(--ink-3); } .mast-dateline-status .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); } .mast-dateline.live .mast-dateline-status .dot { background: var(--team-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-primary) 18%, transparent); animation: cd-pulse 2s ease-in-out infinite; transition: background 0.6s var(--ease-out); } .mast-dateline.snapshot .mast-dateline-status .dot { background: var(--ink-4); } .ds-retry { background: transparent; border: 0; padding: 0 0 1px; margin: 0 0 0 2px; font: inherit; color: var(--team-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; transition: color 0.18s var(--ease-out); } .ds-retry:hover, .ds-retry:focus-visible { color: var(--team-primary); outline: none; text-decoration-thickness: 1.5px; } .mast-dateline-tag { font-family: var(--font-headline); font-weight: 600; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--team-ink); transition: color 0.6s var(--ease-out); } /* legacy classes still referenced by JS — kept no-op so nothing errors */ .hero-bg, .hero-logo { display: none; } /* masthead mobile rules moved to main responsive block below */ /* ========================================================== MATCHDAY — editorial "Your Next Match" card on paper ========================================================== */ .matchday { margin-top: 18px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; padding: 22px 30px; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow-paper); position: relative; isolation: isolate; } .matchday::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: var(--team-primary); transition: background 0.6s var(--ease-out); } .md-left, .md-right { display: flex; flex-direction: column; gap: 4px; } .md-right { text-align: right; } .md-label, .md-venue-label { font-family: var(--font-headline); font-weight: 700; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--team-ink); margin-bottom: 4px; transition: color 0.6s var(--ease-out); } .md-date { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: 0.02em; color: var(--ink); text-transform: uppercase; } .md-round { font-family: var(--font-headline); font-weight: 600; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; } .md-mid { display: flex; align-items: center; gap: 22px; } .md-team { display: flex; flex-direction: column; align-items: center; gap: 6px; } .md-team img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(14,13,11,0.14)); } .md-code { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.08em; color: var(--ink); } .md-vs { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: 0.08em; color: var(--team-primary); text-transform: uppercase; padding: 4px 10px; border-top: 1px solid var(--team-primary); border-bottom: 1px solid var(--team-primary); transition: color 0.6s var(--ease-out), border-color 0.6s var(--ease-out); } .md-venue { font-family: var(--font-body); font-weight: 500; font-size: 13.5px; color: var(--ink-2); letter-spacing: 0.01em; max-width: 240px; margin-left: auto; line-height: 1.4; } .md-time { font-family: var(--font-score); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-2); margin-top: 6px; text-transform: uppercase; } @media (max-width: 760px) { .matchday { grid-template-columns: 1fr; text-align: center; gap: 16px; padding: 18px 20px; } .md-right { text-align: center; } .md-venue { margin: 0 auto; max-width: 100%; } .md-left, .md-right { align-items: center; } .md-mid { justify-content: center; } } /* ========================================================== COUNTDOWN — editorial, tabular digits on paper ========================================================== */ .countdown { margin-top: 12px; padding: 32px 32px 28px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow-paper); text-align: center; position: relative; } .cd-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-headline); font-weight: 500; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; position: relative; z-index: 1; } .cd-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--team-primary); box-shadow: 0 0 0 4px var(--team-glow-soft); animation: cd-pulse 1.8s ease-in-out infinite; transition: background 0.6s var(--ease-out); } @keyframes cd-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px var(--team-glow-soft); } 50% { transform: scale(1.3); box-shadow: 0 0 0 8px transparent; } } .cd-digits { display: flex; justify-content: center; align-items: baseline; gap: 10px; position: relative; z-index: 1; } .cd-unit { display: flex; flex-direction: column; align-items: center; } .cd-num { font-family: var(--font-display); font-size: clamp(64px, 9vw, 104px); line-height: 0.9; color: var(--ink); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; min-width: 0.75em; text-align: center; transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .cd-num.flip { animation: cd-flip 0.35s var(--ease-out); } @keyframes cd-flip { 0% { transform: translateY(0); opacity: 1; } 40% { transform: translateY(-8px); opacity: 0.3; } 60% { transform: translateY(8px); opacity: 0.3; } 100% { transform: translateY(0); opacity: 1; } } .cd-suffix { font-family: var(--font-headline); font-weight: 500; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-4); margin-top: 8px; } .cd-colon { font-family: var(--font-display); font-size: clamp(44px, 7vw, 72px); color: color-mix(in srgb, var(--team-primary) 80%, var(--ink-4)); line-height: 0.9; padding: 0 4px; transform: translateY(-8%); animation: cd-blink 1s ease-in-out infinite; transition: color 0.6s var(--ease-out); } @keyframes cd-blink { 0%, 45%, 100% { opacity: 1; } 50%, 95% { opacity: 0.25; } } .cd-status { margin-top: 22px; font-family: var(--font-headline); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); position: relative; z-index: 1; transition: color 0.6s var(--ease-out); } .cd-status.live-now { color: var(--team-primary); font-weight: 800; animation: cd-pulse 1.2s ease-in-out infinite; } /* Urgency: when <24h, countdown digits take on team-ink color */ .countdown.urgent .cd-num { color: var(--team-ink); } /* Inline CTA inside countdown status line */ .cd-status .cd-link { color: var(--team-primary); border-bottom: 1px dashed currentColor; padding-bottom: 1px; } /* ========================================================== LIVE SCORECARD — replaces countdown when match is underway ========================================================== */ .live-card { margin-top: 12px; padding: 22px 28px 20px; background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--team-primary); border-radius: 4px; box-shadow: var(--shadow-paper); position: relative; transition: border-color 0.6s var(--ease-out); animation: live-in 0.5s var(--ease-out); } @keyframes live-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .lv-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-bottom: 16px; } .lv-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; background: var(--team-primary); color: #fff; font-family: var(--font-headline); font-weight: 900; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; transition: background 0.6s var(--ease-out); } .lv-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.35); animation: tk-pulse 1.4s ease-in-out infinite; } .lv-match { font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: 0.03em; color: var(--ink); text-transform: uppercase; } .lv-refresh { font-family: var(--font-score); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; white-space: nowrap; } .lv-scores { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .lv-team { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; padding: 12px 14px; background: rgba(255,255,255,0.4); border: 1px solid var(--rule); border-radius: 10px; transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out); } .lv-team img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(14,13,11,0.12)); } .lv-team.mine { background: color-mix(in srgb, var(--team-primary) 8%, rgba(255,255,255,0.4)); border-color: color-mix(in srgb, var(--team-primary) 35%, transparent); } .lv-team.flash { animation: lv-flash 1s var(--ease-out); } @keyframes lv-flash { 0% { background: color-mix(in srgb, var(--team-primary) 35%, #fff); } 100% { background: rgba(255,255,255,0.4); } } .lv-team.mine.flash { animation-name: lv-flash-mine; } @keyframes lv-flash-mine { 0% { background: color-mix(in srgb, var(--team-primary) 50%, #fff); } 100% { background: color-mix(in srgb, var(--team-primary) 8%, rgba(255,255,255,0.4)); } } .lv-team-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .lv-code { font-family: var(--font-headline); font-weight: 800; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); } .lv-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-family: var(--font-score); color: var(--ink); } .lv-score { display: inline-flex; align-items: baseline; gap: 2px; } .lv-runs { font-size: clamp(26px, 3vw, 36px); font-weight: 700; color: var(--ink); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .lv-wkts { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: var(--ink-3); margin-right: 4px; } .lv-overs { font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; margin-left: 4px; } .lv-sep { color: var(--ink-4); font-weight: 400; } .lv-yet { font-family: var(--font-headline); font-weight: 600; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-4); } .lv-status { padding: 10px 14px; background: color-mix(in srgb, var(--team-primary) 10%, var(--paper-2)); border-left: 3px solid var(--team-primary); border-radius: 6px; font-family: var(--font-headline); font-weight: 600; font-size: 13px; color: var(--ink); margin-bottom: 12px; transition: background 0.6s var(--ease-out), border-color 0.6s var(--ease-out); } .lv-footline { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-headline); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .lv-toss { font-weight: 600; } .lv-venue { font-weight: 700; color: var(--ink-2); } @media (max-width: 680px) { .lv-header { grid-template-columns: 1fr; gap: 8px; } .lv-refresh { text-align: left; } } /* ========================================================== BB STATUS PILL HEARTBEAT (on every successful refresh) ========================================================== */ .bb-status.bb-pulse { animation: bb-heartbeat 0.7s var(--ease-out); } @keyframes bb-heartbeat { 0% { transform: scale(1); } 40% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(52,211,153,0.2); } 100% { transform: scale(1); } } /* Legacy classes kept unused (no .next-match wrapper anymore but old markup safety) */ .next-match, .nm-header, .nm-label, .nm-round, .nm-teams, .nm-team, .nm-logo, .nm-code, .nm-vs, .nm-venue, .nm-countdown, .cd-box, .cd-val, .cd-lbl, .nm-status { /* noop */ } /* ========================================================== SECTION HEADERS — editorial chapter marks ========================================================== */ .sec-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); position: relative; gap: 18px; } .sec-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 72px; background: linear-gradient(90deg, var(--team-primary) 0%, color-mix(in srgb, var(--team-primary) 40%, transparent) 100%); transition: background 0.6s var(--ease-out); } .sec-header::before { content: ''; position: absolute; left: 0; bottom: -5px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--team-primary); box-shadow: 0 0 0 3px var(--paper), 0 0 14px color-mix(in srgb, var(--team-primary) 42%, transparent); transition: background 0.6s var(--ease-out); } .sec-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: 0.04em; color: var(--ink); line-height: 1; padding-left: 18px; text-transform: uppercase; } .sec-sub { font-family: var(--font-headline); font-weight: 500; font-size: 10px; color: var(--ink-4); letter-spacing: 0.22em; text-transform: uppercase; } /* ========================================================== TWO-COL (The Mood + Team Identity) The mood block leads on the left — bigger signal, more relevant. ========================================================== */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; } /* two-col stacking moved to main responsive block below */ .team-card, .stats-card, .standings-wrap, .fixtures-wrap, .intel-wrap, .squad-wrap { background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 28px 30px; box-shadow: var(--shadow-paper); position: relative; } /* ----- TEAM IDENTITY — compressed "about" register ----- */ .tc-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-strong); position: relative; gap: 14px; } .tc-header::before { content: '◆'; position: absolute; left: 0; bottom: -5px; font-size: 8px; color: var(--team-primary); background: var(--paper); padding-right: 8px; transition: color 0.6s var(--ease-out); } .tc-label { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 0.04em; color: var(--ink); line-height: 1; padding-left: 18px; text-transform: uppercase; } .tc-chant { font-family: var(--font-headline); font-weight: 500; font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.22em; padding: 0; background: transparent; border: 0; } .tc-chant::before { content: ''; display: inline-block; width: 14px; height: 1px; background: var(--team-primary); vertical-align: middle; margin-right: 8px; transition: background 0.6s var(--ease-out); } .tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; margin-bottom: 20px; } .tc-row { display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; border-bottom: 1px dashed var(--rule); } .tc-k { font-family: var(--font-headline); font-weight: 500; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); } .tc-v { font-family: var(--font-headline); font-weight: 600; font-size: 14px; color: var(--ink); letter-spacing: -0.005em; } .tc-vibe { font-family: var(--font-headline); font-weight: 600; font-size: 14px; color: var(--ink-2); padding: 10px 14px 10px 16px; border-left: 4px solid var(--team-primary); background: color-mix(in srgb, var(--team-primary) 6%, var(--paper)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: 1.5; letter-spacing: 0.005em; transition: border-color 0.6s var(--ease-out), background 0.6s var(--ease-out); } /* ----- THE MOOD — rank + form + register on paper ----- */ .stats-card { display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); } .sc-label { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; padding: 0 0 14px 18px; border-bottom: 1px solid var(--rule-strong); position: relative; line-height: 1; } .sc-label::before { content: '◆'; position: absolute; left: 0; bottom: -5px; font-size: 8px; color: var(--team-primary); background: var(--paper); padding-right: 8px; transition: color 0.6s var(--ease-out); } .sc-rank-block { text-align: center; padding: 6px 0 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--rule); } .sc-rank { font-family: var(--font-display); font-weight: 400; font-size: clamp(110px, 13vw, 160px); line-height: 0.85; color: var(--team-primary); letter-spacing: 0.01em; display: inline-block; transition: color 0.6s var(--ease-out); } .sc-rank-lbl { margin-top: 14px; font-family: var(--font-headline); font-weight: 500; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-4); } .sc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 22px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .sc-stat { text-align: center; padding: 14px 6px; background: transparent; border: 0; border-right: 1px solid var(--rule); } .sc-stat:last-child { border-right: 0; } .sc-stat-v { font-family: var(--font-display); font-size: 28px; color: var(--ink); line-height: 1; letter-spacing: 0.02em; } .sc-stat-v.sc-won { color: var(--team-primary); } .sc-stat-v.sc-lost { color: var(--ink-3); } .sc-stat-v.sc-pts { color: var(--team-primary); } .sc-stat-l { margin-top: 6px; font-family: var(--font-headline); font-weight: 500; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); } .sc-form-label { font-family: var(--font-headline); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 10px; } .sc-form { display: flex; gap: 6px; } .form-pill { flex: 1; min-width: 32px; padding: 9px 0; text-align: center; font-family: var(--font-display); font-size: 15px; border-radius: 2px; letter-spacing: 0.04em; } .form-pill.W { background: var(--team-primary); color: #fff; border: 1px solid var(--team-primary); transition: background 0.6s var(--ease-out), border-color 0.6s var(--ease-out); } .form-pill.L { background: transparent; color: var(--ink-3); border: 1px solid var(--rule-strong); } .form-pill.NR { background: transparent; color: var(--ink-4); border: 1px dashed var(--rule-strong); } .form-pill.empty { background: transparent; color: var(--ink-4); border: 1px dashed var(--rule); opacity: 0.5; } /* ========================================================== STANDINGS — bar-chart hybrid ========================================================== */ .standings-wrap, .fixtures-wrap, .intel-wrap, .squad-wrap { margin-top: 24px; } .standings { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-headline); font-size: 13px; } .standings thead th { text-align: left; padding: 10px 12px; font-size: 9.5px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--rule-strong); background: transparent; } .standings thead th:first-child, .standings thead th:nth-child(3), .standings thead th:nth-child(4), .standings thead th:nth-child(5), .standings thead th:nth-child(6), .standings thead th:nth-child(7), .standings thead th:nth-child(8) { text-align: center; } .standings tbody td { padding: 14px 12px; color: var(--ink-2); border-bottom: 1px solid var(--rule); text-align: center; font-weight: 600; font-family: var(--font-score); font-size: 14px; background: transparent; position: relative; } .standings tbody td:nth-child(2) { text-align: left; } .standings tbody tr:last-child td { border-bottom: 0; } .standings .rank-num { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--ink-3); letter-spacing: 0.02em; line-height: 1; } .standings .team-cell { display: flex; align-items: center; gap: 12px; } .standings .team-cell img { width: 28px; height: 28px; object-fit: contain; } .standings .team-cell .team-name { font-family: var(--font-body); font-weight: 500; color: var(--ink); font-size: 13.5px; letter-spacing: -0.005em; } .standings .pts { font-family: var(--font-display); font-size: 22px; color: var(--ink); letter-spacing: 0.02em; line-height: 1; } .standings .pts-cell { position: relative; } .standings .pts-bar { position: absolute; left: 0; right: 0; bottom: 6px; height: 4px; margin: 0 10px; background: color-mix(in srgb, var(--rule) 80%, transparent); border-radius: 2px; overflow: hidden; } .standings .pts-bar-fill { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--team-primary) 70%, var(--ink)) 0%, var(--team-primary) 60%, color-mix(in srgb, var(--team-primary) 55%, #fff) 100%); border-radius: 2px; transform-origin: left center; animation: bar-grow 1.2s var(--ease-out) both; transition: background 0.6s var(--ease-out); box-shadow: 0 0 10px color-mix(in srgb, var(--team-primary) 42%, transparent); } @keyframes bar-grow { from { transform: scaleX(0); } } .standings tr.mine td { background: color-mix(in srgb, var(--team-primary) 6%, var(--paper)); border-bottom-color: var(--team-wash-hi); } .standings tr.mine td:first-child { border-left: 3px solid var(--team-primary); padding-left: 9px; } .standings tr.mine .rank-num { color: var(--team-primary); } .standings tr.mine .team-name { font-family: var(--font-headline); font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: 0; /* No uppercase: keeps multi-word shortnames like "Super Giants" / "Super Kings" consistent with the title-case non-mine rows. Otherwise the user's own row looks shouty compared to the rest of the table. */ text-transform: none; } .standings tr.mine .pts { color: var(--ink); } .standings tr.mine .pts-bar-fill { background: var(--team-primary); } .standings tbody tr { transition: background 0.15s var(--ease-out); } .standings tbody tr:hover td { background: var(--paper-2); } .standings tbody tr.mine:hover td { background: color-mix(in srgb, var(--team-primary) 10%, var(--paper)); } /* NRR column — signed, fractional, tabular */ .standings .nrr-cell { font-family: var(--font-score); font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; } .standings .nrr-cell.nrr-pos { color: var(--ink-2); } .standings .nrr-cell.nrr-neg { color: #9B2C2C; } .standings tr.mine .nrr-cell { color: var(--ink); font-weight: 700; } /* Horizontal scroll wrapper for narrow screens — keeps the table intact rather than cramming columns and truncating data. */ .standings-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .standings-scroll .standings { min-width: 560px; } /* ========================================================== FIXTURES — editorial timeline ========================================================== */ .fix-toggle { display: inline-flex; gap: 2px; background: transparent; padding: 0; border-radius: 0; } .fix-btn { background: transparent; color: var(--ink-4); border: 0; border-bottom: 1px solid transparent; padding: 4px 10px 6px; border-radius: 0; font-family: var(--font-headline); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); } .fix-btn.active { background: transparent; color: var(--ink); border-bottom: 1px solid var(--team-primary); } .fix-btn:hover:not(.active) { color: var(--ink-2); } .fixtures-list { display: grid; gap: 0; } .fix-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 16px; padding: 16px 8px 16px 18px; background: transparent; border: 0; border-bottom: 1px dashed var(--rule); border-left: 2px solid transparent; border-radius: 0; transition: background .2s var(--ease-out), border-color .2s var(--ease-out); position: relative; } .fix-row:hover { background: var(--paper-2); border-left-color: var(--rule-strong); transform: none; box-shadow: none; } .fix-row.mine { background: transparent; border-left-color: var(--team-primary); padding-left: 18px; } .fix-row.mine:hover { background: color-mix(in srgb, var(--team-primary) 5%, var(--paper)); box-shadow: none; } .fix-row.completed { opacity: 0.5; } .fix-row.completed:hover { opacity: 0.78; } .fixtures-list .fix-row:last-child { border-bottom: 0; } .fix-date { font-family: var(--font-display); font-size: 26px; color: var(--ink); letter-spacing: 0.02em; line-height: 1; } .fix-date .fix-day { display: block; font-family: var(--font-headline); font-weight: 600; font-size: 10px; letter-spacing: 0.22em; color: var(--ink-3); margin-top: 4px; text-transform: uppercase; } .fix-matchup { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 400; color: var(--ink); font-size: 17px; letter-spacing: 0.04em; } .fix-matchup img { width: 26px; height: 26px; object-fit: contain; } .fix-matchup .fv { font-family: var(--font-display); font-weight: 400; color: var(--team-primary); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 4px; transition: color 0.6s var(--ease-out); } .fix-venue { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--ink-3); text-align: right; letter-spacing: 0; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; } .fix-status { font-family: var(--font-headline); font-size: 9.5px; text-align: right; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; } .fix-status.result { color: var(--ink-2); } .fix-empty { padding: 36px 20px; text-align: center; font-family: var(--font-editorial); font-size: 17px; color: var(--ink-3); letter-spacing: 0; } .fix-empty em { font-style: italic; color: var(--ink-2); } .fix-status.upcoming { color: var(--ink); padding: 3px 10px; background: transparent; border: 1px solid var(--team-primary); border-radius: 2px; display: inline-block; font-weight: 600; transition: border-color 0.6s var(--ease-out); } /* fix-row stacking moved to main responsive block below */ /* ========================================================== INTEL — editorial callouts, quieter, paper-first ========================================================== */ .intel-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 0; } @media (max-width: 760px) { .intel-list { grid-template-columns: 1fr; gap: 8px; } } .intel-card { padding: 18px 22px 18px 22px; background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--team-primary); border-radius: var(--radius-sm); position: relative; transition: background .15s var(--ease-out), border-color .15s var(--ease-out), transform .15s var(--ease-out); overflow: hidden; } .intel-card:hover { background: var(--paper); transform: translateX(2px); box-shadow: none; } .intel-tag { display: inline-block; font-family: var(--font-headline); font-weight: 700; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; padding: 4px 10px 5px; background: linear-gradient(135deg, var(--team-primary) 0%, color-mix(in srgb, var(--team-primary) 78%, var(--team-secondary, var(--ink))) 100%); border-radius: 2px; margin-bottom: 14px; transition: background 0.6s var(--ease-out); box-shadow: 0 2px 10px -3px color-mix(in srgb, var(--team-primary) 55%, transparent); } .intel-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: 0.01em; color: var(--ink); line-height: 1.05; margin-bottom: 10px; text-transform: uppercase; max-width: 100%; } .intel-body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; } .intel-byline { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--font-headline); font-weight: 600; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .intel-byline::before { content: ''; width: 14px; height: 2px; background: var(--team-primary); display: inline-block; transition: background 0.6s var(--ease-out); } /* ========================================================== SQUAD — scoreboard cards with giant jersey numbers ========================================================== */ .squad-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; border-top: 0; } .squad-card { position: relative; padding: 14px 16px 14px 16px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); min-height: 104px; overflow: hidden; transition: background .15s var(--ease-out), border-color .15s var(--ease-out), transform .15s var(--ease-out); } .squad-card:hover { background: var(--paper); border-color: color-mix(in srgb, var(--team-primary) 45%, var(--rule-strong)); transform: translateY(-1px); } /* Giant faded jersey number — scoreboard backplate. Clipped at the edge. */ .squad-card::after { content: attr(data-jersey); position: absolute; right: -6px; bottom: -18px; font-family: var(--font-score); font-weight: 800; font-size: 76px; color: var(--team-primary); opacity: 0.18; letter-spacing: -0.05em; line-height: 1; pointer-events: none; z-index: 0; transition: color 0.6s var(--ease-out), opacity 0.15s var(--ease-out); } .squad-card:hover::after { opacity: 0.28; } .squad-card .sq-role { position: absolute; top: 12px; right: 12px; font-family: var(--font-headline); font-weight: 700; font-size: 9px; padding: 3px 7px; border-radius: 3px; letter-spacing: 0.16em; color: #fff; border: 0; z-index: 2; } .squad-card[data-role="BAT"] .sq-role { background: #1E40AF; } .squad-card[data-role="BOW"] .sq-role { background: #B91C1C; } .squad-card[data-role="AR"] .sq-role { background: #6B21A8; } .squad-card[data-role="WK"] .sq-role { background: #047857; } .sq-name { font-family: var(--font-headline); font-style: normal; font-weight: 700; font-size: 14.5px; color: var(--ink); line-height: 1.2; padding-right: 48px; margin: 0 0 6px 0; letter-spacing: -0.005em; position: relative; z-index: 2; } .sq-tag { font-family: var(--font-headline); font-weight: 700; font-size: 9.5px; color: var(--team-ink); letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 8px 0; position: relative; z-index: 2; transition: color 0.6s var(--ease-out); } .sq-tag::before { content: none; } .sq-flag { font-family: var(--font-score); font-weight: 600; font-size: 9px; color: var(--ink-3); letter-spacing: 0.2em; margin-top: 2px; padding: 3px 7px; border: 1px solid var(--rule-strong); border-radius: 3px; display: inline-block; background: var(--paper); position: relative; z-index: 2; } /* ========================================================== FOOTER — licensed stub ========================================================== */ .pavilion-footer { margin-top: 60px; padding: 32px 0 14px; border-top: 0; text-align: center; position: relative; } .pf-perf { display: flex; align-items: center; gap: 8px; margin: 0 auto 22px; max-width: 420px; } .pf-perf-dot { width: 5px; height: 5px; background: var(--ink-4); border-radius: 50%; } .pf-perf-line { flex: 1 1 auto; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-4) 0 3px, transparent 3px 8px); opacity: 0.55; } .pf-perf-diamond { color: var(--team-primary); display: inline-flex; align-items: center; transition: color 0.6s var(--ease-out); } .pf-perf-diamond .crest { width: 16px; height: 16px; } .pf-tag { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--ink); letter-spacing: 0.04em; margin-bottom: 10px; text-transform: uppercase; line-height: 1.2; } .pf-mark { font-family: var(--font-headline); font-weight: 500; font-size: 10px; letter-spacing: 0.24em; color: var(--ink-3); margin-bottom: 10px; text-transform: uppercase; } .pf-note { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--ink-4); letter-spacing: 0; max-width: 44ch; margin: 0 auto; line-height: 1.5; } /* ---- Footer button rows ---- .pf-primary-row → one big CTA ("Share your pass") .pf-utility-row → ghost utility buttons, separated by hairline rules */ .pf-primary-row { margin: 22px auto 14px; display: flex; justify-content: center; } .pf-utility-row { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; max-width: 560px; padding: 0 12px; } .pf-util-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 10px 14px; font-family: var(--font-headline); font-weight: 700; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; transition: color 0.2s var(--ease-out); line-height: 1.1; } .pf-util-btn:hover, .pf-util-btn:focus-visible { color: var(--team-primary); outline: none; } .pf-util-btn[hidden] { display: none; } .pf-util-label { display: inline-block; } .pf-util-icon { color: var(--team-primary); transition: color 0.6s var(--ease-out); } /* Hairline separator between adjacent util buttons — renders as a vertical tick on wide screens, becomes a middle-dot on narrower views. */ .pf-util-btn + .pf-util-btn::before { content: ''; position: absolute; left: -1px; top: 26%; bottom: 26%; width: 1px; background: rgba(14, 13, 11, 0.14); } /* Deprecated alias — kept so existing selectors in the old footer section (dark theme overrides below) still match. */ .pf-credits-btn { background: transparent; border: 0; padding: 4px 2px; font-family: var(--font-headline); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; border-bottom: 1px solid currentColor; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .pf-credits-btn:hover, .pf-credits-btn:focus-visible { color: var(--team-primary); border-bottom-color: var(--team-primary); outline: none; transform: translateY(-1px); } .pf-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: var(--team-primary); color: var(--team-text, #fff); border: 0; border-radius: 2px; font-family: var(--font-headline); font-weight: 700; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--team-primary) 80%, transparent); transition: transform 0.2s var(--ease-out), filter 0.2s var(--ease-out); } .pf-share-btn:hover, .pf-share-btn:focus-visible { transform: translateY(-1px); filter: brightness(1.05); outline: none; } .pf-share-arr { font-size: 13px; font-weight: 700; } /* ========================================================== CREDITS MODAL — a colophon, set like a printed programme Newspaper masthead, double-rule dividers, italic editorial voice, torn-off ticket stub for the chai QR. No generic cards. ========================================================== */ .credits-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.24s var(--ease-out); } .credits-modal[hidden] { display: none; } .credits-modal.open { opacity: 1; pointer-events: auto; } .cm-backdrop { position: absolute; inset: 0; background: rgba(14, 13, 11, 0.52); backdrop-filter: blur(6px) saturate(0.9); -webkit-backdrop-filter: blur(6px) saturate(0.9); } .cm-card { position: relative; width: min(620px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--paper-2); border: 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); border-radius: 0; box-shadow: 0 30px 60px -30px rgba(14,13,11,0.45); padding: 44px 52px 32px; transform: translateY(14px); transition: transform 0.34s var(--ease-out); scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; color: var(--ink); } .credits-modal.open .cm-card { transform: none; } .cm-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ink-4); cursor: pointer; transition: color 0.2s var(--ease-out); } .cm-close:hover, .cm-close:focus-visible { color: var(--ink); outline: none; } /* --- masthead: crest + title + dateline --- */ .cm-masthead { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin-bottom: 18px; } .cm-crest { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: var(--canvas); border-radius: 2px; flex: 0 0 auto; margin-top: 4px; } .cm-crest .crest { width: 26px; height: 26px; } .cm-mast-type { min-width: 0; } .cm-folio { font-family: var(--font-headline); font-size: 10px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; } .cm-title { font-family: var(--font-display); font-weight: 400; font-size: 46px; letter-spacing: 0.02em; line-height: 0.98; color: var(--ink); margin: 0 0 8px; text-transform: uppercase; } .cm-dateline { font-family: var(--font-editorial); font-size: 14.5px; color: var(--ink-3); line-height: 1.4; letter-spacing: 0; } .cm-dateline em { font-style: italic; color: var(--ink-2); } /* --- double-rule divider, newspaper convention --- */ .cm-rule { position: relative; height: 5px; margin: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .cm-rule-thin { height: 0; margin: 22px 0; border-top: 1px solid var(--rule-strong); border-bottom: 0; } /* --- contributors: two columns, hairline between --- */ .cm-contribs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; position: relative; } .cm-contribs::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 50%; width: 1px; background: var(--rule-strong); } .cm-contrib { padding: 4px 22px; display: flex; flex-direction: column; gap: 6px; } .cm-contrib:first-child { padding-left: 0; } .cm-contrib:last-child { padding-right: 0; } .cm-role { font-family: var(--font-editorial); font-style: italic; font-size: 13px; color: var(--ink-3); letter-spacing: 0; text-transform: none; } .cm-name { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 0.03em; line-height: 1; color: var(--ink); text-transform: uppercase; margin-top: 2px; } .cm-bio { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-2); line-height: 1.55; margin: 4px 0 2px; max-width: 30ch; } .cm-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: 14.5px; letter-spacing: 0.005em; text-transform: none; color: var(--team-primary); text-decoration: none; padding: 6px 14px 7px; border: 1px solid color-mix(in srgb, var(--team-primary) 40%, transparent); background: color-mix(in srgb, var(--team-primary) 7%, transparent); border-radius: 2px; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.2s var(--ease-out), transform 0.2s var(--ease-out); } .cm-link:hover { color: #fff; background: var(--team-primary); border-color: var(--team-primary); transform: translateY(-1px); } .cm-link .cm-arr { font-family: var(--font-headline); font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1; transform: translateY(-1px); } /* --- editor's notes: definition list, hanging labels --- */ .cm-section-label { font-family: var(--font-headline); font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; } .cm-notes-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cm-note { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: baseline; } .cm-note dt { font-family: var(--font-editorial); font-style: italic; font-size: 14px; color: var(--ink-3); text-align: right; padding-right: 10px; border-right: 1px solid var(--rule-strong); line-height: 1.5; } .cm-note dd { margin: 0; font-family: var(--font-body); font-size: 13px; color: var(--ink-2); line-height: 1.55; } /* --- tipping: torn-off ticket stub --- */ .cm-tip { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; } .cm-tip-body { min-width: 0; } .cm-tip-head { font-family: var(--font-editorial); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--ink); margin: 0 0 10px; letter-spacing: 0; } .cm-tip-head em { font-style: italic; color: var(--team-ink); } .cm-tip-copy { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin: 0 0 14px; max-width: 34ch; } .cm-tip-upi { display: inline-flex; align-items: baseline; gap: 10px; padding: 8px 12px; border: 1px dashed var(--ink-4); background: transparent; } .cm-tip-upi-label { font-family: var(--font-headline); font-size: 9px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-4); } .cm-tip-upi-id { font-family: var(--font-score); font-size: 13px; font-weight: 700; color: var(--ink); background: transparent; padding: 0; user-select: all; letter-spacing: 0.02em; } /* ticket stub — scalloped edge, monospace caps */ .cm-tip-stub { position: relative; margin: 0; padding: 14px 16px 12px; background: var(--canvas); border: 1px solid var(--ink); display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; } .cm-tip-stub::before, .cm-tip-stub::after { content: ''; position: absolute; left: -1px; right: -1px; height: 8px; background-image: radial-gradient(circle at 4px 4px, var(--paper-2) 2.4px, transparent 2.6px); background-size: 8px 8px; background-repeat: repeat-x; pointer-events: none; } .cm-tip-stub::before { top: -4px; } .cm-tip-stub::after { bottom: -4px; } .cm-stub-top { font-family: var(--font-headline); font-size: 9.5px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--rule-strong); padding-bottom: 6px; width: 100%; text-align: center; } .cm-stub-qr { display: block; width: 148px; height: 148px; image-rendering: pixelated; image-rendering: crisp-edges; } .cm-stub-foot { font-family: var(--font-score); font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } /* --- foot signature --- */ .cm-colophon-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule-strong); font-family: var(--font-body); font-size: 12px; color: var(--ink-3); } .cm-ig { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: 0; transition: color 0.2s var(--ease-out); } .cm-ig:hover { color: var(--team-primary); } .cm-foot-sig { font-family: var(--font-editorial); font-style: italic; color: var(--ink-3); } @media (max-width: 640px) { .cm-card { padding: 36px 22px 22px; } .cm-masthead { grid-template-columns: 1fr; gap: 12px; } .cm-crest { margin: 0; } .cm-title { font-size: 34px; } .cm-contribs { grid-template-columns: 1fr; } .cm-contribs::before { display: none; } .cm-contrib { padding: 14px 0; border-bottom: 1px solid var(--rule); } .cm-contrib:first-child { padding-top: 0; } .cm-contrib:last-child { padding-bottom: 0; border-bottom: 0; } .cm-note { grid-template-columns: 70px 1fr; gap: 12px; } .cm-note dt { font-size: 13px; padding-right: 8px; } .cm-tip { grid-template-columns: 1fr; gap: 20px; } .cm-tip-stub { justify-self: center; } .cm-tip-head { font-size: 22px; } .cm-colophon-foot { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .credits-modal, .credits-modal .cm-card, .cm-close { transition: none; } } /* ========================================================== MOTION — entrance stagger, reveal, team-switch ========================================================== */ .reveal { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out), filter 0.6s var(--ease-out); will-change: opacity, transform, filter; } .reveal.in { opacity: 1; transform: none; filter: none; } /* Child stagger — when the parent .reveal enters, its list children cascade. Up to 16 children get staggered; beyond that they appear with the parent. */ @keyframes stagger-rise { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } } .reveal.in .intel-card, .reveal.in .fix-row, .reveal.in .squad-card, .reveal.in .standings tbody tr, .reveal.in .tc-row, .reveal.in .sc-stat, .reveal.in .form-pill, .reveal.in .md-left > *, .reveal.in .md-mid > *, .reveal.in .md-right > * { animation: stagger-rise 0.55s var(--ease-out) both; } .reveal.in .intel-card:nth-child(1), .reveal.in .fix-row:nth-child(1), .reveal.in .squad-card:nth-child(1), .reveal.in .standings tbody tr:nth-child(1), .reveal.in .tc-row:nth-child(1), .reveal.in .sc-stat:nth-child(1), .reveal.in .form-pill:nth-child(1), .reveal.in .md-left > :nth-child(1), .reveal.in .md-mid > :nth-child(1), .reveal.in .md-right > :nth-child(1) { animation-delay: 0.08s; } .reveal.in .intel-card:nth-child(2), .reveal.in .fix-row:nth-child(2), .reveal.in .squad-card:nth-child(2), .reveal.in .standings tbody tr:nth-child(2), .reveal.in .tc-row:nth-child(2), .reveal.in .sc-stat:nth-child(2), .reveal.in .form-pill:nth-child(2), .reveal.in .md-left > :nth-child(2), .reveal.in .md-mid > :nth-child(2), .reveal.in .md-right > :nth-child(2) { animation-delay: 0.15s; } .reveal.in .intel-card:nth-child(3), .reveal.in .fix-row:nth-child(3), .reveal.in .squad-card:nth-child(3), .reveal.in .standings tbody tr:nth-child(3), .reveal.in .tc-row:nth-child(3), .reveal.in .sc-stat:nth-child(3), .reveal.in .form-pill:nth-child(3), .reveal.in .md-left > :nth-child(3), .reveal.in .md-mid > :nth-child(3), .reveal.in .md-right > :nth-child(3) { animation-delay: 0.22s; } .reveal.in .intel-card:nth-child(4), .reveal.in .fix-row:nth-child(4), .reveal.in .squad-card:nth-child(4), .reveal.in .standings tbody tr:nth-child(4), .reveal.in .tc-row:nth-child(4), .reveal.in .sc-stat:nth-child(4), .reveal.in .form-pill:nth-child(4) { animation-delay: 0.29s; } .reveal.in .intel-card:nth-child(5), .reveal.in .fix-row:nth-child(5), .reveal.in .squad-card:nth-child(5), .reveal.in .standings tbody tr:nth-child(5), .reveal.in .tc-row:nth-child(5), .reveal.in .form-pill:nth-child(5) { animation-delay: 0.36s; } .reveal.in .intel-card:nth-child(6), .reveal.in .fix-row:nth-child(6), .reveal.in .squad-card:nth-child(6), .reveal.in .standings tbody tr:nth-child(6), .reveal.in .tc-row:nth-child(6) { animation-delay: 0.43s; } .reveal.in .fix-row:nth-child(7), .reveal.in .squad-card:nth-child(7), .reveal.in .standings tbody tr:nth-child(7), .reveal.in .tc-row:nth-child(7) { animation-delay: 0.50s; } .reveal.in .fix-row:nth-child(8), .reveal.in .squad-card:nth-child(8), .reveal.in .standings tbody tr:nth-child(8), .reveal.in .tc-row:nth-child(8) { animation-delay: 0.57s; } .reveal.in .fix-row:nth-child(9), .reveal.in .squad-card:nth-child(9), .reveal.in .standings tbody tr:nth-child(9) { animation-delay: 0.64s; } .reveal.in .fix-row:nth-child(10), .reveal.in .squad-card:nth-child(10), .reveal.in .standings tbody tr:nth-child(10) { animation-delay: 0.71s; } .reveal.in .squad-card:nth-child(11), .reveal.in .fix-row:nth-child(11) { animation-delay: 0.78s; } .reveal.in .squad-card:nth-child(12), .reveal.in .fix-row:nth-child(12) { animation-delay: 0.85s; } .reveal.in .squad-card:nth-child(13) { animation-delay: 0.92s; } .reveal.in .squad-card:nth-child(14) { animation-delay: 0.99s; } .reveal.in .squad-card:nth-child(15) { animation-delay: 1.06s; } /* Respect reduced motion — honor user system preference */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { transition: none; filter: none; transform: none; opacity: 1; } .reveal.in * { animation: none !important; } } .dashboard.theme-switching { animation: theme-flash 0.8s var(--ease-out); } @keyframes theme-flash { 0% { filter: brightness(1); } 35% { filter: brightness(1.06) saturate(1.1); } 100% { filter: brightness(1); } } /* ========================================================== CINEMATIC ENTRANCE + AMBIENT LIVENESS Driven by pavilion/animations.js. Sections prime with .anim-pre + one style class, then .anim-pre is removed and .anim-in added on the timeline beat. All effects use transform / opacity / filter only. ========================================================== */ /* --- curtain lift ----------------------------------------- */ .anim-curtain { position: fixed; inset: 0; z-index: 9998; background: radial-gradient(120% 120% at 50% 42%, color-mix(in srgb, var(--team-primary, #0E0D0B) 48%, #0E0D0B) 0%, #0E0D0B 72%); opacity: 1; transform: translateY(0); transition: opacity 0.85s var(--ease-out), transform 1.1s var(--ease-out); pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; } .anim-curtain.lift { opacity: 0; transform: translateY(-4%); } .anim-curtain-inner { display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(18px); animation: anim-curtain-text 0.9s var(--ease-out) 90ms forwards; } .anim-curtain-eyebrow { font-family: var(--font-headline); font-weight: 500; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin-bottom: 22px; } .anim-curtain-title { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: clamp(80px, 14vw, 200px); line-height: 1; letter-spacing: 0; color: #fff; text-shadow: 0 2px 24px color-mix(in srgb, var(--team-primary, #fff) 60%, transparent); } .anim-curtain-line { width: 140px; height: 4px; border-radius: 2px; margin-top: 26px; background: color-mix(in srgb, var(--team-primary, #fff) 90%, #fff); box-shadow: 0 0 24px color-mix(in srgb, var(--team-primary, #fff) 70%, transparent); } @keyframes anim-curtain-text { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* --- primed (pre-reveal) hidden state --------------------- */ .anim-pre { opacity: 0; will-change: opacity, transform, filter; } .anim-pre.anim-drop { transform: translateY(-36px); filter: blur(6px); } .anim-pre.anim-slide-right { transform: translateX(60px); filter: blur(4px); } .anim-pre.anim-rise-scale { transform: translateY(32px) scale(0.965); filter: blur(4px); } .anim-pre.anim-rise-left { transform: translateX(-28px) translateY(24px); filter: blur(4px); } .anim-pre.anim-rise-right { transform: translateX(28px) translateY(24px); filter: blur(4px); } .anim-pre.anim-pulse-on { transform: scale(0.94); filter: blur(6px) brightness(1.4); } /* --- reveal transition ------------------------------------ */ .anim-in { opacity: 1; transform: none; filter: none; transition: opacity 0.75s var(--ease-out), transform 0.9s var(--ease-out), filter 0.7s var(--ease-out); } .anim-in.anim-pulse-on { animation: anim-pulse-land 0.9s var(--ease-out); } @keyframes anim-pulse-land { 0% { filter: brightness(1.35) saturate(1.2); } 50% { filter: brightness(1.12) saturate(1.08); } 100% { filter: brightness(1); } } /* --- light sweep across mast ------------------------------ */ header.mast { position: relative; overflow: hidden; } .anim-sweep { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient( 100deg, transparent 0%, transparent 40%, color-mix(in srgb, var(--team-primary, #ffffff) 22%, transparent) 50%, rgba(255,255,255,0.18) 52%, color-mix(in srgb, var(--team-primary, #ffffff) 22%, transparent) 54%, transparent 64%, transparent 100%); transform: translateX(-100%); animation: anim-sweep-x 1.3s var(--ease-out) forwards; mix-blend-mode: screen; } @keyframes anim-sweep-x { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* --- countdown digit roll --------------------------------- */ .cd-num.anim-roll { animation: anim-digit-roll 0.45s var(--ease-out); } @keyframes anim-digit-roll { 0% { transform: translateY(-55%); opacity: 0.2; filter: blur(2px); } 60% { transform: translateY(6%); opacity: 1; filter: none; } 100% { transform: translateY(0); opacity: 1; filter: none; } } /* --- telemetry flicker on stat numbers -------------------- */ .anim-flicker { animation: anim-digit-flicker 0.65s var(--ease-out); } @keyframes anim-digit-flicker { 0% { opacity: 1; filter: none; } 18% { opacity: 0.2; filter: blur(3px) brightness(1.6); } 34% { opacity: 1; filter: blur(0); brightness(1.25); } 52% { opacity: 0.5; filter: blur(2px); } 100% { opacity: 1; filter: none; } } /* --- rank #1 standings row glow pulse --------------------- */ .standings tbody tr.rank-one { position: relative; animation: anim-rank-glow 3.2s var(--ease-out) infinite; } @keyframes anim-rank-glow { 0%,100% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 3px 0 0 0 var(--team-primary, #0E0D0B), inset 0 0 18px 0 color-mix(in srgb, var(--team-primary, #0E0D0B) 18%, transparent); } } /* --- LIVE pill sharpened pulse (ambient) ------------------ */ .lv-dot, .cd-pulse { animation: anim-live-pulse 1.4s ease-in-out infinite; } @keyframes anim-live-pulse { 0%,100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--team-primary, #e63946) 55%, transparent); } 50% { transform: scale(1.12); opacity: 0.75; box-shadow: 0 0 0 6px color-mix(in srgb, var(--team-primary, #e63946) 0%, transparent); } } /* ========================================================== THEME V2 — big personal hero + solid team-color blocks Overrides the editorial-neutral look with bolder team-primary fills on the countdown, stats rank plate, and "my team" row. White text on solid team-color for broadcast-ready impact. ========================================================== */ /* Hero identity: bigger avatar, bigger name, big italic team-color chant (plays the role of F1's "Pit Wall." accent line). */ .mast-id-avatar { width: clamp(96px, 10vw, 148px); height: clamp(96px, 10vw, 148px); border-width: 4px; box-shadow: 0 0 0 5px var(--team-primary), 0 16px 34px -18px rgba(14,13,11,0.32); } .mast-id-name { font-size: clamp(76px, 11vw, 144px); letter-spacing: 0.005em; line-height: 0.9; } .mast-id-name::after { width: 140px; height: 6px; margin-top: 18px; border-radius: 3px; } .mast-id-chant { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: clamp(40px, 6vw, 88px); color: var(--team-primary); line-height: 0.95; letter-spacing: 0; text-transform: none; margin-top: 10px; margin-bottom: 20px; } /* Countdown: solid team-primary with white digits. Biggest hero block. */ .countdown { background: var(--team-primary); border: 0; box-shadow: 0 16px 42px -22px color-mix(in srgb, var(--team-primary) 70%, transparent); transition: background 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); } .countdown .cd-label { color: rgba(255,255,255,0.78); } .countdown .cd-status, .countdown.urgent .cd-status { color: rgba(255,255,255,0.88); } .countdown .cd-num, .countdown.urgent .cd-num { color: #fff; } .countdown .cd-suffix { color: rgba(255,255,255,0.62); } .countdown .cd-colon { color: rgba(255,255,255,0.5); animation: cd-blink 1s ease-in-out infinite; } .countdown .cd-pulse { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.22); animation: cd-pulse-white 1.8s ease-in-out infinite; } @keyframes cd-pulse-white { 0%,100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(255,255,255,0.22); } 50% { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(255,255,255,0); } } .countdown .cd-status .cd-link { color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; } /* Matchday: beef up the left team-color rail. */ .matchday::before { width: 10px; } /* Stats card rank plate: solid team-primary with massive white rank number. */ .sc-rank-block { background: var(--team-primary); border: 0; border-radius: 6px; padding: 24px 16px 20px; margin: -4px 0 22px; box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--team-primary) 70%, transparent); transition: background 0.6s var(--ease-out); } .sc-rank { color: #fff; } .sc-rank-lbl { color: rgba(255,255,255,0.74); } /* Standings "my team" row: solid team-primary fill with white text. */ .standings tr.mine td { background: var(--team-primary); color: #fff; border-bottom-color: color-mix(in srgb, var(--team-primary) 70%, #000); } .standings tr.mine td:first-child { border-left: 0; padding-left: 14px; } .standings tr.mine .rank-num, .standings tr.mine .team-name, .standings tr.mine .pts, .standings tr.mine .nrr-cell { color: #fff; } .standings tr.mine .pts-bar { background: rgba(255,255,255,0.2); } .standings tr.mine .pts-bar-fill { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.5); } .standings tbody tr.mine:hover td { background: color-mix(in srgb, var(--team-primary) 86%, #fff); } /* Rank-1 glow when mine → switch to white glow for contrast on red fill. */ .standings tbody tr.rank-one.mine { animation: anim-rank-glow-white 3.2s var(--ease-out) infinite; } @keyframes anim-rank-glow-white { 0%,100% { box-shadow: inset 0 0 0 0 transparent; } 50% { box-shadow: inset 4px 0 0 0 #fff, inset 0 0 22px 0 rgba(255,255,255,0.3); } } /* Fixtures "my match" row: accent up the left with a wider team-color rail. */ .fix-row.mine { border-left-width: 6px; } /* Mast actions — Share button gets a solid team-primary fill with white text so it reads as the primary CTA, not a secondary chip. */ .mast-switch.mast-share { background: var(--team-primary); color: #fff; border-color: var(--team-primary); } .mast-switch.mast-share:hover { background: color-mix(in srgb, var(--team-primary) 85%, #000); color: #fff; } .mast-switch.mast-share .mast-switch-arrow { color: #fff; } /* ========================================================== THEME V3 — F1 sandwich + section numbering + card accents Black top/bottom chrome so the dashboard reads as broadcaster chrome wrapping editorial content. Section headers get a chunky team-color rail and § numbering. Team Identity card picks up a solid team-color header strip to match the stats rank plate. Matchday badges drop in with a bounce + VS flash. ========================================================== */ /* --- BROADCAST BAR: black top chrome ---------------------- */ .broadcast-bar { background: #0E0D0B; color: #fff; border-bottom: 1px solid color-mix(in srgb, var(--team-primary) 60%, #0E0D0B); } .broadcast-bar::after { display: none; } .bb-left .bb-mark { background: var(--team-primary); color: #fff; } .bb-label { color: #fff; } .bb-mid { color: rgba(255,255,255,0.72); } .bb-mid em { color: var(--team-primary); font-style: normal; font-weight: 700; } .bb-clock { color: #fff; } .bb-status { color: rgba(255,255,255,0.8); } .bb-status[data-state="snapshot"] { color: rgba(255,255,255,0.58); } .bb-status[data-state="live"] { color: #3DDC97; } .bb-status[data-state="checking"] { color: #F5A623; } /* --- TICKER: black dispatch strip ------------------------- */ .ticker { background: #131210; border-bottom: 1px solid #1F1D1A; } .tk-badge { color: var(--team-primary); border-right: 1px solid #2A2723; background: #0E0D0B; } .tk-item { color: rgba(255,255,255,0.88); } .tk-item::before { color: rgba(255,255,255,0.28); } .tk-item .tk-k { color: rgba(255,255,255,0.58); } .tk-item .tk-v { color: #fff; } .tk-item .tk-num { color: var(--team-primary); } .tk-track { mask-image: linear-gradient(90deg, transparent 0, black 48px, black calc(100% - 48px), transparent 100%); } /* --- FOOTER: black bottom bar ----------------------------- */ .pavilion-footer { background: #0E0D0B; color: #fff; padding: 42px 28px 28px; margin-top: 48px; border-top: 1px solid var(--team-primary); box-shadow: 0 -10px 40px -28px color-mix(in srgb, var(--team-primary) 60%, transparent); } .pavilion-footer .pf-perf-dot { background: rgba(255,255,255,0.3); } .pavilion-footer .pf-perf-line { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 3px, transparent 3px 8px); opacity: 1; } .pavilion-footer .pf-tag { color: #fff; } .pavilion-footer .pf-mark { color: rgba(255,255,255,0.62); } .pavilion-footer .pf-note { color: rgba(255,255,255,0.52); } .pavilion-footer .pf-credits-btn { color: rgba(255,255,255,0.78); border-bottom-color: rgba(255,255,255,0.35); } .pavilion-footer .pf-credits-btn:hover, .pavilion-footer .pf-credits-btn:focus-visible { color: var(--team-primary); border-bottom-color: var(--team-primary); } .pavilion-footer .pf-share-btn { box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--team-primary) 90%, transparent), 0 0 0 1px rgba(255,255,255,0.06); } /* Utility row — dark-footer overrides so all 4 buttons read consistently. */ .pavilion-footer .pf-utility-row { margin-top: 8px; gap: 0; } .pavilion-footer .pf-util-btn { color: rgba(255, 255, 255, 0.78); } .pavilion-footer .pf-util-btn:hover, .pavilion-footer .pf-util-btn:focus-visible { color: var(--team-primary); } .pavilion-footer .pf-util-btn + .pf-util-btn::before { background: rgba(255, 255, 255, 0.16); } .pavilion-footer .pf-util-icon { color: var(--team-primary); opacity: 0.85; } .pavilion-footer .pf-util-btn:hover .pf-util-icon, .pavilion-footer .pf-util-btn:focus-visible .pf-util-icon { opacity: 1; } .pavilion-footer .pf-primary-row { margin-top: 24px; } /* Disclaimer line under the footer buttons — legal breadcrumb, kept calm. */ .pf-disclaimer { max-width: 560px; margin: 22px auto 4px; padding: 0 18px; font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: normal; font-size: 11.5px; line-height: 1.55; text-align: center; color: rgba(255, 255, 255, 0.42); letter-spacing: 0.01em; } .pf-disclaimer em { color: rgba(255, 255, 255, 0.62); font-style: italic; } /* Mobile: slightly tighter spacing, ensure buttons wrap cleanly without orphaning the separators. */ @media (max-width: 480px) { .pavilion-footer .pf-utility-row { max-width: 420px; padding: 0 8px; gap: 2px 6px; } .pavilion-footer .pf-util-btn { padding: 9px 11px; font-size: 10px; letter-spacing: 0.18em; } /* On mobile the row often wraps (4 buttons → 2 rows). The vertical-tick separator is `.pf-util-btn + .pf-util-btn::before`, which still matches the first button on the wrapped row — leaving a dangling tick at its leftmost edge. Simpler than DOM detection: drop the ticks on narrow screens entirely and rely on the small gap for spacing. */ .pavilion-footer .pf-util-btn + .pf-util-btn::before { display: none; } } /* --- SECTION HEADERS: chunky team-color rail + § numbering -- */ .sec-header::before { display: none; } .sec-header::after { width: 120px; height: 3px; background: linear-gradient(90deg, var(--team-primary) 0%, color-mix(in srgb, var(--team-primary) 30%, transparent) 100%); } .sec-title { padding-left: 20px; position: relative; border-left: 8px solid var(--team-primary); box-shadow: -1px 0 12px -4px color-mix(in srgb, var(--team-primary) 50%, transparent); transition: border-color 0.6s var(--ease-out); } .sec-title[data-num]::before { content: attr(data-num); display: block; font-family: var(--font-score); font-weight: 700; font-size: 10.5px; letter-spacing: 0.3em; color: var(--team-primary); text-transform: uppercase; margin-bottom: 8px; opacity: 0.95; line-height: 1; transition: color 0.6s var(--ease-out); } /* --- TEAM IDENTITY CARD: solid team-color header + rail --- */ .team-card { overflow: hidden; padding-left: 36px; } .team-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--team-primary); transition: background 0.6s var(--ease-out); z-index: 1; } .team-card .tc-header { margin: -28px -30px 22px -36px; padding: 18px 26px 16px; background: var(--team-primary); border-bottom: 0; transition: background 0.6s var(--ease-out); } .team-card .tc-header::before { display: none; } .team-card .tc-label { color: #fff; padding-left: 0; } .team-card .tc-chant { color: rgba(255,255,255,0.92); } .team-card .tc-chant::before { background: rgba(255,255,255,0.7); } .team-card .tc-v { font-weight: 700; } .team-card .tc-vibe { border-left-width: 6px; background: color-mix(in srgb, var(--team-primary) 6%, transparent); } /* --- MATCHDAY: badge drop-in + VS flash ------------------- */ .reveal.in .md-mid > * { animation: none; } .matchday .md-team img { opacity: 0; transform: translateY(-38px) scale(0.7); } .matchday .md-vs { opacity: 0; } .matchday.anim-in .md-team img { animation: md-badge-drop 0.9s var(--ease-out) both; } .matchday.anim-in .md-team:nth-child(1) img { animation-delay: 0.2s; } .matchday.anim-in .md-team:nth-child(3) img { animation-delay: 0.45s; } .matchday.anim-in .md-vs { animation: md-vs-flash 0.7s var(--ease-out) 0.65s both; } @keyframes md-badge-drop { 0% { opacity: 0; transform: translateY(-38px) scale(0.7); filter: blur(3px); } 55% { opacity: 1; transform: translateY(8px) scale(1.08); filter: none; } 75% { transform: translateY(-3px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes md-vs-flash { 0% { opacity: 0; transform: scale(0.4); letter-spacing: 0.4em; color: #fff; } 40% { opacity: 1; transform: scale(1.25); letter-spacing: 0.14em; color: var(--team-primary); } 60% { transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); letter-spacing: 0.08em; color: var(--team-primary); } } /* ========================================================== THEME V4 — Hero with right-side Season Dossier plate Kills the dead space to the right of the name. Avatar and name are paired on the same visual baseline, avatar scaled up. Dossier renders pass serial at jersey-number scale plus four live stats (position, points, matches, form L5). ========================================================== */ /* Two-column grid inside the identity block. Dossier stacks below on tablet/mobile so the name still gets full width there. */ .mast-identity { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 44px; align-items: start; } .mast-id-main { min-width: 0; } /* Pair avatar and name: avatar sits flush to name top-cap, larger. */ .mast-id-avatar { width: clamp(132px, 13vw, 188px); height: clamp(132px, 13vw, 188px); align-self: flex-start; margin-top: 6px; } .mast-id-name { line-height: 0.88; letter-spacing: 0.004em; margin-bottom: 0; } .mast-id-name::after { display: none; } .mast-id-title { gap: 26px; align-items: flex-start; } .mast-id-chant { margin-top: 14px; } /* Dossier plate — editorial cream paper with a team-color LEFT RAIL. Team-primary used only as the serial number accent, not as the fill. This sits alongside the mast (also cream paper) without shouting over it. */ .mast-dossier { background: transparent; color: var(--ink); border-radius: 3px; padding: 4px 0 4px 22px; position: relative; overflow: visible; border-left: 5px solid var(--team-primary); transition: border-color 0.6s var(--ease-out); } .dossier-head { padding-bottom: 12px; margin-bottom: 14px; position: relative; border-bottom: 1px solid var(--rule); } .dossier-eyebrow { font-family: var(--font-headline); font-weight: 500; font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 4px; } .dossier-serial { font-family: var(--font-score); font-weight: 700; font-size: clamp(52px, 6.4vw, 82px); line-height: 0.95; color: var(--team-primary); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; transition: color 0.6s var(--ease-out); } .dossier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; } .dossier-stat { min-width: 0; } .dossier-v { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--ink); letter-spacing: 0.02em; } .dossier-l { margin-top: 6px; font-family: var(--font-headline); font-weight: 500; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-4); } .dossier-form { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; } .dossier-form .fp { width: 20px; height: 20px; border-radius: 3px; font-family: var(--font-score); font-weight: 700; font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-2); color: var(--ink-4); border: 1px solid var(--rule); } .dossier-form .fp.W { background: var(--team-primary); color: #fff; border-color: var(--team-primary); } .dossier-form .fp.L { background: var(--paper-2); color: var(--ink-3); } /* Stack dossier below on narrower screens so the big name gets full width. */ @media (max-width: 960px) { .mast-identity { grid-template-columns: 1fr; gap: 22px; } .mast-dossier { order: 2; padding-left: 18px; border-left-width: 4px; } .dossier-serial { font-size: clamp(46px, 12vw, 72px); } .dossier-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } .dossier-v { font-size: 22px; } } @media (max-width: 480px) { .dossier-grid { grid-template-columns: 1fr 1fr; gap: 14px 18px; } } /* ---- MOBILE HERO: stack avatar above name, override legacy 56px rule ---- */ @media (max-width: 760px) { .mast-id-title { flex-direction: column; align-items: flex-start; gap: 14px; } .mast-id-avatar { width: clamp(104px, 28vw, 128px) !important; height: clamp(104px, 28vw, 128px) !important; border-width: 3px !important; box-shadow: 0 0 0 4px var(--team-primary), 0 12px 24px -14px rgba(14,13,11,0.28) !important; margin-top: 0; } .mast-id-name { font-size: clamp(56px, 13vw, 92px); line-height: 0.9; } .mast-id-chant { font-size: clamp(30px, 7.5vw, 52px); margin-top: 10px; } } /* ========================================================== PWA INSTALL NUDGE — bottom-centered toast, second-visit only Used by pwa-install.js. Respects dismiss state in localStorage. ========================================================== */ .pwa-nudge { position: fixed; bottom: 14px; left: 14px; right: 14px; max-width: 560px; margin: 0 auto; padding: 14px 16px; background: var(--ink); color: #fff; border-radius: 3px; display: flex; align-items: center; gap: 14px; box-shadow: 0 20px 46px -14px rgba(14,13,11,0.55), 0 0 0 1px rgba(255,255,255,0.06); z-index: 9900; opacity: 0; transform: translateY(16px); transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out); font-family: var(--font-body); } .pwa-nudge.on { opacity: 1; transform: translateY(0); } .pwa-nudge-body { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 3px; } .pwa-nudge-body strong { font-family: var(--font-headline); font-weight: 700; font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; } .pwa-nudge-body span { font-family: var(--font-editorial); font-style: italic; font-size: 12.5px; color: rgba(255,255,255,0.78); line-height: 1.3; } .pwa-nudge-install { background: var(--team-primary); color: #fff; border: 0; padding: 9px 14px; border-radius: 2px; font-family: var(--font-headline); font-weight: 700; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: filter 0.2s var(--ease-out); flex: 0 0 auto; } .pwa-nudge-install:hover { filter: brightness(1.06); } .pwa-nudge-close { background: transparent; color: rgba(255,255,255,0.6); border: 0; font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; flex: 0 0 auto; } .pwa-nudge-close:hover { color: #fff; } @media (prefers-reduced-motion: reduce) { .pwa-nudge { transition: none; transform: none; } } /* ---- Install instructions modal (fallback for browsers without beforeinstallprompt and non-iOS-Safari). Shares the editorial style used by the Dispatch Log / Suggestion Box modals. */ .pwa-help { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 22px; opacity: 0; pointer-events: none; transition: opacity 0.24s var(--ease-out); } .pwa-help.on { opacity: 1; pointer-events: auto; } body.pwa-help-open { overflow: hidden; } .pwa-help-backdrop { position: absolute; inset: 0; background: rgba(14,13,11,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .pwa-help-panel { position: relative; width: min(460px, 100%); background: var(--paper, #F8F4EC); color: var(--ink); border: 1px solid color-mix(in srgb, var(--team-primary) 35%, var(--rule, rgba(14,13,11,0.12))); border-radius: 4px; padding: 26px 26px 22px; box-shadow: 0 40px 80px -32px rgba(14,13,11,0.55); transform: translateY(10px) scale(0.985); transition: transform 0.32s var(--ease-out); } .pwa-help.on .pwa-help-panel { transform: translateY(0) scale(1); } .pwa-help-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 2px; color: var(--ink-2); cursor: pointer; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out); } .pwa-help-close:hover { background: rgba(14,13,11,0.05); color: var(--ink); } .pwa-help-eyebrow { font-family: var(--font-headline); font-weight: 700; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--team-primary); transition: color 0.6s var(--ease-out); } .pwa-help-title { font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.15; margin: 6px 0 10px; color: var(--ink); } .pwa-help-sub { font-family: var(--font-body); font-size: 13px; color: var(--ink-2); margin: 0 0 14px; } .pwa-help-steps { margin: 0 0 12px; padding-left: 20px; font-family: var(--font-body); font-size: 14px; color: var(--ink); line-height: 1.55; } .pwa-help-steps li { margin-bottom: 6px; } .pwa-help-foot { font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; font-size: 12.5px; color: var(--ink-3, rgba(14,13,11,0.55)); margin: 0; padding-top: 10px; border-top: 1px dashed rgba(14,13,11,0.09); } @media (prefers-reduced-motion: reduce) { .pwa-help, .pwa-help-panel { transition: none; transform: none; } } /* ========================================================== CREDITS MODAL V2 — tip section promoted to hero position Goal: warm, human ask. Ticket-stub metaphor stays. Team-colour wash subtly ties it to the user's theme. Bigger QR so phones can scan without zooming. ========================================================== */ .cm-section-label-accent { color: var(--team-primary) !important; } .cm-tip-featured { background: linear-gradient(180deg, color-mix(in srgb, var(--team-primary) 7%, var(--paper)) 0%, color-mix(in srgb, var(--team-primary) 3%, var(--paper)) 100%); border: 1px dashed color-mix(in srgb, var(--team-primary) 45%, var(--rule)); border-radius: 4px; padding: 22px 24px 20px; margin: 6px 0 4px; position: relative; transition: background 0.6s var(--ease-out), border-color 0.6s var(--ease-out); } .cm-tip-featured::before { content: '◆'; position: absolute; top: 12px; right: 16px; font-size: 9px; color: var(--team-primary); opacity: 0.55; transition: color 0.6s var(--ease-out); } .cm-tip-featured .cm-tip-head { font-size: 28px; line-height: 1.12; margin-bottom: 12px; } .cm-tip-featured .cm-tip-head em { color: var(--team-primary); transition: color 0.6s var(--ease-out); } .cm-tip-featured .cm-tip-copy { font-size: 13px; color: var(--ink-2); max-width: 36ch; margin-bottom: 14px; } /* Suggested-amount chips — nudge without pressure. */ .cm-tip-amounts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; } .cm-tip-amount { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 9px 16px 10px; min-width: 72px; border: 1px solid color-mix(in srgb, var(--team-primary) 45%, var(--rule)); border-radius: 3px; background: color-mix(in srgb, var(--team-primary) 6%, var(--paper)); transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out); } .cm-tip-amount:hover { background: color-mix(in srgb, var(--team-primary) 14%, var(--paper)); border-color: color-mix(in srgb, var(--team-primary) 70%, transparent); transform: translateY(-1px); } .cm-tip-amount-value { font-family: var(--font-score); font-weight: 700; font-size: 15.5px; line-height: 1.1; color: var(--team-ink); letter-spacing: 0.01em; } .cm-tip-amount-label { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: 10.5px; line-height: 1; color: var(--ink-3, rgba(14,13,11,0.55)); letter-spacing: 0.02em; text-transform: none; } .cm-tip-amount-free { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: 12.5px; color: var(--ink-4); margin-left: 2px; padding: 6px 0; } .cm-tip-featured .cm-tip-upi { border-color: color-mix(in srgb, var(--team-primary) 45%, var(--rule)); background: var(--paper); } .cm-tip-intl { font-family: var(--font-editorial); font-style: italic; font-size: 13px; color: var(--ink-2); margin: 12px 0 0; line-height: 1.5; } .cm-tip-intl a { font-family: var(--font-headline); font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; color: var(--team-primary); text-decoration: none; border-bottom: 1px dashed currentColor; padding: 0 2px; transition: color 0.6s var(--ease-out), border-color 0.2s ease; } .cm-tip-intl a:hover { border-bottom-style: solid; } .cm-tip-thanks { font-family: var(--font-editorial); font-style: italic; font-size: 12.5px; color: var(--ink-3); margin: 10px 0 0; line-height: 1.45; } /* Bigger QR — 200px so mid-distance camera scans work without zooming. */ .cm-tip-featured .cm-stub-qr { width: 200px; height: 200px; } .cm-tip-featured .cm-tip-stub { padding: 18px 22px 14px; } @media (max-width: 640px) { .cm-tip-featured { padding: 18px 18px 16px; } .cm-tip-featured .cm-tip-head { font-size: 22px; } .cm-tip-featured .cm-stub-qr { width: 168px; height: 168px; } .cm-tip-amounts { gap: 7px 8px; } .cm-tip-amount { padding: 7px 12px 8px; min-width: 64px; } .cm-tip-amount-value { font-size: 14px; } .cm-tip-amount-label { font-size: 9.5px; } } /* Disclaimer block inside the Credits modal — calm, factual, editorial */ .cm-disclaimer { font-family: var(--font-body); color: var(--ink-2); font-size: 13.5px; line-height: 1.6; padding: 4px 0; } .cm-disclaimer p { margin: 0 0 10px; } .cm-disclaimer p:last-child { margin-bottom: 0; } .cm-disclaimer em { font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; color: var(--team-primary); transition: color 0.6s var(--ease-out); } .cm-disclaimer strong { font-weight: 700; color: var(--ink); } /* ========================================================== EASTER EGG — HOWZAT splash overlay Triggered by tap-crest-7-times or type-HOWZAT (see easter.js). Pure transform/opacity animations, GPU cheap, fades in <2s. ========================================================== */ .howzat-overlay { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: rgba(14,13,11,0); cursor: pointer; opacity: 0; transition: opacity 0.3s var(--ease-out), background 0.4s var(--ease-out); } .howzat-overlay.on { opacity: 1; background: rgba(14,13,11,0.82); } .howzat-overlay.off { opacity: 0; background: rgba(14,13,11,0); } .howzat-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: howzat-flash 0.55s ease-out forwards; } @keyframes howzat-flash { 0% { opacity: 0; } 18% { opacity: 0.82; } 100% { opacity: 0; } } .howzat-stage { position: relative; text-align: center; color: #fff; transform: scale(0.5); opacity: 0; animation: howzat-pop 0.65s cubic-bezier(.18,1.35,.45,1) 0.18s forwards; } @keyframes howzat-pop { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .howzat-finger { width: clamp(96px, 14vw, 180px); height: auto; color: #fff; filter: drop-shadow(0 12px 30px rgba(0,0,0,0.55)); animation: howzat-finger-rise 0.7s cubic-bezier(.2,1.2,.4,1) forwards; } @keyframes howzat-finger-rise { from { transform: translateY(40px) scale(0.8); } to { transform: translateY(0) scale(1); } } .howzat-text { margin-top: 18px; font-family: 'Bebas Neue', sans-serif; font-size: clamp(80px, 16vw, 200px); letter-spacing: 0.07em; color: var(--team-primary, #EC1C24); line-height: 1; text-shadow: 0 4px 32px color-mix(in srgb, var(--team-primary, #fff) 55%, transparent); } .howzat-sub { margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: clamp(14px, 2vw, 22px); letter-spacing: 0.4em; color: rgba(255,255,255,0.82); text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .howzat-overlay, .howzat-flash, .howzat-stage, .howzat-finger { animation: none !important; } } /* ========================================================== THEME V5 — Primary CTA: "Download Pass" · Secondary: "Switch Team" Mobile is 100% of traffic. The pass download is the viral action — it needs to be the loudest button on the masthead. The team switch is a secondary "try another" action — demoted to a ghost link. ========================================================== */ /* Reset the action cluster: stack on mobile so the primary CTA goes full-width, neither button shrinks awkwardly. */ .mast-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-left: 18px; flex: 0 0 auto; min-width: 240px; } /* --- PRIMARY CTA: big solid team-color, two-line label, download icon --- */ .mast-cta-primary { display: inline-flex; align-items: center; gap: 14px; padding: 16px 22px; background: var(--team-primary); color: #fff; border: 0; border-radius: 3px; cursor: pointer; font-family: var(--font-headline); text-align: left; transition: transform 0.2s var(--ease-out), filter 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.6s var(--ease-out); box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--team-primary) 75%, transparent), inset 0 1px 0 rgba(255,255,255,0.12); } .mast-cta-primary:hover, .mast-cta-primary:focus-visible { transform: translateY(-1px); filter: brightness(1.06); outline: none; box-shadow: 0 18px 42px -14px color-mix(in srgb, var(--team-primary) 85%, transparent), inset 0 1px 0 rgba(255,255,255,0.16); } .mast-cta-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.18); color: #fff; } .mast-cta-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mast-cta-main { font-family: var(--font-headline); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; line-height: 1; } .mast-cta-sub { font-family: var(--font-editorial); font-style: italic; font-weight: 400; font-size: 12.5px; letter-spacing: 0; color: rgba(255,255,255,0.82); text-transform: none; line-height: 1.1; } /* Subtle attention pulse so the button says "tap me" without being loud. Runs 3× then stops so it doesn't annoy over time. */ .mast-cta-primary { animation: mast-cta-nudge 2.2s var(--ease-out) 2.6s 3; } @keyframes mast-cta-nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* --- SECONDARY: Switch Team · small ghost link --- */ .mast-switch-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; background: transparent; border: 1px solid var(--rule-strong); color: var(--ink-3); border-radius: 2px; font-family: var(--font-headline); font-weight: 500; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), background 0.2s var(--ease-out); } .mast-switch-ghost:hover, .mast-switch-ghost:focus-visible { border-color: var(--ink); color: var(--ink); background: var(--paper-2); outline: none; } .mast-switch-ghost .mast-switch-arrow { font-size: 11px; opacity: 0.75; } /* Mobile: CTA goes full-width of the anchor row and jumps above the Switch Team link so it's the dominant action in the user's eyeline. */ @media (max-width: 760px) { .mast-id-anchor { flex-wrap: wrap; } .mast-actions { width: 100%; margin-left: 0; margin-top: 4px; min-width: 0; gap: 8px; } .mast-cta-primary { width: 100%; justify-content: flex-start; padding: 18px 22px; } .mast-cta-main { font-size: 15px; letter-spacing: 0.16em; } .mast-cta-sub { font-size: 13px; } .mast-cta-icon { width: 44px; height: 44px; } .mast-switch-ghost { width: 100%; } } /* ---- STEP-2 STICKY CTA on mobile -------------------------- 100% of traffic is on phones. Team grid is long (10 tiles, 2-col) and the "Lock it in" button was living at the bottom of the step, forcing a scroll after every pick. Make it sticky to the stage bottom on mobile so the CTA is always one thumb-away. ---------- */ @media (max-width: 760px) { .onb-step[data-step="2"] { /* Space beneath the last row so it isn't hidden behind the sticky CTA. */ padding-bottom: 96px; } .onb-step[data-step="2"] #onb-next-2 { position: sticky; bottom: 14px; z-index: 5; margin: 20px auto 0; width: min(100%, 420px); justify-content: center; /* Stronger shadow so the dark CTA reads over team-colored tiles scrolling behind it. Plus a thin team-color halo so it feels intentional, not accidental. */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 22px 42px -14px rgba(14,13,11,0.65), 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 4px color-mix(in srgb, var(--team-primary, transparent) 18%, transparent); } } /* --- reduced motion kill switch --------------------------- */ @media (prefers-reduced-motion: reduce) { .anim-pre, .anim-in { transition: none !important; animation: none !important; transform: none !important; filter: none !important; opacity: 1 !important; } .anim-curtain, .anim-sweep { display: none !important; } .standings tbody tr.rank-one, .standings tbody tr.rank-one.mine { animation: none !important; } .lv-dot, .cd-pulse { animation: none !important; } .cd-num.anim-roll, .anim-flicker { animation: none !important; } .anim-curtain-inner { animation: none !important; opacity: 1 !important; transform: none !important; } .matchday .md-team img, .matchday .md-vs { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ========================================================== DISPATCH LOG MODAL — "What's New" changelog Broadcast-editorial voice. Matches the credits modal scaffolding (masthead + rule + timeline) so it feels native to the dashboard. ========================================================== */ /* "What's New" pill in the footer — styled like .pf-credits-btn but with a team-colour dot when there's unseen content. */ .pf-changelog-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; } .pf-cl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--team-primary); opacity: 0; transform: scale(0.6); transition: opacity 0.3s var(--ease-out), transform 0.35s var(--ease-out); box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-primary) 30%, transparent); } .pf-changelog-btn.has-new .pf-cl-dot { opacity: 1; transform: scale(1); animation: cl-dot-pulse 2.4s ease-in-out infinite; } @keyframes cl-dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-primary) 30%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--team-primary) 15%, transparent); } } /* ---- Modal scaffolding ---- */ .cl-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.28s var(--ease-out); pointer-events: none; } .cl-modal.on { opacity: 1; pointer-events: auto; } .cl-modal[hidden] { display: none; } .cl-backdrop { position: absolute; inset: 0; background: rgba(14, 13, 11, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .cl-panel { position: relative; width: min(640px, 100%); max-height: min(82vh, 820px); display: flex; flex-direction: column; background: var(--paper, #F8F4EC); color: var(--ink); border: 1px solid color-mix(in srgb, var(--team-primary) 35%, var(--rule, rgba(14,13,11,0.12))); border-radius: 4px; box-shadow: 0 40px 80px -32px rgba(14,13,11,0.55), 0 0 0 1px color-mix(in srgb, var(--team-primary) 22%, transparent); overflow: hidden; transform: translateY(12px) scale(0.985); transition: transform 0.35s var(--ease-out); } .cl-modal.on .cl-panel { transform: translateY(0) scale(1); } .cl-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 2px; color: var(--ink-2); cursor: pointer; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out); } .cl-close:hover { background: rgba(14,13,11,0.05); color: var(--ink); } .cl-head { padding: 28px 28px 14px; border-bottom: 0; } .cl-eyebrow { font-family: var(--font-headline); font-weight: 700; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--team-primary); transition: color 0.6s var(--ease-out); } .cl-title { font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; font-weight: 400; font-size: 38px; line-height: 1.05; margin: 6px 0 6px; color: var(--ink); } .cl-sub { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-3, rgba(14,13,11,0.55)); margin: 0; } .cl-rule { margin: 0 28px; height: 0; border-top: 1px solid color-mix(in srgb, var(--team-primary) 40%, var(--rule, rgba(14,13,11,0.12))); border-bottom: 1px solid color-mix(in srgb, var(--team-primary) 40%, var(--rule, rgba(14,13,11,0.12))); padding-top: 3px; } .cl-timeline { overflow-y: auto; padding: 18px 28px 10px; flex: 1 1 auto; } .cl-timeline::-webkit-scrollbar { width: 8px; } .cl-timeline::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 4px; } .cl-entry { padding: 14px 0 16px; border-bottom: 1px dashed rgba(14,13,11,0.09); } .cl-entry:last-child { border-bottom: 0; } .cl-entry-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; } .cl-date { font-family: var(--font-score, 'JetBrains Mono', monospace); font-weight: 700; font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-2); text-transform: uppercase; } .cl-entry-title { font-family: var(--font-headline); font-size: 13px; letter-spacing: 0.06em; color: var(--ink); text-transform: uppercase; } .cl-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .cl-item { display: grid; grid-template-columns: 82px 1fr; gap: 14px; align-items: baseline; } .cl-tag { font-family: var(--font-headline); font-weight: 700; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; text-align: center; display: inline-block; line-height: 1.2; justify-self: start; } .cl-tag--new { background: var(--team-primary); color: #fff; transition: background 0.6s var(--ease-out); } .cl-tag--improved { background: color-mix(in srgb, var(--team-primary) 14%, var(--paper)); color: var(--team-ink, var(--team-primary)); border: 1px solid color-mix(in srgb, var(--team-primary) 42%, transparent); } .cl-tag--fixed { background: transparent; color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); } .cl-text { font-family: var(--font-editorial, 'Instrument Serif', serif); font-size: 15px; line-height: 1.5; color: var(--ink); letter-spacing: 0.005em; } .cl-foot { padding: 14px 28px 22px; border-top: 1px dashed rgba(14,13,11,0.09); font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; font-size: 12.5px; color: var(--ink-3, rgba(14,13,11,0.55)); text-align: center; } body.cl-modal-open { overflow: hidden; } /* ========================================================== SUGGESTION BOX MODAL Same scaffolding as the Dispatch Log — native modal feel. ========================================================== */ .sg-modal { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.28s var(--ease-out); pointer-events: none; } .sg-modal.on { opacity: 1; pointer-events: auto; } .sg-modal[hidden] { display: none; } body.sg-modal-open { overflow: hidden; } .sg-backdrop { position: absolute; inset: 0; background: rgba(14, 13, 11, 0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sg-panel { position: relative; width: min(600px, 100%); max-height: min(88vh, 860px); display: flex; flex-direction: column; background: var(--paper, #F8F4EC); color: var(--ink); border: 1px solid color-mix(in srgb, var(--team-primary) 35%, var(--rule, rgba(14,13,11,0.12))); border-radius: 4px; box-shadow: 0 40px 80px -32px rgba(14,13,11,0.55); overflow: hidden; transform: translateY(12px) scale(0.985); transition: transform 0.35s var(--ease-out); } .sg-modal.on .sg-panel { transform: translateY(0) scale(1); } .sg-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 2px; color: var(--ink-2); cursor: pointer; transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out); } .sg-close:hover { background: rgba(14,13,11,0.05); color: var(--ink); } .sg-head { padding: 28px 28px 14px; } .sg-eyebrow { font-family: var(--font-headline); font-weight: 700; font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--team-primary); transition: color 0.6s var(--ease-out); } .sg-title { font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; font-weight: 400; font-size: 36px; line-height: 1.05; margin: 6px 0 6px; color: var(--ink); } .sg-sub { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-3, rgba(14,13,11,0.55)); margin: 0; } .sg-rule { margin: 0 28px; height: 0; border-top: 1px solid color-mix(in srgb, var(--team-primary) 40%, var(--rule, rgba(14,13,11,0.12))); border-bottom: 1px solid color-mix(in srgb, var(--team-primary) 40%, var(--rule, rgba(14,13,11,0.12))); padding-top: 3px; } .sg-form { padding: 18px 28px 22px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; flex: 1 1 auto; } .sg-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); } .sg-label { font-family: var(--font-headline); font-weight: 700; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); } .sg-label em { font-style: normal; color: var(--ink-3, rgba(14,13,11,0.5)); font-weight: 500; } .sg-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; } .sg-chip { font-family: var(--font-headline); font-weight: 700; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); background: transparent; color: var(--ink-2); border-radius: 2px; cursor: pointer; transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out); } .sg-chip:hover { border-color: color-mix(in srgb, var(--team-primary) 55%, transparent); color: var(--ink); } .sg-chip.on { background: var(--team-primary); border-color: var(--team-primary); color: #fff; } .sg-cat-blurb { font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; font-size: 13px; color: var(--ink-3, rgba(14,13,11,0.55)); margin-top: 4px; } .sg-input, .sg-textarea { font-family: var(--font-body); font-size: 14.5px; line-height: 1.5; color: var(--ink); padding: 11px 13px; background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 3px; outline: none; transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); width: 100%; } .sg-input:focus, .sg-textarea:focus { border-color: var(--team-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--team-primary) 18%, transparent); } .sg-textarea { resize: vertical; min-height: 110px; max-height: 320px; } .sg-count { align-self: flex-end; font-family: var(--font-score, 'JetBrains Mono', monospace); font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3, rgba(14,13,11,0.5)); margin-top: -2px; } .sg-count.near { color: var(--team-primary); } .sg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sg-privacy { font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; font-size: 12.5px; color: var(--ink-3, rgba(14,13,11,0.55)); line-height: 1.5; margin: 4px 0 -4px; } .sg-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; } .sg-cancel { background: transparent; border: 0; color: var(--ink-2); font-family: var(--font-headline); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; padding: 10px 14px; cursor: pointer; transition: color 0.2s var(--ease-out); } .sg-cancel:hover { color: var(--ink); } .sg-send { display: inline-flex; align-items: center; gap: 8px; background: var(--team-primary); color: #fff; border: 0; padding: 11px 18px; border-radius: 2px; font-family: var(--font-headline); font-weight: 700; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; cursor: pointer; transition: filter 0.2s var(--ease-out), background 0.6s var(--ease-out); } .sg-send:hover { filter: brightness(1.06); } .sg-send:disabled { opacity: 0.65; cursor: wait; } .sg-send.busy .sg-send-label::after { content: '…'; } .sg-send-arrow { font-size: 14px; line-height: 1; } .sg-send.busy .sg-send-arrow { opacity: 0.35; } .sg-status { min-height: 1.2em; font-family: var(--font-editorial, 'Instrument Serif', serif); font-style: italic; font-size: 13px; color: var(--ink-3, rgba(14,13,11,0.6)); text-align: right; } .sg-status.ok { color: var(--team-primary); font-style: normal; font-family: var(--font-headline); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; } .sg-status.err { color: #c22626; } .sg-status a { color: inherit; border-bottom: 1px dashed currentColor; } @media (max-width: 480px) { .sg-modal { padding: 12px; } .sg-head { padding: 22px 20px 12px; } .sg-rule { margin: 0 20px; } .sg-form { padding: 14px 20px 18px; } .sg-title { font-size: 30px; } .sg-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .sg-modal, .sg-panel { transition: none; transform: none; } } @media (max-width: 480px) { .cl-modal { padding: 12px; } .cl-head { padding: 22px 20px 12px; } .cl-rule { margin: 0 20px; } .cl-timeline { padding: 14px 20px 8px; } .cl-title { font-size: 30px; } .cl-item { grid-template-columns: 1fr; gap: 4px; } .cl-tag { justify-self: start; } .cl-text { font-size: 14px; } .cl-foot { padding: 12px 20px 18px; } } @media (prefers-reduced-motion: reduce) { .cl-modal, .cl-panel { transition: none; transform: none; } .pf-changelog-btn.has-new .pf-cl-dot { animation: none; } } /* ========================================================== RESPONSIVE — mobile-first fan dashboard 100% of users open this on mobile first. Every module below must collapse cleanly at 320px, 375px, and 414px. ========================================================== */ /* ---- Squad grid steps down before other modules collapse ---- */ @media (max-width: 1180px) { .squad-list { grid-template-columns: repeat(4, 1fr); } } /* ---- Tablet / small desktop ---- */ @media (max-width: 960px) { .dashboard { padding: 22px 20px 70px; } .mast { padding: 28px 32px 24px; } .tc-grid { gap: 10px 20px; } .squad-list { grid-template-columns: repeat(3, 1fr); } .squad-card::after { font-size: 68px; } } /* ---- Two-col stacks earlier so stats card has room to breathe ---- */ @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } /* ---- Large phone / small tablet ---- */ @media (max-width: 760px) { .dashboard { padding: 18px 14px 60px; } .broadcast-bar { grid-template-columns: 1fr auto; gap: 10px; padding: 10px 14px 8px; } .broadcast-bar::after { left: 14px; right: 14px; } .bb-mid { display: none; } .bb-right { gap: 12px; } .bb-label { font-size: 18px; } .bb-mark { width: 16px; height: 16px; } .bb-mark svg { width: 10px; height: 10px; } .bb-status { font-size: 9px; letter-spacing: 0.22em; } .bb-clock { font-size: 10.5px; } .ticker { height: 36px; } .tk-item { padding: 0 18px; font-size: 12px; gap: 6px; } .tk-item .tk-k { font-size: 12.5px; } .tk-badge { padding: 0 14px; font-size: 9.5px; letter-spacing: 0.22em; } .tk-badge::before { width: 5px; height: 5px; } /* Masthead */ .mast { padding: 24px 22px 22px; } .mast-top { padding-bottom: 12px; margin-bottom: 18px; gap: 10px; } .mast-top-mark { font-size: 9.5px; letter-spacing: 0.18em; flex-wrap: wrap; gap: 4px 8px; } .mast-top-serial { font-size: 10.5px; } .mast-id-name { font-size: clamp(36px, 10vw, 52px); margin-bottom: 10px; } .mast-id-chant { font-size: 14px; margin-bottom: 10px; } .mast-id-dispatch { font-size: 15px; margin-bottom: 18px; max-width: none; } .mast-id-anchor { flex-wrap: wrap; gap: 10px 12px; padding-left: 12px; } .mast-team-logo { width: 38px; height: 38px; } .mast-team-moniker { font-size: 10px; letter-spacing: 0.18em; } .mast-team-moniker em { font-size: 14px; } .mast-team-meta { font-size: 12px; } .mast-switch { margin-left: auto; padding: 6px 10px; font-size: 9px; letter-spacing: 0.18em; } .mast-dateline { gap: 8px 10px; font-size: 9.5px; letter-spacing: 0.16em; } .mast-dateline-day { font-size: 13px; } .mast-dateline-rule { display: none; } /* Matchday already stacks at 760px via existing rule */ .md-date { font-size: 22px; } .md-team img { width: 44px; height: 44px; } .md-code { font-size: 18px; } /* Countdown */ .countdown { padding: 22px 18px 20px; } .cd-num { font-size: clamp(48px, 13vw, 68px); } .cd-colon { font-size: clamp(32px, 9vw, 46px); } .cd-digits { gap: 6px; } .cd-status { font-size: 13.5px; margin-top: 16px; } /* Two-col cards — bumped horizontal padding so "THE TABLE" / "THE SCHEDULE" headers don't feel jammed against the card edge on narrow phones. */ .team-card, .stats-card, .standings-wrap, .fixtures-wrap, .intel-wrap, .squad-wrap { padding: 24px 22px; } .tc-grid { grid-template-columns: 1fr; gap: 10px 0; } .tc-label, .sc-label { font-size: 20px; } .sc-rank { font-size: clamp(80px, 22vw, 110px); } .sc-stat-v { font-size: 24px; } /* Section titles */ .sec-title { font-size: 24px; } .sec-sub { font-size: 9.5px; letter-spacing: 0.18em; } .sec-header { flex-wrap: wrap; gap: 8px 14px; padding-bottom: 12px; margin-bottom: 18px; } /* Standings — shrink cell padding, keep horizontal scroll if needed */ .standings thead th, .standings tbody td { padding: 10px 8px; font-size: 11px; } .standings .pts { font-size: 18px; } .standings .rank-num { font-size: 18px; } .standings .team-cell { gap: 8px; } .standings .team-cell img { width: 22px; height: 22px; } .standings .team-cell .team-name { font-size: 12.5px; } .standings tr.mine .team-name { font-size: 14px; } .standings .nrr-cell { font-size: 11px; } /* Fixtures — compact timeline */ .fix-row { grid-template-columns: 62px 1fr; grid-auto-rows: auto; gap: 6px 12px; padding: 14px 4px 14px 14px; } .fix-row.mine { padding-left: 14px; } .fix-date { font-size: 22px; } .fix-date .fix-day { font-size: 11.5px; margin-top: 2px; } .fix-matchup { font-size: 14px; gap: 7px; } .fix-matchup img { width: 22px; height: 22px; } .fix-venue, .fix-status { grid-column: 2; text-align: left; max-width: 100%; white-space: normal; } .fix-venue { font-size: 11.5px; line-height: 1.4; } .fix-status { font-size: 9.5px; } .fix-status.upcoming { padding: 2px 8px; } /* Intel cards already collapse via existing @720 rule; tighten padding */ .intel-card { padding: 20px 18px 18px; border-right: 0 !important; } .intel-title { font-size: 22px; max-width: 100%; } .intel-body { font-size: 13px; line-height: 1.6; } /* Squad — two up at tablet/phone */ .squad-list { grid-template-columns: repeat(2, 1fr); gap: 8px; } .squad-card { padding: 12px 12px 12px 14px; min-height: 86px; } .squad-card::after { font-size: 62px; bottom: -14px; right: -4px; } .sq-name { font-size: 14px; padding-right: 44px; } .sq-role { font-size: 8px; padding: 2px 6px; top: 10px; right: 10px; letter-spacing: 0.14em; } .sq-tag { font-size: 8.5px; letter-spacing: 0.14em; } /* Footer */ .pavilion-footer { padding: 24px 0 10px; margin-top: 40px; } .pf-tag { font-size: 18px; } .pf-perf { max-width: 320px; } } /* ---- Phone (414px & down) ---- */ @media (max-width: 480px) { .dashboard { padding: 14px 10px 50px; } .mast { padding: 20px 18px 18px; border-radius: 3px; } .mast-notch { width: 14px; height: 14px; } .mast-notch-l { left: -8px; } .mast-notch-r { right: -8px; } .mast-top-mark span:nth-child(n+5) { display: none; } /* hide tail labels */ .mast-id-anchor { border-left-width: 2px; padding-left: 10px; } .mast-dateline-tag { display: none; } /* tagline is in chant — no redundancy */ .matchday { padding: 18px 16px; gap: 14px; } .md-mid { gap: 16px; } .md-team img { width: 40px; height: 40px; } .md-date { font-size: 20px; } .md-venue { font-size: 12.5px; max-width: 100%; } .live-card { padding: 18px 16px 16px; } .lv-match { font-size: 18px; } .countdown { padding: 18px 14px 16px; } .cd-num { font-size: clamp(42px, 14vw, 58px); } .cd-colon { font-size: clamp(28px, 10vw, 40px); padding: 0 2px; } .cd-suffix { font-size: 8.5px; letter-spacing: 0.2em; margin-top: 5px; } .team-card, .stats-card, .standings-wrap, .fixtures-wrap, .intel-wrap, .squad-wrap { padding: 22px 18px; } .tc-header { flex-wrap: wrap; gap: 6px; } .tc-vibe { font-size: 15px; padding-left: 12px; } /* Fix row ultra-compact */ .fix-row { gap: 4px 10px; padding: 12px 4px 12px 12px; } .fix-row.mine { padding-left: 12px; } .fix-date { font-size: 19px; } .fix-matchup { font-size: 13px; flex-wrap: wrap; } .fix-matchup img { width: 20px; height: 20px; } .fix-matchup .fv { font-size: 12px; } /* Standings — the min-width on the scroll wrapper engages here */ .standings thead th, .standings tbody td { padding: 9px 6px; } .standings .team-cell .team-name { font-size: 11.5px; } .standings tr.mine .team-name { font-size: 13px; } .standings tr.mine td:first-child { border-left-width: 2px; padding-left: 4px; } /* Squad still two up, just slightly tighter */ .squad-card { padding: 11px 10px 11px 12px; min-height: 82px; } .squad-card::after { font-size: 54px; bottom: -12px; right: -4px; } .sq-name { font-size: 13.5px; padding-right: 40px; margin-bottom: 4px; } .sq-role { font-size: 7.5px; letter-spacing: 0.14em; top: 10px; right: 8px; padding: 2px 5px; } .sq-tag { font-size: 8px; margin: 0 0 6px; } .sq-flag { font-size: 8px; margin-top: 2px; padding: 2px 6px; } .sec-title { font-size: 21px; padding-left: 14px; } .sec-header::before { bottom: -4px; } /* Footer */ .pf-tag { font-size: 16px; } .pf-note { font-size: 11px; } } /* ---- Very small phones (iPhone SE 1st gen, 320px) ---- */ @media (max-width: 360px) { .dashboard { padding: 12px 8px 40px; } .mast { padding: 18px 14px 16px; } .mast-top-mark { font-size: 8.5px; } .mast-id-name { font-size: clamp(32px, 10vw, 44px); } .mast-team-meta { font-size: 11px; } .squad-list { grid-template-columns: 1fr; } .cd-num { font-size: 40px; } .cd-colon { font-size: 28px; } } /* ========================================================== SHARE: mast actions cluster (Share + Switch) ========================================================== */ .mast-actions { display: flex; align-items: stretch; gap: 8px; margin-left: 18px; flex: 0 0 auto; } .mast-actions .mast-switch { padding: 9px 14px; min-width: 84px; justify-content: center; } .mast-share { background: var(--team-primary); color: var(--team-text, #fff); border-color: var(--team-primary); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--team-primary) 80%, transparent); } .mast-share:hover, .mast-share:focus-visible { transform: translateY(-1px); filter: brightness(1.04); outline: none; border-color: var(--team-primary); color: var(--team-text, #fff); } @media (max-width: 640px) { .mast-actions { margin-left: auto; gap: 6px; } .mast-actions .mast-switch { min-width: 0; padding: 7px 10px; } .mast-id-avatar { width: 56px; height: 56px; border-width: 2px; box-shadow: 0 0 0 3px var(--team-primary); } .mast-id-title { gap: 14px; margin-bottom: 10px; } } /* ========================================================== SHARE MODAL ========================================================== */ .share-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.24s var(--ease-out); } .share-modal[hidden] { display: none; } .share-modal.open { opacity: 1; pointer-events: auto; } .sm-backdrop { position: absolute; inset: 0; background: rgba(14, 13, 11, 0.56); backdrop-filter: blur(6px) saturate(0.9); -webkit-backdrop-filter: blur(6px) saturate(0.9); } .sm-card { position: relative; width: min(480px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--paper-2); border: 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); padding: 32px 32px 24px; transform: translateY(14px); transition: transform 0.34s var(--ease-out); color: var(--ink); scrollbar-width: thin; } .share-modal.open .sm-card { transform: none; } .sm-close { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ink-4); cursor: pointer; transition: color 0.2s var(--ease-out); } .sm-close:hover, .sm-close:focus-visible { color: var(--ink); outline: none; } .sm-head { text-align: left; margin-bottom: 18px; padding-bottom: 14px; position: relative; } .sm-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); } .sm-folio { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px; } .sm-title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: 0.02em; margin-bottom: 6px; } .sm-sub { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 15px; color: var(--ink-3); line-height: 1.35; } .sm-preview-wrap { background: #0E0D0B; padding: 14px; margin-bottom: 16px; display: flex; justify-content: center; align-items: center; min-height: 220px; } .sm-preview { width: 100%; max-width: 220px; aspect-ratio: 9 / 16; background: var(--paper-2); position: relative; overflow: hidden; box-shadow: 0 18px 38px -18px rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; } .sm-preview-canvas { display: block; width: 100%; height: 100%; object-fit: contain; } .sm-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .sm-upload { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: transparent; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.2s, color 0.2s; } .sm-upload:hover { background: var(--ink); color: var(--paper-2); } .sm-ghost { background: transparent; border: 0; color: var(--ink-4); cursor: pointer; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; } .sm-ghost:hover { color: var(--ink); } .sm-actions { display: flex; gap: 10px; margin-bottom: 14px; } .sm-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; background: var(--ink); color: var(--canvas); border: 0; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; transition: transform 0.2s var(--ease-out), filter 0.2s var(--ease-out); } .sm-cta:hover:not(:disabled) { transform: translateY(-1px); } .sm-cta:disabled { opacity: 0.55; cursor: wait; } .sm-cta-alt { background: var(--team-primary); color: var(--team-text, #fff); } .sm-cta-arr { font-size: 14px; } .sm-cta-icon { width: 16px; height: 16px; display: block; } .sm-foot { text-align: center; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 13px; color: var(--ink-4); } /* Batch export — secondary, lives below the main CTA row. */ .sm-batch { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; margin-bottom: 14px; background: transparent; color: var(--ink-2); border: 1px dashed var(--rule-strong); border-radius: 2px; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), background 0.2s var(--ease-out); } .sm-batch:hover:not(:disabled) { color: var(--team-primary); border-color: var(--team-primary); background: color-mix(in srgb, var(--team-primary) 5%, transparent); } .sm-batch:disabled { opacity: 0.55; cursor: wait; } .sm-batch-arr { font-size: 12px; letter-spacing: 0.02em; } /* Secondary variant — same size, lighter weight, for the "copy link" action that sits below the main "Save all 10 teams" ZIP button. */ .sm-batch-alt { border-style: solid; border-color: var(--rule); margin-bottom: 12px; } .sm-batch-alt:hover:not(:disabled) { color: var(--team-primary); border-color: var(--team-primary); background: color-mix(in srgb, var(--team-primary) 4%, transparent); } @media (max-width: 500px) { .sm-card { padding: 26px 22px 20px; } .sm-title { font-size: 28px; } .sm-actions { flex-direction: column; } .sm-controls { flex-wrap: wrap; } .sm-preview { max-width: 190px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .tk-rail { animation: none; } }