/* Theme Name: Eliomar Coelho — Campanha (Divi Child) Theme URI: https://eliomarcoelho.com.br Description: Child theme do Divi 5 para o site da campanha de Eliomar Coelho (Rede Sustentabilidade 18). Tokens de marca conforme MARCAS/Manual de Identidade.pdf. NÃO alterar os hex sem passar pelo manual — ver SITE-CAMPANHA/DESIGN.md. Author: Campanha Eliomar Coelho Template: Divi Version: 0.3.0 Text Domain: eliomar-child ═══════════════════════════════════════════════════════════════════════════ REGRA DESTE ARQUIVO: o Visual Builder sempre ganha. Este CSS dá o ponto de partida da marca. Ele NÃO pode impedir ninguém de ajustar algo pela interface do Divi. Portanto: 1. ZERO `!important`. Nunca. Se precisou, o seletor está errado. 2. Estilo de base vai dentro de `:where()` — especificidade zero, então qualquer ajuste feito no Divi vence automaticamente. 3. Nada de seletor global em elemento do Divi (`.et_pb_text_inner p {...}`). Regra que vale para o site inteiro vira classe `ec-*` opt-in, aplicada de propósito em Avançado → Classes CSS. 4. As classes `ec-*` são atalhos, não amarras: se uma atrapalhar, basta removê-la do módulo. Se um ajuste na interface não estiver pegando, o culpado é este arquivo — procure aqui antes de brigar com o Divi. ═══════════════════════════════════════════════════════════════════════════ */ /* ========================================================================== 1. TOKENS — fonte da verdade: SITE-CAMPANHA/DESIGN.md Variáveis não estilizam nada sozinhas; não travam nada. ========================================================================== */ :root { /* Marca — Rede Sustentabilidade (manual oficial) */ --verde: #3CA08C; --azul: #32B4C3; --amarelo-citrico: #C8C332; --amarelo-quente: #FFC323; --laranja-claro: #D79100; --laranja-logo: #F05A23; --cinza-claro: #9B9B9B; --cinza-logo: #464646; /* Tons derivados — mesma matiz das cores oficiais, outra luminosidade. Não são cor nova. Ver DESIGN.md seção 1. */ --verde-profundo: #143630; /* --verde com L 43%→15%, matiz H=168°. 13,1:1 c/ branco */ --areia: #FFFBF2; /* --amarelo-quente a 6% sobre branco. 9,2:1 c/ cinza-logo */ --areia-funda: #FBF3E4; /* Fundos claros texturizados com o raio (26/08, pedido da coordenação). O par funciona como no hero: a cor do raio É a parada central do degradê, então o desenho some no centro e acende nas bordas — que é exatamente o pedido de 19/08 ("raios na esquerda, raios na direita, centro esmaecido"). Medido no render: Δ de luminância 14/255 nas pontas, 2,6/255 no centro. ⚠ --areia-quente NÃO é derivação limpa: H=34°, 8° mais laranja que --areia. Está aqui pelo mesmo motivo do azul-petróleo do hero — pedido do cliente, não escolha de projeto. Ver DESIGN.md seção 1. */ --areia-raio: #FDF1D8; /* --areia com L 97%→92%, mesma matiz (H=41°) */ --areia-quente: #FEE0B8; /* borda do degradê. 10,3:1 com --verde-profundo */ /* Camadas de hover dos botões (o preenchimento que desliza). Mesma matiz da cor de base, só mais fundas — e escolhidas pelo contraste que precisam sustentar, não pelo tom. */ --laranja-profundo: #BA3B0D; /* --laranja-logo L 54%→39%, matiz H=16°. 5,65:1 c/ branco */ --amarelo-profundo: #F5B200; /* --amarelo-quente L 57%→48%, matiz H=44°. 5,05:1 c/ cinza-logo */ /* Símbolo da Rede usado como marca d'água em .ec-ground-fundo. Caminho RELATIVO a este arquivo: /wp-content/themes/eliomar-child/style.css → /wp-content/uploads/. Era injetado pelo functions.php porque a pasta ano/mês mudava a cada migração; depois da entrega o caminho é fixo, então mora aqui e o PHP saiu. Se um dia o CSS for movido para outro lugar (ex.: Divi → CSS Personalizado), este caminho precisa virar absoluto. */ --marca-simbolo: url("../../uploads/2026/08/logo-rede-simbolo-solido-300dpi-1024x744.png"); /* Superfícies */ --white: #FFFFFF; --borda: #E8E2D5; --borda-clara: rgba(255,255,255,.16); /* APOSENTADOS — dois brancos frios quase idênticos: a zebra existia no CSS e não chegava ao olho. Substituídos pelos chãos (.ec-ground-*). Continuam definidos só para não quebrar módulo antigo. Não usar em coisa nova. */ --bg: #FBFBF9; --bg-alt: #F1F4F2; /* Forma */ --radius: 16px; --radius-pill: 100px; --container: 1180px; /* Espaçamento — escala 8px */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 44px; --sp-6: 56px; --sp-7: 88px; /* Tipografia — DECISÃO FECHADA EM 20/08: ANTON nos títulos. O caminho até aqui, no mesmo dia, para ninguém refazer a volta: Montserrat 800 → Anton → Acumin Variable → Anton. A Acumin (letra do lettering "VOLTA ELIOMAR!", que a coordenação pediu nos áudios) chegou a entrar via kit Typekit e funcionava. Foi abandonada por um motivo de OPERAÇÃO, não de estética: o seletor de pesos do Divi é limitado, e uma fonte variável precisa de controle de eixo que o painel não oferece — o usuário ficava dependente de classe CSS para cada ajuste. ⚠ 25/08: o kit do Typekit e o filtro `et_websafe_fonts` foram REMOVIDOS do functions.php. Estava medido que o do Typekit nem chegava a sair na página e que "acumin" não aparecia em lugar nenhum do HTML — era peso morto. Se um dia a Acumin voltar a ser necessária, o histórico está no log de sessão de 20/08. ⚠ ANTON TEM UM PESO SÓ (400). Não existe negrito: o que o painel chama de "Médio", "Semi negrito" etc. faz o navegador ENGORDAR o traço sinteticamente, e isso borra. Deixe os títulos em "Regular" no painel. A troca vale SÓ para título: `--font-display` (Montserrat) continua servindo eyebrow, botão, número de card e meta de post. */ --font-titulo: 'Anton', 'Arial Narrow', system-ui, sans-serif; --font-display: 'Montserrat', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } /* ========================================================================== 2. BASE — tudo em :where(), especificidade zero. Qualquer coisa definida no Divi passa por cima sem esforço. ========================================================================== */ :where(body) { font-family: var(--font-body); color: var(--cinza-logo); background: var(--areia); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } @media (min-width: 768px) { :where(body) { font-size: 18px; } } /* Escala de títulos — o peso cai por degrau conforme desce a hierarquia. É a gradação de ritmo; ver DESIGN.md seção 2. ATENÇÃO — ÚNICA EXCEÇÃO À REGRA DO :where() NESTE ARQUIVO. O Divi define os títulos com seletor de elemento puro: h1 { font-size: 30px } ← especificidade 0,0,1 Dentro de :where() a nossa regra vale 0,0,0 e perde para essa — ou seja, a escala de DESIGN.md nunca chegaria à tela. Por isso aqui usamos seletor de elemento também: empata em especificidade e ganha por vir depois do Divi. O princípio continua valendo: ajuste feito NO MÓDULO pelo Visual Builder continua vencendo, porque o Divi o grava como .et_pb_text_0 .et_pb_text_inner h1 ← 0,2,1 que é muito mais específico que isto aqui. Ou seja: o sistema vence o padrão do tema; o ajuste pontual vence o sistema. Que é exatamente a ordem desejada. */ h1, h2, h3, h4, .et_pb_module_header { font-family: var(--font-titulo); color: var(--cinza-logo); text-wrap: balance; /* sem isto, título grande quebra com palavra órfã */ } /* ⚠ NENHUM PESO É DECLARADO AQUI — o peso dos títulos é do painel, ponto. (Limpeza pedida em 20/08: "limpe qualquer estilo que esteja forçando peso".) Duas coisas já forçaram peso neste arquivo e as duas foram removidas: `font-weight: 400`, que era piso para a Anton, e `font-variation-settings` com o eixo `wght`, que era pior — eixo VENCE `font-weight`, então o painel aceitava o valor, mostrava na interface e a tela não mudava. Se algum dia um título não obedecer ao painel, procure por `font-weight` ou `font-variation-settings` neste arquivo antes de procurar no Divi. O tracking segue em 0: a Montserrat 800 pedia negativo porque é larga; a Anton já é condensada e fecharia demais. */ /* ─── A UI DO WORDPRESS NÃO É CONTEÚDO DO SITE ─────────────────────────── O Visual Builder roda no FRONT, e o modal de mídia do WordPress é injetado no mesmo documento. Como a regra de títulos acima é um seletor de elemento puro (h1–h4, sem escopo), os

do modal — "Ações", "Solte arquivos aqui para enviar" — herdavam a fonte de título do site e apareciam em Anton. Não é bug do modal: é o preço de estilizar h1–h4 globalmente. Vale para o CSS do child E para o `heading_font` das opções do Divi, que gera um seletor igualmente global. 0,1,1 contra os 0,0,1 dos dois — vence sem !important e sem tocar em nada que seja conteúdo. NÃO usar :where() aqui: precisa da especificidade. ⚠ Não estender para #et-fb-app: lá dentro está a PRÉVIA da página, que deve continuar em Anton. Só o chrome do editor. */ .media-modal :is(h1, h2, h3, h4), .media-frame :is(h1, h2, h3, h4), #wpadminbar :is(h1, h2, h3, h4) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; text-wrap: wrap; } h1 { font-size: clamp(2.6rem, 7vw, 4.9rem); letter-spacing: 0; line-height: 1.03; } h2 { font-size: clamp(1.95rem, 4vw, 3.05rem); letter-spacing: 0; line-height: 1.1; } h3, .et_pb_module_header { font-size: clamp(1.2rem, 1.8vw, 1.4rem); letter-spacing: .004em; line-height: 1.28; } h4 { font-size: 1.02rem; letter-spacing: .004em; } /* Ritmo vertical. Medido em 17/08: o Divi zera a margem dos títulos dentro do módulo de texto, então o lede encostava no h1 — gap de 0px em TODAS as dez seções. O espaço abaixo do título é o que separa um bloco de leitura do seguinte; sem ele o texto vira um parágrafo só. */ h1 { margin-block: 0 0.28em; } h2 { margin-block: 0 0.32em; } h3 { margin-block: 0 0.45em; } h4 { margin-block: 0 0.5em; } /* Respiro quando um título vem logo depois de um parágrafo — vale para corpo de post, não para o cabeçalho de seção. O :not(:has()) não é firula: o eyebrow mora DENTRO de um

, então um `p + h2` cru casava com "eyebrow seguido de título" e empurrava o título 78px para baixo. Era o maior desalinhamento da página. */ /* Respiro quando um título vem logo depois de um parágrafo ou de uma lista. ⚠ 25/08: esta regra era `p:not(:has(.ec-eyebrow)) + h2`. A exclusão existia porque o eyebrow morava dentro de um

e não devia empurrar o título. Não há mais nenhum `.ec-eyebrow` no site, então a negação virou ruído e a forma simples seleciona o mesmo conjunto. Se um dia o eyebrow voltar, é aqui que a exclusão precisa voltar junto. */ p + h2, p + h3, ul + h2, ul + h3 { margin-top: 0.9em; } /* ========================================================================== 3. UTILITÁRIOS — opt-in, aplicados em Avançado → Classes CSS. Nenhum vale automaticamente; só onde você colocar. ========================================================================== */ /* Eyebrow — rótulo acima do título da seção. CORRIGIDO 17/08: era --verde, que dá 3,09:1 sobre chão claro. Texto pequeno exige 4,5:1 — reprovava. Agora --verde-profundo (12,7:1). O verde continua presente na bolinha, onde é forma e não texto. */ /* display:flex (nível de bloco), não inline-flex: como caixa de bloco o eyebrow sai do cálculo de linha do

que o wpautop coloca em volta, e o entrelinhamento deixa de somar espaço embaixo dele. `width: fit-content` evita que ele ocupe a linha toda. `line-height` explícito porque ele não pode herdar o do contexto. */ /* O wpautop embrulha o eyebrow num

em algumas seções e não em outras, conforme o que vem depois. Isso dava respiros diferentes de seção para seção. Basta zerar a margem do

: como o eyebrow é caixa de bloco (ver acima), não há entrelinhamento sobrando embaixo dele. O espaço passa a vir só do próprio eyebrow e fica idêntico nas dez seções. O espaço extra do

é `padding-bottom: 1em` (18px), do Divi — padding, não margin. Zerar só a margem não resolvia, e foi o que segurou esse ajuste por três tentativas. ⚠ Não zerar `line-height` aqui: o eyebrow herdaria e a altura dele desabaria para 9px (só o ponto). Tentado, medido, descartado. */ /* ─── EYEBROW EM PÍLULA (opt-in) ────────────────────────────────────────── Duas formas — sólida e de contorno — como nas peças impressas ("Ética. Atitude. Coerência."). Servem quando o eyebrow cai sobre foto ou gradiente, onde a cor do texto sozinha não garante contraste. ⚠ SÓ A SÓLIDA CORRIGE CONTRASTE. Na de contorno o texto continua sobre o fundo da seção. Medido no fundo da seção Depoimentos (#4397A2): branco dá 3,39:1 com ou sem contorno. Contorno é decoração, não conserto. ⚠ A PÍLULA TEM DOIS CONTRASTES, não um: · texto contra a pílula — 4,5:1, porque o eyebrow é texto pequeno; · pílula contra o fundo — 3:1, porque aí ela é forma. Quase todo erro aqui vem de conferir só o primeiro. Por isso cada variante já traz o par cor+texto que passa. Não misturar à mão: a combinação errada some ou reprova. */ /* A bolinha é o sinal de "isto é um eyebrow"; a pílula já cumpre esse papel. Manter as duas é dizer a mesma coisa duas vezes. */ /* ── Pílulas para CHÃO CLARO (areia, branco, creme, dourado) ──────────── */ /* ── Pílulas para CHÃO ESCURO (.ec-ground-fundo) ────────────────────────── Aqui o texto vira escuro: são cores luminosas, e branco sobre elas some. */ /* ── Pílula GRANDE — a única que aceita o laranja da marca ───────────────── `--laranja-logo` e `--verde` são as duas cores da paleta em que NENHUM texto alcança 4,5:1 (melhor caso: 3,87:1 e 4,12:1). Isso não as proíbe: acima de 18,66px em bold o texto passa a ser "grande" para a WCAG e o piso cai para 3:1 — que elas cumprem. É exatamente o que as peças impressas fazem, onde o rótulo é grande. Ou seja: laranja e verde só entram JUNTO com `.ec-pilula-lg`. Sozinhas, reprovam. */ /* Medida de linha confortável (~65 caracteres). Opt-in de propósito: como regra global, atrapalhava centralizar. */ /* Lede — parágrafo de abertura de seção */ /* Centralizar exige duas coisas: centralizar o texto E centralizar a caixa que o limita. Sem isto, uma caixa com max-width fica colada à esquerda e parece que o botão de centralizar não funcionou. */ /* ========================================================================== 3-A. CHÃOS — como as seções se dividem. Cada seção escolhe um chão; a troca de chão É a divisão. Substitui a zebra antiga, que alternava dois brancos frios indistinguíveis na tela. Aplicar em Avançado → Classes CSS da SEÇÃO. ========================================================================== */ .ec-ground-areia { background: var(--areia); } .ec-ground-branco { background: var(--white); } /* Respiro vertical da seção. O padrão do Divi é apertado demais para a escala nova — um h2 de até 3rem encostava no fim da seção anterior. O seletor precisa do `.et_pb_section` junto (0,2,0). O Divi tem TRÊS regras de padding para seção, uma delas em `@media (min-width: 1350px)`, todas com especificidade 0,1,0 e todas depois desta no documento: empatando, elas ganhariam. Era o que fazia o respiro sumir só em telas grandes — 116px viravam 54px a partir de 1350px, e em nenhuma outra largura. */ .et_pb_section.ec-ground-areia, .et_pb_section.ec-ground-branco, .et_pb_section.ec-ground-fundo { padding-block: clamp(64px, 9vw, 116px); } /* Chão escuro — só no hero e na vaquinha. No máximo dois na home: é o que segura o peso institucional; um terceiro vira decoração. */ /* O fundo em si é definido no PRÓPRIO DIVI (aplicar-chaos.php grava a cor global na seção). O Divi escreve com !important e seletor de 4 níveis, então nada aqui competiria — nem deveria. Isto é a rede de segurança: se a classe for usada sem o ajuste no Divi, ainda assim fica coerente. */ .ec-ground-fundo { background: var(--verde-profundo); } /* ⚠ 20/08: as cores de TEXTO deste chão foram rebaixadas para `:where()` (especificidade ZERO) e as de parágrafo/lede REMOVIDAS, a pedido do usuário: ele declarava branco no subtítulo pelo Visual Builder e o branco não chegava — `.ec-ground-fundo p { color: #CFE0DB }` (0,1,1) vencia. Agora qualquer cor definida no painel ganha sem disputa. NÃO devolver seletor com peso aqui. */ :where(.ec-ground-fundo) { color: #E6EFEC; } :where(.ec-ground-fundo) h1, :where(.ec-ground-fundo) h2, :where(.ec-ground-fundo) h3, :where(.ec-ground-fundo) h4, :where(.ec-ground-fundo) .et_pb_module_header { color: var(--white); } :where(.ec-ground-fundo) .ec-eyebrow { color: var(--amarelo-quente); } :where(.ec-ground-fundo) .ec-eyebrow::before { background: var(--amarelo-quente); } /* Zebra antiga — mantida só para módulo já montado com ela. Não usar em coisa nova. */ /* A costura (.ec-seam / -b / -c) foi RETIRADA em 20/08/2026 a pedido: os frisos de 5px no topo das secoes sairam do site. As classes podem sobrar em markup antigo — ficam inertes. Historico no log de sessao. */ /* ─── SÍMBOLO COMO PADRÃO DE FUNDO ─────────────────────────────────────── Só em .ec-ground-fundo. Autorizado textualmente pelo manual: "A fita de Möbius ... pode ser usada como assinatura em peças gráficas, como padrão em fundos ou tecidos". Arquivo oficial, versão de uma cor (branca). Sem recolorir, sem girar, sem distorcer — só escala e opacidade. --marca-simbolo está declarada no :root, no topo deste arquivo. */ .ec-marca-fundo { position: relative; overflow: hidden; /* sem isto o símbolo sangrando cria rolagem horizontal */ } .ec-marca-fundo::after { content: ""; position: absolute; right: -6%; bottom: -18%; width: min(58vw, 620px); aspect-ratio: 283 / 210; background: var(--marca-simbolo) no-repeat center / contain; opacity: .055; pointer-events: none; } /* Card padrão */ /* Sobre chão branco o card precisa de outra cor, senão some */ .ec-ground-branco .ec-card { background: var(--areia); } /* Acento do card — a cor identifica o item (permite dizer "o eixo azul"), não decora. Trocar --acento é a única coisa necessária. */ /* Nota: o acento laranja usa --laranja-claro, não --laranja-logo. O laranja-logo é exclusivo do CTA — repetido, perde força. */ /* CAIXA COMUM DOS CTAs. Medido em 17/08: o primário saía com 66px de altura e o secundário com 50px, lado a lado no hero. Botão vizinho com altura diferente é a coisa que mais denuncia layout desalinhado. A caixa agora é definida uma vez só; as variantes abaixo mudam apenas cor. Sem !important: mudar a cor no Divi continua funcionando. */ .et_pb_button.ec-cta-primary, .et_pb_button.ec-cta-secondary, .et_pb_button.ec-btn-claro, .et_pb_button.ec-btn-header { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: var(--btn-altura, 52px); padding: var(--btn-padding, 14px 28px); border: var(--btn-borda-largura, 2px) solid transparent; border-radius: var(--btn-raio, var(--radius-pill)); font-family: var(--btn-fonte-familia, var(--font-display)); font-weight: var(--btn-peso, 700); font-size: var(--btn-fonte, 1rem); line-height: 1.2; } /* ────────────────────────────────────────────────────────────────────────── HOVER: preenchimento que desliza da esquerda para a direita. Estrutura do pen alticreation/zBZwOP ("Pure Css Button Hover effect"): uma camada que vai de `width: 0` a `width: 100%`, ancorada à esquerda. Duas diferenças em relação ao original, ambas por causa do Divi: 1. O pen guarda a cor de base num `::after` e deixa o botão transparente. Aqui a base fica no `background-color` do próprio botão — `::after` já é a seta do Divi (desligada mais abaixo), e é no background que o Divi grava cor quando alguém mexe pelo Visual Builder. 2. `z-index: -1` na camada: dentro do contexto de empilhamento que o botão cria (`position: relative` + `z-index: 1`), um descendente posicionado com z-index negativo pinta DEPOIS do fundo do elemento e ANTES do texto. É exatamente a ordem necessária — a camada cobre o fundo sem tapar o rótulo, e ninguém precisa de wrapper extra em volta do texto. `overflow: hidden` é o que mantém a camada dentro do pill. ────────────────────────────────────────────────────────────────────────── */ .et_pb_button.ec-cta-primary, .et_pb_button.ec-cta-secondary, .et_pb_button.ec-btn-claro, .et_pb_button.ec-btn-header, .ec-btn { position: relative; overflow: hidden; z-index: 1; transition: color .3s ease, border-color .3s ease; } /* ⚠ As três primeiras declarações NÃO são decorativas — sem elas o efeito simplesmente não aparece, e sem erro nenhum. O ::before de botão já é usado pelo Divi (ícone à esquerda), que o desliga e o posiciona assim: .et_pb_button:before { display: none } .et_pb_button:after, .et_pb_button:before { opacity: 0; top: 50%; transform: translateY(-50%); content: "5" } O seletor daqui tem duas classes e vence o do Divi, que tem uma — mas **especificidade vale por propriedade**. Como a versão anterior desta regra não declarava `display`, `opacity` nem `transform`, essas três continuavam valendo as do Divi, sem disputa: a camada existia, tinha a cor certa, chegava a `width: 100%` no hover e estava com `display: none`. Diagnóstico: `getComputedStyle(botão, '::before')` durante um hover real. */ .et_pb_button.ec-cta-primary::before, .et_pb_button.ec-cta-secondary::before, .et_pb_button.ec-btn-claro::before, .et_pb_button.ec-btn-header::before, .ec-btn::before { display: block; /* vence .et_pb_button:before{display:none} */ opacity: 1; /* vence o opacity:0 do ícone */ transform: none; /* vence o translateY(-50%) do ícone */ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: -1; transition: width .3s ease; } .et_pb_button.ec-cta-primary:hover::before, .et_pb_button.ec-cta-secondary:hover::before, .et_pb_button.ec-btn-claro:hover::before, .et_pb_button.ec-btn-header:hover::before, .ec-btn:hover::before { width: 100%; } /* A CAIXA NÃO PODE MUDAR NO HOVER. O Divi tem `.et_pb_module .et_pb_button:hover{border:2px solid transparent; padding:.3em 2em .3em .7em}` — três classes, contra as duas da caixa comum, então no hover ele reescrevia padding e borda. Medido: o botão encolhia de 209×59 para 196×52 ao passar o mouse, e a borda ia para transparente. O padding extra à direita é o espaço que o Divi reserva para a seta — que aqui está desligada. Vem junto o fundo: `.et_pb_button:hover{background-color:hsla(0,0%,100%,.2)}` e `.et_pb_bg_layout_light .et_pb_button:hover{background-color:rgba(0,0,0,.05)}` jogavam um véu por cima da cor da marca. Quem pinta o hover aqui é a camada deslizante, então o fundo tem de ficar parado. Quatro classes (a da variante repetida) para ganhar sem !important. */ .et_pb_button.et_pb_module.ec-cta-primary.ec-cta-primary:hover, .et_pb_button.et_pb_module.ec-cta-secondary.ec-cta-secondary:hover, .et_pb_button.et_pb_module.ec-btn-claro.ec-btn-claro:hover, .et_pb_button.et_pb_module.ec-btn-header.ec-btn-header:hover { padding: 14px 28px; border-width: 2px; border-style: solid; } .et_pb_button.et_pb_module.ec-cta-primary.ec-cta-primary:hover { background-color: var(--cta-fundo, var(--laranja-logo)); border-color: var(--cta-borda, var(--cta-hover, var(--laranja-profundo))); color: var(--cta-rotulo-hover, var(--cta-rotulo, var(--white))); } .et_pb_button.et_pb_module.ec-btn-claro.ec-btn-claro:hover { background-color: transparent; border-color: var(--white); } .et_pb_button.et_pb_module.ec-btn-header.ec-btn-header:hover { background-color: var(--amarelo-quente); border-color: var(--amarelo-profundo); } /* CORES DOS CTAs CONTROLÁVEIS PELO PAINEL (26/08). As cores leem variáveis, com o token da marca como padrão — enquanto ninguém definir as variáveis, nada muda de aparência. Não se resolveu baixando a especificidade de propósito: o rótulo usa a classe repetida para vencer o padrão do Divi (ver "COR DO RÓTULO" mais abaixo), e afrouxar isso devolveria a briga que já custou uma sessão. Variável não disputa especificidade — ela herda. Por isso funciona nos três níveis: · um botão → módulo → Avançado → CSS Personalizado → Elemento principal · uma seção → o mesmo campo, na seção · o site → Divi → Opções do tema → CSS Personalizado, dentro de :root COR do sólido: --cta-fundo, --cta-borda, --cta-hover (a camada do ::before), --cta-rotulo, --cta-rotulo-hover. COR do vazado: --btn-claro-base, --btn-claro-linha, --btn-claro-fundo, --btn-claro-rotulo-base, --btn-claro-rotulo. GEOMETRIA, vale para todas as variantes: --btn-altura, --btn-padding, --btn-borda-largura, --btn-raio, --btn-fonte, --btn-peso, --btn-fonte-familia. ⚠ --cta-borda existe separado do --cta-fundo porque o botão também precisa de 3:1 contra o FUNDO DA SEÇÃO, não só o rótulo contra o botão. Quando o preenchimento não alcança (azul-petróleo #02607A sobre o hero laranja dá 1,42:1 e some), quem cumpre a distância é o contorno. ⚠ --btn-fonte é alavanca de CONTRASTE, não de estética: em 1.2rem o rótulo passa de 18,66px bold e o piso da WCAG cai de 4,5:1 para 3:1 — a mesma brecha da .ec-pilula-lg. É o que legitima o --laranja-logo puro, hoje em 3,39:1, sem trocar a cor da marca. Combinações medidas: fundo azul-petróleo → CTA #F05A23 (como está) ou #BA3B0D (AA). Fundo laranja #C4441A → verde #9ADFD1 com rótulo #143630, ou #02607A com --cta-borda #FFFBF2. Fundo #8F3013 → idem, com folga. ⚠ O rótulo precisa de 4,5:1 sobre o fundo escolhido. Passam com rótulo BRANCO: --cinza-logo, --verde-profundo, --laranja-profundo. Com rótulo VERDE-PROFUNDO: --azul, --amarelo-citrico, --amarelo-quente, --laranja-claro, --amarelo-profundo. Não passam com nenhum: --verde e o próprio --laranja-logo (3,39:1 — é o que o CTA usa hoje, abaixo do mínimo para texto normal). */ /* CTA nível 1 — vaquinha/apoiar. UM por tela. */ .et_pb_button.ec-cta-primary { background-color: var(--cta-fundo, var(--laranja-logo)); border-color: var(--cta-borda, var(--cta-fundo, var(--laranja-logo))); color: var(--cta-rotulo, var(--white)); } .et_pb_button.ec-cta-primary::before { background-color: var(--cta-hover, var(--laranja-profundo)); } .et_pb_button.ec-cta-primary:hover { border-color: var(--cta-borda, var(--cta-hover, var(--laranja-profundo))); color: var(--cta-rotulo-hover, var(--cta-rotulo, var(--white))); } /* CTA nível 2 — voluntariado, sobre chão claro. A camada entra em cinza-logo e o rótulo vira branco: 9,43:1. */ /* CTA nível 2 sobre chão escuro — inverte: a camada é branca, o rótulo escurece para verde-profundo. 13,1:1. */ .et_pb_button.ec-btn-claro { background-color: var(--btn-claro-base, transparent); border-color: var(--btn-claro-linha, rgba(255,255,255,.45)); color: var(--btn-claro-rotulo-base, var(--white)); } .et_pb_button.ec-btn-claro::before { background-color: var(--btn-claro-fundo, var(--white)); } .et_pb_button.ec-btn-claro:hover { border-color: var(--btn-claro-fundo, var(--white)); color: var(--btn-claro-rotulo, var(--verde-profundo)); } /* COR DO RÓTULO — precisa de mais especificidade que o resto da variante. O Divi traz `.et_pb_bg_layout_light.et_pb_module.et_pb_button{color:#2ea3f2}`, que são TRÊS classes; as regras acima têm duas e perdiam. Resultado medido: "Quero ser voluntário" e "Doar" saíam com o azul padrão do Divi (rgb(46,163,242)) em vez da cor da marca — em chão claro, que é onde a regra `bg_layout_light` pega. Os botões em chão escuro escapavam por sorte, porque a variante `dark` do Divi já é branca. A classe repetida leva o seletor a quatro classes: ganha por especificidade, sem !important e sem depender de quem carrega por último no — que já provou não ser confiável aqui. Fundo e borda não precisam disso: o Divi não os disputa. */ .et_pb_button.et_pb_module.ec-cta-primary.ec-cta-primary { color: var(--cta-rotulo, var(--white)); } .et_pb_button.et_pb_module.ec-btn-claro.ec-btn-claro { color: var(--btn-claro-rotulo-base, var(--white)); } .et_pb_button.et_pb_module.ec-btn-claro.ec-btn-claro:hover { color: var(--btn-claro-rotulo, var(--verde-profundo)); } .et_pb_button.et_pb_module.ec-btn-header.ec-btn-header, .et_pb_button.et_pb_module.ec-btn-header.ec-btn-header:hover { color: var(--cinza-logo); } /* O Divi acrescenta uma seta em ::after no hover e reserva espaço para ela, o que faz o rótulo "pular" para a esquerda. Com flex isso desalinha o par. */ .et_pb_button.ec-cta-primary::after, .et_pb_button.ec-cta-secondary::after, .et_pb_button.ec-btn-claro::after, .et_pb_button.ec-btn-header::after { display: none; } /* Botões em HTML puro (dentro de módulo de texto) */ /* Contorno claro — botão secundário sobre chão escuro */ .ec-btn-claro { border-color: rgba(255,255,255,.45); color: var(--white); } .ec-btn-claro::before { background-color: var(--white); } .ec-btn-claro:hover { border-color: var(--white); color: var(--verde-profundo); } /* CTA persistente do header — AMARELO, não laranja. A regra é um laranja por tela; um botão que aparece em toda tela não pode gastar o laranja. cinza-logo sobre amarelo-quente = 5,88:1, passa AA. */ .et_pb_button.ec-btn-header, .ec-btn.ec-btn-header { background-color: var(--amarelo-quente); border-color: var(--amarelo-quente); color: var(--cinza-logo); } /* A camada de hover é o amarelo um degrau mais fundo, e o rótulo CONTINUA escuro. Amarelo não segura texto branco: mesmo escurecido até onde ainda parece amarelo, o branco fica em 3,86:1 e reprova. Com cinza-logo em cima de --amarelo-profundo dá 5,05:1. Era este o furo do hover anterior, que ia para --laranja-claro e caía para 3,57:1. */ .et_pb_button.ec-btn-header::before, .ec-btn.ec-btn-header::before { background-color: var(--amarelo-profundo); } .et_pb_button.ec-btn-header:hover, .ec-btn.ec-btn-header:hover { border-color: var(--amarelo-profundo); color: var(--cinza-logo); } /* Placeholder de foto do candidato — enquanto não há imagem real. NUNCA substituir por stock photo de outra pessoa. */ /* APOSENTADA — a vaquinha agora usa .ec-ground-fundo, o segundo (e último) chão escuro da home. O gradiente competia com o hero e não dava a mesma ancoragem. Mantida só para não quebrar módulo antigo. */ /* Botão flutuante de WhatsApp */ /* Embed de Google Forms — enquadra o iframe no padrão visual da página */ /* Timeline alinhada à marca */ /* ========================================================================== GRADE DE LOGOS DA CHAPA (Divi Torque) — ver montar-chapa.php Única dependência de addon do site. O plugin não entrega layout aqui: ele gera a largura de coluna para `.dtq_logo_grid_item` e imprime `.dtq-logo-grid__item` no HTML. Os seletores não casam (bug do 4.9.0), então largura, espaçamento e tamanho do logo saem daqui. Escopo em .ec-chapa-grid — nenhuma outra grade é afetada, e nada disso usa !important. ========================================================================== */ /* Grid em vez do flex do plugin: com flex era preciso calcular a largura descontando os gaps (`calc(25% - 22.5px)`), a porcentagem não resolvia contra a caixa que eu esperava e as 4 colunas estouravam o contêiner, quebrando em 3+1. O grid faz essa conta sozinho e nunca transborda. Três classes no seletor (.ec-chapa-grid.dtq_logo_grid .dtq-logo-grid) para vencer o `.dtq_logo_grid_0 .dtq-logo-grid{margin:-5px}` que o plugin gera a partir do gridGap padrão — duas classes empatariam e o CSS dele vem depois no . Mesmo raciocínio do .et_pb_section.ec-footer. */ .ec-chapa-grid.dtq_logo_grid .dtq-logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 0; align-items: center; } /* Altura fixa da célula, não do logo. As quatro marcas têm proporções bem diferentes (a do Lula é 1,8:1, a do Siri quase quadrada); com a caixa travada e object-fit, elas ficam opticamente do mesmo tamanho em vez de variar de 96px a 178px de altura lado a lado. A altura na célula também deixa o layout previsível quando a imagem ainda não carregou — o módulo do Torque imprime sem width/height. */ .ec-chapa-grid.dtq_logo_grid .dtq-logo-grid__item { display: flex; align-items: center; justify-content: center; min-height: 96px; } /* ⚠ 25/08: o wrapper de módulo do Divi (.dtq_logo_grid_item) recebe `padding: 5px` do CSS dinâmico do Torque, gerado a partir do gridGap. Isso ia e vinha conforme o `et-cache` era regravado: com ele o vão entre as marcas virava 40px em vez dos 30px do `gap`, e cada célula encolhia 10px. Zerar aqui torna a grade determinística — o vão passa a ser só o `gap` acima. */ .ec-chapa-grid.dtq_logo_grid .dtq_logo_grid_item { padding: 0; } .ec-chapa-grid.dtq_logo_grid .dtq-logo-grid__item__inner { line-height: 0; } .ec-chapa-grid.dtq_logo_grid .dtq-logo-grid__item img { width: auto; height: auto; max-width: 100%; max-height: 96px; object-fit: contain; } @media (max-width: 980px) { .ec-chapa-grid.dtq_logo_grid .dtq-logo-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== TEMPLATE DE POST (Theme Builder) — ver DESIGN.md seção 5-A ========================================================================== */ /* Vai no MÓDULO Post Title, não na seção — quem carrega a imagem destacada é o módulo (image.advanced.placement = background). Com a classe na seção, o fundo do módulo cobriria o véu. ⚠ 19/08: envolvido em `:where()` (especificidade ZERO). Estava em (0,1,0) e o `min-height: 56svh` **impedia reduzir a altura pela interface** — foi a queixa do usuário ("tento modificar a altura máxima da row/seção e ele não permite"). Um `min-height` no módulo não cede a `max-height` posto no pai: o módulo continua alto e empurra a seção. Com zero, qualquer altura definida no Visual Builder vence. Seguro conferindo a cascata na página real: o Divi só define `padding` e `background` para este módulo (`.et_pb_post_title.et_pb_featured_bg`, (0,2,0)) — nada de `min-height`, `display` ou `justify-content`. Então os valores abaixo seguem valendo como padrão, sem concorrente. ⚠ Para encurtar o hero, o ajuste tem de ser no MÓDULO Post Title (é ele que tem a altura). Limitar só a seção/row deixa o módulo transbordando. */ /* O véu NÃO é enfeite: a legibilidade do título não pode depender da foto que a campanha mandar. Sem ele, uma imagem clara engole o título branco. */ /* O conteúdo precisa ficar acima do véu. Filho direto, seja qual for a classe interna que o Divi gerar — não depende de nome de classe do builder. */ /* Categoria + data — o Divi imprime isso num

dentro do módulo */ /* Corpo do post — medida travada, alinhado no mesmo eixo do título do hero (à esquerda do container, não centralizado). */ .ec-post-corpo { max-width: 65ch; } /* Hero — foto ao lado do texto a partir de 981px */ /* Aviso de montagem — marca onde entra um módulo nativo do Divi. Não deve sobreviver à publicação. */ /* ========================================================================== HERO — COLUNAS E FOTO DO CANDIDATO (20/08) -------------------------------------------------------------------------- Em 20/08 a foto deixou de ser camada do child theme (`::after`) e virou um módulo Image montado no painel. Este bloco NÃO devolve o hero para o CSS: resolve só o que o painel não alcança. 1) LADO A LADO. A row está em `display:flex` com `flex-wrap: wrap`, e as colunas ficam com `flex-basis: auto` — ou seja, a largura vem do CONTEÚDO. Sem base, a coluna da foto tomava os 1025px inteiros e empurrava a de texto para a linha de baixo. `flex: 1 1 0` divide meio a meio (decisão de 20/08) e `min-width: 0` impede que uma palavra grande ("ELIOMAR!" mede 521px em 140px) estufe a coluna. 2) ENCOSTAR NA BASE. O que segurava a foto não era o módulo: era o `padding-block` de `.et_pb_section.ec-ground-fundo` (0,2,0; 116px em 1440). O Divi grava a coluna como `.et_pb_column_0` (0,1,0), então nenhum ajuste do painel vencia. A margem negativa anula o padding SÓ na coluna da foto — a do texto mantém o respiro. 3) AMPLIAR. O arquivo é 1684x1152, mas o candidato ocupa só x=205..1445, y=45..1152 — o resto é transparente, e era isso que fazia a foto parecer pequena. `object-fit: cover` recorta a moldura vazia sem gerar arquivo novo. ⚠ O arquivo atual (`eliomar_expandido-ALT2.png`) tem ~26% da largura em transparente à volta do candidato, e com `contain` esse vazio ocupa espaço útil: a foto renderiza menor do que a caixa permitiria. Existe uma versão aparada pronta em FOTOS-ELIOMAR/eliomar-hero-aparado.png (1252x1113, medida pelo canal alfa) — trocar o anexo no painel resolve sem tocar neste CSS. ⚠ `max-width: 100%` na imagem NÃO é decoração: sem ele a imagem pede o tamanho natural, infla a coluna e desmonta o lado a lado. Foi o que aconteceu em 20/08 quando a row passou de grid para flex. ⚠ PARA DEVOLVER A LARGURA AO PAINEL: comentar a regra `flex: 1 1 0`. Para devolver o hero inteiro: comentar o bloco todo. ========================================================================== */ /* :first-child e não uma classe porque a coluna da foto não tem classe CSS própria — se um dia ganhar uma (`ec-hero-foto`), trocar por ela, que é mais estável do que depender da ordem das colunas. */ /* ⚠ `contain`, NUNCA `cover`. Regra da campanha (20/08): a foto do candidato não pode ter corte — nem de ombro, nem de topo. `cover` preenche a caixa cortando o que sobra, e foi exatamente o que aconteceu: comeu 57px de ombro de cada lado. `contain` cabe a foto inteira dentro da caixa, sempre. Consequência a aceitar: a foto passa a ser limitada pela LARGURA da coluna, então ela só cresce se a coluna crescer (ou se o arquivo for aparado — ver a nota do enquadramento acima). */ /* CELULAR — empilha de verdade (base 100%, não `auto`), com o texto primeiro e a foto ancorada embaixo: decisão de 19/08, quem rola quer a mensagem antes do retrato. */ /* ========================================================================== HEADER E FOOTER GLOBAIS (Theme Builder) — ver montar-header-footer.php ========================================================================== */ /* Header — barra fixa translúcida por cima do conteúdo. Logo | Menu | CTAs. rgba usa os componentes de --areia (255,251,242): não dá pra fazer transparência num token var() sem color-mix, então repete o valor aqui. */ /* .et_pb_section.ec-header (duas classes) para vencer as várias .et_pb_section{padding:...} que o Divi gera por breakpoint — mesma especificidade de uma classe só empata, e pelo menos uma delas (a de min-width:1350px) carrega DEPOIS do style.css no , então "carrega por último" não é garantia. Duas classes bate qualquer uma delas sem precisar de !important. Confirmado: sem isso o rodapé saía com ~114px de padding em vez dos 56/28 pedidos. */ .et_pb_section.ec-header { position: sticky; top: 0; z-index: 999; background: rgba(255, 251, 242, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--borda); } /* (5) 22/08: o `padding: 0` saiu da regra de duas classes acima e virou padrao em :where(), para o painel poder dar padding ao header. Se o header nascer com ~114px de respiro, e o padrao do Divi voltando — definir 0 pelo painel, ou devolver o `padding: 0` para a regra acima. */ :where(.ec-header) { padding: 0; } /* `:where(.ec-header)` deixa isto em (0,1,0) — de propósito, é o ponto exato entre o padrão do Divi e a interface: vence `.et_pb_row` (0,1,0, que vem antes no ) e perde para `.et_pb_row_0_tb_header` (0,1,0, gravado pelo Visual Builder num CSS que carrega depois). Assim o padding de 14px vale como padrão e o ajuste manual passa a pegar. */ :where(.ec-header) .et_pb_row { align-items: center; padding-top: 14px; padding-bottom: 14px; } /* No desktop as três colunas param de seguir as frações do Divi e passam a se dimensionar pelo conteúdo: logo e botões ocupam o que precisam, o menu fica com a sobra. Motivo: com 4_24/12_24/8_24 a coluna do menu ficava com 478px e os 7 itens somam 582px — o menu quebrava em duas linhas (medido: 5 itens em cima, 2 embaixo). A conta não fecha nos 1012px do container: 210 de logo + 582 de menu + 270 de botões + 110 de gutter (os 5,5% do Divi, ×2) = 1172px. Reduzir o gutter para 24px, o logo para 180px e o corpo do menu para .85rem traz o total para ~975px e sobra folga. ⚠ 19/08: TODAS as regras abaixo foram rebaixadas a `:where()` (especificidade ZERO) porque travavam o Visual Builder — o usuário tentou editar o menu pela interface e nada acontecia, sem erro nenhum. Escritas como `.ec-header .et_pb_column` (0,2,0), `…:nth-child(2)` (0,2,0) e `.ec-header .et_pb_menu .et-menu > li > a` (0,3,1), elas venciam o que a interface grava: largura de coluna sai como `.et_flex_column_N_24` (0,1,0) e tipografia do menu como `.et_pb_menu_0_tb_header .et-menu > li > a` (0,2,1). Tipografia do menu e gaps foram para especificidade ZERO: viram PADRÃO em vez de trava — valem enquanto ninguém mexer, e a interface sempre vence. Seguro porque o Divi não tem padrão concorrente para nenhum dos dois (conferido lendo a cascata na página real: a regra de font-size do menu era a ÚNICA a definir a propriedade). ⚠ `width: auto` das colunas fica em (0,1,0), NÃO em zero — e isso é deliberado. Foi testado a zero e o header quebrou: sem vencer as frações do Divi (`.et_flex_column_12_24`, também (0,1,0), mas que vem antes no ), as colunas voltaram para 121/473/297px e o menu partiu em DUAS linhas. Como o Theme Builder grava largura escolhendo a MESMA classe de fração, não existe folga de especificidade entre "padrão do Divi" e "ajuste da interface" para largura de coluna: ou vence os dois, ou perde para os dois. Escolhido vencer, para o header não nascer quebrado. **Consequência: largura de coluna do header é o único ajuste que a interface não pega.** Para assumir o controle, comentar a linha do `width: auto` — e aí as frações do Theme Builder mandam (os números que fazem os 7 itens caberem estão no comentário acima). Regra do projeto: o child theme nunca trava a interface — ver DESIGN.md §8. Quem for mexer aqui: `:nth-child()` conta como classe, então `.ec-header .et_pb_column:nth-child(2)` é (0,2,0) e venceria a interface; os `flex` abaixo só ficam assim porque nem o Divi nem o builder gravam `flex` em coluna, então não travam ajuste nenhum. */ /* ========================================================================== HEADER DESTRAVADO — 2026-08-22, a pedido do usuario -------------------------------------------------------------------------- Pedido literal: "quero ter liberdade para mudar tudo, ainda que eu perca o que vc fez e tenha que fazer de novo". As regras que venciam o Visual Builder foram DESATIVADAS (comentadas, nao apagadas) para o painel mandar. Para reverter qualquer uma: descomentar o bloco correspondente. O arquivo inteiro de antes esta em _backups/style-antes-destravar-header-*.css >> LEIA ISTO se o header quebrar no celular << O bloco (2) abaixo NAO e uma preferencia minha: o Theme Builder do Divi 5 nao gera `flex-wrap: wrap` para NENHUM layout de TB (medido a 375px: nowrap, colunas espremidas lado a lado em vez de empilhar). Sem ele, o painel NAO TEM como fazer as colunas empilharem no celular — nao e questao de refazer, e limitacao do builder. Se o header ficar espremido no celular, descomentar o bloco (2) resolve e nao trava mais nada. ========================================================================== */ @media (min-width: 981px) { :where(.ec-header .et_pb_row) { column-gap: 24px; } :where(.ec-header .et_pb_menu .et-menu > li) > a { font-size: .95rem; } /* (1) DESATIVADO 22/08 — largura/flex das colunas do header agora e do painel. Ao reativar, lembrar: com as fracoes do Divi (4_24/12_24/8_24) a coluna do menu fica com 478px e os 7 itens somam 582px, entao o menu parte em duas linhas. Era isso que estas linhas evitavam. :where(.ec-header) .et_pb_column { width: auto; } :where(.ec-header) .et_pb_column:nth-child(1), :where(.ec-header) .et_pb_column:nth-child(3) { flex: 0 0 auto; } :where(.ec-header) .et_pb_column:nth-child(2) { flex: 1 1 auto; } */ } /* As colunas do header já levam flexType 24_24 em tablet/phone (mesmo padrão do hero, ver montar-hero.php) — mas isso só empilha se a ROW quebrar linha. No hero o Divi gera esse flex-wrap:wrap dinamicamente; no header do Theme Builder essa regra não apareceu no CSS gerado (conferido inspecionando getComputedStyle a 375px: nowrap, colunas espremidas lado a lado em vez de empilhar). Forçando aqui em vez de confiar no gerador dinâmico do Divi. */ /* row-gap 12px: empilhadas, as colunas herdariam os 40px de --row-gutter-vertical do Divi — 3 colunas viram 80px só de respiro, e o header sticky passava de 250px em 812px de tela. */ /* (2) DESATIVADO 22/08 — ver o aviso grande acima. ESTE e o bloco que faz as colunas empilharem no celular; o Divi nao gera `flex-wrap` para Theme Builder, entao o painel nao consegue substituir. Descomentar se quebrar. @media (max-width: 980px) { .ec-header .et_pb_row { flex-wrap: wrap; row-gap: 12px; } .ec-header-ctas { justify-content: flex-start; } } */ /* As três colunas totalmente empilhadas davam 194px de header (24% da tela) — e ele é sticky. Logo e "Doar" dividem a primeira linha; o menu, que vira toggle, fica sozinho na segunda. As larguras precisam vencer .et_flex_column_24_24_phone (uma classe), daí o seletor com duas. */ /* (3) DESATIVADO 22/08 — era isto que punha logo + "Doar" na primeira linha (62%/38%) e o menu sozinho na segunda. Tudo agora e do painel. @media (max-width: 767px) { .ec-header .et_pb_row { column-gap: 0; } .ec-header .et_pb_column.et_flex_column_24_24_phone { width: 62%; order: 1; } .ec-header .et_pb_column.ec-header-ctas.et_flex_column_24_24_phone { width: 38%; order: 2; justify-content: flex-end; } .ec-header .et_pb_column:nth-child(2).et_flex_column_24_24_phone { width: 100%; order: 3; } .ec-header-logo img { max-width: 150px; } } */ /* Marca do candidato: lockup horizontal, proporção ~5,1:1 (118,4 × 23,33 no viewBox do SVG). Bem mais achatada que o logo da Rede que estava aqui, então 210px de largura dão só ~41px de altura. */ /* (0,1,1) e não `:where()`: a zero, perdia para o `.et_pb_image img { max-width: 100% }` do Divi e o logo voltava ao tamanho cheio (medido). */ /* (4) 22/08: rebaixado a :where() — o tamanho do logo passa a ser PADRAO, e o painel vence. Antes era (0,1,1) para nao perder o `.et_pb_image img { max-width:100% }` do Divi; a zero, se o painel nao definir nada, o logo volta ao tamanho cheio. Se isso acontecer, definir a largura pelo painel. */ :where(.ec-header-logo) img { display: block; max-width: 200px; height: auto; } /* Toda .et_flex_column do Divi 5 é flex-direction:column por padrão (empilha os módulos) — sem redeclarar row aqui, os 2 botões ficariam um em cima do outro em vez de lado a lado. */ .ec-header-ctas { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; } /* O botão do header é menor que o CTA de seção. O pino de padding do hover (na seção dos botões) usa a medida do CTA grande, então aqui a medida menor precisa ser pinada também NO HOVER — com especificidade maior que a de lá, senão o botão cresce de 74×52 para 94×55 ao passar o mouse. */ .ec-header-ctas .et_pb_button.ec-btn-header, .ec-header-ctas .et_pb_button.et_pb_module.ec-btn-header.ec-btn-header:hover { padding: 10px 18px; font-size: .85rem; } /* Footer — mesmo chão escuro do hero (ec-ground-fundo já resolve título/texto em branco); aqui só o respiro e o texto de compliance menor. Duas colunas: identidade/compliance à esquerda, LGPD/copyright à direita. Em uma coluna só o rodapé passava de 400px de altura. */ .et_pb_section.ec-footer { padding: 56px 0 32px; } .ec-footer .et_pb_row { align-items: flex-start; } .ec-footer-logo img { display: block; width: 200px; height: auto; margin-bottom: 18px; } .ec-footer p { font-size: .85rem; margin: 0 0 10px; line-height: 1.55; } .ec-footer p:last-child { margin-bottom: 0; } .ec-footer-lgpd, .ec-footer-copy { color: #9FB8B1; font-size: .78rem; } /* flex-wrap pelo mesmo motivo do header: as colunas já levam flexType 24_24 em tablet/phone, mas o Theme Builder não gera o `flex-wrap: wrap` que faz a row quebrar — sem ele elas ficam lado a lado e espremem. Medido a 375px: 200px e 101px na mesma linha em vez de empilhadas. O row-gap entra junto porque o gap herdado do Divi é 40px, demais aqui. */ @media (max-width: 980px) { .ec-footer .et_pb_row { flex-wrap: wrap; row-gap: 18px; } .ec-footer .et_pb_column { width: 100%; } } /* ========================================================================== 4. RESPONSIVO — em :where(), o Divi ganha ========================================================================== */ /* Os títulos usam clamp() e já se resolvem sozinhos por viewport — as regras fixas de mobile que existiam aqui sobrescreviam o clamp e foram removidas. */ /* ========================================================================== HERO — SÓ GRADIENTE E RAIOS (reposto 20/08) -------------------------------------------------------------------------- Em 20/08 todo o CSS do hero foi removido a pedido do usuário, que passou a montar o hero à mão no Visual Builder. Depois ele pediu de volta APENAS estas duas camadas, "da forma como estava" — com os mesmos valores de antes, sem reinvenção. NÃO voltaram, e não devem voltar sem pedido: a camada da foto do candidato (`::after` com máscara), a marca, a altura de tela cheia, o tamanho/caixa-alta do título, o alinhamento da row e o comportamento mobile. Tudo isso é do painel agora. Depende da classe `ec-hero` na SEÇÃO (Avançado → Classes CSS). Sem ela, nada disto se aplica. ========================================================================== */ /* RAIOS. Entram por `screen` e NÃO por máscara: o arquivo é o sunburst sobre PRETO, e no screen o preto é neutro — os raios somam luz e o resto não altera nada. Dispensa máscara, que custaria 183 KB contra 43 KB. ⚠ `opacity: .15` — não mexer sem medir. Estava em .4 e era a causa real da queixa "a cor está clara demais", que atravessou três rodadas de ajuste no gradiente em 19/08: `screen` SOMA luz, então a camada clareava o hero inteiro. O problema nunca foi a cor de base. ⚠ A imagem é a versão SIMÉTRICA (pedido de 19/08: "raios na esquerda, raios na direita, centro esmaecido"), gerada compondo o sunburst original com uma cópia espelhada em `screen`. Receita em hero/web/LEIAME.md. `inset: -8%` mais `scale` dão a folga que o giro consome — sem ela, girar a camada descobriria os cantos da seção. */ /* Sem isto, quem pediu menos movimento continuaria com a camada deslocada caso as variáveis já tenham sido escritas pelo JS. */ /* ========================================================================== 5. ACESSIBILIDADE — foco visível e respeito a "reduzir movimento". Estes dois NÃO usam :where(): são requisito de acessibilidade, não preferência estética, e não devem ser sobrescritos por engano. ========================================================================== */ a:focus-visible, button:focus-visible, .et_pb_button:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* 2026-08-31: exceção à regra de zero !important — Divi calcula width inline via JS no dropdown mobile do módulo de Menu, ignorando itens que quebram linha (ex: "Nossa História"). width:100% sozinho não resolveu porque o containing block (.mobile_nav) é estreito (do tamanho do ícone hambúrguer), não do header inteiro — por isso trocamos para position:fixed, que ancora na viewport em vez do ancestral estreito. */ .et_pb_menu .et_mobile_menu { position: fixed !important; left: 0 !important; right: 0 !important; width: auto !important; }