/* =========================================================================== base.css — reset + tipografia (Fraunces serif display + Hanken Grotesk sans) =========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } *::selection { background-color: var(--accent-weak); } html { -webkit-text-size-adjust: 100%; } body { min-height: 100dvh; font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif; font-size: var(--fs-base); line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: "Young Serif", Georgia, serif; font-weight: 400; /* Young Serif só tem 400 — evita bold sintético */ line-height: 1.1; letter-spacing: -0.01em; } /* o atributo [hidden] deve sempre vencer regras de display (.field/.btn usam flex) */ [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } input { font: inherit; color: inherit; } img { display: block; max-width: 100%; } ul { list-style: none; padding: 0; } .tabular { font-variant-numeric: tabular-nums; } /* foco visível — discreto mas claro, nunca removido */ :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* pular para o conteúdo */ .skip-link { position: absolute; left: 8px; top: -56px; z-index: var(--z-modal); padding: 8px 14px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; transition: top 150ms ease-out; } .skip-link:focus { top: 8px; } .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; } /* entrada suave (usada por header e cards, com stagger) */ @keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* troca de tema: fade suave em TODA a página, só durante a troca. A classe .theme-anim é posta no no clique e removida após o fade (app.js) — assim não anima no load nem deixa os hovers lentos. */ @media (prefers-reduced-motion: no-preference) { .theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color 350ms ease, border-color 350ms ease, color 350ms ease, fill 350ms ease, stroke 350ms ease, box-shadow 350ms ease !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }