/* ======================================================================= assets/css/tv.css Big-screen (Smart TV / set-top box) presentation. Loaded for every visitor, but almost everything here is scoped to `.vexmov-tv`, which inc/tv-support.php puts on (before first paint) and on (server-side, so it survives with JS disabled). The one unscoped rule is the icon-font fallback at the top, because a ligature that failed to render is a problem on any client, not just a TV. ======================================================================= */ /* ----------------------------------------------------------------------- Icon fallback ----------------------------------------------------------------------- Icons the theme ships are inline SVG. A name the SVG set does not cover - a custom "Menu Icon" on a menu item - still renders as a Material Symbols ligature, and when the font or its `liga` feature is unavailable the raw name shows up as text over the page. assets/js/tv.js measures a probe glyph and sets this flag when that is what is happening. Hiding the span is the right trade: a missing icon reads as intentional, the word "theater_comedy" floating in the navigation does not. ----------------------------------------------------------------------- */ html.vexmov-icon-font-missing .vexmov-icon-font { display: none !important; } /* ----------------------------------------------------------------------- Overscan ----------------------------------------------------------------------- TV panels crop the edges of the picture - typically 2-5% per side, and the set does not tell the browser about it. Anything flush to the viewport edge is simply not on the screen, which is why the first and last card of a row and the top of the header get clipped. A percentage inset keeps the layout inside the safe area at any panel size. ----------------------------------------------------------------------- */ .vexmov-tv .site-header .container-fluid, .vexmov-tv #primary-content, .vexmov-tv .site-footer { padding-left: 2.5vw; padding-right: 2.5vw; } /* Additive, not a replacement: .site-header already carries 20px of vertical padding, and it is sticky at top:0, so the crop eats into it. */ .vexmov-tv .site-header { padding-top: calc(20px + 1.8vh); } .vexmov-tv .site-footer { padding-bottom: 2.5vh; } /* ----------------------------------------------------------------------- Focus is the cursor ----------------------------------------------------------------------- A remote has no pointer, so the focus ring is the only thing telling the viewer where they are. It has to be readable from across a room, which means a solid outline rather than the usual 1px hairline. :focus is used alongside :focus-visible because several TV engines never classify remote navigation as "visible" focus and would render nothing. ----------------------------------------------------------------------- */ .vexmov-tv a:focus, .vexmov-tv button:focus, .vexmov-tv input:focus, .vexmov-tv select:focus, .vexmov-tv textarea:focus, .vexmov-tv [tabindex]:focus { outline: 3px solid var(--bg-button, #ff5a7a); outline-offset: 3px; border-radius: 8px; } /* The poster link wraps the image, so the ring belongs on the artwork rather than on a box that also contains the badges. */ .vexmov-tv .poster-link:focus { outline-offset: 0; } .vexmov-tv .movie-card:focus-within .movie-poster { box-shadow: 0 0 0 3px var(--bg-button, #ff5a7a), 0 14px 34px rgba(0, 0, 0, .55); } .vexmov-tv .movie-card:focus-within .card-title a { color: var(--bg-button, #ff5a7a); } /* ----------------------------------------------------------------------- Hover affordances, on focus ----------------------------------------------------------------------- The play badge, the poster zoom and the navigation highlights were all :hover-only. On a TV that means they never appear, and the viewer gets no confirmation that the thing they are pointing the remote at is the thing that will open. ----------------------------------------------------------------------- */ .vexmov-tv .movie-poster:focus-within .play-btn-overlay { opacity: 1; } .vexmov-tv .movie-poster:focus-within img { transform: scale(1.05); filter: brightness(.6); } .vexmov-tv .pill-nav-links > li > a:focus, .vexmov-tv .mobile-nav-links > li > a:focus { color: var(--text-muted); background: var(--bg-button); } .vexmov-tv .btn-view-all:focus, .vexmov-tv .nav-btn:focus { background: var(--bg-hover); } /* ----------------------------------------------------------------------- Bigger targets ----------------------------------------------------------------------- Where a virtual cursor *is* in play it is slow and imprecise, so the small controls get enough area to be hit without a steady hand. ----------------------------------------------------------------------- */ .vexmov-tv .nav-btn { width: 46px; height: 46px; flex: 0 0 46px; } .vexmov-tv .trending-tab-btn { padding: 10px 18px; } .vexmov-tv .btn-view-all { padding: 10px 16px; font-size: 14px; } .vexmov-tv .card-title { font-size: 17px; } .vexmov-tv .card-meta { font-size: 13px; } /* ----------------------------------------------------------------------- Performance ----------------------------------------------------------------------- TV SoCs have a fraction of the fill rate of a phone. Backdrop blur over a full-screen overlay is the single most expensive thing this theme asks for and it is decorative, so it goes. The reveal-on-scroll animation goes for the same reason - content-reveal.js still promotes elements to their final state, it just gets there in one frame. ----------------------------------------------------------------------- */ .vexmov-tv .search-modal, .vexmov-tv .mobile-menu-overlay, .vexmov-tv .vexmov-auth-backdrop, .vexmov-tv .vexmov-request-modal, .vexmov-tv .vexmov-video-report-modal { -webkit-backdrop-filter: none; backdrop-filter: none; } .vexmov-tv.content-reveal-ready .reveal-item, .vexmov-tv .content-reveal-ready .reveal-item { opacity: 1; transform: none; transition: none; } .vexmov-tv .movie-poster img { transition: none; } /* ----------------------------------------------------------------------- Things a TV has no use for ----------------------------------------------------------------------- There is no home screen to install a PWA onto, and no touch gesture to pull the mobile drawer open, so neither control earns its place. The drawer markup stays in the DOM - the button is what is hidden - because the desktop breakpoint already hides it and the remote reaches the real navigation directly. ----------------------------------------------------------------------- */ .vexmov-tv .vexmov-install-app, .vexmov-tv .vexmov-ios-install { display: none !important; } /* ----------------------------------------------------------------------- Very wide panels ----------------------------------------------------------------------- A 4K set reports a 3840px viewport at devicePixelRatio 1, so the 1240px container becomes a narrow strip down the middle with vast empty margins. Letting it grow keeps the rows filling the screen. ----------------------------------------------------------------------- */ @media screen and (min-width: 1921px) { .vexmov-tv .container { max-width: 1800px; } }