/* ========================================================================== BASE — reset, document defaults, accessibility helpers and layout primitives. No sizes, colors or radii of components here: those come from presets.css / components.css. ========================================================================== */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* the page scrolls as usual (wheel, keys, touch) but the browser draws no scrollbar: the site is clean edge to edge */ html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } body { margin: 0; font-family: var(--font-base); font-size: var(--fs-2); /* = text-body, the default text preset */ font-weight: 400; font-synthesis: none; line-height: var(--lh); letter-spacing: var(--tracking); color: var(--color-black); background: var(--color-white); overflow-x: clip; /* sticky footer: the page is at least as tall as the window and
takes the leftover space, so on a short page (or a zoomed-out window) the footer sits at the bottom of the screen instead of floating under the content */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body > main { flex: 1 0 auto; } [hidden] { display: none !important; } /* the hidden attribute always wins over a component's display */ img { display: block; max-width: 100%; } button, input, textarea { font: inherit; letter-spacing: inherit; line-height: inherit; } h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; text-wrap: balance; } /* size/weight come from a text preset */ p { margin: 0; max-width: 62ch; } b, strong { font-weight: 700; } sub { line-height: 0; } a { color: inherit; } /* ---- Accessibility ---- */ :focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; } .on-dark:focus-visible, .on-dark :focus-visible { outline-color: var(--color-white); } /* hero, nav, footer: blue/dark blocks */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* The plain text that tools/gen-conteudo.ps1 writes into a container a script fills, for search engines and visitors without JavaScript; with JavaScript the script replaces the container's content and this block is hidden until then (the `js` class is set in the ). */ .js .seo-static { display: none; } /* ---- Layout primitives ---- */ .container { width: min(100% - 2 * var(--gutter), max(var(--container-share), 40rem), var(--container-max)); margin-inline: auto; } .section { padding-block: clamp(2.5rem, 6vw, 8rem); } .section--tight { padding-block: clamp(1.5rem, 3vw, 4rem); } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2.5rem); row-gap: clamp(1rem, 2vw, 2.5rem); } .align-end { display: flex; justify-content: flex-end; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }