/* ============================================================ Design System — Vinícius Nunes / Advogado Sustentável 02 · Components (base — NÃO editar por página) Camada 1 (este arquivo): BASE + CHROME (navbar, footer, CTA, autor, relacionados) — o que o 04-layout.html precisa para renderizar. Origem: bloco "HEADER/FOOTER PADRONIZADO (base honorarios-hub-v3)" dos wireframes aprovados. ⏳ TODO (próximo chunk): componentes de CONTEÚDO de página (hero de artigo, breadcrumb, callouts, FAQ, tabelas comparativas, type-cards pros/cons, sidebar, prosa) — extrair dos wireframes de artigo/subhub e adicionar ao fim deste arquivo. ============================================================ */ /* ───────────────────────── Base / reset ───────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Âncoras (#secao) param sob a navbar sticky (64px), não atrás dela. */ html { scroll-padding-top: 80px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--f-sans); background: var(--c-bg); color: var(--c-text); font-size: var(--body-size); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: inherit; text-decoration: none; } em { font-style: normal; color: var(--c-gold); } /* ênfase dourada (padrão da marca) */ h1, h2, h3, h4, h5 { font-family: var(--f-head); } img { display: block; max-width: 100%; } .wrap { max-width: 1200px; margin: 0 auto; } main, main > * { min-width: 0; } /* ───────────────────────── Botões ───────────────────────── */ .btn-gold { background: var(--c-gold); color: var(--c-black); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 14px 26px; border-radius: var(--r-sm); transition: background .2s; } .btn-gold:hover { background: var(--c-gold-dk); } .btn-ghost { border: 1px solid rgba(255,255,255,.2); color: var(--c-white); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 14px 26px; border-radius: var(--r-sm); transition: border-color .2s, background .2s; } .btn-ghost:hover { border-color: var(--c-gold); background: rgba(204,154,86,.08); } /* ───────────────────────── Navbar (chrome) ───────────────────────── */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--c-black); } .navbar a { text-decoration: none; color: inherit; } .navbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .navbar-logo { justify-self: start; } .navbar-logo span:first-child { display: block; font-size: 15px; font-weight: 800; color: var(--c-white); letter-spacing: -.3px; font-family: var(--f-sans); } .navbar-logo span:last-child { display: block; font-size: 9px; font-weight: 700; color: rgba(255,255,255,.35); letter-spacing: 2px; text-transform: uppercase; } /* nav-builder-header: