/* ========================================================================== JustStatics - Grundsæt Den eneste kilde til farver, typografi, afstande og former. Alle sektioner bygges af disse variabler og byggeklodser; ingen rå hex- eller px-værdier i sektionerne. Skalering: hvert tal har et helt tal ved 1280 px skærmbredde og et helt tal ved 2560 px, og browseren glider lineært imellem med clamp(): clamp(min, skæring + hældning * vw, max) Med de to ankerpunkter er skæringen altid 2 * min - max, og hældningen (max - min) * 0,078125 vw. Under 1280 px står værdierne på min (mobil får egne regler senere), over 2560 px står de på max. Ingen sektion må have sine egne desktop-breakpoints. Størrelser, 28.09.2026, kalibreret efter Emils to skærme: 2560 px (2560x1440 ved 100 %): 80 % af første udgave. 1536 px (1920x1080-bærbar ved 125 %): 80 % af det igen. Linjen gennem de to punkter giver tallene ved 1280 og 2560 px, rundet til hele tal. 01.10.2026: brødteksten var for lille på Emils skærme. Brødtekst sat op til 14 -> 16 px og lille tekst til 12 -> 13 px. Indledning og kortoverskrifter er rykket med op (16 -> 20 og 17 -> 24), så trinene stadig er forskellige. Brødtekst går ikke under 14 px og lille tekst ikke under 12 px. Højderegel: det vigtigste i en sektion (fx faner og graf) skal kunne ses på én skærm på en lille bærbar, 1280 x 600. Tjekkes med scripts/skaermtest.js, før en sektion vises frem. Poppins: skal selv-hostes i produktion (woff2, 400/500/600, font-display: swap). Siderne loader den midlertidigt fra Google Fonts. ========================================================================== */ :root { /* --- Primitiver: farver ------------------------------------------------ */ --white: #FFFFFF; --ink: #0A0B0D; /* "sort". Aldrig #000 */ --orange: #F97316; /* brandets orange, samme som knapperne i dag */ --orange-strong:#EA580C; /* hover, og orange tekst i store størrelser */ --grey-50: #F6F7F9; /* baggrunde og kort */ --grey-100: #ECEEF2; /* hårfine linjer, gitterlinjer i grafer */ --grey-200: #DDE1E7; /* tydelige linjer, kant på felter og sekundærknap */ --grey-300: #C5CAD3; /* alternativet i grafer */ --grey-500: #666C78; /* dæmpet tekst: meta, kilder, labels */ --grey-700: #454B57; /* brødtekst */ /* --- Primitiver: typeskala ---------------------------------------------- Hele tal i begge ender (1280 px -> 2560 px). Store trin vokser mere end små, så en label ikke vokser lige så meget som en overskrift. */ --text-sm: clamp(0.75rem, 0.6875rem + 0.078125vw, 0.8125rem); /* 12 -> 13 */ --text-base: clamp(0.875rem, 0.75rem + 0.15625vw, 1rem); /* 14 -> 16 */ --text-lg: clamp(1rem, 0.75rem + 0.3125vw, 1.25rem); /* 16 -> 20 */ --text-xl: clamp(1.0625rem, 0.625rem + 0.546875vw, 1.5rem); /* 17 -> 24 */ --text-2xl: clamp(1.1875rem, 0.5625rem + 0.78125vw, 1.8125rem); /* 19 -> 29 */ --text-3xl: clamp(1.4375rem, 0.6875rem + 0.9375vw, 2.1875rem); /* 23 -> 35 */ --text-4xl: clamp(1.8125rem, 0.8125rem + 1.25vw, 2.8125rem); /* 29 -> 45 */ --text-5xl: clamp(2.1875rem, 1rem + 1.484375vw, 3.375rem); /* 35 -> 54 */ --text-6xl: clamp(2.5625rem, 0.9375rem + 2.03125vw, 4.1875rem); /* 41 -> 67 */ /* --- Primitiver: afstande ------------------------------------------------ */ --space-3xs: clamp(0.1875rem, 0.125rem + 0.078125vw, 0.25rem); /* 3 -> 4 */ --space-2xs: clamp(0.3125rem, 0.125rem + 0.234375vw, 0.5rem); /* 5 -> 8 */ --space-xs: clamp(0.5rem, 0.25rem + 0.3125vw, 0.75rem); /* 8 -> 12 */ --space-s: clamp(0.6875rem, 0.375rem + 0.390625vw, 1rem); /* 11 -> 16 */ --space-m: clamp(1rem, 0.5rem + 0.625vw, 1.5rem); /* 16 -> 24 */ --space-l: clamp(1.3125rem, 0.625rem + 0.859375vw, 2rem); /* 21 -> 32 */ --space-xl: clamp(1.9375rem, 0.875rem + 1.328125vw, 3rem); /* 31 -> 48 */ --space-2xl: clamp(2.625rem, 1.25rem + 1.71875vw, 4rem); /* 42 -> 64 */ --space-3xl: clamp(3.875rem, 1.75rem + 2.65625vw, 6rem); /* 62 -> 96 */ /* --- Semantik: farver --------------------------------------------------- */ --bg: var(--white); --bg-alt: var(--grey-50); --bg-inverse: var(--ink); /* højst én mørk sektion pr. side */ --text: var(--ink); /* overskrifter og vigtig tekst */ --text-body: var(--grey-700); --text-muted: var(--grey-500); --text-inverse: var(--white); --text-on-accent: var(--white); /* hvid, halvfed tekst på orange */ --accent: var(--orange); --accent-strong: var(--orange-strong); --line: var(--grey-100); --line-strong: var(--grey-200); --chart-us: var(--orange); /* statics og JustStatics */ --chart-other: var(--grey-300);/* alternativet */ --chart-rest: var(--grey-200);/* resten i en andel, fx en donut */ --chart-grid: var(--grey-100); --focus: var(--ink); /* --- Semantik: typografi ----------------------------------------------- Otte roller. Hierarkiet styres med størrelse, vægt og farve, ikke med flere størrelser. */ --font: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --type-display: var(--text-6xl); /* kun forsidens hero: 41 -> 67 */ --type-h1: var(--text-5xl); /* undersiders hero: 35 -> 54 */ --type-h2: var(--text-4xl); /* sektionsoverskrifter: 29 -> 45 */ --type-h3: var(--text-xl); /* kort- og punktoverskrifter: 17 -> 24 */ --type-lead: var(--text-lg); /* indledning under en overskrift: 16 -> 20 */ --type-body: var(--text-base); /* 14 -> 16 */ --type-small: var(--text-sm); /* meta, kilder, labels, noter: 12 -> 13 */ --type-stat: var(--text-3xl); /* tal i stat-kort: 23 -> 35 */ --leading-display: 1.02; --leading-heading: 1.1; --leading-title: 1.25; --leading-lead: 1.45; --leading-body: 1.6; --tracking-display: -0.04em; --tracking-h1: -0.035em; --tracking-h2: -0.03em; --tracking-h3: -0.02em; --tracking-label: 0.08em; --measure: 65ch; /* brødtekst */ --measure-lead: 52ch; /* --- Layout: FORELØBIG --------------------------------------------------- Container, gitter og rammer afgøres, når sektionerne er lavet. Værdierne her er kun med, så siderne kan vises i mellemtiden. */ --container: clamp(75rem, 45rem + 37.5vw, 105rem); /* 1200 -> 1680 */ --gutter: clamp(2.5rem, 1rem + 1.875vw, 4rem); /* 40 -> 64 */ --grid-gap: var(--space-m); --section-space: var(--space-3xl); /* luft top og bund i hver sektion */ --stack-heading: var(--space-s); /* overskrift -> tekst */ --stack-block: var(--space-xl); /* sektionshoved -> indhold */ /* --- Former -------------------------------------------------------------- To hjørner. Kontrol: knapper, felter, faner. Flade: kort, billeder, grafer. Ingen piller. */ --radius-control: clamp(0.4375rem, 0.25rem + 0.234375vw, 0.625rem); /* 7 -> 10 */ --radius-surface: clamp(0.625rem, 0.25rem + 0.46875vw, 1rem); /* 10 -> 16 */ --shadow-raise: 0 1px 2px rgb(10 11 13 / .05), 0 18px 40px -22px rgb(10 11 13 / .28); /* --- Bevægelse ------------------------------------------------------------ */ --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 150ms; --dur: 250ms; } /* ========================================================================== Grundlag ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text-body); font-family: var(--font); font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } h1, h2, h3, h4 { color: var(--text); font-weight: var(--weight-semi); text-wrap: balance; } p { text-wrap: pretty; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } /* ========================================================================== Typografi-roller ========================================================================== */ .t-display { font-size: var(--type-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--weight-semi); color: var(--text); } .t-h1 { font-size: var(--type-h1); line-height: var(--leading-heading); letter-spacing: var(--tracking-h1); font-weight: var(--weight-semi); color: var(--text); } .t-h2 { font-size: var(--type-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-h2); font-weight: var(--weight-semi); color: var(--text); } .t-h3 { font-size: var(--type-h3); line-height: var(--leading-title); letter-spacing: var(--tracking-h3); font-weight: var(--weight-semi); color: var(--text); } .t-lead { font-size: var(--type-lead); line-height: var(--leading-lead); color: var(--text-body); max-width: var(--measure-lead); } .t-body { font-size: var(--type-body); line-height: var(--leading-body); color: var(--text-body); max-width: var(--measure); } .t-small { font-size: var(--type-small); line-height: 1.5; color: var(--text-muted); } .label { font-size: var(--type-small); line-height: 1.4; font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); } .num { font-variant-numeric: tabular-nums; } /* ========================================================================== Layout (foreløbig, se ovenfor) ========================================================================== */ .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .section { padding-block: var(--section-space); background: var(--bg); } .section--alt { background: var(--bg-alt); } .stack-heading > * + * { margin-top: var(--stack-heading); } /* Den ene mørke sektion. Den skifter de semantiske farver, så alt inde i den bruger de samme klasser som resten af siden. */ .section--inverse { background: var(--bg-inverse); --text: var(--white); --text-body: rgb(255 255 255 / .78); --text-muted: rgb(255 255 255 / .6); --line: rgb(255 255 255 / .12); --line-strong: rgb(255 255 255 / .22); --focus: var(--white); color: var(--text-body); } /* ========================================================================== Byggeklodser ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font: var(--weight-medium) var(--type-body)/1 var(--font); padding: 0.85em 1.35em; border-radius: var(--radius-control); border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--text-on-accent); font-weight: var(--weight-semi); } .btn--primary:hover { background: var(--accent-strong); } .btn--secondary { background: var(--bg); color: var(--text); border-color: var(--line-strong); } .btn--secondary:hover { background: var(--bg-alt); } .section--inverse .btn--secondary { background: transparent; } .section--inverse .btn--secondary:hover { background: rgb(255 255 255 / .06); } .card { background: var(--bg-alt); border-radius: var(--radius-surface); padding: var(--space-l); } .section--alt .card { background: var(--bg); } .section--inverse .card { background: rgb(255 255 255 / .05); } .stat { display: grid; gap: var(--space-2xs); } .stat__value { font-size: var(--type-stat); line-height: 1; letter-spacing: var(--tracking-h2); font-weight: var(--weight-semi); color: var(--text); font-variant-numeric: tabular-nums; } .stat__text { font-size: var(--type-body); color: var(--text-body); max-width: 32ch; } .stat__source { font-size: var(--type-small); color: var(--text-muted); } /* Søjlediagram: orange er statics og jer, grå er alternativet. Hver søjle har sin værdi skrevet på; ingen baggrundsspor, ingen skygger, ingen 3D. Højden regnes ud fra værdien: --v på søjlen, --max på diagrammet. */ .bars { --bars-max: clamp(9.1875rem, 4rem + 6.484375vw, 14.375rem); /* 147 -> 230 */ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: var(--space-xs); border-bottom: 1px solid var(--line-strong); } .bars__col { display: flex; flex-direction: column; gap: var(--space-2xs); } .bars__value { font-size: var(--type-small); font-weight: var(--weight-semi); color: var(--text); text-align: center; font-variant-numeric: tabular-nums; } .bars__bar { height: calc(var(--v) / var(--max, 100) * var(--bars-max)); background: var(--chart-other); border-radius: 6px 6px 0 0; } .bars__col.is-us .bars__bar { background: var(--chart-us); } .bars__labels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-xs); margin-top: var(--space-xs); } .bars__labels span { font-size: var(--type-small); line-height: 1.35; color: var(--text-body); text-align: center; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; } }