/* MitLivMed type scale (Wiith 2026 design system, web scale): one file for every page, linked right after the page's own \3c style>. "#main" scopes it to the page content (header, footer and the share panel keep their own styles) and outranks the pages' class rules; !important only where a page forces a size with it. display 56 · title-1 40 · title-2 32 · title-3 24 · lead 20 · text 17 · small 15 · label 15 Black · button 19 Black. Crimson Pro for titles (line height 95 %), DM Sans for everything else (130 %; 150 % for long reading). Families and weights are tokens from fonts.css (--font-display, --font-sans, --weight-*): 400 and 900 from the design system, plus 500 and 600 where approved designs use them. Never write a font family or numeric weight in a page. On phones the heading levels step down together and stay in order: h1 40 > h2 30 > h3 24. */ /* ── spacing: one place for every page (scale 4 8 12 16 24 32 48 64 96) ── Section padding 64px, 96px from 600px; section title to content 48px. Not scoped to "#main", so a page's own class rule (.hero, .share, .legal section) still wins. */ section { padding-block: 64px; } @media (min-width: 600px) { section { padding-block: 96px; } } .sec-head { margin-bottom: 48px; } /* ── strong text: the design system has one bold, Black (900). Browser defaults ask for 700 (b, strong, th); this keeps them on the scale. Zero specificity, so any page rule still wins. ── */ :where(b, strong, th) { font-weight: var(--weight-strong); } /* ── text: body and card text (the default for every paragraph and list item) ── */ #main :is(p, li, dd, figcaption) { font-family: var(--font-sans); font-size: 17px; line-height: 1.3; } #main :is(.tier .txt, .need-btn .desc, .help, .linkbtn) { font-family: var(--font-sans); font-size: 17px; line-height: 1.3; } #main .mc .bd p { font-size: 17px !important; } /* text-long: policies and other long reading */ /* ── headings ── */ #main :is(h1, h2, h3) { font-family: var(--font-display); font-weight: var(--weight-strong); line-height: .95; overflow-wrap: break-word; } #main h1 { font-size: 56px; } /* display: the page title */ #main h2 { font-size: 40px; } /* title-1: section titles */ #main h3 { font-size: 24px; font-weight: var(--weight-semibold); } /* title-3: card and group titles, semibold */ /* Title colours: a page title with an italic accent word is black, with only the accent word in Mountain Red; section titles on white are Mountain Red (titles on the green and red bands keep their own colour). */ #main :is(.hero, .nl-hero) h1:has(.accent) { color: var(--text); } #main section:not(.green, .red) .sec-head h2 { color: var(--orange); } /* Titles of boxes and cards that are h2 in the markup read as card titles. */ #main :is(.side, .presskit, .nlcard, .short) h2 { font-size: 24px; font-weight: var(--weight-semibold); } /* Other card and group titles that are not headings in the markup (semibold, like title-3); the titles of the Forside's two choice cards are medium, with room between their lines. */ #main :is(.need-btn strong, .need-label, .lockbox p, .faq summary, .tak li > strong) { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 24px; line-height: .95; } #main .need .need-btn strong { font-weight: var(--weight-medium); line-height: 1.1; } /* :is() above counts as its strongest selector; these titles often wrap to two lines */ /* Big numbers and amounts: never larger than a section title. */ #main :is(.n, .num, .big, .tier .amt) { font-family: var(--font-display); font-weight: var(--weight-strong); font-size: 40px; line-height: .95; } /* ── title-2: the line over a page title (upright, as today) and quotes ── */ #main :is(.kicker, .nlband .kick) { font-family: var(--font-display); font-weight: var(--weight-regular); line-height: .95; } #main .kicker { font-size: 24px; } /* the line above a hero title: one size on every page (20px on phones) */ #main .nlband .kick { font-size: 32px; } #main .cit-text :is(p, li) { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: 28px; line-height: .95; } /* ── lead: the sentence or two under a title ── */ #main :is(.lede, .sec-head p, .intro, .why) { font-family: var(--font-sans); font-size: 20px !important; line-height: 1.3; } /* White on Mountain Red reaches contrast only as large text (24px, or 19px bold), so text on the red bands and the final box keeps those sizes at every width. */ #main :is(.band.red p, .nlband .intro, .final p:not(.micro)) { font-size: 24px !important; line-height: 1.3; } #main .final p.text-strong { font-size: 20px !important; font-weight: var(--weight-strong); } /* smaller, so bold (Forside) */ #main :is(.band.red, .nlband, .final) .micro { font-size: 19px !important; font-weight: var(--weight-strong); } /* ── reading width: two measures ── Intros and the short text that goes with them stop at 640px (about 65 characters), longer running text at 720px. This only replaces widths the pages already set: text without a width keeps the width of its column, and designed blocks (the founder quote and the wide "Vi bygger sammen" section on Om os) keep theirs. Section intros already stop at 640px through .sec-head. Where a hero turns into one column (below 880px), its intro uses the full width, like the heading above it. Intros fill their lines; only headings keep balanced lines. */ #main :is(.hero .lede, .nl-hero .lede, .sharecopy .lede, .tak .lede, .tak .fine, .screen .why, .nlband .intro, .notmember, .nl-hero .body2, .nlend p) { max-width: 640px; } #main details.faq p { max-width: 720px; } #main .legal, #main details.faq summary { overflow-wrap: anywhere; } #main :is(.lede, .sec-head p, .intro, .why) { text-wrap: pretty; } @media (max-width: 880px) { #main :is(.hero, .nl-hero) .lede { max-width: none; } } /* ── text-strong: short bold calls to action in running text ── */ #main :is(.enter, a.go) { font-family: var(--font-sans); font-size: 17px; font-weight: var(--weight-strong); } /* ── small: meta, fine print, table text ── */ #main :is(.micro, .fine, .meta, .tm, .small, .disc, .where, .hint, .dx, .muted, .by, .tx p, .consent span, td, th) { font-family: var(--font-sans); font-size: 15px !important; line-height: 1.3; } /* ── label: tags, dates, form labels and small bold labels ── */ #main :is(.tag, .badge, .lock, .eyebrow2, .date, .lab, .signup label, .payfields label, legend, .need .or, .tier .flag, .backbtn, .pw button, span.t) { font-family: var(--font-sans); font-style: normal; font-size: 15px !important; font-weight: var(--weight-strong); line-height: 1.3; } /* ── button-label ── */ #main :is(.btn, .seg button, .pill, .mplay) { font-size: 19px !important; font-weight: var(--weight-strong) !important; } /* The arrow on the sign-up buttons slides gently on hover and keyboard focus. */ .btn .arr { display: inline-block; transition: transform .3s ease; } .btn:is(:hover, :focus-visible) .arr { transform: translateX(5px); } @media (prefers-reduced-motion: reduce) { .btn .arr { transition: none; } } /* ── button hover (Wiith 2026) ── Not scoped to #main, so the header's "Opret profil" gets it too. Filled buttons darken to Mountain Red dark; outlined buttons take the soft tint and a Mountain Red edge (so the tint is clearly seen on white), white buttons on the red box take the soft tint; link-like buttons thicken their underline; unselected choices edge in Mountain Red, like .need-btn, and the unselected choice on the red box darkens a little (keeps its contrast). Action buttons also show it on keyboard focus. Disabled buttons do not change. Colours change in 120 ms (duration-fast, ease-standard), at once under reduced motion. The share sheet's buttons are in share.css. */ .btn, .seg button, .tier, .pw button, .need-btn { transition-property: background-color, color, border-color, box-shadow, opacity; transition-duration: 120ms; transition-timing-function: cubic-bezier(.2, 0, 0, 1); } .btn:not(:disabled):is(:hover, :focus-visible) { background-color: var(--orange-dark); } .btn:is(.ghost, .sec):not(:disabled):is(:hover, :focus-visible), .final .btn:not(:disabled):is(:hover, :focus-visible), .seg button[aria-pressed="true"]:hover { background-color: var(--orange-tint); } .seg button:not([aria-pressed="true"]):hover { background-color: rgba(51, 41, 38, .16); } .btn:is(.ghost, .sec):not(:disabled):is(:hover, :focus-visible), .tier:not([aria-checked="true"]):hover { border-color: var(--orange); } .pw button:is(:hover, :focus-visible) { background-color: var(--orange-light); } :is(.backbtn, .linkbtn, button.link):is(:hover, :focus-visible) { text-decoration-thickness: 2px; } @media (prefers-reduced-motion: reduce) { .btn, .seg button, .tier, .pw button, .need-btn { transition: none; } } /* ── shadows and lift (Wiith 2026) ── The brand is flat: shadows only lift what floats. shadow-sm for a picture resting just above the page; shadow-md for what floats over a photo or the page (play, share and flip buttons, the lock box, menus) and for every card or picture on hover. Cards that lift on hover all do it the same way: up 2px with shadow-md, in and out in 200 ms (duration-base, ease-standard), and at once under reduced motion. */ :root { --shadow-sm: 0 1px 2px rgba(51, 41, 38, .08), 0 2px 8px rgba(51, 41, 38, .06); --shadow-md: 0 4px 12px rgba(51, 41, 38, .1), 0 12px 32px rgba(51, 41, 38, .08); } :is(.lcard.go, .flip .front, .proof a.pt, .member, .art:has(.stretch), a.ev) { transition: box-shadow 200ms cubic-bezier(.2, 0, 0, 1), transform 200ms cubic-bezier(.2, 0, 0, 1); } :is(.lcard.go:hover, .flip .front:hover, .proof a.pt:hover, .member:hover, .member[aria-expanded="true"]:hover:hover, .art:has(.stretch):hover, a.ev:hover) { box-shadow: var(--shadow-md); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { :is(.lcard.go, .flip .front, .proof a.pt, .member, .art:has(.stretch), a.ev) { transition: none; } } /* ── choice cards (Forside and Artikler) ── Two cards with "ELLER" in a Lake Blue circle between them, overlapping each by 14px; the chosen card takes the Mountain Red tint. On phones the two cards become one panel split by a line, with "ELLER" on the line: the halves share the line (the second moves up by its border width) and the chosen half sits on top, so its Mountain Red edge runs all the way round, rounded corners included. */ .need { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; column-gap: 52px; margin-bottom: 26px; } .need-btn { position: relative; text-align: left; text-decoration: none; font: inherit; color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: 12px; padding: 20px 22px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; } .need-btn strong { font-family: var(--font-display); font-size: 24px; line-height: .95; font-weight: var(--weight-strong); } .need-btn span { font-size: 14px; color: var(--muted); } .need-btn.on { border-color: var(--orange); background: var(--orange-tint); } .need-btn.on span { color: var(--orange-dark); } .need-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .need-btn .pick { font-size: 14px; font-weight: var(--weight-strong); color: var(--orange-t); margin-top: 4px; } .need-btn .pick::after { content: "Tryk for at vælge"; } .need-btn.on .pick::after { content: "✓ Valgt"; } .need-btn:not(.on):hover { border-color: var(--orange); } .need .or { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-dark); color: #fff; border: 3px solid var(--bg); text-transform: uppercase; letter-spacing: .08em; text-indent: .08em; } @media (max-width: 700px) { .need { grid-template-columns: 1fr; gap: 0; } .need-btn:first-child { border-radius: 15px 15px 0 0; padding-bottom: 54px; } .need-btn:last-child { border-radius: 0 0 15px 15px; margin-top: -2px; padding-top: 54px; } .need-btn.on { z-index: 1; } .need .or { position: relative; left: auto; top: auto; transform: none; justify-self: center; margin: -40px 0; } } /* ── topics (Artikler, Videoer) ── A button ("Emner: ") opens a dialog with the topic links under their first letters, each with its article count. They are plain links to /artikler?emne=…; the pills themselves are in topic-pills.css. Without JavaScript (no html.js, set by navigation.js before the content is drawn) the dialog is an ordinary list in the page, so the links work; with it, the compact button is there from the first paint. */ .topic-picker { margin: 0 0 18px; } .topic-dlg nav { display: block; padding: 0; } /* the pages style a bare nav as the menu bar */ .topic-dlg .topic-all { margin: 0 0 18px; } .topic-group h3 { margin: 0 0 8px; font-size: 20px; color: var(--orange-dark); } .topic-group + .topic-group { margin-top: 18px; } .topic-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } html:not(.js) .topic-picker .topic-dlg:not([open]) { display: block; position: static; width: auto; max-height: none; background: none; box-shadow: none; overflow: visible; } html:not(.js) .topic-picker .topic-dlg .dlg-in { padding: 0; max-height: none; overflow: visible; } html:not(.js) .topic-picker .topic-dlg .dlg-hd { display: none; } /* The row above the article cards: the topic control and sorting (the same pills; the chosen one is tinted and underlined). */ .article-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; margin: 0 0 18px; } .article-controls .topic-picker { margin: 0; } .article-sort { display: flex; flex-wrap: wrap; gap: 8px; } /* ── article cards (Forside and Artikler) ── The synopsis is smaller than body text and shows at most three lines, ending in "…" (the full text stays in the page). */ #main .art .bd p { font-size: 15px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } /* Articles of the "Jeg leder efter noget konkret" category (.sol) rest on Lake Blue tint, so they read apart from the others wherever a card shows (Forside, Artikler, the related cards of an article). Text keeps 5:1 or more. */ .art.sol { background: var(--blue-tint, #EDF4FA); } /* ── whole-card button ── The card's title is a