/* ============================================================ Estilos visuais (data-ui) — cinco linguagens, o mesmo layout ------------------------------------------------------------ O projeto nasceu em glassmorphism (vidro fosco: blur, borda translúcida, superfície a 6%). Este arquivo mantém o vidro como PADRÃO e acrescenta quatro alternativas, escolhidas no gerador e gravadas no content.js (theme.style): glass vidro fosco — o padrão histórico clay claymorphism — massa opaca e fofa, sem borda minimal minimalismo — plano, fio de 1px, zero sombra liquid liquid glass — vidro espesso com brilho especular spatial spatial UI — objetos flutuando, profundidade COMO FUNCIONA O visual inteiro passa por uma camada de tokens (--ui-*). Os valores padrão abaixo são EXATAMENTE os do vidro atual, e as regras que os consomem só entram em cena quando existe um data-ui na página — sem o atributo (ou sem este arquivo) o site e o dock continuam byte a byte como eram. Cada estilo novo é, quase todo, uma troca de tokens; só o que não cabe em token (o brilho do liquid, o afundar do clay) vira regra própria, agrupada no fim do bloco de cada estilo. POR QUE [data-ui] E NÃO :root[data-ui] O atributo mora no , mas os seletores o tratam como um ANCESTRAL qualquer. Assim o gerador consegue mostrar as cinco prévias lado a lado, cada uma dentro do seu próprio wrapper com data-ui — e o mesmo CSS serve para a página inteira e para a miniatura. ESPECIFICIDADE O site.css define os tokens do tema claro em :root[data-theme] (0,2,0). Por isso cada bloco de estilo aparece duas vezes — :root[data-ui="x"] para empatar (e vencer no desempate, já que esta folha carrega depois) e [data-ui="x"] para as prévias aninhadas do gerador. ============================================================ */ /* ============================================================ 1. TOKENS — os valores padrão SÃO o vidro de hoje ============================================================ */ :root, [data-ui] { /* header */ --ui-header-blur: blur(18px) saturate(160%); /* cartões (notícias, vídeos, equipe, contato, programação...) */ --ui-card-bg: var(--site-surface); --ui-card-border: 1px solid var(--site-border); --ui-card-radius: var(--site-radius); --ui-card-shadow: none; --ui-card-hover-transform: translateY(-3px); --ui-card-hover-border: rgba(255, 255, 255, 0.25); --ui-card-hover-shadow: none; /* controles pequenos (tema, menu, clima, setas, redes, abas) */ --ui-control-bg: var(--site-surface); --ui-control-border: 1px solid var(--site-border); --ui-control-shadow: none; --ui-control-hover-bg: var(--site-surface-strong); /* dois raios: a cápsula dos rótulos e o círculo dos só-ícone */ --ui-pill-radius: 999px; --ui-round-radius: 50%; /* painéis flutuantes (modais, lightbox, offcanvas, dropdown) */ --ui-panel-bg: rgba(11, 14, 19, 0.9); --ui-panel-border: 1px solid rgba(255, 255, 255, 0.14); --ui-panel-radius: 20px; --ui-panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); --ui-panel-blur: blur(20px) saturate(160%); /* botões de ação (ouvir agora, doar, instalar) */ --ui-cta-bg: linear-gradient(135deg, var(--site-accent), var(--site-accent-2, #2ba7b0)); --ui-cta-radius: 999px; --ui-cta-shadow: 0 14px 34px color-mix(in srgb, var(--site-accent) 35%, transparent); --ui-cta-hover-transform: scale(1.04); --ui-cta-hover-shadow: 0 16px 40px color-mix(in srgb, var(--site-accent) 45%, transparent); /* --- o dock do player --- */ --ui-dock-tint: transparent; --ui-dock-veil: linear-gradient(120deg, rgba(8, 10, 15, 0.6) 0%, rgba(8, 10, 15, 0.85) 100%); --ui-dock-border: 1px solid rgba(255, 255, 255, 0.16); --ui-dock-radius: 26px; --ui-dock-radius-mobile: 22px; --ui-dock-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); --ui-dock-blur: blur(24px) saturate(160%); /* o fio de accent no topo do dock — none o desliga */ --ui-dock-hairline: block; /* play e demais botões do dock */ --ui-play-bg: linear-gradient(135deg, var(--accent, #22d3ee), color-mix(in srgb, var(--accent, #22d3ee) 55%, #04141a)); --ui-play-border: 1px solid rgba(255, 255, 255, 0.35); --ui-play-shadow: 0 10px 30px color-mix(in srgb, var(--accent, #22d3ee) 50%, transparent); --ui-play-radius: 50%; --ui-btn-bg: rgba(255, 255, 255, 0.07); --ui-btn-border: 1px solid rgba(255, 255, 255, 0.16); --ui-btn-radius: 50%; --ui-btn-shadow: none; --ui-btn-hover-bg: rgba(255, 255, 255, 0.16); /* capa e equalizador */ --ui-art-radius: 14px; --ui-art-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #4dd7e0) 65%, transparent), 0 8px 22px rgba(0, 0, 0, 0.45); --ui-viz-opacity: 0.14; } /* ============================================================ 2. REGRAS COMPARTILHADAS — leem os tokens acima ------------------------------------------------------------ Presas a [data-ui] para que uma página sem o atributo fique intocada pelo arquivo inteiro. ============================================================ */ /* --- header --- */ [data-ui] .site-header { backdrop-filter: var(--ui-header-blur); -webkit-backdrop-filter: var(--ui-header-blur); } /* --- cartões --- */ [data-ui] .news-card, [data-ui] .video-card, [data-ui] .gallery-item, [data-ui] .schedule-item, [data-ui] .team-card, [data-ui] .contact-card, [data-ui] .listen-card, [data-ui] .map-card, [data-ui] .gen-section, [data-ui] .gen-item { background: var(--ui-card-bg); border: var(--ui-card-border); border-radius: var(--ui-card-radius); box-shadow: var(--ui-card-shadow); } [data-ui] .news-card:hover, [data-ui] .gallery-item:hover { transform: var(--ui-card-hover-transform); border-color: var(--ui-card-hover-border); box-shadow: var(--ui-card-hover-shadow); } /* --- controles pequenos --- */ [data-ui] .theme-toggle, [data-ui] .nav-toggle, [data-ui] .header-weather, [data-ui] .header-install, [data-ui] .team-arrow, [data-ui] .site-social-item, [data-ui] .schedule-tab, [data-ui] .hero-badge, [data-ui] .gen-secondary, [data-ui] .gen-add { background: var(--ui-control-bg); border: var(--ui-control-border); box-shadow: var(--ui-control-shadow); } /* com rótulo: cápsula */ [data-ui] .header-weather, [data-ui] .schedule-tab, [data-ui] .hero-badge, [data-ui] .gen-secondary, [data-ui] .gen-add { border-radius: var(--ui-pill-radius); } /* só ícone: círculo */ [data-ui] .theme-toggle, [data-ui] .nav-toggle, [data-ui] .header-install, [data-ui] .team-arrow, [data-ui] .site-social-item { border-radius: var(--ui-round-radius); } [data-ui] .theme-toggle:hover, [data-ui] .nav-toggle:hover, [data-ui] .header-weather:hover, [data-ui] .header-install:hover, [data-ui] .team-arrow:hover:not(:disabled), [data-ui] .site-social-item:hover, [data-ui] .schedule-tab:hover, [data-ui] .gen-secondary:hover, [data-ui] .gen-add:hover { background: var(--ui-control-hover-bg); } /* a aba ativa da programação continua sendo o accent chapado */ [data-ui] .schedule-tab.is-active { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-ink); } /* campos do gerador seguem a mesma família dos controles */ [data-ui] .gen-field input, [data-ui] .gen-field select, [data-ui] .gen-field textarea, [data-ui] .gen-output textarea { border: var(--ui-control-border); border-radius: var(--ui-card-radius); box-shadow: var(--ui-control-shadow); } /* --- botões de ação --- */ [data-ui] .hero-cta, [data-ui] .header-donate, [data-ui] .listen-install, [data-ui] .gen-primary { background: var(--ui-cta-bg); border-radius: var(--ui-cta-radius); box-shadow: var(--ui-cta-shadow); } [data-ui] .hero-cta:hover { transform: var(--ui-cta-hover-transform); box-shadow: var(--ui-cta-hover-shadow); } /* --- painéis do site --- */ [data-ui] .news-modal-card, [data-ui] .video-dock { border-radius: var(--ui-panel-radius); box-shadow: var(--ui-panel-shadow); } [data-ui] .lightbox-figure img { border-radius: var(--ui-panel-radius); box-shadow: var(--ui-panel-shadow); } /* --- o dock do player --- */ [data-ui] #app-player .player { background-color: var(--ui-dock-tint); border: var(--ui-dock-border); border-radius: var(--ui-dock-radius); box-shadow: var(--ui-dock-shadow); backdrop-filter: var(--ui-dock-blur); -webkit-backdrop-filter: var(--ui-dock-blur); } @media (max-width: 991px) { [data-ui] #app-player .player { border-radius: var(--ui-dock-radius-mobile); } } /* o véu escuro que dá corpo ao dock (a camada de fundo de verdade: é ele que fica opaco nos estilos que não usam vidro) */ [data-ui] #app-player .player::before { background: var(--ui-dock-veil); } [data-ui] #app-player .player > .player-wrapper::before { display: var(--ui-dock-hairline); } [data-ui] #app-player .visualizer { opacity: var(--ui-viz-opacity); } /* play */ [data-ui] #app-player .player-button-play { background: var(--ui-play-bg) !important; /* custom.css marca esta regra */ border: var(--ui-play-border); border-radius: var(--ui-play-radius); box-shadow: var(--ui-play-shadow); } /* demais botões do dock */ [data-ui] #app-player .player-button-backward-step, [data-ui] #app-player .player-button-forward-step, [data-ui] #app-player .player-button-more, [data-ui] #app-player .player-right button.player-button, [data-ui] #app-player .player-right .player-button-volume-toggle { background: var(--ui-btn-bg); border: var(--ui-btn-border); border-radius: var(--ui-btn-radius); box-shadow: var(--ui-btn-shadow); } [data-ui] #app-player .player-button-alt { background: var(--ui-btn-bg) !important; /* custom.css marca esta regra */ border: var(--ui-btn-border); border-radius: var(--ui-btn-radius); box-shadow: var(--ui-btn-shadow); } [data-ui] #app-player .player-button-backward-step:hover, [data-ui] #app-player .player-button-forward-step:hover, [data-ui] #app-player .player-button-more:hover, [data-ui] #app-player .player-right button.player-button:hover, [data-ui] #app-player .player-right .player-button-volume-toggle:hover { background: var(--ui-btn-hover-bg); } [data-ui] #app-player .player-button-alt:hover { background: var(--ui-btn-hover-bg) !important; } /* o wrapper do volume não é um botão: segue neutro em todos os estilos */ [data-ui] #app-player .player-right .player-button-volume { background: none; border: none; box-shadow: none; } /* capa */ [data-ui] #app-player .player-artwork, [data-ui] #app-player .player-artwork img { border-radius: var(--ui-art-radius); } [data-ui] #app-player .player-artwork { box-shadow: var(--ui-art-shadow); } /* painéis do player (histórico, estações, volume, letra, compartilhar) */ [data-ui] #app-player .offcanvas-player, [data-ui] #app-player .modal-content, [data-ui] #app-player .player-modal { background: var(--ui-panel-bg); border: var(--ui-panel-border); border-radius: var(--ui-panel-radius); box-shadow: var(--ui-panel-shadow); backdrop-filter: var(--ui-panel-blur); -webkit-backdrop-filter: var(--ui-panel-blur); } [data-ui] #app-player .dropdown { background: var(--ui-panel-bg); border: var(--ui-panel-border); border-radius: var(--ui-card-radius); backdrop-filter: var(--ui-panel-blur); -webkit-backdrop-filter: var(--ui-panel-blur); } /* cartões dentro dos painéis: histórico, estações e a grade "mais" */ [data-ui] #app-player .history-item, [data-ui] #app-player .station { border: var(--ui-card-border); border-radius: var(--ui-art-radius); box-shadow: var(--ui-card-shadow); } [data-ui] #app-player .history-item::before { background: var(--ui-card-bg); } @media (max-width: 991px) { [data-ui] #app-player .player-right.is-active { background: var(--ui-panel-bg); border: var(--ui-panel-border); border-radius: var(--ui-panel-radius); box-shadow: var(--ui-panel-shadow); backdrop-filter: var(--ui-panel-blur); -webkit-backdrop-filter: var(--ui-panel-blur); } [data-ui] #app-player .player-right.is-active .player-button, [data-ui] #app-player .player-right.is-active .player-button-alt { background: var(--ui-btn-bg); border: var(--ui-btn-border); border-radius: var(--ui-art-radius); } [data-ui] #app-player .player-collapse { background: var(--ui-panel-bg); backdrop-filter: var(--ui-panel-blur); -webkit-backdrop-filter: var(--ui-panel-blur); } } /* ============================================================ 3. CLAYMORPHISM — massa opaca, fofa, sem borda ------------------------------------------------------------ Tudo aqui é volume: superfície OPACA (nenhum blur), cantos muito arredondados e a sombra em três partes — a queda externa difusa, um brilho interno em cima (a luz batendo na massa) e uma sombra interna embaixo (a espessura). É o oposto do vidro: em vez de deixar o fundo passar, os elementos o escondem. ============================================================ */ :root[data-ui="clay"], [data-ui="clay"] { /* a paleta sai do preto para um azul-ardósia, e a superfície fica BEM mais clara que o fundo: sem esse degrau a massa não existe — relevo é diferença de luz, e no quase-preto não há luz para diferenciar */ --site-bg: #12151f; --site-surface: #2b3246; --site-surface-strong: #363e56; --site-border: rgba(255, 255, 255, 0.05); --site-radius: 30px; --site-header-bg: #1b2030; /* a massa é opaca: os brilhos radiais do fundo sumiriam por baixo dela de qualquer jeito (e o site.js escreve --site-glow-1 num