/* ============================================================ BASE — a fonte única dos valores de marca POR QUE ESTE ARQUIVO EXISTE, E POR QUE ELE É PEQUENO A tarefa original era "extrair o CSS duplicado para uma folha compartilhada". Medindo antes de mover, a premissa não se sustentou: das 794 regras nas 8 páginas, apenas **7 são byte-idênticas**, somando 534 bytes de economia. O que *parece* duplicado não é — `:root` tem 7 corpos diferentes, `body` tem 6, `.card` tem 4. As páginas compartilham NOMES de classe, não regras. Extrair 534 bytes ao custo de uma requisição bloqueante em `funil.html` -- a página que o interessado abre no celular, muitas vezes em 3G -- seria um mau negócio. Mas a medição achou o defeito de verdade, que era o oposto do previsto: TRÊS valores de marca DIVERGIAM entre as páginas -- ver o histórico deste arquivo para os números daquela auditoria (--text-muted #718096 reprovava a 3,81:1). COMO ESTE ARQUIVO É USADO As três telas internas (Atendimento, Ajustes, Plataforma) carregam este arquivo: elas já buscam cinco scripts, então uma folha a mais não muda nada. As páginas públicas -- funil, landing, cadastro, acompanhamento, senha -- mantêm os valores embutidos, para não pagar uma requisição bloqueante. O que impede a divergência de voltar nelas NÃO é este arquivo: é a suíte `teste_css.js`, que lê este arquivo como referência e falha se qualquer página declarar um valor diferente. A cópia embutida é segura porque é conferida. Ao mudar um valor aqui, rodar a suíte: ela dirá exatamente quais páginas ficaram para trás. ------------------------------------------------------------ REBRANDING PARA A PALETA DE UMA PROPOSTA EXTERNA (Manus), pedido explicitamente pelo dono como "identico, as cores... tudo", e por decisão dele aplicado à PLATAFORMA INTEIRA -- não só à landing, para o cliente que clica "Testar 15 dias" não ver o produto mudar de cor no meio do caminho. Os valores abaixo foram lidos por engenharia reversa da página publicada (getComputedStyle, canal a canal, com as regras oklch do Tailwind convertidas para sRGB por hand-rolled OKLab->linear->gamma, não estimados a olho): --primary exato: Tailwind blue-900, cor do

e do fundo da seção "18 áreas cobertas" no ponto mais escuro do gradiente --primary-light exato: Tailwind blue-800, o outro ponto do MESMO gradiente (a página de origem não usa um "azul profundo" separado -- o efeito escuro É esse gradiente) --accent exato: Tailwind yellow-600, fundo do botão principal e do rótulo em versalete acima do título --bg exato: o fundo de página deles DUAS CORES NÃO FORAM COPIADAS AO PÉ DA LETRA, E O MOTIVO É MENSURÁVEL, NÃO GOSTO -- a mesma régua que decidiu toda a auditoria de contraste anterior: 1. O botão principal da página de origem usa TEXTO BRANCO sobre o amarelo (`bg-yellow-600 text-white`). Comprovado ao vivo, agora: 2,94:1. Reprova o mínimo de 4,5:1 por larga margem, no CTA mais importante da página -- "Comece seu teste grátis". --accent-text usa #101828 sobre a mesma cor de fundo: 6,04:1. 2. O rótulo em versalete ("SISTEMA DE TRIAGEM") usa o mesmo amarelo como COR DE TEXTO sobre fundo claro: 2,94:1 e 2,77:1 conforme o fundo, também abaixo do mínimo. --accent-text-claro é a mesma matiz escurecida (mesmo método já usado nesta base para o ouro anterior: HSL, lightness reduzida até cruzar 4,5:1) -- 4,78:1. Ou seja: a paleta é a mesma, os DOIS lugares onde a página de origem usa essa paleta como texto pequeno sobre fundo claro/médio são os dois lugares onde ela mesma reprova WCAG AA. Copiar ao pé da letra teria importado o defeito junto com o visual. ============================================================ */ :root { /* marca -- Tailwind blue-900 / blue-800, exatos, lidos por engenharia reversa da proposta (ver nota acima) */ --primary: #173d35; --primary-light: #245c4f; /* Tailwind yellow-600, exato: fundo de botão, borda, decoração. NUNCA como texto pequeno sobre --bg ou --card -- ver --accent-text. */ --accent: #b46f45; /* Mesma matiz do --accent, escurecida até passar AA como texto: 4,78:1 sobre --bg. É o que os rótulos em versalete usam. */ --accent-text: #8b4f2d; /* Texto sobre --accent como fundo (botão dourado): 6,04:1. A página de origem usa branco ali e reprova a 2,94:1 -- ver nota acima. */ --on-accent: #101412; /* Tailwind yellow-400, exato: é o que a página de origem usa para NÚMEROS em destaque sobre --primary ou --primary-light (não o --accent yellow-600 -- esse reprova a 3,53:1 nesse mesmo lugar; yellow-400 dá 6,59:1 e 5,61:1). */ --accent-on-dark: #f0c5a5; /* superfícies -- --bg exato da proposta */ --bg: #f3f0e9; --card: #fff; --border: #dcd7ce; /* texto */ --text: #202522; /* 5,17:1 sobre --bg. O valor anterior, #718096, dava 3,81:1 e reprovava. */ --text-muted: #5e6b66; /* estados -- inalterados: o deslocamento de --bg (#f7f9fc -> #f8f8f9) é perceptualmente nulo, mas os quatro foram recalculados contra o valor novo para não deixar a afirmação "passa AA" apoiada num --bg que já não existe. success 6,34:1 · danger 5,15:1 · warning 5,09:1 · info 5,11:1 */ --success: #276749; --success-bg: #f0fff4; --danger: #c53030; --danger-bg: #fff5f5; --warning: #b24a1c; --warning-bg: #fffaf0; --info: #2b6cb0; --info-bg: #ebf8ff; --shadow: 0 12px 32px rgba(23,61,53,.08),0 2px 8px rgba(23,61,53,.06); --shadow-sm: 0 4px 14px rgba(23,61,53,.07); --surface-muted: #f8f6f1; --radius: 12px; } /* As 7 regras que eram byte-idênticas entre páginas. Ficam aqui não pela economia -- são 534 bytes -- mas para que "o mesmo nome signifique a mesma coisa" tenha um lugar onde ser verdade. */ .top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px} .stat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);text-align:left} .stat .num{font-size:1.5rem;font-weight:700;color:var(--primary)} .btn-a{background:var(--border);color:var(--text);border:none} .btn-p:hover{background:var(--primary-light)} .mini:hover{border-color:var(--primary)} .fld input:focus{outline:none;border-color:var(--primary)} /* Estrutura comum do produto autenticado. A barra e fixa no desktop para que Atendimento e Ajustes parecam partes do mesmo aplicativo, e volta a ser uma barra superior compacta no celular. */ body.app-shell{padding-left:272px!important;background:var(--bg)} body.app-shell .wrap{max-width:1500px} body.app-shell .card{border:1px solid var(--border);box-shadow:var(--shadow-sm)} body.app-shell .top h1, body.app-shell .head h1{font-family:ui-serif,Georgia,Cambria,'Times New Roman',serif; font-size:1.75rem;letter-spacing:-.025em;color:var(--primary)} body.app-shell button,body.app-shell input,body.app-shell select,body.app-shell textarea{accent-color:var(--primary)} body.app-shell :focus-visible{outline:3px solid rgba(180,111,69,.35);outline-offset:2px} @media(max-width:900px){ body.app-shell{padding:80px 14px 28px!important;min-width:0;overflow-x:hidden} body.app-shell .wrap{width:100%;min-width:0} body.app-shell .top h1,body.app-shell .head h1{font-size:1.45rem} body.app-shell button, body.app-shell a.btn, body.app-shell a.mini{min-height:44px} body.app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), body.app-shell select{min-height:44px;font-size:16px} body.app-shell textarea{font-size:16px} } @media(max-width:480px){ body.app-shell{padding:76px 10px 22px!important} body.app-shell .top,body.app-shell .head{margin-bottom:14px} body.app-shell .top h1,body.app-shell .head h1{font-size:1.32rem;line-height:1.2} body.app-shell .card{border-radius:12px} }