/** * css/tv.css — layout exclusivo para Smart TV / navegador embutido. * ----------------------------------------------------------------------- * Ativado pela classe `tv-mode` no , NÃO por media query. * * Por quê: as tentativas anteriores usavam * `@media (hover:none) and (pointer:none)...`, o que só é possível * verificar numa TV de verdade (ou emulando media features no * DevTools) — cada ajuste exigia reinstalar/testar no aparelho físico. * * Com uma classe, o MESMO CSS pode ser testado em qualquer navegador, * inclusive no computador: basta abrir a página com "?view=tv" na URL * (ex.: https://90mais.com/radio/index.php?view=tv) que o layout de TV * aparece ali mesmo. Um script pequeno no de cada index.php * detecta automaticamente quando é uma TV de verdade (ou lê o "?view=tv" * manual) e adiciona essa classe — sem media query nenhuma aqui, sem * chance de vazar pro layout do celular/desktop normal, porque a classe * só existe quando pedida explicitamente. * --------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- * Performance — TVs/Fire Stick costumam ter GPU bem mais fraca que um * computador. backdrop-filter: blur() é um dos efeitos mais caros que * existem em CSS (o navegador recalcula o desfoque do que está atrás * em tempo real, e isso fica ainda mais pesado com o canvas de * partículas animando por trás). Removido nos 4 elementos que usam — * troca o "vidro fosco" por um fundo sólido simples, mas ganha fluidez * real em hardware fraco. * --------------------------------------------------------------------- */ html.tv-mode .connection, html.tv-mode .station-switcher__track, html.tv-mode #play-button, html.tv-mode .dock__card { backdrop-filter: none; -webkit-backdrop-filter: none; } /* Animação do anel pontilhado (sonar) e do pulso do live-dot: ambas rodam o tempo todo (não só em transições), custo pequeno individual mas que soma em hardware fraco. Desativadas na TV. */ html.tv-mode .player-orb__ring--sonar { animation: none; } html.tv-mode .live-dot[data-state='live'], html.tv-mode .live-dot[data-state='reconnecting'], html.tv-mode .live-dot[data-state='connecting'], html.tv-mode .live-dot[data-state='error'] { animation: none; box-shadow: none; } html.tv-mode .topbar { padding: 12px clamp(20px, 4vw, 40px); } html.tv-mode .station-switcher { padding-top: 0; } html.tv-mode .station-switcher__track { width: min(560px, 100%); padding: 6px; } html.tv-mode .station-switcher__item { font-size: 15px; padding: 12px 8px; } html.tv-mode .station-switcher__item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg-void), 0 0 0 6px var(--accent-tertiary); } html.tv-mode #station-name { font-size: clamp(40px, min(4.5vw, 6vh), 72px); } html.tv-mode #station-tagline { font-size: 17px; max-width: 440px; } /* Orbe bem mais contido do que as tentativas anteriores — prioridade é caber com folga, não maximizar tamanho. */ html.tv-mode .player-orb { width: clamp(102px, min(9.4vw, 13.6vh), 162px); /* -15% (era clamp(120px, min(11vw, 16vh), 190px)) */ height: clamp(102px, min(9.4vw, 13.6vh), 162px); margin-top: auto; margin-bottom: auto; /* distribui o espaço livre igualmente acima e abaixo do orbe, centralizando de verdade — o padrão (player.css) só usa margin-bottom fixo, o que deixa o orbe mais pro topo */ } /* Dock mais estreito e mais baixo — evita encostar/sobrepor o orbe. */ html.tv-mode .dock__card { width: min(460px, 38%); padding: 10px 22px; } html.tv-mode #now-playing-text { font-size: 16px; } html.tv-mode .dock__label { font-size: 11px; } html.tv-mode #status-label { font-size: 14px; } /* Foco bem mais chamativo — visto do sofá, 2px some de vista */ html.tv-mode button:focus-visible, html.tv-mode a:focus-visible { outline: 4px solid var(--accent-tertiary); outline-offset: 6px; } /* #play-button é redondo — outline retangular não acompanha o círculo. Troca por box-shadow em anel, que respeita o border-radius: 50%. */ html.tv-mode #play-button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--bg-void), 0 0 0 9px var(--accent-tertiary); }