/* ========================================================= Smart Badge · Base / Reset / Tipografia / Layout ========================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; /* Lenis controla o smooth scroll */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); font-size: var(--body); line-height: 1.6; color: var(--text); background-color: transparent; /* o carrega a cor que transiciona */ overflow-x: hidden; font-weight: 400; } /* Lenis */ 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; } img, picture, video, canvas, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul, ol { list-style: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } ::selection { background: var(--accent); color: #0A0A0A; } /* ---------- Tipografia display ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; color: var(--text); text-wrap: balance; } h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); font-weight: 700; letter-spacing: -0.02em; } p { text-wrap: pretty; } .accent { color: var(--accent); } .parchment { color: var(--parchment); } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: var(--section-pad); } /* Seções verde profundo: title em parchment por padrão */ .section--green { background: var(--bg-green-deep); } .section--green h1, .section--green h2, .section--green h3 { color: var(--parchment); } .section--green-grad { background: var(--grad-green); } .section--onyx { background: var(--bg-onyx); } .lede { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--text-muted); max-width: 62ch; line-height: 1.6; } /* ---------- Eyebrow ---------- */ .eyebrow { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--eyebrow); text-transform: uppercase; letter-spacing: 0.18em; color: var(--accent); font-weight: 500; } /* fontes técnicas / sources */ .source { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--text-faint); line-height: 1.5; } /* tabular numbers para counters/preços */ .tabular { font-variant-numeric: tabular-nums; } /* ---------- Acessibilidade ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--gutter); z-index: var(--z-overlay); background: var(--accent); color: #0A0A0A; padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; transition: top var(--dur) var(--ease-out); } .skip-link:focus { top: 1rem; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { transition: none; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }