/* ============================================================================ tv-ux.css — Esperienza "10-foot" per Smart TV / console. Caricato SOLO quando isTv (vedi partials/head.ejs), per ULTIMO nel . Scope: body[data-tv="1"] (globale) e body[data-tv="1"].dp-v2 (scheda dettaglio, specificità 0,2,1 -> batte detail-v2.css `body.dp-v2`). Obiettivi: 1) FOCUS sempre visibile (telecomando, niente hover/mouse a 3 metri) 2) Layout/testi/pulsanti grandi e leggibili da divano 3) Scheda dettaglio usabile a tutto schermo (non più colonnina 1080px) La navigazione frecce/OK è in main-tv.js (modulo tv-spatial-nav). ============================================================================ */ :root{ --tv-accent:#1fb6ff; --tv-accent-2:#0894D6; --tv-gold:#ffc83d; --tv-ink:#f3f6f9; --tv-dim:#b6c0cb; } /* ====================================================================== 1) FOCUS GLOBALE — l'elemento selezionato col telecomando deve URLARE. Doppio binario: :focus nativo + classe .tv-focus aggiunta da JS (alcune webview TV non disegnano bene :focus). transform scale = no reflow. ====================================================================== */ body[data-tv="1"] *:focus{ outline:none; } /* spegniamo l'outline sottile di default */ body[data-tv="1"] a.tv-focus, body[data-tv="1"] button.tv-focus, body[data-tv="1"] [tabindex].tv-focus, body[data-tv="1"] .tv-focus, body[data-tv="1"] a:focus-visible, body[data-tv="1"] button:focus-visible{ outline:4px solid var(--tv-accent) !important; outline-offset:3px !important; border-radius:10px; box-shadow:0 0 0 2px rgba(2,8,14,.9), 0 0 28px 4px rgba(31,182,255,.55) !important; position:relative; z-index:30; } /* Card a fuoco: ingrandisce + alone, senza spostare il layout (transform). */ body[data-tv="1"] .movie-card.tv-focus, body[data-tv="1"] .movie-card:focus-within{ transform:scale(1.10); z-index:40; } body[data-tv="1"] .movie-card.tv-focus .poster-wrap, body[data-tv="1"] .movie-card:focus-within .poster-wrap{ outline:4px solid var(--tv-accent) !important; outline-offset:2px; box-shadow:0 0 30px 6px rgba(31,182,255,.6) !important; } body[data-tv="1"] .movie-card a:focus{ outline:none !important; } body[data-tv="1"] .movie-card{ transition:transform .14s ease; } /* ====================================================================== 2) BASE leggibilità — niente effetti hover-only (inutili su TV). ====================================================================== */ body[data-tv="1"]{ font-size:18px; } /* il cuoricino "appare all'hover" sulle card non ha senso su TV: lo nascondiamo (la lista si gestisce dalla scheda, non a distanza dalla griglia). */ body[data-tv="1"] .card-watchlist-btn{ display:none !important; } /* ====================================================================== 3) HEADER / NAV — link grandi e a fuoco evidente. ====================================================================== */ body[data-tv="1"] .nav-link, body[data-tv="1"] #main-nav a{ font-size:1.15rem; } /* ====================================================================== 4) PAGINE NAVIGAZIONE (home/film/serie) — card più grandi e leggibili. ====================================================================== */ body[data-tv="1"] .section-title, body[data-tv="1"] .home-section h2, body[data-tv="1"] .slider-title{ font-size:1.6rem !important; } /* Frecce swiper (prev/next) e nav hero: senza la libreria Swiper su TV sono morte e ruberebbero il focus al telecomando -> via. La nav è col D-pad. */ body[data-tv="1"] .slider-controls, body[data-tv="1"] .hero-nav, body[data-tv="1"] .hero-nav-prev, body[data-tv="1"] .hero-nav-next{ display:none !important; } /* card un filo più grandi nelle griglie/caroselli (i 138px delle liste sono troppo piccoli da divano). Non tocchiamo il top10 che ha numeri propri. */ @media (min-width:1200px){ body[data-tv="1"] .section:not(.top10-section) .swiper-slide, body[data-tv="1"] .movie-grid .movie-card{ width:200px !important; } } /* hero home: pulsanti grandi e a fuoco evidente */ body[data-tv="1"] .slide-action-btn, body[data-tv="1"] .hero-cta, body[data-tv="1"] .slide-watch-btn{ font-size:1.15rem; } /* hero a fuoco: anello INSET (l'outline esterno verrebbe tagliato dai bordi schermo) */ body[data-tv="1"] .slide-stretched-link.tv-focus{ outline:none !important; box-shadow:inset 0 0 0 5px var(--tv-accent), inset 0 0 40px 6px rgba(31,182,255,.4) !important; border-radius:14px; } /* ====================================================================== 5) SCHEDA DETTAGLIO — da colonnina 1080px a vero 10-foot. Specificità body[data-tv="1"].dp-v2 batte detail-v2.css. ====================================================================== */ body[data-tv="1"].dp-v2 .dp-main{ max-width:1640px; padding:28px 64px 8px; display:grid; grid-template-columns:minmax(0, 780px) minmax(0, 1fr); grid-template-areas: "cover info" "eps info"; align-items:start; gap:10px 56px; } body[data-tv="1"].dp-v2 .dpv2-cover-wrap{ grid-area:cover; margin:0; } body[data-tv="1"].dp-v2 #dpv2-episodes{ grid-area:eps; } body[data-tv="1"].dp-v2 .dp-box-info{ grid-area:info; } /* COVER grande (780 x ~439 a 16:9). IMPORTANTE: le webview Smart TV (Tizen/webOS/browser integrati) NON supportano la CSS `aspect-ratio` -> il box collassa a 0 e cover+GUARDA SPARISCONO. Usiamo la tecnica padding-bottom (percentuale = % della LARGHEZZA), supportata ovunque da sempre. I figli (backdrop, GUARDA) sono già absolute -> riempiono il box. */ body[data-tv="1"].dp-v2 #dp-hero{ aspect-ratio:auto !important; height:0 !important; min-height:0 !important; padding-bottom:56.25% !important; /* 16:9 */ border-radius:16px; box-shadow:0 14px 48px rgba(0,0,0,.6); } /* GUARDA: pulsante grosso, è l'azione primaria. */ body[data-tv="1"].dp-v2 #cta-play{ padding:18px 44px !important; font-size:1.5rem !important; gap:14px !important; border-radius:14px !important; font-weight:800; } body[data-tv="1"].dp-v2 #cta-play .dpv2-watch-label{ font-size:1.5rem; } body[data-tv="1"].dp-v2 #cta-play .dpv2-watch-ep{ font-size:1.1rem; } body[data-tv="1"].dp-v2 #cta-play svg{ width:40px !important; height:40px !important; } /* icone Lista/Segui più grandi (60px) e ben distaccate */ body[data-tv="1"].dp-v2 .dpv2-corner{ top:16px; right:16px; gap:12px; } body[data-tv="1"].dp-v2 .dpv2-corner .dpv2-corner-btn, body[data-tv="1"].dp-v2 .dpv2-corner .dpv2-corner-btn.watchlist-btn, body[data-tv="1"].dp-v2 .dpv2-corner .dpv2-corner-btn.follow-btn{ width:58px !important; height:58px !important; min-width:58px !important; min-height:58px !important; max-width:58px; max-height:58px; } body[data-tv="1"].dp-v2 .dpv2-corner .dpv2-corner-btn svg{ width:26px; height:26px; } /* INFO: titolo + meta + trama + cast tutti grandi */ body[data-tv="1"].dp-v2 .dp-title{ font-size:2.7rem !important; line-height:1.08; margin-bottom:.5rem; } body[data-tv="1"].dp-v2 .dp-badges{ gap:10px; margin:.2rem 0 .5rem; } body[data-tv="1"].dp-v2 .dp-badge{ font-size:1.05rem !important; padding:.34rem .7rem !important; } body[data-tv="1"].dp-v2 .dp-genres{ font-size:1.2rem; margin:.2rem 0 .6rem; } body[data-tv="1"].dp-v2 .dp-genres a{ color:var(--tv-accent); } body[data-tv="1"].dp-v2 .dp-plot{ font-size:1.32rem !important; line-height:1.6 !important; color:var(--tv-ink); -webkit-line-clamp:6 !important; } body[data-tv="1"].dp-v2 .dp-crew{ font-size:1.15rem !important; margin-top:.5rem; } body[data-tv="1"].dp-v2 .dp-crew a{ color:var(--tv-accent); } body[data-tv="1"].dp-v2 .dp-now-playing{ font-size:1.18rem; } /* SELETTORE EPISODI/STAGIONI: chip grandi, focus evidente, scroll orizzontale (la nav D-pad scrolla in vista la chip a fuoco). */ body[data-tv="1"].dp-v2 #dpv2-episodes .dp-sel-label{ font-size:1.15rem !important; } body[data-tv="1"].dp-v2 #dpv2-episodes .dp-sel-chips{ gap:10px; padding-bottom:6px; } body[data-tv="1"].dp-v2 .dp-sel-chip{ min-width:62px !important; height:54px !important; font-size:1.35rem !important; border-radius:12px !important; padding:0 16px !important; } body[data-tv="1"].dp-v2 .dp-sel-chip.tv-focus{ background:linear-gradient(135deg,var(--tv-accent),var(--tv-accent-2)) !important; color:#fff !important; } /* CORRELATI: titolo + spazio per far respirare le card a fuoco */ body[data-tv="1"].dp-v2 #dp-related, body[data-tv="1"] #dp-related{ max-width:1640px; margin-left:auto; margin-right:auto; padding:0 64px; } /* AI editorial / verdetto: leggibile da divano */ body[data-tv="1"].dp-v2 .ai-editorial{ max-width:1512px; } body[data-tv="1"].dp-v2 .ai-ed-heading{ font-size:1.7rem; } body[data-tv="1"].dp-v2 .ai-ed-block p, body[data-tv="1"].dp-v2 .ai-ed-list li{ font-size:1.12rem; } /* Tablet TV / box piccoli: torna a colonna singola così non si stringe troppo */ @media (max-width:1100px){ body[data-tv="1"].dp-v2 .dp-main{ grid-template-columns:1fr; grid-template-areas:"cover" "eps" "info"; padding:20px 28px; } body[data-tv="1"].dp-v2 .dp-title{ font-size:2rem !important; } } /* ====================================================================== 6) GATE Telegram su TV: già stilato in detail-v2.ejs (QR grande). Qui solo garantiamo che il QR-box non venga "ingrandito a fuoco" per errore. ====================================================================== */ body[data-tv="1"] .dp-tg-lock .tv-focus{ transform:none !important; } /* ====================================================================== 7) TV-SAFE / old webview — fallback per Chromium/WebKit datati. Alcune Smart TV ignorano aspect-ratio, inset, :has(), flex-gap e blur. Queste regole sono volutamente ridondanti e solo scoped TV. ====================================================================== */ /* Poster/card: non devono dipendere dall'aspect-ratio dell'immagine. */ body[data-tv="1"] .movie-card .poster-wrap{ position:relative; height:0 !important; min-height:0; padding-top:150% !important; /* 2:3 */ overflow:hidden; } body[data-tv="1"] .movie-card .poster-img, body[data-tv="1"] .movie-card img.poster-img{ position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100% !important; max-width:none; object-fit:cover; aspect-ratio:auto !important; } /* Header/avatar: dimensioni esplicite anche senza aspect-ratio. */ body[data-tv="1"].hdr-v2 .hdrv2-account .account-avatar{ width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; flex:0 0 36px !important; aspect-ratio:auto !important; } /* Cover dettaglio: figli assoluti senza dipendere da inset shorthand. */ body[data-tv="1"].dp-v2 #dp-hero .dp-box-backdrop, body[data-tv="1"].dp-v2 #dp-hero .dp-box-overlay, body[data-tv="1"].dp-v2 #dp-hero .dp-box-play{ top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100% !important; } body[data-tv="1"].dp-v2 #dp-hero .dp-box-backdrop{ display:block; object-fit:cover; } /* GUARDA visibile anche se :has() non esiste. */ body[data-tv="1"].dp-v2 #dp-hero .dp-box-play{ display:flex !important; align-items:flex-end !important; justify-content:stretch !important; padding:12px !important; box-sizing:border-box; transform:none !important; margin:0 !important; z-index:3; } body[data-tv="1"].dp-v2 #cta-play, body[data-tv="1"].dp-v2 #cta-play.dpv2-watch{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:72px !important; height:auto !important; box-sizing:border-box; } /* Gate Telegram overlay: fallback esplicito per inset e sfondo leggibile senza blur. */ body[data-tv="1"] .dp-tg-lock{ top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100vw !important; height:100vh !important; background:rgba(2,5,9,.98) !important; } body[data-tv="1"] .dp-tg-lock-card{ background:rgba(8,13,20,.99) !important; } /* Sfondi testuali leggibili se backdrop-filter viene ignorato. */ body[data-tv="1"] .dp-badge, body[data-tv="1"].hdr-v2 .poster-wrap .status-badge, body[data-tv="1"].hdr-v2 .poster-wrap .type-badge, body[data-tv="1"].dp-v2 .dpv2-corner .dpv2-corner-btn{ background-color:rgba(8,12,18,.88); } body[data-tv="1"].dp-v2 .dp-badge-imdb{ background:#f5c518; } /* Flex-gap fallback: margini tra figli per webview senza gap nei flexbox. */ body[data-tv="1"].dp-v2 .dp-badges > * + *{ margin-left:10px; } body[data-tv="1"].dp-v2 .dp-genres > * + *{ margin-left:10px; } body[data-tv="1"].dp-v2 .dpv2-corner > * + *{ margin-left:12px; } body[data-tv="1"].dp-v2 #dpv2-episodes .dp-sel-chips > * + *{ margin-left:10px; } body[data-tv="1"].dp-v2 #cta-play > * + *{ margin-left:14px; } body[data-tv="1"].hdr-v2 .hdrv2-bar > * + *, body[data-tv="1"].hdr-v2 .hdrv2-right > * + *, body[data-tv="1"].hdr-v2 .hdrv2-account .account-toggle > * + *, body[data-tv="1"].hdr-v2 .slide-meta-top > * + *, body[data-tv="1"].hdr-v2 .slide-genres > * + *, body[data-tv="1"].hdr-v2 .slide-controls > * + *{ margin-left:12px; } /* Target overlay usati da tv-spatial-nav: niente focus/click area a 0x0. */ body[data-tv="1"] .hero-swiper .slide-stretched-link, body[data-tv="1"] .top10-stretched-link{ top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100% !important; } /* Sticky non supportato: header ancora disponibile e con sfondo opaco. */ body[data-tv="1"].hdr-v2 .hdrv2-header, body[data-tv="1"] .site-header, body[data-tv="1"] .navbar{ background:rgba(5,8,12,.96) !important; }