*, *::before, *::after { box-sizing: border-box; }
:root {
--cor: #EDE7DD;
--fundo: #0A0910;
--preto: #05040A;
--tinta: #F5F1EA;
--tinta-2: rgba(245, 241, 234, .66);
--tinta-3: rgba(245, 241, 234, .40);
--tinta-4: rgba(245, 241, 234, .16);
--borda: rgba(245, 241, 234, .12);
--borda-forte: rgba(245, 241, 234, .22);
--negativo: #FF8A7A;
--r-p: 8px;
--r-m: 16px;
--r-g: 26px;
--h-player: 78px;
--display: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--texto: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--marca: 'Space Grotesk', 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
--transicao: 260ms cubic-bezier(.22, .61, .36, 1);
}
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body.corpo {
margin: 0;
min-height: 100vh;
background: var(--fundo);
color: var(--tinta);
font-family: var(--texto);
font-size: 16px;
line-height: 1.55;
letter-spacing: -.008em;
font-variant-numeric: tabular-nums;
padding-bottom: calc(var(--h-player) + 20px);
overflow-x: hidden;
}
body.corpo::before {
content: '';
position: fixed;
inset: 0;
z-index: -2;
background:
radial-gradient(72% 52% at 10% -8%, color-mix(in oklab, var(--cor) 30%, transparent), transparent 68%),
radial-gradient(56% 46% at 96% 2%, color-mix(in oklab, var(--cor) 14%, transparent), transparent 70%),
linear-gradient(178deg, var(--fundo) 0%, var(--preto) 72%);
}
body[data-pagina='home']::before {
background:
radial-gradient(46% 38% at 8% -6%, rgba(255, 45, 111, .30), transparent 70%),
radial-gradient(44% 36% at 52% -10%, rgba(34, 196, 168, .22), transparent 70%),
radial-gradient(46% 40% at 96% -4%, rgba(240, 168, 48, .22), transparent 70%),
linear-gradient(178deg, #0A0910 0%, var(--preto) 60%);
}
.grao {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .30;
mix-blend-mode: soft-light;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--cor);
outline-offset: 3px;
border-radius: 4px;
}
.oculto {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.pular {
position: absolute;
left: 14px; top: -60px;
z-index: 90;
padding: 10px 16px;
background: var(--tinta);
color: #000;
border-radius: var(--r-p);
font-weight: 600;
transition: top var(--transicao);
}
.pular:focus { top: 14px; }
.ic { width: 22px; height: 22px; fill: currentColor; flex: none; }
.topo {
position: sticky;
top: 0;
z-index: 40;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
padding: 14px clamp(16px, 4vw, 44px);
background: color-mix(in oklab, var(--fundo) 72%, transparent);
backdrop-filter: saturate(140%) blur(16px);
-webkit-backdrop-filter: saturate(140%) blur(16px);
border-bottom: 1px solid var(--borda);
}
.marca {
display: inline-flex;
align-items: center;
gap: 10px;
}
.marca__ondas {
display: flex;
align-items: flex-end;
gap: 2px;
height: 20px;
}
.marca__ondas i {
display: block;
width: 3px;
border-radius: 2px;
background: var(--cor);
animation: pulo 1100ms ease-in-out infinite;
}
.marca__ondas i:nth-child(1) { height: 8px; animation-delay: 0ms; }
.marca__ondas i:nth-child(2) { height: 18px; animation-delay: 160ms; }
.marca__ondas i:nth-child(3) { height: 12px; animation-delay: 320ms; }
.marca__ondas i:nth-child(4) { height: 6px; animation-delay: 480ms; }
@keyframes pulo {
0%, 100% { transform: scaleY(.45); }
50% { transform: scaleY(1); }
}
.marca__texto {
font-family: var(--marca);
font-weight: 700;
font-size: 21px;
letter-spacing: -.03em;
}
.marca__sufixo {
display: block;
font-family: var(--texto);
font-weight: 500;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--tinta-3);
margin-top: -4px;
}
.canais-nav {
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: 999px;
border: 1px solid var(--borda);
font-size: 12px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--tinta-2);
transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.chip__ponto {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--c, var(--cor));
box-shadow: 0 0 0 0 color-mix(in oklab, var(--c, var(--cor)) 60%, transparent);
}
.chip:hover { color: var(--tinta); border-color: var(--borda-forte); }
.chip--ativo {
color: #08070C;
background: var(--c, var(--cor));
border-color: transparent;
}
.chip--ativo .chip__ponto { background: #08070C; }
.topo__extra { display: flex; gap: 18px; }
.topo__link {
font-size: 13px;
color: var(--tinta-3);
transition: color var(--transicao);
}
.topo__link:hover { color: var(--tinta); }
.topo__link--ativo { color: var(--tinta); }
.topo__link--ativo::after { transform: scaleX(1); }
.miolo {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 44px) 40px;
}
/* ==================================================================
TRANSIÇÃO DE PÁGINA
A navegação é client-side: só o #miolo é trocado. Até aqui a troca era
seca — o conteúdo simplesmente piscava para outro. Duas peças, ambas
discretas de propósito:
1. uma linha fina no topo enquanto a próxima página é buscada;
2. um fade curto no conteúdo que entra.
Só o que ENTRA é animado. Animar a saída obrigaria a segurar a troca, e
a navegação passaria a PARECER mais lenta do que é.
================================================================== */
@keyframes miolo-entra {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.miolo[data-entrando='1'] {
animation: miolo-entra 300ms cubic-bezier(.22, .61, .36, 1) both;
will-change: opacity, transform;
}
/* linha de carregamento no topo, na cor do canal.
z-index acima do .topo (40), que é sticky. */
@keyframes barra-carrega {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
body.corpo[data-carregando='1']::after {
content: '';
position: fixed;
top: 0; left: 0;
width: 100%; height: 2px;
z-index: 95;
pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in oklab, var(--cor) 90%, #fff) 50%,
transparent 100%);
animation: barra-carrega 900ms cubic-bezier(.5, 0, .3, 1) infinite;
}
@media (prefers-reduced-motion: reduce) {
.miolo[data-entrando='1'] { animation: none; }
body.corpo[data-carregando='1']::after { animation: none; opacity: .6; }
}
.vivo {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tinta-2);
}
.vivo__ponto {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--cor);
animation: batida 2s ease-out infinite;
}
@keyframes batida {
0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cor) 70%, transparent); }
70% { box-shadow: 0 0 0 9px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.abertura { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.abertura__titulo {
margin: 16px 0 22px;
font-size: clamp(42px, 7.4vw, 88px);
font-weight: 800;
line-height: .94;
letter-spacing: -.045em;
}
.abertura__titulo em {
display: block;
font-style: normal;
background: linear-gradient(96deg, #FF2D6F 0%, #F0A830 48%, #22C4A8 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.abertura__texto {
font-size: clamp(16px, 1.6vw, 19px);
color: var(--tinta-2);
max-width: 60ch;
}
.abertura__honestidade {
margin-top: 18px;
padding-left: 14px;
border-left: 2px solid var(--borda-forte);
font-size: 14px;
color: var(--tinta-3);
max-width: 60ch;
}
.botao {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border: 1px solid transparent;
border-radius: 999px;
background: var(--c, var(--cor));
color: #08070C;
font-size: 14px;
font-weight: 600;
letter-spacing: -.01em;
cursor: pointer;
transition: transform var(--transicao), filter var(--transicao), background var(--transicao);
}
.botao:hover { filter: brightness(1.1); }
.botao:active { transform: scale(.97); }
.botao .ic { width: 18px; height: 18px; }
.botao--fantasma {
background: transparent;
color: var(--tinta);
border-color: var(--borda-forte);
}
.botao--fantasma:hover { border-color: var(--c, var(--cor)); color: var(--c, var(--cor)); filter: none; }
.botao--tocar[data-tocando='1'] { background: transparent; color: var(--c, var(--cor)); border-color: var(--c, var(--cor)); }
.capa {
display: block;
position: relative;
aspect-ratio: 1;
width: 100%;
border-radius: var(--r-m);
overflow: hidden;
isolation: isolate;
background: #14121C;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
container-type: size;
}
/* A capa real entra POR CIMA da arte gerada, nunca no lugar dela: se a URL cair,
o JS remove o ![]()
e o miolo colorido continua ali. É também o que faz a troca
de faixa não piscar — a arte já está pintada quando a capa nova está baixando. */
.capa__img {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
}
.capa__img--entra { opacity: 0; transition: opacity 420ms ease; }
.capa__img--entra[data-pronta='1'] { opacity: 1; }
.capa--gerada {
background:
radial-gradient(110% 110% at var(--px, 25%) 12%, hsl(var(--h1) 88% 62%) 0%, hsl(var(--h1) 80% 38%) 42%, transparent 72%),
radial-gradient(95% 95% at 88% 92%, hsl(var(--h2) 82% 52%) 0%, transparent 66%),
linear-gradient(150deg, #191527 0%, #08060F 100%);
}
.capa--gerada::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: repeating-linear-gradient(var(--ang, 30deg), rgba(255, 255, 255, .10) 0 1px, transparent 1px 8px);
mix-blend-mode: soft-light;
}
.capa__sigla {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--display);
font-weight: 800;
font-size: 20px;
font-size: 42cqw;
line-height: 1;
letter-spacing: -.06em;
color: rgba(10, 8, 18, .42);
mix-blend-mode: overlay;
}
.capa--vazia {
display: grid;
place-items: center;
background: linear-gradient(150deg, #1B1826, #0A0812);
color: var(--cor);
}
.capa--vazia .ic { width: 46%; height: 46%; opacity: .75; }
.capa--mini { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.capa--peq { width: 56px; height: 56px; border-radius: 12px; flex: none; }
.capa--palco { width: 100%; max-width: 300px; border-radius: 22px; }
.palco {
position: relative;
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: clamp(24px, 4vw, 56px);
align-items: start;
padding-bottom: clamp(32px, 5vw, 56px);
border-bottom: 1px solid var(--borda);
}
.palco__brilho {
position: absolute;
right: 0; top: -22%;
width: 62%; height: 120%;
z-index: -1;
background: radial-gradient(50% 50% at 62% 50%, color-mix(in oklab, var(--cor) 46%, transparent), transparent 70%);
filter: blur(30px);
pointer-events: none;
}
.palco__nome {
margin: 14px 0 0;
font-size: clamp(60px, 11vw, 128px);
font-weight: 800;
letter-spacing: -.055em;
line-height: .88;
color: var(--cor);
}
.palco__tag {
margin-top: 6px;
font-family: var(--display);
font-size: clamp(20px, 2.4vw, 27px);
font-weight: 500;
letter-spacing: -.02em;
}
.palco__desc {
margin-top: 16px;
font-size: 15px;
color: var(--tinta-2);
max-width: 42ch;
}
.palco__meta {
display: flex;
gap: 28px;
margin: 26px 0 0;
flex-wrap: wrap;
}
.palco__meta div { margin: 0; }
.palco__meta dt {
font-size: 10px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tinta-3);
}
.palco__meta dd {
margin: 2px 0 0;
font-family: var(--display);
font-size: 26px;
font-weight: 700;
letter-spacing: -.03em;
}
.palco__agora {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: clamp(56px, 7vw, 150px);
align-items: start;
}
.agora__capa { position: relative; }
.agora__capa::after {
content: '';
position: absolute;
inset: 14% 6% -12% 6%;
z-index: -1;
border-radius: 30px;
background: var(--cor);
filter: blur(38px);
opacity: .42;
}
/* vinil girando, metade pra fora do lado direito da capa (atras dela) */
.agora__disco { position: relative; }
.vinil-slot {
position: absolute; top: 50%; right: 0; z-index: -1;
height: 100%; width: auto; aspect-ratio: 1;
transform: translate(50%, -50%);
}
.vinil {
position: absolute; inset: 0; border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--cor) 82%, #000) 0 19%, transparent 19.5%),
repeating-radial-gradient(circle at 50% 50%, #191920 0 2px, #08080a 2px 4.4px),
#0a0a0c;
box-shadow: 0 24px 64px -22px #000, inset 0 0 46px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.05);
animation: girar-vinil 6s linear infinite;
}
.vinil::after {
content: ''; position: absolute; left: 50%; top: 50%; width: 4.6%; aspect-ratio: 1;
transform: translate(-50%, -50%); border-radius: 50%;
background: #050506; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
@keyframes girar-vinil { to { transform: rotate(360deg); } }
/* troca de musica: o disco desliza pra fora e volta (efeito de trocar o vinil) */
@keyframes vinil-troca {
0% { transform: translate(50%, -50%); }
50% { transform: translate(174%, -50%); opacity: .2; }
100% { transform: translate(50%, -50%); opacity: 1; }
}
[data-trocando='1'] .vinil-slot { animation: vinil-troca 480ms cubic-bezier(.5,0,.28,1) both; }
@media (prefers-reduced-motion: reduce) { .vinil { animation: none; } }
.selo {
display: inline-block;
padding: 5px 11px;
border-radius: 999px;
background: color-mix(in oklab, var(--cor) 20%, transparent);
border: 1px solid color-mix(in oklab, var(--cor) 40%, transparent);
font-size: 10px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: color-mix(in oklab, var(--cor) 84%, var(--tinta));
}
.selo--fraco {
background: transparent;
border-color: var(--borda);
color: var(--tinta-3);
letter-spacing: .1em;
}
.agora__titulo {
margin-top: 14px;
font-size: clamp(28px, 3.6vw, 46px);
font-weight: 700;
letter-spacing: -.04em;
text-wrap: balance;
}
.agora__artista {
margin-top: 6px;
font-size: clamp(17px, 1.8vw, 21px);
color: var(--tinta-2);
}
.agora__album { margin-top: 4px; font-size: 13px; color: var(--tinta-3); }
.agora__credito { margin-top: 10px; font-size: 13px; color: var(--tinta-2); }
.agora__credito strong { color: var(--cor); }
.agora__tempo { margin-top: 20px; }
.tempo {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--tinta-3);
}
.tempo__num { font-variant-numeric: tabular-nums; flex: none; }
.tempo__num--resta { color: var(--tinta-2); }
.tempo__rotulo {
flex: none;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tinta-3);
}
.tempo__rotulo:empty { display: none; }
/* Sem duração conhecida (canal em espelho: o painel de origem não diz quanto a
faixa dura) a barra some. Barra que anda sem saber onde termina é mentira
desenhada — melhor mostrar só há quanto tempo a música está no ar. */
.tempo[data-sem-duracao='1'] .player__trilho,
.tempo[data-sem-duracao='1'] .tempo__num--resta { display: none; }
.player__trilho {
display: block;
flex: 1;
height: 4px;
min-width: 40px;
border-radius: 99px;
background: var(--tinta-4);
overflow: hidden;
}
.player__preenche {
display: block;
height: 100%;
width: 100%;
border-radius: 99px;
background: var(--cor);
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}
.agora__acoes {
display: flex;
align-items: center;
gap: 12px;
margin-top: 22px;
flex-wrap: wrap;
}
.palco__comunidade { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
[data-favoritar-canal] { padding: 9px 13px; }
[data-favoritar-canal] .ic { fill: transparent; }
[data-favoritar-canal][data-ativo='1'] { color: var(--cor); border-color: var(--cor); background: color-mix(in oklab,var(--cor) 10%,transparent); }
[data-favoritar-canal][data-ativo='1'] .ic { fill: currentColor; }
[data-favoritar-canal] em { font-style: normal; font-size: 10px; opacity: .7; }
.palco__ouvindo-com { display: flex; align-items: center; gap: 9px; color: var(--tinta-3); font-size: 10px; }
.palco__ouvindo-com > div { display: flex; }
.palco__ouvindo-com a { display: grid; place-items: center; width: 27px; height: 27px; margin-left: -6px; overflow: hidden; border: 2px solid var(--fundo); border-radius: 50%; background: color-mix(in oklab,var(--cor) 26%,#15111c); color: var(--tinta); text-decoration: none; font-size: 9px; font-weight: 800; }
.palco__ouvindo-com a:first-child { margin-left: 0; }
.palco__ouvindo-com img { width: 100%; height: 100%; object-fit: cover; }
.agora__votos { display: flex; gap: 8px; }
.agora__dica { margin-top: 14px; font-size: 12.5px; color: var(--tinta-3); max-width: 44ch; }
.agora__vazio { grid-column: 1 / -1; padding: 30px 0; }
.agora__vazio h2 { font-size: 30px; }
.agora__vazio p { margin-top: 10px; color: var(--tinta-2); max-width: 46ch; }
.voto {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 14px;
border-radius: 999px;
border: 1px solid var(--borda-forte);
background: rgba(255, 255, 255, .03);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform 140ms cubic-bezier(.22,.61,.36,1), border-color var(--transicao), background var(--transicao), color var(--transicao);
}
.voto .ic { width: 17px; height: 17px; }
.voto:hover { border-color: var(--cor); color: var(--cor); }
.voto:active { transform: scale(.92); }
.voto[aria-pressed='true'].voto--pos {
background: var(--cor);
border-color: var(--cor);
color: #08070C;
}
.voto[aria-pressed='true'].voto--neg {
background: color-mix(in oklab, var(--negativo) 24%, transparent);
border-color: var(--negativo);
color: var(--negativo);
}
.voto--neg:hover { border-color: var(--negativo); color: var(--negativo); }
.voto--grande { padding: 13px 22px; font-size: 15px; }
.voto[disabled] { opacity: .32; cursor: default; }
.voto[disabled]:hover { border-color: var(--borda-forte); color: inherit; }
.voto[disabled]:active { transform: none; }
.voto__n { font-variant-numeric: tabular-nums; }
.voto--pulsa { animation: voto-pulsa 420ms ease-out; }
@keyframes voto-pulsa {
0% { transform: scale(1); }
35% { transform: scale(1.18); }
100% { transform: scale(1); }
}
/* ==================================================================
SOBRE A MÚSICA — curiosidade (Wikipedia / escrita no admin) + números
Fica colado embaixo do palco, de propósito: é leitura sobre a faixa que
está tocando AGORA, e troca junto com ela.
================================================================== */
.sobre {
margin: 26px 0 0;
padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px);
border: 1px solid var(--borda);
border-radius: var(--r-g);
background:
radial-gradient(120% 140% at 0% 0%,
color-mix(in oklab, var(--cor) 9%, transparent) 0%, transparent 62%),
color-mix(in oklab, var(--tinta) 4%, transparent);
}
.sobre__cabeca {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.sobre__selo {
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: color-mix(in oklab, var(--cor) 78%, var(--tinta));
}
.sobre__fonte {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
font-size: 12px;
color: var(--tinta-3);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--transicao), border-color var(--transicao);
}
.sobre__fonte:hover,
.sobre__fonte:focus-visible {
color: var(--tinta);
border-bottom-color: var(--borda-forte);
}
.ic--mini { width: 12px; height: 12px; fill: currentColor; }
/* medida de leitura: parágrafo largo demais cansa e ninguém lê */
.sobre__texto {
max-width: 68ch;
font-size: clamp(14.5px, 1.35vw, 16px);
line-height: 1.62;
color: var(--tinta-2);
text-wrap: pretty;
}
.sobre__fatos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 2px 24px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--borda);
}
/* sem texto, os números sobem e viram o conteúdo principal do bloco */
.sobre__texto[hidden] + .sobre__fatos { margin-top: 0; padding-top: 0; border-top: 0; }
.sobre__fato dt {
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--tinta-3);
}
.sobre__fato dd {
margin: 3px 0 0;
font-size: 14px;
color: var(--tinta);
font-variant-numeric: tabular-nums;
}
/* entrada quando a faixa troca — o mesmo gesto do vinil trocando */
@keyframes sobre-entra {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.sobre[data-entrando='1'] { animation: sobre-entra 460ms cubic-bezier(.22, .61, .36, 1) both; }
@media (prefers-reduced-motion: reduce) {
.sobre[data-entrando='1'] { animation: none; }
}
@media (max-width: 640px) {
.sobre { margin-top: 18px; border-radius: var(--r-m); }
.sobre__fatos { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px 16px; }
}
.colunas {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(18px, 2.6vw, 34px);
margin-top: clamp(28px, 4vw, 48px);
align-items: start;
}
/* A página do canal também é a landing page daquele estilo. O bloco abaixo
traduz a operação ao vivo para quem chegou do Google sem parecer um texto
artificial de SEO: explica o que realmente existe e aponta as ações reais. */
.descoberta {
margin: 26px 0 0;
padding: clamp(22px, 3vw, 38px);
border: 1px solid var(--borda);
border-radius: var(--r-g);
background:
linear-gradient(120deg, color-mix(in oklab, var(--cor) 10%, transparent), transparent 48%),
color-mix(in oklab, var(--tinta) 3.5%, transparent);
}
.descoberta__selo {
margin-bottom: 8px;
color: color-mix(in oklab, var(--cor) 78%, var(--tinta));
font-size: 10px;
font-weight: 750;
letter-spacing: .18em;
text-transform: uppercase;
}
.descoberta h2 { max-width: 20ch; font-size: clamp(25px, 3.1vw, 44px); }
.descoberta__grade {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 3vw, 46px);
margin-top: 22px;
color: var(--tinta-2);
line-height: 1.68;
}
.descoberta__provas {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.descoberta__provas li {
padding: 7px 12px;
border: 1px solid var(--borda);
border-radius: 999px;
color: var(--tinta-2);
font-size: 12px;
}
[data-compartilhar-canal][data-copiado='1'] {
border-color: color-mix(in oklab, var(--cor) 60%, var(--borda));
color: var(--cor);
}
@media (max-width: 700px) {
.descoberta { border-radius: var(--r-m); }
.descoberta__grade { grid-template-columns: 1fr; gap: 12px; }
}
/* Sobre: texto editorial com ritmo de encarte, sem virar uma grade genérica
de marketing. As linhas numeradas são a sequência real do produto. */
.miolo--editorial { max-width: 1120px; }
.editorial-hero {
padding: clamp(34px, 7vw, 94px) 0 clamp(36px, 6vw, 76px);
border-bottom: 1px solid var(--borda);
}
.editorial-hero__selo {
margin-bottom: 14px;
color: var(--cor);
font-size: 11px;
font-weight: 750;
letter-spacing: .2em;
text-transform: uppercase;
}
.editorial-hero h1 { max-width: 15ch; font-size: clamp(42px, 7vw, 88px); }
.editorial-hero > p:last-child {
max-width: 62ch;
margin-top: 28px;
color: var(--tinta-2);
font-size: clamp(17px, 2vw, 22px);
line-height: 1.55;
}
.editorial-faixas { display: grid; }
.editorial-faixas article {
display: grid;
grid-template-columns: 72px minmax(180px, .7fr) minmax(260px, 1.3fr);
gap: clamp(16px, 3vw, 44px);
align-items: baseline;
padding: clamp(24px, 4vw, 42px) 0;
border-bottom: 1px solid var(--borda);
}
.editorial-faixas article > span { color: var(--cor); font: 600 12px var(--marca); letter-spacing: .14em; }
.editorial-faixas h2 { font-size: clamp(23px, 2.8vw, 34px); }
.editorial-faixas p { color: var(--tinta-2); line-height: 1.68; }
.editorial-manifesto {
margin: clamp(50px, 9vw, 110px) 0 40px;
padding: clamp(28px, 5vw, 58px);
border-radius: var(--r-g);
background: linear-gradient(135deg, rgba(255,45,111,.22), rgba(34,196,168,.12) 54%, rgba(240,168,48,.15));
}
.editorial-manifesto__chamada { color: var(--tinta-2); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.editorial-manifesto h2 { max-width: 18ch; margin-top: 12px; font-size: clamp(32px, 5vw, 64px); }
.editorial-manifesto > p:not(.editorial-manifesto__chamada) { max-width: 62ch; margin: 24px 0; color: var(--tinta-2); line-height: 1.65; }
@media (max-width: 700px) {
.editorial-faixas article { grid-template-columns: 38px 1fr; }
.editorial-faixas article p { grid-column: 2; }
.editorial-manifesto { border-radius: var(--r-m); }
}
.coluna { display: grid; gap: clamp(18px, 2.6vw, 28px); }
.bloco {
padding: clamp(20px, 2.4vw, 28px);
border-radius: var(--r-g);
border: 1px solid var(--borda);
background: color-mix(in oklab, var(--tinta) 4%, transparent);
}
.bloco__titulo {
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 700;
letter-spacing: -.03em;
}
.bloco__linha-fina {
margin-top: 8px;
font-size: 13px;
color: var(--tinta-3);
max-width: 52ch;
}
.vazio { color: var(--tinta-3); font-size: 14px; }
.top5__cabeca {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.cronometro {
text-align: right;
padding: 10px 16px;
border-radius: var(--r-m);
border: 1px solid color-mix(in oklab, var(--cor) 34%, transparent);
background: color-mix(in oklab, var(--cor) 10%, transparent);
flex: none;
}
.cronometro__rotulo {
display: block;
font-size: 9.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tinta-3);
}
.cronometro__valor {
display: block;
font-family: var(--display);
font-size: 30px;
font-weight: 700;
letter-spacing: -.035em;
color: var(--cor);
line-height: 1.1;
}
.cronometro__votos { display: block; font-size: 11px; color: var(--tinta-3); }
.cronometro--fechado .cronometro__valor { color: var(--tinta-3); }
.cedula { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cedula__item {
display: grid;
grid-template-columns: 26px 44px minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px;
padding: 9px 10px;
border-radius: var(--r-m);
transition: background var(--transicao);
}
.cedula__item:hover { background: rgba(255, 255, 255, .04); }
.cedula__item[data-no-ar='1'] { background: color-mix(in oklab, var(--cor) 12%, transparent); }
.cedula__pos {
font-family: var(--display);
font-size: 15px;
font-weight: 700;
color: var(--tinta-3);
text-align: center;
}
.cedula__item:nth-child(-n+5) .cedula__pos { color: var(--cor); }
.cedula__texto { display: block; min-width: 0; }
.cedula__texto strong {
display: block;
font-size: 15px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cedula__texto > span {
display: block;
font-size: 12.5px;
color: var(--tinta-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cedula__barra {
display: block;
height: 3px;
margin-top: 7px;
border-radius: 99px;
background: var(--tinta-4);
overflow: hidden;
}
.cedula__barra i {
display: block;
height: 100%;
background: var(--cor);
border-radius: 99px;
transition: width 500ms cubic-bezier(.22,.61,.36,1);
}
.cedula__saldo {
font-family: var(--display);
font-size: 19px;
font-weight: 700;
letter-spacing: -.03em;
min-width: 34px;
text-align: right;
color: var(--tinta-3);
}
.cedula__saldo[data-sinal='pos'] { color: var(--cor); }
.cedula__saldo[data-sinal='neg'] { color: var(--negativo); }
.cedula__votos { display: flex; gap: 6px; }
.cedula__votos .voto { padding: 8px 11px; font-size: 12px; }
.top5__rodape { margin-top: 16px; font-size: 12px; color: var(--tinta-3); }
.busca { display: flex; gap: 8px; margin: 18px 0 14px; }
.busca__campo {
flex: 1;
min-width: 0;
padding: 12px 16px;
border-radius: 999px;
border: 1px solid var(--borda-forte);
background: rgba(0, 0, 0, .28);
color: var(--tinta);
}
.busca__campo::placeholder { color: var(--tinta-3); }
.busca__campo:focus { outline: none; border-color: var(--cor); }
.resultados { display: grid; gap: 4px; }
.resultado {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 8px 10px;
border-radius: var(--r-m);
transition: background var(--transicao);
}
.resultado:hover { background: rgba(255, 255, 255, .04); }
.resultado__texto { display: block; min-width: 0; }
.resultado__texto strong {
display: block;
font-size: 14.5px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.resultado__texto span { display: block; font-size: 12.5px; color: var(--tinta-3); }
.resultado .botao { padding: 8px 15px; font-size: 13px; }
.resultado[data-feito='1'] { opacity: .55; }
.regra { margin-top: 14px; font-size: 11.5px; color: var(--tinta-3); line-height: 1.6; }
.proxima { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.proxima__texto { display: block; min-width: 0; }
.proxima__texto strong {
display: block;
font-family: var(--display);
font-size: 17px;
font-weight: 700;
letter-spacing: -.02em;
}
.proxima__texto > span { display: block; font-size: 13px; color: var(--tinta-2); }
.proxima__texto .selo { margin-top: 7px; }
.historico { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.historico__item {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 8px 6px;
border-top: 1px solid var(--borda);
font-size: 14px;
}
.historico__item:first-child { border-top: 0; }
.historico__hora { font-size: 12px; color: var(--tinta-3); }
.historico__texto { display: block; min-width: 0; }
.historico__texto strong {
display: block;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.historico__texto span { display: block; font-size: 12.5px; color: var(--tinta-3); }
.outros { display: grid; gap: 10px; margin-top: 16px; }
.outro {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 14px;
padding: 16px 18px;
border-radius: var(--r-m);
border: 1px solid color-mix(in oklab, var(--c) 24%, var(--borda));
background: linear-gradient(140deg, color-mix(in oklab, var(--c) 14%, var(--f)), var(--f));
transition: transform var(--transicao), border-color var(--transicao);
}
.outro:hover { transform: translateY(-2px); border-color: var(--c); }
.outro__capa { grid-row: 1 / -1; display: block; width: 44px; }
.outro__curto {
grid-column: 2;
font-family: var(--display);
font-size: 24px;
font-weight: 800;
letter-spacing: -.04em;
color: var(--c);
}
.outro__tag { grid-column: 2; display: block; font-size: 13px; color: var(--tinta-2); }
.outro__agora {
grid-column: 2;
display: block;
margin-top: 8px;
font-size: 12px;
color: var(--tinta-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.manifesto {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 2.4vw, 30px);
margin-top: clamp(44px, 6vw, 80px);
padding-top: clamp(30px, 4vw, 46px);
border-top: 1px solid var(--borda);
}
.manifesto__num {
font-family: var(--display);
font-size: 13px;
font-weight: 700;
letter-spacing: .16em;
color: var(--tinta-3);
}
.manifesto__item h2 {
margin: 10px 0 10px;
font-size: clamp(20px, 2.2vw, 25px);
font-weight: 700;
}
.manifesto__item p { font-size: 14.5px; color: var(--tinta-2); }
.miolo--erro { min-height: 46vh; }
.erro__titulo { font-size: clamp(34px, 6vw, 64px); }
.erro__texto { margin-top: 14px; color: var(--tinta-2); }
.erro__acoes { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.rodape {
position: relative;
z-index: 1;
max-width: 1280px;
margin: clamp(40px, 6vw, 76px) auto 0;
padding: clamp(24px, 3vw, 36px) clamp(16px, 4vw, 44px) 30px;
border-top: 1px solid var(--borda);
}
.rodape__linha {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.rodape__marca {
font-family: var(--display);
font-size: 24px;
font-weight: 800;
letter-spacing: -.04em;
}
.rodape__marca span {
display: block;
font-family: var(--texto);
font-size: 10px;
font-weight: 500;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--tinta-3);
}
.rodape__nota { font-size: 13.5px; color: var(--tinta-2); max-width: 70ch; }
.rodape__creditos { margin-top: 22px; font-size: 11.5px; color: var(--tinta-3); }
.player {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
}
.player__vidro {
position: relative;
z-index: 62;
background: color-mix(in oklab, var(--preto) 82%, transparent);
backdrop-filter: saturate(150%) blur(20px);
-webkit-backdrop-filter: saturate(150%) blur(20px);
border-top: 1px solid color-mix(in oklab, var(--cor) 26%, var(--borda));
padding-bottom: env(safe-area-inset-bottom);
}
.player__semjs {
display: none;
max-width: 1280px;
margin: 0 auto;
padding: 14px clamp(16px, 4vw, 44px);
border-top: 1px solid var(--borda);
font-size: 13px;
color: var(--tinta-3);
}
.player__semjs a { color: var(--cor); text-decoration: underline; }
.player__progresso { height: 2px; background: var(--tinta-4); overflow: hidden; }
.player__progresso span {
display: block;
height: 100%;
width: 100%;
background: var(--cor);
transform: scaleX(0);
transform-origin: left center;
will-change: transform;
}
.player__barra {
display: grid;
grid-template-columns: auto minmax(0, 1fr) minmax(140px, 300px) auto auto auto auto;
align-items: center;
gap: 16px;
max-width: 1280px;
margin: 0 auto;
padding: 12px clamp(12px, 3vw, 32px);
height: var(--h-player);
}
.player__play {
position: relative;
display: grid;
place-items: center;
width: 46px; height: 46px;
border: 0;
border-radius: 50%;
background: var(--cor);
color: #08070C;
cursor: pointer;
flex: none;
transition: transform 160ms cubic-bezier(.22,.61,.36,1), filter var(--transicao);
}
.player__play:hover { filter: brightness(1.12); }
.player__play:active { transform: scale(.93); }
.player__play .ic { width: 24px; height: 24px; }
.player__play .ic--pausa, .player .ic--mudo { display: none; }
.player[data-estado='tocando'] .ic--play { display: none; }
.player[data-estado='tocando'] .ic--pausa { display: block; }
.player[data-mudo='1'] .ic--som { display: none; }
.player[data-mudo='1'] .ic--mudo { display: block; }
.player__carregando {
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--cor);
opacity: 0;
}
.player[data-estado='carregando'] .player__carregando {
opacity: 1;
animation: gira 800ms linear infinite;
}
.player[data-estado='carregando'] .ic--play { opacity: .35; }
@keyframes gira { to { transform: rotate(360deg); } }
.player__abre {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
padding: 4px;
border: 0;
background: none;
text-align: left;
cursor: pointer;
border-radius: 12px;
}
.player__capa { flex: none; }
.player__texto { display: block; min-width: 0; }
.player__titulo {
display: block;
font-family: var(--display);
font-size: 15.5px;
font-weight: 700;
letter-spacing: -.02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.player__artista {
display: block;
font-size: 12.5px;
color: var(--tinta-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.player__tempo {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
min-width: 0;
font-size: 11.5px;
color: var(--tinta-3);
}
.player__tempo .tempo { font-size: 11.5px; }
.player__seguir {
display: flex;
align-items: baseline;
gap: 7px;
min-width: 0;
font-size: 11px;
color: var(--tinta-3);
}
.player__seguir > span {
flex: none;
letter-spacing: .14em;
text-transform: uppercase;
font-size: 9.5px;
}
.player__seguir strong {
min-width: 0;
font-weight: 500;
color: var(--tinta-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.player__votos { display: flex; gap: 6px; }
.player__votos .voto { padding: 8px 12px; }
.player__favorito {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 38px;
height: 38px;
padding: 0 10px;
border: 1px solid var(--borda);
border-radius: 999px;
background: transparent;
color: var(--tinta-2);
cursor: pointer;
font: inherit;
transition: color var(--transicao), border-color var(--transicao), background var(--transicao), transform 150ms;
}
.player__favorito[hidden] { display: none; }
.player__favorito:hover { color: var(--cor); border-color: var(--cor); }
.player__favorito:active { transform: scale(.94); }
.player__favorito .ic { width: 19px; height: 19px; fill: transparent; transition: fill var(--transicao); }
.player__favorito[data-ativo='1'] { color: var(--cor); border-color: color-mix(in oklab, var(--cor) 55%, transparent); background: color-mix(in oklab, var(--cor) 12%, transparent); }
.player__favorito[data-ativo='1'] .ic { fill: currentColor; }
.player__favorito [data-favoritos-total] { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.player__favorito--grande { height: 44px; padding: 0 16px; }
.player__favorito--grande > span { font-size: 12px; font-weight: 650; }
.player__favorito--grande em { font-style: normal; font-size: 11px; }
.folha__favoritaram { display: flex; align-items: center; gap: 10px; margin-top: 2px; color: var(--tinta-3); font-size: 11px; }
.folha__favoritaram[hidden] { display: none; }
.folha__favoritaram > div { display: flex; }
.folha__favoritaram a { width: 28px; height: 28px; margin-left: -6px; border: 2px solid var(--fundo); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in oklab, var(--cor) 28%, #17131f); color: var(--tinta); text-decoration: none; font-size: 9px; font-weight: 750; }
.folha__favoritaram a:first-child { margin-left: 0; }
.folha__favoritaram img { width: 100%; height: 100%; object-fit: cover; }
.player__som { display: flex; align-items: center; gap: 8px; }
.player__mudo, .player__abrir-tela, .folha__fechar {
display: grid;
place-items: center;
width: 38px; height: 38px;
border: 1px solid var(--borda);
border-radius: 50%;
background: transparent;
color: var(--tinta-2);
cursor: pointer;
transition: color var(--transicao), border-color var(--transicao);
}
.player__mudo:hover, .player__abrir-tela:hover, .folha__fechar:hover { color: var(--cor); border-color: var(--cor); }
.player__volume {
-webkit-appearance: none;
appearance: none;
width: 92px;
height: 4px;
border-radius: 99px;
background: var(--tinta-4);
cursor: pointer;
}
.player__volume::-webkit-slider-thumb {
-webkit-appearance: none;
width: 13px; height: 13px;
border-radius: 50%;
background: var(--tinta);
border: 0;
}
.player__volume::-moz-range-thumb {
width: 13px; height: 13px;
border-radius: 50%;
background: var(--tinta);
border: 0;
}
.player__abrir-tela .ic { transition: transform var(--transicao); }
.player[data-aberto='1'] .player__abrir-tela .ic { transform: rotate(180deg); }
.player__folha {
position: fixed;
inset: 0;
z-index: 61;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 24px clamp(18px, 6vw, 40px) calc(var(--h-player) + 30px);
background:
radial-gradient(80% 50% at 50% 0%, color-mix(in oklab, var(--cor) 34%, transparent), transparent 68%),
linear-gradient(180deg, var(--fundo), var(--preto));
overflow-y: auto;
animation: sobe 320ms cubic-bezier(.22,.61,.36,1);
}
@keyframes sobe { from { transform: translateY(14px); opacity: 0; } }
.folha__topo {
width: 100%;
max-width: 460px;
display: flex;
align-items: center;
justify-content: space-between;
}
.folha__canal {
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--cor);
}
.folha__capa { width: min(74vw, 320px); margin-top: 10px; }
.folha__capa .capa { border-radius: 24px; box-shadow: 0 24px 60px -20px color-mix(in oklab, var(--cor) 60%, transparent); }
.folha__titulo {
margin-top: 10px;
font-family: var(--display);
font-size: clamp(24px, 6vw, 32px);
font-weight: 700;
letter-spacing: -.035em;
text-align: center;
text-wrap: balance;
}
.folha__artista { font-size: 16px; color: var(--tinta-2); }
.folha__origem { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.folha__tempo {
width: 100%;
max-width: 460px;
margin-top: 8px;
}
.folha__acoes { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.player__play--grande { width: 66px; height: 66px; }
.player__play--grande .ic { width: 30px; height: 30px; }
.folha__seguir {
width: 100%;
max-width: 460px;
padding: 12px 14px;
border-radius: var(--r-m);
border: 1px solid var(--borda);
background: rgba(245, 241, 234, .03);
}
.folha__seguir-rotulo {
font-size: 10px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--tinta-3);
}
.folha__seguir-faixa { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.folha__seguir-capa { flex: none; display: block; width: 44px; }
.folha__seguir-texto { display: block; min-width: 0; }
.folha__seguir-texto strong {
display: block;
font-size: 14.5px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.folha__seguir-texto span {
display: block;
font-size: 12.5px;
color: var(--tinta-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.folha__canais {
display: grid;
gap: 8px;
width: 100%;
max-width: 460px;
margin-top: 10px;
}
.folha__chip {
display: flex;
align-items: baseline;
gap: 12px;
padding: 12px 16px;
border-radius: var(--r-m);
border: 1px solid color-mix(in oklab, var(--c) 30%, var(--borda));
background: color-mix(in oklab, var(--c) 8%, transparent);
}
.folha__chip strong {
font-family: var(--display);
font-size: 17px;
font-weight: 800;
letter-spacing: -.03em;
color: var(--c);
}
.folha__chip span { font-size: 12.5px; color: var(--tinta-3); }
.folha__aviso { font-size: 11.5px; color: var(--tinta-3); text-align: center; max-width: 42ch; }
/* ---------------------------------------------------------------
FOLHA EM DUAS COLUNAS (tela larga)
A folha empilhava tudo numa coluna estreita e centralizada: num
monitor grande sobrava vazio dos dois lados e "A seguir" e o
trocador de canais caíam abaixo da dobra. Agora capa de um lado,
o que se lê do outro — e cabe álbum, curiosidade e próxima faixa
sem rolagem. No celular volta a ser uma coluna só, centralizada.
--------------------------------------------------------------- */
.folha__topo { max-width: 1060px; gap: 14px; }
.folha__ouvintes {
margin-left: auto;
margin-right: 12px;
font-size: 12px;
color: var(--tinta-3);
font-variant-numeric: tabular-nums;
}
.folha__palco {
width: 100%;
max-width: 1060px;
display: grid;
grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
gap: clamp(26px, 4vw, 52px);
align-items: start;
margin-top: 4px;
}
.folha__palco .folha__capa { width: 100%; margin-top: 0; }
.folha__info {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
text-align: left;
}
.folha__info .folha__titulo {
margin-top: 6px;
text-align: left;
font-size: clamp(26px, 3.2vw, 40px);
}
.folha__info .folha__tempo { max-width: none; }
.folha__album { margin-top: 4px; font-size: 13px; color: var(--tinta-3); }
.folha__sobre {
width: 100%;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--borda);
}
.folha__sobre-texto {
margin-top: 8px;
max-width: 62ch;
font-size: 14px;
line-height: 1.6;
color: var(--tinta-2);
text-wrap: pretty;
}
.folha__info .folha__seguir { width: 100%; }
/* UM play só na tela: com a folha aberta a barra de baixo sai de cena.
Ela é a versão RECOLHIDA do player — as duas juntas mostravam capa, título,
progresso, votos e play duplicados. */
body.corpo[data-folha='1'] .player__barra { display: none; }
/* o volume mora nos dois; só aparece o do lugar que está visível */
.folha__som {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
}
.folha__som .player__volume { width: 160px; }
/* ---- histórico das últimas 72 h ---- */
.folha__historico {
width: 100%;
max-width: 1280px;
display: grid;
grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
column-gap: clamp(26px, 4vw, 64px);
align-items: start;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--borda);
}
.folha__historico > .folha__seguir-rotulo { padding-top: 4px; }
.folha__hist-janela {
margin-left: 8px;
font-weight: 400;
letter-spacing: .04em;
text-transform: none;
color: var(--tinta-3);
}
/* UMA coluna, de propósito. Em duas o grid preenche linha a linha, então a
leitura de cima para baixo pulava um item sim, um não (09:29 → 09:24 → 09:18
na esquerda, e 09:26 → 09:21 na direita). Numa lista de HORÁRIOS isso destrói
a cronologia, que é justamente o que a lista existe para mostrar. */
.hist {
list-style: none;
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
max-width: none;
gap: 4px;
}
.hist__dia {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: color-mix(in oklab, var(--cor) 70%, var(--tinta));
}
.hist__dia::after { content: ''; height: 1px; flex: 1; background: var(--borda); }
.hist__item {
display: grid;
grid-template-columns: 52px 40px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 8px 14px;
border: 1px solid transparent;
border-radius: 12px;
background: linear-gradient(90deg, color-mix(in oklab, var(--tinta) 2.5%, transparent), transparent 72%);
transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.hist__item:hover {
background: color-mix(in oklab, var(--tinta) 7%, transparent);
border-color: var(--borda);
transform: translateX(3px);
}
.hist__hora {
font-family: var(--marca);
font-size: 13px;
font-weight: 650;
letter-spacing: -.02em;
color: var(--tinta-2);
font-variant-numeric: tabular-nums;
text-align: right;
}
.hist__capa {
position: relative;
width: 40px; height: 40px;
border-radius: 8px;
overflow: hidden;
background: color-mix(in oklab, var(--cor) 22%, var(--preto));
display: grid;
place-items: center;
}
.hist__capa .capa__img { width: 100%; height: 100%; object-fit: cover; }
.hist__sigla {
font-family: var(--display);
font-size: 11px;
font-weight: 800;
color: color-mix(in oklab, var(--cor) 80%, #fff);
}
.hist__txt { display: grid; min-width: 0; }
.hist__txt strong {
font-size: 14.5px;
font-weight: 650;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist__txt span {
margin-top: 1px;
font-size: 12.5px;
color: var(--tinta-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hist__fim, .hist__vazio {
grid-column: 2;
margin-top: 14px;
font-size: 12.5px;
color: var(--tinta-3);
}
.hist__mais {
grid-column: 2;
justify-self: start;
margin-top: 14px;
padding: 9px 14px;
border: 1px solid var(--borda-forte);
border-radius: 999px;
background: transparent;
color: var(--tinta-2);
font-size: 12.5px;
font-weight: 650;
cursor: pointer;
transition: color var(--transicao), background var(--transicao), border-color var(--transicao);
}
.hist__mais:hover, .hist__mais:focus-visible { color: var(--tinta); border-color: var(--cor); background: color-mix(in oklab, var(--cor) 12%, transparent); }
/* alvo do IntersectionObserver: precisa de altura para ser observável */
.hist__sentinela { height: 1px; }
@media (max-width: 860px) {
.folha__historico { max-width: 460px; display: block; text-align: left; }
.folha__historico > .folha__seguir-rotulo { display: block; margin-bottom: 12px; }
.hist { grid-template-columns: 1fr; }
.hist__item { grid-template-columns: 46px 38px minmax(0, 1fr) auto; padding: 8px 10px; }
.hist__capa { width: 38px; height: 38px; }
.hist__mais { margin-left: 0; }
.folha__som { justify-content: center; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.hist__item:hover { transform: none; }
}
/* 20 canais numa coluna só esticavam a folha e obrigavam a rolar até o fim
para trocar de canal. Em grade eles cabem junto do resto. */
.folha__canais {
max-width: 1060px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 8px;
margin-top: 18px;
}
.folha__chip {
align-items: center;
gap: 8px;
padding: 10px 14px;
min-width: 0;
}
.folha__chip strong { font-size: 15px; flex: none; }
/* a tagline não pode quebrar o cartão em duas linhas dentro da grade */
.folha__chip span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
@media (max-width: 860px) {
.folha__canais { max-width: 460px; grid-template-columns: 1fr; }
.folha__chip span { white-space: normal; }
}
@media (max-width: 860px) {
.folha__topo { max-width: 460px; }
.folha__palco {
grid-template-columns: 1fr;
justify-items: center;
gap: 14px;
}
.folha__palco .folha__capa { width: min(74vw, 320px); }
.folha__info { align-items: center; text-align: center; }
.folha__info .folha__titulo { text-align: center; }
.folha__sobre { text-align: center; }
.folha__sobre-texto { margin-left: auto; margin-right: auto; }
}
.recado {
position: fixed;
left: 50%;
bottom: calc(var(--h-player) + 18px);
transform: translate(-50%, 16px);
z-index: 70;
max-width: min(92vw, 420px);
padding: 12px 18px;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--cor) 40%, transparent);
background: color-mix(in oklab, var(--preto) 92%, transparent);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
font-size: 13.5px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity var(--transicao), transform var(--transicao);
}
.recado[data-visivel='1'] { opacity: 1; transform: translate(-50%, 0); }
.recado[data-tom='erro'] { border-color: var(--negativo); }
/* Troca de faixa: capa e texto entram juntos, num movimento só. O gatilho é o
data-trocando que o player.js põe por meio segundo quando a música vira. */
@keyframes trocaFaixa {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
[data-trocando='1'] .agora__capa,
[data-trocando='1'] .agora__titulo,
[data-trocando='1'] .agora__artista,
[data-trocando='1'] .painel__faixa,
[data-trocando='1'] .player__capa,
[data-trocando='1'] .player__texto,
[data-trocando='1'] .folha__capa,
[data-trocando='1'] .folha__titulo,
[data-trocando='1'] .folha__artista {
animation: trocaFaixa 460ms cubic-bezier(.22, .61, .36, 1);
}
.chip--espera {
border-style: dashed;
color: var(--tinta-3);
}
.chip--espera:hover { color: var(--tinta); }
.espera {
margin: clamp(40px, 6vw, 72px) 0 0;
padding-top: clamp(28px, 4vw, 44px);
border-top: 1px solid var(--borda);
}
.espera__cabeca { max-width: 620px; }
.espera__titulo {
font-family: var(--display);
font-size: clamp(24px, 3.4vw, 34px);
font-weight: 700;
letter-spacing: -.035em;
}
.espera__linha-fina { margin-top: 8px; font-size: 14.5px; color: var(--tinta-2); }
.espera__familia { margin-top: 28px; }
.espera__familia-nome {
font-size: 10.5px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--tinta-3);
}
.espera__lista {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
gap: 10px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.espera__card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 12px;
padding: 14px 16px;
border-radius: var(--r-m);
border: 1px dashed color-mix(in oklab, var(--c) 34%, var(--borda));
background: linear-gradient(140deg, color-mix(in oklab, var(--c) 9%, var(--f)), transparent);
}
.espera__curto {
font-family: var(--display);
font-size: 19px;
font-weight: 800;
letter-spacing: -.035em;
color: var(--c);
}
.espera__tag {
grid-column: 1;
display: block;
font-size: 12px;
color: var(--tinta-3);
}
.espera__selo {
grid-column: 2;
grid-row: 1 / -1;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tinta-3);
}
.botao--espera {
grid-column: 2;
grid-row: 1 / -1;
padding: 8px 13px;
font-size: 12.5px;
}
.botao--espera[data-feito='1'] { border-color: var(--c); color: var(--c); opacity: .8; }
.espera__conta {
padding-left: 7px;
margin-left: 7px;
border-left: 1px solid var(--borda-forte);
font-variant-numeric: tabular-nums;
}
@media (max-width: 1240px) {
.player__seguir { display: none; }
}
@media (max-width: 1080px) {
.palco { grid-template-columns: 1fr; }
.palco__brilho { width: 100%; right: 0; }
.colunas { grid-template-columns: 1fr; }
.player__barra { grid-template-columns: auto minmax(0, 1fr) minmax(110px, 200px) auto auto auto; }
.player__som { display: none; }
}
@media (max-width: 900px) {
.manifesto { grid-template-columns: 1fr; gap: 26px; }
.rodape__linha { grid-template-columns: 1fr; }
.topo { grid-template-columns: auto auto; row-gap: 10px; }
.canais-nav { grid-column: 1 / -1; order: 3; justify-content: flex-start; }
.topo__extra { justify-content: flex-end; }
}
@media (max-width: 640px) {
:root { --h-player: 64px; }
.palco__agora { grid-template-columns: 1fr; }
.agora__capa { max-width: 220px; }
.capa--palco { max-width: 220px; }
.agora__capa::after { display: none; }
.vinil-slot { display: none; }
.cedula__item { grid-template-columns: 20px 40px minmax(0, 1fr) auto; row-gap: 8px; }
.cedula__votos { grid-column: 3 / -1; justify-content: flex-end; }
.cedula__saldo { grid-column: 4; }
.player__barra { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; }
.player__votos, .player__tempo { display: none; }
.espera__lista { grid-template-columns: 1fr; }
.player__abrir-tela { display: grid; }
.top5__cabeca { flex-direction: column-reverse; align-items: stretch; }
.topo { grid-template-columns: 1fr; gap: 8px; padding-block: 10px; }
.topo__extra { justify-content: flex-start; overflow-x: auto; gap: 16px; margin-inline: -2px; padding: 2px; scrollbar-width: none; }
.topo__extra::-webkit-scrollbar { display: none; }
.topo__link { white-space: nowrap; font-size: 12px; }
.cronometro { text-align: left; }
.busca { flex-direction: column; }
.busca .botao { justify-content: center; }
}
@media (min-width: 641px) {
.player__abrir-tela { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.marca__ondas i { transform: none; }
}
/* Texto da proposta, agora abaixo da grade: quem chega vê os canais primeiro,
a explicação vem para quem rolou e quis entender o que está vendo. */
.proposta {
max-width: 68ch;
margin: 46px auto 0;
padding: 0 4px;
}
.proposta__texto {
font-size: 1.02rem;
line-height: 1.62;
color: var(--tinta-2);
}
.proposta__honestidade {
margin-top: 14px;
padding-left: 14px;
border-left: 2px solid var(--borda);
font-size: .88rem;
line-height: 1.5;
color: var(--tinta-3);
}
/* ====================================================================
VITRINE DA HOME — anatomia hunter.fm
====================================================================
Medido no CSS de produção da hunter.fm e do brasilhits, e conferido
contra outras 10 rádios e 4 serviços de streaming. Três regras que
saíram unânimes da apuração e que este bloco respeita:
1. A ARTE MANDA. 11 de 12 referências têm arte quadrada ocupando
50-80% da altura do card. É ela que dá diversidade visual
imediata e identificação de longe.
2. NO MÁXIMO 3 CAMPOS, TODOS COM ALTURA TRAVADA. O 181.fm não
clampa a descrição e produz cards de 326/342/358px na mesma
fileira — a grade fica serrilhada e o olho não varre. Todo
texto aqui tem line-clamp E min-height.
3. O HOVER É OPACIDADE, NUNCA MOVIMENTO. Nenhuma das 16
referências eleva ou escala o card. A hunter.fm resolve
trocando a FACE inteira: duas camadas irmãs no mesmo espaço,
uma some enquanto a outra aparece. O retângulo é idêntico
antes e depois, então a grade não se mexe.
O que continua fora, e o mercado concorda: barra de progresso
(0 de 12), tempo restante (0 de 12) e "a seguir" (0 de 12).
==================================================================== */
/* ---- abertura ------------------------------------------------------ */
.abertura--enxuta { margin-bottom: 16px; }
.abertura__titulo--linha {
margin: 0;
font-size: clamp(1.35rem, 2.4vw, 2.05rem);
line-height: 1.06;
text-wrap: balance;
}
.abertura__titulo--linha em { display: inline; }
.abertura__linha {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 20px;
margin-top: 10px;
font-size: .82rem;
/* --tinta-3 (40%) dá 3,47:1 sobre o fundo da home — reprova o AA de texto
normal, e esta é a única linha de contexto da página. --tinta-2 sobe
para 7,8:1 sem mudar a leitura de "texto secundário". */
color: var(--tinta-2);
}
/* O cronômetro morava nos 19 cards mostrando o MESMO valor — campo de
valor repetido carrega zero informação. Uma vez só, aqui, vira chamada. */
.abertura__crono strong {
color: var(--tinta);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
/* ---- DESTAQUE AO VIVO (HITS) --------------------------------------- */
/* HITS é a rádio no ar de verdade (sinal ao vivo do Omnia), então ganha um
banner largo no topo — categoricamente diferente dos estilos curados
abaixo. Banner e não card: a leitura é "aqui é a rádio", não "mais um
gênero". */
/* ── DESTAQUE AO VIVO — a rádio HITS no ar ─────────────────── */
.aovivo {
position: relative;
min-height: 196px;
margin-bottom: 34px;
padding: 26px 32px;
border-radius: var(--r-g);
overflow: hidden;
isolation: isolate;
border: 1px solid color-mix(in oklab, var(--c) 40%, var(--borda));
background: var(--f);
}
.aovivo__link { color: var(--tinta); text-decoration: none; }
.aovivo__link::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
/* fundo full-bleed: capa da faixa desfocada, ou campo de cor do canal */
.aovivo__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
background:
radial-gradient(90% 150% at 6% 10%, color-mix(in oklab, var(--c) 40%, transparent), transparent 60%),
linear-gradient(115deg, color-mix(in oklab, var(--c) 20%, var(--f)) 0%, var(--f) 76%);
}
.aovivo__fundo::before {
content: ''; position: absolute; inset: -14%; z-index: 1;
background-image: var(--capa, none); background-size: cover; background-position: 50% 42%;
filter: blur(46px) saturate(1.25) brightness(.8); transform: scale(1.1);
opacity: 0; transition: opacity .6s ease;
}
.aovivo__fundo[data-com-img]::before { opacity: .85; }
.aovivo__fundo::after {
content: ''; position: absolute; inset: 0; z-index: 2;
background:
linear-gradient(90deg, color-mix(in oklab, var(--f) 88%, transparent) 0%,
color-mix(in oklab, var(--f) 62%, transparent) 40%,
color-mix(in oklab, var(--f) 30%, transparent) 100%),
linear-gradient(0deg, color-mix(in oklab, #000 30%, transparent), transparent 55%);
}
/* poster: capa GRANDE da faixa (ou a arte do canal), sangrando a direita */
.aovivo__poster {
position: absolute; inset: 0; z-index: 0; overflow: hidden;
background:
radial-gradient(90% 130% at 82% 30%, color-mix(in oklab, var(--c) 24%, var(--f)), transparent 74%),
linear-gradient(120deg, color-mix(in oklab, var(--c) 15%, var(--f)) 0%, var(--f) 94%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 26%, #000 54%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 26%, #000 54%);
}
.aovivo__poster-capa { position: absolute; inset: 0; z-index: 1; }
.aovivo__poster-capa .capa { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; background: transparent; }
.aovivo__poster-capa .capa__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform-origin: 68% 46%; }
.aovivo__poster-capa .capa__sigla { display: none; }
.aovivo__poster-capa:not(:has(.capa__img)) { opacity: 0; } /* sem capa real: fica o painel de cor do poster */
/* imagem em P&B por padrao; no hover ganha cor e um zoom beeem lento (Ken Burns) */
@media (hover: hover) {
.aovivo__poster-capa .capa__img {
filter: grayscale(1) contrast(1.03);
transform: scale(1);
transition: filter .7s ease, transform 8s cubic-bezier(.2,.6,.35,1);
}
.aovivo:hover .aovivo__poster-capa .capa__img {
filter: grayscale(0) contrast(1);
transform: scale(1.14);
}
.aovivo__fundo::before {
filter: blur(46px) saturate(1.2) brightness(.78) grayscale(1);
transition: opacity .6s ease, filter .8s ease;
}
.aovivo:hover .aovivo__fundo::before {
filter: blur(46px) saturate(1.4) brightness(.86) grayscale(0);
}
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
.aovivo__poster-capa .capa__img { transition: filter .7s ease; }
.aovivo:hover .aovivo__poster-capa .capa__img { transform: none; }
}
/* corpo: texto, a esquerda, sobre o fundo */
.aovivo__corpo { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; max-width: 50%; min-height: 144px; }
.aovivo__topo { display: flex; align-items: center; gap: 16px; }
.aovivo__selo {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700; letter-spacing: .18em;
color: color-mix(in oklab, var(--c) 72%, var(--tinta));
}
.aovivo__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--c); animation: batida 1.6s ease-out infinite; }
.aovivo__eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 13px; margin-left: 4px; }
.aovivo__eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--c); transform-origin: bottom; animation: aoVivoEq 900ms ease-in-out infinite; }
.aovivo__eq i:nth-child(2) { animation-delay: -600ms; }
.aovivo__eq i:nth-child(3) { animation-delay: -300ms; }
.aovivo__eq i:nth-child(4) { animation-delay: -750ms; }
.aovivo__ouvintes { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--tinta-2); white-space: nowrap; }
.aovivo__ouvintes svg { width: 14px; height: 14px; fill: color-mix(in oklab, var(--c) 55%, var(--tinta-2)); }
.aovivo__nome { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; margin: 0; }
.aovivo__agora { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.aovivo__agora strong { font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 700; color: var(--tinta); line-height: 1.14; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 1px 8px color-mix(in oklab, var(--f) 55%, #000); }
.aovivo__agora span { font-size: .95rem; font-weight: 400; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.aovivo__acao { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.aovivo__play { position: relative; z-index: 5; display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer; background: var(--c); color: #08070C; font-weight: 700; font-size: .95rem; white-space: nowrap; box-shadow: 0 12px 28px -12px var(--c); transition: transform var(--transicao), filter var(--transicao); }
.aovivo__play .ic { width: 18px; height: 18px; fill: currentColor; }
.aovivo__play:hover { filter: brightness(1.08); transform: translateY(-1px); }
.aovivo__nota { font-size: .82rem; color: var(--tinta-2); text-shadow: 0 1px 3px color-mix(in oklab, var(--f) 60%, #000); }
@keyframes aoVivoEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
.aovivo__eq i { animation: none; transform: scaleY(.6); }
.aovivo__fundo::before { transition: none; }
}
@media (max-width: 760px) {
.aovivo { min-height: 150px; padding: 18px 20px; }
.aovivo__corpo { max-width: 62%; min-height: 120px; }
.aovivo__poster { width: 42%; }
.aovivo__nome { font-size: 1.5rem; }
.aovivo__acao { flex-wrap: wrap; gap: 10px; }
.aovivo__nota { display: none; }
}
/* ---- estilos (os 19 canais segmentados) --------------------------- */
.sintonia {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
align-items: end;
gap: 24px;
margin: 0 0 28px;
padding: 22px 24px 20px;
border: 1px solid var(--borda);
border-radius: var(--r-g);
background:
linear-gradient(120deg, rgba(255,255,255,.055), transparent 42%),
repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.035) 22px 23px),
color-mix(in oklab, var(--tinta) 3%, transparent);
}
.sintonia__selo {
margin-bottom: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--tinta-3);
}
.sintonia__texto h2 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.sintonia__opcoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.sintonia__opcao {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 40px;
padding: 8px 9px;
border: 1px solid var(--borda);
border-radius: 999px;
background: rgba(0,0,0,.18);
color: var(--tinta-2);
font-size: 12px;
font-weight: 650;
cursor: pointer;
transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.sintonia__opcao i { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); transition: background var(--transicao), box-shadow var(--transicao); }
.sintonia__opcao:nth-child(1) i { background: #ff5a78; }
.sintonia__opcao:nth-child(2) i { background: #f0aa30; }
.sintonia__opcao:nth-child(3) i { background: #38c6a8; }
.sintonia__opcao:nth-child(4) i { background: #9476ff; }
.sintonia__opcao:hover, .sintonia__opcao--ativa { color: var(--tinta); border-color: var(--tinta-2); background: rgba(255,255,255,.09); }
.sintonia__opcao--ativa i { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent); }
.sintonia__opcao:active { transform: scale(.97); }
.estilos__cabeca { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.estilos__titulo {
margin: 0;
font-family: var(--texto);
font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--tinta-3);
}
.filtro {
display: flex;
align-items: center;
width: min(100%, 278px);
gap: 8px;
padding: 0 11px;
border: 1px solid var(--borda);
border-radius: 999px;
background: rgba(0,0,0,.18);
transition: border-color var(--transicao), background var(--transicao);
}
.filtro:focus-within { border-color: var(--tinta-2); background: rgba(255,255,255,.05); }
.filtro .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; color: var(--tinta-3); }
.filtro input { width: 100%; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--tinta); }
.filtro input::placeholder { color: var(--tinta-3); }
.filtro button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--tinta-4); color: var(--tinta); cursor: pointer; line-height: 1; }
.filtro__resultado { margin: -4px 0 13px; font-size: 12.5px; color: var(--tinta-2); }
/* ---- a grade ------------------------------------------------------- */
/* Um quadro só, sem cabeçalhos de seção. Com a arte de canal carregando a
identificação, a diversidade já vem das capas — os títulos de prateleira
viraram corte no meio da grade em vez de ajuda. Mesma decisão da
hunter.fm, que põe os 15 canais numa grade única. */
.vitrine {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
gap: 16px 14px;
align-items: start;
}
/* ---- o card -------------------------------------------------------- */
.painel {
position: relative;
min-width: 0;
display: flex;
flex-direction: column;
padding: 10px;
border-radius: 12px;
background: transparent;
transition: background var(--transicao);
}
/* fundo neutro no hover, como hunter.fm (#181818 -> #242424): a cor do
canal já está na arte, e tingir o card também competiria com ela */
.painel:hover, .painel:focus-within { background: rgba(255, 255, 255, .055); }
/* ---- a arte do canal ----------------------------------------------- */
.painel__arte {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
isolation: isolate;
}
.arte { position: absolute; inset: 0; display: block; }
.arte__svg { width: 100%; height: 100%; display: block; }
.arte__texto {
font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-weight: 800;
}
.arte__marca {
font-family: 'Instrument Sans', system-ui, sans-serif;
font-size: 5px;
font-weight: 700;
letter-spacing: 1.4px;
}
/* nome do canal como rotulo HTML: fonte display, natural, ancorado embaixo */
.painel__nome {
position: absolute; z-index: 1; left: 13px; right: 13px; bottom: 11px; margin: 0;
font-family: var(--display); font-weight: 800; text-transform: uppercase;
font-size: clamp(20px, 2.4vw, 31px); line-height: .92; letter-spacing: -.035em;
color: #fff; text-wrap: balance; text-shadow: 0 2px 16px rgba(0,0,0,.28);
transition: opacity 180ms ease;
}
.painel:hover .painel__nome,
.painel:focus-within .painel__nome { opacity: 0; }
/* arte cadastrada cobre o pôster gerado; se a imagem falhar, o pôster
continua atrás — nunca sobra retângulo cinza */
.arte__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Véu que escurece a arte do canal no hover: é ele que faz o play saltar e
que prepara o fundo para a capa da faixa. Aparece SEMPRE, com ou sem capa
real — assim o hover tem o mesmo peso visual nos 19 cards. */
.painel__arte::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: #05040A;
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.painel:hover .painel__arte::after,
.painel:focus-within .painel__arte::after { opacity: .55; }
/* A CAPA DA FAIXA só entra quando é capa DE VERDADE.
`beats_capa()` só emite ![]()
quando existe URL; sem ela
sobra a arte gerada por hash de artista|título, com as iniciais do artista.
Sobrepor ESSA à arte do canal empilha duas tipografias diferentes e vira
borrão — e hoje 95,6% das faixas que tocam caem nesse caso.
O :has() reavalia sozinho quando o player.js troca a faixa, então o dia em
que o enriquecimento cobrir o acervo, a capa aparece sem mexer no código. */
.painel__capa {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.painel__capa .capa { width: 100%; height: 100%; border-radius: 0; }
.painel__capa .capa img,
.painel__capa .capa svg { width: 100%; height: 100%; object-fit: cover; }
.painel:hover .painel__capa:has(.capa__img),
.painel:focus-within .painel__capa:has(.capa__img) { opacity: .92; }
/* o play sobe de baixo da borda, como na referência */
.painel__play {
position: absolute;
left: 50%;
bottom: -22px;
translate: -50% 0;
z-index: 3;
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--c);
color: #08070C;
cursor: pointer;
opacity: 0;
box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .7);
transition: opacity 200ms ease, bottom 200ms ease;
}
.painel__play .ic { width: 21px; height: 21px; }
.painel:hover .painel__play,
.painel:focus-within .painel__play,
.painel__play:focus-visible { opacity: 1; bottom: 10px; }
/* Em toque não existe hover: o play fica SEMPRE visível — e por isso não pode
ficar no centro. Centralizado, ele se planta exatamente sobre a segunda
linha do wordmark ("NEJO", "2000", "90") e come a letra que identifica o
canal, justamente na tela onde o card é menor. O nome da arte é ancorado
embaixo à ESQUERDA, então o canto de baixo à direita é a única área de
gradiente vazio garantida para qualquer rótulo, agora ou no futuro. */
@media (hover: none) {
.painel__play {
left: auto;
right: 9px;
bottom: 9px;
translate: none;
width: 36px;
height: 36px;
opacity: .92;
}
.painel__play .ic { width: 16px; height: 16px; }
}
/* ouvintes como badge sobre a arte — nunca como linha de texto */
.painel__ouv {
position: absolute;
top: 6px;
right: 6px;
z-index: 2;
padding: 0 7px;
height: 20px;
display: inline-flex;
align-items: center;
border-radius: 4px;
background: rgba(20, 20, 20, .62);
backdrop-filter: blur(4px);
font-size: 10px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: #fff;
}
/* ---- as duas faces -------------------------------------------------- */
/* Altura fixa e conteúdo empilhado: é o que garante que a troca no hover
não mexa em um pixel do layout. */
.painel__faces {
position: relative;
margin-top: 10px;
height: 52px;
}
.painel__face {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 2px;
text-align: center;
transition: opacity 180ms ease;
}
.painel__face--canal { opacity: 1; }
/* a face fica com overflow visível para a âncora poder cobrir o card inteiro */
.painel__face--canal { overflow: visible; }
.painel__face--musica { opacity: 0; pointer-events: none; }
.painel:hover .painel__face--canal,
.painel:focus-within .painel__face--canal { opacity: 0; }
.painel:hover .painel__face--musica,
.painel:focus-within .painel__face--musica { opacity: 1; }
.painel__face--musica[hidden] { display: none; }
/* O NOME DO CANAL sai da TELA, não do DOCUMENTO.
Ele já é a arte do card, em corpo grande. Repetido embaixo seria a mesma
palavra duas vezes em cada um dos 19 cards — na hunter.fm os dois textos
convivem porque são DIFERENTES (logotipo desenhado em cima, "O Canal
Sertanejo" embaixo); aqui seriam idênticos.
Mas o continua no documento: é o cabeçalho que o leitor de tela
anuncia e o texto que dá sentido ao link.
A ÂNCORA É a camada de clique: inset:0 cobre o card inteiro, e é o que faz
qualquer ponto abrir o canal. O texto sai por text-indent, que empurra o
glifo para fora sem recortar a caixa.
clip-path NÃO serve aqui — recortaria junto a área clicável, e o card
deixaria de abrir. */
.painel__curto { margin: 0; }
.painel__link {
position: absolute;
inset: 0;
z-index: 2;
display: block;
border-radius: 12px;
text-indent: -9999px;
white-space: nowrap;
overflow: hidden;
color: transparent;
}
.painel__link:focus-visible { outline: none; }
/* Anel de foco só para TECLADO.
Com `:focus-within` o anel acendia em clique de mouse — clicar no card dá
foco ao link, e o card ficava contornado depois de qualquer clique. E quando
o play era focado, o anel do card somava com o anel próprio do botão, dando
contorno duplo. `:has(:focus-visible)` pinta só quando o navegador decide
que o foco veio do teclado.
O scroll-margin existe porque o player é fixo no rodapé: sem ele, tabular
até os últimos cards leva o foco para trás da barra do player. */
.painel:has(:focus-visible) {
outline: 2px solid var(--c);
outline-offset: 3px;
border-radius: 12px;
scroll-margin-bottom: calc(var(--h-player) + 24px);
}
/* o botão já ganha o anel do card; um segundo anel nele seria contorno duplo */
.painel__play:focus-visible { outline: none; }
/* legenda de gênero: 2 linhas com clamp E min-height. O min-height é o
detalhe que quase todo mundo esquece — o clamp impede crescer, mas não
impede encolher, e um card de 1 linha desalinharia os vizinhos. */
.painel__legenda {
margin: 0;
font-size: 12.5px;
font-weight: 600;
line-height: 17px;
min-height: 34px;
color: var(--tinta-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* face da música: mesma métrica da face do canal, para a troca ser limpa */
.painel__musica {
font-size: 13.5px;
font-weight: 700;
line-height: 19px;
color: var(--tinta);
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.painel__artista {
font-size: 12px;
font-weight: 500;
line-height: 16px;
color: var(--tinta-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---- canal que ainda vai abrir ------------------------------------- */
.painel--espera .painel__arte { opacity: .42; }
.painel--espera .painel__curto { color: var(--tinta-2); }
.painel__quero {
position: relative;
z-index: 3;
align-self: center;
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: 1px solid var(--borda-forte);
border-radius: 999px;
background: transparent;
color: var(--tinta-2);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: border-color var(--transicao), color var(--transicao);
}
.painel__quero:hover { border-color: var(--c); color: var(--tinta); }
/* ---- telas menores -------------------------------------------------- */
@media (max-width: 900px) {
.sintonia { grid-template-columns: 1fr; gap: 16px; }
.vitrine { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
}
@media (max-width: 560px) {
.sintonia { margin-bottom: 22px; padding: 18px 16px; border-radius: var(--r-m); }
.sintonia__opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.estilos__cabeca { align-items: stretch; flex-direction: column; }
.filtro { width: 100%; }
.vitrine { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
.painel { padding: 8px; }
.painel__faces { height: 50px; margin-top: 8px; }
.painel__curto { font-size: 13px; }
.painel__legenda { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
.painel__play { transition: opacity 120ms ease; bottom: 10px; }
.painel__face, .painel__capa { transition: opacity 120ms ease; }
}
/* ==================================================================
URLs DOS CANAIS (streams.php)
================================================================== */
.cabeca-pagina { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 36px); }
.cabeca-pagina__titulo {
font-family: var(--display);
font-size: clamp(30px, 4.6vw, 46px);
font-weight: 800;
letter-spacing: -.04em;
text-wrap: balance;
}
.cabeca-pagina__texto { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--tinta-2); }
.cabeca-pagina__nota { margin-top: 10px; font-size: 13px; color: var(--tinta-3); }
.streams {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
gap: 14px;
list-style: none;
}
.stream {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 16px;
align-items: center;
padding: 14px;
border: 1px solid var(--borda);
border-radius: var(--r-m);
background: color-mix(in oklab, var(--c) 6%, transparent);
}
.stream__arte { display: block; border-radius: 10px; overflow: hidden; }
.stream__corpo { min-width: 0; }
.stream__nome { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.stream__nome a { color: var(--c); text-decoration: none; }
.stream__nome a:hover { text-decoration: underline; }
.stream__tag { margin-top: 2px; font-size: 12.5px; color: var(--tinta-3); }
.stream__rot {
display: block; margin-top: 10px;
font-size: 10px; font-weight: 700; letter-spacing: .16em;
text-transform: uppercase; color: var(--tinta-3);
}
.stream__linha { display: flex; gap: 8px; margin-top: 6px; }
.stream__campo {
flex: 1 1 auto; min-width: 0;
padding: 8px 10px;
border: 1px solid var(--borda);
border-radius: 8px;
background: color-mix(in oklab, var(--preto) 60%, transparent);
color: var(--tinta-2);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
}
.stream__copiar { flex: none; }
.stream__copiar[data-copiado='1'] {
border-color: color-mix(in oklab, var(--c) 60%, transparent);
color: var(--c);
}
.streams__rodape { margin-top: 22px; font-size: 12.5px; color: var(--tinta-3); }
@media (max-width: 520px) {
.stream { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
.stream__linha { flex-direction: column; }
.stream__copiar { width: 100%; }
}