/* ========================================================= VÓRTICE WEEKEND — 28.11.2026 Tokens amostrados do manual da marca (petrol) e do cartaz oficial do evento (entardecer em Búzios). ========================================================= */ :root{ /* escuros */ --tinta: #00121A; --tinta-2: #00212B; --petrol-esc: #00323F; --petrol-med: #005A6E; /* marca */ --petrol: #007289; /* cor exata do vetor da marca */ --petrol-cl: #0090A4; --aqua: #5CBFCF; /* acento: só sobre --petrol-med ou mais escuro */ /* entardecer no Tawa (amostrado do cartaz) */ --areia: #F4D7AE; --terracota: #D1976C; --papel: #EAF3F5; --papel-mid: rgba(234,243,245,.62); --papel-fraco:rgba(234,243,245,.50); /* 4,82:1 sobre --tinta; em .38 dava 3,32:1 e reprovava */ --fio: rgba(92,191,207,.20); --serif: "Bodoni Moda", "Didot", "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ritmo-1: .5rem; --ritmo-2: 1rem; --ritmo-3: 2rem; --ritmo-4: 4rem; --ritmo-5: 7rem; --margem: clamp(1.25rem, 5vw, 5.5rem); --largura: 1320px; /* caixa do cartaz: marca, tarja de pé e painel de vídeo têm que obedecer À MESMA largura, senão em tela larga o vídeo fica na borda da janela e o texto num box de 1320 centralizado, e a composição se desmonta */ --palco: min(100vw, 1600px); --vao-lateral: max(0px, calc((100vw - 1600px) / 2)); --curva: cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{ box-sizing:border-box } html{ background:var(--tinta); scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--sans); font-size:clamp(1rem, .95rem + .25vw, 1.0625rem); line-height:1.65; color:var(--papel); background:var(--tinta); /* a marca da capa sangra para fora da viewport e precisa ser cortada. Mas overflow-x:hidden força overflow-y:auto, o body vira contêiner de rolagem e position:sticky para de grudar (o cardápio quebra inteiro). overflow-x:clip corta sem criar contêiner. */ overflow-x:hidden; } @supports (overflow-x: clip){ /* nos dois: o clip do body corta o desenho, mas o html continuava rolando 33px na horizontal por causa da sangria da marca */ html, body{ overflow-x:clip; overflow-y:visible } } img{ max-width:100%; height:auto; display:block } ::selection{ background:var(--petrol); color:#fff } :where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--aqua); outline-offset:3px; border-radius:2px; } .pular{ position:fixed; top:0; left:0; z-index:200; transform:translateY(-120%); background:var(--aqua); color:#00212B; padding:.7rem 1.1rem; font-weight:600; text-decoration:none; } .pular:focus{ transform:translateY(0) } /* ---------- o aftermovie, painel vertical à direita ---------- */ /* O material é 9:16. Em coluna ele fica no enquadramento nativo e a marca cruza por cima. Só aparece quando o vídeo realmente toca: o JS marca . */ .cena{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity 1.4s var(--curva); } .com-cena .cena{ opacity:var(--forca-cena, 1) } .cena__video{ position:absolute; /* LENTE, não painel: elipse com a borda dissolvida em todos os lados. Retângulo com aresta dura entrega "vídeo colado"; a lente entrega "o que se vê dentro do vórtice". Ancorada ao palco, não à janela, para não fugir da composição em tela larga. */ /* a lente sobe: com ela centrada, a palavra passava por cima do rosto e matava justamente o que se queria mostrar */ /* coluna da direita: a palavra fica ao lado, nunca por cima */ top:46%; left:auto; right:calc(var(--vao-lateral) + var(--margem)); transform:translateY(-50%); width:min(30vw, 430px); height:min(70svh, 760px); object-fit:cover; object-position:50% 38%; display:block; filter:brightness(1.14) saturate(1.05); /* elipse mais fechada e queda em MUITAS paradas: com três degraus o olho enxerga o anel onde a curva vira. Miolo cheio até 30%, depois some devagar até 100%. */ -webkit-mask-image:radial-gradient(ellipse 47% 47% at 50% 47%, #000 0%, #000 40%, rgba(0,0,0,.92) 54%, rgba(0,0,0,.72) 66%, rgba(0,0,0,.46) 77%, rgba(0,0,0,.22) 87%, rgba(0,0,0,.06) 95%, transparent 100%); mask-image:radial-gradient(ellipse 47% 47% at 50% 47%, #000 0%, #000 40%, rgba(0,0,0,.92) 54%, rgba(0,0,0,.72) 66%, rgba(0,0,0,.46) 77%, rgba(0,0,0,.22) 87%, rgba(0,0,0,.06) 95%, transparent 100%); } @media (max-width:900px){ .cena__video{ /* volta a centralizar: no desktop a lente é ancorada pela direita com translateY só; aqui precisa dos dois eixos */ top:30%; left:50%; right:auto; transform:translate(-50%,-50%); width:min(112vw, 560px); height:min(57svh, 580px); object-position:50% 34%; -webkit-mask-image:radial-gradient(ellipse 42% 44% at 50% 46%, #000 0%, #000 26%, rgba(0,0,0,.88) 42%, rgba(0,0,0,.64) 56%, rgba(0,0,0,.4) 68%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.06) 92%, transparent 100%); mask-image:radial-gradient(ellipse 42% 44% at 50% 46%, #000 0%, #000 26%, rgba(0,0,0,.88) 42%, rgba(0,0,0,.64) 56%, rgba(0,0,0,.4) 68%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.06) 92%, transparent 100%); } } /* ---------- vórtice de fundo ---------- */ #vortice{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; /* o valor é escrito pelo scroll. A curva agora SOBE: discreto na capa, onde a palavra e o aftermovie mandam, e mais presente nas seções, onde ele é o que sobra da marca no fundo. A meia-opacidade que existia aqui por causa da filmagem virou parte da própria curva. */ opacity:var(--forca-vortice, .45); } /* véu: escurece as bordas e abre um lastro escuro à esquerda, onde mora a coluna de texto da capa */ .grao{ position:fixed; inset:0; z-index:2; pointer-events:none; background-image: radial-gradient(circle at 50% 46%, transparent 0%, transparent 26%, rgba(0,18,26,.46) 66%, var(--tinta) 100%); } /* a lente já morre sozinha nas bordas: o véu só protege topo e pé, onde mora texto pequeno */ .com-cena .grao{ background-image: linear-gradient(to bottom, rgba(0,18,26,.7) 0%, rgba(0,18,26,.08) 15%, rgba(0,18,26,0) 28%), linear-gradient(to top, var(--tinta) 0%, rgba(0,18,26,.8) 11%, rgba(0,18,26,0) 28%); } @media (max-width:900px){ .com-cena .grao{ background-image: linear-gradient(to bottom, rgba(0,18,26,.5) 0%, rgba(0,18,26,.28) 13%, rgba(0,18,26,.5) 34%, rgba(0,18,26,.72) 56%, var(--tinta) 84%); } } @media (max-width:900px){ .grao{ background-image: linear-gradient(to bottom, rgba(0,18,26,.62) 0%, rgba(0,18,26,.34) 40%, rgba(0,18,26,.86) 100%), radial-gradient(circle at 52% 40%, transparent 0%, transparent 26%, rgba(0,18,26,.55) 72%, var(--tinta) 100%); } /* no celular o texto ocupa a tela inteira, então o véu vira rampa: leve em cima, onde mora a lente, e fechado embaixo, onde precisa haver contraste para ler */ .com-cena .grao{ background-image: linear-gradient(to bottom, rgba(0,18,26,.14) 0%, rgba(0,18,26,.12) 26%, rgba(0,18,26,.58) 50%, rgba(0,18,26,.9) 74%, var(--tinta) 100%); } } /* ---------- estruturas comuns ---------- */ main{ position:relative; z-index:3 } section{ padding-inline:var(--margem); max-width:var(--largura); margin-inline:auto; scroll-margin-top:88px; } .secao__cabeca{ padding-block:var(--ritmo-5) var(--ritmo-4); max-width:34ch; } .rotulo{ margin:0 0 var(--ritmo-2); font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase; color:var(--aqua); font-weight:500; } .titulo{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem, 1.2rem + 4.2vw, 4.1rem); line-height:1.02; letter-spacing:-.015em; text-wrap:balance; } .titulo em{ font-style:italic; color:var(--aqua) } .titulo--grande{ font-size:clamp(2.6rem, 1.2rem + 6vw, 5.6rem) } /* ---------- botões ---------- */ .botao{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; padding:.85rem 1.6rem; font-family:var(--sans); font-size:.8125rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; color:#00212B; background:var(--aqua); border:1px solid var(--aqua); border-radius:999px; cursor:pointer; transition:background .2s var(--curva), color .2s var(--curva), transform .2s var(--curva); } .botao:hover{ background:transparent; color:var(--aqua) } .botao--vazado{ color:var(--papel); background:transparent; border-color:rgba(234,243,245,.38); } /* o principal em hover também fica vazado; então o secundário faz o inverso (preenche) para os dois nunca se confundirem */ .botao--vazado:hover{ background:rgba(234,243,245,.10); color:var(--papel); border-color:var(--papel); } .botao:active{ transform:scale(.98) } .botao--grande{ min-height:60px; padding:1.15rem 2.4rem; font-size:.875rem; } .botao--fita{ min-height:42px; padding:.55rem 1.5rem; font-size:.6875rem; } /* ---------- topo ---------- */ .topo{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; gap:var(--ritmo-3); padding:.9rem var(--margem); background:linear-gradient(to bottom, rgba(0,18,26,.86), rgba(0,18,26,0)); backdrop-filter:blur(2px); transition:background .3s var(--curva); } .topo.e-solido{ background:rgba(0,18,26,.94); border-bottom:1px solid var(--fio); } .topo__marca{ display:block; line-height:0 } .topo__local{ margin:0 0 0 clamp(.7rem,1.4vw,1.1rem); font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase; color:var(--papel-fraco); white-space:nowrap; } /* abaixo disso a barra já está cheia com os três itens do nav */ @media (max-width:700px){ .topo__local{ display:none } } .topo__marca img{ width:34px; height:34px; opacity:.95 } .topo__nav{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,1.8rem); margin-left:auto; } /* o CTA é o terceiro item do nav, não um quarto elemento solto */ .topo__nav .botao{ margin-left:clamp(.3rem,1vw,.8rem) } .topo__nav a:not(.botao){ color:var(--papel-mid); text-decoration:none; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; padding:.4rem 0; transition:color .2s var(--curva); } .topo__nav a:not(.botao):hover{ color:var(--aqua) } @media (max-width:760px){ /* três itens cabem: nada some no celular */ .topo{ justify-content:space-between } .topo__nav{ gap:.9rem } .topo__nav a:not(.botao){ font-size:.6875rem; letter-spacing:.12em } .topo__nav .botao{ margin-left:.2rem; padding:.55rem 1.15rem } } @media (max-width:360px){ .topo__nav a:not(.botao){ display:none } } /* ========================================================= CAPA — cartaz A palavra é o assunto: sangra nas duas bordas e o aftermovie toca DENTRO dela (mask com o próprio logotipo). Os dados não empilham numa coluna, viram tarja de pé de cartaz. ========================================================= */ .capa{ position:relative; width:var(--palco); max-width:none; margin-inline:auto; min-height:100svh; display:grid; grid-template-rows:1fr auto; /* a palavra centra no vão, a tarja fica no pé */ align-items:center; gap:var(--ritmo-3); padding-block:clamp(5rem,11vh,7rem) clamp(1.6rem,3.5vh,2.6rem); } .visualmente-oculto{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* --- a palavra --- */ .capa__marca{ position:relative; justify-self:start; /* --alinha é medido em tela: encaixa o centro da palavra no mesmo eixo horizontal do centro da lente */ transform:translateY(var(--alinha, 0px)); align-self:center; margin:0; /* cabe na coluna da esquerda, sem encostar na lente: a lente ocupa min(30vw,430px) na direita mais as duas margens */ width:min(calc(100% - min(30vw, 430px) - var(--margem) - 2.5rem), 92vh); max-width:none; aspect-ratio:3000 / 861; line-height:0; } .capa__chapa{ width:100%; height:100%; filter:drop-shadow(0 10px 60px rgba(0,18,26,.85)); } /* A palavra NUNCA desaparece: o trecho ainda não varrido fica no piso (--piso), não em zero. A varredura acende o que já estava lá, em vez de trazer do nada — se o laço morrer no meio, o pior caso é a palavra um pouco mais fraca, nunca ausente. */ .capa__marca.e-varrendo .capa__chapa{ -webkit-mask-image:linear-gradient(to right, #000 calc(var(--varre) * 118% - 12%), rgba(0,0,0,.68) calc(var(--varre) * 118% + 4%)); mask-image:linear-gradient(to right, #000 calc(var(--varre) * 118% - 12%), rgba(0,0,0,.68) calc(var(--varre) * 118% + 4%)); } @media (prefers-reduced-motion: reduce){ /* o símbolo fica, parado */ .capa__marca.e-varrendo .capa__chapa{ -webkit-mask-image:none; mask-image:none; } } /* --- tarja de pé --- */ .capa__base{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:var(--ritmo-3); padding-top:var(--ritmo-2); border-top:1px solid var(--fio); } /* sem a tarja de dados, a dobra vira um bloco central: os dois botões lado a lado e a contagem embaixo, todos no mesmo eixo */ .capa__fecho{ display:flex; flex-direction:column; align-items:center; gap:.9rem; } .capa__acoes{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; } @media (max-width:900px){ .capa{ /* no celular não há vão para distribuir: empilha e pronto */ display:flex; flex-direction:column; min-height:auto; padding-block:clamp(5rem,13vh,6.5rem) 6rem; gap:var(--ritmo-4); } /* no celular a marca precisa continuar legível: sangra só um fio, senão VÓRTICE vira ÓRTIC */ .capa__marca{ width:min(104vw, 190vh); justify-self:center } .capa__base{ flex-direction:column; align-items:stretch; gap:var(--ritmo-3); } .capa__fecho{ align-items:stretch; gap:.9rem } .capa__acoes{ flex-direction:column; align-items:stretch; width:100% } .capa__fecho .botao{ width:100% } } /* ========================================================= O DIA / PALCOS ========================================================= */ .palcos{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--ritmo-3); padding-bottom:var(--ritmo-5); } .palcos__seta{ margin:0; color:var(--petrol-cl) } .lineup__edicao{ /* a cabeça é travada em 34ch; esta linha é dado curto e não pode quebrar por causa dessa trava */ max-width:none; margin:var(--ritmo-2) 0 0; font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--areia); font-variant-numeric:tabular-nums; } /* ========================================================= LINE-UP ========================================================= */ .artistas{ list-style:none; margin:0; padding:0 0 var(--ritmo-5); border-top:1px solid var(--fio); } .artista{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,2.2vw,1.6rem); padding:clamp(.9rem,1.8vw,1.3rem) 0; border-bottom:1px solid var(--fio); } /* retrato: as fotos de perfil do Instagram saem em 100px, então o avatar é pequeno de propósito. Ampliar deixaria borrado. */ .artista__retrato{ width:clamp(60px, 7vw, 84px); aspect-ratio:1; border-radius:999px; object-fit:cover; border:1px solid var(--fio); background:var(--tinta-2); } .artista__id{ display:flex; flex-direction:column; gap:.2rem; min-width:0 } .artista__nome{ margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(1.3rem,.95rem + 1.2vw,2rem); line-height:1.1; } .artista__arroba{ font-size:.75rem; letter-spacing:.06em; color:var(--papel-fraco); text-decoration:none; transition:color .2s var(--curva); } .artista__arroba:hover{ color:var(--aqua) } .artista__palco{ margin:0; text-align:right; font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--papel-mid); white-space:nowrap; } @media (max-width:620px){ .artista{ grid-template-columns:auto 1fr; gap:.9rem } .artista__palco{ grid-column:2; text-align:left; font-size:.625rem; margin-top:.3rem; } } /* ========================================================= AVANÇO — o filme que fecha o site A caixa obedece a --palco (min(100vw,1600px)), como a marca e o painel de vídeo da capa. Não é só coerência: o filme é 1348×680 (1,98:1) e o palco em 1600 pede 807 de altura, ou seja, quase o quadro inteiro sem corte. Travar a altura em 640 fazia dele uma tarja em monitor largo, que foi o primeiro erro desta seção. ========================================================= */ .avanco{ position:relative; isolation:isolate; /* sangra na largura toda, como .eventos e .ingressos. Ficou preso em --palco (1600) por um tempo e em monitor grande sobrava fundo escuro dos dois lados. --palco vale para o painel da CAPA, que tem que se alinhar com a palavra e a tarja de pé; aqui não há vizinho para alinhar, o quadro é o assunto. */ width:100%; max-width:none; /* fecha o site: precisa de ar depois do banner de ingressos, e nenhum embaixo — o véu morre em --tinta e emenda com o rodapé */ margin:var(--ritmo-5) 0 0; padding-inline:0; /* a proporção é a do próprio filme, então em quase toda tela ele aparece inteiro; o teto só entra em monitor largo e baixo */ aspect-ratio:1348 / 680; max-height:92vh; display:grid; align-items:start; overflow:hidden; } .avanco__filme{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; /* o bruto sai mais frio que a marca: puxa de volta para o petrol */ filter:saturate(1.06) contrast(1.04); } /* Véu só ATRÁS DO TEXTO, não na seção inteira. A primeira versão usava um véu lateral de .90 e outro de pé de .88, e juntos apagavam o filme — o Matheus reprovou por isso. Aqui a mancha é uma elipse centrada onde a frase vive, no terço de cima, que por sorte é onde o teto do clube já é escuro. A pista e o neon ficam intactos. */ .avanco::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 82% 48% at 50% 20%, rgba(0,18,26,.82) 0%, rgba(0,18,26,.70) 44%, rgba(0,18,26,.28) 76%, rgba(0,18,26,0) 100%); } /* Costura das DUAS pontas. É o mesmo idioma do .ingressos: bloco full-bleed morre em --tinta em cima e embaixo, senão a borda vira um corte seco contra o fundo escuro da página. Na v2 eu só tinha feito embaixo (o topo parava em .24) e o Matheus reprovou o corte. */ .avanco::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, var(--tinta) 0%, rgba(0,18,26,.58) 8%, rgba(0,18,26,.12) 24%, rgba(0,18,26,0) 52%, rgba(0,18,26,.30) 82%, rgba(0,18,26,.70) 92%, var(--tinta) 100%); } .avanco__fala{ position:relative; z-index:2; width:min(100%, var(--largura)); margin-inline:auto; padding:clamp(2.4rem, 6.5vw, 6rem) var(--margem) 0; max-width:none; text-align:center; } .avanco__titulo{ margin:0 auto; max-width:17ch; font-family:var(--serif); font-weight:400; /* o teto subiu junto com a largura: 3,6rem dentro de um quadro de 2000px ficava miúdo */ font-size:clamp(1.9rem, 1.05rem + 3.6vw, 4.4rem); line-height:1.05; letter-spacing:-.015em; text-wrap:balance; } /* crédito do material, não subtítulo: diz de que noite é o filme */ .avanco__fonte{ margin:var(--ritmo-2) 0 0; font-size:.6875rem; letter-spacing:.28em; text-transform:uppercase; color:var(--papel-mid); } @media (max-width:900px){ /* a proporção 1,98:1 vira uma tarja em tela estreita: solta a altura e deixa o object-fit recortar pelo centro, onde o DJ está */ .avanco{ aspect-ratio:auto; min-height:min(76vh, 560px); max-height:none; } /* o recorte de centro do celular joga as barras de neon para trás do texto; o mesmo véu do desktop dava 1,71:1 aqui */ .avanco::before{ background:radial-gradient(ellipse 92% 54% at 50% 18%, rgba(0,18,26,.86) 0%, rgba(0,18,26,.74) 46%, rgba(0,18,26,.32) 78%, rgba(0,18,26,0) 100%); } } /* ========================================================= FOTOS — um álbum por edição ========================================================= */ .fotos{ position:relative; overflow:hidden } /* Marca d'água: a própria palavra da marca, enorme, atrás dos álbuns. Técnica vinda da referência que o Matheus mandou; a cor é a nossa e o filtro de ruído tira o liso de degradê digital. */ .marca-agua{ position:absolute; z-index:0; /* em 52% ela nascia ATRÁS da grade de cards e só sobravam lascas nos vãos. Sobe para a faixa do cabeçalho, onde há espaço aberto à direita do título. Ancorada em rem, não em %, senão a altura da seção (que muda com a quebra do título) muda o lugar dela. */ left:50%; top:clamp(8.5rem, 12vw, 12.5rem); transform:translate(-50%,-50%); margin:0; font-family:var(--serif); font-weight:400; /* tem que ser MAIS LARGA que a grade de cards, senão só sobram lascas de letra nos vãos e lê como sujeira */ font-size:clamp(6rem, 24vw, 21rem); line-height:.9; letter-spacing:-.035em; white-space:nowrap; pointer-events:none; user-select:none; background:linear-gradient(100deg, #00323F 0%, #00708A 24%, #0FA6BC 48%, #7FD6E4 68%, #005A6E 88%, #00323F 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:url(#grao-svg); /* .62 sobre a parte clara do degradê deixava o título em 3,4:1; em .42 sobe para 5,7:1 e a palavra continua legível */ opacity:.42; } @media (max-width:900px){ /* com os cards empilhados em largura cheia a palavra fica 100% coberta: melhor não existir do que virar lasca entre os cards */ .marca-agua{ display:none } } /* vidro líquido: a borda é um degradê recortado por máscara, não um border chapado. É o que dá o brilho de canto no card. */ .vidro{ position:relative; background:rgba(255,255,255,.014); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); border:none; box-shadow:inset 0 1px 1px rgba(255,255,255,.10); overflow:hidden; } .vidro::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.3px; background:linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 20%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 58%, rgba(255,255,255,.14) 80%, rgba(255,255,255,.42) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite:exclude; pointer-events:none; } .albuns{ position:relative; z-index:1; list-style:none; margin:0; padding:0 0 var(--ritmo-5); display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:clamp(1rem,2.4vw,2rem); } .album{ border-radius:12px } .album__link{ display:flex; flex-direction:column; gap:.9rem; padding:.75rem .75rem 1.1rem; border-radius:10px; text-decoration:none; color:inherit; transition:transform .5s var(--curva); } .album__link:hover{ transform:translateY(-4px) } .album__capa{ display:block; position:relative; aspect-ratio:4 / 3; overflow:hidden; border-radius:3px; border:1px solid var(--fio); background:radial-gradient(circle at 50% 40%, rgba(0,114,137,.36), rgba(0,18,26,.94) 74%); } .album__meta, .album__ver{ padding-inline:.25rem } .album__capa img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.03); transition:transform .7s var(--curva), filter .4s var(--curva); } .album__link:hover .album__capa img{ transform:scale(1.04); filter:saturate(1) contrast(1.05) } /* sem foto, a capa é tipografia da marca. Nunca foto de outra noite. */ /* Quando não existe foto pública daquela noite o quadro não finge ter uma nem fica vazio: vira uma chapa da marca, com o símbolo em marca d'água. É melhor assumir a ausência do que preencher com outra noite. */ .album__sem{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; color:var(--papel-mid); background: radial-gradient(115% 85% at 50% 42%, rgba(0,114,137,.34), rgba(0,18,26,0) 72%), #04191f; } .album__sem::before{ content:""; position:absolute; inset:0; background:url("../img/simbolo.png") center/74% auto no-repeat; opacity:.13; } .album__sem b{ position:relative; font-weight:400; font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.4rem); font-variant-numeric:tabular-nums; } .album__sem i{ position:relative; font-style:normal; font-size:.5625rem; letter-spacing:.28em; text-transform:uppercase; color:var(--papel-fraco); } .album__meta{ display:flex; flex-direction:column; gap:.28rem } .album__meta b{ font-weight:500; font-size:.6875rem; letter-spacing:.2em; color:var(--aqua); font-variant-numeric:tabular-nums; } .album__meta strong{ font-family:var(--serif); font-weight:400; font-size:clamp(1.15rem,.95rem + .6vw,1.5rem); line-height:1.15; } .album__meta i{ font-style:normal; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--papel-fraco); } .album__ver{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.2rem; min-height:32px; font-size:.625rem; letter-spacing:.22em; text-transform:uppercase; color:var(--papel-mid); transition:color .2s var(--curva); } .album__link:hover .album__ver{ color:var(--aqua) } /* ========================================================= MENSAGENS Não é print de conversa: são balões no idioma da marca. Alternam de lado para ler como troca de mensagens, e a coluna quebra sozinha para os balões de tamanhos diferentes se encaixarem. ========================================================= */ .vozes{ padding-bottom:var(--ritmo-5) } .vozes__lista{ margin:0; padding:0; list-style:none; columns:2; column-gap:clamp(1rem, 2.4vw, 2.2rem); } .voz{ break-inside:avoid; margin:0 0 clamp(1rem, 2.2vw, 1.8rem); } .voz__balao{ margin:0; padding:clamp(.95rem, 1.6vw, 1.3rem) clamp(1.1rem, 1.8vw, 1.45rem); border-radius:20px 20px 20px 5px; background:rgba(234,243,245,.07); border:1px solid rgba(234,243,245,.13); } .voz__balao p{ margin:0; font-size:clamp(.9375rem, .9rem + .2vw, 1.0625rem); line-height:1.55; color:var(--papel); } /* um sim, um não: o alternado é o que faz ler como conversa */ .voz:nth-child(even) .voz__balao{ border-radius:20px 20px 5px 20px; background:rgba(92,191,207,.13); border-color:rgba(92,191,207,.30); } .voz__quem{ margin:.5rem 0 0 .9rem; font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--papel-mid); } .voz:nth-child(even) .voz__quem{ margin-left:0; margin-right:.9rem; text-align:right } .voz__quem span{ color:rgba(234,243,245,.34) } .voz__quem span::before{ content:" · " } @media (min-width:1100px){ .vozes__lista{ columns:3 } } @media (max-width:700px){ .vozes__lista{ columns:1 } } /* ========================================================= SETS Capa local + botão. O iframe do YouTube só nasce no clique, então nada de player nem rastreio deles carrega em quem só passa por aqui. ========================================================= */ .sets{ padding-bottom:var(--ritmo-5) } .sets__lista{ margin:0; padding:0; list-style:none; display:grid; gap:clamp(1.2rem, 2.6vw, 2.2rem); grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); } /* o card inteiro é o link: sai para o YouTube em nova aba, não toca aqui */ .set__link{ display:block; text-decoration:none } .set__quadro{ position:relative; display:block; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; background:var(--tinta-2); border:1px solid var(--fio); transition:border-color .25s var(--curva), transform .25s var(--curva); } .set__quadro img{ width:100%; height:100%; object-fit:cover; transition:opacity .25s var(--curva), transform .5s var(--curva); } .set__link:hover .set__quadro{ border-color:rgba(92,191,207,.55) } .set__link:hover .set__quadro img{ transform:scale(1.03); opacity:.82 } .set__link:focus-visible .set__quadro{ outline:2px solid var(--aqua); outline-offset:3px } .set__play{ position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; width:58px; height:58px; transform:translate(-50%,-50%); border-radius:50%; background:rgba(0,18,26,.62); border:1px solid rgba(234,243,245,.55); color:var(--papel); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); transition:background .25s var(--curva), border-color .25s var(--curva), color .25s var(--curva); } .set__link:hover .set__play{ background:var(--aqua); border-color:var(--aqua); color:#00212B } .set__tempo{ position:absolute; right:.5rem; bottom:.5rem; padding:.15rem .4rem; border-radius:4px; background:rgba(0,12,18,.82); font-size:.625rem; letter-spacing:.06em; color:var(--papel); font-variant-numeric:tabular-nums; } .set__meta{ margin:.8rem 0 0; font-size:.625rem; letter-spacing:.18em; text-transform:uppercase; color:var(--papel-mid); } .set__meta b{ margin-right:.5rem; font-weight:500; color:var(--aqua); font-variant-numeric:tabular-nums; } .set__nome{ margin:.25rem 0 0; font-family:var(--serif); font-weight:400; font-size:1.25rem; color:var(--papel); } .set__nome span{ margin-left:.5rem; font-family:var(--sans); font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--papel-fraco); } /* ========================================================= INGRESSOS ========================================================= */ /* A seção inteira vira o banner: o próprio flyer floreia o fundo, e a peça aparece grande na frente. O fundo é uma cópia de 88px ampliada pelo navegador — sai borrada de graça, sem filter caro em imagem de 864px. */ .ingressos{ position:relative; isolation:isolate; max-width:none; padding-inline:0; padding-block:var(--ritmo-5); border-top:1px solid var(--fio); overflow:hidden; } .ingressos::before{ content:""; position:absolute; inset:-6%; z-index:-2; background:url("../img/fundo-ingressos.webp?v=2609231235") center/cover no-repeat; filter:saturate(1.2) brightness(.5); } /* véu mais forte na esquerda, que é onde mora o texto */ .ingressos::after{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(100deg, var(--tinta) 4%, rgba(0,18,26,.88) 32%, rgba(0,18,26,.52) 66%, rgba(0,18,26,.74) 100%), linear-gradient(to bottom, var(--tinta) 0%, rgba(0,18,26,0) 18%, rgba(0,18,26,0) 82%, var(--tinta) 100%); } .ingressos__grade{ position:relative; max-width:var(--largura); margin-inline:auto; padding-inline:var(--margem); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; } .ingressos__caixa .rotulo{ margin-bottom:var(--ritmo-2) } /* a seção perdeu o CTA de venda e ganhou uma linha de recado no lugar; medida curta de propósito, senão ela atravessa o véu e cai na parte clara do fundo */ .ingressos__aviso{ max-width:34ch; margin:var(--ritmo-2) 0 0; color:var(--papel-mid); } /* o respiro entre título e botões vinha do parágrafo que saiu; sem ele o vão era zero e a descida do "g" encostava no botão */ .ingressos__acoes{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--ritmo-3) } .ingressos__meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin:var(--ritmo-3) 0 0; padding:var(--ritmo-2) 0 0; list-style:none; border-top:1px solid var(--fio); font-size:.6875rem; letter-spacing:.2em; text-transform:uppercase; color:var(--papel-fraco); } .ingressos__cartaz{ margin:0; justify-self:end; width:100%; max-width:520px } .ingressos__cartaz img{ display:block; width:100%; height:auto; border:1px solid rgba(234,243,245,.16); border-radius:4px; box-shadow:0 40px 80px rgba(0,0,0,.55); } @media (max-width:860px){ /* a grade saiu do .ingressos para o .ingressos__grade quando a seção virou banner sangrado */ .ingressos__grade{ grid-template-columns:1fr } .ingressos__cartaz{ justify-self:center; max-width:380px } } /* ========================================================= EDIÇÕES ========================================================= */ /* ========================================================= EVENTOS — celular com os flyers passando Os flyers são verticais e é no celular que o público vê eles. O laço corre sozinho; a ficha ao lado acompanha o quadro ativo. ========================================================= */ .eventos{ position:relative; max-width:none; padding-inline:0; overflow:hidden; } .eventos > .secao__cabeca{ position:relative; z-index:2; max-width:var(--largura); margin-inline:auto; padding-inline:var(--margem); box-sizing:content-box; } /* a pista atrás: é o contexto do cartaz, não decoração */ .eventos::before{ content:""; position:absolute; inset:0; z-index:0; background:url(../img/fundo-pista.webp) center 30% / cover no-repeat; filter:saturate(.7) brightness(.6); } .eventos::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(to right, var(--tinta) 0%, rgba(0,18,26,.9) 24%, rgba(0,18,26,.5) 46%, rgba(0,18,26,.24) 66%, rgba(0,18,26,.4) 100%), linear-gradient(to bottom, var(--tinta) 0%, rgba(0,18,26,.5) 16%, rgba(0,18,26,.28) 50%, rgba(0,18,26,.86) 90%, var(--tinta) 100%); } /* Não é subtítulo de seção (aqueles saíram): é texto de leitura, e por isso tem medida e corpo próprios. Fica fora do .secao__cabeca, que é travado em 34ch e deixaria a linha curta demais. */ .eventos__intro{ /* a seção tem um véu (::after, z-index 0) sobre a foto de fundo; os irmãos sobem para z-index 2. Sem isto o texto é pintado por baixo do véu e simplesmente não aparece. */ position:relative; z-index:2; flex:0 1 auto; max-width:34ch; margin:0; } .eventos__intro p{ margin:0 } /* a aspiração vem no serifado, em contraste com a tipografia miúda de dentro do celular; o trajeto vem depois, mais discreto */ .eventos__lead{ font-family:var(--serif); font-size:clamp(1.0625rem, .92rem + .5vw, 1.3125rem); line-height:1.5; color:var(--papel); } .eventos__caminho{ margin-top:clamp(.9rem, 1.6vw, 1.3rem) !important; font-size:.8125rem; line-height:1.65; /* um pouco acima do --papel-mid: aqui o fundo é foto sob véu, não chapado, e texto de 13px não pode depender do trecho mais escuro da imagem */ color:rgba(234,243,245,.74); } /* fio curto da marca: ancora o texto e conversa com o fio da capa */ .eventos__intro::before{ content:""; display:block; width:44px; height:1px; margin-bottom:clamp(1rem, 2vw, 1.6rem); background:var(--aqua); } .eventos__palco{ position:relative; z-index:2; max-width:var(--largura); margin-inline:auto; padding:0 var(--margem) var(--ritmo-5); /* texto e aparelho lado a lado, centrados como par */ display:flex; align-items:center; justify-content:center; gap:clamp(2rem, 5vw, 5.5rem); } .eventos__palco > .fone{ flex:none } /* --- ficha, agora DENTRO da tela --- */ .fone__ficha{ /* o line-up varia de 1 a 2 linhas entre as edições: se a ficha empurrasse os controles, eles dançariam de slide para slide (e vazavam da tela). Ela cresce e centra; quem manda no rodapé é o .fone__controles */ flex:1 0 auto; display:grid; align-items:center; padding:.55rem .8rem .3rem; /* as edições continuam esticadas na célula (senão o line-up não quebra igual); só o texto é que centra */ text-align:center; } .edicao{ grid-area:1 / 1; /* empilhadas: a linha mede pela maior */ visibility:hidden; opacity:0; } .edicao.e-ativa{ visibility:visible; opacity:1; animation:entra-ficha .45s var(--curva) both; } @keyframes entra-ficha{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } .edicao__selo{ margin:0 0 .22rem; font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase; color:var(--areia); } .edicao__nome{ margin:0; font-family:var(--serif); font-weight:400; font-size:1.15rem; line-height:1.15; color:var(--papel); } .edicao__casa{ margin:.2rem 0 0; font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--aqua); } .edicao__extra{ margin:.25rem 0 0; font-size:.6875rem; line-height:1.4; color:var(--papel-mid); } /* Não é nota de rodapé, é A ação daquela edição. Alvo de 44px, ícone de foto e rótulo que diz o que acontece — "ver álbum" não dizia. A seta avisa que sai do site. Contrastes medidos sobre a chapa do celular: texto aqua 7,6:1 e borda 3,5:1. */ .edicao__album{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.45rem; min-height:44px; padding:0 1rem; border-radius:999px; font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--aqua); text-decoration:none; background:rgba(92,191,207,.10); border:1px solid rgba(92,191,207,.55); transition:background .18s var(--curva), border-color .18s var(--curva), color .18s var(--curva); } .edicao__album svg{ flex:none } .edicao__fora{ font-size:.8em; opacity:.75 } .edicao__album:hover, .edicao__album:focus-visible{ background:rgba(92,191,207,.20); border-color:var(--aqua); color:#B9F0F8; } /* --- controles, no pé da tela --- */ .fone__controles{ flex:none; display:flex; align-items:center; gap:.5rem; padding:.45rem .8rem .8rem; } .seta{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:999px; border:1px solid var(--fio); background:transparent; color:var(--papel); cursor:pointer; transition:border-color .2s var(--curva), color .2s var(--curva); } .seta:hover{ border-color:var(--aqua); color:var(--aqua) } .eventos__pontos{ display:flex; gap:.4rem; margin-left:auto } .ponto{ width:6px; height:6px; padding:0; border-radius:999px; border:1px solid var(--fio); background:transparent; cursor:pointer; transition:background .3s var(--curva), border-color .3s var(--curva), transform .3s var(--curva); } .ponto.e-ativo{ background:var(--aqua); border-color:var(--aqua); transform:scale(1.3) } /* --- o celular --- */ .fone{ position:relative; display:flex; flex-direction:column; --larg-fone:min(344px, 100%); width:var(--larg-fone); min-height:calc(var(--larg-fone) * 19.5 / 9); padding:10px; border-radius:46px; background:linear-gradient(158deg,#39444b 0%,#10191d 34%,#0a1114 62%,#2b363c 100%); box-shadow: 0 46px 90px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.16); justify-self:center; } /* botões laterais */ .fone::before, .fone::after{ content:""; position:absolute; left:-2px; width:2px; border-radius:2px; background:linear-gradient(#3d484f,#182126); } .fone::before{ top:22%; height:34px } .fone::after{ top:32%; height:56px } .fone__tela{ position:relative; flex:1 0 auto; border-radius:37px; overflow:hidden; background:var(--tinta); display:flex; flex-direction:column; padding-top:38px; /* espaço da ilha */ } .fone__ilha{ position:absolute; z-index:3; top:10px; left:50%; transform:translateX(-50%); width:30%; height:20px; border-radius:999px; background:#05090b; } .fone__trilho{ display:flex; height:100%; margin:0; padding:0; list-style:none; transition:transform .8s cubic-bezier(.65,0,.35,1); will-change:transform; } .fone__slide{ flex:0 0 100%; background:var(--tinta-2) } .fone__slide img{ display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; } /* só ESTA janela desliza. O perfil e as ações ficam parados. */ .post__janela{ overflow:hidden; width:100% } /* --- o post no feed --- */ .post{ display:flex; flex-direction:column; color:var(--papel); } .post__topo{ display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem; } .post__perfil{ width:26px; height:26px; flex:none; border-radius:999px; overflow:hidden; border:1px solid rgba(92,191,207,.5); background:var(--tinta-2); display:flex; align-items:center; justify-content:center; } .post__perfil img{ width:100%; height:100%; object-fit:cover } .post__nome{ font-size:.6875rem; font-weight:600; letter-spacing:.02em; color:var(--papel); } .post__mais{ margin-left:auto; font-size:.6875rem; color:var(--papel-fraco); letter-spacing:.06em } .post__acoes{ display:flex; align-items:center; gap:.75rem; padding:.45rem .7rem .3rem; color:var(--papel); } .post__salvar{ margin-left:auto; display:flex } .post__legenda{ margin:0; padding:0 .7rem .7rem; font-size:.625rem; line-height:1.45; color:var(--papel-mid); } .post__legenda b{ color:var(--papel); font-weight:600; margin-right:.3rem } .post__legenda [data-legenda]{ transition:opacity .3s var(--curva) } .post__legenda.e-trocando [data-legenda]{ opacity:0 } .fone__slide img{ width:100%; height:100%; object-fit:cover; display:block } @media (max-width:860px){ .eventos__palco{ padding-bottom:var(--ritmo-4); flex-direction:column; align-items:stretch; gap:var(--ritmo-4); } .eventos__intro{ max-width:40ch } .eventos__palco > .fone{ margin-inline:auto } .fone{ --larg-fone:min(335px, 100%) } .eventos::after{ background:linear-gradient(to bottom, var(--tinta) 0%, rgba(0,18,26,.5) 14%, rgba(0,18,26,.34) 42%, rgba(0,18,26,.9) 78%, var(--tinta) 100%); } } @media (prefers-reduced-motion: reduce){ .fone__trilho{ transition:none } .edicao.e-ativa{ animation:none } } /* ========================================================= RODAPÉ ========================================================= */ .rodape{ position:relative; z-index:3; max-width:var(--largura); margin-inline:auto; padding:var(--ritmo-4) var(--margem) calc(var(--ritmo-4) + 4rem); /* sem fio: ele media 1320 embaixo de um filme de 1600 e sobrava dos dois lados. O degradê do .avanco morrendo em --tinta divide. */ } /* Três colunas (marca | legal | links) deixavam a linha da classificação começando num x que não existe em lugar nenhum do rodapé, e o align-items:start empurrava texto e links para o topo de uma fileira alta, com um vazio embaixo dos dois. Agora são DUAS colunas: tudo o que é identidade desce pela mesma sangria da esquerda (a mesma da assinatura da SG lá embaixo) e os links ficam à direita, centrados no bloco. */ .rodape__topo{ display:grid; grid-template-columns:1fr auto; gap:var(--ritmo-3) var(--ritmo-4); align-items:center; } .rodape__id{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--ritmo-2); } .rodape__marca{ width:120px; height:auto; display:block } .rodape__legal{ margin:0; font-size:.8125rem; line-height:1.5; letter-spacing:.06em; color:var(--papel-mid); /* .50 era o mínimo do mínimo; .62 respira */ max-width:42ch; } .rodape__links{ display:flex; gap:1.6rem; list-style:none; margin:0; padding:0; justify-self:end; } .rodape__links a{ display:inline-flex; align-items:center; min-height:44px; color:var(--papel); text-decoration:none; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid transparent; transition:color .2s var(--curva), border-color .2s var(--curva); } .rodape__links a:hover{ color:var(--aqua); border-color:var(--aqua) } /* --- assinatura da SG --- */ .rodape__pe{ margin-top:var(--ritmo-4); padding-top:var(--ritmo-3); border-top:1px solid var(--fio); } .assina{ display:inline-flex; align-items:center; gap:.7rem; min-height:44px; text-decoration:none; transition:opacity .2s var(--curva); } .assina__marca{ width:30px; height:30px; flex:none } .assina__txt{ font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--papel-fraco); } .assina__txt b{ font-weight:500; color:var(--papel-mid) } .assina:hover .assina__txt b{ color:var(--papel) } @media (max-width:760px){ .rodape__topo{ grid-template-columns:1fr; gap:var(--ritmo-3); align-items:start } .rodape__links{ justify-self:start } } /* ========================================================= FITA FIXA (CTA mobile) ========================================================= */ .fita{ position:fixed; z-index:70; left:var(--margem); right:var(--margem); bottom:max(1rem, env(safe-area-inset-bottom)); display:none; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; padding:.7rem .8rem .7rem 1.2rem; background:rgba(0,33,43,.96); border:1px solid var(--fio); border-radius:999px; text-decoration:none; box-shadow:0 10px 40px rgba(0,0,0,.5); } .fita__texto{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--areia); } .fita__cta{ display:inline-flex; align-items:center; min-height:40px; padding:0 1.2rem; border-radius:999px; background:var(--aqua); color:#00212B; font-size:.6875rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; } @media (max-width:760px){ .fita{ display:flex } .rodape{ padding-bottom:calc(var(--ritmo-5) + 5rem) } } /* ========================================================= REVELAÇÃO — só existe quando o JS está vivo. Sem JS o conteúdo nasce visível. ========================================================= */ .js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--curva), transform .8s var(--curva); } .js .reveal.e-visivel{ opacity:1; transform:none } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .js .reveal{ opacity:1; transform:none } }