/* Inter + Source Serif 4, self-hosted (was fonts.googleapis.com -- no visitor request leaves the site for a font). The upstream woff2 for weights 400/500/600 are one and the same variable font (fvar/gvar), so each family/style/subset ships once with a font-weight range covering the weights the pages use; the unicode-range on each face keeps the browser fetching only what the page's text needs. Prepended to the served style.css by render.write_assets. */ /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 500; font-display: swap; src: url(/fonts/source-serif-4-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 500; font-display: swap; src: url(/fonts/source-serif-4-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/source-serif-4-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* lagen 2026 -- Marginalia, recoloured. ========================================================================== An evolution of the implemented stylesheet. Layout, class names, geometry and typography are UNCHANGED -- only the colour layer is rebuilt as tokens. Two coordinated schemes, driven by a single [data-theme] switch with a prefers-color-scheme fallback: * Light -- cool porcelain paper, cool near-black ink, one warm oxblood accent. Warm-on-cool editorial tension. * Dark -- deep cool slate, terracotta accent, the three source category hues (case / forarbete / kommentar) lightened. Drop-in: set or "dark", or leave it off to follow the OS. Everything below the token block is the original CSS with its scattered colour literals promoted to tokens so both schemes hold. ========================================================================== */ /* ── Light (default) ─────────────────────────────────────────── */ :root { --bg:#e9ecf0; --surf:#f4f6f8; --surf-2:#dde2e8; --surf-3:#c9d0d9; --ink:#171b21; --ink-2:#3b434d; --ink-3:#697079; --ink-4:#9aa1aa; --rule:#cfd4dc; --rule-soft:#dee2e9; --accent:#8f3524; --case:#9a5a2a; --forarbete:#544a80; --kommentar:#933659; /* promoted literals */ --diff-ins-bg:#d9e8dc; --diff-del-bg:#efdad6; --fk-bg:#eaf1f8; --fk-border:#c3d5e6; --overlay:rgba(18,22,28,.34); --shadow-modal:rgba(18,22,28,.30); --mark:#f0e4a6; --danger:#b5402c; --on-accent:#ffffff; --senti-neg:#a3402f; --senti-pos:#2f6b46; --serif:"Source Serif 4","Charter",Georgia,serif; --sans:"Inter","Helvetica Neue",system-ui,sans-serif; --col-toc:16rem; --col-rail:18rem; --col-main:56rem; /* the whole reading block (TOC + reading column + rail) is centered on the page and capped at this width; columns are border-box and sit flush, so the cap is their exact sum. Any surplus viewport becomes symmetric left/right margin rather than a gap between text and rail (U1/U2). */ --page-max:calc(var(--col-toc) + var(--col-main) + var(--col-rail)); /* anchor clearance under the sticky masthead; the mobile breakpoint (whose masthead is static and scrolls away) shrinks it in one place */ --scroll-clear:5rem; color-scheme: light; } /* ── Dark ────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg:#12161b; --surf:#1a1f26; --surf-2:#232a33; --surf-3:#2f3843; --senti-neg:#d98b7a; --senti-pos:#7fb494; --ink:#e7e9ec; --ink-2:#b6bcc4; --ink-3:#868d97; --ink-4:#5c636d; --rule:#2b323b; --rule-soft:#222831; --accent:#cd6f56; --case:#c9884f; --forarbete:#9b90d2; --kommentar:#cf7295; --diff-ins-bg:#25352a; --diff-del-bg:#3a2723; --fk-bg:#1b2531; --fk-border:#2e4257; --overlay:rgba(6,8,11,.55); --shadow-modal:rgba(0,0,0,.6); --mark:#4a4326; --danger:#e0755e; --on-accent:#1a0f0c; color-scheme: dark; } /* follow the OS when no explicit theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg:#12161b; --surf:#1a1f26; --surf-2:#232a33; --surf-3:#2f3843; --senti-neg:#d98b7a; --senti-pos:#7fb494; --ink:#e7e9ec; --ink-2:#b6bcc4; --ink-3:#868d97; --ink-4:#5c636d; --rule:#2b323b; --rule-soft:#222831; --accent:#cd6f56; --case:#c9884f; --forarbete:#9b90d2; --kommentar:#cf7295; --diff-ins-bg:#25352a; --diff-del-bg:#3a2723; --fk-bg:#1b2531; --fk-border:#2e4257; --overlay:rgba(6,8,11,.55); --shadow-modal:rgba(0,0,0,.6); --mark:#4a4326; --danger:#e0755e; --on-accent:#1a0f0c; color-scheme: dark; } } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: var(--sans); font-size: 15px; line-height: 1.6; letter-spacing: -.005em; color: var(--ink); background: var(--bg); font-feature-settings: "kern"; transition: background-color .25s ease, color .25s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* -- Masthead -- */ .masthead { position: sticky; top: 0; z-index: 10; height: 4rem; background: var(--surf); border-bottom: 1px solid var(--rule); } .mast-inner { display: flex; align-items: center; gap: 1rem; height: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 1.5rem; } .masthead .brand { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; letter-spacing: -.015em; color: var(--ink); } .masthead .brand em { color: var(--accent); font-style: italic; } .masthead .brand:hover { text-decoration: none; } .masthead .search { flex: 1; max-width: 36rem; display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; cursor: text; text-align: left; color: var(--ink-3); background: var(--surf-2); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--serif); font-style: italic; font-size: .95rem; } .masthead .search:hover { background: var(--surf-3); } /* Under about 1236px the search label wraps to a second line and the button grows from 40px tall to 62px. The row does not grow with it -- .masthead pins height: 4rem until 64rem -- so the taller button crowds the 64px row and overflows it. Collapse the field to the same 2rem circle the other masthead controls use before that can happen. */ @media (max-width: 80rem) { /* The circle joins the other controls at the end of the row (order, because the DOM keeps the field before the nav for tab order and for the wide layout; .mast-nav orders itself after these below 64rem). The nav takes the space the flexible field used to hold, so between 64rem and 80rem it sits directly after the brand. */ /* the geometry is restated rather than shared with the controls above: the field is 36rem wide over 80rem, so only the collapsed form is a circle. `cursor` is part of that -- collapsed it opens the palette on a click and must not keep the text field's I-beam. */ .masthead .search { order: 1; flex: 0 0 auto; margin-left: auto; margin-right: -.5rem; box-sizing: border-box; width: 2rem; height: 2rem; padding: 0; gap: 0; cursor: pointer; justify-content: center; border-radius: 999px; } .masthead .search > span { display: none; } /* icon-only; opens the palette */ .mast-tools { order: 2; } } .masthead .search .k { margin-left: auto; font-family: var(--sans); font-style: normal; font-size: .72rem; color: var(--ink-2); background: var(--surf); border: 1px solid var(--rule); border-radius: 4px; padding: .1rem .5rem; } .mast-nav { display: flex; gap: 1.4rem; font-size: .88rem; } .mast-nav a { color: var(--ink-2); padding: .35rem 0; border-bottom: 1px solid transparent; } .mast-nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--ink-3); } .mast-nav a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--accent); } /* -- The masthead's icon controls (collection, theme, account) sit in one group at the end of the row, closer to each other than to the nav. -- */ .mast-tools { display: flex; flex: none; align-items: center; gap: .5rem; } /* Every control in that group is the same circle -- the theme toggle, the collection icon and the logged-in editor's initials (.ed-account, mounted by editor.js and skinned here so the group has one definition; style.css already names the editor's classes in its @media print block). Each control keeps only what makes it itself, below and in editor.css. The selector lists the classes rather than adding a shared one to the markup, so a page rendered before this change still draws its theme toggle as a circle. `position: relative` is here because two of the three hang a .mast-badge off their corner. */ .theme-toggle, .collection-toolbar, .ed-account { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; box-sizing: border-box; padding: 0; cursor: pointer; color: var(--ink-2); background: var(--surf-2); border: 1px solid var(--rule); border-radius: 999px; transition: background-color .15s, color .15s; } .theme-toggle:hover, .collection-toolbar:hover, .ed-account:hover { background: var(--surf-3); color: var(--accent); text-decoration: none; } .theme-toggle:focus-visible, .collection-toolbar:focus-visible, .ed-account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* `display: inline-flex` above beats the browser's own rule for [hidden], so a control that hides itself (the collection icon, when the collection is empty) needs the display reset spelled out here */ .theme-toggle[hidden], .collection-toolbar[hidden], .ed-account[hidden] { display: none; } /* the count of documents in the collection, or of an editor's uncommitted changes -- the corner badge shared by the controls that carry one */ .mast-badge { position: absolute; top: -.38rem; right: -.42rem; min-width: 1rem; height: 1rem; box-sizing: border-box; padding: 0 .22rem; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 .62rem/1rem var(--sans); text-align: center; font-variant-numeric: tabular-nums; } .mast-badge:empty { display: none; } /* -- Theme toggle: a single sun/moon control; the icon reflects the scheme the click would switch AWAY from -- moon while light, sun while dark. -- */ .theme-toggle:hover { color: var(--ink); } /* not the accent the others take */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-flex; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: inline-flex; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .icon-sun { display: inline-flex; } :root:not([data-theme]) .theme-toggle .icon-moon { display: none; } } /* -- Body grid -- */ .gr-body { display: grid; align-items: start; max-width: var(--page-max); margin: 0 auto; grid-template-columns: var(--col-toc) minmax(0,var(--col-main)) var(--col-rail); } .gr-body.solo { display: block; max-width: 56rem; margin: 0 auto; } .gr-main { min-width: 0; padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 8rem; max-width: 56rem; } .gr-body.solo .gr-main { max-width: none; } /* -- Frontpage: curated multi-column law index -- cluster headings (h2) and the intro/"vanliga ingångar" paragraphs span every column; the `### category` + its law list flow into columns and never break mid-list, so 20 categories read as 5 scannable bands. The max-width pins the columns at 15rem (3 x 15 + 2 x 1 gap = 47rem) -- multicol otherwise stretches them to fill the container -- and gives the spanning intro paragraphs the same measure, so paragraphs and columns share one edge. */ .frontpage { columns: 15rem 3; column-gap: 1rem; max-width: 47rem; } .frontpage > h2, .frontpage > p { column-span: all; -webkit-column-span: all; } .frontpage > p { color: var(--ink-2); } .frontpage > p strong { color: var(--ink); } .frontpage h2 { font-family: var(--serif); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 2.4rem 0 1rem; padding-bottom: .45rem; border-bottom: 1px solid var(--rule); } .frontpage > p + h2 { margin-top: 2.8rem; } .frontpage h3 { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--ink); margin: 0 0 .35rem; /* avoid: keep the heading with its list; avoid inside: at 15rem columns a heading wraps, and the wrap point must not become a column break splitting the heading's own lines */ break-after: avoid; break-inside: avoid; } .frontpage ul { list-style: none; margin: 0; padding: 0; break-inside: avoid; margin-bottom: 1.6rem; } .frontpage li { line-height: 1.5; padding: .04rem 0; font-size: .93rem; } .frontpage li a { color: var(--ink-2); } .frontpage li a:hover { color: var(--accent); } .frontpage li strong { font-weight: 400; } .frontpage li strong a { color: var(--ink); font-weight: 600; } .frontpage a.ext::after { content: " ↗"; color: var(--ink-4); font-size: .8em; } /* -- TOC -- */ .toc-col { position: sticky; top: 4rem; max-height: calc(100vh - 4rem); overflow-y: auto; background: var(--surf); border-right: 1px solid var(--rule); } nav.toc { padding: 1.75rem 0 5rem; font-size: .82rem; } nav.toc .toc-h { padding: 0 1.5rem; font-family: var(--serif); font-style: italic; font-size: .8rem; color: var(--ink-3); margin-bottom: .6rem; } nav.toc a { display: block; color: var(--ink-2); line-height: 1.35; padding: .2rem 1.5rem .2rem 1.35rem; border-left: 2px solid transparent; } nav.toc a:hover { color: var(--ink); background: var(--surf-2); text-decoration: none; } /* the document's own short id, first in the list: the way back to the top of the document, so it reads as the document rather than as a section of it */ nav.toc a.toc-top { color: var(--ink); font-weight: 600; letter-spacing: -.01em; padding-bottom: .35rem; margin-bottom: .35rem; border-bottom: 1px solid var(--rule); } nav.toc a.lvl2 { padding-left: 2.5rem; color: var(--ink-3); } nav.toc a.lvl3 { padding-left: 3.4rem; color: var(--ink-4); font-size: .78rem; } nav.toc a.active { color: var(--accent); border-left-color: var(--accent); background: var(--surf-2); font-weight: 500; } /* scrollspy collapses every branch but the active section's ancestor path, so only top-level entries (plus the open branch) show; no-JS keeps all visible */ nav.toc a.toc-collapsed { display: none; } /* -- "Spara som PDF" (pdf.js): the printer icon riding the short-id row at the top right of the TOC rail, and its options dialog. Screen chrome only -- the print block hides the icon, and api/pdf.py drops the whole column. The toc-top row reserves its width so a long id never runs under it -- room for both icons, the printer and the collection button beside it. -- */ .toc-list { position: relative; } nav.toc a.toc-top { padding-right: 5.3rem; } .pdf-open { position: absolute; top: .05rem; right: .9rem; display: inline-flex; align-items: center; justify-content: center; padding: .2rem; border: 0; border-radius: 4px; background: none; color: var(--ink-3); cursor: pointer; } .pdf-open:hover { color: var(--accent); background: var(--surf-2); } .pdf-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .pdf-dialog { border: 1px solid var(--rule); border-radius: 8px; background: var(--surf); color: var(--ink); padding: 1.25rem 1.5rem; width: min(26rem, 90vw); box-shadow: 0 12px 40px var(--shadow-modal); font: 400 .9rem/1.5 var(--sans); } .pdf-dialog::backdrop { background: var(--overlay); } .pdf-dialog h2 { font: 600 1.05rem var(--sans); margin: 0 0 .9rem; } .pdf-dialog .pdf-row { display: block; margin: .45rem 0; } .pdf-layout { display: flex; gap: 1.2rem; border: 0; margin: 0 0 .75rem; padding: 0; } .pdf-layout legend { margin-bottom: .25rem; font-weight: 600; } .pdf-kinds { border: 0; margin: .2rem 0 .2rem 1.55rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .8rem; } .pdf-kinds[disabled] { opacity: .45; } /* checkbox + label as two columns, so a long kind name ("Rättsliga ställningstaganden") wraps under its own text, not under the box */ .pdf-kinds label { display: grid; grid-template-columns: auto 1fr; gap: .4rem; align-items: baseline; font-size: .82rem; } .pdf-dialog .pdf-mode { display: flex; gap: 1.2rem; margin-top: .7rem; } .pdf-hint { color: var(--ink-4); font-size: .78rem; margin: .8rem 0 0; } .pdf-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; } .pdf-actions button { font: 500 .82rem var(--sans); border-radius: 5px; padding: .4rem .9rem; cursor: pointer; border: 1px solid var(--rule); background: var(--surf-2); color: var(--ink-2); } .pdf-actions button:hover { background: var(--surf-3); color: var(--ink); } .pdf-actions .pdf-go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* the dialog no longer waits for anything: "Skapa PDF" opens the export's own page (/internal-api/v1/pdf/vanta), which carries the progress bar */ @keyframes spin { to { transform: rotate(360deg); } } /* also .search-spin */ .pdf-err { color: var(--danger); font-size: .82rem; margin: .8rem 0 0; } /* -- Browser-owned PDF collection -------------------------------------- */ .collection-add { position: absolute; top: .05rem; right: 3rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: none; color: var(--ink-3); cursor: pointer; padding: .2rem; } .collection-add:hover { color: var(--accent); background: var(--surf-2); } .collection-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .collection-add[aria-pressed="true"] { color: var(--accent); } .collection-mast-spacer { flex: 1; } @keyframes collection-arrived { 0% { transform: scale(.72); } 40% { transform: scale(1.24); } 70% { transform: scale(.94); } 100% { transform: scale(1); } } .collection-toolbar.collection-arrived { animation: collection-arrived .7s ease-out; } @media (prefers-reduced-motion: reduce) { .collection-toolbar.collection-arrived { animation: none; } } .collection-editor { width: min(68rem, calc(100% - 3rem)); margin: 3.5rem auto 6rem; color: var(--ink); } .collection-editor-head { max-width: 46rem; margin-bottom: 2rem; } .collection-editor-head h1 { font: 500 2.6rem/1.05 var(--serif); margin: .25rem 0 .5rem; } .collection-editor-head p { color: var(--ink-3); } .collection-card, .collection-document-row { border: 1px solid var(--rule); border-radius: 7px; background: var(--surf); } .collection-settings { padding: 1.2rem 1.35rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.4rem; font: 400 .88rem/1.45 var(--sans); } .collection-settings h2 { grid-column: 1 / -1; margin: 0; font: 600 1.15rem var(--serif); } .collection-settings > label:not(.collection-check) { display: grid; gap: .25rem; } .collection-settings input[type=text], .collection-settings input:not([type]) { width: 100%; box-sizing: border-box; border: 1px solid var(--rule); border-radius: 4px; background: var(--surf-2); color: var(--ink); padding: .45rem .55rem; } .collection-settings fieldset { border: 0; padding: 0; margin: 0; } .collection-settings legend { font-weight: 600; margin-bottom: .2rem; } .collection-settings fieldset label { margin-right: 1rem; } .collection-context-kinds { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .3rem 1rem; } .collection-context-kinds[disabled] { opacity: .5; } .collection-documents { margin-top: 2.4rem; } .collection-section-head { display: flex; align-items: baseline; justify-content: space-between; } .collection-section-head h2 { font: 600 1.35rem var(--serif); margin: 0 0 .8rem; } .collection-count, .collection-empty { color: var(--ink-4); font: .82rem var(--sans); } .collection-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; } .collection-document-row { padding: 1rem 1.15rem; } .collection-document-row[draggable=true] { cursor: grab; } .collection-document-head { display: flex; justify-content: space-between; gap: 1rem; } .collection-document-name h3 { margin: .1rem 0 0; font: 500 1.1rem/1.25 var(--serif); } .collection-document-name h3 a { color: var(--ink); } .collection-document-name .eyebrow { font-size: .78rem; } .collection-ordering { flex: none; display: flex; gap: .35rem; align-items: start; } .collection-ordering button, .collection-actions button, .collection-import { border: 1px solid var(--rule); border-radius: 4px; background: var(--surf-2); color: var(--ink-2); padding: .4rem .65rem; cursor: pointer; font: 500 .76rem/1.2 var(--sans); } .collection-document-settings { display: flex; flex-wrap: wrap; gap: .45rem 1.4rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--rule-soft); font: .8rem var(--sans); } .collection-document-settings select { margin-left: .3rem; } .collection-sections { margin-top: .7rem; font: .8rem/1.4 var(--sans); } .collection-sections summary { color: var(--accent); cursor: pointer; } .collection-sections > label { display: block; margin: .5rem 0; font-weight: 600; } .collection-outline { max-height: 18rem; overflow-y: auto; display: grid; gap: .15rem; padding: .5rem .7rem; border-left: 2px solid var(--rule-soft); } .collection-outline label { padding-left: calc((var(--outline-level) - 1) * 1.1rem); } .collection-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; padding: .8rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--surf); } .collection-action-spacer { flex: 1; } .collection-actions .collection-create { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-size: .84rem; } .collection-import input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .collection-error { color: var(--danger); font: .85rem var(--sans); } .collection-direct-link { display: flex; align-items: center; gap: .45rem; margin-top: 1.5rem; font: .78rem/1.4 var(--sans); color: var(--ink-3); } .collection-direct-link > span:first-child { flex: none; } .collection-direct-link > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .collection-direct-link button { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: .25rem; border: 0; border-radius: 4px; background: none; color: var(--ink-3); cursor: pointer; } .collection-direct-link button:hover, .collection-direct-link button.copied { color: var(--accent); background: var(--surf-2); } .collection-copy-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .collection-wait { max-width: 32rem; margin: 18vh auto 0; padding: 0 1.5rem; font: 400 .95rem/1.6 var(--sans); color: var(--ink); } .collection-wait h1 { font: 500 1.5rem/1.25 var(--serif); margin: 0 0 .3rem; } .collection-wait .doc { font-family: var(--serif); font-style: italic; margin: 0 0 1.6rem; } .collection-wait .track { height: .5rem; border-radius: 99px; background: var(--surf-3); overflow: hidden; } .collection-wait .bar { height: 100%; width: 0; border-radius: 99px; background: var(--accent); } .collection-wait .line { display: flex; justify-content: space-between; gap: 1rem; margin-top: .55rem; font-size: .85rem; color: var(--ink-3); } .collection-wait .note { color: var(--ink-4); font-size: .82rem; margin-top: 2.2rem; } .collection-wait .err { color: var(--danger); } @media (max-width: 44rem) { .collection-settings { grid-template-columns: 1fr; } .collection-settings > * { grid-column: 1; } .collection-document-head { display: block; } .collection-ordering { margin-top: .7rem; } .collection-actions { position: static; } } /* -- Frontmatter -- */ /* every id-bearing node in the reading column is a citable anchor target (stycke/punkt/moment included, via nodes.html's id_attr); the specific selectors below repeat this for elements that need a different clearance (e.g. .konvention-instrument's extra +2rem) and must still win, so this catch-all is written with :where() -- zero specificity of its own -- to leave every later, single-class override in charge */ :where(.gr-main) [id] { scroll-margin-top: var(--scroll-clear); } /* #top -- the TOC's first entry jumps here, so it clears the sticky masthead like every other anchor target */ .frontmatter { margin-bottom: 2rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule); scroll-margin-top: var(--scroll-clear); } .eyebrow { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--accent); } .gr-main h1 { font-family: var(--serif); font-weight: 500; font-size: 2.6rem; line-height: 1.05; letter-spacing: -.028em; margin: .3rem 0 .35rem; text-wrap: balance; } .gr-main h1 em { color: var(--accent); font-style: italic; } .gr-body.solo h1 { font-size: 2.1rem; } /* the frontpage lockup: the mark stands beside the eyebrow + h1 stack, in the reading column's own left padding. The negative margin is the mark's width plus the gap (3rem), so at a wide viewport the heading text sits exactly where it does on every other page. Where the padding is narrower than 3rem the pull shrinks with it and the text moves right by the difference -- the mark never crosses the page edge. */ .frontmatter.branded { display: flex; align-items: center; gap: 1rem; } .frontmatter.branded .branded-text { min-width: 0; } .site-mark { flex: none; height: 70px; width: auto; margin-left: calc(-1 * clamp(1.5rem, 4vw, 3rem)); } /* the full official title, sitting under the short-name h1 -- kept compact so a long formal title (SFS/EU acts, treaties) does not steal the top of the page */ .subtitle { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--ink-3); line-height: 1.35; margin: 0; text-wrap: pretty; } /* the metadata block under the h1 -- kept compact (tight rows, small type) so it leads quickly into the text rather than stealing the top of the page */ dl.meta { margin: .7rem 0 0; display: grid; grid-template-columns: max-content 1fr; column-gap: 1rem; row-gap: .1rem; font-family: var(--serif); font-style: italic; font-size: .85rem; line-height: 1.3; color: var(--ink-3); } dl.meta dt { font-weight: 500; font-style: normal; } dl.meta dd { margin: 0; } dl.meta a { color: var(--accent); } /* -- Upphävd (repealed) författning -- a clear repeal callout, a subdued reading column, and a fixed watermark that stays in view at any scroll depth (so an anchor link deep into the text still reads as repealed). -- */ /* .note-banner (EDPB language/version notes, "text not held") shares the callout shape; the flex gap is also what separates the strong label from the note text, since the template butts them together */ .expired-banner, .note-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; margin: 0 0 2.25rem; padding: .7rem 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 5px; background: var(--surf-2); font-size: .92rem; color: var(--ink-2); } .expired-banner strong, .note-banner strong { font-family: var(--serif); font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; } .expired-banner a, .note-banner a { color: var(--accent); } body.expired .gr-main { color: var(--ink-3); } body.expired .gr-main h1, body.expired .kaprubrik, body.expired .rubrik, body.expired h3.artikel, body.expired section.artikel > h2 { color: var(--ink-2); } body.expired::before { content: "Upphävd författning"; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-family: var(--serif); font-weight: 600; white-space: nowrap; font-size: min(11vw, 8rem); color: var(--accent); opacity: .08; pointer-events: none; user-select: none; z-index: 1; } /* an EU act is not a svensk författning, and CELLAR's end-of-validity covers a repeal and a lapse alike, so the watermark says what is certain */ body.expired-eu::before { content: "Gäller inte längre"; } /* -- Historical consolidations (lydelser) + version diff -- */ body.inaktuell .gr-main { color: var(--ink-3); } body.inaktuell .gr-main h1, body.inaktuell .kaprubrik, body.inaktuell .rubrik { color: var(--ink-2); } body.inaktuell::before { content: "Inaktuell författning"; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-24deg); font-family: var(--serif); font-weight: 600; white-space: nowrap; font-size: min(11vw, 8rem); color: var(--accent); opacity: .08; pointer-events: none; user-select: none; z-index: 1; } .version-banner { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; margin: 0 0 2.25rem; padding: .7rem 1rem; border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 5px; background: var(--surf-2); font-size: .92rem; color: var(--ink-2); } .version-banner strong { font-family: var(--serif); font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; } .version-banner a { color: var(--accent); } /* the compare affordance rides the "Ändring införd t.o.m." row of dl.meta, so it inherits that row's small serif voice and adds no box of its own -- a full-width panel above the text pushed the statute below the fold (S1). Closed it is an inline continuation of the cutoff ("SFS 2026:880 · Jämför lydelser 14"); open it drops the