/* Tema + 10-foot UI per TV. Scalato per 1920×1080. NB: webOS 5 = Chromium 68 → NIENTE aspect-ratio (88), inset (87) o gap nei flex (84). Si usano: padding-hack per i poster, longhand top/right/bottom/left, margini al posto di gap. */ :root { --bg: #0b0f14; --bg-elevated: #161c25; --card: #10151d; --text: #f1f5f9; --muted: #94a3b8; --amber: #f59e0b; --amber-light: rgba(245, 158, 11, .14); --green: #22c55e; --red: #ef4444; --border: rgba(255, 255, 255, .1); --focus: #f59e0b; /* safe-area TV: margine anti-overscan (~5%) */ --safe-x: 96px; --safe-y: 54px; } /* Aspetto: colore accento scelto in Impostazioni (override di --amber/--focus) */ :root[data-accent="blue"] { --amber: #3b82f6; --amber-light: rgba(59,130,246,.14); --focus: #3b82f6; } :root[data-accent="green"] { --amber: #22c55e; --amber-light: rgba(34,197,94,.14); --focus: #22c55e; } :root[data-accent="purple"] { --amber: #a855f7; --amber-light: rgba(168,85,247,.14); --focus: #a855f7; } :root[data-accent="pink"] { --amber: #ec4899; --amber-light: rgba(236,72,153,.14); --focus: #ec4899; } :root[data-accent="red"] { --amber: #f43f5e; --amber-light: rgba(244,63,94,.14); --focus: #f43f5e; } * { box-sizing: border-box; } html, body, #root { margin: 0; height: 100%; } /* iOS (e la WebView Android) ingrandiscono da soli il testo dei blocchi che diventano larghi: ruotando il telefono in orizzontale la TRAMA degli episodi passava da 14px a ~19px — più grande del titolo che le sta sopra — mentre i testi corti restavano fermi. Non è una nostra regola: è l'"adattamento automatico" del motore, che si spegne solo dichiarando la scala. Da tenere al 100% ovunque, o le misure del CSS non valgono più. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); /* Noto Emoji NON qui: iOS/Mac/Android hanno gia le emoji a colori del sistema. Il font bundlato serve SOLO su LG (webOS), dove le emoji dei provider escono come quadrati. Vedi override .webos body sotto. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; -webkit-font-smoothing: antialiased; } /* barra di scorrimento nascosta: su TV si naviga col telecomando */ ::-webkit-scrollbar { width: 0; height: 0; } ::-webkit-scrollbar-thumb { background: transparent; } /* Emoji: webOS non ha un font emoji completo → le emoji nei nomi di categorie/canali dei provider uscivano come QUADRATI (tofu). Noto Emoji (monocromatico, OFL) bundlato a fette per unicode-range: pesa solo dove serve e funziona offline sulla TV. Sta per ULTIMO nello stack (vedi body): la sua unicode-range include anche cifre e simboli (keycap), quindi in testa disegnava i numeri normali con l'advance emoji. In coda i font di testo vincono su cifre/simboli e solo le vere emoji ricadono su Noto. */ @font-face { font-family: 'Noto Emoji'; font-style: normal; font-weight: 400; font-display: swap; src: url('./assets/fonts/emoji/noto-emoji-0.woff2') format('woff2'); unicode-range: U+1f1e6-1f1ff; } /* Font UNICO del wordmark "VisioneViva" — identico su tutti i device (prima system-ui cambiava per OS: SF su iOS/Mac, Roboto su Android, font LG su webOS). Bundlato (woff2 latin), quindi niente fetch → funziona offline sulla TV. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: block; src: url('./assets/fonts/inter-800-latin.woff2') format('woff2'); } /* TELEFONO IN VERTICALE: il programma in onda va SOTTO al nome, non affianco. Affiancati ci stanno due mezze righe troncate (il nome del canale tagliato a meta' E la descrizione tagliata); incolonnati si leggono entrambi per intero. In orizzontale e su tablet lo spazio c'e' → resta affianco. L'equalizzatore e il cuore restano sulla riga del nome. */ @media (max-width: 560px) and (orientation: portrait) { .lr-head { flex-wrap: wrap; } .lr-name, .ios .lr-name { flex: 1 1 auto; max-width: none; } .lr-eq { order: 2; } .lr-fav-btn { order: 3; } .lr-now-inline { order: 4; flex: 1 0 100%; margin-left: 0; margin-top: 3px; } } /* Tablet larghi (Android/iPad landscape ≥1560px CSS): la card detail riempie quasi tutta la larghezza invece di restare a 1500px lasciando vuoto ai lati. */ @media (min-width: 1560px) { .det-pop { max-width: 94vw; } } /* Android touch: in landscape play compatto + cluster al fianco (come TV); in portrait il play resta a tutta larghezza e il cluster va sotto (bottone stretto = brutto). */ @media (orientation: portrait) { .android .tv-play-row .det-play-wow { flex: 1 1 100%; max-width: none; min-width: 0; } .android .tv-play-row .dpr-side { flex: 1 1 100%; justify-content: flex-start; } } /* Telefono (schermo stretto): il nome + 4 pulsanti in fila stringevano troppo il testo. Impilo: nome sopra, pulsanti sotto a tutta larghezza e più grandi (comodi al tocco). */ @media (max-width: 560px) { .cm-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; } .cm-name { white-space: normal; } .cm-actions { justify-content: space-between; gap: 8px; } .cm-b { flex: 1; height: 46px; font-size: 19px; } } /* il campo del codice sul telefono: stesso passo largo, cosi' si rilegge mentre si digita */ .sbl-code { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; } /* telefono: card leggermente più stretta ai lati */ @media (max-width: 760px) { .verx { padding: 14px; } .verx-head { padding: 22px 20px 12px; } .verx-title { font-size: 23px; } .verx-list { padding: 4px 14px 18px; } } /* ════════════════════════════════════════════════════════════════════ MULTI-PIATTAFORMA (Mac / browser / mobile) — la TV (1920, niente hover) non è toccata: hover solo su dispositivi col puntatore, media query solo sotto i 1500px. Stessa codebase, stessa grafica centralizzata. ════════════════════════════════════════════════════════════════════ */ /* puntatore (mouse/trackpad): hover speculare al focus del telecomando */ @media (hover: hover) and (pointer: fine) { .focusable:hover { transform: scale(1.04); z-index: 2; } .focusable:hover .poster, .focusable:hover .rec-poster, .focusable:hover .pic, .gal-thumb.focusable:hover { box-shadow: 0 0 0 3px var(--focus), 0 14px 36px rgba(0,0,0,.5); } .tab:hover { border-color: var(--amber); color: var(--amber); } .btn:hover, .pbtn:hover { border-color: var(--amber); } .eps-item:hover, .vid-item:hover, .season-head:hover { border-color: var(--amber); } .trk-row:hover { background: var(--amber-light); } .det-play:hover, .det-fav:hover { background: var(--amber); color: #000; } .seekbar .player-track { cursor: pointer; } } /* finestre medie (Mac non a tutto schermo, tablet landscape) */ @media (max-width: 1500px) { :root { --safe-x: 40px; --safe-y: 24px; } .logo { font-size: 26px; } .tab { font-size: 17px; padding: 8px 14px; } .grid { grid-template-columns: repeat(6, 1fr); gap: 18px; } /* copertine: su finestre piccole/Mac un filo più contenute */ .land-card { width: 340px; } .num-poster { width: 160px; height: 240px; } .num-big { font-size: 160px; } .row-tile { width: 160px; } .det-title { font-size: 42px; } .det-logo { max-height: 100px; } .det-poster { width: 130px; } .detail .overview { font-size: 20px; } .player-t { font-size: 24px; min-width: 104px; } } /* tablet / finestre piccole */ @media (max-width: 1100px) { .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .det-hero { height: 44vh; min-height: 300px; } .det-pop { height: 96vh; border-radius: 14px; } .det-overlay { padding: 2vh 2vw; } .det-cards { gap: 10px; } .det-card { padding: 12px 14px; } .det-card .cv { font-size: 18px; } .settings-panel { padding: 28px; } .xt-grid { grid-template-columns: 1fr; } .set-label { width: 170px; font-size: 18px; } } /* telefono */ @media (max-width: 760px) { :root { --safe-x: 16px; --safe-y: 14px; } .header { flex-wrap: wrap; } .grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 12px; padding: 8px 4px 24px; } .det-hero { height: 34vh; min-height: 220px; } .det-poster { display: none; } .det-title { font-size: 28px; } .det-logo { max-height: 64px; max-width: 80%; } .det-body { padding: 18px var(--safe-x) var(--safe-y); } /* Android telefono/tablet: margini laterali del contenuto ridotti (16px) per allargare il testo/le sezioni scendendo (prima 26px = troppo spazio ai lati). L'hero resta full-bleed (è fuori dal .det-body, occupa tutta la .det-pop). */ .android .det-body { padding-left: 16px; padding-right: 16px; } /* Android telefono: la status bar (wifi/orologio) copriva i tasti in alto. Uso l'inset REALE --sa-top (iniettato da MainActivity) — come iOS con env() — per abbassare header, tasto opzioni (top-right) e bolla lista IPTV (top-left) SOTTO la status bar. */ .android .header { padding-top: calc(var(--sa-top, 0px) + 8px); } .android .header > .tab-ic, .android .epg-prof { position: fixed; top: calc(var(--sa-top, 0px) + 6px); right: var(--safe-x); z-index: 60; } .android .xt-catbar-over { position: fixed; top: calc(var(--sa-top, 0px) + 6px); left: var(--safe-x); right: auto; z-index: 8; margin: 0; padding: 0; } .android .det-back { top: calc(var(--sa-top, 0px) + 6px); } .android .det-pop .det-fav, .android .det-pop .det-play { top: 30px; } .det-toprow { flex-wrap: wrap; } .det-toprow > * + * { margin-left: 14px; } .detail .overview { font-size: 16px; } .det-play { width: 56px; height: 56px; font-size: 20px; top: 14px; right: 14px; } .det-fav { width: 48px; height: 48px; font-size: 22px; top: 14px; left: 14px; } .det-pop .det-fav { top: 12px; left: 12px; } .det-pop .det-play { top: 12px; right: 12px; } .player-t { font-size: 16px; min-width: 64px; } .player-btns { flex-wrap: wrap; } .player-stats-inline { width: 100%; justify-content: flex-start; margin-top: 8px; } .player-stats-inline > * { margin-left: 0; margin-right: 12px; } .pbtn { min-width: 48px; height: 44px; font-size: 16px; } .row-tile { width: 110px; } .set-row { flex-wrap: wrap; } .set-label { width: 100%; margin-bottom: 6px; } .set-row > * + * { margin-left: 0; } /* Toggle: label e interruttore SEMPRE sulla stessa riga (l'eventuale descrizione va sotto, è un .set-hint separato). Solo gli input testo stanno sotto la label. */ .set-row-tgl { flex-wrap: nowrap; } .set-row-tgl .set-label { width: auto; margin-bottom: 0; flex: 1; } .set-row-tgl > * + * { margin-left: 14px; } .set-row-pair { flex-direction: column; } .set-row-pair > * + * { margin-left: 0; margin-top: 12px; } .settings-panel { padding: 18px; border-radius: 14px; } .eps-overlay { padding: 16px; } } /* touch: target più grandi, niente effetti hover appiccicosi */ @media (pointer: coarse) { /* touch (iPad): niente overscan TV → margini minimi */ :root { --safe-x: 14px; --safe-y: 12px; } .tab { padding: 11px 18px; } .pbtn { height: 52px; } } /* tasto Guida TV attivo (toggle on): sfondo verde + una LINEA luminosa SOTTILE che corre lungo il CONTORNO (non un faro al centro). Un conic-gradient con un breve segmento brillante, MASCHERATO al solo bordo (anello) e con l'angolo animato → il segmento percorre il perimetro. */ @property --vvbeam { syntax: ''; inherits: false; initial-value: 0deg; } /* iOS in verticale: nome canale SOTTO il logo (centrato, fino a 2 righe) → leggibile */ @media (orientation: portrait) { .ios .epg-ch, .android .epg-ch { flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px 6px; text-align: center; } .ios .epg-ch img, .ios .epg-ch-ph { width: 30px; height: 30px; } .ios .epg-ch-n { white-space: normal; font-size: 11px; line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* Colonna destra (anteprima + palinsesto) più larga sugli schermi ampi. Attenzione: la min-width la accende anche sui TELEFONI IN ORIZZONTALE, che di punti ne hanno 852 — il commento di prima diceva "non tocca i telefoni" e non era vero. Con 500px fissi la colonna dei canali restava a 352 e i nomi finivano tagliati ("Sky Cine…"). In percentuale la destra si ferma al 40% e la lista ne prende il 60%, su ogni modello: in pixel 360 sarebbero il 42% su un iPhone 16, ma il 54% su un SE. Il tetto di 500px serve ai tablet, dove il 40% di uno schermo grande sarebbe sproporzionato. */ @media (min-width: 760px) { .android .live3, .ios .live3 { grid-template-columns: minmax(0,1fr) min(40%, 500px); } } /* telefono: 1 colonna, categorie a scorrimento orizzontale, anteprima come overlay (no palinsesto) */ @media (max-width: 760px) { /* telefono: anteprima come BANNER in alto (in-flow, non più fissa che copriva i controlli), poi la lista canali sotto. Categorie nella catbar a collapse sopra. */ .live3 { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .live3-side { order: -1; position: static; width: auto; max-width: none; overflow: hidden; } .live3-side .pal { display: none; } .live3-empty { display: none; } .live3-chans { min-height: 0; } } /* TABLET (anche Android con CSS width < 760 per DPR alto): in LANDSCAPE tieni le 2 colonne come iPad. I telefoni in portrait (width piccola) restano a 1 colonna. */ @media (min-width: 620px) and (orientation: landscape) { .live3 { grid-template-columns: minmax(0,1fr) 340px; grid-template-rows: none; } .live3-side { order: 0; position: static; width: auto; max-width: none; } .live3-side .pal { display: block; } .live3-empty { display: block; } } /* ORIZZONTALE, ogni dispositivo touch: sotto l'anteprima via TUTTO il testo. Il programma in onda e i minuti stanno già nella riga selezionata a sinistra, e il palinsesto qui sotto parte dal programma corrente (Palinsesto filtra `end > adesso`), quindi la sua prima riga è "in onda" e la seconda è "a seguire": la striscia li ripeteva entrambi. Resta il filo dell'avanzamento sul bordo del video e il solo tasto audio — che NON può andare sopra il video, perché su iPhone e Android telefono l'anteprima è un player nativo disegnato sopra la WebView e un bottone HTML finirebbe dietro. */ @media (orientation: landscape) { body:not(.webos):not(.desktop):not(.firetv) .live3-side .ml-slim-now, body:not(.webos):not(.desktop):not(.firetv) .live3-side .ml-slim-left, body:not(.webos):not(.desktop):not(.firetv) .live3-side .ml-slim-next, body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-name, body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-prog { display: none; } /* La striscia sotto il video non serve più nemmeno come contenitore: si azzera (non si nasconde, perché dentro ci vive ancora il tasto audio, che qui sotto esce dal flusso). */ body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-info { padding: 0; height: 0; overflow: visible; } /* Tasto audio in fondo allo schermo, fra la barra e l'avatar: non può stare sopra il video (su iPhone e Android il player è nativo, disegnato sopra la WebView) e sotto il video costringeva a tenere una striscia solo per lui. In orizzontale lo spazio a destra della barra è vuoto: sta lì, in linea con gli altri comandi. */ /* Stessa altezza, stesso appoggio e stesso vetro delle bolle della barra (.tb-group): accanto a loro un quadrato più basso e più scuro si vedeva subito che era un'altra cosa. */ body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-mute { position: fixed; z-index: 62; bottom: var(--sa-bottom, env(safe-area-inset-bottom)); right: calc(var(--safe-x) + var(--sa-right, 0px) + 48px); width: 44px; height: 35px; border-radius: 20px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); background: rgba(22,25,31,.72); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.45); } @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-mute { background: rgba(22,25,31,.55); -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); } } /* audio acceso = ambra, come le voci attive della barra */ body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-mute:not(.muted) { color: var(--amber); border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.18); } /* Il riquadro del video prende le proporzioni del video (16:9) invece di stirarsi per tutta la colonna: era largo 307 e alto 118, cioè 2,6:1, e il player nativo ci metteva dentro un 16:9 lasciando due bande nere ai lati. Ora il rettangolo combacia, il nero sparisce e ai lati si vede lo sfondo dell'app. */ /* `html:not(.tablet)`: le classi di piattaforma (.ios/.desktop/.webos/.tablet) stanno su , non sul body — quindi i `body:not(...)` qui sotto NON escludono un bel niente, e questa regola da telefono cadeva anche sull'iPad. Lì fa danno: il tablet eredita `height: 300px` da `.desktop`, e con `width: auto` + 16/9 il box diventa 533 dentro una colonna da 340. In CSS lo taglia l'overflow, ma l'anteprima su iPad è una finestra NATIVA posata sul rettangolo del box: quella non la taglia nessuno, e copriva l'elenco canali. Per il tablet vale la regola dedicata più in basso. */ html:not(.tablet) body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; background: transparent; border: 0; box-shadow: none; } html:not(.tablet) body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-v, html:not(.tablet) body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-ph, html:not(.tablet) body:not(.webos):not(.desktop):not(.firetv) .live3-side .mini-live-logo { width: auto; aspect-ratio: 16 / 9; border-radius: 12px; } } /* L'espansione a `:hover` vale SOLO dove esiste un puntatore vero. Su iPad il dito genera un hover che WebKit lascia attaccato all'elemento toccato finché non tocchi altrove: la barra restava larga sopra il contenuto per un tempo indefinito, e non c'era nessuno stato da spegnere perché l'apertura non passava dal JS. Col dito ora apre e chiude il componente (tocco sulla barra apre, tocco su una voce sceglie e chiude, e dopo qualche secondo di fermo si richiude da sola). */ @media (hover: hover) and (pointer: fine) { .sbprev .tv-sidebar:hover { width: 280px; } .sbprev .tv-sidebar:hover .sb-l, .sbprev .tv-sidebar:hover .brand-word { opacity: 1; } } /* stessa guardia dell'espansione a hover (riga ~2547): col dito non deve scattare */ @media (hover: hover) and (pointer: fine) { .desktop .tv-sidebar:hover .brand-word { opacity: 1; } } /* iPad (e tablet/landscape larghi): copertine PIÙ GRANDI delle 112px da iPhone — schermo ampio → meno copertine per riga, più leggibili (~6.5 invece di ~8.5). Esclude l'iPhone in portrait (≤440px). */ @media (min-width: 740px) and (min-height: 600px) { .ios .row-tile, .android .row-tile { width: 150px; } .ios .num-poster, .android .num-poster { width: 150px; height: 225px; } .ios .land-card.vert, .android .land-card.vert { width: 168px; } /* griglie IPTV (Film/Serie), Cerca e Preferiti: stesso standard della home (~150px) */ .ios .grid, .android .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; } /* Preferiti: era 3 colonne fisse → copertine enormi su iPad; ora come la home */ .ios .fav-grid, .android .fav-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; } /* Scaricati: 3 colonne fisse (con 1 solo download l'auto-fill stirava la cella a tutta larghezza → copertina gigante). Come la vista offline (.off-grid). */ .ios .dl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* panoramica IPTV (righe a scorrimento): poster come la home (erano 108px) */ .ios .xt-prow > .focusable, .android .xt-prow > .focusable { width: 150px; } .ios .xt-skel, .android .xt-skel { width: 150px; padding-top: 225px; } } /* telefoni: niente slider laterali (poco spazio) → restano play/±10 e il menu opzioni */ @media (max-width: 739px) { .iospl-gest { display: none; } } /* iPad orizzontale: il poster è visibile (nascosto solo <760px) e alto → allinea logo+tagline IN BASSO accanto al poster (su telefono il poster non c'è e resta in alto) */ @media (min-width: 760px) { .ios .det-foot-left { align-items: flex-end; } .ios .det-foot-left > * + * { margin-left: 24px; } .ios .det-titlewrap, .android .det-titlewrap { width: auto; flex: 1; } } /* iPad: la scheda Info è tarata su iPhone (piccola/stretta) → su schermo ampio ingrandisci card, cast, trama, tab ed episodi per riempire lo spazio. */ @media (min-width: 740px) and (min-height: 600px) { .ios .det-cards, .android .det-cards { gap: 12px; margin-top: 18px; } .ios .det-card, .android .det-card { padding: 14px 18px; border-radius: 14px; } .ios .det-card .ck, .android .det-card .ck { font-size: 12px; } .ios .det-card .cv, .android .det-card .cv { font-size: 18px; margin-top: 3px; } .ios .detail .castrow, .android .detail .castrow { padding: 16px 0; } .ios .detail .castrow > * + * { margin-left: 22px; } .ios .detail .castrow .face, .android .detail .castrow .face { width: 120px; } .ios .detail .castrow .face .pic, .android .detail .castrow .face .pic { width: 120px; height: 120px; } .ios .detail .castrow .face .nm, .android .detail .castrow .face .nm { font-size: 15px; } .ios .detail .overview, .android .detail .overview { font-size: 18px; line-height: 1.55; } .ios .det-votes, .android .det-votes { font-size: 22px; } .ios .genres .chip, .android .genres .chip { font-size: 15px; padding: 6px 14px; } .ios .det-tab, .android .det-tab { font-size: 18px; } .ios .det-section .sec-title, .android .det-section .sec-title { font-size: 20px; } .ios .ep-still, .android .ep-still { width: 180px; height: 102px; } .ios .ep-name, .android .ep-name { font-size: 18px; } .ios .ep-sub, .android .ep-sub { font-size: 15px; } .ios .ep-ov, .android .ep-ov { font-size: 16px; } } /* iPad landscape: le card info (3 o 4: Anno/Durata/Regia/Budget) su UNA sola riga (prima 3 colonne fisse → la 4ª andava a capo). Larghezza disponibile sufficiente. */ @media (min-width: 740px) and (min-height: 600px) and (orientation: landscape) { .ios .det-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } } /* orizzontale / schermi bassi: hero più corto così il form (e l'errore) entra tutto */ @media (max-height: 560px) { .wl-hero { height: 26vh; min-height: 120px; } .wl-body { padding-top: 6px; padding-bottom: 20px; } .wl-title { font-size: 24px; margin-bottom: 6px; } .wl-sub { margin-bottom: 14px; } } /* Mac: l'anello AMBRA sopra il bottone primario (già ambra pieno) non si distingueva — col fuoco su "Accedi con Apple" sembrava ancora acceso "Accedi con Google". Sul desktop l'anello è BIANCO con alone: si legge sia sul primario sia sui secondari. Il primario resta ambra (col mouse è la chiamata all'azione, a differenza della TV che lo spegne). NB: qui serve box-shadow, NON outline: il bottone a fuoco ha anche il focus del DOM (WBtn glielo dà) e la regola globale `:focus { outline: none !important } /* Landscape STRETTO (telefono): resta impilato (hero in alto) ma il contenuto sotto l'hero va CENTRATO verticalmente nello spazio rimanente — prima partiva incollato in alto lasciando un grande vuoto sotto. */ @media (orientation: landscape) and (max-width: 949px) { .wl-left { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } } /* TELEFONO: i dialog (riprendi/da capo, uscita, conn) erano tarati per TV → enormi. Scalo per schermi stretti. La TV (LG/Fire) gira a viewport 1920 → non entra in questa query. */ @media (max-width: 640px) { .exit-dialog { width: 88vw; padding: 24px 20px; border-radius: 18px; } .exit-title { font-size: 19px; margin-bottom: 16px; } .exit-sub { font-size: 14px; margin: -8px 0 18px; max-width: 100%; } .exit-actions { gap: 10px; flex-wrap: wrap; } .exit-btn { min-width: 0; flex: 1 1 42%; padding: 12px 14px; font-size: 15px; border-radius: 12px; } } /* iPad landscape: contenuto disteso + sfondo che riempie (niente vuoti ai lati) */ @media (min-width: 1000px) { .ios .pw-feats, .android .pw-feats { grid-template-columns: repeat(3, 1fr); max-width: 1100px; gap: 14px; } .ios .pw-plans, .ios .pw-cta { max-width: 920px; } .ios .pw-disclaimer, .android .pw-disclaimer { max-width: 820px; } .ios .pw-scroll { padding-left: 40px; padding-right: 40px; } .ios .pw-wall-col, .android .pw-wall-col { max-width: none; } .ios .pw-wall { left: -3vw; right: -3vw; opacity: .45; } } /* iPad: il tasto verde (Continua/Play) ha tanto spazio orizzontale → info in RIGA, non impilate */ @media (min-width: 700px) and (min-height: 600px) { .ios .det-play-wow .dpw-lab, .android .det-play-wow .dpw-lab { font-size: 20px; } } /* ════════ MOTION base: overlay "a bolla" dal punto del tap ════════ */ @keyframes vvBubbleIn { from { clip-path: circle(0% at var(--tap-x, 50%) var(--tap-y, 50%)); opacity: .5; } to { clip-path: circle(150% at var(--tap-x, 50%) var(--tap-y, 50%)); opacity: 1; } } /* il pannello interno entra con un piccolo "rise" elastico */ @keyframes vvRise { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } } /* ── Sblocco TV dal telefono ────────────────────────────────────────────────── Pagina raggiunta dal QR del televisore: sta in piedi da sola, senza header né navigazione — chi ci arriva ha una cosa sola da fare. */ .sbl-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); } .sbl-card { width: min(460px, 94vw); background: linear-gradient(180deg, rgba(22,26,34,.97), rgba(11,14,19,.98)); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; padding: 28px; text-align: center; } .sbl-t { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 10px; } .sbl-p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 18px; } .sbl-in { width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 17px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; } .sbl-btn { width: 100%; margin-top: 14px; padding: 15px; font-size: 17px; font-weight: 700; border: 0; border-radius: 12px; background: var(--amber); color: #0b0f14; cursor: pointer; } .sbl-btn:disabled { opacity: .5; cursor: default; } .sbl-err { color: #f87171; font-size: 14px; margin-top: 10px; } .sbl-ok { font-size: 54px; color: #34d399; margin-bottom: 6px; } .sbl-note { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 16px 0 0; } .sbl-in + .sbl-in { margin-top: 10px; } .sbl-sep { margin: 18px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); text-align: left; } .sbl-note.warn { color: #fbbf24; } /* ── iPad in VERTICALE ───────────────────────────────────────────────────────── Live a DUE colonne, non tre: le categorie restano dove sono, e a destra l'anteprima sta SOPRA la lista dei canali — come sull'iPhone. In verticale tre colonne lasciavano all'elenco una striscia troppo stretta per leggere i nomi. Posizionamento esplicito invece di `order`: nel DOM l'anteprima viene per ultima, e affidarsi all'ordine implicito rende il layout fragile a ogni ritocco. */ @media (orientation: portrait) { .tablet .live3 { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; } .tablet .live3-cats { grid-column: 1; grid-row: 1 / span 2; } .tablet .live3-side { grid-column: 2; grid-row: 1; order: 0; position: static; width: auto; max-width: none; overflow: hidden; } .tablet .live3-chans { grid-column: 2; grid-row: 2; } /* Barra in basso più contenuta: su iPad ereditava le misure del telefono, dove quei 70 punti per voce servono al pollice. Qui lo schermo è grande e la barra sembrava sproporzionata. */ .tablet .tabbar { max-width: 420px; } .tablet .tb-group { padding: 4px; border-radius: 22px; } .tablet .tb-item { min-width: 56px; padding: 4px 7px; gap: 2px; border-radius: 15px; } .tablet .tb-ic svg { width: 20px; height: 20px; } .tablet .tb-l { font-size: 9px; } } /* iPad in VERTICALE: lo spazio in fondo era sprecato. La colonna di destra teneva solo l'altezza del suo contenuto (`auto`), quindi anteprima e palinsesto restavano schiacciati in alto e sotto l'elenco canali — spesso corto, dipende dalla categoria — restava una fascia nera alta mezzo schermo. Ora le due parti si spartiscono l'altezza: l'anteprima col suo palinsesto prende la metà superiore, i canali il resto, e il vuoto sparisce qualunque sia il numero di canali. */ @media (orientation: portrait) { /* La vista arriva FINO alla barra in basso. Sottraeva 104 punti, che era l'ingombro della barra PRIMA di rimpicciolirla: da quando le voci sono più basse, quei punti in eccesso restavano come fascia nera in fondo. 76 = barra ridotta + il suo margine. */ .tablet .live3 { height: calc(100dvh - var(--sa-top, env(safe-area-inset-top)) - 76px); } .tablet .live3-side { overflow-y: auto; } /* il palinsesto si allunga a riempire ciò che avanza sotto il video, invece di lasciare un buco quando la categoria ha pochi canali */ .tablet .live3-side .pal { flex: 1 1 auto; min-height: 0; } /* ── Il tasto profilo non finisce SOTTO l'anteprima ────────────────────────── Su iPhone/iPad l'anteprima live non è un