/* ====================================================================== Brasil Paralelo — Cast Custom Receiver Styles ====================================================================== */ /* --- Fonts --- */ @font-face { font-family: CircularRegular; src: url(fonts/CircularXXTT-Regular.ttf); font-weight: 400; } @font-face { font-family: CircularMedium; src: url(fonts/CircularXXTT-Medium.ttf); font-weight: 500; } @font-face { font-family: CircularBold; src: url(fonts/CircularXXTT-Bold.ttf); font-weight: 600; } @font-face { font-family: CircularBlack; src: url(fonts/CircularXXTT-Black.ttf); font-weight: 700; } /* Unified family for cast-media-player (shadow DOM uses font-weight internally) */ @font-face { font-family: CircularXX; src: url(fonts/CircularXXTT-Regular.ttf); font-weight: 400; } @font-face { font-family: CircularXX; src: url(fonts/CircularXXTT-Medium.ttf); font-weight: 500; } @font-face { font-family: CircularXX; src: url(fonts/CircularXXTT-Bold.ttf); font-weight: 600; } @font-face { font-family: CircularXX; src: url(fonts/CircularXXTT-Black.ttf); font-weight: 700; } /* --- Reset --- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { width: 100%; height: 100%; overflow: hidden; background: #111113; } body { width: 1920px; height: 1080px; overflow: hidden; background: #111113; font-family: CircularRegular, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #fff; transform-origin: top left; --playback-logo-image: none; } /* --- Cast Media Player theming --- */ cast-media-player { /* Tema */ --theme-hue: 160; --progress-color: rgb(21, 183, 158); --font-family: 'CircularXX'; /* Background — base escura, thumbnail é setada via metadata.images */ --background-color: #121214; --background-image: none; --background-size: cover; /* Idle/Launch — preto (standby screen cuida do idle) */ --logo-image: none; --logo-color: transparent; --logo-background: #121214; --splash-image: none; --splash-color: transparent; --splash-background: #121214; /* Spinner/buffering — loader do projeto */ --spinner-image: url(res/loader.png); --buffering-image: url(res/loader.png); /* Sem watermark */ --watermark-image: none; visibility: hidden; } /* --- Shared overlay base --- */ .screen-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000002; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease-out; } .screen-overlay--hidden { opacity: 0; pointer-events: none; } /* --- Starting Screen --- */ .starting-screen { background: #111113; } .starting-screen__video { height: 100%; width: auto; display: block; object-fit: contain; background: #111113; } .starting-screen__loader { position: absolute; z-index: 1; bottom: 150px; left: 50%; width: 48px; height: 48px; margin-left: -24px; opacity: 0; transition: opacity 0.3s ease-out; animation: starting-spin 1.2s linear infinite; pointer-events: none; } .starting-screen__loader--visible { opacity: 1; } @keyframes starting-spin { to { transform: rotate(360deg); } } /* --- Standby Screen --- */ .standby-screen { align-items: stretch; justify-content: flex-start; background: transparent; } /* Slide-left — horizontal pan over 15s */ @keyframes slideleft { from { transform: translateX(0); } to { transform: translateX(-15%); } } /* Base styles for dual standby background images (created via JS on ) */ .standby-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 120%; height: 100%; object-fit: cover; object-position: top; z-index: 1000000; display: none; opacity: 0; transition: opacity 800ms ease-in-out; will-change: transform, opacity; } .standby-bg--active { animation: slideleft 15s linear forwards; } /* * Gradient overlay — 5 Figma layers composited as stacked CSS backgrounds. * * Figma layers (1920×1080 base, listed top → bottom): * 1. Rect 23 — left primary, opacity 0.67, black 37.5%→transparent 87.5%, 1022px extent rotated -90deg * 2. Rect 3 — left secondary, black→transparent, left 56% of viewport, rotated -90deg * 3. Rect 2 — top, black→transparent, top 41% of viewport * 4. Rect 4 — bottom, black→transparent, bottom 22% of viewport, rotated 180deg * 5. BGCR — base, transparent→#121214, full viewport */ .standby__gradient { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000001; pointer-events: none; background: /* Rect 23 — left primary (67% opacity, 37.5%→87.5% of 1022px → 20vw→47vw) */ linear-gradient(to right, rgba(0, 0, 0, 0.67) 20%, transparent 47%), /* Rect 3 — left secondary (black→transparent over left 56%) */ linear-gradient(to right, #000000 0%, transparent 56%), /* Rect 2 — top (black→transparent over top 41%) */ linear-gradient(to bottom, #000000 0%, transparent 41%), /* Rect 4 — bottom (black→transparent over bottom 22%) */ linear-gradient(to top, #000000 0%, transparent 22%), /* BGCR — base fade to brand dark */ linear-gradient(to bottom, transparent 0%, #121214 100%); } /* Left-aligned content panel (1080p baseline: 1920×1080 viewport) */ .standby__panel { position: absolute; top: 100px; bottom: 100px; left: 0; max-width: 720px; width: 100%; margin-left: 150px; z-index: 1000003; display: flex; flex-direction: column; justify-content: space-between; } /* User profile — top of panel */ .standby__user { display: flex; align-items: center; opacity: 0; transition: opacity 0.6s ease-in-out; } .standby__user--visible { opacity: 1; } .standby__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px; } .standby__user-name { font-family: CircularBold, sans-serif; font-size: 24px; line-height: 120%; letter-spacing: -0.02em; color: #fff; } /* Highlight detail — vertically centered in panel */ .standby__detail { display: flex; flex-direction: column; align-items: flex-start; padding: 0; width: 760px; margin-top: auto; margin-bottom: auto; opacity: 1; transform: translateX(0); transition: opacity 800ms ease-in-out, transform 800ms ease-in-out; } .standby__detail--exit { opacity: 0; transform: translateX(-60px); } .standby__detail--before-enter { opacity: 0; transform: translateX(-60px); transition: none; } .standby__detail--enter { opacity: 1; transform: translateX(0); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } /* Logo image — stylised title */ .standby__logo { width: 417px; height: 190px; object-fit: contain; object-position: left center; background: transparent; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5)); margin-bottom: 24px; } .standby__logo--hidden { display: none; } /* Plain-text title — fallback when no logo */ .standby__title { font-family: CircularBlack, sans-serif; font-size: 48px; line-height: 120%; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 24px; } .standby__title--hidden { display: none; } /* Metadata row — rating badge + text */ .standby__meta-row { display: flex; align-items: center; margin-bottom: 24px; } .standby__meta-row:empty { display: none; } /* Rating badge */ .standby__rating { height: 24px; width: 24px; object-fit: contain; margin-right: 8px; flex: none; } .standby__rating--hidden { display: none; } /* Metadata line — year, episodes, genre */ .standby__meta { font-family: CircularRegular, sans-serif; font-size: 20px; line-height: 120%; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; } .standby__meta:empty { display: none; } /* Description */ .standby__description { font-family: CircularRegular, sans-serif; font-size: 20px; line-height: 150%; color: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); margin-bottom: 24px; } /* Directors */ .standby__directors { font-family: CircularRegular, sans-serif; font-size: 18px; line-height: 120%; color: rgba(255, 255, 255, 0.85); margin-bottom: 5px; } .standby__directors:empty { display: none; } .standby__directors-label { color: rgba(255, 255, 255, 0.45); margin-right: 12px; } /* Cast prompt — bottom of panel */ .standby__prompt { display: flex; align-items: center; padding: 15px; background: rgba(0, 0, 0, 0.56); border-radius: 8px; width: 542px; height: 62px; } .standby__cast-icon { width: 32px; height: 32px; color: #fff; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); margin-right: 20px; flex: none; } .standby__prompt span { font-family: CircularRegular, sans-serif; font-size: 20px; line-height: 120%; color: #fff; } /* BP brand logo — top-right watermark */ .standby__brand-logo { position: absolute; top: 100px; right: 150px; z-index: 1000003; width: 120px; height: auto; object-fit: contain; pointer-events: none; } /* --- Debug Logger overlay --- */ #logger { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.82); color: rgba(255, 255, 255, 0.85); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; max-height: 238px; padding: 6px 16px; overflow-y: auto; font-size: 11px; line-height: 1.5; z-index: 1000004; display: none; border-top: 1px solid rgba(21, 183, 158, 0.4); } #logger p { margin: 0; padding: 1px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #logger p.log-error { color: #ff6b6b; } #logger p.log-warn { color: #ffd43b; } #logger .log-state { color: rgb(21, 183, 158); font-weight: bold; }