/* ========================================================================== BASE — o que modern-normalize não cobre: tipografia do projeto, utilitários de layout, acessibilidade e o contrato de animação. ========================================================================== */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-width: 320px; /* `clip` corta igual a `hidden` sem criar um contêiner de rolagem — é o que garante `position: sticky` funcionando dentro do body em todos os motores. A linha anterior permanece como fallback. */ overflow-x: hidden; overflow-x: clip; background: var(--c-bg); color: var(--c-ink); font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p, figure { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } svg { display: block; } /* Lucide injeta no lugar dos ; o traço segue o padrão do design system (1.5) e o tamanho vem sempre do contexto. */ [data-lucide], svg.lucide { width: 1em; height: 1em; stroke-width: 1.5; } :focus-visible { outline: 2px solid var(--c-graphite-medium); outline-offset: 4px; } ::selection { background: rgba(168, 201, 87, .35); } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* -------------------------------------------------------------------------- Acessibilidade -------------------------------------------------------------------------- */ .sr-only { 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: fixed; left: 20px; top: 12px; z-index: 2000; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--c-ink); color: #fff; font-size: 12px; letter-spacing: .08em; transform: translateY(-160%); transition: transform .2s ease; } .skip-link:focus { transform: none; } /* -------------------------------------------------------------------------- Contrato de animação de entrada Sem JS, sem GSAP ou com movimento reduzido, nada fica escondido: a regra de ocultar só vale enquanto o JS ainda não assumiu o controle, e o main.js marca `anim-off` se decidir não animar. -------------------------------------------------------------------------- */ .js:not(.anim-off) [data-anim], .js:not(.anim-off) [data-anim-card] { opacity: 0; } .anim-off [data-anim], .anim-off [data-anim-card] { opacity: 1 !important; transform: none !important; } /* -------------------------------------------------------------------------- Scroll suave (Lenis) As classes abaixo são aplicadas pela própria biblioteca em quando ela assume o scroll. Se o Lenis não carregar — ou com movimento reduzido, quando o assets/js/scroll.js desiste de instanciá-lo — nenhuma delas existe e o navegador segue com o scroll nativo e o `scroll-behavior` declarado no topo desta folha. -------------------------------------------------------------------------- */ html.lenis, html.lenis body { height: auto; } html.lenis.lenis-smooth { scroll-behavior: auto !important; } html.lenis.lenis-stopped { overflow: hidden; } /* -------------------------------------------------------------------------- Movimento reduzido -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }