/* ============================================================ CustomQuiz — delt layout/grid (single source of truth) Lenket fra alle sider etter font-link i . Styrer KUN bredde, sentrering og sidepadding. Farger/typografi bor fortsatt i hver sides :root (designsystemet). To gjenkjennbare bredder på én grid: --w-read 760px — lese-flyt (daglig, generator, min-side, vm) --w-wide 1080px — kortrutenett/galleri (forside, arkiv) En side velger lese-bredde ved å sette i sin egen :root: --container-max: var(--w-read); Uten override faller den til galleri-bredde (1080). ============================================================ */ /* Reserver scrollbar-plass alltid → ingen ~15px sidelengs hopp mellom korte sider (uten scrollbar) og lange (med scrollbar). */ html { scrollbar-gutter: stable; } :root { --w-read: 760px; --w-wide: 1080px; /* Sidepadding (gutter mot viewport): vokser med skjermbredden så innholdet aldri ligger tett på kantene på desktop, men holder seg stramt på mobil. Juster taket (56px) om du vil ha enda mer/mindre luft. */ --grid-pad-x: clamp(20px, 5vw, 56px); --grid-pad-top: 32px; --grid-pad-bottom: 96px; } .container, .wrap { width: 100%; max-width: var(--container-max, var(--w-wide)); margin-inline: auto; padding: var(--grid-pad-top) var(--grid-pad-x) var(--grid-pad-bottom); } /* Eksplisitt lese-bredde-modifikator (beholdt for ev. fremtidig bruk) */ .container--read { --container-max: var(--w-read); } /* Valgt modell (8. juni 2026): UNIFORM bredde — alle sider bruker den brede rammen (--w-wide = 1080), lik arkivet. Ingen lese/galleri-forskjell, så ramme + masthead står identisk overalt og ingenting «spretter». Sider skal derfor IKKE sette --container-max. */ /* clamp() over håndterer mobil→desktop-skalering, så ingen egen mobil-override trengs lenger. (Floor = 20px på smale skjermer.) */ /* ============================================================ Sidovergang — native cross-document View Transitions ------------------------------------------------------------ Gjelder HELE siden automatisk: alle interne, samme-origin navigasjoner (klikk + tilbake/fram) får en rask, diskret cross-fade i stedet for hvit blink. Eksterne lenker, target=_blank og nedlastinger transitioneres ikke av browseren. Hver side laster fortsatt helt normalt → ingen SPA-risiko, alle inline-scripts (auth/quiz) kjører som før. Støtte: Chrome/Edge/Safari 18+. Eldre browsere ignorerer reglene og navigerer som vanlig (graceful fallback). ============================================================ */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { /* Rask, men merkbar: ~210ms mykt inn-ut-kryss. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 210ms; animation-timing-function: cubic-bezier(.42, 0, .2, 1); } /* Mastheaden ankres som delt element → den står helt stille mens innholdet krysser. Gir den sømløse «samme skall, nytt innhold»-følelsen. */ .masthead { view-transition-name: cq-masthead; } /* Logo + ordmerke får EGNE transition-navn, så de matches direkte (logo↔logo) i sin faktiske 48px-størrelse uavhengig av masthead-boksen. Uten dette skaleres hele masthead-snapshotet hvis boksen er marginalt ulik høyde mellom sider, og logoen «hopper» i størrelse. Hver er unik per side. */ .masthead-mark { view-transition-name: cq-logo; } .masthead-wordmark { view-transition-name: cq-wordmark; } } /* Respekter redusert bevegelse: ingen kryss-animasjon, bare hardt bytte. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }