/* ============================================================================ TOKENS — Mestre Gráfica Todo valor aqui foi MEDIDO no espelho pelo `ferramentas/espec.py`, no navegador, nos dois breakpoints. Nenhum foi escolhido por gosto. Regenerar a medição: python3 ferramentas/espec.py atual ============================================================================ */ :root { /* ── Cores ──────────────────────────────────────────────────────────────── As oito da paleta global do Elementor, mais as duas que a medição mostrou em uso e que não estavam declaradas como globais. */ --tinta: #1D1D1B; /* rgb(29,29,27) — 580 ocorrências, o texto */ --papel: #FFFFFF; --cinza-campo: #F4F4F4; /* ⚠️ #69727D dá 4,44:1 sobre o cinza #F4F4F4 — passa no branco e reprova no cinza por 0,06. Como ele é usado nos dois fundos, vale o pior caso. #5D656F passa nos dois. */ --cinza-texto: #5D656F; /* texto secundário — 5,37:1 no cinza, 5,9 no branco */ --laranja: #F39200; /* rgb(243,146,0) — o botão principal */ /* ⚠️ Topo do gradiente escurecido de #5B99C2 para #3D7699 — aprovado em 20/08. O parágrafo branco de 18px sobre #5B99C2 dava 3,1:1 (mínimo 4,5); sobre #3D7699 dá 4,94:1. O fim do gradiente não muda. */ --onda-topo: #3D7699; --onda-fundo: #1A4870; /* ⚠️ O rodapé sai do #1589CB para o #1A4870 — aprovado pelo Luiz em 20/08. Texto branco sobre #1589CB dá 3,84:1, abaixo do mínimo de 4,5; sobre #1A4870 dá 9,52:1. E #1A4870 já é cor da marca: é o azul dos títulos de card. O #1589CB continua no token, sem uso no rodapé. */ --azul: #1589CB; /* rgb(21,137,203) — era o rodapé até 20/08 */ --rodape-fundo: var(--azul-escuro); --azul-escuro: #1A4870; --verde: #6ABD18; --verde-escuro: #467E0E; --lima: #C6D300; --magenta: #CC3366; /* rgb(204,51,102) — só na landing eleitoral */ --destaque: #F2BE29; /* filete do item de menu da eleição */ /* WhatsApp: verde da marca com o quase-preto da própria marca. Medido: 9,38:1. Branco sobre o mesmo verde daria 1,98:1 e reprovaria. */ --zap: #25D366; --zap-tinta: #0B141A; --zap-hover: #1EBE5A; /* ── Tipografia ─────────────────────────────────────────────────────────── ⚠️ O site NÃO tem escala responsiva: cada papel mede o mesmo em 375 e em 1280. Medido em todas as 17 páginas. Não inventar clamp(). ⚠️ E são DUAS famílias com papéis distintos: Montserrat — títulos, botões, cards, formulário, navegação Roboto — só o corpo de texto rico (os

//

  • que vinham do text-editor do Elementor). 15 elementos por página de produto. Trocar por Montserrat mudaria a mancha de texto. */ --fonte-ui: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-texto: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; /* tamanho / entrelinha, por papel */ --h1: 25px; --h1-lh: 25px; --h1-peso: 600; --h2: 18px; --h2-lh: 18px; --h2-peso: 600; --h2-secao: 32px; --h2-secao-lh: 38.4px; --h2-secao-peso: 500; /* ekit-heading */ /* O h1 tinha CINCO tratamentos no site atual — 25 ou 40px, peso 500, 600 ou 700, Montserrat ou Roboto, à esquerda ou centrado, sem regra que ligasse um ao outro. Padronizado em 20/08, com aprovação do Luiz: · uma família: Montserrat (era Roboto em /breve/) · um peso: 600 (era 500 em /sobre/ e nas legais, 700 em /contatos/) · dois tamanhos, pela LARGURA e não pela página: 40/48 quando o título ocupa a página inteira 25/25 quando divide a linha com uma foto · alinhamento igual ao do bloco que ele abre — esquerda onde o texto é à esquerda, centro onde a página inteira é centrada (/breve/, /contatos/) É divergência do site atual. Para voltar atrás, é este bloco. */ --h1-pagina: 40px; --h1-pagina-lh: 48px; --h1-pagina-peso: 600; --h1-contato-peso: 600; --legal-h3: 28px; --legal-h3-lh: 33.6px; /* h2 legal = --h2-secao */ --corpo: 18px; --corpo-lh: 27px; --corpo-g: 20px; --corpo-g-lh: 30px; /* o segundo tamanho de corpo, medido */ --botao: 18px; --botao-peso: 600; /* ⚠️ O BOTÃO LARANJA TEM TEXTO ESCURO, não branco. Medido: #1D1D1B sobre #F39200 = 7,17:1. O branco que eu quase pus daria 2,35:1 e reprovaria. Aqui fidelidade e acessibilidade concordam. */ --btn-verde: #467E0E; /* o botão do formulário, texto branco: 4,94:1 */ --btn-zap: #075E54; /* o flutuante do original, texto branco: 7,67:1 */ /* Título de card tem DUAS cores, por contexto: azul-escuro nos cards do produto (#1A4870 sobre branco = 9,52:1 ✓) laranja nos cards compartilhados (#F39200 sobre branco = 2,35:1 ✗) ⚠️ O #F39200 do site atual REPROVA em contraste: 2,35:1 sobre branco e 2,14:1 sobre o cinza #F4F4F4, contra um mínimo de 3 (texto grande) e 4,5 (texto normal). O título dos cards passou para #A15E00 — ver abaixo. O laranja de marca continua aqui e continua servindo de FUNDO de botão, onde o texto escuro por cima dá 7,17:1. */ --card-icone-cor: var(--lima); /* medido: #C6D300 */ --card-icone-cor-alt: var(--laranja); /* medido: #F39200 */ --card-titulo-cor: var(--azul-escuro); /* ⚠️ TÍTULO em #A15E00, não no #F39200 do original — aprovado pelo Luiz em 20/08. Medido: #F39200 dá 2,35:1 sobre branco e 2,14:1 sobre o cinza #F4F4F4; o mínimo é 3 para texto grande e 4,5 para texto normal, então reprova nas duas réguas. #A15E00 dá 5,1:1 e 4,64:1 — passa nas duas e continua sendo laranja. O ÍCONE ao lado segue em #F39200: é decoração, tem `aria-hidden`, e o título ao lado já diz tudo. Escurecer os dois tiraria o calor da página sem ganhar legibilidade nenhuma. */ --card-titulo-cor-alt: #A15E00; --card-titulo: 18px; --card-titulo-lh: 21.6px; --card-titulo-peso: 600; --card-texto: 16px; --card-texto-lh: 24px; --rotulo: 18px; --rotulo-lh: 25px; --rotulo-peso: 600; --campo: 16px; --campo-lh: 22.4px; --campo-peso: 500; /* ── Medida ─────────────────────────────────────────────────────────────── Container medido: 1140px no desktop, 767px no ponto de virada. */ /* Card grande — a variante de /sobre/: ícone 80px laranja, título 25/30 peso 800. O card do molde produto é ícone 50px lima, título 18/21.6 peso 600 azul-escuro. Duas variantes, medidas nas duas páginas. */ --card-titulo-g: 25px; --card-titulo-g-lh: 30px; --card-titulo-g-peso: 800; --card-texto-g: 18px; --card-texto-g-lh: 27px; --card-icone-g: 54px; --env: 1140px; --env-tablet: 767px; --gutter: 20px; /* 10px no celular — ver o fim de base.css */ /* Alvo de toque. 44px é piso, não gosto: o botão de menu do site atual tinha 33px e o toque errava. */ --toque: 44px; /* ── Ritmo ─────────────────────────────────────────────────────────────── */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; /* ── Superfície ────────────────────────────────────────────────────────── Sombra com deslocamento e desfoque — halo colorido sem offset é enfeite. */ --ornamento-cor: #2575FC; /* padrão do tema, não da marca. Medido. */ --ornamento-ponto: #0C5ADB; --erro: #B3261E; /* 6,3:1 sobre branco */ /* ⚠️ O asterisco de campo obrigatório era #FF0000, medido no site atual: 3,99:1 sobre branco, abaixo do piso de 4,5:1. É o mesmo caso do botão de 40px que virou 44 — divergência de propósito, não descuido. Passa a usar o vermelho que o site já tem para erro (6,3:1): um vermelho só para 'preste atenção neste campo', em vez de dois. */ --obrigatorio: var(--erro); /* ⚠️ A nuvem do rodapé é BRANCA e tem 126px — medido nas 10 páginas do espelho onde ela ainda funciona. Nas outras 5 ela perdeu o `position:absolute` e virou um bloco preto no fluxo; ver AUDITORIA. */ --onda-cor: var(--papel); --onda-alt: 90px; /* era 126, medido; reduzido com o rodapé */ /* ⚠️ Três raios, todos medidos no CSS do site atual — e a diferença entre eles é boa parte do acabamento: foto de produto e da seção da marca ... 25px foto da galeria ....................... 21px campo de formulário ................... 10px botão ................................. 3px Eu usava 4px em tudo, que é o padrão de qualquer coisa e por isso deixa o conjunto seco. */ --raio-foto: 25px; --raio-galeria: 21px; --raio-botao: 3px; --raio: 4px; --raio-campo: 10px; /* medido nos campos do formulário */ --raio-pilula: 999px; --sombra: 0 4px 14px rgba(29, 29, 27, .12); --sombra-alta: 0 10px 28px rgba(29, 29, 27, .18); /* ── Movimento ─────────────────────────────────────────────────────────── Uma curva só. Quem precisar de outra que justifique no lugar de uso. */ --tempo: .28s; --curva: cubic-bezier(.22, .61, .36, 1); } /* O site inteiro é claro, e é assim de propósito: o desenho é do cliente e ele escolheu manter. Sem tema escuro — mas quem pede menos movimento é atendido em todo lugar que anima. */ @media (prefers-reduced-motion: reduce) { :root { --tempo: .001s; } }