/* ============================================================ jonatanzyl — nova proposta de design system Full-bleed poster system. Sem page-frame, sem side rules. Fontes: Switzer variável (display/body) + Geist Mono (labels) Referências: antigravity.google + apple.com/airpods-pro ============================================================ */ :root { /* ---- Cor: superfícies ------------------------------------ A página é um canvas único. O background do morpha entre estes valores via scroll (Lenis + ScrollTrigger scrub). Seções nunca pintam o próprio fundo (exceto fallback). */ --bg-light: #ffffff; /* branco puro — o dia (era papel quente #f7f6f2) */ --bg-dark: #0c0d10; /* quase-preto azulado — a noite (Antigravity #121317, mais fundo) */ --bg-close: #ffffff; /* first light — branco puro (era creme #faf7f0) */ /* ---- Cor: tinta ------------------------------------------- */ --ink: #101114; /* primário sobre claro */ --ink-2: #45474d; /* secundário sobre claro (Antigravity on-surface-variant) */ --ink-3: #73757c; /* muted / meta sobre claro */ --paper: #f4f4f2; /* primário sobre escuro */ --paper-2: #a3a5ac; /* secundário sobre escuro */ --paper-3: #71737a; /* muted sobre escuro */ /* Sobre branco puro a tinta é neutra — os marrons afinados pro creme leem encardidos no branco. (No creme eram #171512 / #4a443a / #6f6759.) */ --ink-close: #101114; --ink-close-2: #45474d; --ink-close-3: #73757c; /* ---- Cor: acento e dados ---------------------------------- */ --accent: #2f6bff; /* azul sobre claro */ --accent-dark: #6b9dff; /* azul sobre escuro (herdado do ledger) */ --alert: #ff4640; /* o veredito — Revenue: none. */ /* ---- Hairlines: só com alpha, nunca sólidas ---------------- (Antigravity: outline .12 / outline-variant .06) */ --line: rgba(16, 17, 20, 0.12); --line-soft: rgba(16, 17, 20, 0.07); --line-dark: rgba(244, 244, 242, 0.16); --line-dark-soft: rgba(244, 244, 242, 0.08); --line-close: rgba(16, 17, 20, 0.12); /* ---- Tipografia -------------------------------------------- Escada de tracking à Apple: aperta nos grandes, cruza o zero no meio da escala, levemente negativa no body. Line-height ~1.0 nos displays, ~1.5 no body. Pesos: só 600 e 430. */ --font-sans: 'Switzer', system-ui, -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; --text-hero: clamp(3rem, 7.6vw, 7.25rem); /* lh .98, ls -0.032em */ --text-display: clamp(2.2rem, 4.8vw, 4.75rem); /* lh 1.04, ls -0.024em */ --text-title: clamp(1.6rem, 2.9vw, 2.5rem); /* lh 1.12, ls -0.014em */ --text-sub: clamp(1.2rem, 1.8vw, 1.5rem); /* lh 1.42, ls -0.006em */ --text-body: 1.0625rem; /* lh 1.72, ls -0.008em */ --text-caption: 0.8125rem; /* mono, ls +0.01em */ --text-kicker: 0.75rem; /* mono, uppercase, ls +0.16em */ --text-giant: clamp(8rem, 25vw, 22rem); /* o "126" — lh .85, ls -0.05em */ --weight-display: 600; --weight-medium: 500; --weight-body: 430; --track-hero: -0.032em; --track-display: -0.024em; --track-title: -0.014em; --track-sub: -0.006em; --track-body: -0.008em; --track-kicker: 0.16em; /* ---- Espaçamento: ritmo de cartaz --------------------------- (Apple: 160px top / 216px bottom por seção; Antigravity: 120–328px) O vão entre folds é onde o fundo morpha — faz parte do sistema. */ --space-fold: clamp(8rem, 18vh, 12.5rem); --space-fold-hero: clamp(10rem, 26vh, 17rem); /* dobradiças: ledger, result */ --space-gap: clamp(3rem, 6vh, 5rem); --space-beat: clamp(1.25rem, 2.5vh, 2rem); /* ---- Larguras: medida, não moldura -------------------------- */ --measure-hero: 1160px; --measure-copy: 40rem; --measure-wide: 1360px; /* mídia constrained; full-bleed ignora */ --page-pad: clamp(1.25rem, 5vw, 5rem); /* ---- Radius: mídia macia, nunca caixa ------------------------ (Apple: 28px é o radius-herói; pills 999) */ --radius-media: clamp(16px, 2vw, 28px); --radius-card: 18px; --radius-pill: 999px; /* ---- Profundidade: luz e blur, não borda --------------------- (Apple: sombra 8% + hairline inset; glass = blur + saturate) */ --shadow-plate: 0 1px 2px rgba(12, 13, 16, 0.05), 0 24px 64px -16px rgba(12, 13, 16, 0.16); --shadow-plate-dark: 0 1px 2px rgba(0, 0, 0, 0.3), 0 32px 88px -20px rgba(0, 0, 0, 0.55); --shadow-phone: drop-shadow(0 24px 44px rgba(12, 13, 16, 0.18)); --shadow-phone-dark: drop-shadow(0 28px 52px rgba(0, 0, 0, 0.5)); --edge-inset: inset 0 0 0.5px rgba(16, 17, 20, 0.14); --glass: blur(20px) saturate(1.5); /* ---- Motion --------------------------------------------------- Reveal Apple: rise 30px, transform .7s / opacity .9s (delay assimétrico), stagger .12–.15, ease-out. */ --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-soft: cubic-bezier(0, 0, 0.5, 1); --ease-spring: cubic-bezier(0.34, 2.16, 0.64, 1); --ease-inout-quart: cubic-bezier(0.77, 0, 0.175, 1); --reveal-rise: 30px; --dur-fast: 0.3s; --dur-reveal: 0.7s; /* transform; opacity roda em 0.9s */ /* Lenis: lerp 0.09 — definido no page.js */ }