/** * Página /comparativo — 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. * * --------------------------------------------------------------------------- * POR QUE AS REGRAS ESTÃO COPIADAS, E NÃO IMPORTADAS * * A página é a trilha do Lula+ com o card da /campanha. As duas folhas de * origem existem e desenham exatamente isso — mas `inc/assets.php` carrega UMA * folha por página, de propósito, e puxar `campanha.css` (30 KB) + `legado.css` * (20 KB) traria 50 KB para desenhar dois componentes. * * Então aqui está a cópia, com a origem anotada em cada bloco. O que muda em * relação às originais: * * · a trilha vem do `legado.css`, que é uma página ESCURA — as setas foram * repintadas para o creme; * · o "Ver todos" da fileira não existe aqui (não há página de tema); * · o card vem do `campanha.css`, onde a proporção vinha inline porque lá há * duas (card e vídeo). Aqui é sempre 9:16, então fica no CSS; * · a cor da barra vem do TERMO, inline no `
`, e não de um * `data-variante` fixo. * * O JS é o contrário: reaproveitado inteiro, sem uma linha nova. Ver a nota da * entrada `comparativo` em `inc/contexto.php`. * --------------------------------------------------------------------------- * * Ordem das seções = ordem do layout. */ /* ========================================================================== hero -------------------------------------------------------------------------- `SITE/LAYOUT/TOPO_QUEM_COMPARA.psd`, artboard 1920×720. Três camadas e não uma imagem só: no celular a composição achatada deixaria o lettering ilegível — a plaqueta É o título da página. Tudo posicionado em % da caixa do hero, então a composição escala sozinha. Os percentuais moram em `tokens.css`, junto das coordenadas que os originaram. ========================================================================== */ .hero { position: relative; /* Sem este width, quando o max-height abaixo limita a altura o Chrome deriva a LARGURA da razão e a seção encolhe. Com largura explícita, o max-height só corta a altura. Mesma armadilha do hero da /campanha. */ width: 100%; aspect-ratio: var(--comp-hero-proporcao); /* Em monitor largo e baixo, 1920/720 comeria a dobra inteira. */ max-height: 78vh; overflow: hidden; } /* O céu é o LCP da página (ver o `lcp` em `inc/contexto.php`). */ .hero__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__plaqueta, .hero__mao { position: absolute; height: auto; } .hero__plaqueta { left: var(--comp-plaqueta-x); top: var(--comp-plaqueta-y); width: var(--comp-plaqueta-w); } .hero__mao { left: var(--comp-mao-x); top: var(--comp-mao-y); width: var(--comp-mao-w); } /* ========================================================================== fileiras — a trilha rolável -------------------------------------------------------------------------- Copiado de `legado/css/legado.css` (bloco "fileiras"), menos o `.fileira__vertodos` e o `.fileira__titulo-grupo`, que aqui não existem. As setas foram repintadas: lá o fundo é #00071B, aqui é o creme do tema. ========================================================================== */ .comp__container { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; } /* * `minmax(0, 1fr)` e não `1fr`: item de grid tem `min-width: auto`, então a * trilha de 5 cards (5×295 + 4×17 = 1543px) empurrava a seção para além do * container e a página inteira ganhava scroll horizontal. Com o minmax o item * pode encolher e a rolagem fica onde deve, dentro da trilha. */ .fileiras { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 3.75vw, 4.5rem); padding-block: clamp(2rem, 3.75vw, 4.5rem); } .fileiras > section { min-width: 0; } /* `center` e não `baseline`: as setas são caixas de 44px e alinhá-las pela linha de base do título deixaria o par pendurado. */ .fileira__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-bottom: var(--espaco-4); } /* Gotham Bold, caixa alta — o mesmo rótulo de seção da /campanha. A cor é fixa e não vem do termo: ver a nota em `tokens.css`. */ .fileira__titulo { font-family: var(--fonte-titulo); font-size: clamp(1rem, 1.6vw, 1.75rem); font-weight: 800; line-height: 1.15; letter-spacing: 0.01em; text-transform: uppercase; color: var(--cor-rotulo); } /* * As setas ocupam o lugar que era do "Veja todos" no Lula+. Quem decide se * elas aparecem é o `fileiras()` do `legado.js`, pelo atributo `hidden` no * grupo — aqui só o desenho. */ .fileira__setas { display: flex; flex: 0 0 auto; gap: 0.5rem; } .fileira__seta { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--cor-texto); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 999px; transition: background-color var(--dur-rapida) var(--ease-padrao), transform var(--dur-rapida) var(--ease-padrao); } .fileira__seta:hover:not(:disabled) { background: var(--cor-fundo); transform: scale(1.06); } /* * Desabilitada continua VISÍVEL, só apagada: sumir com o botão ao chegar na * ponta faria o par de setas dançar de posição a cada rolagem. */ .fileira__seta:disabled { opacity: 0.35; cursor: not-allowed; } /* * `grid-auto-columns` FIXO, sem `1fr`. * * Com `minmax(var(--card-largura), 1fr)` a coluna estica para ocupar o espaço * sobrando: a fileira de 3 itens vira cards de 450px, o conteúdo nunca estoura * a trilha e a rolagem simplesmente não existe — as setas ficam desabilitadas * para sempre. Era esse o "último carrossel não funciona" do /legado, e aqui a * armadilha é a mesma: INFRAESTRUTURA tem três cards. * * Com a largura fixa, todo card tem a mesma medida e a trilha rola sempre que * o conjunto passa da largura disponível. Fileira curta deixa espaço à direita, * que é o comportamento normal de catálogo de streaming. */ .fileira__trilha { display: grid; grid-auto-flow: column; grid-auto-columns: var(--card-largura); gap: var(--card-gap); overflow-x: auto; scroll-snap-type: x mandatory; /* Barra escondida: quem indica que dá para rolar são as setas e o card cortado na borda. A rolagem continua inteira no dedo, na roda e no teclado — só o desenho da barra some. */ scrollbar-width: none; margin: 0; padding: 0; list-style: none; } .fileira__trilha::-webkit-scrollbar { display: none; } .fileira__trilha > li { scroll-snap-align: start; } /* ========================================================================== o card -------------------------------------------------------------------------- Copiado de `campanha/css/campanha.css` (bloco "a peça"). Mesmo vocabulário de classes de propósito: é o `pecas()` do `campanha.js` que move os dois, e um nome diferente aqui seria duas marcações para um comportamento só. O que muda: a proporção é fixa em 9:16 (lá vinha inline, porque lá há duas) e a cor da barra vem do termo, no `--cor-barra` posto inline no
. ========================================================================== */ /* * `container-type: inline-size` para o rótulo escalar com a LARGURA do card, * e não com a da tela — é o que mantém a proporção do texto da barra igual no * desktop e no celular sem escrever um clamp por breakpoint. */ .peca { container-type: inline-size; } .peca__botao { display: block; width: 100%; padding: 0; background: var(--cor-barra); 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); } /* A arte é 1080×1920 — 9:16 cravado, e é a mesma proporção do story que ela vai virar no zap. */ .peca__moldura { display: block; position: relative; aspect-ratio: 9 / 16; overflow: hidden; /* só em cima: embaixo a arte encosta reto na barra, como na /campanha */ 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-barra); } /* * Alto contraste: a barra colorida sai. * * Trocada na PROPRIEDADE, não na variável — a cor do termo chega inline no * `
`, e style inline vence qualquer redefinição de `--cor-barra` no * `:root`. Esta regra ganha de `.peca__botao` por especificidade, sem precisar * de `!important`. */ :root[data-contraste='alto'] .peca__botao { background: #000; outline: 2px solid var(--cor-borda); outline-offset: -2px; } :root[data-contraste='alto'] .peca__acao { color: #ff0; } /* ========================================================================== responsivo -------------------------------------------------------------------------- O PSD só tem a versão de 1920. O que vem abaixo é recomposição nossa: em 720px de altura sobre a largura do celular, o hero vira uma tira e a plaqueta fica ilegível. A caixa cresce e as duas peças se reacomodam. ========================================================================== */ @media (width < 48rem) { .hero { aspect-ratio: 4 / 3; max-height: none; } /* A plaqueta é o título: ganha metade da largura e sobe para o alto. */ .hero__plaqueta { left: 6%; top: 7%; width: 54%; } /* A mão sai parcialmente de quadro pela direita, como no PSD ela já faz pela borda de baixo — o celular continua legível e o conjunto não compete com a plaqueta. */ .hero__mao { left: 46%; top: 34%; width: 52%; } } /* Abaixo de ~360px a trilha de 295px encosta nas duas margens. */ @media (width < 26rem) { :root { --card-largura: 260px; } } @media (prefers-reduced-motion: reduce) { .peca__botao, .peca__capa, .fileira__seta { transition: none; } } /* ========================================================================== visualizador da arte -------------------------------------------------------------------------- Copiado de `campanha/css/campanha.css`, sem uma vírgula de diferença: é o MESMO `partes/visualizador.php`, aberto pelo MESMO `pecas()` do `campanha.js`. Está aqui porque a /comparativo não carrega aquela folha (uma folha por página — ver o cabeçalho deste arquivo), e sem estas regras o abre encostado no canto superior esquerdo, sem fundo, sem backdrop e com a arte em tamanho natural. Mexeu num, mexa no outro. nativo. O `::backdrop` é do UA, então a cor de fundo vem daqui e não de um nó extra. ========================================================================== */ .visualizador { width: min(92vw, 30rem); max-height: 90dvh; /* O `margin: auto` é o que centra um modal, e o reset do compartilhado zera a margem de tudo — sem esta linha ele abre encostado no canto superior esquerdo. */ margin: auto; padding: 0; color: var(--cor-texto); background: var(--cor-superficie); border: 0; border-radius: var(--raio-xg); overflow: visible; } .visualizador::backdrop { background: rgb(0 0 0 / 0.75); } .visualizador__caixa { position: relative; display: grid; gap: 0.75rem; padding: clamp(1rem, 2vw, 1.5rem); max-height: 90dvh; overflow-y: auto; } .visualizador__fechar { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; background: rgb(0 0 0 / 0.55); border-radius: 999px; } .visualizador__midia { display: grid; place-items: center; } .visualizador__midia :is(img, video) { display: block; width: 100%; max-height: 58dvh; height: auto; object-fit: contain; border-radius: var(--raio-xg); background: rgb(0 0 0 / 0.06); } .visualizador__titulo { margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.35; } .visualizador__acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; } .visualizador__botao { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 8rem; min-height: 44px; padding-inline: 1rem; font-size: 0.875rem; font-weight: 700; text-align: center; text-decoration: none; color: #fff; background: var(--cor-verde); border-radius: 999px; transition: transform var(--dur-rapida) var(--ease-padrao); } .visualizador__botao--claro { color: var(--cor-marca-secundaria); background: var(--cor-marca-terciaria); } .visualizador__botao:hover { transform: scale(1.02); } /* Botão esperando o arquivo baixar. Continua clicável de propósito — o toque repetido é ignorado no JS, e desabilitar tiraria o foco de quem navega por teclado ou leitor de tela bem no momento em que há algo a anunciar. */ .visualizador__botao[aria-busy='true'] { cursor: progress; opacity: 0.75; } .visualizador__botao[aria-busy='true']:hover { transform: none; } /* A linha é reservada desde o começo, mesmo vazia: custa ~1,25rem de altura sempre, e em troca a caixa não "pula" no momento em que o aviso aparece — que é justamente quando a pessoa está olhando para o botão. */ .visualizador__aviso { margin: 0; min-height: 1.25rem; font-size: 0.8125rem; line-height: 1.25rem; text-align: center; color: var(--cor-texto); } @media (prefers-reduced-motion: reduce) { .visualizador__botao { transition: none; } }