/* ============================================================================ UpToAI — SISTEMA VISUAL DA LANDING · tokens.css ---------------------------------------------------------------------------- Fundação compartilhada pelos 4 protótipos. CSS puro, zero build. Toda cor aqui foi MEDIDA (pixels da arte) ou DERIVADA por busca de contraste WCAG — nenhum hex foi escolhido "no olho". Provas em MEDICOES.md e PROVA.html. REGRA DE NOMES: nome descreve a COR (primitivo) ou o PAPEL (semântico). Nunca um nome que mente. A landing antiga tinha --navy valendo grafite e --magenta valendo dourado; isso confundiu gente e não se repete aqui. COMO USAR: nas telas, prefira SEMPRE os tokens semânticos (--papel, --tinta, --acento...). Os primitivos (--neutro-*, --ouro-*) existem para montar o semântico e para casos raros. Se você está escrevendo um hex na tela, parou de usar o sistema. ============================================================================ */ /* ---------------------------------------------------------------------------- FONTE — Nunito VARIÁVEL, servida localmente (arquivos em _sistema/fontes/). Um único arquivo cobre 400→800; não existem "5 pesos soltos" para baixar. Local e não via Google Fonts de propósito: o público lê no 4G, e uma requisição a mais em outro domínio é meio segundo de texto invisível. ---------------------------------------------------------------------------- */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; /* INTERVALO — é isso que faz a fonte variável */ font-display: swap; src: url("fontes/nunito-latin.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; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fontes/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ========================================================================== 1 · COR — PRIMITIVOS DA MARCA (medidos na arte oficial) ========================================================================== */ /* Grafite oficial. MEDIDO: 21.022 px exatos deste valor em logo/logo_Up-transp.png (68,6% dos pixels opacos). Confere com a documentação do kit. */ --marca-grafite: #2D2C2E; /* Dourado oficial (valor NOMINAL do kit). O dourado da arte é um GRADIENTE metálico medido de #92631D (sombra) a #EEE5C3 (brilho), mediana #B89252 e média #C0974C — #BE9650 não existe como pixel, mas cai dentro do gradiente e é a referência do kit. Mantido como âncora. */ --marca-ouro: #BE9650; /* Extremos REAIS do gradiente dourado, amostrados no wordmark. Use só para recriar o brilho metálico (filete, seta, realce), nunca como cor chapada. */ --marca-ouro-sombra: #92631D; --marca-ouro-brilho: #E2D18B; /* Fundo escuro do kit. MEDIDO no logo: #18161C (a doc diz #18171C — divergência de 1 no canal verde, imperceptível). EXISTE SÓ PARA DARK MODE FUTURO. ⛔ PROIBIDO como fundo de seção da landing. */ --marca-escuro: #18161C; /* ========================================================================== 2 · COR — RAMPA NEUTRA (matiz 270°, herdada do grafite) -------------------------------------------------------------------------- O grafite medido é hsl(270 2,2% 17,6%) — levemente VIOLETA. A landing antiga usava cinza AZULADO (#5B6470, matiz 213°) e bordas frias (#E5E8EC): 57° de desalinho, e é por isso que a base "destoava" da marca. Esta rampa nasce do próprio grafite. Luminância monotônica verificada degrau a degrau. ========================================================================== */ --neutro-000: #FFFFFF; /* L 1.0000 · papel principal */ --neutro-050: #F7F7F8; /* L 0.9307 · superfície levíssima (hover de linha) */ --neutro-100: #F1F0F2; /* L 0.8743 · 1,14:1 vs branco — alternância REAL */ --neutro-200: #E6E5E7; /* L 0.7863 · divisor / fundo desabilitado */ --neutro-300: #D6D4D8; /* L 0.6634 · borda decorativa forte */ --neutro-400: #B0ACB4; /* L 0.4203 · ⛔ decorativo apenas (2,23:1) */ --neutro-500: #89848E; /* L 0.2377 · borda de CONTROLE (3,65:1 / 3,21:1) */ --neutro-600: #6D6871; /* L 0.1434 · texto secundário (5,43:1 / 4,78:1) */ --neutro-700: #545157; /* L 0.0846 · texto desabilitado legível (6,21:1) */ --neutro-800: #3E3D40; /* L 0.0473 · texto forte alternativo */ --neutro-900: #2D2C2E; /* L 0.0256 · = --marca-grafite */ /* ========================================================================== 3 · COR — RAMPA DOURADA (matiz 38,5° / sat 46,5% — do #BE9650) -------------------------------------------------------------------------- Duas âncoras fixas: 500 = dourado do kit, 800 = tom seguro para LETRA. O dourado puro NUNCA vira texto: 2,74:1 no branco. Quem precisa de dourado escrito usa --ouro-800. ========================================================================== */ --ouro-050: #FAF6F0; /* 1,08:1 vs branco · fundo de selo/badge */ --ouro-100: #F1E9DA; /* 1,21:1 · fundo de bloco dourado */ --ouro-200: #E6D7BC; /* 1,42:1 · borda decorativa dourada */ --ouro-300: #D7BF93; /* 1,79:1 · filete / divisor dourado */ --ouro-400: #C9A86B; /* CTA :hover — 6,15:1 com o grafite */ --ouro-500: #BE9650; /* = --marca-ouro · CTA em repouso — 5,07:1 c/ grafite */ --ouro-600: #B98F44; /* CTA :active — 4,68:1 com o grafite */ --ouro-700: #997638; /* ícone dourado (não-texto) — 4,20:1 no branco */ --ouro-800: #7A5F2C; /* TEXTO dourado — 6,00:1 branco / 5,28:1 suave */ --ouro-900: #5D4822; /* dourado de máxima ênfase — 8,69:1 no branco */ /* ========================================================================== 4 · COR — SEMÂNTICAS DE ESTADO -------------------------------------------------------------------------- Só DUAS cores de estado, de propósito. Sucesso e erro têm luminâncias deliberadamente DIFERENTES (7,03:1 vs 4,80:1 no branco → 1,46:1 entre si), para continuarem distinguíveis por quem não separa verde de vermelho. Ainda assim: cor NUNCA sozinha — sempre com ícone e rótulo. ⛔ NÃO EXISTE cor de "aviso". Qualquer âmbar/amarelo cai a ~13° de matiz do --ouro-800 e vira sósia do dourado da marca. Para avisar, use o neutro com ícone, ou --erro se for de fato um problema. ⛔ NÃO EXISTE cor de "info". Info usa --papel-suave + --tinta + ícone. Motivo: paleta fechada — nenhum matiz órfão entra no sistema. ========================================================================== */ --verde-700: #156548; /* 7,03:1 no branco */ --verde-050: #E6F6F0; /* 1,12:1 no branco */ --vermelho-500: #D43725; /* 4,80:1 no branco — badge/borda/ícone */ --vermelho-600: #C53120; /* 5,48:1 branco / 4,90:1 no fundo do alerta */ --vermelho-050: #FBF0EE; /* 1,12:1 no branco */ /* ========================================================================== 5 · COR — CAMADA SEMÂNTICA (use ESTES nos protótipos) ========================================================================== */ /* Superfícies. A alternância entre seções é --papel ↔ --papel-suave: 1,14:1, perceptível. (A landing antiga alternava #FFF com #F7F8FA = 1,06:1, ou seja, alternava no CSS e não alternava no olho.) */ --papel: var(--neutro-000); --papel-suave: var(--neutro-100); --papel-cartao: var(--neutro-000); --papel-selo: var(--ouro-050); --papel-fundo-dark: var(--marca-escuro); /* ⛔ só dark mode futuro */ /* Texto. O sistema tem DOIS níveis de texto e ponto final. Um terceiro cinza mais claro reprovaria AA sobre o fundo suave — e o público é 40–60 anos lendo no celular. Se você sentiu falta de um "cinza clarinho", o problema é a hierarquia, não a paleta: mude tamanho ou peso, não a cor. */ --tinta: var(--neutro-900); /* 13,90:1 branco · 12,23:1 suave */ --tinta-2: var(--neutro-600); /* 5,43:1 branco · 4,78:1 suave */ --tinta-em-ouro: var(--neutro-900); /* texto sobre o CTA dourado — 5,07:1 */ --tinta-desativada: var(--neutro-700);/* sobre --neutro-200 → 6,21:1 */ /* Linhas. DOIS tokens porque são coisas diferentes: --linha = decoração (divisor, moldura de card) — sem exigência de contraste; --linha-forte = borda de CONTROLE (campo, botão de contorno, checkbox), que precisa de ≥3:1 contra o fundo. Usar --linha num input é falha de a11y. */ --linha: var(--neutro-200); /* 1,26:1 vs branco */ --linha-forte: var(--neutro-500); /* 3,65:1 branco · 3,21:1 suave */ /* Acento (o dourado, por papel) */ --acento: var(--ouro-500); /* preenchimento do CTA */ --acento-hover: var(--ouro-400); /* CTA :hover — o metal "acende" */ --acento-ativo: var(--ouro-600); /* CTA :active */ --acento-texto: var(--ouro-800); /* dourado escrito (link, número) */ --acento-icone: var(--ouro-700); /* traço/ícone dourado (≥3:1) */ --acento-fundo: var(--ouro-050); /* selo, destaque */ --acento-fundo-2: var(--ouro-100); --acento-filete: var(--ouro-300); /* divisor/filete decorativo */ /* Estado */ --sucesso: var(--verde-700); --sucesso-fundo: var(--verde-050); --erro: var(--vermelho-500); /* borda, ícone, badge, texto no branco */ --erro-texto: var(--vermelho-600); /* vermelho para TEXTO em qualquer fundo claro (branco 5,48:1 · suave · alerta 4,90:1) — auditoria v2, achado S1 */ --erro-fundo: var(--vermelho-050); /* Foco. O anel é GRAFITE, não dourado: o dourado puro dá 2,74:1 contra o branco e reprovaria o mínimo de 3:1 para indicador de foco. O dourado entra como halo externo — decorativo, quem garante a visibilidade é o grafite. */ --foco-cor: var(--neutro-900); --foco-halo: rgba(190, 150, 80, 0.45); --foco-largura: 3px; --foco-offset: 2px; /* Seleção de texto */ --selecao-fundo: var(--ouro-200); --selecao-tinta: var(--neutro-900); /* ========================================================================== 6 · TIPOGRAFIA -------------------------------------------------------------------------- Nunito, fonte VARIÁVEL: declara-se o INTERVALO de peso (400–800), não cinco arquivos soltos. A landing antiga tinha 18 tamanhos × 5 pesos = 33 combinações, com 7 degraus em razão ≤1,07 (o olho não vê diferença entre 16 e 15,2 e 14,4). Aqui são 8 degraus, razão ≥1,15 em TODOS os saltos, nos dois extremos do clamp. Piso do corpo: 17px no celular (era 15,2px) — público 40–60 anos. ========================================================================== */ --fonte: "Nunito", "Nunito Variable", system-ui, -apple-system, "Segoe UI", sans-serif; /* 3 pesos. Não crie um quarto. */ --peso-normal: 400; --peso-medio: 600; --peso-forte: 800; /* Escala fluida entre 360px e 1280px de viewport. Formato: clamp(mín, base + vw, máx) — mín/máx em px reais medidos. */ --fs-100: clamp(14px, 13.804px + 0.054vw, 14.5px); /* legenda / rótulo */ --fs-200: clamp(17px, 16.609px + 0.109vw, 18px); /* CORPO — piso 17px */ --fs-300: clamp(20px, 19.609px + 0.109vw, 21px); /* lead / subtítulo */ --fs-400: clamp(23.5px, 22.913px + 0.163vw, 25px); /* título de card */ --fs-500: clamp(27.5px, 26.522px + 0.272vw, 30px); /* h3 */ --fs-600: clamp(32px, 30.435px + 0.435vw, 36px); /* h2 */ --fs-700: clamp(37px, 34.261px + 0.761vw, 44px); /* h1 */ --fs-800: clamp(43px, 38.696px + 1.196vw, 54px); /* display / hero */ /* Altura de linha POR PAPEL: título respira pouco, corpo respira muito. Um único line-height para tudo é o erro clássico. */ --lh-display: 1.06; --lh-titulo: 1.15; --lh-subtitulo:1.30; --lh-corpo: 1.62; /* leitura longa no celular */ --lh-compacto: 1.40; /* botão, badge, rótulo */ /* Espaçamento entre letras: negativo só nos tamanhos grandes. */ --ls-display: -0.022em; --ls-titulo: -0.012em; --ls-corpo: 0; --ls-rotulo: 0.07em; /* rótulo em caixa alta */ /* Largura da coluna em ch (medida real do texto, não do container). Acima de ~75ch o olho perde a linha ao voltar. */ --medida-corpo: 62ch; --medida-lead: 46ch; --medida-titulo: 20ch; --medida-display: 16ch; /* ========================================================================== 7 · ESPAÇAMENTO — base 4px ========================================================================== */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px; --e-20: 80px; --e-24: 96px; --e-32: 128px; /* Respiro entre seções — fluido, porque 96px de respiro num celular de 360px come metade da tela. */ --secao-y: clamp(56px, 40px + 4.4vw, 96px); --secao-y-grande: clamp(72px, 50px + 6.1vw, 128px); --bloco-gap: clamp(24px, 18px + 1.7vw, 40px); /* ========================================================================== 8 · FORMA — raio, borda, sombra -------------------------------------------------------------------------- Sombras com o MATIZ DO GRAFITE (45,44,46), não preto puro: preto puro sobre fundo levemente violeta deixa a sombra "suja". Três níveis e só. ========================================================================== */ --raio-1: 6px; /* input, badge */ --raio-2: 10px; /* botão, card pequeno */ --raio-3: 16px; /* card, painel */ --raio-pill: 999px; /* selo, pílula */ --borda-fina: 1px; --borda-media: 2px; --borda-grossa: 3px; --sombra-1: 0 1px 2px rgba(45, 44, 46, 0.06), 0 1px 1px rgba(45, 44, 46, 0.04); --sombra-2: 0 2px 6px rgba(45, 44, 46, 0.07), 0 6px 16px rgba(45, 44, 46, 0.05); --sombra-3: 0 8px 24px rgba(45, 44, 46, 0.09), 0 2px 6px rgba(45, 44, 46, 0.05); /* Sombra dourada — só no CTA, e discreta. Não é glow. */ --sombra-acento: 0 4px 14px rgba(190, 150, 80, 0.28); /* ========================================================================== 9 · LAYOUT -------------------------------------------------------------------------- ⚠️ Custom property NÃO funciona dentro de @media. Os breakpoints abaixo são documentação: nas media queries escreva o número literal. 480px · celular grande 768px · tablet / 2 colunas 1024px · desktop 1280px · teto do clamp tipográfico ========================================================================== */ --container: 1120px; --container-estreito: 760px; --container-largo: 1320px; --gutter: clamp(20px, 12px + 2.2vw, 40px); --grid-gap: clamp(16px, 10px + 1.7vw, 32px); --alvo-toque: 44px; /* área mínima de clique/toque */ /* ========================================================================== 10 · MOVIMENTO -------------------------------------------------------------------------- Curto e discreto. Nada acima de 280ms — o usuário está tentando ler, não assistir. Desligado inteiro em prefers-reduced-motion (fim do arquivo). ========================================================================== */ --dur-1: 120ms; /* cor, opacidade */ --dur-2: 180ms; /* hover de botão/card */ --dur-3: 280ms; /* entrada de painel/acordeão*/ --ease-padrao: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-saida: cubic-bezier(0.2, 0.8, 0.2, 1); /* desacelera no fim */ --ease-entrada: cubic-bezier(0.4, 0.0, 1, 1); --deslocamento-hover: -2px; /* quanto o card sobe no hover */ } /* ============================================================================ REGRAS DE BASE — as únicas 4 regras não-token deste arquivo. Estão aqui porque são contrato do sistema, não estilo de tela. ============================================================================ */ /* 1) Foco de marca. A landing antiga dependia do anel padrão do navegador, que some sobre fundo claro em vários temas. Grafite garante ≥3:1 (13,90:1 no branco, 5,07:1 sobre o próprio CTA dourado); o halo dourado é a assinatura. :focus-visible = só aparece para teclado, não no clique. */ :focus-visible { outline: var(--foco-largura) solid var(--foco-cor); outline-offset: var(--foco-offset); box-shadow: 0 0 0 calc(var(--foco-largura) + var(--foco-offset) + 3px) var(--foco-halo); /* NÃO mexer em border-radius aqui: o outline já acompanha o raio do próprio elemento nos navegadores atuais. Redefinir o raio no foco deformaria a peça (um botão pílula viraria retangular só por receber o foco). */ } /* 2) Seleção de texto na cor da marca. */ ::selection { background: var(--selecao-fundo); color: var(--selecao-tinta); } /* 3) Rolagem suave só para quem não pediu para parar (o item 4 desliga). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* 4) KILL-SWITCH de movimento. Quem marcou "reduzir movimento" no sistema operacional não vê NADA se mexer — inclusive o que for adicionado depois nos protótipos. Regra propositalmente ampla. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; /* sem isto, delays de fill:both seguram o estado inicial (auditoria v2, nº 4) */ animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } :root { --dur-1: 0.01ms; --dur-2: 0.01ms; --dur-3: 0.01ms; --deslocamento-hover: 0px; } }