/* ══════════════════════════════════════════════════════════════ Nirona — skiferpaletten, for et opplyst kontrollrom Byttet 29. september 2026 etter beslutning av CSO. Fram til da delte Nirona CIRONs kjølige grå og teal. Kravet som utløste byttet: «Behagelig og nøytralt, slik at det vises godt i lyse kontrollokaler med godt lys. Optimalisert for lange arbeidsdager med mye bruk. Det må være avslappende for øyne og hjerne å sitte hele arbeidsdagen i dette grensesnittet.» ── De tre valgene, og tallene bak dem ───────────────────────── 1. FLATEN GIR FRA SEG 17 PROSENT MINDRE LYS ENN HVITT. `--side` #E8EBEF ligger på 82,8 prosent relativ luminans. I et opplyst rom er det lysmengden fra en helhvit flate som sliter over en vakt, ikke kontrasten. 2. 13,1:1, IKKE 21:1. Svart på hvitt er 21:1 og gir etterbilder over en arbeidsdag. `--blekk` på `--side` er 13,1:1 — godt over AAA-gulvet, og under der typen begynner å gnistre. 3. HANDLINGEN HAR INGEN EGEN KULØR. `--aksent` er den mørkeste skifertonen — samme akse som flatene, ikke en merkefarge. En egen kulør på hver knapp ville lagt en mettet flate på hver skjerm og sløvet de fire fargene som faktisk betyr noe. Vekt og plassering markerer handlingen i stedet. ── ÉN AKSE, DAG OG NATT ─────────────────────────────────────── Begge temaene ligger på 214 grader — skifer. Det er ikke pynt: et tema der lys og mørk står på hver sin side av fargehjulet, leses som to produkter, ett for dagen og ett for natten. Nattemaet var varmt (umbra, 27 prosent kulør) fram til 29. september 2026 og ble forkastet: flaten skal være relevant for et moderne, skybasert produkt, og umbra leses som noe annet. Dagtemaet var da varmt elfenbein — men bare 3 prosent kulør, altså nesten nøytralt — og ble kjølnet til samme akse. Kjølningen kostet ingenting som kan måles: største endring i lyshet var 0,20 prosentpoeng, og hvert eneste kontrastpar holdt. Det er grunnen til at den ble gjort uten å spørre om lov på nytt. ── Slektskapet med CIRON ligger i orbiten, og bare der ──────── `--slekt` er CIRONs teal, og den finnes på nøyaktig ett sted: varemerket. Det gjør merket til den eneste mettede flekken i grensesnittet, altså en signatur og ikke pynt. Dagtemaets verdi er #3C7C71 og ikke CIRONs egen #4E9D90. Den siste ligger på 2,69:1 mot papiret — en logo er unntatt 1.4.11, så det er ikke et brudd, men merket var i praksis utvasket på den flaten det skal bære. #3C7C71 har samme kulørvinkel, 170 grader, og 4,08:1. ── Hver status har TO tokens, og det er ikke dobbeltføring ──── `--x-tekst` bærer tekst og holder 7:1 på hver av de fire flatene den kan stå på, og på sin egen tonede flate. `--x` er markøren — fyll, skinne og form — og holder 1.4.11s 3:1 på de samme flatene. Ett token kan ikke gjøre begge deler: en farge mørk nok til å bære tekst på `--felt` er for mørk til å leses som en lampe, og en lys nok til å leses som en lampe bærer ikke tekst. Samme deling som TM Drone gjorde under R3a 27. september. ── Funnet som avgjorde hvordan status vises ─────────────────── Under AAA-gulvet finnes det ikke lyshet nok til å skille FIRE statuser med farge. Holdes alle fire på 7:1, presses de inn i et bånd mellom 4,7 og 7,6 prosent luminans; i CIE L* lander de tonede flatene 2,8 fra hverandre, der omtrent 5 er der en forskjell begynner å registreres. Den som ikke skiller dem på kulør — og den som ser skjermen med gjenskinn over — ser én tone. **Derfor bæres tilstanden av FORM og ORD, og fargen bekrefter bare.** Trekant, ring, firkant, hake. Det er slik instrumenter alltid har gjort det, og det er også det hvilende svaret: ingen skal måtte regne ut hvilken blek tone de ser på. ── Verdiene er søkt fram, ikke valgt ────────────────────────── Hver verdi under er resultatet av et søk som krevde kravet oppfylt mot den VERSTE flaten fargen kan stå på, ikke mot en gjennomsnittlig. Søket ligger i `verktoy/finn-tokens.mjs` og skriver denne blokken. Endres en flate, kjøres søket på nytt — verdiene justeres ikke for hånd. Nettleserporten `porter/kontrast.mjs` måler det som faktisk vises. Den er fasiten; denne blokken er forutsetningen. ══════════════════════════════════════════════════════════════ */ /* * Det mørke settet står ETT sted. * * Fram til 29. september 2026 sto det tre ganger: i `[data-tema="mork"]` * og i `[data-tema="auto"]` under mediespørringen — og de kunne komme i * utakt. Det er ikke et tenkt problem: TM Drone hadde nøyaktig den feilen * 27. september, der `--warning-border` manglet i det ene settet og falt * tilbake til lyst temas verdi. To veier inn i samme tema ga to kanter. * * Nå ligger verdiene her, og de to selektorene peker på dem. */ :root{ /* ── v3, 30. september 2026: dypere kulør, synlige trinn ───────────── * * Det forrige settet MØTTE alle kontrastkravene og ble likevel beskrevet * som blast og utvasket. Grunnen er at kontrastforhold og lyshetstrinn er * to ulike spørsmål: flatetrappen hadde 1,6 L* mellom trinnene, under * terskelen for å se en kant i det hele tatt. Kontrollen min målte 7:1 og * sa grønt. * * Det er den samme feilformen som går igjen i hele denne loggen — en * kontroll som svarer på et lettere spørsmål enn det som gjelder — og * denne gangen i mitt eget arbeid. `porter/kulor.mjs` måler nå trinnet, * ikke bare forholdet. * * Trinnene her: 5,2 → 10,3 → 14,0 → 19,3 L*, minste trinn 3,7. */ --m-side:#0A121A; --m-kort:#121D28; --m-hev:#18252F; --m-felt:#213040; --m-blekk:#E8EFF4; --m-dempet:#C3D0DA; --m-svak:#B4C2CD; /* Samme deling som i det lyse settet, og av samme grunn: `--m-dempet` bærer brødtekst og blir stående på AAA; `--m-sekundaer` er metadata i appskallet og holder AA 5,0:1 mot den lyseste mørke flaten. */ --m-sekundaer:#959FA9; --m-haar:rgba(232,239,244,.16); --m-kant:#6D7984; --m-haar-sterk:var(--m-kant); /* Aksenten er delt i fyll og tekst, slik statusfargene alltid har vært. * Grunnen er målt: #4FD0D8 som FYLL med mørk tekst holder 8,9:1, og som * TEKST holder den 7,3:1 mot den lyseste flaten. I lyst tema går det ikke * opp med én verdi, og da skal det ikke gå opp med én verdi her heller — * to temaer med ulik tokenstruktur er to temaer som kommer i utakt. */ /* Samme kulørvinkel som dagtemaet, 206 grader. Byttet 5. oktober 2026 sammen med den lyse aksenten. Lot vi denne stå på cyan, hadde produktet hatt BLÅ handlingsfarge om dagen og CYAN om natten — og «all kulør samlet i én aksent» ville vært en setning som gjaldt halve døgnet. Det er nøyaktig den feilformen som ble funnet i kommentaren over: en regel verdiene ikke gjennomfører. Lysheten er regnet mot den LYSESTE mørke flaten (`--m-felt`), som er den som avgjør, ikke mot bakgrunnen. */ --m-aksent:#82C2F3; --m-aksent-tekst:#82C2F3; --m-aksent-hev:#AAD6F9; --m-paa-aksent:#06182A; --m-slekt:#4FC8B6; --m-slekt-dyp:#8FE6D8; --m-slekt-tekst:#5FCDBD; --m-fokus:#7FE3EA; /* Ringen på menyen er en egen verdi. Blekkringen er usynlig på et mørkt * krom — 1,00:1, altså ingen ring i det hele tatt — og det gjaldt også * det lyse temaet, der menyen alltid har vært mørk. */ --m-fokus-meny:#7FE3EA; /* Solide, ikke rgba. * * De var rgba fram til nettleserporten målte dem 29. september 2026: en * tonet flate med gjennomsiktighet blandes med det som ligger under, og * DET underlaget var aldri med i søket. Statusbrikkene i mørkt tema lå * derfor på 5,98–6,66:1 mens tallene mine sa at alt var over 7. * * Feilformen er den samme som har gått igjen: kontrollen min svarte på * «holder fargen mot flatetokenet?», ikke på «holder den mot det som * faktisk tegnes». Solide verdier fjerner spørsmålet. */ --m-rod:#FF7A64; --m-rod-tekst:#FFB7A8; --m-rod-flate:#2E1512; --m-gul:#EFA63C; --m-gul-tekst:#F6CE8E; --m-gul-flate:#2C1E0B; --m-gronn:#3FCF9E; --m-gronn-tekst:#93E4C4; --m-gronn-flate:#0C261D; --m-bla:#5DB8F0; --m-bla-tekst:#A9D6F6; --m-bla-flate:#0C2130; --m-meny:#060D14; --m-meny-tekst:#DCE6EC; --m-meny-dempet:#B0BEC9; /* HELE familien, ikke bare de tre. Fram til 29. september 2026 manglet aktiv, teller og hårstrek i det mørke settet. De falt da gjennom til de LYSE verdiene, og mørk menytekst havnet på en lys flate: 5,22:1. */ --m-meny-felt:#0E2231; --m-meny-aktiv:#16303E; --m-meny-aktiv-tekst:#E8EFF4; --m-meny-teller:#16303E; --m-meny-teller-tekst:#CFE4F6; --m-meny-haar:rgba(232,239,244,.14); --m-meny-haar-sterk:rgba(232,239,244,.26); --m-rod-paa-meny:#FFB7A8; --m-slor:rgba(3,7,11,.62); --m-paa-aksent-svak:rgba(6,34,42,.16); --m-rutenett:rgba(232,239,244,.045); --m-lysfall:rgba(232,239,244,.06); --m-lysfall-svak:rgba(232,239,244,.03); --m-lysfall-mot:rgba(232,239,244,.04); --m-glod:rgba(232,239,244,.09); --m-skygge-knapp:0 6px 20px rgba(0,0,0,.40); --m-skygge-knapp-hev:0 8px 26px rgba(0,0,0,.52); --m-skygge:0 1px 2px rgba(0,0,0,.40), 0 6px 20px rgba(0,0,0,.34); --m-skygge-hev:0 14px 40px rgba(0,0,0,.50); } :root, [data-tema="lys"]{ /* ── Flatetrappen ──────────────────────────────────────────────────── * * L* 85,6 → 90,6 → 95,1 → 100. Minste trinn 4,6. **Null metning.** * * ── Papir, skifer, og til slutt ingen kulør. 5. oktober 2026 ───────── * * Flaten har byttet akse to ganger på én dag, og begge gangene fordi * målingen sa noe annet enn jeg trodde. * * Først fra skifer (214°) til papir (48°), etter kravet «bort fra den * tunge gråfargen». Det hjalp, men ikke nok: 48 grader ER brunaksen, og * med 9 prosent metning leses flaten som beige. Tilbakemeldingen var * presis — «grå, brun eller grønn» — og den var riktig på alle tre. * * Nå er metningen **null**. Flaten har ingen kulørretning i det hele tatt. * * ── Hvorfor null, og ikke en pen tone ──────────────────────────────── * * Dette er Fluents grep, og begrunnelsen er ikke at Microsoft gjør det: * * En flate med kulør har en MENING om lyset i rommet. Under 4000 K * lysrør trekker en blåtone kaldt og en brun trekker skittent. Null * kulør trekker ingen vei, og ser likt ut i hvert rom produktet skal * stå i. * * Apples #F2F2F7 ligger på 240 grader med svak metning. Det er pent på en * god skjerm, usynlig på en billig, og det er én kulørretning til i et * produkt som allerede hadde for mange. * * ── Hvite kort, dempet lerret ──────────────────────────────────────── * * `--hev` er nå rent hvitt. Det er en justering av beslutningen fra * 29. september om at flaten skal gi fra seg 17 prosent mindre lys enn * hvitt, og justeringen er ført heller enn gjort stille. * * Beslutningen sa: «det er LYSMENGDEN fra en helhvit flate som sliter * over en vakt». Den gjelder fortsatt, og den er grunnen til at lerretet * (`--side`) er dempet og at sidemenyen er mørk — 16 prosent av skjermen * nær svart. Det som endres, er at kortene, der øyet faktisk leser, er * hvite. **Ingen stor flate er ren hvit. Flaten under teksten er det.** * * ── Trinnene er beholdt, og det var ikke gratis ────────────────────── * * Første forsøk på «lysere» komprimerte trinnene til 2,9 L*, altså under * der en forskjell begynner å registreres — nøyaktig den utvaskede * effekten paletten ble lagt om for å bli kvitt. Trappen her er regnet * fra L*, ikke valgt fra en fargevifte, og `--kort` bærer fortsatt * stripen i annenhver rad med 4,9 L* ned fra `--hev`. * * Det forrige settet hadde 1,6 L* mellom de samme fire, og i tillegg en * femte flate — `--aksent-flate` #D9DDE2 — som lå fire RGB-punkter fra * `--felt`. Fem flater der øyet så to. Den femte er borte: to navn for * samme verdi er verre enn ett navn, fordi den som velger mellom dem tror * valget betyr noe. */ /* ══════════════════════════════════════════════════════════════════ * v4, 5. oktober 2026 — den lyse flaten. Besluttet av CSO. * * Tre runder med palettbytter ble avvist med samme ord: tungt og grått. * Alle tre endret lerretet. Målingen av den fjerde runden viste hvorfor * de ikke virket: i runde to lå lerretet på L* 96–100, altså nær hvitt, * og flaten ble likevel lest som mørk. * * **Tyngden lå ikke i flaten. Den lå i møblene.** Fem kilder, målt på de * leverte skjermbildene: * * 1. Skinnen var nær svart i full høyde. Verken Apple eller Microsoft * legger en mørk blokk ned hele venstre side i et lyst produkt. * 2. Monospor i versaler sju steder på flaten — kolonnehoder, * gruppenavn, statusbrikker, frister. Det leser som et konsoll. * 3. Ramme rundt kortet, fargestolpe per rad, fylt kolonnehode. * 4. Sekundærtekst på 11,6:1. Apple ligger på 5,1:1, Microsoft på 6,2. * 5. Lerretet — den minste av de fem. * * Fire av de fem var mine egne beslutninger. Den femte, lerretet, var * den eneste jeg hadde rørt. * * ── 29. september-beslutningen viker, og det er en ført beslutning ─── * * «Flaten gir fra seg 17 prosent mindre lys enn hvitt» holdt så lenge * lerretet var det som bar skillet mellom radene. Det gjør det ikke * lenger: radskillet er en hårstrek. Da er det ingenting igjen som * krever et dempet lerret, og lysmengden går fra 78,2 til 94,9 prosent. * * Blekket mykes nøyaktig like mye som flaten heves, langs samme akse, * slik at forholdet blir stående på 13,0:1 og ikke klatrer mot 15,5:1. * Lysere flate uten at typen begynner å gnistre. * * ── Stripen er borte, og det var den som tvang fram den grå flaten ─── * * En stripe krever ~5 L* ned fra hvitt. Over L* 95 finnes ikke den * plassen. Det er aritmetikk, ikke smak: så lenge raden skilles med * FYLL, kan lerretet ikke bli lyst. Skillet er derfor en hårstrek. * * Hårstreken er dekor, ikke informasjon — innholdet står i raden, ikke i * streken — og 1.4.11 gjelder den ikke. Den ligger på 1,25:1, som er der * Apple og Microsoft har sine. Forrige runde satte den til 3,0:1, og det * var i seg selv en av tingene som gjorde flaten tung. * * ── Trappen: 95,0 → 96,2 → 98,3 → 100,0 L* ────────────────────────── * * Trinnene er små med vilje. De bærer ikke lenger noe: `--felt` er felt, * `--kort` er hvilestillingen under pekeren, `--side` er lerretet, * `--hev` er der det leses. Kravet om 5 L* mellom dem er opphevet i * samme beslutning, fordi det kravet fantes for stripens skyld. * ══════════════════════════════════════════════════════════════════ */ --side:#FAFAFA; --kort:#F3F4F6; --felt:#EFF1F3; --hev:#FFFFFF; --blekk:#232F3D; --dempet:#46515D; --svak:#46515D; /* ── Tredje tekstrolle, og hvorfor den ikke er en oppmyking av --dempet * * Besluttet av CSO 5. oktober 2026: sekundærtekst i appskallet holder * AA 4,5:1 i stedet for AAA 7:1. Avvik A14 i AVVIK.md. * * Det kunne vært gjort ved å lysne `--dempet`. Det ville vært feil: * `--dempet` bærer også BRØDTEKST på de offentlige sidene — ingressen i * helten, svarene i FAQ, avsnittene i boksene, de juridiske sidene. En * global oppmyking ville tatt landingssiden og vilkårene under AAA, og * det er bredere enn beslutningen. * * `--sekundaer` er derfor en egen rolle med et eget gulv, og den brukes * KUN til metadata i appskallet: undertittel i en rad, kolonnehode, * teller, tidsstempel, plassholder. Aldri til brødtekst, aldri til en * overskrift, aldri til en knapp eller en lenke — `porter/kontrast.mjs` * håndhever nettopp det, slik at rollen ikke kan krype. * * 5,0:1 mot den mørkeste flaten den kan stå på (`--felt`), 5,7:1 mot * den lyseste. Microsofts egen ligger på 6,2:1, Apples på 5,1:1. */ --sekundaer:#5D6671; /* ── To linjer, ikke én ─────────────────────────────────────────────── * * `--haar` er DEKOR: radskillet, kortkanten, skillet under topplinjen. * 1,25:1. Den skal kunne sees når man ser etter den, og ellers ikke. * * `--kant` er KONTROLLGRENSE: rammen rundt et felt, en knapp, en * velger. Den omfattes av 1.4.11 og holder 3:1 — løst mot den mørkeste * flaten den kan ligge inntil (`--felt`), ikke mot hvitt, fordi en * feltramme har flate på begge sider. 3,00:1 mot felt, 3,40:1 mot hvitt. * * Fram til v4 gjorde `--haar-sterk` begge jobbene, og den måtte da ligge * på kontrollgrensens nivå overalt — også rundt kortet og under * topplinjen, der den bare var tung. `--haar-sterk` peker nå på `--kant` * så ingen kodevei brekker, men nye regler skal bruke de to nye navnene. */ --haar:#E4E6E8; --kant:#838A92; --haar-sterk:var(--kant); /* ── Handlingen ────────────────────────────────────────────────────── * * **Én blå. Besluttet av CSO 5. oktober 2026.** * * ── Hva som sto her før, og hvorfor det ikke var sant ──────────────── * * «HANDLINGEN HAR INGEN EGEN KULØR. `--aksent` er den mørkeste * skifertonen — samme akse som flatene, ikke en merkefarge.» * * Den setningen beskrev en beslutning verdiene ikke gjennomførte. Målt: * `--aksent` #0A5E6B lå på **188 grader med 83 prosent metning**, mens * flatene lå på 48. Det er ikke «samme akse», og 83 prosent er ikke * «ingen egen kulør» — det er en mettet teal. * * **En kommentar som dokumenterer noe annet enn verdiene, er verre enn en * stygg farge**: neste person leser den og tror den er sann. Den ble ikke * oppdaget ved å lese filen, men ved å måle kulørvinkelen på det som * faktisk kom ut på skjermen. * * ── Hvorfor blå, og hvorfor det er et argument om varemerket ───────── * * Design-reglene R9 sier at CIRONs teal «finnes på nøyaktig ett sted: * varemerket. Det gjør merket til den eneste mettede flekken i * grensesnittet, altså en signatur og ikke pynt.» * * Med en teal aksent på 188 grader og et varemerke på 172 var merket én * av mange teal-flekker. For øyet er de samme familie. **Regelen var * nesten sann, og en nesten sann regel er en regel ingen håndhever.** * * Med blå aksent er orbiten den eneste grønnblå tingen på skjermen. * Signaturen virker slik den var ment, og regelen blir sann. * * ── Hvorfor ikke Apples eller Fluents egen blå ─────────────────────── * * `systemBlue` #007AFF holder 4,0:1 mot hvitt. Fluents #0F6CBD holder * 5,4:1. Begge er under AAA, og den ene under AA for liten tekst. * Verdiene her har samme kulørvinkel som Fluents, mørknet til 7:1 — * altså samme farge, vårt krav. * * Delingen i fyll og tekst står som før: `--aksent-tekst` måles mot den * MØRKESTE av de fire flatene, ikke mot den lyseste, fordi en lenke kan * stå på hvilken som helst av dem. */ --aksent:#0B5B98; --aksent-tekst:#08416D; --aksent-hev:#094B7C; --paa-aksent:#FFFFFF; /* Varemerket: CIRON-sirkelen, og ingenting annet. Tre verdier av samme grunn som over — #0F7A6C som fyll med lys tekst gir 5,0:1. */ --slekt:#0F7A6C; --slekt-dyp:#0C6055; --slekt-tekst:#08433B; /* Fokusringen. WCAG 2.2 · 2.4.13 Fokusutseende er AAA, og er kriteriet en palett pleier å glemme. 2 px, 2 px forskyvning, 12,8:1 mot siden. `--fokus-meny` finnes fordi blekkringen er USYNLIG på menyen: 1,00:1 mot #0E1B27. Menyen er mørk i begge temaer, så hullet var der i lyst tema også — og ingen kontroll fanget det, fordi fokusporten målte at det FANTES en ring på minst 2 px, ikke at den kunne sees mot flaten under. Enda en kontroll som svarte på et lettere spørsmål. */ /* v4: skinnen er lys, så blekkringen er synlig der også. Det egne menytokenet står igjen for det mørke temaet, der skinnen er mørk. */ --fokus:#0D1B2A; --fokus-meny:#232F3D; --fokus-bredde:2px; --fokus-avstand:2px; /* Blå er ny. Gul er venter. Grønn er løst. Rød er over frist. Markøren er fyllet og formen; teksten er ordet. Teksten er aldri markørfargen: den er mørknet til over 7:1 mot alle fire flatene. */ --rod:#C2261A; --rod-tekst:#731A12; --rod-flate:#F7DDD9; --gul:#B15C0A; --gul-tekst:#5B3107; --gul-flate:#FAEBD7; --gronn:#0C7E5C; --gronn-tekst:#0A4433; --gronn-flate:#D6EFE6; --bla:#0B6CB0; --bla-tekst:#093F61; --bla-flate:#DBE9F5; /* Menyen er alltid mørkere enn innholdet — et mørkt felt til venstre er «her er jeg», uansett tema. Den er ikke lenger marineblå: navy var CIRONs, og dette er Nironas egen flate. */ /* * Menyfamilien er løst som en familie. * * Tekst i menyen havner på FIRE flater — menyen selv, den aktive raden, * tellerbrikken og det mørke kortet på landingssiden. Jeg løste dem én * om gangen, og hver retting flyttet bare bruddet til neste flate. * Verdiene under er løst mot den LYSESTE av de fire, som er den som * gjelder. Flatene er dempet ned i stedet for at teksten er hevet opp: * et søk som hever teksten ender på nesten hvitt, og en nesten hvit * meny gnistrer — stikk i strid med kravet. */ /* * ── v4: skinnen er lys ─────────────────────────────────────────────── * * Setningen over — «menyen er alltid mørkere enn innholdet» — var den * største enkeltkilden til at appen ble lest som tung. En nær svart * blokk i full høyde ned venstre side er omtrent en sjettedel av * skjermen, og den er der på hver eneste flate hele dagen. * * «Her er jeg» bæres nå av den AKTIVE raden: hvit flate, aksentfarget * tekst og en 3 px aksentskinne i venstrekanten. Det er Fluents eget * mønster, og det er også sterkere enn før — en mørk blokk sier hvor * menyen er, ikke hvor DU er. * * Merkevaren er orbiten, ikke skinnen. Den står uendret. */ --meny:#F3F4F6; --meny-tekst:#232F3D; --meny-dempet:#5D6671; --meny-felt:#E8EAEE; --meny-aktiv:#FFFFFF; --meny-aktiv-tekst:#08416D; --meny-haar-sterk:#858C94; /* Tre flater som aldri ble tenkt på som flater, og derfor hadde hardkodede verdier: en feiltekst på menybåndet, sløret bak en åpen skuff, og tasteforklaringen inne i en fylt knapp. Alle tre er nå målt som alt annet. */ /* Feilteksten på menybåndet: skinnen er lys i v4, så en lys rødtone er usynlig der. Verdien er den samme røde teksten som ellers. */ --rod-paa-meny:#731A12; --slor:rgba(13,27,42,.55); /* Lysfall, rutenett og knappeskygge er HELE verdier, ikke farger. En farge kan ikke stå i `rgba()` som `var()`, så disse ble stående hardkodet i fire stilark og var det siste stedet paletten kunne komme i utakt med seg selv. */ --rutenett:rgba(13,27,42,.045); --lysfall:rgba(13,27,42,.05); --lysfall-svak:rgba(13,27,42,.03); --lysfall-mot:rgba(13,27,42,.04); --glod:rgba(13,27,42,.06); --skygge-knapp:0 6px 20px rgba(13,27,42,.08); --skygge-knapp-hev:0 8px 26px rgba(13,27,42,.24); --paa-aksent-svak:rgba(13,27,42,.10); --meny-haar:#E4E6E8; /* Solid: telleren legges OPPÅ den aktive raden, og to gjennomsiktige lag over hverandre ga #60615B — lysere enn noen av dem hver for seg. v4: telleren er en lys aksentbrikke på en lys skinne, ikke en mettet flekk. Teksten har derfor et eget token — den kan ikke være `--paa-aksent`, som er hvit. */ --meny-teller:#E3EDF9; --meny-teller-tekst:#0A4B82; /* v4: kortet har ingen ramme lenger, så skyggen er det eneste som løfter det. Den er dempet i samme slengen — en kraftig skygge under hvert kort på en lys flate leser som tyngde, ikke som dybde. */ --skygge:0 1px 2px rgba(13,27,42,.05), 0 4px 12px rgba(13,27,42,.05); --skygge-hev:0 12px 32px rgba(13,27,42,.10); /* Glasset er borte. Gjennomskinnelighet senker kontrasten nettopp der omgivelseslyset alt gjør det, og autentiseringsskjermen er den flaten som oftest åpnes i et opplyst rom. Avvik fra `ciron-auth-skjerm` R5, ført som A13 i AVVIK.md. Tokenet står igjen som en ren flate, slik at ingen mal må endres for å slippe glasset. */ --glass:#EBEFF3; --glass-kant:rgba(13,27,42,.2); color-scheme:light; } [data-tema="mork"]{ --side:var(--m-side); --kort:var(--m-kort); --felt:var(--m-felt); --hev:var(--m-hev); --blekk:var(--m-blekk); --dempet:var(--m-dempet); --svak:var(--m-svak); --sekundaer:var(--m-sekundaer); --haar:var(--m-haar); --kant:var(--m-kant); --haar-sterk:var(--m-haar-sterk); --aksent:var(--m-aksent); --aksent-tekst:var(--m-aksent-tekst); --aksent-hev:var(--m-aksent-hev); --paa-aksent:var(--m-paa-aksent); --slekt:var(--m-slekt); --slekt-dyp:var(--m-slekt-dyp); --slekt-tekst:var(--m-slekt-tekst); --fokus:var(--m-fokus); --fokus-meny:var(--m-fokus-meny); --rod:var(--m-rod); --rod-tekst:var(--m-rod-tekst); --rod-flate:var(--m-rod-flate); --gul:var(--m-gul); --gul-tekst:var(--m-gul-tekst); --gul-flate:var(--m-gul-flate); --gronn:var(--m-gronn); --gronn-tekst:var(--m-gronn-tekst); --gronn-flate:var(--m-gronn-flate); --bla:var(--m-bla); --bla-tekst:var(--m-bla-tekst); --bla-flate:var(--m-bla-flate); --meny:var(--m-meny); --meny-tekst:var(--m-meny-tekst); --meny-dempet:var(--m-meny-dempet); --meny-aktiv:var(--m-meny-aktiv); --meny-aktiv-tekst:var(--m-meny-aktiv-tekst); --meny-felt:var(--m-meny-felt); --meny-teller:var(--m-meny-teller); --meny-teller-tekst:var(--m-meny-teller-tekst); --meny-haar:var(--m-meny-haar); --meny-haar-sterk:var(--m-meny-haar-sterk); --rod-paa-meny:var(--m-rod-paa-meny); --slor:var(--m-slor); --paa-aksent-svak:var(--m-paa-aksent-svak); --rutenett:var(--m-rutenett); --lysfall:var(--m-lysfall); --lysfall-svak:var(--m-lysfall-svak); --lysfall-mot:var(--m-lysfall-mot); --glod:var(--m-glod); --skygge-knapp:var(--m-skygge-knapp); --skygge-knapp-hev:var(--m-skygge-knapp-hev); --skygge:var(--m-skygge); --skygge-hev:var(--m-skygge-hev); --glass:var(--m-kort); --glass-kant:var(--m-haar); color-scheme:dark; } /* Auto følger operativsystemet, og er standard. De fleste åpner aldri en innstilling, og den som har valgt mørkt i systemet har alt sagt hva hun vil. Verdiene er de samme — det er hele poenget med å ha dem ett sted. */ @media (prefers-color-scheme: dark){ [data-tema="auto"]{ --side:var(--m-side); --kort:var(--m-kort); --felt:var(--m-felt); --hev:var(--m-hev); --blekk:var(--m-blekk); --dempet:var(--m-dempet); --svak:var(--m-svak); --sekundaer:var(--m-sekundaer); --haar:var(--m-haar); --kant:var(--m-kant); --haar-sterk:var(--m-haar-sterk); --aksent:var(--m-aksent); --aksent-tekst:var(--m-aksent-tekst); --aksent-hev:var(--m-aksent-hev); --paa-aksent:var(--m-paa-aksent); --slekt:var(--m-slekt); --slekt-dyp:var(--m-slekt-dyp); --slekt-tekst:var(--m-slekt-tekst); --fokus:var(--m-fokus); --fokus-meny:var(--m-fokus-meny); --rod:var(--m-rod); --rod-tekst:var(--m-rod-tekst); --rod-flate:var(--m-rod-flate); --gul:var(--m-gul); --gul-tekst:var(--m-gul-tekst); --gul-flate:var(--m-gul-flate); --gronn:var(--m-gronn); --gronn-tekst:var(--m-gronn-tekst); --gronn-flate:var(--m-gronn-flate); --bla:var(--m-bla); --bla-tekst:var(--m-bla-tekst); --bla-flate:var(--m-bla-flate); --meny:var(--m-meny); --meny-tekst:var(--m-meny-tekst); --meny-dempet:var(--m-meny-dempet); --meny-aktiv:var(--m-meny-aktiv); --meny-aktiv-tekst:var(--m-meny-aktiv-tekst); --meny-felt:var(--m-meny-felt); --meny-teller:var(--m-meny-teller); --meny-teller-tekst:var(--m-meny-teller-tekst); --meny-haar:var(--m-meny-haar); --meny-haar-sterk:var(--m-meny-haar-sterk); --rod-paa-meny:var(--m-rod-paa-meny); --slor:var(--m-slor); --paa-aksent-svak:var(--m-paa-aksent-svak); --rutenett:var(--m-rutenett); --lysfall:var(--m-lysfall); --lysfall-svak:var(--m-lysfall-svak); --lysfall-mot:var(--m-lysfall-mot); --glod:var(--m-glod); --skygge-knapp:var(--m-skygge-knapp); --skygge-knapp-hev:var(--m-skygge-knapp-hev); --skygge:var(--m-skygge); --skygge-hev:var(--m-skygge-hev); --glass:var(--m-kort); --glass-kant:var(--m-haar); color-scheme:dark; } } :root{ /* R4. Display og brødtekst er to ulike familier nå — det var de ikke før, da --disp bare pekte på --sans. */ --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --disp:"Space Grotesk","Inter",-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --serif:"IBM Plex Serif",Georgia,serif; /* ── Radiuser: instrumentsettet ────────────────────────────── design-regler v1.4 R5 deler porteføljen i to. «Flate» er salgs- og etterlevelsesflater — Limen, Pulse, ciron.no — der store radier og pilleknapper gir ro og tillit. «Instrument» er operative verktøy som brukes under press, og standarden nevner Nirona ved navn. Forskjellen er ikke smak. Inxo målte begge sett: 22 px ble beskrevet som «utvasket og uferdig», 5 px som DOS, 8 px som programvare. Et verktøy for brukerstøtte i kritisk infrastruktur skal lese som et instrument, ikke som en forbrukerapp. Merk at pill er 6 px her, ikke 999. Brikker og knapper blir rette, ikke runde. Kanten bærer strukturen, ikke skyggen. M88 satte flate-settet (16/22/28/999) før standarden var delt. */ --r-xs:3px; --r-sm:4px; --r:6px; --r-lg:8px; --r-xl:12px; --r-pill:6px; /* ── Skriftskala ───────────────────────────────────────────── Åtte trinn. Hvert har én jobb, og det er derfor de er få: en skala med atten trinn er ingen skala, bare atten valg noen tok hver for seg. mono 11 etiketter i monoskrift, versaler xs 12.5 hjelpetekst, understrek på rader sm 14.5 knapper, brikker, tett innhold md 16 brødtekst lg 18 ingress h3 21 seksjonsoverskrift h2 26 sidetittel h1 32 dokumenttittel */ --t-mono:11px; --t-xs:12.5px; --t-sm:14.5px; --t-md:16px; --t-lg:18px; --t-h3:21px; --t-h2:26px; --t-h1:32px; /* Minste trykkflate. Gjelder alt som kan klikkes, også på PC. */ --trykk:44px; /* ── Gamle navn, beholdt som pekere ────────────────────────── Rutene bruker fortsatt navn fra v1. De peker nå på v2-verdiene, slik at hele appen bytter uttrykk uten at hver rute må skrives om i dag. Nye ruter bruker v2-navnene. De gamle fjernes når ingen bruker dem. */ --surface-0:var(--side); --surface-1:var(--kort); --surface-2:var(--felt); --fg-1:var(--blekk); --fg-2:var(--blekk); --fg-3:var(--dempet); --line:var(--haar); --line-strong:var(--haar-sterk); --brand:var(--aksent); --brand-fg:var(--paa-aksent); --brand-soft:var(--felt); --brand-ink:var(--aksent-tekst); --live:var(--aksent-hev); --live-fg:var(--aksent-tekst); --kritisk:var(--rod); --kritisk-flate:var(--rod-flate); --hoy:var(--gul); --hoy-flate:var(--gul-flate); --ok:var(--gronn); --ok-flate:var(--gronn-flate); --info:var(--bla); --info-flate:var(--bla-flate); --shadow-1:var(--skygge); --shadow-2:var(--skygge-hev); --r-md:var(--r); } *{box-sizing:border-box} /* ── Ankerlenker lander under en festet bar, ikke bak den ─────── * * Landingssidestandard v1.2, L4d. En klebrig topplinje dekker toppen av * målet for hver `#anker`-lenke. Uten `scroll-padding-top` lander * overskriften bak baren, og brukeren tror lenken traff feil sted. * * Høyden MÅLES inn i `--topp-h` av `assets/topphoyde.js`, fordi baren bryter * til flere rader på smale skjermer og følger brukerens skriftstørrelse — et * fast tall er da feil på nøyaktig de breddene det betyr mest. * * Regelen står HER og ikke i apex.css, selv om baren bare finnes der: to ark * som lastes sammen skal ikke definere samme velger, for da avgjør * lenkerekkefølgen hvilken som gjelder. `porter/dublettstil.mjs` håndhever * det. Flater uten bar setter ingen `--topp-h`, og får 0 — altså ingen * endring. Reservetallet står i apex.css, hos baren det gjelder. */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth; scroll-padding-top:calc(var(--topp-h, 0px) + 16px)} /* Den som har slått av bevegelse i systemet, skal ikke få myk rulling. */ @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--side);color:var(--blekk);font-family:var(--sans); font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} h1,h2,h3,h4{font-family:var(--disp);margin:0;letter-spacing:-.025em;line-height:1.15} a{color:inherit} /* ── Sifre som står i kolonne ───────────────────────────────── Inter har proporsjonale sifre som standard: en 1 er smalere enn en 8. Det er riktig i en setning og feil i en kolonne — «14» og «88» får ulik bredde, og et tall som teller oppover rykker sidelengs mens man ser på det. Derfor slås tabellsifre på overalt der sifre skal møte hverandre: i tabeller, i tellere, i frister, i nøkkeltall. Brødteksten beholder de proporsjonale — der er de penere, og der står ingenting under hverandre. `.tall` er for de stedene et tall står alene i noe som ellers er tekst. */ .mono,.tall,table,.brikke,.teller{font-variant-numeric:tabular-nums} .mono{font-family:var(--mono)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* * WCAG 2.2 · 2.4.13 Fokusutseende — AAA. * * Kriteriet krever at indikatoren er minst like stor som en 2 px ramme * rundt komponenten, og at den har 3:1 mellom fokusert og ufokusert * tilstand. Ringen er derfor blekket og ikke aksenten: aksenten er nå * en skifertone nær blekket, så en ring i aksentfarge ville vært en * ring man knapt ser skifte. Målt: 13,1:1 mot siden, 14,5:1 mot kortet. * * `outline` og ikke `box-shadow`: outline følger elementets egen radius, * og en fokusring som gjør en pilleknapp firkantet er feilen TM Drone * fant 27. september. */ :focus-visible{outline:var(--fokus-bredde) solid var(--fokus); outline-offset:var(--fokus-avstand)}