/* =========================================================================== guipaoficial.com · SISTEMA VISUAL --------------------------------------------------------------------------- Identidade: PRETO E DOURADO, a mesma já aprovada e no ar. Manchete em Anton condensada, caixa alta, com a segunda linha dentro de uma caixa dourada. A força visual vem da tipografia e do contraste, não da foto. Uma cor de acento só: o dourado. Se faltar uma segunda cor, o problema é de hierarquia tipográfica, não de paleta. HISTÓRICO, para quem abrir isto e estranhar os nomes: a primeira montagem deste site era em papel bege com vermelho de revisão, e foi trocada porque ficava com a cara da sala de imprensa, que fala com jornalista. Este site fala com o público. Os nomes de variável "papel" e "tinta" sobreviveram à troca de propósito: papel continua querendo dizer superfície e tinta continua querendo dizer o que se lê por cima. Só os valores viraram. Índice das seções deste arquivo: 01 Tokens: papéis de cor 02 Tokens: tipografia, espaço e forma 03 Reset e base 04 Escala tipográfica 05 Layout: container, seção, coluna de leitura 06 Dispositivo 1: sublinhado dourado à mão (SVG) 07 Dispositivo 2: filete dourado vertical 08 Dispositivo 3: numeração dourada em caixa alta 09 Carimbo de status 10 Foto: moldura, tratamento e legenda 11 Botões 12 Cabeçalho e navegação 13 Hero 14 Faixa de prova 15 Bloco de texto em primeira pessoa e credenciais 16 Compromissos 17 Cartão de proposta e filtro por eixo 18 Cartão de post (Papo reto) 19 Bloco invertido, hoje dourado (CTA final) 20 Rodapé e avisos obrigatórios 21 prefers-reduced-motion (a revelação por rolagem saiu em 30/07/2026) 22 Chave de fase (pré-campanha / campanha) =========================================================================== */ /* =========================================================================== 01 TOKENS: PAPÉIS DE COR --------------------------------------------------------------------------- A paleta crua está em --papel/--tinta/--ouro. Nada no site usa a paleta crua direto: tudo passa por um token de PAPEL (para que serve), e foi isso que permitiu virar a identidade inteira mexendo só neste bloco. Contraste medido (WCAG 2.1, AA pede 4.5:1 em texto corrido e 3:1 em texto grande ou elemento de interface): tinta sobre papel .............. 19,56:1 passa tinta sobre papel-2 ............ 18,30:1 passa tinta-2 sobre papel .............. 13,68:1 passa tinta-3 sobre papel .............. 8,08:1 passa ouro sobre papel .............. 9,72:1 passa ouro sobre papel-2 ............ 9,10:1 passa ouro sobre papel-3 ............ 8,03:1 passa ouro sobre ouro-bg ............ 6,86:1 passa papel sobre ouro ............... 10,26:1 passa (botão e seção dourada) linha sobre papel .............. 1,25:1 é divisória decorativa, não texto TRÊS COISAS QUE MUDARAM DE SENTIDO NA VIRADA, e que quem editar precisa saber para não desfazer sem querer: (a) --tinta-3 DEIXOU de ser a cor problemática. Na versão em papel ela reprovava AA em texto pequeno e ficou reservada a elemento decorativo. Sobre preto ela dá 8,08:1 e pode voltar a carregar texto. As regras não foram alteradas em massa, então hoje ela ainda é pouco usada: isso é sobra da versão anterior, não decisão. (b) --acento e --acento-txt apontam para o MESMO dourado. Na versão em papel eram dois vermelhos diferentes porque o claro reprovava contraste em texto pequeno. Sobre preto essa separação deixou de ser necessária. Os dois nomes continuam existindo só para não quebrar as regras que já os citam. (c) A SEÇÃO INVERTIDA VIROU DO AVESSO. Antes era o único bloco escuro numa página clara, e a regra dura era "nada de texto vermelho aqui". Agora é o único bloco DOURADO numa página escura, e o texto lá é quase preto. É por isso que --txt-inv aponta para --papel: a inversão inverteu junto. A regra dura correspondente hoje é: nada de texto branco dentro de .no-escuro, porque branco sobre dourado dá 1,9:1 e some. =========================================================================== */ :root { /* PALETA CRUA · a mesma da LP aprovada, medida do arquivo que está no ar. Os nomes continuam "papel" e "tinta" porque o SIGNIFICADO não mudou: papel é sempre superfície, tinta é sempre o que se lê por cima. Só os valores viraram. Foi por isso que a virada de identidade não exigiu reescrever as 900 linhas de regra abaixo. */ --papel: #08080A; /* fundo de tudo */ --papel-2: #101014; /* cartão, bloco elevado */ --papel-3: #17171C; /* faixa, bloco de citação */ --tinta: #FFFFFF; --tinta-2: #C9C9D2; --tinta-3: #9C9CA6; --linha: #22222A; --ouro: #E9B424; --ouro-bg: #2A2413; /* fundo de etiqueta de status */ --ouro-claro: #FFD35C; --claro: #E9B424; /* a UMA seção invertida do site, agora dourada */ /* superfícies */ --sup: var(--papel); /* fundo de tudo */ --sup-alta: var(--papel-2); /* cartão, bloco elevado */ --sup-faixa: var(--papel-3); /* faixa de prova, compromissos, citação */ --sup-inversa: var(--claro); /* UMA seção só: o CTA final, agora dourado */ /* texto sobre papel */ --txt: var(--tinta); /* título e corpo */ --txt-2: var(--tinta-2); /* corpo secundário E TODO metadado */ --txt-fraco: var(--tinta-3); /* só divisória e texto acima de 24px */ /* texto sobre a seção invertida, que agora é dourada: o texto lá é ESCURO. A inversão inverteu junto, e é por isso que --txt-inv aponta para --papel. */ --txt-inv: var(--papel); --txt-inv-2: #2C2410; /* ACENTO. Na versão em papel o vermelho tinha dois tons porque o claro reprovava contraste em texto pequeno. Sobre preto o dourado passa AA com folga em qualquer tamanho (#E9B424 sobre #08080A dá 9,7:1), então --acento e --acento-txt apontam para o mesmo dourado. Os dois nomes continuam existindo para não quebrar as regras que já os usam. */ --acento: var(--ouro); --acento-txt: var(--ouro); --acento-bg: var(--ouro-bg); --acento-hover: var(--ouro-claro); /* estrutura */ --borda: var(--linha); --foco: var(--ouro-claro); /* anel de foco tem que brilhar no escuro */ } /* =========================================================================== 02 TOKENS: TIPOGRAFIA, ESPAÇO E FORMA --------------------------------------------------------------------------- Tudo em rem para o texto escalar até 200% no ajuste do navegador sem quebrar. Nada em px fixo em tamanho de fonte. =========================================================================== */ :root { /* Anton só na manchete e no título de seção, e sempre em caixa alta: ela é condensada e desenhada para isso. Título menor e cartão usam Montserrat em peso 800, que aguenta caixa mista sem ficar pesado. */ --f-titulo: 'Anton', Impact, 'Arial Narrow', sans-serif; --f-corpo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* O nome "mono" ficou, o desenho não. Rótulo e metadado são Montserrat em caixa alta com espaçamento largo, que é como a identidade aprovada faz. Trocar aqui reescreveu todos os metadados do site de uma vez. */ --f-mono: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Montserrat Alternates: mesma família, letras mais redondas. Só em destaque pequeno (tag, número, chamada curta), nunca em texto corrido. */ --f-alt: 'Montserrat Alternates', 'Montserrat', sans-serif; --f-mao: 'Caveat', cursive; /* Sobrou da tipografia anterior. Anton é estática e ignora isto, então a declaração é inofensiva; some quando as regras que a citam sumirem. */ --fraunces: 'opsz' 144, 'SOFT' 0, 'WONK' 0; --container: 75rem; /* 1200px */ --gutter: 1.25rem; /* 20px no celular */ --leitura: 68ch; /* coluna de leitura, máximo 68 caracteres */ --foto-max: 32.5rem; /* 520px: largura máxima de exibição de qualquer foto */ --raio: 4px; /* teto do arredondamento. Sem card de vidro, sem sombra difusa. */ --s-1: 0.5rem; --s-2: 0.75rem; --s-3: 1.25rem; --s-4: 2rem; --s-5: 3rem; --s-6: 4.5rem; --s-7: 6rem; } @media (min-width: 60rem) { :root { --gutter: 4rem; } /* 64px no desktop */ } /* =========================================================================== 03 RESET E BASE =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x nos DOIS: a faixa dourada rolante é mais larga que a tela de propósito, para as pontas sangrarem. Só no body não basta, o html continua ganhando rolagem lateral no celular. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; /* clip, e NÃO hidden. Os dois cortam o que passa da largura, mas hidden transforma o body em caixa de rolagem e isso desliga position:sticky em tudo que está dentro dele. Era por isso que o cabeçalho do site rolava junto e sumia, em todas as páginas: o sticky estava escrito, e não valia. clip corta igual sem criar caixa de rolagem, e o cabeçalho volta a grudar. */ overflow-x: clip; background: var(--sup); color: var(--txt); font-family: var(--f-corpo); font-weight: 400; font-size: 1.125rem; /* 18px no celular */ line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; } /* Texto em mono, caixa alta e com letter-spacing é o que mais estoura quando a pessoa aumenta a letra. "AMBIENTE DE TRABALHO COM TOLERÂNCIA ZERO AO ASSÉDIO" em 22px não cabe em 345px sem poder quebrar em qualquer ponto. */ .meta, .card-prop__lei, .card-post__cat, .card-post__pe, .filtro__btn, .carimbo, .credenciais li, .rodape__tit { overflow-wrap: anywhere; } @media (min-width: 60rem) { body { font-size: 1.1875rem; } /* 19px no desktop */ } img, picture, svg, video { display: block; max-width: 100%; } img, video { height: auto; } ul { margin: 0; padding: 0; list-style: none; } /* Foco sempre visível, e nunca dependente de cor de divisória. :focus-visible mostra o anel para teclado sem sujar o clique de mouse. */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 2px; } .no-escuro a:focus-visible, .no-escuro button:focus-visible { outline-color: var(--papel); } /* Atalho de teclado para pular a navegação. */ .pular { position: absolute; left: -9999px; top: 0; background: var(--sup-alta); color: var(--txt); padding: var(--s-2) var(--s-3); font-family: var(--f-mono); font-size: 0.875rem; border: 1.5px solid var(--acento); z-index: 100; } .pular:focus { left: var(--gutter); top: var(--s-2); } ::selection { background: var(--acento-bg); color: var(--tinta); } /* =========================================================================== 04 ESCALA TIPOGRÁFICA --------------------------------------------------------------------------- Manchete SEMPRE em HTML. Nenhum título dentro de imagem: imagem sai da busca, quebra em tela intermediária e desaparece para leitor de tela. =========================================================================== */ h1, h2, h3, h4 { font-family: var(--f-titulo); letter-spacing: -0.005em; margin: 0; text-wrap: balance; /* Sem isto, a manchete gera rolagem horizontal quando a pessoa aumenta o tamanho da letra no navegador: em 200% o mínimo do clamp virá 76px, e "comentar" a 76px é mais largo que a tela de 360px. Quebrar a palavra é o comportamento correto; rolar de lado não é. Medido: em 200% de texto, isto tirou a página de 443px de largura em viewport de 345px para 345px, ou seja, zero rolagem lateral. O "anywhere" só entra em ação quando a palavra sozinha não cabe na linha: em leitura normal nada é partido. */ /* "anywhere" e não "break-word": só "anywhere" reduz a largura mínima intrínseca do texto. Com "break-word" a palavra continua contando inteira no cálculo de uma coluna de grade, e era isso que empurrava o cartão de proposta para fora da tela em 200% de texto. */ overflow-wrap: anywhere; /* "manual" e NUNCA "auto": com "auto" o Chrome hifeniza em português e a manchete aparecia com palavra partida no meio com hífen. Decisão da Wanessa em 07/09/2026: nada de palavra quebrada em título. */ hyphens: manual; } /* Anton em caixa alta na manchete e no título de seção. O line-height sobe de 1,02 para 1,12 porque Anton tem acento alto: em "VOCÊ" e "SÃO" o circunflexo e o til encostavam na linha de cima. */ h1, h2 { text-transform: uppercase; font-weight: 400; /* Anton só tem um peso. 800 aqui só ativa negrito falso. */ } h1 { font-size: clamp(2.375rem, 9vw, 4.75rem); line-height: 1.12; } h2 { font-size: clamp(1.875rem, 5.5vw, 2.875rem); line-height: 1.14; } /* Título de terceiro e quarto nível NÃO usam Anton. Condensada em caixa mista e em texto de cartão fica ilegível no celular. */ h3, h4 { font-family: var(--f-corpo); letter-spacing: -0.01em; } h3 { font-size: clamp(1.3125rem, 3vw, 1.625rem); font-weight: 800; line-height: 1.24; } h4 { font-size: clamp(1.1875rem, 2.4vw, 1.375rem); font-weight: 800; line-height: 1.3; } /* "pretty" evita o parágrafo terminar com uma palavra sozinha na última linha, que é o defeito de leitura mais comum em coluna estreita. */ p { margin: 0 0 1.1em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; } /* Lede: parágrafo de abertura, um pouco maior, ainda Manrope. */ .lede { font-size: clamp(1.1875rem, 2.6vw, 1.4375rem); line-height: 1.5; color: var(--txt-2); max-width: 34ch; } @media (min-width: 48rem) { .lede { max-width: 46ch; } } /* META: o rótulo em mono. É isto que faz a página parecer processo, não folheto. Cor --txt-2 e não --txt-fraco, por causa da nota (a) do bloco 01. */ .meta { font-family: var(--f-mono); font-weight: 500; font-size: 0.75rem; /* 12px */ line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-2); } .meta--acento { color: var(--acento-txt); } /* Link dentro de texto corrido: vermelho escuro, com sublinhado real e espessura suficiente para não sumir no celular no sol. */ .prosa a, a.link { color: var(--acento-txt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 500; } .prosa a:hover, a.link:hover { background: var(--acento-bg); } /* =========================================================================== 05 LAYOUT: CONTAINER, SEÇÃO, COLUNA DE LEITURA =========================================================================== */ .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .sec { padding-block: var(--s-6); } @media (min-width: 60rem) { .sec { padding-block: var(--s-7); } } .sec--faixa { background: var(--sup-faixa); } .sec--alta { background: var(--sup-alta); } .sec-head { margin-bottom: var(--s-5); max-width: 32ch; } .sec-head .meta { display: block; margin-bottom: var(--s-2); } .sec-head > p { margin-top: var(--s-3); color: var(--txt-2); max-width: 54ch; } @media (min-width: 48rem) { .sec-head { max-width: 40ch; } } /* Coluna de leitura: nenhuma linha de texto passa de 68 caracteres. */ .prosa { max-width: var(--leitura); } .prosa > p { color: var(--txt); } .divisor { height: 1px; background: var(--borda); border: 0; margin: 0; } /* =========================================================================== 06 DISPOSITIVO 1: SUBLINHADO VERMELHO À MÃO --------------------------------------------------------------------------- Não é border-bottom. É um traço irregular de caneta, um único desenho SVG reaproveitado em larguras diferentes (preserveAspectRatio="none" deixa o traço esticar sem engordar). Vai sob UMA palavra-chave de cada título de seção, nunca no título inteiro. O SVG vive dentro do CSS como data URI de propósito: nenhum recurso externo e nenhuma requisição a mais. =========================================================================== */ .marca { position: relative; display: inline; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.4C34 4.6 62 10.6 96 6.1c30-4 62 4.8 121 1.2' fill='none' stroke='%23E9B424' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M12 12.4c40-2.4 74 1.4 108-1.6' fill='none' stroke='%23E9B424' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 100%; background-size: 100% 0.42em; padding-bottom: 0.14em; } /* No bloco escuro o traço continua vermelho, mas ganha corpo para não desaparecer: 3,34:1 do vermelho sobre --escuro só serve para desenho. */ .no-escuro .marca { background-size: 100% 0.5em; } /* =========================================================================== 07 DISPOSITIVO 2: FILETE VERMELHO VERTICAL --------------------------------------------------------------------------- Margem esquerda de TODO bloco de citação e de TODO aviso. É o que diz "isto aqui foi marcado". =========================================================================== */ .filete { border-left: 4px solid var(--acento); padding: var(--s-1) 0 var(--s-1) var(--s-3); } /* Citação: Fraunces, grande, sem aspas decorativas. */ .citacao { border-left: 4px solid var(--acento); padding: var(--s-2) 0 var(--s-2) var(--s-4); margin: var(--s-5) 0; max-width: 30ch; } .citacao q, .citacao p { display: block; font-family: var(--f-corpo); font-weight: 800; font-size: clamp(1.4375rem, 4.2vw, 2.125rem); line-height: 1.14; letter-spacing: -0.02em; quotes: none; margin: 0; } .citacao cite { display: block; margin-top: var(--s-2); font-style: normal; font-family: var(--f-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-2); } /* Aviso: mesmo filete, corpo pequeno, fundo de papel elevado. */ .aviso { border-left: 4px solid var(--acento); background: var(--sup-alta); padding: var(--s-3); font-size: 1rem; line-height: 1.5; color: var(--txt-2); max-width: 62ch; } .aviso strong { color: var(--txt); } /* =========================================================================== 08 DISPOSITIVO 3: NUMERAÇÃO EM MONO VERMELHA --------------------------------------------------------------------------- 01 a 17 nas propostas, 01 a 04 nos compromissos. O número é do documento, não é enfeite: por isso mono, e por isso nunca sai do cartão. =========================================================================== */ .num { /* Montserrat Alternates aqui: os algarismos 1, 4 e 7 têm desenho próprio e dão personalidade ao número sem mexer no texto ao redor. Só no número. */ font-family: var(--f-alt); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--acento); /* 5,07:1 sobre papel e 5,61:1 sobre branco */ letter-spacing: 0.02em; line-height: 1; } .num--sm { font-size: 0.8125rem; letter-spacing: 0.08em; } .num--lg { font-size: clamp(1.75rem, 5vw, 2.25rem); } /* =========================================================================== 09 CARIMBO DE STATUS --------------------------------------------------------------------------- Retângulo com contorno vermelho de 1,5px, rotacionado -2 graus, mono em caixa alta. Quatro valores possíveis: MINUTA REDIGIDA, EM AJUSTE, REFORMULADA, PODE EXIGIR PEC. O texto é --acento-txt e não --acento: vermelho sobre --vermelho-bg dá 4,35:1 e reprovaria AA neste tamanho. =========================================================================== */ .carimbo { display: inline-block; transform: rotate(-2deg); border: 1.5px solid var(--acento); background: var(--acento-bg); color: var(--acento-txt); /* 7,02:1 sobre --vermelho-bg */ font-family: var(--f-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.28em 0.6em; border-radius: 2px; line-height: 1.3; /* NÃO use white-space: nowrap aqui. Com nowrap, "Pode exigir PEC" cria uma largura mínima de 163px que empurra o cartão inteiro para fora da tela quando a pessoa aumenta a letra do navegador. Medido: era o que gerava rolagem lateral em 200% de texto. Em tamanho normal o carimbo cabe numa linha sozinho, então nada muda visualmente. */ white-space: normal; } /* Status sem minuta pronta: mesmo carimbo, sem preenchimento, para o olho diferenciar "escrito" de "em andamento" sem depender só de ler. */ .carimbo--aberto { background: transparent; border-style: dashed; } /* =========================================================================== 10 FOTO: MOLDURA, TRATAMENTO E LEGENDA --------------------------------------------------------------------------- Restrição real: só existem selfies e frames de vídeo de WhatsApp. Não há retrato de estúdio nem recorte em PNG. Por isso: · nenhuma foto sangra a tela e nenhuma passa de 520px de exibição; · toda foto entra num retângulo com filete de 1px; · toda foto tem legenda em mono abaixo, no estilo de foto de jornal; · tratamento uniforme (preto e branco quente + grão a 4%) faz fotos de origens diferentes parecerem da mesma sessão. O grão é um SVG de ruído em data URI, sem arquivo e sem requisição. =========================================================================== */ .foto { margin: 0; max-width: var(--foto-max); } .foto__quadro { position: relative; border: 1px solid var(--borda); background: var(--sup-alta); padding: 6px; } .foto__quadro img { width: 100%; filter: grayscale(1) sepia(.12) contrast(1.06); } /* grão a 4% por cima */ .foto__quadro::after { content: ""; position: absolute; inset: 6px; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"); } .foto figcaption { margin-top: var(--s-2); font-family: var(--f-mono); font-weight: 400; font-size: 0.75rem; line-height: 1.45; letter-spacing: 0.04em; color: var(--txt-2); /* não --txt-fraco: 12px em #7C7466 reprova AA */ border-top: 1px solid var(--borda); padding-top: var(--s-1); } /* =========================================================================== 11 BOTÕES --------------------------------------------------------------------------- Três estados de forma: cheio (ação principal), contorno (secundária) e desabilitado. Botão desabilitado NÃO é link: é , para o teclado não parar num destino que não existe. Nunca botão ativo que não baixa nada. =========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 0.5em; min-height: 3rem; /* alvo de toque confortável no celular */ padding: 0.8em 1.35em; border: 1.5px solid transparent; border-radius: var(--raio); font-family: var(--f-corpo); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } @media (prefers-reduced-motion: reduce) { .btn { transition: none; } } .btn--cheio { background: var(--acento); color: var(--papel-2); /* branco sobre vermelho: 5,61:1 */ border-color: var(--acento); } .btn--cheio:hover { background: var(--acento-hover); border-color: var(--acento-hover); } .btn--contorno { background: transparent; color: var(--txt); border-color: var(--tinta); } .btn--contorno:hover { background: var(--tinta); color: var(--papel); } /* Dentro da seção invertida, que agora é DOURADA, o botão cheio precisa inverter também: dourado sobre dourado é o mesmo que botão invisível, e foi exatamente isso que aconteceu com o "Baixar o caderno completo" na primeira montagem desta paleta. Aqui ele vira preto com texto dourado. */ .no-escuro .btn--cheio { background: var(--papel); color: var(--acento); border-color: var(--papel); } .no-escuro .btn--cheio:hover { background: var(--papel-2); color: var(--acento-hover); border-color: var(--papel-2); } .no-escuro .btn--contorno { color: var(--txt-inv); border-color: var(--txt-inv); } .no-escuro .btn--contorno:hover { background: var(--papel); color: var(--tinta); } /* Desabilitado: some da ordem de foco e diz o motivo em palavras. */ .btn--off { background: transparent; color: var(--txt-2); border-color: var(--borda); border-style: dashed; cursor: default; font-weight: 500; } .no-escuro .btn--off { color: var(--txt-inv-2); border-color: rgba(0,0,0,.38); } .btn__peso { font-family: var(--f-mono); font-weight: 400; font-size: 0.75rem; letter-spacing: 0.04em; opacity: .85; } .btn-linha { display: flex; flex-wrap: wrap; gap: var(--s-2); } /* No celular o botão ocupa a largura toda e o peso do arquivo desce para uma segunda linha. Sem isto, um rótulo de duas linhas fica com "PDF, 469 KB" flutuando no meio da direita, o que parece defeito. Alvo de toque maior de graça. */ @media (max-width: 36rem) { .btn-linha .btn { width: 100%; flex-direction: column; align-items: flex-start; gap: 0.25em; } } /* =========================================================================== 12 CABEÇALHO E NAVEGAÇÃO --------------------------------------------------------------------------- Quatro itens em linguagem de pessoa. Sem "Institucional", sem "Biografia". O filete inferior aparece só ao rolar (classe .rolou vem do app.js). =========================================================================== */ .topo { position: sticky; top: 0; z-index: 40; background: var(--papel); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .topo.rolou { border-bottom-color: var(--acento); } @media (prefers-reduced-motion: reduce) { .topo { transition: none; } } /* A barra do topo PRECISA quebrar em duas linhas quando aperta. Motivo, medido em 07/09/2026: com a letra em 200% no navegador, a marca (95px) mais PARTICIPAR e MENU (237px) mais o respiro davam 452px dentro de uma tela de 345px, e os dois botoes saiam pela direita, fora do alcance do dedo. Media query nao resolve isto: o zoom de TEXTO nao muda a largura da tela em px, entao nenhuma regra por largura chega a disparar. Quem resolve e o proprio flex poder quebrar a linha. O respiro entre a marca e os botoes ficou em --s-2 e nao --s-3 porque em 200% ele tambem dobra, e 40px de vao vazio era metade do que faltava para caber. O respiro entre as duas linhas e fixo em px, de proposito: ele nao e texto, entao nao tem por que crescer junto com a letra. A altura da barra e medida pelo JavaScript em --topo-h, entao o painel do menu continua abrindo colado nela mesmo quando ela vira duas linhas. */ .topo .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; column-gap: var(--s-2); /* SEM padding vertical aqui, de proposito. Um padding-block empurraria a barra de 61px para 66px no computador, onde ela nunca precisou quebrar: nao se paga o conserto de um caso extremo com 5px em todo mundo. O row-gap so cobra espaco quando a linha de fato quebra. */ row-gap: 10px; min-height: 3.75rem; } .marca-nome { font-family: var(--f-titulo); font-weight: 400; /* Anton tem um peso só; 900 aqui era negrito falso */ font-size: 1.5rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--txt); text-decoration: none; display: inline-flex; align-items: center; } /* A MARCA · entrou em 29/08/2026. Até aqui a palavra GUIPA era escrita em Anton, que é PARECIDA com a marca da campanha mas não é ela: a marca tem inclinação, exclamação e desenho próprio, fechados pela gráfica. Agora é a imagem oficial. A altura está em "em" de propósito. A mesma regra serve o topo (1,5rem), o rodapé e o cartão de links (2,25rem): cada lugar já define o font-size da marca e a imagem acompanha, sem precisar de uma regra por lugar. É a versão chapada, sem o desgaste de pincel. No tamanho de topo o desgaste não aparece e só pesava o arquivo. */ .marca-img { height: 1.3em; width: auto; display: block; } /* NÚMERO DE URNA · entrou em 25/08/2026, colado na marca, no topo e no rodapé de todas as páginas. Fica dourado para ler como número e não como parte da palavra GUIPA. O espaço é margem e não caractere: número separado por espaço dentro do texto quebra a linha em tela estreita e o número desce sozinho. */ .marca-num { margin-left: 0.4em; color: var(--acento); font-family: var(--f-titulo); letter-spacing: 0.04em; white-space: nowrap; } .nav { display: flex; gap: var(--s-3); flex-wrap: wrap; } .nav a { font-family: var(--f-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-2); text-decoration: none; padding: 0.9rem 0; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--txt); border-bottom-color: var(--acento); } /* Página atual. A marca é um filete que APARECE, não só uma troca de cor: estado indicado apenas por cor não serve para quem não distingue as duas. O aria-current no HTML é o que o leitor de tela anuncia. */ .nav a[aria-current="page"] { color: var(--txt); /* 16,73:1 sobre --papel */ border-bottom-color: var(--acento); } .rodape__col a[aria-current="page"] { border-bottom-color: var(--acento); } /* --------------------------------------------------------------------------- BOTÃO PARTICIPAR E BOTÃO MENU · só existem abaixo do ponto de virada. No computador a navegação inteira cabe em uma linha e nada disso aparece. */ .topo__acoes { display: none; } /* NO CELULAR A NAVEGAÇÃO VIRA PAINEL, 05/09/2026. --------------------------------------------------------------------------- Até aqui o menu era uma grade de três colunas presa embaixo da marca, e o comentário que ficava neste lugar dizia "sem menu sanduíche: itens curtos não justificam esconder a navegação atrás de um clique". Isso era verdade com quatro itens. Com sete não é mais: medido em 375x812, a barra grudada no topo ocupava 355px, 44% da tela, o tempo inteiro em que a pessoa rolava a página, e a terceira linha tinha "Participar" sozinho com dois vãos vazios do lado. Em aparelho de 667px de altura passava de metade da tela. Agora a barra fica com 60px: marca, o botão dourado PARTICIPAR, que é a ação que a campanha quer, e o botão MENU. O menu abre em painel de tela cheia, com item de 1,05rem e área de toque de 56px de altura, que é alvo confortável de dedo. São quase 300px de conteúdo devolvidos para a página. O painel só existe para quem tem JavaScript, por isso tudo abaixo está preso em html.js. Sem JavaScript o botão não abriria nada, então ele nem aparece e a grade de três colunas de antes continua valendo, inteira, inclusive com o "Participar" dentro dela. Ninguém fica sem navegação. */ @media (max-width: 61rem) { .so-largo { display: none; } /* Sem JavaScript: a grade de antes, sem botão nenhum. */ html:not(.js) .topo .wrap { flex-wrap: wrap; padding-bottom: 0; } html:not(.js) .nav { order: 3; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-2); row-gap: 0; border-top: 1px solid var(--borda); } html:not(.js) .nav a { white-space: nowrap; padding: 0.7rem 0; font-size: 0.6875rem; letter-spacing: 0.05em; } /* Com JavaScript: barra de uma linha só. */ html.js .topo__acoes { display: flex; align-items: center; gap: var(--s-2); } /* PARTICIPAR sempre visível, mesmo com o menu fechado: é o convite da campanha e não pode depender de a pessoa abrir uma gaveta. Dourado chapado com texto escuro, o mesmo par do botão principal do hero. */ html.js .topo__cta { font-family: var(--f-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt-inv); background: var(--acento); text-decoration: none; padding: 0.6rem 0.75rem; border: 1px solid var(--acento); white-space: nowrap; } html.js .topo__cta:hover { background: var(--acento-hover); border-color: var(--acento-hover); } /* Na própria página Participar o botão vira contorno. Botão dourado cheio chamando para onde a pessoa já está é convite que não leva a lugar nenhum. */ html.js .topo__cta[aria-current="page"] { background: none; color: var(--acento); } /* O botão diz MENU por escrito, não só três riscos. Palavra e ícone juntos são entendidos por mais gente, e o rótulo troca para FECHAR quando o painel está aberto, escrito pelo JavaScript. */ html.js .topo__menu { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--f-mono); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--txt); background: none; border: 1px solid var(--borda); padding: 0.6rem 0.75rem; cursor: pointer; white-space: nowrap; } html.js .topo__menu:hover { border-color: var(--acento); } html.js .topo__menu-riscos { display: block; } /* Os três riscos viram X quando abre. É a mesma peça girando, sem trocar de ícone: o traço do meio some e os outros dois cruzam. */ html.js .topo__menu-riscos line { transition: transform .18s ease, opacity .18s ease; transform-origin: 8px 6px; } html.js .topo__menu[aria-expanded="true"] .topo__menu-riscos line:nth-child(1) { transform: translateY(5px) rotate(45deg); } html.js .topo__menu[aria-expanded="true"] .topo__menu-riscos line:nth-child(2) { opacity: 0; } html.js .topo__menu[aria-expanded="true"] .topo__menu-riscos line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } @media (prefers-reduced-motion: reduce) { html.js .topo__menu-riscos line { transition: none; } } /* O PAINEL. Começa embaixo da barra, que continua visível e clicável: a altura vem do JavaScript em --topo-h, porque a barra muda de altura conforme o aparelho e número mágico aqui desalinha em algum deles. */ html.js .nav { position: fixed; top: var(--topo-h, 3.75rem); left: 0; right: 0; bottom: 0; z-index: 39; display: block; background: var(--papel); border-top: 1px solid var(--borda); padding: 0.5rem var(--s-3) 2rem; overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-0.5rem); visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; } html.js body.menu-aberto .nav { opacity: 1; transform: none; visibility: visible; } /* Enquanto o painel está aberto a página atrás não rola. Sem isso o dedo arrasta o conteúdo por baixo e a pessoa perde o lugar onde estava. */ html.js body.menu-aberto { overflow: hidden; } @media (prefers-reduced-motion: reduce) { html.js .nav { transition: none; } } html.js .nav a { display: block; font-size: 1.05rem; letter-spacing: 0.05em; padding: 1.1rem 0; color: var(--txt); border-bottom: 1px solid var(--borda); white-space: nowrap; } html.js .nav a:last-child { border-bottom-color: transparent; } /* Página atual: filete dourado à esquerda em vez de embaixo. Embaixo ele se confundiria com a divisória que separa um item do outro. */ html.js .nav a[aria-current="page"] { color: var(--acento); border-bottom-color: var(--borda); box-shadow: inset 3px 0 0 var(--acento); padding-left: 0.9rem; } /* Participar já está no botão dourado da barra, sempre visível. Repetir na lista logo abaixo dele seria a mesma palavra duas vezes na mesma tela. */ html.js .nav a[href="/participar"] { display: none; } } /* TELA DE 320px (iPhone SE de primeira geração e afins). Com JavaScript: a marca, o PARTICIPAR e o MENU por extenso somam mais que a largura da tela, e o botão dourado subia por cima do número 1508. A palavra MENU sai da tela e fica só o ícone, que continua sendo lido em voz alta por estar apenas escondido dos olhos, e os dois botões apertam a letra. Sem JavaScript: a grade de antes, com a letra menor, como sempre foi. */ @media (max-width: 22.5rem) { html:not(.js) .nav { column-gap: 0.5rem; } html:not(.js) .nav a { font-size: 0.625rem; letter-spacing: 0.04em; } html.js .marca-nome { font-size: 1.25rem; } html.js .topo__cta, html.js .topo__menu { font-size: 0.625rem; letter-spacing: 0.04em; padding: 0.55rem 0.6rem; } html.js .topo__menu { gap: 0; } html.js .topo__menu-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* =========================================================================== 13 HERO --------------------------------------------------------------------------- Manchete em HTML. Nunca dentro de imagem: imagem sai da busca, quebra em tela intermediária e some para leitor de tela. Os quatro dispositivos abaixo vieram da LP aprovada e são o que dá a cara da identidade: palavras fantasma vazadas no fundo, tarja dourada torta, segunda linha da manchete dentro de caixa dourada, e a assinatura à mão. =========================================================================== */ .hero { position: relative; overflow: hidden; padding-block: var(--s-5) var(--s-6); } /* A manchete do hero é MENOR que a escala geral de h1, e não maior. Anton é condensada mas "Aconteceu com você" tem 18 caracteres: em 76px ela passava da largura da coluna e quebrava depois de "com", jogando "você" sozinho numa linha e deixando a caixa dourada da linha de baixo com formato de escada. Em 68px a linha cabe inteira. text-wrap volta para normal porque o "balance" tentava igualar o tamanho das linhas e era ele que insistia na quebra errada: aqui a quebra é escolhida à mão, com
, e o navegador não deve opinar. */ .hero h1 { font-size: clamp(2.25rem, 7.4vw, 4.25rem); text-wrap: normal; /* 1,18 e não 1,12: Anton tem acento alto e o circunflexo de VOCÊ encostava na tarja dourada de cima. */ line-height: 1.18; } .hero__grade { display: grid; gap: var(--s-5); position: relative; z-index: 2; } .hero h1 { margin-bottom: var(--s-3); } .hero .lede { margin-bottom: var(--s-4); } .hero__selo { display: block; margin-bottom: var(--s-3); } /* Palavras fantasma. contain e translateZ isolam a camada: é texto vazado gigante, caro de desenhar, e sem isso o navegador o redesenhava junto com o resto da página a cada quadro de rolagem. */ .hero__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; user-select: none; pointer-events: none; contain: paint; transform: translateZ(0); } .hero__fundo span { position: absolute; font-family: var(--f-titulo); font-size: 5.125rem; text-transform: uppercase; white-space: nowrap; color: transparent; /* 0,035 e não 0,055: em 0,055 as palavras passavam por trás do parágrafo de abertura e o texto ficava difícil de ler no celular. Decoração não pode competir com o conteúdo. */ -webkit-text-stroke: 1.2px rgba(255, 255, 255, .035); transform: rotate(-6deg); } .hero__fundo span:nth-child(1) { top: 6%; left: -2%; } .hero__fundo span:nth-child(2) { top: 32%; right: -6%; transform: rotate(5deg); } .hero__fundo span:nth-child(3) { top: 60%; left: -4%; -webkit-text-stroke-color: rgba(233,180,36,.085); } .hero__fundo span:nth-child(4) { bottom: 8%; right: -3%; transform: rotate(-4deg); } /* Tarja dourada. A inclinação de 1,4 grau é o que a impede de parecer botão. */ .tarja { display: inline-flex; align-items: center; background: var(--acento); color: var(--papel); padding: 0.5rem 1.125rem; font-family: var(--f-mono); font-size: 0.71875rem; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; transform: rotate(-1.4deg); margin-bottom: var(--s-3); } /* Caixa dourada na segunda linha da manchete. box-decoration-break faz o fundo se repetir em cada linha quando o texto quebra no celular; sem isso a caixa vira um retângulo só, atravessado, com buraco nas pontas. */ .marca-cx { background: var(--acento); color: var(--papel); padding: .01em .1em .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .assinatura { font-family: var(--f-mao); font-weight: 600; font-size: 2.125rem; line-height: 1; color: var(--acento); margin-top: var(--s-4); } @media (min-width: 60rem) { .hero { padding-block: var(--s-6) var(--s-7); } .hero__grade { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: var(--s-6); } } /* =========================================================================== 13B FAIXA ROLANTE DOURADA --------------------------------------------------------------------------- Vem da LP aprovada. Fica logo abaixo do hero e serve de divisória. Para quem pediu menos movimento no sistema, ela para. Isso não é enfeite de acessibilidade: movimento contínuo em faixa larga dispara enxaqueca e náusea em quem tem sensibilidade vestibular. =========================================================================== */ .faixa-roda { background: var(--acento); color: var(--papel); padding-block: 0.9rem; overflow: hidden; white-space: nowrap; transform: rotate(-.8deg); width: 108vw; margin-left: calc(50% - 54vw); } .faixa-roda__in { display: inline-block; animation: roda 26s linear infinite; will-change: transform; } .faixa-roda span { font-family: var(--f-titulo); font-size: 1.5rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0 1.625rem; } .faixa-roda i { font-style: normal; opacity: .5; } @keyframes roda { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .faixa-roda__in { animation: none; } } /* =========================================================================== 14 FAIXA DE PROVA --------------------------------------------------------------------------- Quatro números em Fraunces com rótulo em mono. Logo abaixo, na mesma faixa, a frase obrigatória de que nada disso é lei ainda. Admitir isso na frente é o que dá credibilidade ao resto, por isso ela não sai daqui. =========================================================================== */ .prova { background: var(--sup-faixa); padding-block: var(--s-5); } .prova__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); } @media (min-width: 48rem) { .prova__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .prova__item { border-top: 2px solid var(--acento); padding-top: var(--s-2); } /* O número de seguidores é ALCANCE, não realização legislativa. Ele entra na faixa porque o brief pede, mas com filete neutro em vez do vermelho, para o olho registrar que é de outra natureza que os três primeiros. Seguidor não é mandato e a página não pode sugerir que seja. */ .prova__item--alcance { border-top-color: var(--borda); } .prova__n { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.5rem, 8.6vw, 3.75rem); line-height: 1; letter-spacing: -0.03em; color: var(--txt); } .prova__r { margin-top: var(--s-1); } .prova__nota { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--borda); font-size: 1rem; color: var(--txt-2); max-width: 60ch; } /* =========================================================================== 15 BLOCO EM PRIMEIRA PESSOA E CREDENCIAIS =========================================================================== */ .dupla { display: grid; gap: var(--s-5); } @media (min-width: 60rem) { .dupla { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: var(--s-6); align-items: start; } .dupla--foto-esq > :first-child { order: 2; } } .credenciais { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: 0.4rem var(--s-3); } .credenciais li { font-family: var(--f-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--txt-2); } /* =========================================================================== 16 COMPROMISSOS --------------------------------------------------------------------------- Único bloco que pode usar --papel-3 como fundo, além da faixa de prova. =========================================================================== */ .compr { display: grid; gap: var(--s-4); } @media (min-width: 36rem) { .compr { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 60rem) { .compr { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); } } .compr__item { border-top: 1px solid var(--tinta); padding-top: var(--s-2); } .compr__item .num { display: block; margin-bottom: var(--s-2); } .compr__item h3 { margin-bottom: var(--s-1); } .compr__item p { font-size: 1rem; color: var(--txt-2); } /* =========================================================================== 17 CARTÃO DE PROPOSTA E FILTRO POR EIXO --------------------------------------------------------------------------- Inversão de hierarquia, e é ela que faz este bloco funcionar: o TÍTULO do cartão é o que muda na vida da pessoa. O nome jurídico da lei e o status descem para metadado em mono. Ninguém procura "Lei Alimento Garantido"; as pessoas procuram "a pensão não é paga". O filtro é botão de verdade (