/* ============================================================= GET RIGHT · Tokens do design system (v2 · 6 out 2026) v2: MODO CLARO. Fundo branco e névoa; nada de secções escuras. O azul é para botões e detalhes, o verde para sinais pequenos. Landing page "Método GETFOUND": webdesign + marketing digital. Tudo sai do logótipo (Assets Brutos/ID VISUAL/getright.ai): · azul do "getright" #005ECF · verde da seta #05DF96 · cinza do "consulting" #A6A8AB · a seta: só retas, cortes a 45°, braço = 30% da caixa · o contraste de peso "get" leve / "right" negrito Princípio de forma: RETO. Raio zero em tudo. O único "canto" permitido é o corte a 45° da seta (ver --corte). MOBILE-FIRST: valores base são de telemóvel; só o display escala. ============================================================= */ /* ---------- 1. FONTES ----------------------------------------------- Titillium Web é a letra do logótipo (o "g" de uma só bojo, os terminais cortados a direito). Usa-se para TUDO o que se lê. JetBrains Mono só para etiquetas técnicas: números de secção, dados, "LLMO", contadores. Nunca em parágrafos. Produção: auto-alojar com @fontsource, só subconjunto latino. npm i @fontsource/titillium-web @fontsource/jetbrains-mono ------------------------------------------------------------------- */ :root { --fonte: "Titillium Web", system-ui, -apple-system, "Segoe UI", sans-serif; --fonte-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Pesos: a "regra get/right". Leve para o contexto, negrito para a palavra que importa. Exatamente como no logótipo. */ --peso-get: 300; /* "get", frase de contexto */ --peso-texto: 400; --peso-semi: 600; --peso-right: 700; /* "right", palavra-chave */ --peso-black: 900; /* v3: fora de uso. Os números usam 700. */ /* ---------- 2. COR ------------------------------------------------ */ /* AZUL RIGHT · as letras do logótipo (#005ECF = azul-600). Cor da marca. Blocos de destaque, ligações em fundo claro, fundo do CTA final. Branco sobre azul-600 = 6,0:1. Sobre tinta só em ≥ 24 px (3,2:1); texto pequeno usa azul-400. */ --azul-50: #EEF5FF; --azul-100: #DCEAFF; --azul-200: #B5D2FF; --azul-300: #82B2FF; --azul-400: #3D8BF2; --azul-500: #1673E6; --azul-600: #005ECF; --azul-700: #004BA8; --azul-800: #003A82; --azul-900: #002A5E; --azul-950: #00183A; /* VERDE SETA · a seta do logótipo (#05DF96 = verde-400). Cor de AÇÃO e de "sinal": botão principal, cursor, estado ativo, o que se mexe. Tinta sobre verde = 10,9:1. NUNCA texto verde em fundo claro (1,6:1). Aí usa verde-700. */ --verde-50: #E8FDF5; --verde-100: #C8FAE6; --verde-200: #93F3CF; --verde-300: #4FEAB4; --verde-400: #05DF96; --verde-500: #04BF81; --verde-600: #039A68; --verde-700: #037A52; --verde-800: #045F41; --verde-900: #054633; --verde-950: #022A1E; /* TINTA · preto azulado tirado do azul da marca, nunca #000. v2: é a cor do TEXTO, não de fundos. Só em peças pequenas (barra de uma janela, etiqueta) pode ser fundo. */ --tinta-950: #03080F; --tinta-900: #06101F; /* fundo base escuro */ --tinta-850: #0A1729; /* fundo de cartão sobre tinta */ --tinta-800: #0F2038; /* realce, hover */ --tinta-700: #1A2D4A; /* fios fortes */ /* NEUTROS · arrefecidos para o azul. O cinza do "consulting" (#A6A8AB) é o neutro-400. */ --neutro-50: #F7F9FC; --neutro-100: #F2F5F9; --neutro-200: #E3E8EF; --neutro-300: #C7CED9; --neutro-400: #A6A8AB; --neutro-500: #8E99AB; --neutro-600: #5B6575; --neutro-700: #3E4757; --neutro-800: #252D3A; /* ---------- 3. PAPÉIS (semânticos) ------------------------------- A página é clara. Alterna branco e névoa para dar ritmo. */ --pagina: #FFFFFF; --pagina-alt: var(--neutro-100); /* névoa, secções alternadas */ /* Marcador: barra verde por trás da palavra-chave de um título, como a seta ao lado do "right". Forma, não texto: pode ser verde. */ --marcador: rgb(5 223 150 / 0.55); /* Fundo escuro (base do site) */ --escuro-fundo: var(--tinta-900); --escuro-cartao: var(--tinta-850); --escuro-texto: #E8EDF5; /* nunca branco puro */ --escuro-suave: var(--neutro-500); /* 6,6:1 */ --escuro-fio: rgb(232 237 245 / 0.10); --escuro-fio-forte: rgb(232 237 245 / 0.22); --escuro-link: var(--azul-400); /* 5,6:1 */ /* Fundo claro (secções de leitura) */ --claro-fundo: var(--neutro-100); --claro-cartao: #FFFFFF; --claro-texto: var(--tinta-900); --claro-suave: var(--neutro-600); /* 5,4:1 */ --claro-fio: rgb(6 16 31 / 0.10); --claro-fio-forte: rgb(6 16 31 / 0.24); --claro-link: var(--azul-600); /* 5,5:1 */ --claro-sinal: var(--verde-700); /* verde legível, 4,9:1 */ /* Em claro, o botão principal é o logótipo: fundo azul, texto branco, seta verde. Verde como fundo de botão só em superfícies azuis. */ --acao: var(--azul-600); --acao-hover: var(--azul-700); --acao-texto: #FFFFFF; --acao-seta: var(--verde-400); --foco: var(--azul-600); /* ALERTA · só para erro de formulário e "0 menções". Fora disso, nunca: o sistema tem duas cores e é assim que se mantém. */ --alerta: #FF8A7D; /* sobre tinta */ --alerta-claro: #C2412F; /* sobre névoa */ /* ---------- 4. TIPOGRAFIA ---------------------------------------- */ /* Display: Titillium em caixa baixa, como o logótipo. Tracking negativo porque abre muito em tamanhos grandes. */ --t-mono: 0.75rem; /* 12 · etiquetas mono, sempre MAIÚSCULAS */ --t-xs: 0.8125rem; /* 13 */ --t-sm: 0.9375rem; /* 15 */ --t-base: 1.0625rem; /* 17 · Titillium é pequena; 17 lê como 16 */ --t-lg: 1.25rem; /* 20 */ --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --t-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); --t-3xl: clamp(2.5rem, 1.5rem + 4.6vw, 5rem); --t-mega: clamp(3.25rem, 1.2rem + 9.5vw, 10rem); /* hero, números */ --lh-texto: 1.6; --lh-titulo: 1.02; --tr-titulo: -0.035em; --tr-mono: 0.08em; /* ---------- 5. ESPAÇO (escala de 4 px) --------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; --seccao: clamp(var(--s-8), 10vw, var(--s-10)); --max-w: 1280px; --gutter: 20px; /* 20 em telemóvel, 32 a partir de 768 */ --texto-w: 62ch; /* ---------- 6. FORMA: reto, com o corte da seta ------------------ */ --raio: 0; /* em tudo. Sem exceções. */ --fio: 1px; --fio-forte: 2px; /* O corte a 45° do canto superior direito, o sentido da seta. Botões e cartões de destaque. Nunca mais que um canto. */ --corte-sm: 8px; --corte: 16px; --corte-lg: 32px; /* Proporção da seta: braço = 30% da caixa. Usar em ícones-seta. */ --seta-braco: 0.3; /* ---------- 7. PROFUNDIDADE -------------------------------------- */ /* Sombras suaves só para o que flutua (janelas do portefólio). */ --sombra-flutua: 0 1px 2px rgb(6 16 31 / 0.06), 0 16px 40px rgb(6 16 31 / 0.10); --brilho: 0 0 0 1px rgb(5 223 150 / 0.4), 0 0 32px rgb(5 223 150 / 0.18); /* Sombra dura, deslocada a 45°: a única sombra do sistema. */ --sombra-seta: 8px 8px 0 var(--tinta-900); --sombra-seta-azul: 8px 8px 0 var(--azul-600); /* ---------- 8. MOVIMENTO ----------------------------------------- */ /* Regra dos 45°: o que entra, entra na diagonal da seta (de baixo-esquerda para cima-direita). Nunca rodopia. */ --e-sai: cubic-bezier(0.16, 1, 0.3, 1); /* entrar, ease-out */ --e-entra: cubic-bezier(0.7, 0, 0.84, 0); /* sair, ease-in */ --e-seta: cubic-bezier(0.34, 1.56, 0.64, 1); /* "disparo" c/ ressalto */ --d-rapido: 160ms; --d-medio: 280ms; --d-lento: 700ms; /* só reveals de secção */ --diag: 24px; /* deslocação diagonal dos reveals */ --z-nav: 50; --z-cursor: 60; } @media (min-width: 768px) { :root { --gutter: var(--s-6); } } @media (prefers-reduced-motion: reduce) { :root { --diag: 0px; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }