/* ═══════════════════════════════════════════ BASE — reset and typographic foundation ═══════════════════════════════════════════ Zeroes out browser defaults and sets the site's base typography on . Loaded AFTER tokens.css and BEFORE components.css. */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Layout primitives — two concepts, two variables. --nav-height : the actual height of the fixed top nav (logo 44px + 0.8rem inner padding ≈ 4.5rem). Pages need to clear this so content isn't hidden behind the glass. NOT redefined here — it is a token (layout.nav-height in @sms/design-tokens), because the shared

sizes itself from it and admin-frontend needs the same number without loading this file. --gap : the standard layout breathing-room — used below the nav, around card-style pages, and anywhere else a "comfortable space" is wanted. Aliases var(--space-6) so the value follows the scale; rename the alias if the meaning changes, edit the scale if every layout breathing-room should breathe more. Composed values (body offset, hero pull-up) build from these via calc() so the intent reads directly in the rule. */ --gap: var(--space-6); } html { /* Anchor scrolls land below the nav with a gap so headings don't crowd the glass surface. */ scroll-padding-top: calc(var(--nav-height) + var(--gap)); /* Paint the canvas bg directly on html instead of relying on body-bg-propagation. During Safari's rubberband-overscroll the body element shifts visually with its bg paint, exposing the browser-default white above body's new top. Through the nav- glass that read as a faint white veil being "pulled down" over the nav. html doesn't move during overscroll, so painting its bg pins the canvas colour. apple.com gets away with body-only bg because their body is rgb(255,255,255) — matches the default so no seam shows. Our cream differs from default, hence this. */ background: var(--bg-page); } /* Smooth scroll only when the user hasn't asked to reduce motion. Programmatic scrollIntoView (HomeView's section-jump, mina-sidor's must-change-password nudge) honours scroll-behavior so this gate propagates correctly to those flows too. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--font-serif); background: var(--bg-page); color: var(--charcoal); overflow-x: hidden; line-height: 1.7; } /* Viewport-anchored canvas bg. Rendered by +layout.svelte's non-immersive branch. position:fixed pins this layer to the viewport so it doesn't drift with the document during Safari's rubberband-overscroll. Together with html+body bg-paint this is defense in depth: html/body cover any moment before the canvas element mounts; the canvas covers any rubberband shift after. */ .page-canvas { position: fixed; inset: 0; z-index: -1; background: var(--bg-page); pointer-events: none; } /* Reserve nav clearance + gap below the body's top edge — but only when the layout actually renders a nav. Immersive routes (/logga-in) skip the nav and rely on their full-viewport background, so padding here would shift the centred login-box off centre. The descendant `:has()` (no `>` combinator) walks past SvelteKit's `

` wrapper. */ body:has(nav.nav) { padding-top: calc(var(--nav-height) + var(--gap)); } /* Headings and UI elements use Jost (sans-serif). Body prose inherits Source Serif 4 from . Heading colour follows --text-heading so dark-mode flips automatically without per-component overrides. */ h1, h2, h3, h4, h5, h6, nav, .btn, .nav-link, .section-label, .stat-label, .stat-number, .event-date, .event-tag, .board-role, .contact-text .label { font-family: var(--font-sans); } h1, h2, h3, h4, h5, h6 { color: var(--text-heading); }