/* ═══════════════════════════════════════════════════════════════════════════ * MDAS branding v2 — ÉN farverampe og ÉN font for hele platformen. * * Kilde: cotton-styling-guides/pdfdesignguide.md §3-4 (PDF-designguide udg. 2, * 03.09.2026) og cotton-styling-guides/laesbarhed-opsummering.md §1-2. * Skærm og PDF deler bevidst tokennavne, så en farve hedder det samme uanset * om den render'es af browseren eller WeasyPrint. * * Loades FØR tokens.css (som mapper de gamle navne herover) og før al app-CSS. * Filen er den ENESTE der må indeholde hex — alt andet bruger var(--…). * Håndhæves af mdas/tests_mellemstation/test_branding_hex.py. * * HOVEDREGEL: brandfarven er en FLADE, ikke en tekstfarve. #AEAF16 har 2,4:1 * mod hvid og kan derfor hverken bære hvid tekst eller bruges som tekst på * hvid. Brødtekst er altid --ink. Hierarki laves med vægt og størrelse. * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Font: Inter variabel, self-hostet ────────────────────────────────────── * Self-host frem for CDN af to grunde: GDPR (Google Fonts sender IP'er til * USA) og worker-appen, der skal virke på en byggeplads uden dækning. * Inter er frit under SIL Open Font License 1.1. * * ss04 = disambiguering af I/l/1 UDEN skråstreget nul. Skråstreget nul (`zero`) * må ALDRIG slås til: på dansk bliver 0 dermed forvekslet med Ø — «4600 Køge» * og «Ølgod» er værre end problemet det løser. Derfor ss04, ikke ss02. * Teststreng efter opsætning: Ø0 0Ø Il1 4600 Køge Ølgod 6870 * ------------------------------------------------------------------------- */ @font-face { font-family: "InterVariable"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "InterVariable"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/InterVariable-Italic.woff2") format("woff2"); } :root { /* ── Brandrampe (afledt i OKLCH fra logoets #AEAF16, mørke trin drejet * mod grøn så de ikke bliver kaki) ─────────────────────────────────── */ --brand-50: #F4F5E9; /* 1,1:1 — tabelhoved, callout, hover */ --brand-100: #E9EAD3; /* 1,2:1 — fokusring, krydsmarkering */ --brand-200: #D9DCAD; /* 1,4:1 — badge «positiv», søgetræf */ --brand-500: #AEAF16; /* 2,4:1 — KUN flader: logo, aktiv markør, prik */ --brand-700: #6C7418; /* 5,4:1 — ikoner, sekundære links */ --brand-800: #555C1A; /* 7,5:1 — brandfarvet tekst (sjældent) */ --brand-900: #333A0E; /* 13,4:1 — mørk bjælke, tekst på lys brandtint */ /* ── Tekst ───────────────────────────────────────────────────────────── * Nær-sort med et strejf af kuløren: binder sig til brandet uden at koste * kontrast. Brødtekst er ALTID --ink. */ --ink: #1E2114; /* 16,4:1 — al brødtekst, overskrifter */ --ink-2: #43483A; /* 9,4:1 — sekundær tekst, celleindhold */ --muted: #6B6F63; /* 5,2:1 — labels, tomme værdier, hjælpetekst */ /* ── Flader og streger ───────────────────────────────────────────────── * AFVIGELSE fra PDF-guiden: dér er --line = --ink (0,5 pt streger på * papir). På skærm ville rammer i næsten-sort æde siden, så --line er den * lyse skærmramme og --line-strong bærer PDF'ens --line-soft-værdi. */ --page: #F4F4EE; /* sidebaggrund — off-white, aldrig ren hvid */ --card: #FFFFFF; /* kort, tabeller, sidebar */ --white: #FFFFFF; /* ren hvid, når det SKAL være hvid (tekst på mørk) */ --line: #E1E2D8; /* rammer og skillelinjer på skærm */ --line-soft: #EDEEE6; /* svag rækkeskille */ --line-strong: #C9CBC2; /* totaler, fodnotestreg */ --surface: #F1F1EC; /* neutral flade: weekend, zebra */ --surface-2: #E6E7E0; /* stærkere neutral: gruppe-række, helligdag */ --head-bg: var(--brand-50); /* ── Status ──────────────────────────────────────────────────────────── * Badges må ikke konkurrere med brandet: «færdig» får brandets EGEN rampe, * så den grønne bliver belønningen. Ingen blå, ingen anden grøn. */ --status-ok-bg: #D9DCAD; --status-ok-fg: #333A0E; --status-neutral-bg: #E6E7E0; --status-neutral-fg: #3A3D34; --status-action-bg: #FAEEDA; --status-action-fg: #854F0B; --status-error-bg: #FDECEA; --status-error-fg: #B3261E; /* ── Planfarver (drifts gitre — én betydning hver, altid suppleret af * tekst i cellen, aldrig farve alene) ───────────────────────────────── */ --plan-arbejde: #6C7418; /* egne folk (hvid tekst) */ --plan-ekstern: #3F6E7A; /* underentreprenør (hvid tekst) */ --plan-konflikt: #B3261E; /* dobbeltbooking (hvid tekst) */ --plan-advarsel: #C98A00; /* ubekræftet (ink) */ --plan-fravaer: #D9E4EA; /* fravær (ink) */ --plan-idag: var(--brand-500); /* ── Typografi ───────────────────────────────────────────────────────── * Systemstakken bagefter er ikke pynt: er woff2-filerne ikke deployet, * skal siden stadig være læsbar. */ --font-sans: InterVariable, Inter, system-ui, -apple-system, "Segoe UI", sans-serif; --font-num: var(--font-sans); /* tabular-nums frem for rigtig monospace: mange monospace-fonte har skråstreget nul som standard → Ø-problemet igen. */ /* ── Læsbarhed: «Lettere læsning» pr. bruger ─────────────────────────── * Renderes server-side som data-easyread på (shared/context_ * processors.py → templates/base.html), så der aldrig er et glimt af * forkert layout. Kun TEKST-relaterede ting sidder på kontakten — ikke * farver, ikoner og animationer; ellers bliver den uforudsigelig. */ --fs: 1rem; --lh: 1.5; --measure: 68ch; --align: initial; --feat: "calt" 1, "ss04" 1; /* ── Radius og skygge ──────────────────────────────────────────────────── */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(30, 33, 20, .06); --shadow-md: 0 2px 8px rgba(30, 33, 20, .07); --shadow-lg: 0 8px 24px rgba(30, 33, 20, .12); } :root[data-easyread="on"] { --fs: 1.2rem; --lh: 1.75; --measure: 58ch; --align: left; /* aldrig justify — «floder» af hvidt er dokumenteret generende, og værst for ordblinde læsere */ } /* ── Boks-model ─────────────────────────────────────────────────────────── * border-box overalt. Alle ni apps' custom.css satte det i forvejen selv, * så det ændrer intet for dem — men sider på den nye skal loader ingen * app-CSS og arvede derfor browserens content-box. Konsekvensen var subtil: * en knap med `width: 100%` og vandret padding blev bredere end sin celle og * stak ud over kortkanten på mobil. * * Kun box-sizing — IKKE den sædvanlige `* { margin: 0; padding: 0 }`. Den * ville nulstille afstande i ni apps på én gang. */ *, *::before, *::after { box-sizing: border-box; } /* ── Grundlæggende typografi ────────────────────────────────────────────── * Skalér med rem, ikke faste px: så virker det SAMMEN med browserzoom og * systemets tekststørrelse i stedet for at slås med dem. */ html { font-family: var(--font-sans); font-size: 100%; } body { font-family: var(--font-sans); font-size: var(--fs); line-height: var(--lh); font-feature-settings: var(--feat); text-align: var(--align); color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; } /* Overskrifter må ikke arve easyreads 1.75 — de får luft nok af deres størrelse, og 1.75 river dem fra hinanden. */ h1, h2, h3, h4 { line-height: calc(var(--lh) - .3); color: var(--ink); } /* Linjelængde 60-70 tegn: den bedst dokumenterede læsbarhedsindstilling. Lange linjer får øjet til at miste linjen ved returspringet. */ p, li, dd { max-width: var(--measure); } /* Tal skal kunne stilles op i kolonner, så forskelle springer i øjnene. */ .num, .tabular, td.num, th.num { font-variant-numeric: tabular-nums; font-family: var(--font-num); } td.num, th.num { text-align: right; } /* Sags-/dokumentnumre: dæmp det fælles præfiks, fremhæv det der skiller. Ingen understregning — den løber sammen med bundstregen i fx «rev_01». */ .ref { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 600; } .ref .pre { color: var(--muted); font-weight: 400; } a .ref, .ref a { text-decoration: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }