/* ============================================================ BASE — Skiforeningen Minimal element defaults bound to tokens. Sets the editorial vertical rhythm, accessible focus, and the two type voices. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); font-weight: var(--type-body-weight); color: var(--color-text); background: var(--color-background); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings — Besley. Sizes scale fluidly between mobile & the token max. color:inherit (not an explicit token) so headings adapt to their surface: they pick up --color-text from in normal flow, but follow a parent's color on dark heroes/banners (e.g. a container with color:#fff) instead of forcing navy onto a dark image. Set color explicitly on a heading only when you need to override the surrounding context. */ h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; color: inherit; text-wrap: balance; font-family: var(--font-display); } h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, var(--type-h1-size)); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); } h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, var(--type-h2-size)); font-weight: var(--type-h2-weight); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); } h3 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, var(--type-h3-size)); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); letter-spacing: var(--type-h3-ls); } h4 { font-size: clamp(1.125rem, 1rem + 0.5vw, var(--type-h4-size)); font-weight: var(--type-h4-weight); line-height: var(--type-h4-lh); letter-spacing: var(--type-h4-ls); } p { margin: 0 0 1em; text-wrap: pretty; } p.sf-prose { max-width: var(--measure-prose); } /* Wrapped in :where() so these defaults have ZERO specificity — plain content links still get link/visited colors, but any component class (nav, footer, breadcrumbs, buttons) overrides them without fighting `a:visited`. */ :where(a) { color: var(--color-text-link); text-underline-offset: 0.15em; } :where(a:visited) { color: var(--color-text-link-visited); } small { font-size: var(--type-caption-size); } /* Accessible focus — visible halo, never removed */ :focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Selection */ ::selection { background: var(--palette-secondary); color: var(--color-on-secondary-container); } /* Utility type classes (optional, map roles to elements) */ .sf-display { font-family: var(--font-display); font-size: clamp(2.75rem, 1.6rem + 4.2vw, var(--type-display-size)); font-weight: var(--type-display-weight); line-height: var(--type-display-lh); letter-spacing: var(--type-display-ls); } .sf-h1 { font-family: var(--font-display); font-size: clamp(2.25rem, 1.5rem + 2.6vw, var(--type-h1-size)); font-weight: var(--type-h1-weight); line-height: var(--type-h1-lh); letter-spacing: var(--type-h1-ls); } .sf-h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, var(--type-h2-size)); font-weight: var(--type-h2-weight); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); } .sf-h3 { font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + 0.9vw, var(--type-h3-size)); font-weight: var(--type-h3-weight); line-height: var(--type-h3-lh); } .sf-h4 { font-family: var(--font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, var(--type-h4-size)); font-weight: var(--type-h4-weight); line-height: var(--type-h4-lh); } .sf-body-l { font-size: var(--type-body-l-size); line-height: var(--type-body-l-lh); } .sf-body-m { font-size: var(--type-body-m-size); line-height: var(--type-body-m-lh); } .sf-body-s { font-size: var(--type-body-s-size); line-height: var(--type-body-s-lh); } .sf-label { font-size: var(--type-label-size); font-weight: var(--type-label-weight); } .sf-caption{ font-size: var(--type-caption-size); color: var(--color-text-muted); } .sf-overline { font-size: var(--type-overline-size); font-weight: var(--type-overline-weight); letter-spacing: var(--type-overline-ls); text-transform: uppercase; color: var(--color-text-variant); } /* Visually-hidden (screen-reader only) */ .sf-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; }