/* ============================================================================ fxcam-jumbotron-modern.css — broadcast-grade reskin for fxcam-jumbotron.html. Layered ON TOP of the existing styles; targets real elements only, changes NO ids/markup, reversible by removing the . IMPORTANT: every typeface, size and colour is sourced from the per-game JSON theme (the --font-family / --secondary-font-family / --font-size / --secondary-font-size / --*-color vars the page sets on ). The values below are only FALLBACKS for games that don't specify them — the aicam look (Archivo + IBM Plex Mono, amber) is the default, the client theme wins. Tokens live on (not :root) so they can read those body-set vars. ============================================================================ */ body { /* type — from config, aicam pairing as fallback */ --fx-sans: var(--font-family, "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); --fx-mono: var(--secondary-font-family, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace); --fx-base: var(--font-size, 1rem); --fx-label: var(--secondary-font-size, 0.72rem); /* colour — from config, dark broadcast palette as fallback */ --fx-ink: var(--background-color, #0b0e14); --fx-text: var(--primary-color, #eceef2); --fx-amber: var(--secondary-color, #ffb02e); --fx-tally: #ff2e3f; /* semantic LIVE cue — intentionally not themeable */ --fx-ok: #3ddc84; /* derived neutrals so panels/lines track whatever ground the theme sets */ --fx-dim: color-mix(in srgb, var(--fx-text) 55%, transparent); --fx-line: color-mix(in srgb, var(--fx-text) 15%, transparent); --fx-glass: color-mix(in srgb, var(--fx-ink) 62%, transparent); } /* Living background instead of flat colour */ .container { background-color: var(--fx-ink) !important; font-family: var(--fx-sans); font-size: var(--fx-base); } .container::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(46% 62% at 18% 26%, color-mix(in srgb, var(--fx-amber) 12%, transparent), transparent 60%), radial-gradient(46% 62% at 84% 74%, color-mix(in srgb, var(--fx-text) 8%, transparent), transparent 60%); animation: fxDrift 16s ease-in-out infinite alternate; } /* ---- Left panel: magnetic "Scan to join" ---- */ .left-panel { gap: 3vh; z-index: 3; } #qrcode::after { content: ""; position: absolute; inset: -10px; border: 2px solid var(--fx-amber); border-radius: 22px; opacity: 0.7; animation: fxPing 2.6s ease-out infinite; } #queueCount { font-family: var(--fx-mono); font-size: calc(var(--fx-label) * 1.15); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-dim); } #queueCount b { color: var(--fx-ok); font-weight: 600; } /* Notice / QR caption sits right under the QR (config `notice` text) */ .left-panel #notice { font-family: var(--fx-sans); font-weight: 600; font-size: clamp(calc(var(--fx-base) * 1), 2vw, calc(var(--fx-base) * 1.55)); line-height: 1.25; letter-spacing: -0.01em; color: var(--fx-text); text-wrap: balance; max-width: 92%; margin: 0 auto; } /* Partner banner (header_logo) pinned to the bottom of the left panel */ .left-panel #header_logo { margin-top: auto; /* push to the bottom of the flex column */ max-width: 62%; max-height: 15vh; object-fit: contain; opacity: 0.92; } /* ---- Video panel: cinematic framed fan ---- */ .video-panel { z-index: 1; } #deepar-container { border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 120px rgba(0, 0, 0, 0.5), 0 0 60px color-mix(in srgb, var(--fx-amber) 8%, transparent); } #deepar-container canvas { border-radius: 18px; } /* ---- Broadcast lower-third (restyles .stream-info) ---- Anchored bottom-right over the fan screen (matches the v2 mockup nameplate). NB: no `!important` on display — the page toggles it via inline style (`display:none` idle / `flex` live), and an !important here would defeat that, pinning the plate on screen even with no fan. */ .stream-info { top: auto; left: auto; right: 3%; bottom: 18%; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 14px; background: var(--fx-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--fx-line); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42); animation: fxSlideIn 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .stream-info::before { content: ""; width: 4px; align-self: stretch; border-radius: 3px; background: var(--fx-amber); } #currentNickname { font-family: var(--fx-sans); font-weight: 800; font-size: clamp(calc(var(--fx-base) * 0.95), 2.2vw, calc(var(--fx-base) * 1.7)); letter-spacing: -0.01em; color: var(--fx-text); line-height: 1; } /* ---- Tally-light LIVE (restyles .live-badge) ---- */ .live-badge { font-family: var(--fx-mono); font-size: var(--fx-label); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: rgba(255, 46, 63, 0.16); border: 1px solid rgba(255, 46, 63, 0.5); border-radius: 999px; padding: 6px 12px 6px 10px; display: inline-flex; align-items: center; gap: 8px; } .live-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fx-tally); animation: fxTally 1.8s ease-out infinite; } @keyframes fxTally { 0% { box-shadow: 0 0 0 0 rgba(255, 46, 63, 0.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255, 46, 63, 0); } } @keyframes fxPing { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(1.16); opacity: 0; } } @keyframes fxDrift { from { transform: translate3d(-1.5%, -1%, 0) scale(1.03); } to { transform: translate3d(1.5%, 1%, 0) scale(1.06); } } @keyframes fxSlideIn { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .container::before, .live-badge::before, #qrcode::after, .stream-info { animation: none !important; } } /* ============================================================================ ARCADE CABINET — deep neon/CRT skin for the jumbotron. This runs on a dedicated venue machine, so it can afford the full treatment: animated neon grid, scrolling scanlines, CRT vignette, glowing "SCAN TO PLAY" panel and player-plate. Accent flows from the client theme; a cool counter-neon adds the classic arcade duotone. ============================================================================ */ body { --primary-color: var(--fx-amber); --secondary-color: color-mix(in srgb, var(--fx-amber) 30%, #17e0ff); /* cyan counter-glow */ } /* Deep arcade ground: perspective neon grid that scrolls toward the horizon, plus a scanline sheet and a CRT vignette over the whole cabinet. */ .container::before { background: linear-gradient(color-mix(in srgb, var(--primary-color) 3%, transparent), transparent 45%), repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in srgb, var(--secondary-color) 16%, transparent) 46px 48px), repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--secondary-color) 10%, transparent) 46px 48px), radial-gradient(120% 80% at 50% 118%, color-mix(in srgb, var(--primary-color) 22%, transparent), transparent 60%) !important; animation: fxGrid 8s linear infinite !important; opacity: 0.6; } .container::after { content: ""; position: absolute; inset: 0; z-index: 9990; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 4px), radial-gradient(130% 110% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 100%); mix-blend-mode: multiply; } /* The fan feed = the game screen: thick neon bezel, glow, inner scanlines. STATIC glow — do NOT animate box-shadow here: this element hosts the live WebGL (DeepAR) canvas, and repainting its layer every frame around an active WebGL context + SFU decode can exhaust / drop the context on the venue GPU (the feed goes black). Same reason the phone's #videoContainer glow is static. */ #deepar-container { border: 3px solid var(--primary-color) !important; box-shadow: 0 0 26px color-mix(in srgb, var(--primary-color) 78%, transparent), 0 0 80px color-mix(in srgb, var(--primary-color) 34%, transparent), inset 0 0 120px rgba(0, 0, 0, 0.5) !important; } .video-panel::after { content: ""; position: absolute; inset: 3.2%; z-index: 4; pointer-events: none; border-radius: 18px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 4px); } /* "SCAN TO PLAY" panel — arcade attract copy + glowing cartridge QR. */ .left-panel #notice { color: var(--primary-color) !important; text-transform: uppercase; letter-spacing: 0.08em; text-shadow: 0 0 12px color-mix(in srgb, var(--primary-color) 70%, transparent), 0 0 34px color-mix(in srgb, var(--primary-color) 35%, transparent); } /* "Intro QR Code" text (config d.intro.intro) IS the attract line on top of the QR: blinking neon-2 mono cap, hidden once a fan is live (inherits the old #fxAttract design). Copy stays fully config-driven — no hardcoded string. */ .left-panel #qrIntro { font-family: var(--fx-mono); font-size: clamp(calc(var(--fx-base) * 0.7), 1.4vw, calc(var(--fx-base) * 1.05)); letter-spacing: 0.32em; text-transform: uppercase; text-align: center; color: var(--secondary-color); text-shadow: 0 0 12px color-mix(in srgb, var(--secondary-color) 80%, transparent); animation: fxBlink 1.1s steps(1) infinite; } body.fxlive #qrIntro { display: none; } /* someone's already playing */ /* ---- Standby (no fan live) = full-screen title + QR ---- Idle, the title + QR take the whole cabinet (attract mode). The split layout (QR left / fan right) returns the instant a fan goes live (body.fxlive), driven by the same observer that hides the attract line. */ .left-panel { transition: width 0.4s ease; } body:not(.fxlive) .left-panel { width: 100%; justify-content: start; /* centre the QR block vertically on the full screen */ } body:not(.fxlive) .video-panel { display: none; } body:not(.fxlive) #qrcode { max-width: 62vh; } /* larger QR for the big screen */ body:not(.fxlive) #qrIntro { font-size: clamp(calc(var(--fx-base) * 1), 2vw, calc(var(--fx-base) * 1.5)); } body:not(.fxlive) #fxMarqueeTitle { font-size: clamp(calc(var(--fx-base) * 1.8), 4.4vw, calc(var(--fx-base) * 3.6)); } #queueCount { color: var(--secondary-color) !important; text-shadow: 0 0 10px color-mix(in srgb, var(--secondary-color) 70%, transparent); } #queueCount b { color: #fff !important; text-shadow: 0 0 10px var(--fx-ok); } /* Player plate (lower-third) — glowing arcade nameplate with a "PLAYER 1" tag. */ .stream-info { border: 1px solid var(--primary-color) !important; box-shadow: 0 0 18px color-mix(in srgb, var(--primary-color) 55%, transparent), 0 12px 34px rgba(0,0,0,.5) !important; } .stream-info::before { box-shadow: 0 0 12px var(--primary-color); } #currentNickname { color: #fff !important; text-transform: uppercase; text-shadow: 0 0 12px var(--primary-color), 0 0 30px color-mix(in srgb, var(--primary-color) 45%, transparent); } #currentNickname::before { /* Player tag is i18n-driven (fxcam.player-tag → --fx-p1-tag, incl. trailing space). */ content: var(--fx-p1-tag, "P1 "); font-family: var(--fx-mono); color: var(--secondary-color); text-shadow: 0 0 10px var(--secondary-color); } /* Neon LIVE tally with an arcade flicker. */ .live-badge { box-shadow: 0 0 12px var(--fx-tally), 0 0 26px color-mix(in srgb, var(--fx-tally) 45%, transparent) !important; text-shadow: 0 0 10px var(--fx-tally); animation: fxBlink 3.5s steps(1) infinite; } /* ---- Cabinet marquee (top-of-cabinet title band, from the approved v2 mockup) ---- Absolutely positioned so it overlays without reflowing the QR / video columns. Title text is the game title (JS), subtitle is i18n-driven. */ #fxMarquee { position: absolute; top: 2.4%; left: 0; right: 0; z-index: 40; text-align: center; pointer-events: none; font-family: var(--fx-sans); } #fxMarqueeTitle { display: inline-block; font-weight: 800; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; font-size: clamp(calc(var(--fx-base) * 1.3), 3.2vw, calc(var(--fx-base) * 2.6)); color: #fff; text-shadow: 0 0 12px var(--primary-color), 0 0 34px color-mix(in srgb, var(--primary-color) 45%, transparent), 2px 2px 0 color-mix(in srgb, var(--secondary-color) 90%, #ff2e7a); } #fxMarqueeSub { display: block; margin-top: 0.35em; font-family: var(--fx-mono); font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase; font-size: clamp(calc(var(--fx-base) * 0.62), 1.2vw, calc(var(--fx-base) * 0.92)); color: var(--secondary-color); text-shadow: 0 0 10px color-mix(in srgb, var(--secondary-color) 75%, transparent); } /* ---- Duo = VS split: neon seam + VS badge over the composited two-fan canvas ---- Pure overlay on #deepar-container (which in duo shows both fans side by side); no DOM/JS layout change. */ body.fxduo #deepar-container::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); z-index: 6; background: var(--secondary-color); box-shadow: 0 0 18px var(--secondary-color), 0 0 40px color-mix(in srgb, var(--secondary-color) 55%, transparent); pointer-events: none; } body.fxduo #deepar-container::after { content: var(--fx-vs, "VS"); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; font-family: var(--fx-sans); font-weight: 800; font-style: italic; font-size: clamp(calc(var(--fx-base) * 1.6), 4vw, calc(var(--fx-base) * 3.4)); color: #fff; text-shadow: 0 0 16px #ff2e7a, 0 0 34px #ff2e7a, 2px 2px 0 var(--secondary-color); pointer-events: none; } /* In duo the single nameplate carries both fans — drop the P1 tag there. */ body.fxduo #currentNickname::before { content: ""; } @keyframes fxGrid { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 48px, 48px 0, 0 0; } } @keyframes fxScreenPulse { 0%, 100% { box-shadow: 0 0 20px color-mix(in srgb, var(--primary-color) 60%, transparent), 0 0 60px color-mix(in srgb, var(--primary-color) 25%, transparent), inset 0 0 120px rgba(0,0,0,.5); } 50% { box-shadow: 0 0 32px color-mix(in srgb, var(--primary-color) 90%, transparent), 0 0 90px color-mix(in srgb, var(--primary-color) 45%, transparent), inset 0 0 120px rgba(0,0,0,.5); } } @keyframes fxBlink { 0%, 60%, 100% { opacity: 1; } 62%, 88% { opacity: 0.45; } } @media (prefers-reduced-motion: reduce) { .container::before, #deepar-container, #qrIntro, .live-badge { animation: none !important; } }