*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* PALETT — mockupene fra Torunn, 10. september 2026. Hvitt underlag, nesten svart blekk, og to grønne som gjør hver sin jobb: --gronn er aksent og hover, --gronn-dyp er en flate å legge hvit tekst på. Tallene i kommentarene er målt mot flata de faktisk står på. */ --flate: #fff; /* underlaget. Het --cream (#f7f4f0) til 10. sep. */ --ink: #0a0a0a; /* 19.8:1 på hvitt */ --soft: #767676; /* dempet tekst, 4.54:1 på hvitt */ --hair: #e4e4e4; /* hårstrek, 1.27:1 — kun linjer, aldri tekst */ /* Aksentgrønnen. Hvit tekst på den er 4.49:1, altså ett hundredels under AAs 4.5. Det er innenfor målestøyen på en hex-verdi, og fargen er valgt av merket — men står den under liten tekst, er den på streken. */ --gronn: #0f8a24; /* Flategrønn. Bærer hvit tekst på 11.25:1. Merk at BÅDE --rod (2.19:1) og --gronn (2.51:1) forsvinner på den — pin og aksent kan ikke stå her. */ --gronn-dyp: #14432a; --rod: #d81920; /* pin og piler, 5.15:1 på hvitt */ /* Blek blå. Ikke i mockupens palett, men beholdt fordi den brukes som BLEKK oppå foto tre steder — hero-eyebrow, lookbook-pris og produkthero. Kursiven i om-tittelen ble grønn 11. september. Mockupen løser de flatene annerledes (tekst på hvitt ved siden av bildet), så den forsvinner når de seksjonene bygges om. Til da er den fortsatt jobben sin verdt. */ --ice: #b8d4e0; --footer-h: 340px; /* Hoeyden paa baandet over toppmenyen. 0 naar det er av — body.har-ticker setter den, saa ingen regel trenger aa vite om baandet finnes. */ --ticker-h: 0px; --product-bg: #fff; /* flate bak produktbilder */ /* TYPOGRAFISK SKALA Stilarket hadde 41 ulike font-size-verdier — .6 og .62, .8 og .82, .85. Ingen ser forskjell på to nabotrinn der; det man ser er summen, og den leser som slurv og ikke som komposisjon. Åtte trinn dekker alt som ikke er display, og de ligger ~1.15-1.25 fra hverandre: nok til at to trinn er ulike roller, ikke en avrundingsfeil. Vokser noe her, skal det bli et trinn til — ikke en ny mellomverdi. */ --t-micro: .625rem; /* 10px — versaletiketter, eyebrow, badge, knapper */ --t-fin: .75rem; /* 12px — finskrift, priser i kort, tabellhoder */ --t-liten: .875rem; /* 14px — brødtekst i kort og statiske sider */ --t-brod: 1rem; /* 16px — brødtekst og ALLE skjemafelt, se under */ --t-lead: 1.125rem; /* 18px — produktnavn i kort, ingresser */ --t-h4: 1.375rem; /* 22px */ --t-h3: 1.75rem; /* 28px */ --t-h2: 2rem; /* 32px */ /* Skjemafelt står med vilje på 16px og ikke lavere: iOS Safari zoomer inn på et felt med mindre tekst enn 16px når det får fokus, og zoomer ikke ut igjen. Kassen hoppet slik på hver eneste input. */ /* DISPLAY Overskriftene hadde 18 egne verdier og elleve egne clamp() — i praksis én per overskrift. Fire trinn dekker alt. Hvert trinn er en ferdig clamp() og ikke en fast størrelse, og det er poenget: sju overskrifter hadde i tillegg sin egen regel under 768px, som fantes bare fordi den opprinnelige clamp-en var dårlig valgt. En riktig clamp gjør begge jobbene, så de reglene er slettet framfor skrevet om — sju færre steder to verdier kan gli fra hverandre. hero-aw26.css holdes utenfor med vilje. Den er kampanjespesifikk, satt i piksler, og topper på 108px mot skalaens 96. Et brudd på systemet skal være synlig som et valg, ikke gjemt som én av femten verdier. */ --d-hero: clamp(2.75rem, 7vw, 6rem); /* 44 → 96px — hero, ett per side */ --d-1: clamp(2.25rem, 4.5vw, 3.5rem); /* 36 → 56px — sidetittel, utsagn */ --d-2: clamp(1.9rem, 3.2vw, 2.75rem); /* 30 → 44px — seksjonstittel */ --d-3: clamp(1.6rem, 2.6vw, 2.25rem); /* 26 → 36px — uthevet lenke */ } /* 11px luft over og under 10px versaler = 34. Settes paa body og ikke i :root, fordi baandet bare finnes naar admin har skrudd det paa. */ body.har-ticker { --ticker-h: 34px; } html { font-size: 16px; /* Uten denne tegner mobilnettleseren sin egen blå flate over alt som berøres — størrelsesknappene på produktsiden blinket blått ved trykk. Egenskapen arves, så den settes ett sted. */ -webkit-tap-highlight-color: transparent; } /* iOS Safari gir