/** * Página /campanha — só o miolo. * * Reset, tipografia base e utilitários vivem em `compartilhado/css/base.css`; * topo e rodapé em `topo.css` e `rodape.css`. Esta folha entra DEPOIS deles no * , então pode sobrescrever o compartilhado se algum dia precisar — * hoje não precisa. * * Ordem das seções = ordem do layout. * * Medidas do `V4_LULA/V4_CAMPANHA.psd`, artboard 1920×3883: * header y -12 → 128 * hero y 128 → 909 * vídeo y 911 → 1751 * creme y 1750 → 3458 (fundo único das três seções seguintes) * cards y 1830 → 2237 * vídeos y 2295 → 2820 * materiais y 2896 → 3371 * rodapé y 3457 → 3883 * * Saíram em 12/08/2026, com as seções que serviam: carrossel, selo de seção, * vitrines e Fez e Fará. Estão em `htmls-src/campanha-v2/campanha.css`. */ /* ========================================================================== hero -------------------------------------------------------------------------- Faixa do hero no PSD: y 128→909 (781px de altura sobre 1920 de largura). Tudo é posicionado em % dessa caixa, então a composição escala sozinha. dupla x 0 w 1268 → 66.04%, ancorada embaixo e à esquerda banner x 1144 y 210 w 459 → 59.58% / 10.50% / 23.91% ========================================================================== */ .hero { position: relative; overflow: hidden; aspect-ratio: 1920 / 781; /* Sem este width, quando o max-height abaixo limita a altura o Chrome deriva a LARGURA da razão e a seção encolhe (medido: 346px num viewport de 1440×160). Com largura explícita, o max-height só corta a altura. */ width: 100%; /* não deixa o hero virar uma tira fina em telas muito largas e baixas */ max-height: 88vh; background: var(--cor-marca-secundaria); } .hero__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hero__figuras { position: absolute; inset: 0; } .hero__figura { position: absolute; bottom: 0; left: 0; width: 66.04%; height: auto; /* cresce para cima: o rodapé da imagem nunca descola da base da seção */ transform-origin: bottom center; will-change: transform; } /* * Respiração de profundidade. `alternate` + ease-in-out senoidal evita o * salto no ponto de virada que dá impressão de glitch. Duração longa de * propósito: o movimento tem que ser percebido, não notado. * * O recorte do V4 tem só 24px de folga sobre o chapéu do Lula, e o pico do * loop sobe 27px — o chapéu ficava raspado. Em vez de encolher a dupla (era a * saída da V2, e ela some do canto esquerdo), afundo a arte 1,3%: embaixo o * terno já é cortado pela borda da seção, então ninguém vê, e em cima sobram * ~10px de folga no pico. */ .hero__figura--dupla { bottom: -1.3%; animation: respirar 11s var(--ease-ambiente) infinite alternate; } @keyframes respirar { from { transform: scale(1); } to { transform: scale(1.035); } } .hero__banner-caixa { position: absolute; left: 59.58%; top: 10.5%; width: 23.91%; } .hero__banner { width: 100%; height: auto; } /* ---------- mobile: banner primeiro, dupla embaixo ---------- */ @media (width < 48rem) { .hero { aspect-ratio: auto; max-height: none; display: grid; justify-items: center; gap: var(--espaco-4); padding-top: var(--espaco-5); } /* `relative` + z-index é obrigatório: o .hero__fundo é absoluto e, contra irmãos estáticos, pinta por cima deles. */ .hero__figuras { position: relative; z-index: 1; order: 2; width: 100%; } .hero__figura { position: static; width: 100%; max-width: 32rem; margin-inline: auto; } .hero__figura--dupla { bottom: auto; } .hero__banner-caixa { position: relative; z-index: 1; inset: auto; order: 1; width: min(62%, 16rem); } } /* ---------- movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { .hero__figura { animation: none; transform: none; will-change: auto; } } /* ========================================================================== vídeo em destaque -------------------------------------------------------------------------- Faixa do PSD: y 911→1751 (1920×840). Texto em x=263. O V4 marcou a camada do play como "REMOVER" e a capa foi reexportada sem ele: a faixa não desenha mais nenhum botão. Quem convida a clicar é a chamada ("dê o play e assista agora") — e, no hover, a própria capa. ========================================================================== */ .destaque { background: var(--cor-fundo); } .destaque__gatilho { position: relative; display: block; width: 100%; padding: 0; color: #fff; overflow: hidden; } .destaque__capa { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 840; object-fit: cover; transition: transform var(--dur-lenta) var(--ease-padrao); } .destaque__gatilho:hover .destaque__capa { transform: scale(1.02); } .destaque__texto { position: absolute; left: 13.7%; top: 24%; display: grid; gap: 0.5rem; text-align: left; text-shadow: 0 2px 12px rgb(0 0 0 / 0.35); } /* * As duas linhas são Transducer Condensed dentro do VIDEO.psb, e as duas * estavam ESCALADAS: o chapéu declara 29,58 e desenha 38,48 (×1,301); a * chamada declara 53,15 e desenha 121,37 (×2,284). A V2 escreveu os valores * declarados, então a chamada saía a 53px — menos da metade. Corrigido pela * matriz, como na /mobilizacao. * * 38,48 / 1920 = 2.004vw 121,37 / 1920 = 6.322vw * leading da chamada = 43,4 × 2,284 = 99,1px → 0,817 */ .destaque__chapeu { font-family: var(--fonte-display); font-size: clamp(0.875rem, 2.004vw, 2.405rem); font-weight: 700; text-transform: uppercase; color: var(--cor-marca-terciaria); } .destaque__chamada { font-family: var(--fonte-display); font-size: clamp(1.5rem, 6.322vw, 7.59rem); font-weight: 900; line-height: 0.817; text-transform: uppercase; } @media (width < 48rem) { .destaque__texto { top: 12%; } } @media (prefers-reduced-motion: reduce) { .destaque__capa { transition: none; } } /* ========================================================================== prontos para compartilhar — cards e vídeos -------------------------------------------------------------------------- PSD — cards y 1830→2237, vídeos y 2295→2820. Cinco colunas de 295px com 17px entre elas, dentro da mesma largura de container do resto do site. A peça é a arte inteira mais uma barra colorida embaixo: 295×308 + 51px nos cards, 295×426 + 52px nos vídeos. O prato colorido fica ATRÁS da arte e só aparece na barra — daí um fundo no botão e a moldura por cima. ========================================================================== */ .espalhe { background: var(--cor-fundo); } /* creme começa em y1750 e o primeiro título em y1830 */ .espalhe[data-variante='cards'] { padding-block-start: clamp(2rem, 4.17vw, 5rem); } /* fim dos cards em y2237, título dos vídeos em y2295 */ .espalhe[data-variante='videos'] { padding-block-start: clamp(1.5rem, 3.02vw, 3.625rem); } /* * Cores do PSD: prato vermelho #FA0404 nos cards e verde #00BF0D nos vídeos; * rótulo da seção azul #0034D2 e vermelho #FD0000. * * O tema escuro e o alto contraste o layout não define — são derivados nossos, * e aqui têm que ser legíveis. Medido sobre os fundos de cada tema: * #9DB8FF sobre #14130F = 9,5:1 #FF8A86 sobre #14130F = 8,2:1 * #FF0 sobre #000 = 19,6:1 */ .espalhe[data-variante='cards'] { --cor-plaqueta: #fa0404; --cor-rotulo: var(--cor-marca-secundaria); --cor-sobre-plaqueta: #fff; } .espalhe[data-variante='videos'] { --cor-plaqueta: #00bf0d; --cor-rotulo: #fd0000; --cor-sobre-plaqueta: #fff; } :root[data-theme='dark'] .espalhe[data-variante='cards'] { --cor-rotulo: #9db8ff; } :root[data-theme='dark'] .espalhe[data-variante='videos'] { --cor-rotulo: #ff8a86; } /* * No alto contraste o prato colorido sai: branco sobre o verde do layout dá * 2,48:1, e é justamente aqui que legibilidade vence fidelidade. Fica o par * amarelo sobre preto do resto do modo, com a borda marcando a peça. */ :root[data-contraste='alto'] .espalhe { --cor-rotulo: #ff0; --cor-plaqueta: #000; --cor-sobre-plaqueta: #ff0; } :root[data-contraste='alto'] .peca__botao { outline: 2px solid var(--cor-borda); outline-offset: -2px; } .espalhe__container { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; } .espalhe__cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-3); margin-bottom: clamp(1rem, 1.5vw, 1.8rem); } /* Gotham Bold 23,67px no PSD — 1.233vw sobre o artboard de 1920. */ .espalhe__titulo { font-family: var(--fonte-titulo); font-size: clamp(1rem, 1.233vw, 1.48rem); font-weight: 700; line-height: 1.15; text-transform: uppercase; color: var(--cor-rotulo); } /* Gotham Medium 11,83px. */ .espalhe__veja-todos { display: inline-flex; align-items: center; gap: 0.375rem; /* alvo de toque de 44px sem empurrar o layout */ min-height: 44px; flex: 0 0 auto; font-size: clamp(0.6875rem, 0.616vw, 0.74rem); font-weight: 500; text-transform: uppercase; text-decoration: none; letter-spacing: 0.02em; color: var(--cor-rotulo); transition: gap var(--dur-rapida) var(--ease-padrao); } .espalhe__veja-todos:hover { gap: 0.75rem; } .espalhe__grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.5rem, 0.885vw, 1.0625rem); margin: 0; padding: 0; list-style: none; } /* ---------- a peça ---------- */ /* * `container-type: inline-size` para o rótulo e a barra escalarem com a * LARGURA do cartão, e não com a da tela: no PSD "COMPARTILHAR" é 8,02% da * largura da peça e a barra 17,3%. É a única forma de manter a proporção nas * cinco colunas do desktop e nas duas do celular sem escrever um clamp por * breakpoint. */ .peca { container-type: inline-size; } .peca__botao { display: block; width: 100%; padding: 0; background: var(--cor-plaqueta); border-radius: 18px; overflow: hidden; transition: transform var(--dur-rapida) var(--ease-padrao); } .peca__botao:hover { transform: translateY(-3px); } .peca__botao:active { transform: translateY(0) scale(0.985); } .peca__moldura { display: block; position: relative; overflow: hidden; /* só em cima: embaixo a arte encosta reto na barra, como no layout */ border-radius: 18px 18px 0 0; } .peca__capa { display: block; width: 100%; height: 100%; object-fit: cover; background: rgb(0 0 0 / 0.12); transition: transform var(--dur-lenta) var(--ease-padrao); } .peca__botao:hover .peca__capa { transform: scale(1.04); } .peca__acao { display: grid; place-items: center; min-height: 2.155em; padding: 0.35em 0.5em; font-family: var(--fonte-titulo); font-size: clamp(0.8125rem, 8.02cqw, 1.48rem); font-weight: 700; line-height: 1; text-transform: uppercase; color: var(--cor-sobre-plaqueta); } /* ---------- responsivo ---------- */ @media (width < 62rem) { .espalhe__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (width < 40rem) { .espalhe__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .espalhe__cabeca { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .peca__botao, .peca__capa, .espalhe__veja-todos { transition: none; } } /* ========================================================================== materiais de campanha -------------------------------------------------------------------------- PSD y 2896→3371. Fundo creme, títulos em vermelho, sete pills inclinadas de 231×79 distribuídas em duas colunas (x=1087 e x=1359). ========================================================================== */ .materiais { background: var(--cor-fundo); padding-block: clamp(2rem, 4vw, 4.8rem) clamp(2.5rem, 4.5vw, 5.4rem); } .materiais__container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; } /* * `container-type: inline-size` e TUDO aqui dentro medido em `cqw` — fração * da largura desta coluna, não da tela. * * A caixa da chamada no PSD é x 167→926, y 2923→3371 (759×448). Os quatro * emojis, o recuo do título e o corpo da tipografia saem todos dessa mesma * régua, então o conjunto continua encaixado quando a coluna muda de largura. * Com `vw` no texto e `%` nos emojis eles descolavam: a altura da caixa * depende do texto, e `top: %` se resolve contra ela. */ .materiais__chamada { container-type: inline-size; position: relative; min-width: 0; } /* topo do título em y3015 e recuo em x274, na régua de 759 do PSD */ .materiais__texto { padding-block: 12.12cqw 0; padding-inline-start: 14.1cqw; } /* * Os quatro emojis 3D. Decorativos: o texto não depende deles e no celular * eles saem — a caixa lá é estreita demais e viraria colagem. */ .materiais__arte { position: absolute; inset: 0; pointer-events: none; } .materiais__emoji { position: absolute; height: auto; /* `left`/`top`/`width` chegam do PHP em cqw, medidos no PSD */ } /* * Título e subtítulo do V4 são Transducer Condensed com skewY(-11,82°) — a * matriz do PSD tem t[2] = 0, então a haste das letras fica VERTICAL e só a * linha de base sobe. É a mesma inclinação das pills, e por isso rotate() não * serve aqui. * * Corpo derivado da matriz: 53,15 declarado × 1,745 de escala = 92,76px, que * sobre o artboard de 1920 dá 4.831vw. O leading é 43,4 × 1,745 = 75,7px. */ .materiais__titulo { font-family: var(--fonte-display); font-size: clamp(2rem, 12.22cqw, 5.8rem); font-weight: 900; line-height: 0.816; text-transform: uppercase; color: #fa0404; transform: skewY(-11.82deg); transform-origin: left center; } /* * O PSD pede Transducer Condensed **Medium**; temos Bold e Black. O navegador * sobe 500 para 700 sozinho, e é o corte mais próximo — declarado aqui para * não parecer engano. Ver docs/pendencias.md. * * 53,15 × 1,281 = 68,08px → 8.97cqw na régua de 759. Leading 55,6px. */ .materiais__subtitulo { margin-top: 0.18em; font-family: var(--fonte-display); font-size: clamp(1.25rem, 8.97cqw, 4.26rem); font-weight: 700; line-height: 0.817; text-transform: uppercase; color: #fa0404; transform: skewY(-11.82deg); transform-origin: left center; } /* * Sete etiquetas IDÊNTICAS de 231×79,2 em duas colunas fixas: x=1087 e * x=1359. A coluna da direita nasce 40px acima da esquerda e as linhas andam * de 101 em 101. Nada aqui pode depender do comprimento do rótulo — no PSD * todas têm exatamente o mesmo tamanho. */ .pills { --etiqueta-alt: clamp(2.75rem, 4.125vw, 4.95rem); --etiqueta-larg: calc(var(--etiqueta-alt) * 2.917); display: grid; grid-template-columns: repeat(2, var(--etiqueta-larg)); justify-content: center; column-gap: calc(var(--etiqueta-alt) * 0.518); row-gap: calc(var(--etiqueta-alt) * 0.275); margin: 0; padding: 0; list-style: none; } /* o desencontro entre as colunas: 40px sobre etiqueta de 79,2px */ .pills > li:nth-child(2n) { transform: translateY(calc(var(--etiqueta-alt) * -0.505)); } .pill { position: relative; display: flex; align-items: center; justify-content: center; height: var(--etiqueta-alt); /* * No PSD cada rótulo foi escalado para PREENCHER a sua etiqueta, então a * razão texto/etiqueta varia de 0,425 ("WALLPAPERS", 10 letras) a 0,536 * ("ADESIVOS", 8). Um corpo só não reproduz isso — e é o que a página * precisa, porque os rótulos vão vir do WordPress. 0,44 é o maior valor em * que o rótulo mais largo ainda sobra folga dentro da etiqueta. */ font-family: var(--fonte-display); font-size: calc(var(--etiqueta-alt) * 0.44); font-weight: 900; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: #fff; /* * Medido nas fatias do PSD: as duas arestas longas são paralelas a −11,02°, * mas as pontas ficam VERTICAIS. Rotação deixaria as pontas perpendiculares * às arestas; skewX() deixaria as arestas longas retas. Só skewY() produz as * duas coisas — e é o que explica o texto, cujas hastes ficam verticais * enquanto a linha de base sobe. */ transform: skewY(-11deg); transition: transform var(--dur-rapida) var(--ease-padrao); } /* * A forma vive no ::before, não no próprio link: clip-path recorta também o * outline de foco, e o foco visível não é negociável. Assim o link continua * com o outline inteiro e só o preenchimento é chanfrado. * * Dois cantos cortados — superior-direito e inferior-esquerdo — de 20×18,8px * sobre a caixa de 231×79,2. É esse chanfro que dá a leitura de bloco 3D. * Não há sombra nem face escura: a região inteira do PSD tem um único tom. */ .pill::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--cor-pill); clip-path: polygon(0 0, 91.3% 0, 100% 23.8%, 100% 100%, 8.7% 100%, 0 76.2%); } /* sensação de apertar o botão — só transform, sem sombra */ .pill:hover { transform: skewY(-11deg) scale(1.04); } .pill:active { transform: skewY(-11deg) scale(0.96); } /* pills amarelas do PSD trazem o texto em azul */ .pill[data-clara] { color: var(--cor-marca-secundaria); } @media (width < 62rem) { .materiais__container { grid-template-columns: minmax(0, 1fr); } .materiais__texto { padding-block-start: 0; padding-inline-start: 0; } .materiais__arte { display: none; } } @media (prefers-reduced-motion: reduce) { .pill { transition: none; } } /* ========================================================================== lightbox do vídeo em destaque ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 100; width: 100vw; height: 100dvh; background: rgb(0 0 0 / 0.94); display: grid; place-items: center; animation: surgir var(--dur-media) var(--ease-padrao); } /* O nó fica no DOM e o atributo manda — a classe venceria o [hidden] do UA stylesheet. */ .lightbox[hidden] { display: none; } @keyframes surgir { from { opacity: 0; } } .lightbox__caixa { display: contents; } .lightbox__fechar { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: #fff; border-radius: 999px; transition: transform var(--dur-rapida) var(--ease-padrao); } .lightbox__fechar:hover { transform: scale(1.1); } .lightbox__palco { width: min(92vw, calc((100dvh - 8rem) * 16 / 9)); aspect-ratio: 16 / 9; } .lightbox__palco[data-formato='vertical'] { width: min(92vw, calc((100dvh - 8rem) * 9 / 16)); aspect-ratio: 9 / 16; } .lightbox__video { width: 100%; height: 100%; border: 0; } .lightbox__sem-video { color: #fff; } @media (prefers-reduced-motion: reduce) { .lightbox { animation: none; } } /* ========================================================================== visualizador das peças --------------------------------------------------------------------------