/* ============================================================================ Argos AI - tokens do site de vendas Revisão do dono (rodada 2) - repaleta total. A paleta anterior saiu inteira. A nova nasce de QUATRO cores dadas pelo dono, e todo o resto abaixo é derivado delas: #101820 fundo -> --ink #E7E3D8 texto claro -> --fg #C6A15B acento 1 ouro -> --gold #4F5D4E acento 2 sálvia-> --sage Formato HSL sem vírgula, para compor alpha: hsl(var(--gold) / 0.12) REGRA DE CONTRASTE (medida sobre #101820, não estimada): #E7E3D8 texto ......... 14.9:1 OK em qualquer tamanho #C6A15B ouro .......... 7.33:1 OK para texto, inclusive corpo #4F5D4E sálvia ........ 2.58:1 REPROVA para texto. Só preenchimento, borda, decoração e chip grande. --fg-muted ............ 7.01:1 OK --sage-text ........... 8.11:1 a saída quando um verde PRECISA ser texto ========================================================================== */ :root { /* ---- Camadas de superfície ------------------------------------------- Sem malha, sem pontilhado: a profundidade vem de superfícies empilhadas com borda de fio, que é a forma do app Argos. */ --ink: 210 33.3% 9.4%; /* #101820 fundo da página */ --sunken: 210 36% 6.5%; /* poço: dentro de painel */ --surface: 210 28% 12%; /* card / painel */ --surface-band: 210 30% 10.5%; /* faixa de seção alternada */ --elevated: 210 24% 16%; /* popover / hover de painel */ /* ---- Texto ------------------------------------------------------------ */ --fg: 44 23.8% 87.6%; /* #E7E3D8 14.9:1 */ --fg-muted: 44 12% 62%; /* 7.01:1 */ --fg-faint: 44 8% 46%; /* só rótulo decorativo */ /* ---- Acento 1: OURO. Ação, número, confirmação, destaque. ------------- */ --gold: 39.3 48.4% 56.7%; /* #C6A15B 7.33:1 */ --gold-hover: 39 54% 65%; /* hover de botão sólido */ --gold-dim: 39 42% 44%; /* borda / preenchimento */ /* ---- Acento 2: SÁLVIA. Estrutura, calma, "verificado". ---------------- NUNCA como cor de texto: 2.58:1. Para texto verde existe --sage-text. */ --sage: 116 8.8% 33.5%; /* #4F5D4E */ --sage-soft: 116 10% 26%; /* preenchimento mais fundo */ --sage-text: 116 16% 66%; /* 8.11:1, o verde legível */ /* ---- Semânticos (o site usa pouco) ------------------------------------ */ --ok: 116 16% 66%; /* = sage-text */ --alert: 9 46% 60%; /* tijolo, só se necessário */ /* ---- Linhas ----------------------------------------------------------- */ --line: 210 20% 20%; /* fio de cabelo padrão */ --line-strong: 210 16% 30%; /* divisor / borda ativa */ /* ---- Alphas ----------------------------------------------------------- */ --a-faint: 0.07; --a-subtle: 0.13; --a-soft: 0.20; --a-medium: 0.30; --a-strong: 0.48; /* ====================================================================== Tipografia. Inalterada: é o que o app usa de verdade. ====================================================================== */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --t-display: clamp(37px, 4.7vw, 62px); --t-h2: clamp(30px, 3.6vw, 46px); --t-h3: 24px; --t-lead: 19px; --t-body: 17px; --t-data: 13px; /* mono, tabular-nums */ --t-label: 11px; /* eyebrow / tag, maiúscula */ --lh-display: 1.04; --lh-h2: 1.1; --lh-body: 1.65; --lh-prose: 1.7; --ls-display: -0.03em; --ls-h2: -0.02em; --ls-label: 0.16em; --ls-tag: 0.12em; /* ---- Ritmo vertical e containers -------------------------------------- */ --sec-y: 96px; --sec-y-cta: 128px; --prose: 640px; --prose-wide: 680px; --content: 960px; --container: 1200px; --gap-card: 20px; /* ---- Raios: escala de instrumento, nada de rounded-2xl ---------------- */ --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-pill: 999px; /* ---- Movimento -------------------------------------------------------- Curvas mantidas: são a assinatura da casa. O que mudou (revisão do dono) foi o MOTOR do pipeline, não as curvas. */ --ease-reveal: cubic-bezier(.22, .78, .22, 1); --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spawn: cubic-bezier(.2, .9, .3, 1.15); --d-fast: 150ms; --d-type: 300ms; --d-spawn: 450ms; --d-reveal: 560ms; /* estação do pipeline: 0,56s, dentro da faixa pedida */ --d-layout: 640ms; --transition-reveal: opacity 300ms 60ms, transform var(--d-reveal) var(--ease-reveal); /* ---- Elevação: sombra preta real, zero glow colorido ------------------ */ --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.30), 0 1px 2px -1px rgb(0 0 0 / 0.24); --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.36), 0 2px 6px -2px rgb(0 0 0 / 0.24); --shadow-lg: 0 10px 24px -4px rgb(0 0 0 / 0.42), 0 4px 10px -4px rgb(0 0 0 / 0.28); --shadow-xl: 0 20px 48px -8px rgb(0 0 0 / 0.52), 0 8px 20px -8px rgb(0 0 0 / 0.34); --hairline-top: inset 0 1px 0 0 rgb(255 255 255 / 0.05); /* ---- A ÚNICA lavagem do site ----------------------------------------- Um matiz (ouro), alpha baixo, ancorada no topo. Não empilhar, não repetir em outra seção, não animar. */ --wash: radial-gradient(120% 130% at 50% 0%, hsl(var(--gold) / 0.07), transparent 58%); /* ---- Camadas de fundo (substitui a malha quadriculada) ---------------- O dono vetou o grid: "esses quadrados dão muito cara de IA". A profundidade agora vem de faixa + fio, como os painéis do app. */ --band-top: linear-gradient(hsl(var(--fg) / 0.035), transparent 120px); --panel-sheen: linear-gradient(hsl(var(--fg) / 0.028), transparent 40%); } /* ---- Base ------------------------------------------------------------- */ body { background-color: hsl(var(--ink)); color: hsl(var(--fg)); font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga' 1, 'calt' 1; font-synthesis-weight: none; } /* Números sempre tabulares onde comparam (cota, preço, contagem, score). */ .tabular { font-variant-numeric: tabular-nums; } /* ---- Eyebrow de seção: quadrado 6px + label mono ---------------------- */ .sec-label { display: inline-flex; align-items: flex-start; gap: 10px; font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: hsl(var(--fg-muted)); } .sec-label::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 0.42em; /* gruda na primeira linha, mesmo se o rótulo quebrar */ border-radius: 1px; background: hsl(var(--gold)); } /* ---- Acessibilidade --------------------------------------------------- O hero, o pipeline e o banner TÊM que fazer sentido parados. A entrega estática completa mora em assets/site.css. */ @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; } }