/* Tokens do BORDA Design. Fonte: Figma zetrJS2FsjjxgUpAw6ZumS, coleção de variáveis "BORDA · Cores" (modos Escuro e Claro) e propriedades de texto e raio do frame 123:2. Nome do token = nome da variável no Figma, trocando "/" por "-". Não crie token de cor que não exista na coleção do Figma. */ /* ------------------------------------------------------------------ Cores · modo Escuro (padrão do arquivo) ------------------------------------------------------------------ */ :root { color-scheme: dark; --fundo: #0a0708; --texto: #f7f1f4; --texto-apoio: #b9a9b1; --texto-nav: rgb(247 241 244 / 0.75); --texto-rolagem: rgb(247 241 244 / 0.85); --rotulo: #e7a9c8; --destaque: #f6b8d6; --endereco: rgb(246 184 214 / 0.7); --borda-brilho: rgb(224 82 154 / 0.7); --borda-divisoria: rgb(246 184 214 / 0.35); --luz-profunda: rgb(74 15 44 / 0.9); --luz-media: rgb(194 39 110 / 0.5); --luz-nucleo: rgb(242 154 198 / 0.35); --cta-fundo: #f7f1f4; --cta-texto: #0a0708; --nav-fundo: #000000; --superficie-vidro: rgb(255 255 255 / 0.05); --linha: rgb(247 241 244 / 0.14); --superficie-janela: rgb(10 7 8 / 0.78); --superficie-sutil: rgb(247 242 245 / 0.06); --superficie-sutil-2: rgb(247 242 245 / 0.03); --veu-bloco: rgb(10 8 8 / 0.62); --destaque-tinta: rgb(245 184 214 / 0.16); --destaque-tracejado: rgb(245 184 214 / 0.55); --cta-tinta: rgb(10 8 8 / 0.08); --superficie-janela-50: rgb(10 8 8 / 0.4); } /* ------------------------------------------------------------------ Cores · modo Claro ------------------------------------------------------------------ */ [data-tema="claro"] { color-scheme: light; --fundo: #f8f3f5; --texto: #1a1216; --texto-apoio: #5e4c56; --texto-nav: rgb(26 18 22 / 0.75); --texto-rolagem: rgb(26 18 22 / 0.85); --rotulo: #a12d63; --destaque: #b8326f; --endereco: rgb(142 42 88 / 0.85); --borda-brilho: rgb(231 141 184 / 0.45); --borda-divisoria: rgb(184 50 111 / 0.25); --luz-profunda: rgb(244 201 221 / 0.9); --luz-media: rgb(231 141 184 / 0.45); --luz-nucleo: rgb(255 255 255 / 0.7); --cta-fundo: #1a1216; --cta-texto: #f8f3f5; --nav-fundo: #ffffff; --superficie-vidro: rgb(255 255 255 / 0.6); --linha: rgb(26 18 22 / 0.14); --superficie-janela: rgb(248 243 245 / 0.82); --superficie-sutil: rgb(26 18 23 / 0.05); --superficie-sutil-2: rgb(26 18 23 / 0.03); --veu-bloco: rgb(247 242 245 / 0.55); --destaque-tinta: rgb(184 51 112 / 0.12); --destaque-tracejado: rgb(184 51 112 / 0.5); --cta-tinta: rgb(247 242 245 / 0.14); --superficie-janela-50: rgb(247 242 245 / 0.45); } /* ------------------------------------------------------------------ Tipografia e raios (iguais nos dois temas) Tamanhos em rem (base 16px) para respeitar o zoom de texto do navegador; o valor em px do Figma está ao lado. "Altura AUTO" no Figma vira "normal". Espaçamento entre letras em % no Figma vira em (−3% = −0.03em). Valores de desktop. O mobile será definido em etapa própria. ------------------------------------------------------------------ */ :root { /* Famílias */ --fonte-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fonte-serif: "Instrument Serif", Georgia, "Times New Roman", serif; --fonte-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Pesos usados no frame (Geist Regular e Medium) */ --peso-regular: 400; --peso-medio: 500; /* Tokens de papel. Cada papel tem: -- tamanho da fonte ---altura altura de linha (quando não é a herdada) ---letra espaçamento entre letras (quando não é zero) */ /* Títulos · Geist Medium */ --titulo-hero: 4.5rem; /* 72px · Abertura */ --titulo-hero-altura: 1.04; --titulo-hero-letra: -0.03em; --titulo-secao: 3.5rem; /* 56px · caps 2, 3, 5, 6, 7 e 8 */ --titulo-secao-altura: 1.06; --titulo-secao-letra: -0.02em; --titulo-quem-sou: 3.75rem; /* 60px · cap 7 */ --titulo-quem-sou-altura: 1.02; --titulo-quem-sou-letra: -0.025em; --titulo-convite: 4rem; /* 64px · cap 9 */ --titulo-convite-altura: normal; --titulo-convite-letra: -0.03em; /* Títulos · trecho em Instrument Serif Italic */ --titulo-hero-serif: 5.25rem; /* 84px · Abertura */ --titulo-hero-serif-altura: 1.04; --titulo-hero-serif-letra: -0.01em; --titulo-convite-serif: 4.625rem; /* 74px · cap 9 */ --titulo-convite-serif-altura: normal; --titulo-convite-serif-letra: -0.03em; /* Títulos de card, etapa e pergunta · Geist Medium, altura normal */ --titulo-card-destaque: 2rem; /* 32px · Site Institucional */ --titulo-card-destaque-letra: -0.015em; --titulo-card: 1.625rem; /* 26px · nomes de projeto, marca do rodapé */ --titulo-card-letra: -0.01em; --titulo-etapa: 1.5rem; /* 24px · passos e etapas */ --titulo-etapa-letra: -0.01em; --titulo-card-flutuante: 1.375rem; /* 22px · cards da virada */ --titulo-card-flutuante-letra: -0.01em; --titulo-linha-tempo: 1.25rem; /* 20px · linha do tempo do processo (cena) */ --titulo-linha-tempo-letra: -0.01em; --titulo-item: 1.1875rem; /* 19px · cards de "O que vem em todo site" (cap 4b) */ --titulo-item-letra: -0.01em; --pergunta: 1.25rem; /* 20px · perguntas do FAQ */ --pergunta-letra: -0.005em; /* Apoios · Geist Regular */ --apoio-grande: 1.1875rem; /* 19px · apoio de hero e seções */ --apoio-grande-altura: 1.5; --apoio-bio: 1.125rem; /* 18px · bio */ --apoio-bio-altura: 1.55; --apoio-resposta: 1.0625rem; /* 17px · respostas do FAQ */ --apoio-resposta-altura: 1.55; --apoio: 1rem; /* 16px · condições, texto do rodapé */ --apoio-altura: 1.5; --apoio-etapa: 0.9375rem; /* 15px · texto dos passos e etapas */ --apoio-etapa-altura: 1.45; --apoio-card: 0.875rem; /* 14px · texto dos cards */ --apoio-card-altura: 1.45; /* Navegação e botões · Geist (Regular no link, Medium no botão), altura normal */ --navegacao: 0.9375rem; /* 15px */ /* Rótulos · JetBrains Mono Regular, altura normal */ --rotulo-endereco: 0.6875rem; /* 11px · endereços, "PRINT DO SITE" */ --rotulo-rolagem: 0.6875rem; /* 11px · indicador de rolagem */ --rotulo-rolagem-letra: 0.14em; /* 14% */ --rotulo-coluna: 0.75rem; /* 12px · títulos das colunas do rodapé */ --rotulo-coluna-letra: 0.04em; /* 4% */ --rotulo-numero-etapa: 0.8125rem; /* 13px · números das etapas (cap 6) */ --rotulo-numero-passo: 0.875rem; /* 14px · números dos passos (cap 2) */ /* Logo provisório · Geist Medium (o Figma usa SemiBold; o logo final virá em SVG) */ --logo: 1.25rem; /* 20px */ --logo-letra: 0.18em; /* 18% */ /* Raios de borda */ --raio-40: 40px; --raio-36: 36px; --raio-32: 32px; /* widgets da busca (cap 2) */ --raio-28: 28px; --raio-24: 24px; /* cards de "O que vem em todo site" (cap 4b) */ --raio-20: 20px; --raio-999: 999px; } /* ------------------------------------------------------------------ Layout Margem lateral: 24px abaixo de 768px, 48px de 768px a 1199px, 120px a partir de 1200px. Com 1440px de largura máxima e 120px de margem, sobra a coluna de 1200px do Figma. ------------------------------------------------------------------ */ :root { --largura-maxima: 1440px; --margem-lateral: 24px; /* Header (Figma: "Nav / fundo" 1380 × 80, a 22px do topo e 30px das laterais) */ --header-topo: 22px; --header-altura: 80px; /* Base do header (22 + 80): onde começa a área útil da tela. Âncoras, encaixe das seções na tela (faixa C, ver encaixe.css) e cenas fixas usam este valor. */ --header-base: calc(var(--header-topo) + var(--header-altura)); /* Recuo da pílula até a borda: 1/4 da margem (30px no desktop). O conteúdo da pílula fica alinhado à margem lateral. */ --header-recuo: calc(var(--margem-lateral) / 4); /* Respiro no topo e na base das seções (Figma: 120px no desktop). Abaixo de 768px o valor é provisório até o mobile do Figma. */ --secao-respiro: 80px; } @media (min-width: 768px) { :root { --margem-lateral: 48px; --secao-respiro: 120px; } } @media (min-width: 1200px) { :root { --margem-lateral: 120px; } } /* ------------------------------------------------------------------ Movimento (regras no CLAUDE.md, "Animação") Durações e curvas de todas as animações. Só transform e opacity. ------------------------------------------------------------------ */ :root { --dur-rapida: 180ms; /* troca de estado: cor, hover */ --dur-media: 480ms; /* deslocamentos curtos */ --dur-entrada: 700ms; /* entradas de seção */ --ease-saida: cubic-bezier(0.16, 1, 0.3, 1); --ease-mola: cubic-bezier(0.34, 1.56, 0.64, 1); --atraso-sequencia: 90ms; /* entre itens de uma sequência */ }