/* ============================================================ IMPACTO — Design Tokens (produção) Base: colors_and_type.css exportado do Figma Revisão: ago/2026 — correções de bugs + camada de acessibilidade O QUE MUDOU EM RELAÇÃO AO ARQUIVO ORIGINAL (ver bloco NOTAS no fim): 1. @import do Inter movido para o topo (era ignorado pelo parser) 2. Caminhos das fontes corrigidos para os nomes reais dos arquivos 3. --color-gray-50 estava indefinido e quebrava --bg-muted 4. --border apontava para #262338 (quase preto) sobre fundo claro 5. Aliases semânticos separados em escopo claro e escopo escuro 6. --shadow-glow-green estava com hex divergente do --color-green Nenhum nome de token foi removido: o kit existente continua funcionando. ============================================================ */ /* ---------- 1. Fontes ---------- @import PRECISA vir antes de qualquer outra regra, exceto @charset e @layer. No arquivo original ele vinha depois dos @font-face e era descartado. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Inter-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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Inter-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; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Montserrat-Variable.woff2') format('woff2-variations'); } :root { /* ========== CORES BASE ========== */ /* Primária — Verde */ --color-green: #1AED9F; --color-green-dark: #00B970; --color-green-light: #B8F7D8; --color-green-darkmode: #6DFFD6; --color-primary: var(--color-green); /* Secundária — Roxo */ --color-purple: #8F00FF; --color-purple-dark: #5400CA; --color-purple-light: #F3E7FE; --color-purple-darkmode: #C84FFF; /* Acentos terciários */ --color-blue: #0D38C4; --color-blue-deep: #000D54; --color-violet: #4737FF; --color-sky: #20BBFC; /* Escala de cinza (100 = tinta mais escura → 600 = mais clara) */ --color-gray-100: #14142A; --color-gray-200: #262338; --color-gray-400: #4E4B66; --color-gray-500: #6E7191; --color-gray-600: #A0A3BD; /* Neutros claros */ --color-gray-50: #F7F7FB; /* [ADICIONADO] estava indefinido e quebrava --bg-muted */ --color-gray-soft: #D9DBE9; --color-gray-bg: #EFF0F6; --color-white-soft: #FCFCFC; --color-white: #FFFFFF; /* Aliases legados — mantidos para não quebrar componentes existentes */ --color-ink: var(--color-gray-100); --color-ink-deeper: var(--color-gray-200); --color-gray-300: var(--color-gray-600); --color-gray-200-legacy: #D9DBE9; /* Feedback / semântico */ --color-info: #8F00FF; --color-error: #E40173; --color-alert: #F57F17; --color-success: #76FF03; --color-error-red: #F01F26; /* ========== ALIASES SEMÂNTICOS — ESCOPO CLARO (padrão) ========== Contraste medido sobre #FFFFFF. Ver tabela em NOTAS. */ --fg: var(--color-gray-100); /* 18.05:1 AAA */ --fg-body: var(--color-gray-400); /* 8.33:1 AAA */ --fg-muted: var(--color-gray-500); /* 4.74:1 AA [CORRIGIDO — era gray-600, 2.48:1, reprovado] */ --fg-subtle: var(--color-gray-500); /* 4.74:1 AA [CORRIGIDO — mesma razão] */ --fg-decorative: var(--color-gray-600); /* 2.48:1 NÃO usar em texto: só ícone, divisória, placeholder */ --fg-link: var(--color-purple); /* 5.81:1 AA — o verde reprova em fundo claro */ --fg-on-dark: var(--color-white-soft); --fg-on-primary: var(--color-gray-200); /* tinta sobre preenchimento verde */ --fg-on-green: var(--color-gray-200); --bg: var(--color-white); --bg-elevated: var(--color-white-soft); --bg-muted: var(--color-gray-50); --bg-panel: var(--color-gray-bg); --bg-surface: var(--color-gray-100); /* superfície ESCURA — nome herdado do Figma */ --bg-dark: var(--color-ink); --bg-dark-2: var(--color-ink-deeper); --border: var(--color-gray-soft); /* [CORRIGIDO — era #262338, quase preto sobre branco] */ --border-strong: var(--color-gray-600); --border-dark: var(--color-gray-200); /* a borda pesada original, quando intencional */ --border-dashed-spec: #9747FF; --accent: var(--color-green); --accent-hover: var(--color-green-dark); /* ========== RAIOS ========== */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 40px; --radius-pill: 9999px; /* ========== ESPAÇAMENTO ========== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 80px; --space-10: 120px; --space-11: 160px; /* ========== BREAKPOINTS ========== */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; /* ========== SOMBRAS ========== */ --shadow-1: 0 2px 4px rgba(20,20,43,0.06); --shadow-2: 0 8px 20px rgba(20,20,43,0.08); --shadow-3: 0 16px 40px rgba(20,20,43,0.12); --shadow-glow-green: 0 8px 24px rgba(26,237,159,0.35); /* [CORRIGIDO — alinhado a #1AED9F] */ /* ========== TIPOGRAFIA ========== */ --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --tracking-display: 1px; --tracking-body: 1px; --tracking-small: 0.25px; --tracking-mid: 0.75px; --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.5; --leading-loose: 1.75; /* ========== MOVIMENTO ========== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; /* hover, foco, micro-estados */ --dur-base: 320ms; /* revelação de elemento */ --dur-slow: 600ms; /* sequências, traço, grifo */ --stagger: 80ms; /* intervalo entre itens de lista */ --rise-card: 16px; /* deslocamento de entrada — card */ --rise-block: 24px; /* deslocamento de entrada — bloco */ } /* ========== ESCOPO ESCURO ========== Aplicar em
ou [data-theme="dark"]. Aqui o verde passa a ser legível (11.74:1) e vira a cor de destaque de texto. */ .on-dark, [data-theme="dark"] { --fg: var(--color-white-soft); /* 17.60:1 */ --fg-body: #D9DBE9; --fg-muted: var(--color-gray-600); /* 7.28:1 AA — aqui o gray-600 funciona */ --fg-subtle: var(--color-gray-600); --fg-decorative: var(--color-gray-500); --fg-link: var(--color-green); /* 11.74:1 — no escuro o verde é seguro em texto */ --bg: var(--color-gray-100); --bg-elevated: var(--color-gray-200); --bg-muted: var(--color-gray-200); --bg-panel: var(--color-gray-200); --border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.24); --accent: var(--color-green); --accent-hover: var(--color-green-darkmode); color: var(--fg); background: var(--bg); } /* ========== PAPÉIS TIPOGRÁFICOS ========== */ .h-display { font-family: var(--font-display); font-weight: 800; font-size: 80px; line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--fg); } .h1 { font-family: var(--font-display); font-weight: 700; font-size: 56px; line-height: 64px; letter-spacing: var(--tracking-display); color: var(--fg); } .h2 { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 56px; letter-spacing: var(--tracking-display); color: var(--fg); } .h3 { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 40px; letter-spacing: var(--tracking-display); color: var(--fg); } .h4 { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: var(--tracking-display); color: var(--fg); } .h5 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 28px; letter-spacing: var(--tracking-body); color: var(--fg); } .eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-muted); } .body-lg { font-family: var(--font-body); font-weight: 400; font-size: 20px; line-height: 32px; letter-spacing: var(--tracking-body); color: var(--fg-body); } .body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: var(--tracking-body); color: var(--fg-body); } .body-sm { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 22px; letter-spacing: var(--tracking-small); color: var(--fg-muted); } .caption { font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: var(--tracking-small); color: var(--fg-muted); } .quote { font-family: var(--font-display); font-weight: 700; font-style: italic; font-size: 32px; line-height: 44px; color: var(--fg); } /* Escala responsiva — o display de 80px não cabe em telas pequenas */ @media (max-width: 992px) { .h-display { font-size: 56px; line-height: 1.08; } .h1 { font-size: 40px; line-height: 48px; } .h2 { font-size: 32px; line-height: 42px; } .h3 { font-size: 26px; line-height: 34px; } .quote { font-size: 26px; line-height: 36px; } } @media (max-width: 576px) { .h-display { font-size: 40px; line-height: 1.1; letter-spacing: 0.5px; } .h1 { font-size: 32px; line-height: 40px; letter-spacing: 0.5px; } .h2 { font-size: 26px; line-height: 34px; } .body-lg { font-size: 18px; line-height: 28px; } } /* ========== ASSINATURA DE MARCA ========== O grifo verde. Único uso de verde puro atrás de texto em fundo claro — funciona porque o texto por cima continua sendo tinta. */ .highlight-green { display: inline-block; background: linear-gradient(transparent 55%, var(--color-green) 55%); padding: 0 .12em; } /* ========== BOTÕES ========== */ .btn { font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: var(--tracking-small); padding: var(--space-4) var(--space-6); border-radius: var(--radius-xs); border: 1px solid transparent; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } .btn--primary { background: var(--color-green); color: var(--color-gray-200); } .btn--primary:hover { background: var(--color-green-dark); color: var(--color-gray-200); box-shadow: var(--shadow-glow-green); } .btn--secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); } .btn--secondary:hover { border-color: var(--fg); } .on-dark .btn--secondary { color: var(--color-white-soft); border-color: rgba(255,255,255,0.32); } /* Foco visível — requisito de acessibilidade, não decoração */ .btn:focus-visible, a:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 2px; } .on-dark .btn:focus-visible, .on-dark a:focus-visible { outline-color: var(--color-green-darkmode); } /* ========== BASE ========== */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg-body); font-family: var(--font-body); letter-spacing: var(--tracking-body); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } ::selection { background: var(--color-green); color: var(--color-gray-200); } /* ========== REVELAÇÃO NO SCROLL ========== Regra da marca: movimento REVELA, nunca esconde. O conteúdo já está no HTML e legível sem JS — .is-visible só é adicionada por IntersectionObserver quando existe JS. Sem JS, a classe .reveal nunca é aplicada e nada fica oculto. */ .js .reveal { opacity: 0; transform: translateY(var(--rise-block)); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); will-change: opacity, transform; } .js .reveal--card { transform: translateY(var(--rise-card)); } .js .reveal.is-visible { opacity: 1; transform: none; } /* Escalonamento de listas — aplicar no contêiner */ .js .reveal-group > * { transition-delay: calc(var(--i, 0) * var(--stagger)); } /* ===== Contador em rolagem de dígitos (odômetro) ===== Marcação esperada: 0123456789 ... uma coluna por dígito ... O valor real fica no aria-label e num — leitor de tela e indexação leem o número, não a animação. */ .odometer { display: inline-flex; font-variant-numeric: tabular-nums; line-height: 1; overflow: hidden; } .odometer__col { display: block; height: 1em; overflow: hidden; } .odometer__col > span { display: block; white-space: pre; /* algarismos empilhados um por linha */ transform: translateY(0); transition: transform calc(var(--dur-slow) * 1.5) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); } /* --d = dígito final da coluna. A classe is-visible dispara a parada. */ .js .odometer.is-visible .odometer__col > span { transform: translateY(calc(var(--d) * -1em)); } .counter { font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Grifo verde: wipe da esquerda para a direita ao entrar em cena */ .js .highlight-green { background-size: 0% 100%; background-repeat: no-repeat; } .js .highlight-green.is-visible { background-size: 100% 100%; transition: background-size var(--dur-slow) var(--ease-out); } /* Cards e links */ .card { transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-fast) var(--ease-out); } .link-underline:hover { background-size: 100% 1px; } /* Navegação ganha fundo após 80px de scroll (classe via JS) */ .site-nav { transition: background-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); } .site-nav.is-stuck { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); } /* Fotos do time: entram em P&B, ganham cor no hover — unifica o mosaico atual */ .team-photo { filter: grayscale(100%); transition: filter var(--dur-base) var(--ease-out); } .team-photo:hover, .team-photo:focus-within { filter: grayscale(0%); } /* ========== MOVIMENTO REDUZIDO ========== Desliga deslocamento, contagem e wipe. Nada fica escondido. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1 !important; transform: none !important; } .js .highlight-green { background-size: 100% 100% !important; } .js .odometer .odometer__col > span { transition: none !important; } .card:hover { transform: none; } .team-photo { filter: none; } video[autoplay] { display: none; } /* o pôster assume */ } /* ============================================================ NOTAS — CONTRASTE MEDIDO (WCAG 2.1) cor vs #FFFFFF vs #14142A green #1AED9F 1.54 ✗ 11.74 ✓ green-dark #00B970 2.57 ✗ 7.03 ✓ green-dm #6DFFD6 1.24 ✗ 14.55 ✓ purple #8F00FF 5.81 ✓ 3.11 ✗ purple-dm #C84FFF 3.49 (só grande) 5.17 ✓ gray-400 #4E4B66 8.33 ✓ 2.17 ✗ gray-500 #6E7191 4.74 ✓ 3.81 ✗ gray-600 #A0A3BD 2.48 ✗ 7.28 ✓ ink #14142A 18.05 ✓ — error #E40173 4.61 ✓ 3.91 ✗ success #76FF03 1.31 ✗ 13.82 ✓ alert #F57F17 2.65 ✗ 6.82 ✓ REGRA PRÁTICA: • Verde NUNCA como cor de texto em fundo claro. Em fundo claro ele é preenchimento de botão, grifo, ícone ou dado gráfico — sempre com tinta por cima. Em fundo escuro, é a cor de destaque de texto. • Roxo é o link em fundo claro. Verde é o link em fundo escuro. • gray-600 só vira texto legível sobre superfície escura. • success e alert servem para ícone e preenchimento, não para texto claro. ============================================================ */ /* ========== CTA: altura única no site (revisão set/2026, parte AI) ========== Mesma medida dos CTAs do herói. O botão do menu (data-nav-cta) fica de fora. */ .btn:not([data-nav-cta]) { box-sizing: border-box !important; min-height: 48px !important; padding-top: 12px !important; padding-bottom: 12px !important; font-size: 15px !important; line-height: 22px !important; } @media (max-width: 600px) { .btn:not([data-nav-cta]) { min-height: 46px !important; padding: 11px 14px !important; font-size: 14px !important; letter-spacing: 0 !important; } }