/* WAY OF CLUB — sala de projeção Paleta: breu quente (sala escura), prata de filme, tungstênio (lâmpada de projetor), vermelho-cortina. Display: Syne · Corpo: Albert Sans · Ficha técnica: IBM Plex Mono. */ :root { --tela: #171310; --breu: #0e0b09; --prata: #ece5d7; --fumaca: #a49a8c; --tungstenio: #e0a44e; --cortina: #8e3a30; --linha: rgba(236, 229, 215, 0.14); --paus: #efd900; /* amarelo do cartão de visitas — claquete e naipe de paus */ --max: 1120px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--tela); color: var(--prata); font-family: "Albert Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* grão de filme sobre a página inteira */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); } h1, h2, h3 { font-family: "Syne", sans-serif; line-height: 1.08; font-weight: 700; } a { color: inherit; } img { max-width: 100%; display: block; } .mono { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } /* ─── cabeçalho ─── */ header.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--breu) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); } .topo-linha { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 20px 24px; max-width: var(--max); margin: 0 auto; } .topo-linha > .marca { justify-self: start; } .topo-linha > nav.menu { justify-self: end; } .topo-linha > .contexto { justify-self: center; text-align: center; font-family: "Syne", sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--fumaca); white-space: nowrap; } .marca { font-family: "Syne", sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.04em; text-decoration: none; white-space: nowrap; display: flex; align-items: baseline; gap: 12px; } .marca img { width: 38px; height: 38px; border-radius: 10px; align-self: center; } .marca span { color: var(--tungstenio); } nav.menu { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; } nav.menu a { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--fumaca); padding: 4px 2px; border-bottom: 1px solid transparent; } nav.menu a:hover, nav.menu a:focus-visible { color: var(--prata); } nav.menu a[aria-current="page"] { color: var(--tungstenio); border-bottom-color: var(--tungstenio); } @media (max-width: 860px) { .topo-linha { grid-template-columns: 1fr; gap: 6px; padding: 12px 24px; } .topo-linha > .contexto { justify-self: start; text-align: left; font-size: 1rem; } .topo-linha > nav.menu { justify-self: start; gap: 4px 14px; } } :focus-visible { outline: 2px solid var(--tungstenio); outline-offset: 3px; } /* ─── hero letterbox ─── */ .letterbox { background: var(--breu); } .letterbox .barra { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; max-width: var(--max); margin: 0 auto; color: var(--fumaca); } .letterbox .quadro { position: relative; overflow: hidden; } .letterbox .quadro img { width: 100%; height: min(78vh, 640px); object-fit: cover; filter: saturate(0.88) contrast(1.04); } .letterbox .quadro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,11,9,0.15) 0%, rgba(14,11,9,0.05) 45%, rgba(14,11,9,0.82) 100%); } .letterbox .fala { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 24px 40px; max-width: var(--max); margin: 0 auto; } .letterbox h1 { font-size: clamp(2rem, 6vw, 4.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; max-width: 18ch; text-shadow: 0 2px 30px rgba(0,0,0,0.55); } .letterbox .sub { margin-top: 14px; color: var(--prata); max-width: 52ch; font-size: 1.05rem; } @media (max-width: 720px) { .letterbox .quadro img { height: min(70vh, 520px); } .letterbox .fala { padding-bottom: 26px; } .letterbox .sub { font-size: 0.95rem; } } @media (prefers-reduced-motion: no-preference) { .letterbox .fala > * { animation: sobe 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .letterbox .fala > *:nth-child(2) { animation-delay: 0.15s; } .letterbox .fala > *:nth-child(3) { animation-delay: 0.3s; } @keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } } /* hero interno (páginas) */ .cabeca { padding: 72px 0 8px; } .cabeca h1 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); text-transform: uppercase; } .cabeca .mono { color: var(--tungstenio); margin-bottom: 14px; display: block; } .cabeca p.entrada { margin-top: 18px; max-width: 62ch; color: var(--fumaca); font-size: 1.1rem; } /* ─── seções ─── */ section.bloco { padding: 72px 0; } section.bloco + section.bloco { border-top: 1px solid var(--linha); } .bloco h2 { font-size: clamp(1.5rem, 3.2vw, 2.2rem); text-transform: uppercase; margin-bottom: 8px; } .bloco .mono.rotulo { color: var(--tungstenio); display: block; margin-bottom: 12px; } .bloco p { max-width: 62ch; } .bloco p + p { margin-top: 14px; } .duas { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } @media (max-width: 800px) { .duas { grid-template-columns: 1fr; } } /* ─── régua de produção (assinatura) ─── */ .filme-linha { display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; padding: 26px 0; border-top: 1px solid var(--linha); align-items: center; } .filme-linha:last-child { border-bottom: 1px solid var(--linha); } .filme-linha .titulo { font-family: "Syne", sans-serif; font-weight: 700; font-size: clamp(1.15rem, 2.6vw, 1.7rem); text-transform: uppercase; text-decoration: none; } a.titulo:hover, a.titulo:focus-visible { color: var(--tungstenio); } .filme-linha .meta { color: var(--fumaca); margin-top: 4px; } .filme-linha .veja { margin-top: 6px; } .regua { list-style: none; display: flex; gap: 6px; align-items: flex-end; } .regua li { font-family: "IBM Plex Mono", monospace; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fumaca); padding-top: 8px; width: 78px; border-top: 3px solid var(--linha); } .regua li.feita { border-top-color: color-mix(in srgb, var(--tungstenio) 45%, var(--linha)); color: var(--fumaca); } .regua li.atual { border-top-color: var(--tungstenio); color: var(--tungstenio); } @media (max-width: 800px) { .filme-linha { grid-template-columns: 1fr; } .regua { width: 100%; } .regua li { width: 20%; } } /* ─── cartões clubmakers ─── */ .grade-pessoas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 36px; } .pessoa { text-decoration: none; display: block; } .pessoa figure { overflow: hidden; aspect-ratio: 3 / 4; background: var(--breu); } .pessoa img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.5s ease, filter 0.5s ease; } .pessoa:hover img, .pessoa:focus-visible img { transform: scale(1.03); filter: saturate(1); } .pessoa .nome { font-family: "Syne", sans-serif; font-weight: 700; text-transform: uppercase; margin-top: 12px; } .pessoa .papel { color: var(--fumaca); font-size: 0.9rem; } /* ─── página de pessoa ─── */ .ficha { display: grid; grid-template-columns: 380px 1fr; gap: 48px; align-items: start; } @media (max-width: 860px) { .ficha { grid-template-columns: 1fr; } } .ficha figure { position: sticky; top: 90px; } .ficha img { filter: saturate(0.9); } .ficha figcaption { padding-top: 8px; color: var(--fumaca); } .dados { list-style: none; margin-top: 28px; border-top: 1px solid var(--linha); } .dados li { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linha); } .dados .mono { color: var(--fumaca); padding-top: 3px; } .dados a { color: var(--prata); } .dados a:hover { color: var(--tungstenio); } /* botões */ .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .botao { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 12px 20px; border: 1px solid var(--linha); color: var(--prata); transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; } .botao:hover, .botao:focus-visible { border-color: var(--tungstenio); color: var(--tungstenio); } .botao.cheio { background: var(--tungstenio); border-color: var(--tungstenio); color: var(--breu); font-weight: 500; } .botao.cheio:hover, .botao.cheio:focus-visible { background: color-mix(in srgb, var(--tungstenio) 85%, white); color: var(--breu); } /* ─── galeria ─── */ .galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; } @media (max-width: 800px) { .galeria { grid-template-columns: repeat(2, 1fr); } } .galeria figure { overflow: hidden; aspect-ratio: 3 / 2; background: var(--breu); } .galeria img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: transform 0.5s ease; } .galeria figure:hover img { transform: scale(1.03); } /* mídia */ .grade-midia { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; } @media (max-width: 720px) { .grade-midia { grid-template-columns: 1fr; } } .materia { text-decoration: none; border: 1px solid var(--linha); display: block; transition: border-color 0.25s ease; } .materia:hover, .materia:focus-visible { border-color: var(--tungstenio); } .materia figure { aspect-ratio: 16 / 10; overflow: hidden; background: var(--breu); } .materia img { width: 100%; height: 100%; object-fit: cover; } .materia .corpo { padding: 16px 18px 20px; } .materia .fonte { color: var(--tungstenio); display: block; margin-bottom: 6px; } .materia h3 { font-size: 1.05rem; } /* embed de vídeo */ .video { aspect-ratio: 16 / 9; background: var(--breu); margin-top: 36px; } .video iframe { width: 100%; height: 100%; border: 0; } /* capa de vídeo clicável (fallback quando o player externo bloqueia embed) */ .capa-video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--breu); } .capa-video img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9); transition: transform 0.5s ease; } .capa-video:hover img, .capa-video:focus-visible img { transform: scale(1.02); } .capa-video { text-decoration: none; } .capa-video img { filter: saturate(0.7) brightness(0.6) contrast(1.05); } .capa-video .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(14,11,9,0.3), rgba(14,11,9,0.6)); } .capa-video .play span { font-family: "IBM Plex Mono", monospace; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--prata); background: rgba(14,11,9,0.72); border: 1px solid var(--tungstenio); padding: 14px 22px; transition: background 0.25s ease, color 0.25s ease; } .capa-video:hover .play span { background: var(--tungstenio); color: var(--breu); } /* ficha técnica (filme) */ table.tecnica { border-collapse: collapse; width: 100%; max-width: 560px; margin-top: 28px; } table.tecnica td { padding: 10px 0; border-bottom: 1px solid var(--linha); vertical-align: top; } table.tecnica td:first-child { width: 180px; color: var(--fumaca); } /* ─── contato ─── */ .contato-grande a.email { font-family: "Syne", sans-serif; font-weight: 700; font-size: clamp(1.3rem, 4vw, 2.6rem); text-decoration: none; word-break: break-all; } .contato-grande a.email:hover { color: var(--tungstenio); } /* ═══ PACOTE PROJEÇÃO (Onda 1841) — CSS nativo, zero JS ═══ */ /* corte de cena entre páginas: dip-to-black via View Transitions cross-document. Navegador sem suporte (Firefox hoje) ignora a regra e navega normal. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: corte-saida 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; } ::view-transition-new(root) { animation: corte-entrada 0.5s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes corte-saida { to { opacity: 0; } } @keyframes corte-entrada { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* rolo de progresso no topo (a tira-claquete saiu: lia como faixa de perigo) */ #rolo-progresso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 61; background: var(--tungstenio); transform-origin: left; transform: scaleX(0); } @supports (animation-timeline: scroll(root)) { @media (prefers-reduced-motion: no-preference) { #rolo-progresso { animation: progresso-leitura linear both; animation-timeline: scroll(root); } } } @keyframes progresso-leitura { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* seções revelam como cenas; réguas de produção acendem da esquerda p/ direita. Sem suporte (@supports) ou com reduced-motion: estado final direto. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { section.bloco > .wrap { animation: revelar-cena linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; } .regua li { animation: acender-regua linear both; animation-timeline: view(); } .regua li:nth-child(1) { animation-range: entry 0% entry 30%; } .regua li:nth-child(2) { animation-range: entry 8% entry 38%; } .regua li:nth-child(3) { animation-range: entry 16% entry 46%; } .regua li:nth-child(4) { animation-range: entry 24% entry 54%; } .regua li:nth-child(5) { animation-range: entry 32% entry 62%; } } } @keyframes revelar-cena { from { opacity: 0.01; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes acender-regua { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* legendas [ entre colchetes ] — motivo tipográfico das barras de letterbox */ .letterbox .barra span::before { content: "[ "; opacity: 0.55; } .letterbox .barra span::after { content: " ]"; opacity: 0.55; } .ficha figcaption.mono::before { content: "[ "; opacity: 0.55; } .ficha figcaption.mono::after { content: " ]"; opacity: 0.55; } /* ═══ COMPARADOR DE COR (Onda 1842) — antes/depois com clip-path + range ═══ */ .comparador { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--breu); margin-top: 36px; } .comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .comparador .img-antes { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); } .comparador .cursor-linha { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--tungstenio); transform: translateX(-1px); pointer-events: none; } .comparador .cursor-linha::after { content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--breu); background: var(--tungstenio); padding: 6px 10px; white-space: nowrap; } .comparador .rotulo-antes, .comparador .rotulo-depois { position: absolute; bottom: 10px; font-family: "IBM Plex Mono", monospace; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--prata); background: rgba(14, 11, 9, 0.7); padding: 4px 8px; pointer-events: none; } .comparador .rotulo-antes { left: 10px; } .comparador .rotulo-depois { right: 10px; } .comparador-controle { position: absolute; inset: 0; width: 100%; height: 100%; appearance: none; -webkit-appearance: none; background: transparent; margin: 0; cursor: ew-resize; } .comparador-controle::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; background: transparent; } .comparador-controle::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: 0; } .comparador-controle:focus-visible ~ .cursor-linha { outline: 2px solid var(--tungstenio); outline-offset: 2px; } /* ═══ MODO ROTEIRO (Onda 1843) — a home escrita como roteiro navegável ═══ */ .roteiro { font-family: "Courier Prime", "Courier New", monospace; max-width: 70ch; margin: 0 auto; padding: 64px 24px 80px; font-size: clamp(1rem, 0.85rem + 0.55vw, 1.24rem); line-height: 1.72; color: var(--prata); position: relative; z-index: 0; } /* light leak: luz quente vazando pelo canto da folha, como janela de projetor (ficha vintage-analog-retro-film do UI UX Pro Max) */ .roteiro::before { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -140px; left: -220px; width: 560px; height: 480px; background: radial-gradient(closest-side, rgba(224, 164, 78, 0.14) 0%, rgba(224, 164, 78, 0.05) 55%, transparent 78%); } @media (prefers-reduced-motion: no-preference) { .roteiro::before { animation: respirar-leak 9s ease-in-out infinite alternate; } @keyframes respirar-leak { from { opacity: 0.65; } to { opacity: 1; } } } /* roteiro com imagens (Onda 1848): a página É roteiro; a foto é um inset pequeno de jornal, flutuando dentro da coluna, com o texto abraçando */ .cena-flu { margin: 40px 0; } .cena-flu::after { content: ""; display: block; clear: both; } .roteiro .slug { clear: both; } .quadro-flu { display: block; text-decoration: none; width: min(300px, 48%); } .quadro-flu.dir { float: right; margin: 6px 0 10px 26px; } .quadro-flu.esq { float: left; margin: 6px 26px 10px 0; } .quadro-flu img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; filter: saturate(0.65) contrast(1.03); transition: filter 0.45s ease; border: 1px solid var(--linha); } .cena-flu:hover .quadro-flu img, .cena-flu:focus-within .quadro-flu img { filter: saturate(1); } .quadro-flu figcaption { padding: 6px 2px; color: var(--fumaca); font-family: "IBM Plex Mono", monospace; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; } .quadro-flu.dir figcaption { text-align: right; } /* foto física grampeada por cima da página (variante anti-uniforme) */ .quadro-flu.grampeada { position: relative; background: #e9e4d8; padding: 9px 9px 22px; transform: rotate(-3.2deg); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.35s ease; } .quadro-flu.grampeada:hover, .cena-flu:focus-within .quadro-flu.grampeada { transform: rotate(-1deg); } .quadro-flu.grampeada img { border: 0; filter: saturate(0.8) contrast(1.02); } .quadro-flu.grampeada::after { content: ""; position: absolute; top: -4px; left: 50%; width: 30px; height: 9px; transform: translateX(-50%) rotate(4deg); background: linear-gradient(180deg, #cfcabc 0%, #8f8a7d 45%, #6f6a5f 100%); border-radius: 2px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); } /* TV de tubo realista: sem desenho de botão — o realismo vem da luz (reflexo de vidro, profundidade do tubo, vinheta) e das proporções 4:3 */ .quadro-flu.tv { position: relative; width: min(276px, 56%); background: linear-gradient(160deg, #352c22 0%, #241c15 55%, #1b140f 100%); border-radius: 10px; padding: 13px 13px 20px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.09), inset 0 -3px 8px rgba(0, 0, 0, 0.55); } .quadro-flu.tv::after { content: "PIX TV HD"; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); font-family: "IBM Plex Mono", monospace; font-size: 0.48rem; letter-spacing: 0.22em; color: #97897a; } .quadro-flu.tv figure { position: relative; background: #000; padding: 5px; border-radius: 9px; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9); } .quadro-flu.tv img { border: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px / 16px; filter: saturate(0.75) contrast(1.14) brightness(0.92); } .quadro-flu.tv figure::after { content: ""; position: absolute; inset: 5px; pointer-events: none; border-radius: 12px / 16px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 16%, transparent 28%), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, 0.5) 100%); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.65); } .cena-flu:hover .quadro-flu.tv img { filter: saturate(0.92) contrast(1.12) brightness(0.99); } @media (prefers-reduced-motion: no-preference) { .quadro-flu.tv figure::after { animation: tv-transmissao 4s steps(4) infinite; } @keyframes tv-transmissao { 0%, 100% { opacity: 0.92; } 50% { opacity: 1; } } } /* caixa de estatística discreta, herdada da diagramação editorial */ .caixa-stat { max-width: 230px; margin-top: 20px; padding: 12px 2px 10px; border-top: 3px solid var(--tungstenio); border-bottom: 1px solid var(--linha); } .caixa-stat .n { font-family: "Syne", sans-serif; font-weight: 800; font-size: 2rem; display: block; } .caixa-stat .r { font-family: "IBM Plex Mono", monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fumaca); } .roteiro .num { color: var(--fumaca); font-weight: 400; margin-right: 10px; } .roteiro .titulo-folha { text-align: center; margin-bottom: 72px; } .roteiro .titulo-folha h1 { font-family: inherit; font-weight: 700; font-size: 2.1rem; letter-spacing: 0.22em; } .roteiro .titulo-folha p { color: var(--fumaca); margin-top: 8px; } .roteiro .fade { text-transform: uppercase; letter-spacing: 0.08em; margin: 40px 0; color: var(--fumaca); } .roteiro a.slug { display: block; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; margin: 40px 0 12px; color: var(--tungstenio); text-decoration: none; border-left: 3px solid transparent; padding-left: 10px; margin-left: -13px; } .roteiro a.slug:hover, .roteiro a.slug:focus-visible { border-left-color: var(--tungstenio); text-decoration: underline; text-underline-offset: 4px; } .roteiro a.slug .vai { color: var(--fumaca); font-weight: 400; text-transform: none; float: right; font-size: 0.85em; } .roteiro .acao { margin: 12px 0; } .roteiro .personagem { text-transform: uppercase; text-align: center; margin-top: 24px; } .roteiro .dialogo { max-width: 34ch; margin: 4px auto 24px; text-align: center; } .roteiro .transicao { text-transform: uppercase; text-align: right; margin: 28px 0 8px; color: var(--fumaca); letter-spacing: 0.08em; } /* ─── rodapé ─── */ footer.pe { background: var(--breu); border-top: 1px solid var(--linha); margin-top: 72px; } .pe .lema { font-family: "Syne", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2.4vw, 1.7rem); /* Onda 2145: metade do tamanho — era o maior texto da página */ letter-spacing: 0.04em; padding: 48px 24px 4px; max-width: var(--max); margin: 0 auto; color: var(--prata); } .pe .lema em { font-style: normal; color: var(--tungstenio); } /* cartela de produtora nos créditos finais: ♣ da casa + nome */ .pe .producao { display: flex; align-items: center; gap: 14px; max-width: var(--max); margin: 0 auto; padding: 26px 24px 0; } .pe .producao .mono { color: var(--fumaca); } .pe .producao img { width: 40px; height: 40px; } .pe .producao .prod-nome { font-family: "Syne", sans-serif; font-weight: 800; letter-spacing: 0.05em; font-size: 1.05rem; } .pe-linha { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; padding: 28px 24px 40px; max-width: var(--max); margin: 0 auto; color: var(--fumaca); } .pe-linha a { color: var(--fumaca); text-decoration: none; } .pe-linha a:hover { color: var(--tungstenio); } /* ─── Sala de Projeção — sessões privadas (Onda 2126) ─── */ .porta { max-width: 560px; } .porta label { display: block; color: var(--tungstenio); margin-bottom: 12px; } .porta-linha { display: flex; gap: 12px; flex-wrap: wrap; } .porta input { flex: 1 1 240px; min-width: 0; font: 500 1.05rem/1 "IBM Plex Mono", monospace; letter-spacing: 0.06em; color: var(--prata); background: var(--breu); border: 1px solid var(--linha); border-radius: 4px; padding: 14px 16px; } .porta input:focus { border-color: var(--tungstenio); outline: none; } .porta .botao { padding-top: 14px; padding-bottom: 14px; } .porta-erro { color: var(--cortina); margin-top: 14px; filter: brightness(1.5); } .porta-nota { color: var(--fumaca); margin-top: 22px; font-size: 0.95rem; max-width: 52ch; } .porta-nota a { color: var(--fumaca); } .porta-nota a:hover { color: var(--tungstenio); } .sala-player, .sala-espera { max-width: var(--max); margin: 0 auto; } .sala-espera { display: grid; place-items: center; text-align: center; padding: 24px; border: 1px solid var(--linha); background: repeating-linear-gradient(135deg, var(--breu) 0 14px, #120e0b 14px 28px); } .sala-espera .mono { color: var(--tungstenio); display: block; margin-bottom: 10px; } .sala-espera p { color: var(--fumaca); max-width: 40ch; } .letterbox .barra .sair { font: inherit; color: var(--fumaca); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; } .letterbox .barra .sair:hover { color: var(--tungstenio); } @media (max-width: 720px) { .letterbox .barra { flex-wrap: wrap; gap: 6px 16px; } } /* ─── Sala v2 — palco, livro de presença, crítica nos créditos (Onda 2143) ─── */ .palco { position: relative; max-width: var(--max); margin: 0 auto; background: var(--breu); --aspecto: 1.7778; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); gap: 0; align-items: center; transition: grid-template-columns 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), gap 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .palco--creditos { grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr); gap: 28px; } .palco-tela { position: relative; min-width: 0; width: 100%; margin: 0 auto; transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); } .palco-tela .video { margin-top: 0; max-width: none; width: 100%; } /* fechado, o painel não pode dar altura ao palco (com largura 0 o texto vira uma palavra por linha e esticava a moldura, sobrando faixa preta acima e abaixo do vídeo) */ .palco-lado { min-width: 0; max-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.45s 0.3s; } .palco--creditos .palco-lado { max-height: none; opacity: 1; } .critica { padding: 12px 24px 12px 0; } .critica .rotulo { color: var(--tungstenio); display: block; margin-bottom: 10px; } .critica h3 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-bottom: 14px; } .critica textarea, .presenca input, .presenca select { display: block; width: 100%; font: inherit; color: var(--prata); background: var(--tela); border: 1px solid var(--linha); border-radius: 4px; padding: 12px 14px; } .critica textarea { resize: vertical; min-height: 140px; line-height: 1.5; } .critica textarea:focus, .presenca input:focus, .presenca select:focus { border-color: var(--tungstenio); outline: none; } .critica .marca-linha { display: flex; gap: 10px; align-items: flex-start; color: var(--fumaca); font-size: 0.92rem; margin-top: 12px; } .critica .marca-linha input { margin-top: 5px; accent-color: var(--tungstenio); } .critica .acoes { margin-top: 16px; } button.botao { background: transparent; cursor: pointer; } /*