/* Sistema visual das páginas de análise — Senado RS 2026. * * TIPOGRAFIA herdada de PAGINA-INICIAL.html (o manual do mapa), escolha de * Gabriel: Barlow / Barlow Condensed, largura 1180. Não se trocam. * * CORES oficiais da campanha desde 17/09/2026 (ordem de Gabriel: «todas as * páginas no padrão oficial»). Fonte única: scripts/eleitoral/paleta_oficial.py * (extraída do CSS de pimenta131.com.br, confirmada por pixel nos logos). O * gate_paleta.py lê os dois lados. O contrato: hex só da tabela; cinza proibido * como marca (neutro = tinta com opacidade); véu sempre preto; cor de dado é * exceção nomeada. * * Medidos sobre o papel #faf9f6 (WCAG AA texto ≥ 4,5:1): * tinta #1a130d → 17,45:1 · tinta-2 (tinta a 84%) → 4,62:1 * ação #b60510 → 6,61:1 · foco #1d5541 → 8,22:1 * O par categórico de dados foi revalidado com o vermelho-escuro no lugar do * vinho antigo: ação × série-2, ΔE medido na migração (o azul segue — é dado). */ :root { /* os dez tokens oficiais, verbatim — a tabela de paleta_oficial.CORES */ --verde: #00933a; --verde-medio: #057b41; --verde-escuro: #1d5541; --verde-ink: #07271a; --vermelho: #e30613; --vermelho-escuro: #b60510; --laranja: #f07e26; --amarelo: #ffd200; --fundo: #faf9f6; --tinta: #1a130d; /* derivados medidos — neutro é tinta com opacidade, nunca um cinza de fora */ --tinta-2: rgb(26 19 13 / 84%); --tinta-3: rgb(26 19 13 / 84%); --fundo-2: rgb(26 19 13 / 4%); --linha: rgb(26 19 13 / 16%); /* borda de COMPONENTE (campo de formulário): o teste do manual mede ≥ 3:1 — 42% media 1,64:1 e reprovava; 75% mede 3,33:1. Hairline de tabela é --linha. */ --borda: rgb(26 19 13 / 75%); --acao: #b60510; --acao-2: #95040d; --acao-clara: #f9eae8; --foco: #1d5541; --fonte: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-titulo: "Barlow Condensed", "Barlow", system-ui, sans-serif; --largura: 1180px; /* o par categórico de DADOS. Série 1 = conquista (o vermelho-escuro oficial); série 2 = conversão (azul de dados — exceção declarada do contrato) */ --serie-1: #b60510; --serie-1-clara: #f9eae8; --serie-2: #2166ac; --serie-2-clara: #e8f0f8; /* rampa sequencial (um hue, claro → escuro) — dado, não marca */ --seq-1: #deebf7; --seq-2: #9ecae1; --seq-3: #4292c6; --seq-4: #2166ac; --seq-5: #084594; /* a urna, esquemática — o papel é a tela, a moldura é tinta com opacidade */ --urna-tela: var(--fundo); --urna-borda: rgb(26 19 13 / 32%); } *, *::before, *::after { box-sizing: border-box; } /* Os pares cor×fundo abaixo trazem o valor literal ANTES do var(). Não é * redundância: o gate de artefato afere contraste dentro de uma regra e, sem um * par literal, ele SKIPa — e um SKIP não vira aprovação (ele reprova por não * conseguir medir, que é a postura certa). O literal também é fallback real em * navegador sem custom properties. Medidos sobre o papel #faf9f6: * #1a130d → 17,45:1 · tinta a 84% → 4,62:1 * #b60510 → 6,61:1 · #1d5541 → 8,22:1 (todos ≥ 4,5:1, WCAG AA texto) */ body { margin: 0; background: #faf9f6; background: var(--fundo); color: #1a130d; color: var(--tinta); font-family: var(--fonte); font-size: 17px; line-height: 1.6; -webkit-text-size-adjust: 100%; } /* ─── o hero oficial (Gabriel, 17/09/2026) ────────────────────────────────── * 18/09: o BACKGROUND saiu daqui. A receita medida (o scrim que segue o texto + * a cinta com as quatro cores puras) é gerada INLINE por pagina_indice.py a * partir de paleta_oficial.grad_marca(zona) — para o gate_efeito_hero lê-la na * página, e porque o véu chapado apagava a paleta (ΔE amarelo 33,5, medido pela * coordenadora em dois instrumentos). Aqui ficam o layout e os textos claros; * o `position: relative` é a âncora da cinta (::after). */ .hero { position: relative; color: #faf9f6; color: var(--fundo); padding-block: clamp(48px, 8vw, 88px); } .hero h1 { color: #ffffff; } .hero .sumario { color: rgb(255 255 255 / 92%); } .hero a:focus-visible, .hero button:focus-visible { outline-color: #ffd200; outline-color: var(--amarelo); } .faixa { max-width: var(--largura); margin: 0 auto; padding: 0 24px; } h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.12; margin: 0; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: 0.5rem; } h3 { font-size: 1.22rem; margin-bottom: 0.35rem; } p { max-width: 68ch; } a { color: var(--foco); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:focus-visible, button:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; } /* ─── navegação ──────────────────────────────────────────────────────────── * A barra NÃO mora mais aqui. Ela era `.barra` neste arquivo E, com outro * significado, um gráfico de distribuição na PAGINA-INICIAL — mesmo seletor, * duas funções, esperando colidir. E o CSS num arquivo que só três das sete * páginas carregam deixava as outras quatro sem navegação nenhuma. * * Fonte única: `scripts/eleitoral/navegacao.py` (classe `.nav-acervo`, * verificada livre nas sete páginas). Cada página recebe o CSS embutido em * `