/* ─── Onest (fonte do site desde 18/10/2026) ───────────────── Antes: SF Pro em 6 arquivos .otf de um repositório de terceiro (8,8 MB). Num Android no 4G a home levava 10 s (4G bom) a 57 s (4G fraco) para terminar; sem eles, 2,6 s. E a licença da Apple só cobre interface de app dela, não site. Agora: Onest, Google Fonts, SIL OFL 1.1, uso comercial sim; a mesma fonte dos posts da AMS (kit ams). Um arquivo variável só, do 400 ao 900, subconjunto latino: 34 KB, servido pelo site. Decisão dele em 18/10. Vault: 04 — Site/13-a-fonte-do-site-pesa-9-mb.md */ @font-face { font-family: "Onest"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/Onest-latin-400-900.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; } /* AMS Chaveiros — design tokens Paleta com 6 famílias: preto, dark surfaces, bege/cream, laranja, branco e semânticos. Site mistura faixas escuras com seções bege pra arejar. */ :root { /* Pretos/escuros — base do tema dark. Tingidos no hue da marca (44.6), chroma 0.008: MESMO brilho de antes, mas material em vez de buraco. Hex aqui é o fallback universal; OKLCH equivalente no @supports abaixo. */ --bg-base: #100c0a; --bg-surface: #191513; --bg-card: #201c1a; --bg-card-elev: #282321; --border: #322d2b; --border-hover: #433e3c; /* Família bege/cream — pra seções claras, badges, e theme-light */ --beige-light: #f5f0eb; /* base bege claro (usado como --text no dark) */ --beige-mid: #c9bfb1; /* bege médio - secundário em fundo claro */ --beige-dark: #6a6258; /* bege escuro - texto em fundo claro */ --off-white: #fafaf7; /* quase branco — destaque max em dark, bg em light */ --white: #ffffff; /* escape hatch: SO onde branco puro e funcional (QR code) */ /* Claros tingidos no hue da marca. Branco puro parece clinico; tingido parece papel. Contraste conferido: ink sobre paper = 16.9:1. */ --paper: #fefaf8; /* fundo e card no tema claro (era #ffffff) */ --paper-2: #f9f5f2; /* superficie clara um degrau abaixo */ --ink: #1e1816; /* near-black do texto (era #1a1a1a) */ --ink-deep: #120e0c; /* pressed do botao escuro (era #000) */ /* Laranja AMS */ --orange: #E8651A; --orange-light: #ff8a3d; --orange-dark: #b84a0e; --orange-glow: rgba(232, 101, 26, 0.18); --orange-soft: rgba(232, 101, 26, 0.08); /* Texto sobre dark */ --text: var(--beige-light); --text-secondary: #b8b3ac; --text-muted: #8c857d; --text-dim: #5a544c; --success: #4CAF50; --warn: #FFB300; /* Refino jul/2026: cinza QUENTE legivel (dois tons + labels) e escalas unicas. --ink-soft ~4.8:1 sobre branco (label legivel mas quieto); no dark usar --text-muted. */ --ink-soft: #6f665b; /* cinza quente para labels/segundo tom no claro */ --ink-soft-2: #938a7d; /* variante mais leve (de-enfase em texto GRANDE) */ --label-ls: 0.14em; /* tracking padrao de label (faixa 0.10-0.16em) */ --label-weight: 500; /* label nunca bold */ /* Sombra em RAMPA: 4 a 6 camadas, blur crescendo, spread negativo crescendo, opacidade caindo, tinta QUENTE (near-black no hue da marca), nunca preto puro. A camada de 0.5px é a de contato, a que "assenta" o card na página. */ --shadow-tint: 30 20 10; --shadow-1: /* card em repouso */ 0 0.5px 0.7px -0.5px rgb(var(--shadow-tint) / 0.075), 0 1.8px 2.4px -1.1px rgb(var(--shadow-tint) / 0.065), 0 5px 6.5px -1.7px rgb(var(--shadow-tint) / 0.050), 0 11px 15px -2.3px rgb(var(--shadow-tint) / 0.032); --shadow-2: /* hover / elevacao */ 0 0.6px 0.9px -0.4px rgb(var(--shadow-tint) / 0.095), 0 2.2px 3px -0.9px rgb(var(--shadow-tint) / 0.085), 0 5.5px 7.5px -1.4px rgb(var(--shadow-tint) / 0.070), 0 12px 16px -1.9px rgb(var(--shadow-tint) / 0.052), 0 24px 32px -2.4px rgb(var(--shadow-tint) / 0.032); --shadow-3: /* media grande */ 0 0.8px 1.2px -0.35px rgb(var(--shadow-tint) / 0.100), 0 2.8px 3.8px -0.70px rgb(var(--shadow-tint) / 0.095), 0 6.8px 9px -1.10px rgb(var(--shadow-tint) / 0.085), 0 14px 19px -1.50px rgb(var(--shadow-tint) / 0.068), 0 28px 37px -1.90px rgb(var(--shadow-tint) / 0.048), 0 52px 68px -2.30px rgb(var(--shadow-tint) / 0.030); --radius-1: 14px; --radius-2: 18px; --radius-3: 24px; /* Luz de aresta: inset, nunca border (border empurra layout). Aplicada nos cards na Fase 2. */ --aresta-clara: inset 0 0 0 1px rgb(255 255 255 / 0.06); /* card no escuro */ --aresta-escura: inset 0 0 0 1px rgb(var(--shadow-tint) / 0.07); /* card no claro */ /* Tracking por faixa de tamanho (correcao optica). Aplicado na Fase 2. Label continua em --label-ls 0.14em: decisao de marca vence o padrao. */ --track-corpo: -0.01em; /* 14-18px */ --track-h3: -0.015em; /* 20-28px */ --track-h2: -0.022em; /* 30-44px */ --track-h1: -0.03em; /* 45-72px */ --track-hero: -0.04em; /* 73px+ */ /* Line-height cai conforme o tamanho sobe. Aplicado na Fase 2. */ --lh-hero: 0.92; --lh-titulo: 1.05; --lh-corpo: 1.55; /* Textura: grao SVG inline, fonte UNICA. Antes esta data URI vivia duplicada em home-v2.css e inline no etapa4. Trocar o ruido agora e um lugar so. */ --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* Onest em todo lugar, iPhone e Android iguais (18/10/2026; antes era SF Pro). Sem monospace em lugar nenhum. */ --font-display: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Alias consolidado: usado por Recibo e Catálogo (antes em Outfit/Inter). */ --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* curva de LOOP simetrica: pulso infinito com --ease (expo-out) sai e volta torto. Substitui o ease-in-out generico do browser por um valor desenhado. */ --ease-loop: cubic-bezier(0.45, 0, 0.55, 1); --max-w: 1400px; --gutter-x: clamp(20px, 5vw, 80px); } /* Paleta autorada em OKLCH: mexer so no L gera estado e rampa sem trocar a cor. So entra se o browser souber OKLCH; senao fica o hex acima (WebView antigo). As cores sao as MESMAS de hoje, exceto os 6 escuros, que foram tingidos. --success, --warn e --white seguem em hex (semanticos, uso raro). */ @supports (color: oklch(0% 0 0)) { :root { --bg-base: oklch(15.9% 0.008 44.6); --bg-surface: oklch(20.0% 0.008 44.6); --bg-card: oklch(23.1% 0.008 44.6); --bg-card-elev: oklch(26.0% 0.008 44.6); --border: oklch(30.1% 0.008 44.6); --border-hover: oklch(36.8% 0.008 44.6); --beige-light: oklch(95.8% 0.0086 67.7); --beige-mid: oklch(80.9% 0.0224 76.5); --beige-dark: oklch(50.1% 0.0186 73.5); --off-white: oklch(98.4% 0.0040 106.5); --orange: oklch(66.0% 0.1803 44.6); --orange-light: oklch(75.0% 0.1668 50.5); --orange-dark: oklch(54.9% 0.1560 43.1); --orange-glow: oklch(66.0% 0.1803 44.6 / 0.18); --orange-soft: oklch(66.0% 0.1803 44.6 / 0.08); --text-secondary: oklch(76.9% 0.0114 76.6); --text-muted: oklch(62.0% 0.0145 71.2); --text-dim: oklch(44.9% 0.0150 75.2); --ink-soft: oklch(51.5% 0.0204 72.9); --paper: oklch(98.8% 0.005 44.6); --paper-2: oklch(97.2% 0.006 44.6); --ink: oklch(21.6% 0.010 44.6); --ink-deep: oklch(12.0% 0.010 44.6); --ink-soft-2: oklch(63.8% 0.0218 77.2); } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-base); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ::selection { background: var(--orange); color: var(--bg-base); } /* ─── Type scale ───────────────────────────────────────────── */ .t-display { font-family: var(--font-display); font-weight: 900; font-size: clamp(64px, 11vw, 156px); line-height: 0.92; letter-spacing: -0.045em; color: var(--text); } .t-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.5vw, 76px); line-height: 0.96; letter-spacing: -0.035em; color: var(--text); } .t-h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: var(--text); } .t-lead { font-family: var(--font-body); font-weight: 400; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--text-secondary); } .t-body { font-size: 16px; color: var(--text-secondary); } .t-micro { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); } /* ─── Section eyebrow (rótulo de seção, profissional) ───────── */ .eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; color: var(--text-muted); } .eyebrow-bar { width: 26px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0.85; flex-shrink: 0; } .eyebrow--dark { color: #1a1a1a; opacity: 0.75; } .eyebrow--light { color: rgba(245,240,235,0.85); } .t-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; } /* ─── Layout ────────────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding-left: var(--gutter-x); padding-right: var(--gutter-x); } .section { padding-top: clamp(80px, 10vw, 160px); padding-bottom: clamp(80px, 10vw, 160px); position: relative; } .section + .section { border-top: 1px solid var(--border); } /* ─── Buttons ─────────────────────────────────────────────── */ .btn { /* Botões mais arredondados — pílula completa */ display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; padding: 14px 28px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), color 0.4s var(--ease); text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--orange); color: #fff; border-color: var(--orange); } .btn-primary:hover { transform: translateY(-1px); background: var(--orange-light); border-color: var(--orange-light); box-shadow: 0 10px 30px var(--orange-glow); } .btn-secondary { background: transparent; color: var(--text); border-color: var(--orange); } .btn-secondary:hover { background: var(--orange-glow); transform: translateY(-1px); } .btn .arrow { display: inline-block; transition: transform 0.4s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* ─── Logo ────────────────────────────────────────────────── */ /* Plaqueta laranja com anel/corrente. SVG inline traz o wordmark já dentro do desenho — não precisa de span separado. */ .logo { display: inline-flex; align-items: center; user-select: none; text-decoration: none; color: inherit; } .logo-tag { display: inline-block; height: 52px; line-height: 0; } .logo-tag svg { height: 100%; width: auto; display: block; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.15)); } @media (max-width: 540px) { .logo-tag { height: 44px; } } /* Mantém .logo-row como modificador legado — sem efeito agora que o logo é peça única, mas evita quebrar quem use a classe. */ .logo.logo-row { align-items: center; } /* ─── Header da home — mesmo design flutuante do .flow-header (definido em order-flow.css). Aqui só mudamos o conteúdo (nav + CTA em vez de progress bar). Cores adaptativas via tokens locais — default cream (header light em página dark). */ .site-header { /* Dark translúcido com tom quente — vibe glass real, sempre legível */ --header-bg: rgba(38, 30, 24, 0.48); --header-fg: #f5f0eb; --header-fg-muted: rgba(245, 240, 235, 0.62); --header-border: rgba(255, 255, 255, 0.10); position: fixed; top: 12px; left: 0; right: 0; width: calc(100% - 32px); max-width: 1100px; margin: 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 14px 8px 8px; background: var(--header-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--header-border); border-radius: 999px; box-shadow: 0 6px 22px rgba(0,0,0,0.08); color: var(--header-fg); transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease), backdrop-filter 0.3s var(--ease); } .site-header.is-scrolled { box-shadow: 0 16px 40px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.10); background: rgba(28, 22, 18, 0.40); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); } @media (max-width: 480px) { .site-header { top: 8px; width: calc(100% - 20px); border-radius: 999px; } } .site-nav { display: flex; gap: 24px; } .site-nav a { font-size: 13px; font-weight: 500; color: var(--header-fg-muted); transition: color 0.3s var(--ease); text-decoration: none; } .site-nav a:hover { color: var(--header-fg); } @media (max-width: 900px) { .site-nav { display: none; } } /* ─── Section dividers / transitions ─────────────────────── */ .section + .section { border-top: none; } .section-divider { position: relative; height: 1px; background: var(--border); margin: 0; overflow: visible; } .section-divider::after { content: ""; position: absolute; left: 50%; top: -1px; width: 280px; max-width: 60vw; height: 1px; background: linear-gradient(90deg, transparent, var(--orange) 50%, transparent); transform: translateX(-50%); filter: blur(0.2px); } .section-divider .dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px rgba(232,101,26,0.12), 0 0 24px var(--orange); } /* Section title with index counter */ .section-titleblock { display: flex; gap: 28px; align-items: baseline; margin-bottom: 32px; } .section-index { font-family: var(--font-mono); font-weight: 700; font-size: clamp(28px, 4vw, 56px); letter-spacing: -0.04em; color: var(--orange); line-height: 1; opacity: 0.55; flex-shrink: 0; } /* Parallax-driven elements */ .parallax-y { will-change: transform; } /* Section wedge — soft gradient bleeds between sections */ .wedge-top, .wedge-bottom { position: absolute; left: 0; right: 0; height: 80px; pointer-events: none; z-index: 1; } .wedge-top { top: 0; background: linear-gradient(180deg, var(--bg-base), transparent); } .wedge-bottom { bottom: 0; background: linear-gradient(0deg, var(--bg-base), transparent); } /* Smooth scroll — nativo (usado no mobile e como fallback). No desktop o Lenis assume e desliga o nativo (.lenis abaixo). */ html { scroll-behavior: smooth; } /* ─── Lenis (smooth scroll desktop) ─────────────────────────── Quando o Lenis monta, ele adiciona a classe .lenis no . */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* Sticky eyebrow that "follows" near top while inside a section */ .section { isolation: isolate; } /* Connector line: vertical dotted thread that "weaves" through sections */ .thread-anchor { position: absolute; left: 50%; width: 1px; background: repeating-linear-gradient(180deg, var(--orange) 0 4px, transparent 4px 12px); opacity: 0.25; z-index: 0; pointer-events: none; } /* ─── Reveal animation utility ─────────────────────────────── */ /* Animate transform only — opacity stays at 1 so content is always visible, even if the animation clock fails to tick (some iframe contexts). */ @keyframes reveal-slide { from { transform: translateY(20px); } to { transform: translateY(0); } } .reveal { opacity: 1; animation: reveal-slide 0.8s var(--ease) both; } .reveal[data-delay="1"] { animation-delay: 0.06s; } .reveal[data-delay="2"] { animation-delay: 0.12s; } .reveal[data-delay="3"] { animation-delay: 0.18s; } .reveal[data-delay="4"] { animation-delay: 0.24s; } .reveal[data-delay="5"] { animation-delay: 0.30s; } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; transform: none; } } /* ─── Custom cursor ───────────────────────────────────────── */ /* Opt-in: só esconde o cursor nativo quando o componente CustomCursor monta e adiciona .has-custom-cursor no body. Páginas sem o componente (etapas 1/2/3) mantêm o cursor normal. */ @media (hover: hover) and (pointer: fine) { body.has-custom-cursor { cursor: none; } .cursor-dot, .cursor-ring { position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%; will-change: transform; mix-blend-mode: normal; } .cursor-dot { width: 6px; height: 6px; background: var(--orange); transform: translate(-50%, -50%); } .cursor-ring { width: 32px; height: 32px; border: 1px solid var(--orange); transform: translate(-50%, -50%); transition: width 0.3s var(--ease), height 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease); opacity: 0.5; } .cursor-ring.hover { width: 56px; height: 56px; background: var(--orange-glow); opacity: 1; } } /* ─── Custom select (dropdown moderno no branding) ────────────── Substitui o visual do