/* ============================================================================= TOKENS DA MARCA: A.C.E. CONSULTORIA Identidade extraída do Design System da Área de Projetos v2.1. De onde veio cada valor está em IDENTIDADE.md, na mesma pasta. Para mudar a marca, rode /design-system de novo. Não edite à mão: o comando também atualiza o IDENTIDADE.md, e editar aqui direto faz os dois arquivos discordarem. REGRA DE CONTRASTE DA MARCA: texto sobre amarelo é SEMPRE preto, e o amarelo nunca é cor de texto sobre fundo branco. COMO ESTE ARQUIVO É ORGANIZADO 1. Primitivos as cores cruas, em escala. Ninguém usa direto. 2. Semânticos o que cada cor SIGNIFICA (fundo, texto, borda, ação). É isso que você usa na página. 3. Papéis de texto tamanho e peso de cada nível de título. A vantagem de separar: trocar a cor da marca mexe em 1 linha dos primitivos, e a página inteira acompanha. ============================================================================= */ :root { /* --------------------------------------------------------------------------- 1. PRIMITIVOS Escala de 50 (mais claro) a 950 (mais escuro). O 500 é a cor "cheia" da marca, a que aparece em botão. --------------------------------------------------------------------------- */ /* Amarelo A.C.E. O 500 é o oficial (#FFCB05); o resto da escala é derivado. */ --marca-50: #fffbe6; --marca-100: #fff4bf; --marca-200: #ffec8a; --marca-300: #ffe152; --marca-400: #ffd62b; --marca-500: #ffcb05; /* cor cheia, preenchimento de botão */ --marca-600: #d9a900; --marca-700: #a67f00; --marca-800: #735800; --marca-900: #473600; --marca-950: #2a2000; /* Roxo complementar da marca. Acento pontual, nunca dominante. */ --roxo-500: #784797; /* Neutros. Servem para fundo, texto e borda. */ --neutro-0: #ffffff; --neutro-50: #f4f5f7; --neutro-100: #edeef1; --neutro-200: #e7e9ee; --neutro-300: #c9ccd3; --neutro-500: #6b6b68; --neutro-700: #3a3a38; --neutro-800: #1a1a1a; --neutro-900: #0a0a0a; /* Cores de sinal. Só para status, nunca para decorar. Não usar o amarelo da marca para status: confunde com destaque. */ --ok-500: #0f7d68; --atencao-500: #e39a00; --erro-500: #c0392b; /* --------------------------------------------------------------------------- 2. SEMÂNTICOS Use SEMPRE estes na página, nunca os primitivos acima e nunca um hex solto. Assim a página inteira muda junto quando a marca mudar. --------------------------------------------------------------------------- */ --fundo: var(--neutro-50); /* fundo da página */ --fundo-cartao: var(--neutro-0); /* fundo de cartão sobre a página */ --fundo-escuro: var(--neutro-900); /* faixas escuras, topo, rodapé */ --fundo-suave: var(--marca-50); /* destaque leve, sem virar cartão */ --texto: var(--neutro-900); /* texto principal */ --texto-suave: var(--neutro-500); /* apoio, legenda */ --texto-claro: var(--neutro-100); /* texto sobre fundo escuro */ --texto-na-acao: var(--neutro-900); /* texto dentro do botão: preto sobre amarelo */ --borda: var(--neutro-200); --borda-forte: var(--neutro-300); --acao: var(--marca-500); /* botão principal */ --acao-hover: var(--marca-400); /* o mesmo botão, com o mouse em cima */ --acao-foco: var(--roxo-500); /* anel de foco, para quem navega por teclado */ /* --------------------------------------------------------------------------- 3. FORMA E ESPAÇO --------------------------------------------------------------------------- */ /* Cantos arredondados. A marca usa 8, 12 e 18px (raio do Design System). */ --raio-sm: 8px; --raio-md: 12px; --raio-lg: 18px; --raio-pill: 999px; /* botão em formato de cápsula */ /* Espaçamento em grade de 4px. Usar só estes valores mantém o ritmo da página; números soltos (13px, 27px) são o que faz a página parecer torta. */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px; --esp-9: 96px; /* Sombras. Prefira borda a sombra: sombra pesada envelhece a página. */ --sombra-sm: 0 1px 3px rgba(0,0,0,.07); --sombra-md: 0 8px 30px rgba(18,22,33,.10); --largura-max: 1120px; /* largura do conteúdo antes de centralizar */ /* --------------------------------------------------------------------------- 4. TIPOGRAFIA --------------------------------------------------------------------------- */ /* Fontes de trabalho e web da A.C.E. (a Archia, oficial da marca, exige arquivo próprio). Títulos em Montserrat, corpo em Poppins, ambas do Google Fonts, com fallback do sistema. */ --fonte-titulo: 'Montserrat', 'Poppins', Arial, sans-serif; --fonte: 'Poppins', 'Arimo', Arial, sans-serif; --fonte-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Escala de tamanho. Cada degrau é visivelmente diferente do anterior: escala com degraus pequenos demais lê como erro, não como hierarquia. */ --texto-xs: 12px; --texto-sm: 14px; --texto-base: 16px; --texto-lg: 19px; --texto-xl: 24px; --texto-2xl: 30px; --texto-3xl: 38px; --texto-4xl: 48px; --altura-apertada: 1.15; --altura-normal: 1.6; } /* Modo escuro, quando a pessoa usa o sistema em escuro. Só os semânticos mudam: os primitivos continuam os mesmos. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { --fundo: var(--neutro-900); --fundo-cartao: var(--neutro-800); --fundo-suave: var(--neutro-800); --texto: var(--neutro-100); --texto-suave: var(--neutro-300); --borda: var(--neutro-700); --borda-forte: var(--neutro-500); --acao-foco: var(--marca-400); } } /* ============================================================================= PAPÉIS DE TEXTO Cada papel está colado no elemento HTML correspondente. Ou seja: escrever

já sai com o tamanho e o peso certos, sem você precisar saber de classe nenhuma. As classes .t-* existem só para quando você precisar do visual de um título num elemento que não é título. ============================================================================= */ body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: var(--texto-base); line-height: var(--altura-normal); -webkit-font-smoothing: antialiased; } .t-hero, h1 { font-family: var(--fonte-titulo); font-size: clamp(var(--texto-3xl), 6vw, var(--texto-4xl)); line-height: var(--altura-apertada); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 var(--esp-4); } .t-h2, h2 { font-family: var(--fonte-titulo); font-size: clamp(var(--texto-xl), 3.4vw, var(--texto-2xl)); line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; margin: 0 0 var(--esp-3); } .t-h3, h3 { font-family: var(--fonte-titulo); font-size: var(--texto-lg); line-height: 1.35; font-weight: 600; margin: 0 0 var(--esp-2); } .t-corpo, p { font-size: var(--texto-base); line-height: var(--altura-normal); margin: 0 0 var(--esp-4); max-width: 68ch; /* linha longa demais cansa de ler */ } .t-apoio { font-size: var(--texto-sm); color: var(--texto-suave); } .t-etiqueta { font-size: var(--texto-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); } .t-mono { font-family: var(--fonte-mono); font-size: 0.92em; } /* Foco visível para quem navega por teclado. Não remova: sem isso, quem não usa mouse não consegue saber onde está na página. */ :focus-visible { outline: 2px solid var(--acao-foco); outline-offset: 2px; } /* Números que sobem animados não podem "pular" de largura enquanto contam. */ [data-count] { font-variant-numeric: tabular-nums; } /* Respeita quem pediu menos movimento no sistema operacional. Não remova: para algumas pessoas, animação causa enjoo de verdade. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }