–

så att site settings * styr alla rubriker konsekvent. */ h1 { font-size: var(--text-4xl); font-weight: var(--font-weight-h1); line-height: var(--leading-tight); } h2 { font-size: var(--text-3xl); font-weight: var(--font-weight-h2); line-height: var(--leading-tight); } h3 { font-size: var(--text-2xl); font-weight: var(--font-weight-h3); line-height: var(--leading-snug); } h4 { font-size: var(--text-xl); font-weight: var(--font-weight-h4); line-height: var(--leading-snug); } h5 { font-size: var(--text-h5); font-weight: var(--font-weight-h5); line-height: var(--leading-snug); } h6 { font-size: var(--text-h6); font-weight: var(--font-weight-h6); line-height: var(--leading-snug); } span { font-weight: inherit; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } .section-label { margin: 0 0 var(--rhythm-label-after, var(--rhythm-column-heading-after, 10px)); color: var(--color-accent); font-size: var(--text-label, var(--text-sm)); font-weight: var(--font-weight-label, var(--font-weight-span)); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; } .section-label::before { content: ""; display: var(--label-stroke, block); width: 4.5rem; height: 3px; margin-bottom: var(--space-2, 8px); background: var(--color-accent); } :where(main, body) section:not([data-site-rhythm="off"]) .section-label { margin-block-start: 0; margin-block-end: var(--rhythm-label-after, var(--rhythm-column-heading-after, 10px)); } .section-label:empty { display: none; } /* Global scrollbar styling (supported browsers) */ * { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--scrollbar-radius); border: var(--scrollbar-border-width) solid var(--scrollbar-track); } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Gemensam min-höjd + vertikal centrering för ALLA innehållssektioner utom CTA * och helskärmshero. Styrs globalt av Site settings → vanliga sektioner → * Standard = 670px, Kompakt = 520px, Luftig = min(100dvh, 860px). * Matchar sektioner som direkta barn av

och (preview-iframe * saknar

-wrapper). flex-column + justify-content:center → kort innehåll * centreras vertikalt så det inte hänger uppe i hörnet av en stor sektion. * main.ui-shell (admin) undantas så att t.ex. .ui-grid inte tvingas till flex. */ :where(main:not(.ui-shell), body) > section:not(.section-cta):not(.hero--fullscreen) { min-height: var(--section-min-screen); display: flex; flex-direction: column; justify-content: center; } /* Flex-centrerade sektioner: ett enda direkt barn (t.ex. .text-content__inner) får * flow-root så margin-collapse från första rubrik/lead inte "äter" optisk padding * upptill. Hela selektorn i :where() ⇒ specificity 0 → .hero__inner { display:grid } * och andra __inner-layouts i sektion-CSS vinner alltid. */ :where(:is(main:not(.ui-shell), body) > section:not(.section-cta):not(.hero--fullscreen) > *:only-child) { display: flow-root; } .section--min-screen { min-height: var(--section-min-screen); } /* Lägg sektion under en transparent header utan att skapa gap mot nästa sektion. * margin-top är "utanför boxen" (drar upp sektionens bakgrund bakom headern) och * padding-top är "inuti boxen" (skjuter ner content lika mycket). Layoutmässigt * tar de ut varandra exakt → ingen gap mot nästa sektion. Resultat: bakgrunden * börjar bakom headern men content centreras optiskt i den synliga ytan under * headern. --header-height sätts av sections/header/header.js (ResizeObserver). */ :where(main:not(.ui-shell), body) > section[data-overlap-header="true"] { margin-top: calc(-1 * var(--header-height, 0px)); padding-top: var(--header-height, 0px); } /* Globalt mellanrum mellan sektioner — adjacent-sibling så bara MELLAN, inte ovanför * första eller under sista. --section-gap sätts från Site settings → "Mellanrum * mellan sektioner". Per-sektion inline margin-top override slår denna regel via * högre specificitet (inline style). */ :where(main:not(.ui-shell), body) > section + section { margin-top: var(--section-gap, 0px); }