/* ═══════════════════════════════════════════════════════════════════════════ TEMA CLARO — camada de migração ═══════════════════════════════════════════════════════════════════════════ O site nasceu escuro. Esta camada converte uma página para a linha clara dos criativos sem reescrever o HTML: basta a classe `tema-claro` no . Tirar a classe devolve a página ao escuro. Ela reescreve superfícies e os utilitários de texto/borda que o Tailwind já gerou para o tema escuro (`text-white/40`, `border-white/10`, `bg-depth-dark` etc.), além de devolver ao escuro as ilhas que devem continuar escuras (rodapé, seção de carreira, cards `bg-slate-900`, modal do diagnóstico). As cores foram calibradas medindo o PIXEL REAL renderizado, não deduzindo o fundo pela árvore — os dois métodos que tentei antes erraram, um por ignorar o alfa do texto e outro por fazer média das paradas do degradê. Ferramenta: grupo-desenvolve-artefatos-locais/ferramentas/auditar-contraste.js Critério: WCAG AA (4,5:1 texto normal, 3:1 texto grande), não 3:1 para tudo. Regra de ouro: branco domina, o dourado é o único acento quente, e o preto sobra para elementos de ação. Dourado de TEXTO sobre claro é #654f16; dourado de PREENCHIMENTO segue #c8a455. ═══════════════════════════════════════════════════════════════════════════ */ .tema-claro { --ink: #ffffff; --panel: #ffffff; --bone: #fbf9f4; --on-ink: #0f172a; --on-ink-mute: rgba(15,23,42,.62); --on-ink-faint: rgba(15,23,42,.42); --ink-line: rgba(15,23,42,.10); background: #ffffff; color: #0f172a; } /* ── Superfícies ── Cuidado na tradução: no tema escuro, `surface-ink` era a superfície DOMINANTE e `surface-bone` era o alívio. Traduzir ink→creme e bone→branco inverte os papéis e deixa 8 de 12 blocos no mesmo creme — a página vira uma mancha só. O correto é ink→branco (dominante) e bone→creme (alívio), preservando o ritmo que o site escuro já tinha. */ .tema-claro .surface-ink, .tema-claro .bg-depth-dark, .tema-claro .bg-rich-black { background-color: #ffffff; background-image: none; color: #0f172a; } .tema-claro .surface-bone { background-color: #fbf9f4; background-image: radial-gradient(115% 80% at 50% -8%, rgba(200,164,85,.10), transparent 62%); color: #0f172a; } /* Alívio aplicado por decisão, e não por herança da classe antiga. */ .tema-claro .bloco-alivio { background-color: #fbf9f4 !important; background-image: radial-gradient(115% 80% at 50% -8%, rgba(200,164,85,.10), transparent 62%) !important; } .tema-claro .bloco-branco { background-color: #ffffff !important; background-image: none !important; } /* A campanha abre a página. A troca é de ORDEM VISUAL, não de HTML: o

da marca continua vindo antes do

da campanha no documento, senão o primeiro título que o leitor de tela e o buscador encontram é um h2. */ #main-content { display: flex; flex-direction: column; } #campanha { order: -1; } /* Hero da marca OCULTO temporariamente (a pedido). Para trazer de volta: tire a classe `bloco-oculto` do
E devolva o

da campanha, porque enquanto o hero está fora ele é quem carrega o

da página — com os dois visíveis a página passa a ter dois h1. */ .bloco-oculto { display: none !important; } /* As costuras do tema escuro (`fade-to-dark` / `fade-to-light`) existiam para dissolver uma seção escura na clara seguinte. Com tudo claro elas não dissolvem nada: viram uma faixa cinza de 150px atravessando a página, que é o que aparecia no fim do bloco de método e no de segurança. */ .tema-claro .fade-to-light::after, .tema-claro .fade-to-dark::after { display: none !important; } /* ── Texto: os utilitários `text-white/*` viram tons sobre branco ── */ .tema-claro .text-white { color: #0f172a !important; } .tema-claro .text-white\/90, .tema-claro .text-white\/80, .tema-claro .text-white\/70 { color: rgba(15,23,42,.86) !important; } .tema-claro .text-white\/65, .tema-claro .text-white\/60, .tema-claro .text-white\/50 { color: rgba(15,23,42,.74) !important; } .tema-claro .text-white\/40, .tema-claro .text-white\/30 { color: rgba(15,23,42,.66) !important; } /* Estes são os avisos regulatórios (Lei 11.795/08, dados do catálogo). Eram os mais apagados da página, a 2,14:1 — justamente o texto que existe para proteger a empresa. Sobem para o mesmo degrau dos demais secundários. */ .tema-claro .text-white\/25, .tema-claro .text-white\/20, .tema-claro .text-white\/15 { color: rgba(15,23,42,.62) !important; } /* Dourado sobre branco precisa descer de tom para manter contraste. */ /* Dourado de TEXTO sobre claro. #8a6d22 dava 3,5:1 — passava só como texto grande e reprovava em rótulo, que é onde ele mais aparece. #6d5518 lê como o mesmo dourado e passa na AA. O dourado de PREENCHIMENTO (botão, card, pílula) segue #c8a455: ali o contraste é do texto preto sobre ele. */ .tema-claro .text-gold, .tema-claro .text-\[\#c8a455\], .tema-claro .text-\[\#a8873e\] { color: #654f16 !important; } /* ── Linhas e fundos translúcidos ── */ .tema-claro .border-white\/10, .tema-claro .border-white\/5, .tema-claro .border-white\/20 { border-color: rgba(15,23,42,.12) !important; } .tema-claro .bg-white\/10, .tema-claro .bg-white\/5 { background-color: rgba(15,23,42,.05) !important; } /* ── Cards ── */ .tema-claro .glass { background: #ffffff; backdrop-filter: none; border: 1px solid rgba(15,23,42,.10); box-shadow: 0 24px 60px -34px rgba(15,23,42,.22); } .tema-claro .gd-card-dark { background-color: #ffffff; background-image: none; box-shadow: inset 0 0 0 1px rgba(200,164,85,.28); color: #0f172a; } .tema-claro .step-number { -webkit-text-stroke: 1.5px rgba(168,138,58,.55); color: transparent; } /* ── Slider da calculadora: a trilha some no branco ── */ .tema-claro input[type="range"] { background: rgba(15,23,42,.12) !important; } /* ── Ilhas escuras dentro da página clara ── Duas famílias: a seção de carreira (âncora deliberada) e os cards de comparativo, que o site pinta com `bg-slate-900` direto no HTML. Nas duas, a camada clara precisa ser DESFEITA, senão fica texto escuro sobre fundo escuro. O seletor cobre o próprio elemento E os descendentes. Só descendente não basta: a seção de carreira carrega `bloco-escuro` e `text-white` na MESMA tag, e `.bloco-escuro .text-white` não casa com ela mesma — foi assim que o título "Alta performance tem remuneração" ficou invisível. */ .tema-claro .bloco-escuro, .tema-claro .bg-slate-900 { background-color: #0a0a0b !important; background-image: radial-gradient(115% 80% at 50% -8%, rgba(200,164,85,.12), transparent 60%) !important; color: #f6f4f0 !important; } .tema-claro .bg-slate-900 { background-color: #0f172a !important; } .tema-claro .bloco-escuro.text-white, .tema-claro .bloco-escuro .text-white, .tema-claro .bg-slate-900.text-white, .tema-claro .bg-slate-900 .text-white { color: #f6f4f0 !important; } .tema-claro .bloco-escuro .text-white\/90, .tema-claro .bloco-escuro .text-white\/80, .tema-claro .bloco-escuro .text-white\/70, .tema-claro .bloco-escuro .text-white\/65, .tema-claro .bloco-escuro .text-white\/60, .tema-claro .bg-slate-900 .text-white\/90, .tema-claro .bg-slate-900 .text-white\/80, .tema-claro .bg-slate-900 .text-white\/70, .tema-claro .bg-slate-900 .text-white\/65, .tema-claro .bg-slate-900 .text-white\/60 { color: rgba(246,244,240,.86) !important; } .tema-claro .bloco-escuro .text-white\/50, .tema-claro .bloco-escuro .text-white\/40, .tema-claro .bloco-escuro .text-white\/30, .tema-claro .bloco-escuro .text-white\/25, .tema-claro .bloco-escuro .text-white\/20, .tema-claro .bloco-escuro .text-white\/15, .tema-claro .bg-slate-900 .text-white\/50, .tema-claro .bg-slate-900 .text-white\/40, .tema-claro .bg-slate-900 .text-white\/30, .tema-claro .bg-slate-900 .text-white\/25, .tema-claro .bg-slate-900 .text-white\/20 { color: rgba(246,244,240,.74) !important; } /* Dentro das ilhas, cinzas e verdes/vermelhos voltam aos tons de fundo escuro. */ .tema-claro .bloco-escuro .text-slate-900, .tema-claro .bloco-escuro .text-slate-800, .tema-claro .bloco-escuro .text-slate-700, .tema-claro .bg-slate-900 .text-slate-900, .tema-claro .bg-slate-900 .text-slate-800, .tema-claro .bg-slate-900 .text-slate-700 { color: #f6f4f0 !important; } .tema-claro .bloco-escuro .text-slate-500, .tema-claro .bloco-escuro .text-slate-400, .tema-claro .bloco-escuro .text-slate-300, .tema-claro .bg-slate-900 .text-slate-500, .tema-claro .bg-slate-900 .text-slate-400, .tema-claro .bg-slate-900 .text-slate-300 { color: rgba(246,244,240,.92) !important; } .tema-claro .bloco-escuro .border-white\/10, .tema-claro .bloco-escuro .border-white\/5, .tema-claro .bg-slate-900 .border-white\/10, .tema-claro .bg-slate-900 .border-white\/5 { border-color: rgba(246,244,240,.14) !important; } .tema-claro .bloco-escuro .bg-white\/10, .tema-claro .bloco-escuro .bg-white\/5, .tema-claro .bg-slate-900 .bg-white\/10, .tema-claro .bg-slate-900 .bg-white\/5 { background-color: rgba(246,244,240,.07) !important; } .tema-claro .bloco-escuro .text-gold, .tema-claro .bloco-escuro .text-\[\#c8a455\], .tema-claro .bg-slate-900 .text-gold, .tema-claro .bg-slate-900 .text-\[\#c8a455\] { color: #c8a455 !important; } .tema-claro .bloco-escuro .glass { background: rgba(255,255,255,.04); border: 1px solid rgba(200,164,85,.16); box-shadow: none; backdrop-filter: blur(12px); } /* ── Cores que nasceram para fundo escuro e não sobrevivem no branco ── */ /* Os dois cinzas de ênfase secundária do site (slate-300 e slate-400) foram calibrados para fundo escuro. Sobre branco dão 1,5:1 e 2,5:1 — ilegíveis, abaixo do mínimo até para texto grande. Na primeira correção desci o 300 só até o tom do 400, que continuava reprovando. Ambos vão para slate-500 (4,8:1). A hierarquia entre eles não se perde: ela vem de tamanho e peso, não de dois cinzas quase idênticos. */ .tema-claro .text-slate-300, .tema-claro .text-slate-400 { color: #4a5568 !important; } .tema-claro .text-slate-500 { color: #414c5e !important; } .tema-claro .adm-item { color: #654f16 !important; } /* 2,43:1 antes */ .tema-claro .adm-item:hover { color: #0f172a !important; } /* ── Comparativo dentro da paleta ── O bloco financiamento x consórcio usava vermelho e verde de semáforo, que não existem na marca (preto, branco e dourado) e brigam com o resto da página. A troca não é só cromática, é de argumento: o financiamento fica em cinza — inerte, sem valor — e o consórcio recebe o dourado, que é o acento da marca e o único ponto quente da página. Verde e vermelho dizem "certo e errado"; cinza e dourado dizem "comum e nosso". Vermelho → cinza neutro */ .tema-claro .text-red-400, .tema-claro .text-red-500, .tema-claro .text-red-600 { color: #414c5e !important; } .tema-claro .bg-red-50 { background-color: #f1f5f9 !important; } .tema-claro .bg-red-500, .tema-claro .bg-red-400 { background-color: #94a3b8 !important; } .tema-claro .from-red-400 { --tw-gradient-from: #cbd5e1 !important; } .tema-claro .to-red-500 { --tw-gradient-to: #94a3b8 !important; } /* Verde → dourado */ .tema-claro .text-green-400, .tema-claro .text-emerald-400 { color: #654f16 !important; } .tema-claro .bg-green-400, .tema-claro .bg-emerald-400 { background-color: #c8a455 !important; } .tema-claro .bg-emerald-400\/10 { background-color: rgba(200,164,85,.14) !important; } .tema-claro .to-emerald-400 { --tw-gradient-to: #c8a455 !important; } /* Dentro das ilhas escuras o dourado precisa subir de tom para ler. */ .tema-claro .bloco-escuro .text-green-400, .tema-claro .bg-slate-900 .text-green-400, .tema-claro .bloco-escuro .text-emerald-400, .tema-claro .bg-slate-900 .text-emerald-400 { color: #dfc07a !important; } .tema-claro .bloco-escuro .text-red-400, .tema-claro .bg-slate-900 .text-red-400, .tema-claro .bloco-escuro .text-red-500, .tema-claro .bg-slate-900 .text-red-500 { color: rgba(246,244,240,.55) !important; } .tema-claro .bg-slate-900 .bg-emerald-400\/10 { background-color: rgba(223,192,122,.14) !important; } .tema-claro .bg-slate-900 .bg-emerald-400 { background-color: #dfc07a !important; } /* ── Caixa alta só onde ela é recurso tipográfico, não grito ── O site herdou uppercase + tracking largo em quase tudo: menu, botões, selos e CTAs. Somado ao peso 800, o efeito é de ordem gritada. A caixa alta fica só nos rótulos de 9px (aquele "TRANSPARÊNCIA" acima do título), onde é recurso editorial e lê como refinamento. Todo o resto volta ao texto normal — e ganha corpo, porque minúscula no mesmo tamanho parece menor que maiúscula. */ .tema-claro .uppercase { text-transform: none; letter-spacing: .005em; } /* Só quem JÁ era caixa alta e tem 9px continua — a segunda metade da regra antes pegava todo texto de 9px e transformava legenda de simulação e "R$ 4.992/mês" em maiúscula, que ninguém pediu. */ .tema-claro .text-\[9px\].uppercase { text-transform: uppercase; letter-spacing: .3em; } /* A marca é lockup, não texto de interface: mantém a caixa alta. */ .tema-claro nav a[aria-label] span, .tema-claro footer .uppercase { text-transform: uppercase; } .tema-claro .nav-link { font-size: 12.5px; letter-spacing: .01em; font-weight: 600; } .tema-claro .btn-premium { font-size: 13px; letter-spacing: .01em; font-weight: 700; } /* O botão da