/* ============================================================= ASEC ECOSYSTEM — DESIGN TOKENS (base) ------------------------------------------------------------- Camada 1: escalas neutras + tipografia + espaçamento + forma. Camada 2 (themes.css): cor de marca trocável por site. Camada 3 (este arquivo): semântica que VIRA com dark/light. Estrutura de temas: - data-brand -> qual cor de marca (group=vermelho, etc.) - data-theme -> dark | light (toggle + localStorage) ============================================================= */ :root{ /* ---------- TIPOGRAFIA ---------- */ --font-display:"Bricolage Grotesque",system-ui,sans-serif; --font-body:"Manrope",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; /* ---------- FORMA / LAYOUT ---------- */ --radius:20px; --radius-sm:14px; --radius-lg:28px; --maxw:1240px; /* ---------- ESPAÇAMENTO ---------- */ --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-5:3rem; --space-6:4.5rem; --space-7:7rem; /* ---------- ESCALA NEUTRA (independente de tema) ---------- */ --ink-950:#08080a; --ink-900:#0d0d11; --ink-850:#121218; --ink-800:#16161c; --ink-700:#1d1d24; --paper-50:#ffffff; --paper-100:#f7f7f9; --paper-200:#f0f0f3; --paper-300:#e7e7ec; /* duração de transição de tema */ --theme-ms:.55s; } /* ========================================================= TEMA ESCURO (default) ========================================================= */ :root, [data-theme="dark"]{ color-scheme:dark; --bg:var(--ink-950); --bg-2:var(--ink-900); --bg-3:var(--ink-850); --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.07); --surface-solid:#101016; --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15); --text:#f4f4f6; --muted:#9b9ba6; --muted-2:#6f6f7c; --shadow-color:rgba(0,0,0,.8); --grid-line:rgba(255,255,255,.025); --hero-veil:rgba(8,8,10,.55); --glow-strength:1; /* multiplica o brilho neon */ --blend-screen:screen; } /* ========================================================= TEMA CLARO ========================================================= */ [data-theme="light"]{ color-scheme:light; --bg:var(--paper-100); --bg-2:var(--paper-50); --bg-3:var(--paper-200); --surface:rgba(12,12,20,.025); --surface-2:rgba(12,12,20,.05); --surface-solid:#ffffff; --line:rgba(12,12,28,.09); --line-2:rgba(12,12,28,.16); --text:#0e0e14; --muted:#53535f; --muted-2:#8a8a96; --shadow-color:rgba(28,28,55,.16); --grid-line:rgba(12,12,30,.04); --hero-veil:rgba(255,255,255,.6); --glow-strength:.45; --blend-screen:multiply; } /* ========================================================= APLICAÇÃO BASE ========================================================= */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} /* Por que o clip também no : só no ele esconde o scroll lateral mas o documento continua "largo" por dentro. No celular isso empurrava os elementos fixos (o botão flutuante do WhatsApp) para fora da tela. `clip` (e não `hidden`) mantém o position:sticky da nav funcionando. */ /* transição suave ao trocar de tema */ html.theme-anim, html.theme-anim *{ transition:background-color var(--theme-ms) ease, border-color var(--theme-ms) ease, color var(--theme-ms) ease, box-shadow var(--theme-ms) ease !important; } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ::selection{background:var(--brand);color:#fff} /* ---------- helpers de layout ---------- */ .wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px} .section{position:relative;padding:clamp(72px,9vw,140px) 0} h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.02;letter-spacing:-.02em} .h2{font-size:clamp(2rem,4.6vw,3.6rem)} .lead{color:var(--muted);font-size:clamp(1rem,1.4vw,1.18rem);max-width:62ch} .kicker{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.22em; text-transform:uppercase;color:var(--brand-2); } .kicker::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,var(--brand),transparent)} .brand-text{color:var(--brand-2)} .grad-text{ background:linear-gradient(120deg,var(--text) 0%,var(--text) 38%,var(--brand-2) 72%,var(--brand) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px var(--brand-glow)}