/* ================================================================== MUUDA — camada de tokens Única fonte de cor, tipo e espaço do site: nenhum hex vive fora daqui, e tests/ux.py falha se um literal escapar. ================================================================== */ :root{ /* --- marca: valores oficiais do brandbook, não alterar --- */ --magenta:#FF02DC; --verde:#0CF25D; --laranja:#F4602C; --ciano:#81F5EE; --navy:#150358; --grafite:#333333; --creme:#FFFFDD; --areia:#F2DDCC; /* --- superfície e tinta --- Neutros tintados para o navy da marca. Os cinzas neutros anteriores reprovavam em WCAG AA sobre branco (#999 dava 2.85:1). */ --paper:#FFFEFB; --ink:var(--grafite); /* 12.63:1 — corpo */ --ink-2:#5A5A66; /* 6.80:1 — secundário */ --ink-3:#6E6E7A; /* 5.03:1 — terciário: numeração, notas */ --line:var(--grafite); /* Texto sobre fundo colorido. A regra da marca, medida: sobre cor viva o texto é navy (5.31 a 13.69:1); branco reprova em magenta (3.34) e laranja (3.20). Sobre navy/grafite, creme. */ --on-vivo:var(--navy); --on-escuro:var(--creme); /* --- degradês: recurso central da marca --- */ --grad-1:linear-gradient(135deg,var(--magenta),var(--laranja)); --grad-2:linear-gradient(135deg,var(--ciano),var(--verde)); --grad-3:linear-gradient(135deg,var(--navy),var(--magenta)); --grad-4:linear-gradient(135deg,var(--verde),var(--navy)); --grad-5:linear-gradient(135deg,var(--laranja),var(--magenta),var(--navy)); /* --- padrão único de hover: alias semântico, não cor nova. Referencia --navy/--grad-1 em vez de redeclarar o hex, então a paleta continua tendo uma única fonte de verdade (mudar --navy muda o hover em todo o site sem editar dois lugares). --- */ --color-hover:var(--navy); --gradient-primary:var(--grad-1); --transition-hover:.2s ease; /* --- tipografia: Nunito Sans oferece 200–1000; usamos cinco pesos. O contraste entre --w-air e --w-black é o efeito do "índice". --- */ --w-air:200; --w-body:400; --w-mid:600; --w-bold:800; --w-black:1000; --t-2xs:.6875rem; /* 11px */ --t-xs:.8125rem; /* 13px */ --t-sm:.9375rem; /* 15px */ --t-base:1rem; /* 16px — base do corpo */ --t-md:1.25rem; /* 20px — o logo em degradê chega a 3.18:1 sobre o papel, e só a partir de 18.66px em peso >=700 esse valor basta */ --t-quote:clamp(1.25rem,2.2vw,2.25rem); --t-quote-sm:clamp(1rem,1.1vw,1.125rem); --t-reveal:clamp(2.25rem,3.6vw,3.75rem); --t-lg:clamp(1.75rem,4.6vw,4rem); --t-xl:clamp(2.5rem,7.5vw,6.875rem); --t-display:clamp(3.25rem,10.5vw,10.5rem); /* --- espaço --- */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:clamp(2.5rem,5vw,4rem); --sp-8:clamp(3.5rem,8vw,6.5rem); --gut:1.125rem; /* gutter lateral */ /* Altura do header fixo. Alimenta o #reveal, o .sec-head sticky e o scroll-margin das âncoras; o JS remede e reescreve este token (ver main.js), porque escrito à mão ele já divergiu do header real e o header cobriu o topo do painel. */ --bar:69px; --sec-bar:56px; /* altura do .sec-head sticky */ } *{margin:0;padding:0;box-sizing:border-box} /* Anel de foco global. Nenhuma cor sozinha resolve — o site tem fundo claro, navy e cinco degradês: navy dá ≥5.31:1 contra qualquer cor viva da paleta e o halo creme separa o anel dos fundos escuros. Global de propósito: elemento interativo novo já nasce com foco visível, sem depender de alguém lembrar. */ :focus-visible{ outline:3px solid var(--navy); outline-offset:2px; box-shadow:0 0 0 6px var(--creme); } /* Skip link: fora da tela até receber foco. Primeiro alvo do Tab. */ .skip{ position:fixed;left:var(--gut);top:var(--sp-2);z-index:100; transform:translateY(-250%);transition:transform .15s ease; background:var(--navy);color:var(--on-escuro); padding:var(--sp-3) var(--sp-4);border-radius:999px; font-weight:var(--w-bold);font-size:var(--t-xs); } .skip:focus{transform:translateY(0)} /* ---------- fonte ---------- Autohospedada (AD-021, porquê no do index.html). `unicode-range` é o mesmo subset `latin` que o Google servia: cobre PT-BR e EN. */ @font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:200 1000; font-display:swap; src:url(../assets/fontes/nunito-sans-latin-var.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Fallback com métrica CASADA na da Nunito Sans, pro caso de a fonte não estar pronta no primeiro paint (preload cobre o caso normal; isto cobre rede ruim e cache frio). Números MEDIDOS no navegador, não estimados (Canvas measureText a 100px): Nunito Sans → avanço 2435.67px, ascent 101, descent 35 Arial/Liberation → avanço 2423.44px, ascent 90, descent 22 size-adjust iguala a largura (é ela que decide onde o text-wrap:balance do

quebra); ascent/descent-override igualam a caixa de linha, senão os blocos mudam de altura quando a fonte real entra. */ @font-face{ font-family:"Nunito Fallback"; src:local("Arial"),local("Helvetica"),local("Liberation Sans"); size-adjust:100.5%; ascent-override:100.5%; descent-override:34.8%; line-gap-override:0%; } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ /* "Nunito Fallback" (métrica casada, ver @font-face acima) vem primeiro na reserva; as famílias seguintes cobrem o caso de nem Arial existir. Com só "sans-serif" a troca ao carregar a fonte remontava a página inteira. */ font-family:"Nunito Sans","Nunito Fallback","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ink); background:var(--paper); font-size:var(--t-base); font-weight:var(--w-body); line-height:1.45; -webkit-font-smoothing:antialiased; /* sem isto o duplo-toque em celular custa 300ms de espera */ touch-action:manipulation; -webkit-tap-highlight-color:color-mix(in srgb,var(--magenta) 20%,transparent); } ::selection{background:var(--magenta);color:var(--on-vivo)} a{color:inherit;text-decoration:none} /* ---------- top bar ---------- */ header{ position:fixed;inset:0 0 auto 0;z-index:50; display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center; gap:var(--sp-5); padding:var(--sp-3) max(var(--gut),env(safe-area-inset-right)) var(--sp-3) max(var(--gut),env(safe-area-inset-left)); background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .logo{font-weight:var(--w-black);font-size:var(--t-md);letter-spacing:-.5px;text-transform:uppercase} .logo span{background:var(--grad-1);-webkit-background-clip:text;background-clip:text;color:transparent} nav{display:flex;justify-content:center;gap:clamp(var(--sp-3),2.2vw,var(--sp-5));font-weight:var(--w-mid);font-size:var(--t-sm)} /* O botão só existe quando há JS para operá-lo: a classe .js é posta pelo próprio script. Sem JS ele nunca aparece e a