/* * Fargene og formene. ÉN kilde. * * Hentet fra PALETT.md, som er fasit for alle NordicOps-flater. `vakt_farger` * krever at ingen hex-kode finnes utenfor denne fila — i 1.0 lå paletten spredt * over 18 HTML-sider, og en fargeendring var en tekstjakt. * * KJERNEREGELEN FRA PALETT.md: INGEN LILLA. NOENSINNE. * Én kald aksent — «Nordisk is». Ingen gradient-fyll, ingen frostet glass, * ingen glød. Flatene er solide. */ /* * ┌───────────────────────────────────────────────────────────────────────────┐ * │ FONTENE MÅ LASTES, IKKE BARE NAVNGIS. │ * │ │ * │ `--font-display` pekte på «Schibsted Grotesk» fra første dag, men det │ * │ fantes ingen `@font-face` noe sted i hub2. Navnet traff ingenting, og │ * │ hver eneste overskrift falt tilbake på systemfonten — uten at noe sa │ * │ fra. En font som mangler er den stilleste feilen i en kodebase: siden │ * │ ser bare litt billigere ut enn den skal, overalt, hele tiden. │ * │ │ * │ Filene er de SAMME som nettsiden bruker (`NordicOpsWEB/fonts/`), så │ * │ huben og nettsiden endelig er satt i samme skrift. │ * └───────────────────────────────────────────────────────────────────────────┘ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; /* `swap`: teksten vises straks i systemfonten og bytter når fila er nede. `block` ville gitt en usynlig side de første 100 ms. */ font-display: swap; src: url('/felles/font/inter-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/felles/font/schibsted-grotesk-latin.woff2') format('woff2'); } :root { --navy: #0D1B2A; --navy2: #13273F; --navy3: #1A3350; --white: #FFFFFF; --offwhite: #EEF2F7; --silver: #94A3B8; --muted: #8996AB; --ice: #7DD3FC; --ice-light: #BAE6FD; --ice-bg: rgba(125, 211, 252, .14); --green: #22C55E; --warn: #F5B841; --bad: #EF6461; --bad-text: #FFD9D8; /* * ┌─────────────────────────────────────────────────────────────────────────┐ * │ DE TONEDE FLATENE — EN PALETTFARGE GJORT SVAK. │ * │ │ * │ Ei pille, en valgt chip og et varselbånd ligger alle på den samme │ * │ fargen med rundt 14 % dekning. Verdien sto SKREVET UT som kanaler tre │ * │ steder: `.pille.ok/.varsel/.feil` i base.css, `.filter.haster.valgt` i │ * │ ringeliste.css og `.pille.endring.opp` i panel.css. Det er kopier av │ * │ paletten som ikke følger med når `--green` endres — akkurat det │ * │ `vakt_farger` finnes for, og de slapp gjennom fordi de sto som `rgba()` │ * │ og ikke som en hex. │ * │ │ * │ `color-mix` leser TOKENET. Da finnes fargen ett sted, og en toning │ * │ trenger ikke lenger et menneske som husker tre filer. │ * └─────────────────────────────────────────────────────────────────────────┘ */ --ice-svak: color-mix(in srgb, var(--ice) 14%, transparent); --green-svak: color-mix(in srgb, var(--green) 14%, transparent); --warn-svak: color-mix(in srgb, var(--warn) 14%, transparent); --bad-svak: color-mix(in srgb, var(--bad) 16%, transparent); /* * ┌─────────────────────────────────────────────────────────────────────────┐ * │ DOKUMENTRAMPA — KUN FOR HVITT PAPIR, OG DEN MANGLET. │ * │ │ * │ `kontrakt.css` bruker `--doc-ink`, `--doc-dim`, `--doc-line` og │ * │ `--doc-accent` på avtalearket. Ingen av dem var definert i hub2 — │ * │ verken her eller der. `color: var(--doc-ink)` med en udefinert variabel │ * │ er ugyldig ved beregning, og da ARVER `color` i stedet: hele avtale- │ * │ teksten sto i `--offwhite` (#EEF2F7) på hvitt ark. Sett i nettleseren │ * │ 23.08.2026 — § 1 var så vidt synlig, og det gjaldt både skjermen og det │ * │ som kommer ut av utskriften. │ * │ │ * │ Verdiene er PALETT.md sine, ordrett. Ren `--ice` er for lys på hvitt, │ * │ derfor har papiret sin egen aksent. Disse fem brukes ALDRI på navy. │ * └─────────────────────────────────────────────────────────────────────────┘ */ --doc-ink: #0D1B2A; --doc-dim: #4B5E7A; --doc-faint: #8195AF; --doc-line: #E2E8F0; --doc-accent: #0284C7; --border-faint: rgba(255, 255, 255, .05); --border: rgba(255, 255, 255, .08); --border-strong: rgba(255, 255, 255, .12); --border-hover: rgba(255, 255, 255, .2); --fill-subtle: rgba(255, 255, 255, .05); /* * ┌─────────────────────────────────────────────────────────────────────────┐ * │ KANTEN PÅ EN KONTROLL ER IKKE EN KANT PÅ ET KORT. │ * │ │ * │ En kortkant skal så vidt anes; en avkryssingsrute skal SES. WCAG │ * │ 1.4.11 krever 3:1 for grensa rundt en kontroll man skal treffe. │ * │ `--border-strong` er 0,12 hvitt, og den tomme ruta ble målt til 1,23:1 │ * │ mot kortflata 10.09.2026 — praktisk talt usynlig, på den ene tingen │ * │ man skal treffe med tommelen i Løypa. Den huka ruta er is og │ * │ tydelig; den tomme, som er 22 av 22 punkter når man starter, var det │ * │ ikke. │ * │ │ * │ 0,38 hvitt over `--navy2` gir 3,41:1 — regnet etter WCAG-formelen, med │ * │ margin til 3:1 fordi tonen legges over ulike flater på ulike skjermer. │ * │ Egen variabel og ikke en sterkere `--border-strong`: en kortkant på │ * │ 0,38 ville laget et gjerde av hver eneste liste. │ * └─────────────────────────────────────────────────────────────────────────┘ */ --kontroll-kant: rgba(255, 255, 255, .38); /* * Radius for en KONTROLL på 18 px, ikke for et kort. * * `--r-sm` er 8 px. På ei 18 px avkryssingsrute er det 44 % av bredden, * altså praktisk talt maksimal avrunding — og linja under gir radioknappen * 50 %. De to formene var ikke til å skille fra hverandre på 320 px, og en * avkryssingsboks som leses som en radioknapp forteller at man bare kan * velge ÉN av 22 løypepunkter. 5 px er 28 % og leser tydelig firkantet. */ --r-rute: 5px; --r-sm: 8px; --r-btn: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 100px; --elev-card: 0 14px 44px -20px rgba(2, 8, 20, .7), inset 0 1px 0 rgba(255, 255, 255, .09); --scrim: rgba(2, 8, 20, .78); --font-display: 'Schibsted Grotesk', 'Inter', sans-serif; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace; /* Minste trykkflate. Ringelista brukes stående, med én hånd. */ --trykk: 44px; /* * ┌───────────────────────────────────────────────────────────────────────────┐ * │ ROMSKALAEN. FARGENE HADDE ETT STED Å BO. AVSTANDENE HADDE INGEN. │ * │ │ * │ Talt 10.09.2026 i de tolv sidearkene: padding og gap sto som 9, 10, 12, │ * │ 13, 14, 16, 17, 18, 20, 22, 26 og 34 px — tolv frie tall, ingen av dem │ * │ begrunnet, og ingen to flater helt enige. Følgen så man først på telefon: │ * │ forsida hadde 22 px sidemarg, panelet 12 og de ti andre 16. Bytter man │ * │ side, flytter innholdet seg sidelengs uten at noe har skjedd. │ * │ │ * │ Skalaen er en firertakt fordi trykkflata er 44 og ikonene 15–20: alt │ * │ ligger allerede på fire. Den ERSTATTER ikke hvert tall i huben — den │ * │ gir de tallene som betyr noe (sidemarg, avstand mellom kort, luft i et │ * │ kort) ett navn og ett sted. │ * └───────────────────────────────────────────────────────────────────────────┘ */ --rom-1: 4px; --rom-2: 8px; --rom-3: 12px; --rom-4: 16px; --rom-5: 20px; --rom-6: 24px; --rom-7: 32px; /* * SIDEMARGEN — avstanden fra skjermkanten til innholdet, i HELE huben. * * Den er en variabel og ikke et fast tall fordi den er det ene målet som må * krympe med skjermen: 20 px er riktig på et brett, og stjeler en tolvtedel * av linja på en iPhone SE. Nøstede kort skal ALDRI legge sin egen marg * oppå denne — da ender teksten 40 px fra kanten og lesebredden forsvinner. */ --marg: 20px; /* * Loddrett rytme mellom kortene i en side. Egen variabel og ikke `--rom-4` * direkte, fordi den skal kunne strammes på telefon uten at hvert kort må * finne sin egen nye verdi. */ --stabel: 16px; /* * Luft under det siste kortet. Egen variabel fordi den ikke er «luft mellom * ting» — den er plassen man ruller INN i, og den skal være raus nok til at * bunnen av lista ikke klistrer seg til skjermkanten. `.wrap` legger * `env(safe-area-inset-bottom)` oppå. */ --bunn: 64px; /* * Høyden på den klebrige topplinja, UTEN hakkets marg. * * Tallet er regnet ut av `.topp` sin egen padding og trykkflata: 10 + 44 + * 10. Det står her og ikke i base.css fordi TO andre flater har sin egen * klebrige rad som må feste seg under denne — ringelistas filterrad og * manusfanene — og et tall tre filer må være enige om, er et token. * * `felles/topp.js` måler den ekte høyden med en ResizeObserver og skriver * over verdien. Tallene her er altså det som gjelder de første millisekundene * og den dagen skriptet ikke kjører — ikke fasit. Det er med vilje: en * høyde som er REGNET UT kan drive fra virkeligheten uten at noe sier fra, * og da legger en filterrad seg bak topplinja i stedet for under den. */ --topp-h: 64px; /* * ┌───────────────────────────────────────────────────────────────────────────┐ * │ HØYDEN PÅ TASTATURET, AKKURAT NÅ. │ * │ │ * │ Null når det er lukket. `felles/tastatur.js` måler det med │ * │ `visualViewport` og skriver tallet hit. │ * │ │ * │ Grunnen til at det MÅ måles: iOS krymper ikke layout-visningsporten når │ * │ tastaturet kommer opp — bare den visuelle. Et element med │ * │ `position: fixed; bottom: 0` blir derfor stående på bunnen av en side │ * │ som fortsatt er 844 px høy, altså BAK tastaturet. Det rammer alt som er │ * │ festet nederst: ringelistas to ark, assistentens skrivefelt, │ * │ møtekortets skjemaer og «Lagre»-knappen i hvert eneste skjema i huben. │ * │ │ * │ Bruk: `bottom: var(--tastatur)` på noe som er festet nederst, eller │ * │ `max-height: calc(100dvh - var(--tastatur))` på et ark som skal krympe. │ * └───────────────────────────────────────────────────────────────────────────┘ */ --tastatur: 0px; } /* * ┌───────────────────────────────────────────────────────────────────────────┐ * │ BRUDDPUNKTENE — TRE, OG DE HETER NOE. │ * │ │ * │ Custom properties virker ikke i `@media`, så konvensjonen kan ikke bæres │ * │ av en variabel. Den bæres av at ALLE filene bruker de samme tre tallene, │ * │ og av `vakt_bruddpunkt` i sjekk/, som nekter et fjerde. │ * │ │ * │ ≤ 360 px — iPhone SE og de smaleste. Marg og tekst strammes. │ * │ ≤ 560 px — telefon. Her bytter huben komposisjon, ikke bare mål. │ * │ ≤ 900 px — brett og smalt vindu. Kolonner faller sammen. │ * │ │ * │ Før dette sto 480, 560, 860 og 1040 om hverandre, og et kort kunne bytte │ * │ bredde tre ganger på veien fra 1040 til 320 uten at noen hadde bestemt │ * │ det. │ * └───────────────────────────────────────────────────────────────────────────┘ */ @media (max-width: 560px) { /* Topplinja brekker til to rader her — 8 + 44 + 8 + 44 + 8. */ :root { --marg: 16px; --stabel: 12px; --bunn: 40px; --topp-h: 112px; } } @media (max-width: 360px) { :root { --marg: 14px; } }