/* ======================================================================= * PILATIX — Cast Receiver * * Visual language locked to the app's splash screen (see * 1-flutter-app/lib/app/modules/splash/views/splash_view.dart): * - Background: linear-gradient 135° — #FDFCFF → #FAFAFF → #DDD5FF * - Logo color: #1A1A1A (softened black, same as splash SVG filter) * - Accents: #BFA3FE (primary purple), #9D8FD9 (muted lavender) * - Motion: Cubic(0.34, 1.56, 0.64, 1.0) for reveals (bounce), * Cubic(0.16, 1.0, 0.3, 1.0) for page-enter (iOS decel) * - Radii: pill 32, XL 20, LG 16, MD 12 * * TV scaling reference: 1920×1080. Viewing distance 2-3m, so base font * sizes are roughly 2× the phone app (32px body → ~64px equivalent on * iPhone at 30cm). Everything clamps for 4K scale-up. * ===================================================================== */ /* ── Google Fonts (matches app fonts on Android/Web) ────────────────── * * Font coverage by script: * Latin (EN) → Google Sans * Hebrew (HE) → Noto Sans Hebrew ← REQUIRED, else tofu on TV * Arabic (AR) → Noto Sans Arabic * * `&display=swap` lets the browser paint fallback text until the remote * font downloads, avoiding long blank frames on slow Chromecast networks. * ───────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;600;700;800&family=Noto+Sans+Hebrew:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap'); /* ── Design tokens ────────────────────────────────────────────────── */ :root { /* Palette — from app_theme.dart + splash_view.dart */ --bg-1: #FDFCFF; --bg-2: #FAFAFF; --bg-3: #DDD5FF; --orb-a: #DDD5FF; --orb-b: #E5DEFF; --primary: #BFA3FE; /* brand purple */ --primary-dark: #9D8FD9; /* dots / muted accent */ --secondary: #F3EDFF; /* soft lavender wash */ --tertiary: #D4C4FF; --text-primary: #1A1A1A; --text-body: #212121; --text-secondary: #757575; --text-muted: #9E9E9E; --white-95: rgba(255, 255, 255, 0.95); --white-85: rgba(255, 255, 255, 0.85); --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.06); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.08); /* Radii */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-xxl: 24px; --r-pill: 32px; /* Motion */ --ease-standard: cubic-bezier(0.0, 0.0, 0.2, 1.0); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1.0); --ease-page: cubic-bezier(0.16, 1.0, 0.3, 1.0); --dur-fast: 150ms; --dur-standard: 300ms; --dur-entrance: 400ms; --dur-emphasis: 600ms; } /* ── Global reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg-1); color: var(--text-primary); /* Latin default — Hebrew/Arabic inherit via per-glyph substitution thanks to the font-family fallback chain. Explicit [dir="rtl"] override below tightens this for full RTL bodies of text. */ font-family: 'Google Sans', 'Noto Sans Hebrew', 'Noto Sans Arabic', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 32px; /* base for rem units; ~2× phone */ line-height: 1.3; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; user-select: none; -webkit-user-select: none; } /* RTL support — receiver.js sets when lang=he/ar */ [dir="rtl"] { /* Script-specific order: Hebrew first (default for lang=he), Arabic next (covers lang=ar). Google Sans stays in the chain so Latin digits / punctuation inside RTL text render in our brand face. */ font-family: 'Noto Sans Hebrew', 'Noto Sans Arabic', 'Google Sans', 'SF Arabic', sans-serif; } /* Belt-and-braces: when specifically, re-order for Arabic-first glyph matching. Browsers generally pick the right font per-codepoint anyway, but this makes intent unambiguous. */ [lang="ar"] { font-family: 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Google Sans', sans-serif; } #app { position: fixed; inset: 0; overflow: hidden; /* Lavender gradient — identical to app splash */ background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 50%, var(--bg-3) 100%); } /* ── Scene management ─────────────────────────────────────────────── */ .scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 350ms var(--ease-page), visibility 0ms linear 350ms; pointer-events: none; } #app[data-scene="splash"] .scene-splash, #app[data-scene="countdown"] .scene-countdown, #app[data-scene="intro"] .scene-intro, #app[data-scene="player"] .scene-player, #app[data-scene="rest"] .scene-rest, #app[data-scene="complete"] .scene-complete, #app[data-scene="error"] .scene-error { opacity: 1; visibility: visible; transition-delay: 0ms; pointer-events: auto; } /* ────────────────────────────────────────────────────────────────── * FLOATING ORBS (shared background decoration for non-video scenes) * Matches splash_view.dart _FloatingOrbs exactly. * ────────────────────────────────────────────────────────────────── */ .scene-splash::before, .scene-countdown::before, .scene-intro::before, .scene-rest::before, .scene-complete::before, .scene-error::before { content: ''; position: absolute; top: 5vh; right: -4vw; width: 32vh; height: 32vh; border-radius: 50%; background: radial-gradient(circle, rgba(221, 213, 255, 0.4) 0%, rgba(221, 213, 255, 0.1) 50%, transparent 75%); animation: orb-float-a 5s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } .scene-splash::after, .scene-countdown::after, .scene-intro::after, .scene-rest::after, .scene-complete::after, .scene-error::after { content: ''; position: absolute; bottom: 12vh; left: -5vw; width: 26vh; height: 26vh; border-radius: 50%; background: radial-gradient(circle, rgba(229, 222, 255, 0.35) 0%, rgba(229, 222, 255, 0.1) 50%, transparent 75%); animation: orb-float-b 5.6s ease-in-out infinite alternate; pointer-events: none; z-index: 0; } @keyframes orb-float-a { from { transform: translateY(0px); } to { transform: translateY(-20px); } } @keyframes orb-float-b { from { transform: translateY(0px); } to { transform: translateY(16px); } } /* ────────────────────────────────────────────────────────────────── * SCENE: SPLASH * Logo entrance with bounce + shimmer, loading dots. * ────────────────────────────────────────────────────────────────── */ .scene-splash { flex-direction: column; gap: 4vh; } .splash-logo { width: min(40vw, 700px); max-width: 700px; height: auto; filter: brightness(0); /* black */ animation: logo-entrance 900ms var(--ease-bounce) forwards, logo-shimmer 2400ms ease-in-out 600ms infinite; position: relative; z-index: 1; } @keyframes logo-entrance { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } @keyframes logo-shimmer { 0%, 85%, 100% { opacity: 1; } 92% { opacity: 0.75; } } .splash-status { font-size: 1rem; /* 32px base */ color: var(--text-muted); font-weight: 400; letter-spacing: 0.5px; z-index: 1; } /* Pulsing loading dots (matches _AnimatedDots in splash_view.dart) */ .splash-pulse { position: relative; width: 80px; height: 12px; z-index: 1; } .splash-pulse::before, .splash-pulse::after, .splash-pulse { --dot-color: var(--primary-dark); } .splash-pulse::before, .splash-pulse::after { content: ''; position: absolute; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--dot-color); animation: dot-pulse 1.2s ease-in-out infinite; } .splash-pulse { /* Middle dot rendered via linear-gradient on the element itself */ background: radial-gradient(circle 6px at 50% 50%, var(--primary-dark) 100%, transparent 101%) no-repeat; animation: dot-pulse 1.2s ease-in-out 0.2s infinite; } .splash-pulse::before { left: 0; animation-delay: 0s; } .splash-pulse::after { right: 0; animation-delay: 0.4s; } @keyframes dot-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1.0; } } /* ────────────────────────────────────────────────────────────────── * SCENE: COUNTDOWN (3 · 2 · 1 · GO!) * ────────────────────────────────────────────────────────────────── */ .scene-countdown { flex-direction: column; gap: 2vh; } .countdown-number { font-size: min(40vh, 420px); line-height: 1; font-weight: 800; color: var(--text-primary); letter-spacing: -8px; z-index: 1; animation: countdown-pulse 1s var(--ease-bounce) infinite; } .countdown-label { font-size: 1.25rem; font-weight: 600; color: var(--primary-dark); letter-spacing: 4px; text-transform: uppercase; z-index: 1; } @keyframes countdown-pulse { 0% { transform: scale(0.9); opacity: 0.85; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.85; } } /* ────────────────────────────────────────────────────────────────── * SCENE: EXERCISE INTRO CARD * Brief full-screen splash naming the next exercise. * ────────────────────────────────────────────────────────────────── */ .scene-intro { flex-direction: column; gap: 2vh; padding: 10vh; } .intro-eyebrow { font-size: 1rem; font-weight: 600; color: var(--primary-dark); letter-spacing: 3px; text-transform: uppercase; z-index: 1; animation: slide-up 500ms var(--ease-page) forwards; opacity: 0; transform: translateY(20px); } .intro-name { font-size: min(9vh, 110px); line-height: 1.1; font-weight: 800; color: var(--text-primary); text-align: center; letter-spacing: -2px; max-width: 80vw; z-index: 1; animation: slide-up 600ms var(--ease-bounce) 120ms forwards; opacity: 0; transform: translateY(30px); } .intro-meta { font-size: 1.1rem; font-weight: 500; color: var(--text-secondary); z-index: 1; animation: slide-up 500ms var(--ease-page) 240ms forwards; opacity: 0; transform: translateY(20px); } @keyframes slide-up { to { opacity: 1; transform: translateY(0); } } /* ────────────────────────────────────────────────────────────────── * SCENE: PLAYER (exercise or preparation video) * Dark bezel — only scene that isn't light. * ────────────────────────────────────────────────────────────────── */ .scene-player { background: #000; } #video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* preserve aspect, letterbox if needed */ background: #000; } /* Overlays — pills floating over video, matching app glass-on-dark pattern */ .player-top, .player-bottom { position: absolute; left: 3vw; right: 3vw; display: flex; align-items: center; z-index: 2; pointer-events: none; } .player-top { top: 3vh; justify-content: space-between; } .player-bottom { bottom: 3vh; justify-content: space-between; gap: 2vw; } .player-name { background: var(--white-95); color: var(--text-primary); padding: 0.5rem 1.25rem; border-radius: var(--r-md); font-size: 1rem; font-weight: 700; letter-spacing: -0.3px; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: var(--shadow-card); } .player-progress { background: var(--white-95); color: var(--text-primary); padding: 0.5rem 1rem; border-radius: var(--r-md); font-size: 0.85rem; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-card); } .player-stat { background: var(--white-95); border-radius: var(--r-lg); padding: 0.75rem 1.5rem; text-align: center; box-shadow: var(--shadow-card); min-width: 8rem; } .player-stat--primary { background: var(--primary); color: #fff; transform: scale(1.08); } .player-stat--primary .stat-label { color: rgba(255, 255, 255, 0.85); } .player-stat--primary .stat-value { color: #fff; } .stat-label { font-size: 0.55rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.2rem; } .stat-value { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; } .player-paused { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 1rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; z-index: 3; } /* PILATIX watermark — bottom-trailing, subtle */ .watermark { position: absolute; bottom: 2.5vh; right: 2.5vw; width: 8vw; max-width: 140px; opacity: 0.6; filter: invert(1) brightness(1.1); /* black logo → soft white on dark */ z-index: 2; pointer-events: none; } [dir="rtl"] .watermark { right: auto; left: 2.5vw; } /* ────────────────────────────────────────────────────────────────── * SCENE: REST * * Dark-purple gradient matching the phone exactly — see * `workout_session_view.dart:_buildRestOverlay()` which uses * #2D1B69 → #1A0F3C. Users flipping between phone and TV should see * the same "rest mode" visual language. * * The floating orbs from the shared ::before/::after decoration are * suppressed on this scene because they don't read on a dark canvas. * ────────────────────────────────────────────────────────────────── */ .scene-rest { flex-direction: column; gap: 4vh; background: linear-gradient(180deg, #2D1B69 0%, #1A0F3C 100%); } .scene-rest::before, .scene-rest::after { display: none; } .rest-eyebrow { font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, 0.55); /* matches phone's 0.5α white */ letter-spacing: 8px; text-transform: uppercase; z-index: 1; } .rest-timer { position: relative; width: min(48vh, 480px); height: min(48vh, 480px); z-index: 1; } .rest-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); /* start progress from 12 o'clock */ } .rest-timer .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); /* subtle track on dark bg */ stroke-width: 8; } .rest-timer .ring-fg { fill: none; stroke: var(--primary); /* lavender pops on deep purple */ stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s linear; } .rest-number { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: min(20vh, 220px); line-height: 1; font-weight: 800; color: #fff; letter-spacing: -6px; font-variant-numeric: tabular-nums; } .rest-nextup { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; z-index: 1; margin-top: 2vh; } .rest-nextup-label { font-size: 0.7rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); letter-spacing: 3px; text-transform: uppercase; } .rest-nextup-name { font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -0.5px; max-width: 70vw; text-align: center; } /* ────────────────────────────────────────────────────────────────── * SCENE: COMPLETE * Celebration — trophy, title, stats grid. * ────────────────────────────────────────────────────────────────── */ .scene-complete { flex-direction: column; gap: 3vh; padding: 8vh 10vw; } .complete-trophy { font-size: min(16vh, 180px); line-height: 1; animation: trophy-bounce 900ms var(--ease-bounce) forwards; transform: scale(0.5); opacity: 0; z-index: 1; } .complete-title { font-size: min(8vh, 84px); font-weight: 800; color: var(--text-primary); letter-spacing: -1.5px; text-align: center; animation: slide-up 500ms var(--ease-page) 300ms forwards; opacity: 0; transform: translateY(20px); z-index: 1; } .complete-subtitle { font-size: 1rem; font-weight: 500; color: var(--text-secondary); text-align: center; animation: slide-up 500ms var(--ease-page) 400ms forwards; opacity: 0; transform: translateY(20px); z-index: 1; } .complete-stats { display: flex; gap: 3vw; margin-top: 3vh; z-index: 1; } .complete-stat { background: var(--white-95); border-radius: var(--r-xl); padding: 1.5rem 2rem; min-width: 10rem; text-align: center; box-shadow: var(--shadow-elevated); animation: slide-up 500ms var(--ease-bounce) 500ms forwards; opacity: 0; transform: translateY(30px); } .complete-stat:nth-child(2) { animation-delay: 600ms; } .complete-stat:nth-child(3) { animation-delay: 700ms; } .complete-stat-value { font-size: 1.6rem; font-weight: 800; color: var(--primary); letter-spacing: -1px; font-variant-numeric: tabular-nums; margin-bottom: 0.3rem; } .complete-stat-label { font-size: 0.6rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 2px; text-transform: uppercase; } @keyframes trophy-bounce { to { transform: scale(1); opacity: 1; } } /* ────────────────────────────────────────────────────────────────── * SCENE: ERROR * ────────────────────────────────────────────────────────────────── */ .scene-error { flex-direction: column; gap: 2vh; padding: 10vh; } .error-icon { font-size: min(12vh, 140px); color: var(--primary-dark); z-index: 1; } .error-title { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); text-align: center; z-index: 1; } .error-body { font-size: 1rem; font-weight: 500; color: var(--text-secondary); text-align: center; max-width: 60vw; z-index: 1; } /* ── Hidden elements ──────────────────────────────────────────────── */ #music, #dubbing { display: none; } [hidden] { display: none !important; } /* ── 4K / very large TV adjustments ───────────────────────────────── */ @media (min-width: 3000px) { html, body { font-size: 48px; } } /* ── 720p Chromecast scale-down ──────────────────────────────────── */ @media (max-width: 1280px) { html, body { font-size: 24px; } }