/* ========================================================================== Centennial Yards — World Cup 2026 scoreboard layout.css — base system + per-screen layouts for all 7 LED screens. The active screen is chosen at load via ?screen=; app.js sets #stage's class to `screen--` and its native pixel width/height. Every screen renders at NATIVE resolution (no runtime scaling) except the dev `?fit=1` preview, which app.js scales to the viewport. Screens: hds-1 5856x1176 wide banner (video bg; mask: no-critical bottom-right) hds-2 608x912 portrait hds-3 352x1032 tall narrow (teams stacked) hds-4 896x1368 portrait hds-5 960x2832 corner wrap (fold seam at x=448; teams stacked) hds-6 2544x336 short banner (mask: no-critical bottom-left) rds-2 352x720 portrait (teams stacked) ========================================================================== */ /* Score number font. The design uses "Industry Black" (commercial). Drop the file at /assets/fonts/Industry-Black.woff2 (or .otf/.ttf — update the format) and it takes over automatically; until then it falls back to Saira (a close free stand-in). Self-hosted so the kiosk works offline. */ @font-face { font-family: "Industry"; src: url("/assets/fonts/Industry-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Saira"; src: url("/assets/fonts/Saira-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* ----------------------------- design tokens ---------------------------- */ :root { --cy-red: #c8102e; --cy-red-deep: #8e0a20; --cy-navy: #0a1a2f; --cy-navy-2: #0d2440; --ink: #ffffff; --ink-dim: rgba(255, 255, 255, 0.72); --panel: rgba(0, 0, 0, 0.42); --ring: rgba(255, 255, 255, 0.9); --font-ui: "Arial Narrow", "Helvetica Neue", Arial, sans-serif; --font-score: "Arial Black", "Arial Narrow", Arial, sans-serif; /* Design font is Industry Black; Saira is the fallback until the file is added. */ --font-number: "Industry", "Saira", "Arial Black", Arial, sans-serif; /* Per-screen knobs (overridden under each .screen--*). Defaults = portrait. */ --pad: 48px; --gap: 40px; --flag-size: 220px; --score-size: 260px; --name-size: 44px; --vs-size: 96px; --brand-w: 360px; --promo-size: 40px; --meta-size: 40px; --score-pad-x: 0.22em; --score-pad-y: 0.02em; --score-radius: 18px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: #000; overflow: hidden; width: 100%; height: 100%; } /* Dev preview centering (app.js adds .preview to when ?fit=1). */ body.preview { display: flex; align-items: center; justify-content: center; min-height: 100vh; } /* --------------------------- transparent mode --------------------------- */ /* ?transparent=1 → app.js adds .transparent to . The sedna Player 4K supports "transparent HTML", so when CSG composites a background loop UNDER this layer we drop every opaque base fill and key only the live graphics (scores, flags, names, branding). The score chips, flag rings, etc. keep their own fills — those are the intended graphics, not the backdrop. Higher specificity than the base rules, so source order is irrelevant. */ html.transparent, html.transparent body { background: transparent; } html.transparent .stage { background: transparent; } html.transparent .bg-video, html.transparent .bg-fallback { display: none; } html.transparent .state-overlay { background: transparent; } /* --------------------------- standby (disabled) ------------------------- */ /* Admin "enabled = false" (via /api/screen-config): blank the screen. Every layer is hidden and the stage paints black (transparent when keyed). */ .stage.standby { background: #000 !important; } .stage.standby > * { visibility: hidden !important; } html.transparent .stage.standby { background: transparent !important; } /* ---- scores-only overlay (?overlay=scores) — key over CSG team videos ---- The CSG ProRes video supplies the background, team panels and flags; we draw only the live score numbers + clock, positioned per screen via the --ov-* variables (set by render.applyOverlayLayout from screens.js overlay map). */ html.overlay-scores .brand, html.overlay-scores .flag, html.overlay-scores .team-name, html.overlay-scores .vs, html.overlay-scores .promo, html.overlay-scores .rotation-dots, html.overlay-scores .state-overlay, html.overlay-scores #status-label { display: none !important; } /* Neutralize the per-screen layout containers so the scores/clock position relative to the FULL stage (#content), not an offset/translated scoreboard. */ html.overlay-scores .content { position: absolute; inset: 0; display: block; padding: 0; margin: 0; } html.overlay-scores .scoreboard, html.overlay-scores .team, html.overlay-scores .match-meta { position: static; left: auto; top: auto; right: auto; bottom: auto; width: auto; height: auto; transform: none; display: block; padding: 0; margin: 0; gap: 0; background: none; border-radius: 0; box-shadow: none; } html.overlay-scores #home-score { position: absolute; left: var(--ov-home-x, 50%); top: var(--ov-home-y, 50%); transform: translate(-50%, -50%); font-size: var(--ov-home-size, 220px); margin: 0; } html.overlay-scores #away-score { position: absolute; left: var(--ov-away-x, 50%); top: var(--ov-away-y, 50%); transform: translate(-50%, -50%); font-size: var(--ov-away-size, 220px); margin: 0; } html.overlay-scores #minute { position: absolute; left: var(--ov-clock-x, 50%); top: var(--ov-clock-y, 50%); transform: translate(-50%, -50%); font-size: var(--ov-clock-size, 64px); white-space: nowrap; } /* ------------------------------- stage ---------------------------------- */ .stage { position: relative; overflow: hidden; background: var(--cy-navy); color: var(--ink); font-family: var(--font-ui); /* width/height are set inline by app.js to the screen's native size. */ } .layer { position: absolute; inset: 0; } /* ---------------------------- backgrounds ------------------------------- */ .bg-video { width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; /* above the fallback layer so the video isn't hidden by it */ background: #000; } /* Hidden until a real source is attached and playing (app.js toggles). */ .bg-video:not([src]) { display: none; } .bg-fallback { z-index: 0; background: radial-gradient(120% 90% at 50% -10%, var(--cy-navy-2) 0%, var(--cy-navy) 55%, #050d18 100%); } /* Faint pitch grid. */ .bg-grid { position: absolute; inset: 0; opacity: 0.14; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.6) 0 2px, transparent 2px 140px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 2px, transparent 2px 140px); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); } /* Slow red glow — cheap, GPU-friendly, safe to run for days. */ .bg-glow { position: absolute; inset: -10%; background: radial-gradient(40% 50% at 18% 78%, rgba(200, 16, 46, 0.55), transparent 70%), radial-gradient(38% 46% at 86% 22%, rgba(200, 16, 46, 0.32), transparent 70%); animation: glowPulse 9s ease-in-out infinite alternate; will-change: opacity; } @keyframes glowPulse { from { opacity: 0.65; } to { opacity: 1; } } /* When a video bg is present, soften the fallback so it only fills letterbox gaps. */ .stage.has-video .bg-glow { display: none; } .stage.has-video .bg-grid { opacity: 0.06; } /* Static CSG background image (PNG) painted on the fallback layer. */ .stage.has-bg-image .bg-fallback { background: var(--bg-image) center / cover no-repeat, var(--cy-navy); } .stage.has-bg-image .bg-grid, .stage.has-bg-image .bg-glow { display: none; } /* A CSG background bakes in the Centennial Yards logo + "ATL LOUD!" promo, so hide ours to avoid duplicates (self-contained mode over a CSG render). */ .stage.csg-bg .brand, .stage.csg-bg .promo { display: none; } /* With brand/promo hidden, centre the scoreboard + clock cluster in the BG's empty middle band instead of pushing the clock to the bottom (over the baked "ATL LOUD!"). Only affects the flex-column screens; banners use block layout. */ .stage.csg-bg .content { justify-content: center; gap: calc(var(--gap) * 0.55); } .stage.csg-bg .scoreboard { flex: 0 1 auto; } /* ----- team-mode: CSG animated team videos for flags/panels, scores only ----- */ .team-mov { width: 100%; height: 100%; object-fit: cover; z-index: 1; /* above bg-video grass, below content scores */ display: none; } .stage.team-mode .team-mov { display: block; } /* Static team panels (HDS-6 — no motion). Show images, hide the video movs. */ .team-img { width: 100%; height: 100%; object-fit: cover; z-index: 1; display: none; } .stage.team-static .team-img { display: block; } .stage.team-static .team-mov { display: none; } /* No score fade on the static screen. */ .stage.team-static .score-fade { animation: none; } /* CSG "VS" badge overlay (above the team movs, below the scores). */ .vs-overlay { width: 100%; height: 100%; object-fit: cover; z-index: 1; display: none; } .stage.team-mode .vs-overlay { display: block; } .vs-overlay[hidden] { display: none !important; } /* The team movs provide the panels + flags + VS; hide all of ours. */ .stage.team-mode .flag, .stage.team-mode .team-name, .stage.team-mode .vs, .stage.team-mode .rotation-dots { display: none !important; } .stage.team-mode .team { background: none; padding: 0; box-shadow: none; } /* Neutralize layout containers so scores position against the full stage. */ .stage.team-mode .content { position: absolute; inset: 0; display: block; padding: 0; } .stage.team-mode .scoreboard, .stage.team-mode .team, .stage.team-mode .match-meta { position: static; left: auto; top: auto; right: auto; bottom: auto; width: auto; height: auto; transform: none; display: block; padding: 0; margin: 0; gap: 0; } .stage.team-mode #home-score { position: absolute; left: var(--ov-home-x, 50%); top: var(--ov-home-y, 50%); transform: translate(-50%, -50%); font-size: var(--ov-home-size, 220px); } .stage.team-mode #away-score { position: absolute; left: var(--ov-away-x, 50%); top: var(--ov-away-y, 50%); transform: translate(-50%, -50%); font-size: var(--ov-away-size, 220px); } .stage.team-mode #minute { position: absolute; left: var(--ov-clock-x, 50%); top: var(--ov-clock-y, 50%); transform: translate(-50%, -50%); font-size: var(--ov-clock-size, 64px); white-space: nowrap; } /* Match phase (1ST HALF / 2ND HALF / FINAL) shown below the flags — no ticking minute. Plain white text in the score font (Saira), not the old red pill. */ .stage.team-mode #minute { background: none; padding: 0; border-radius: 0; box-shadow: none; color: #fff; font-family: var(--font-number); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; } .stage.team-mode #status-label { display: none; } /* HDS-1 (wide banner): no phase text — the banner has no room for it. */ .screen--hds-1 #minute { display: none; } /* Scores rise a small amount from below + fade in on a match change (the scores are centered with translate(-50%,-50%), so the keyframe keeps that and adds a small upward offset — bottom-to-top over a short distance, not the full frame). */ @keyframes scoreFadeIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 0.22em)); } to { opacity: 1; transform: translate(-50%, -50%); } } .score.score-prehide { opacity: 0; } .score.score-fade { animation: scoreFadeIn 3s ease both; } /* Mirror scores are only used on the HDS-5 combined corner. */ .score-mirror { display: none; } /* HDS-5 combined corner: each team mov mirrors its team across BOTH faces in the upper band. Keep the away mov up top and shift the home mov into the lower band → away on top, home below, on both faces; a score sits on each face. */ .screen--hds-5 #team-home-mov { transform: translateY(1220px); } .screen--hds-5.team-mode #away-score, .screen--hds-5.team-mode #away-score-2, .screen--hds-5.team-mode #home-score, .screen--hds-5.team-mode #home-score-2 { position: absolute; transform: translate(-50%, -50%); font-size: 300px; display: block; } .screen--hds-5.team-mode #away-score { left: 231px; top: 1140px; } .screen--hds-5.team-mode #away-score-2 { left: 711px; top: 1140px; } .screen--hds-5.team-mode #home-score { left: 231px; top: 2360px; } .screen--hds-5.team-mode #home-score-2 { left: 711px; top: 2360px; } /* ------------------------------ content --------------------------------- */ .content { z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: var(--pad); gap: var(--gap); } .brand { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .brand-logo { width: var(--brand-w); max-width: 80%; height: auto; display: block; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)); } .scoreboard { flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--gap); min-height: 0; } .team { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--gap) * 0.35); min-width: 0; /* Team-coloured panel: flag on top, big white score at the bottom. */ padding: calc(var(--flag-size) * 0.13) calc(var(--flag-size) * 0.17) calc(var(--flag-size) * 0.11); border-radius: calc(var(--flag-size) * 0.13); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.06); } /* Home = blue panel, Away = red panel (matches the CY look). */ .team-home { background: linear-gradient(180deg, #34529e 0%, #1a2c63 58%, #0f1d45 100%); } .team-away { background: linear-gradient(180deg, #c4313b 0%, #84161d 62%, #5c0e15 100%); } .flag { width: var(--flag-size); height: var(--flag-size); border-radius: 50%; overflow: hidden; background: #11243c; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.92), 0 0 0 12px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(0, 0, 0, 0.55); flex: 0 0 auto; } .flag-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The CY look identifies teams by flag only — no name labels. */ .team-name { display: none; } /* Score = large white number sitting on the team panel (no separate box). */ .score { font-family: var(--font-number); font-size: var(--score-size); line-height: 0.82; font-weight: 900; color: var(--ink); text-align: center; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums; } /* VS = small dark box with white text, between the two panels. */ .vs { flex: 0 0 auto; font-family: var(--font-score); font-size: var(--vs-size); font-weight: 900; color: var(--ink); background: #141414; padding: 0.12em 0.26em; border-radius: 0.14em; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } .vs span { display: inline-block; } .match-meta { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 0.6em; font-size: var(--meta-size); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .minute { color: var(--ink); background: var(--cy-red); padding: 0.16em 0.6em; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); font-variant-numeric: tabular-nums; } .minute:empty { display: none; } .status-label { color: var(--ink-dim); } .status-label:empty { display: none; } .promo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2em; text-align: center; text-transform: uppercase; } .promo-text { font-size: var(--promo-size); font-weight: 700; letter-spacing: 0.1em; color: var(--ink); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); } .promo-loud { font-family: var(--font-score); font-size: calc(var(--promo-size) * 1.15); letter-spacing: 0.04em; color: var(--ink); } .promo-loud b { color: var(--cy-red); } /* --------------------------- state visibility --------------------------- */ .state-overlay { z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5em; background: radial-gradient(120% 90% at 50% 30%, var(--cy-navy-2), var(--cy-navy) 60%, #050d18 100%); opacity: 0; visibility: hidden; transition: opacity 0.6s ease; } .overlay-logo { width: var(--brand-w); max-width: 70%; height: auto; } .overlay-title { font-family: var(--font-score); font-size: var(--vs-size); letter-spacing: 0.12em; color: var(--ink); } .overlay-sub { font-size: var(--promo-size); letter-spacing: 0.22em; color: var(--cy-red); text-transform: uppercase; } /* idle -> show branded overlay, hide live content */ .stage[data-status="idle"] .state-overlay { opacity: 1; visibility: visible; } .stage[data-status="idle"] .scoreboard, .stage[data-status="idle"] .match-meta { opacity: 0; visibility: hidden; } /* scheduled -> show board (0-0) + countdown label, no live minute */ .stage[data-status="scheduled"] .minute { display: none; } /* --------------------------- score transition --------------------------- */ /* transition.js adds one of these classes to #stage; all trigger a flash. (Used when no alpha-WebM transition asset is shipped.) */ .stage::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9), rgba(200, 16, 46, 0.65) 45%, transparent 72%); } .stage.flash::after, .stage.flash-goal::after, .stage.flash-goal-home::after, .stage.flash-goal-away::after, .stage.flash-status::after { animation: goalFlash 1.2s ease-out; } @keyframes goalFlash { 0% { opacity: 0; transform: scale(0.6); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } } .transition { z-index: 4; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; } .transition.is-playing { opacity: 1; } /* ------------------------------ stale badge ----------------------------- */ .stale-badge { position: absolute; z-index: 6; top: 1.2%; left: 1.2%; font-size: var(--meta-size); font-weight: 700; letter-spacing: 0.08em; color: #ffd1d8; background: rgba(142, 10, 32, 0.78); padding: 0.2em 0.7em; border-radius: 999px; text-transform: uppercase; } .stale-badge[hidden] { display: none; } /* ---------------------- auto-swipe (game rotation) ---------------------- */ /* render.js toggles these on #content; the rotator drives it on a timer. */ .content.swipe-out { animation: swipeOut 0.42s cubic-bezier(0.4, 0, 1, 1) forwards; } .content.swipe-in { animation: swipeIn 0.42s cubic-bezier(0, 0, 0.2, 1) forwards; } @keyframes swipeOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-7%); } } @keyframes swipeIn { from { opacity: 0; transform: translateX(7%); } to { opacity: 1; transform: translateX(0); } } /* --------------------------- rotation dots ------------------------------ */ .rotation-dots { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--meta-size) * 0.5); transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--meta-size) * 0.5); } .rotation-dots[hidden] { display: none; } .rotation-dots .dot { width: calc(var(--meta-size) * 0.45); height: calc(var(--meta-size) * 0.45); border-radius: 50%; background: rgba(255, 255, 255, 0.32); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease, transform 0.3s ease; } .rotation-dots .dot.active { background: var(--cy-red); transform: scale(1.3); } /* ======================================================================== */ /* PER-SCREEN LAYOUTS */ /* ======================================================================== */ /* ---- HDS-1 5856x1176 wide banner ------------------------------------- */ /* Brand top-left, scoreboard left/center (full height, teams side by side as flag-over-score), promo TOP-right to stay clear of the no-critical bottom-right mask zone. Absolute layout. */ .screen--hds-1 { --flag-size: 400px; --score-size: 360px; --name-size: 56px; --vs-size: 220px; --brand-w: 720px; --promo-size: 120px; --meta-size: 110px; } .screen--hds-1 .content { display: block; padding: 0; } /* HDS-1's CSG background bakes in the "VS" + a clock box, so hide our VS and drop the clock into the baked box (centred under the VS). */ .screen--hds-1 .vs { display: none; } .screen--hds-1 .brand { position: absolute; top: 80px; left: 96px; justify-content: flex-start; } .screen--hds-1 .scoreboard { position: absolute; top: 0; bottom: 0; left: 360px; width: 2520px; gap: 360px; /* clear the baked "VS" + clock box between the panels */ } .screen--hds-1 .team-name { max-width: 820px; } .screen--hds-1 .match-meta { position: absolute; top: 900px; left: 360px; width: 2520px; justify-content: center; } .screen--hds-1 .promo { position: absolute; top: 150px; right: 150px; width: 2280px; align-items: flex-end; } .screen--hds-1 .promo-text { font-size: 150px; letter-spacing: 0.05em; } .screen--hds-1 .promo-loud { font-size: 130px; } /* ---- HDS-6 2544x336 short banner ------------------------------------- */ /* Brand top-left (clear of no-critical bottom-left), scoreboard centered with each team as flag BESIDE score (height is only 336px), promo right. Team names hidden. */ .screen--hds-6 { --flag-size: 232px; --score-size: 218px; --vs-size: 120px; --brand-w: 360px; --promo-size: 52px; --meta-size: 40px; } .screen--hds-6 .content { display: block; padding: 0; } .screen--hds-6 .team-name { display: none; } .screen--hds-6 .team { flex-direction: row; gap: 26px; } .screen--hds-6 .brand { position: absolute; top: 22px; left: 60px; justify-content: flex-start; } .screen--hds-6 .scoreboard { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1500px; gap: 70px; } .screen--hds-6 .match-meta { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); } .screen--hds-6 .promo { position: absolute; top: 50%; transform: translateY(-50%); right: 70px; width: 560px; align-items: flex-end; } /* ---- HDS-2 608x912 portrait (teams side by side) --------------------- */ .screen--hds-2 { --pad: 36px; --gap: 18px; --flag-size: 150px; --score-size: 128px; --name-size: 30px; --vs-size: 80px; --brand-w: 300px; --promo-size: 32px; --meta-size: 32px; } /* ---- HDS-4 896x1368 portrait (teams side by side) -------------------- */ .screen--hds-4 { --pad: 50px; --gap: 28px; --flag-size: 230px; --score-size: 180px; --name-size: 44px; --vs-size: 110px; --brand-w: 480px; --promo-size: 48px; --meta-size: 48px; } /* ---- HDS-3 352x1032 tall narrow (teams STACKED to use the height) ----- */ .screen--hds-3 { --pad: 22px; --gap: 18px; --flag-size: 120px; --score-size: 140px; --name-size: 24px; --vs-size: 64px; --brand-w: 220px; --promo-size: 28px; --meta-size: 26px; } .screen--hds-3 .scoreboard { flex-direction: column; } /* ---- RDS-2 352x720 portrait (teams side by side, compact; names hidden) */ .screen--rds-2 { --pad: 18px; --gap: 14px; --flag-size: 104px; --score-size: 90px; --name-size: 20px; --vs-size: 52px; --brand-w: 180px; --promo-size: 22px; --meta-size: 22px; } .screen--rds-2 .team-name { display: none; } /* ---- HDS-5 960x2832 corner wrap (teams STACKED, large) --------------- */ /* Fold seam at x=448 (448 + 512). Content is centered across the full width; the seam line is shown only in dev preview. Big, tall, vertical stack. */ .screen--hds-5 { --pad: 70px; --gap: 44px; --flag-size: 340px; --score-size: 420px; --name-size: 64px; --vs-size: 150px; --brand-w: 480px; --promo-size: 84px; --meta-size: 64px; } .screen--hds-5 .scoreboard { flex-direction: column; } .screen--hds-5.has-fold::before { /* dev-preview seam guide; invisible in production-native unless ?fit shows it */ content: ""; position: absolute; top: 0; bottom: 0; left: var(--fold, 448px); width: 2px; z-index: 7; background: rgba(255, 255, 255, 0.12); pointer-events: none; }