/** * AnimeHub Player v3 — Skin overlay on top of Vidstack default theme. * * Order of imports in the consuming bundle: * 1. vidstack/player/styles/default/theme.css * 2. vidstack/player/styles/default/layouts/video.css * 3. this file (skin.css) — overrides + 5 brand variants * * Skin selection: * Default skin = `default` when no class present. */ /* --------------------------------------------------------------------------- * 0. Fonts — Gotham Rounded Bold (commercial; place files in assets/fonts/). * Falls back to Nunito/system until the files are uploaded. * ------------------------------------------------------------------------ */ @font-face { font-family: "Gotham Rounded"; src: url("../../../fonts/gotham-rounded-bold.woff2") format("woff2"), url("../../../fonts/gotham-rounded-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------------- * 1. Base brand vars (always applied) * ------------------------------------------------------------------------ */ :root { --ah-player-radius: 8px; --ah-player-bg: #000; --ah-player-accent: #ff6b35; --ah-player-accent-2: #ffa600; --ah-player-control-color: #fff; --ah-player-focus-ring: 2px solid var(--ah-player-accent); } /* Map our vars into Vidstack vars. Spec: https://vidstack.io/docs/player/styling */ media-player[data-animehub-player] { --media-brand: var(--ah-player-accent); --media-focus-ring: var(--ah-player-focus-ring); --media-controls-color: var(--ah-player-control-color); --video-bg: var(--ah-player-bg); border-radius: var(--ah-player-radius); overflow: hidden; background: var(--ah-player-bg); aspect-ratio: 16 / 9; width: 100%; max-width: 100%; display: block; } /* Container guard — Vidstack uses display:contents on layouts. * * P8.H7a — match pre-P8.H7 video page behavior: cap at theme container * width only (no 70vh height guard). Player width is consistent across * viewport sizes; the height dominance trade-off is accepted per user * request. The padding-top:0 reset below (line 76) still prevents the * legacy aspect-ratio stacking bug. */ .animehub-episode-player-section { max-width: var(--animehub-container, 1400px); margin-left: auto; margin-right: auto; } .animehub-player-container, .ah-player-container { position: relative; max-width: 100%; margin-left: auto; margin-right: auto; } /* CRITICAL: the legacy theme uses the classic `padding-top: 56.25%` aspect * ratio trick on .animehub-player-wrapper so that absolutely-positioned