/* ============================================================ HERO-MOTIV — delt fil for sidene som har betongmotiv i heroen ------------------------------------------------------------ BEVISST AVVIK: sidene med motiv har ett maskert fotografi i stedet for ss-motif (dec-rectangle-526.svg med .ss-motif-imprint). Ikke «harmoniser» dette bort. Fila har tre deler: 1. GENERISK MEKANIKK. Lik for alle sider. Leser bare variabler og har ingen tall som hører til én side. 1b. DELT VARIANT .ss-hero-fyll. Konvensjonene fra services (21.09.2026), slått på per side med en klasse: services, about og contact. Ikke work. 2. SIDEBLOKKER. Én per side, bundet til en modifikatorklasse på headeren (.ss-hero-has-scene--tjenester, --arbeid). De setter variabler per brytepunkt. Brytepunkter kan ikke være variabler i media queries, derfor ligger de her. Hver side MÅ sette: --ss-ratio motivfilas bredde / høyde, skrevet som brøk av filas egne mål, ikke som et avrundet desimaltall --ss-h-tab motivhøyde 640–1023 --ss-h motivhøyde fra 1024 Kan sette (alle har dagens verdi som standard, saa en ny side som ikke setter dem oppfoerer seg som tjenester gjoer i dag): --ss-topp, --ss-bunn loddrett forankring fra 1024 --ss-venstre, --ss-hoyre vannrett forankring, begge baand --ss-topp-tab, --ss-bunn-tab loddrett forankring 640-1023 --ss-inner-maks, --ss-inner-marg tekstkolonnens boks --ss-hero-fyll heroens minstehoyde fra 1024 Markup:
med width/height fra fila

på ingressen Ett maskert bilde med alfakanal, ikke klippede lag: perspektivet i et hjørne lar seg ikke bygge av clip-path på et flatt fotografi, og lag som skaleres hver for seg holder ikke delte kanter. Bredden settes aldri — den følger av høyden, så fila eier sideforholdet og kan ikke forvrenges. ============================================================ */ /* ==================== 1. GENERISK MEKANIKK ==================== */ /* Byggeklosser for kolonnen ved siden av motivet. Navngitt i stedet for summert: 72 (= 48 + 24), 372 (= 300 + 48 + 24) og 429 (= 1,37417 × 260 + 72) sto tidligere som ferdig utregnede tall og ville blitt stille feil om én av delene ble endret. Under 1024 står motivet i flyten, under brødteksten. Headeren blir en kolonne så det kan ligge under uten å tas ut av flyten. +1px i min-height er border-b (Tailwind border-b, 1 px). Preflight gir border-box, så min-height teller streken med: et 599 px motiv i en 599 px hero fikk en paddingboks på 598, og et bunnforankret motiv stakk 1 px opp over heroens overkant (målt). */ .ss-hero-has-scene { --ss-kolonne-min: 300px; /* brødtekstkolonnens gulv */ --ss-sidepad: 48px; /* speiler md:px-g6 på .ss-page-hero-inner */ --ss-luft: 24px; /* luft mellom kolonnen og motivet */ /* a) MOTIVETS FORANKRING. Sto som faste right:0 / bottom:0 i begge båndene. Standardene under er nøyaktig de verdiene, så ingenting flytter seg; en side som vil ha motivet til venstre eller toppforankret på nettbrett setter dem i stedet for å overstyre reglene. Loddrett fra 1024 lå allerede i --ss-topp / --ss-bunn. */ --ss-venstre: auto; --ss-hoyre: 0; --ss-topp-tab: auto; --ss-bunn-tab: 0; /* b) TEKSTKOLONNENS BOKS. Sto ikke i denne fila i det hele tatt: den kom fra markupens max-w-grid + mx-auto, og arbeid overstyrte begge fra 1024 fordi kolonnen der ligger INNE i motivet, ikke ved siden av det. --ss-inner-maks speiler .max-w-grid i css/styles.css på samme måte som --ss-sidepad speiler md:px-g6 — endres den der, må den endres her. */ --ss-inner-maks: 1200px; --ss-inner-marg: auto; display: flex; flex-direction: column; min-height: calc(var(--ss-hero-min, 0px) + 1px); } /* width:100% er ikke overflødig. Headeren er en flex-kolonne, og .ss-page-hero-inner har mx-auto. Auto-margin på tvers slår ut align-items:stretch, så blokken krymper til innholdsbredde og sentreres: på 1280 startet teksten på x=251 i stedet for x=88. width:100% gjenoppretter full bredde. */ .ss-hero-has-scene > .ss-page-hero-inner { position: relative; z-index: 10; order: 1; width: 100%; max-width: var(--ss-inner-maks); margin-left: var(--ss-inner-marg); margin-right: var(--ss-inner-marg); } /* Basis: bredden følger ALLTID av høyden. Bare fullbreddebåndet under 640 setter bredden direkte, og der er høyden auto, så forholdet er fortsatt filas eget. */ .ss-hero-scene { order: 2; z-index: 0; display: block; width: auto; max-width: 100%; margin-top: 8px; pointer-events: none; -webkit-user-select: none; user-select: none; } @media (max-width: 639px) { .ss-hero-scene { width: 100%; height: auto; } } /* 640–1023 — VARIANT B: motivet nederst til høyre, H1 OVER papir, ingressen ved siden av. Ikke H1 over motivet: målt per glyfpiksel havnet 26 % av overskriften under 4,5:1 og 19 % under 3:1, med sort på sort som verste punkt. Høyden settes av siden (--ss-h-tab). */ @media (min-width: 640px) and (max-width: 1023px) { .ss-hero-has-scene { display: block; position: relative; } .ss-hero-scene { position: absolute; top: var(--ss-topp-tab); bottom: var(--ss-bunn-tab); left: var(--ss-venstre); right: var(--ss-hoyre); margin: 0; height: var(--ss-h-tab); max-width: none; } /* Motivets bredde rundes til hele piksler før kolonnen regnes ut. Uten avrunding ble ingressen 0,28 px smalere enn før (260 · ratio = 357,28, der det gamle faste tallet brukte 357), og det flyttet linjebrekket på 749, 770, 884, 932 og 981 px — to av dem fikk en enkeltordslinje. Første linje er reserven for nettlesere uten round() (Chrome < 125, Firefox < 118, Safari < 15.4): de får den urundede verdien, 0,28 px smalere. */ .ss-hero-has-scene .ss-hero-ingress { max-width: max(var(--ss-kolonne-min), calc(100vw - var(--ss-ratio) * var(--ss-h-tab) - var(--ss-sidepad) - var(--ss-luft))); max-width: max(var(--ss-kolonne-min), calc(100vw - round(nearest, var(--ss-ratio) * var(--ss-h-tab), 1px) - var(--ss-sidepad) - var(--ss-luft))); } } /* Fra 1024: motivet er absolutt plassert til høyre, bunnforankret med mindre siden sier noe annet. min-height binder heroen til motivet, så et bunnforankret motiv aldri stikker opp over heroens overkant. */ @media (min-width: 1024px) { .ss-hero-scene { position: absolute; top: var(--ss-topp, auto); bottom: var(--ss-bunn, 0); left: var(--ss-venstre); right: var(--ss-hoyre); margin: 0; max-width: none; height: var(--ss-h); } .ss-hero-has-scene { /* c) HEROENS MINSTEHØYDE. Standard: like høy som motivet, som før. En side som vil ha heroen høyere enn motivet — arbeid, som fyller viewporten under sideheaderen — setter --ss-hero-fyll i stedet for å overstyre --ss-hero-min. */ --ss-hero-fyll: var(--ss-h); --ss-hero-min: var(--ss-hero-fyll); /* bredeste ingress som klarerer motivets boks; sidene velger om og hvor den brukes */ --ss-kolonne-ved-motiv: max(var(--ss-kolonne-min), calc(100vw - var(--ss-ratio) * var(--ss-h) - var(--ss-sidepad) - var(--ss-luft))); } } /* ==================== 1b. DELT VARIANT: .ss-hero-fyll ==================== */ /* KONVENSJONENE FRA SERVICES, delt. Slås på i markupen: <… class="ss-hero-has-scene ss-hero-fyll ss-hero-has-scene-- …"> Brukes av services, about og contact. IKKE work: arbeid har sitt eget oppsett (motiv som fyller viewporten), og klassen står ikke der. SIDEN MÅ SETTE, i sin egen blokk: --ss-ratio filas forhold --ss-h-tab motivhøyde 640–1023 --ss-h-klaring fra 1024: største motivhøyde med 46 px klaring mot H1 (med eyebrow) og ingress, fra sidens EGEN fasit. Arves ikke mellom sider. Krav i prioritert rekkefølge (21.09.2026): 1. 46 px klaring mot H1 og ingress, overalt 2. motivet fyller heroen fra headerlinjen til underkanten 3. maks 600 px 4. heroen helst ikke høyere enn første skjermbilde Innenfor kravene: så stort som mulig. HVORDAN FYLLINGEN VIRKER: --ss-h er heroens minstehøyde, og motivet er min(100 %, 600 px, klaringsgrensen) av heroens høyde. Heroen er den høyeste av teksten og --ss-h. Er klaringsgrensen høy nok, fyller motivet heroen uansett hvor høy teksten gjør den. Er den ikke det, vinner klaringen (krav 1 over 2) og motivet står bunnforankret med luft over. --ss-sideheader og --ss-hero-hoyde er de samme variablene som arbeid bruker. 117 px er målt på services: den sticky headeren er 117,00 px på alle 16 kombinasjoner av 1280/1440/1920/2560 × 700/900/1080/1440, med 1 px border-bottom. Sidene deler headeren. BUNNFORANKRET. --ss-topp og --ss-bunn settes eksplisitt: dels for å si det, dels fordi de leses med var() i den generiske delen og ellers ikke ville vært deklarert noe sted. TEKSTKOLONNEN VENSTRESTILT, som arbeid: --ss-inner-maks: none og --ss-inner-marg: 0. På services flytter teksten 40 / 120 / 360 px til venstre på 1280 / 1440 / 1920. */ @media (min-width: 1024px) { .ss-hero-fyll { --ss-inner-maks: none; --ss-inner-marg: 0; --ss-sideheader: 117px; --ss-hero-hoyde: calc(100vh - var(--ss-sideheader) - 1px); --ss-h: min(600px, var(--ss-h-klaring), var(--ss-hero-hoyde)); --ss-topp: auto; --ss-bunn: 0; } .ss-hero-fyll .ss-hero-scene { height: min(100%, 600px, var(--ss-h-klaring)); } } /* H1: clamp(2.5rem, 6vw, 4rem). .text-display (clamp(2.5rem, 6vw, 4.5rem)) deles av H1 på 26 sider og røres ikke. Identisk med .text-display under 1067 px, der 6vw er under 4rem, så det blir ingen sprang. En eyebrow inni H1 har sin egen størrelse (text-label). */ .ss-hero-fyll h1 { font-size: clamp(2.5rem, 6vw, 4rem); } /* INGRESSEN: 500 px fra 1024. Målt på services, tegn per linje, identisk på 1440 og 1920: 480 → 65/66/65/34 520 → 65/73/72/20 500 → 65/73/58/34 535 → 65/73/72/20 560 → 77/80/74 ← over lesbarhetsgrensen på 75 500 er den smaleste av de tre som brekker likt der, og gir mest klaring. Andre sider må sjekke sin egen tekst mot 75 tegn. */ @media (min-width: 1024px) { .ss-hero-fyll .ss-hero-ingress { max-width: 500px; } } /* Fra 1280: TEKSTBLOKKEN BUNNJUSTERES MOT MOTIVET. Heroen er låst til motivet med min-height og innholdet fyller den, så mindre padding-bottom alene gir bare luft under teksten, og bunnjustering alene har ingen plass å flytte. 22 px, ikke 24: nederste linje er ingressen (linjehøyde 1,6), og 24 px ga 29 px over motivets bunn på services, 22 ga 27. */ @media (min-width: 1280px) { .ss-hero-fyll { justify-content: flex-end; } .ss-hero-fyll > .ss-page-hero-inner { padding-bottom: 22px; } } /* ==================== 2a. TJENESTER ==================== */ /* Målt på assets/tjenester-hero-soyler.webp (2026-09-20): 1466×1360, VP8X med ALPHA-flagg + tapsfri ALPH-chunk (1739 B) 19,4 % helt gjennomsiktig, 0,3 % delvis, 80,3 % ugjennomsiktig Ingen luft langs noen kant, og ingen mørk kontur. KONTUREN: venstre malte kant ligger på 19,9 % av bredden i rad 0–1289 (loddrett), og kiler ut til 0 % i de nederste 70 radene (5 %) — gulvkilen, som peker mot ingressen. ------------------------------------------------------------ BEVISST UNNTAK: MOTIVET ER STRUKKET 20 % I BREDDEN. ------------------------------------------------------------ Resten av systemet er sideforholdslåst med vilje: bredden følger av høyden, så fila eier forholdet. Her brytes det bevisst. Filas eget forhold er 1466 / 1360 = 1,0779. Motivet vises med 1,0779 × 1,2 = 1,2935, etter designvalg 21.09.2026 (Stellan). --ss-ratio bærer det strukne forholdet, så all mekanikk som leser den — kolonnegulvet på nettbrett, ingressbredden på nettbrett, --ss-kolonne-ved-motiv — regner med den VISTE bredden, og aspect-ratio under sørger for at bildet faktisk vises slik. object-fit: fill (standard for , satt eksplisitt): bildet fyller boksen, ikke contain eller cover. Målt: vist bredde / vist høyde = 1,2935 på 390, 768, 1280 og 1920, og motivets malte venstrekant ligger innen 0,5 px av boksens venstre + 0,199 × bredden. Med contain lå den 28 px feil (positiv kontroll). Gjelder alle bredder, også under 640, der motivet ligger i flyten med full bredde og derfor blir lavere, ikke bredere. */ .ss-hero-has-scene--tjenester { --ss-ratio: calc(1466 / 1360 * 1.2); } .ss-hero-has-scene--tjenester .ss-hero-scene { aspect-ratio: var(--ss-ratio); object-fit: fill; } /* 640–1023: taket er 257 px, ellers det kolonnegulvet tillater. MÅLT MED STREKKET OG MED 46 PX MOT BÅDE H1 OG INGRESS (1152 punkter, 640–1023 × 900/1500/2000, 1 px steg). Største tak som holder på hvert punkt er 262 px, med 0 px margin på 715. 257 gir 5 px. Taket var 275 før strekket; med strekket og det nye kravet mot ingressen brytes 275 på 96 punkter (verst −6,4 px på 727×900). Under 704 binder kolonnegulvet i stedet, så brødtekstkolonnen beholder sine 300 px. */ @media (min-width: 640px) and (max-width: 1023px) { .ss-hero-has-scene--tjenester { --ss-h-tab: min(257px, calc((100vw - var(--ss-kolonne-min) - var(--ss-sidepad) - var(--ss-luft)) / var(--ss-ratio))); } } /* FRA 1024: KLARINGSGRENSEN FOR TJENESTER. Resten av oppsettet kommer fra .ss-hero-fyll (seksjon 1b). Målt med 1 px steg på 1024–2560 × 600/900 px vindu (3074 punkter), strukket motiv, H1 64 px, venstrestilt tekst. Grensen er lik i begge vindushøydene og sammenhengende fra 150 px og opp på hvert punkt. Den er to rette linjer med knekk der H1 slutter å vokse med 6vw (1067): 1024–1066 0,4742 · 100vw − 92,40 1067–1300 0,9656 · 100vw − 616,60 Begge linjene ligger inntil 0,49 px over fasiten. Regelen er linja minus 0,49 minus 5 px margin, rundet ned til hele piksler: −98 og −623. Minste høydemargin mot fasiten: 5,09 px på 1050. max() fordi fasiten er den høyeste av de to linjene på hver side av knekken. 600-taket binder fra 1267. HVOR KRAVENE KOLLIDERER (målt): 1024–ca. 1117: krav 1 over 2. Teksten er 445–452 px høy, men klaringen tillater bare 388–450. På 1024 mangler 58 px, på 1100 12 px. Motivet fyller ikke heroen der. Krav 4 viker ikke i noe målt punkt ned til 600 px vindu: teksten er høyst 452 px, og skjermen under sideheaderen er 482 px. */ @media (min-width: 1024px) { .ss-hero-has-scene--tjenester { --ss-h-klaring: max(calc(0.4742 * 100vw - 98px), calc(0.9656 * 100vw - 623px)); } /* MOTIVET FYLLER HEROEN. Klaringsregelen over bestemmer fortsatt BREDDEN, som foer; hoyden fyller heroen. Paa 1024 sto motivet 77,3 px lavere enn headerlinja fordi klaringshoyden var lavere enn heroen; strekket som trengs er 20,2 % paa 1024 og faller til 0,2 % ved 1140, der de to alt var like. Skrevet som hoyde + eksplisitt bredde, ikke som en rampet --ss-ratio: en ratio er et tall, og CSS kan ikke regne et tall ut av en lengde, saa en rampe maatte blitt en trapp. Slik er den kontinuerlig av seg selv - der klaringshoyden alt er heroens hoyde, er strekket null, og det finnes ingen kant aa hoppe over. */ .ss-hero-has-scene--tjenester .ss-hero-scene { /* --ss-h, ikke klaringsgrensen alene: --ss-h er min(600px, klaring, viewporten under headeren), altsaa noeyaktig hoyden motivet hadde foer. Med klaringsgrensen alene ble motivet for bredt der heroen er LAVERE enn grensen, og da ble det trykt sammen - maalt til -11,2 % paa det verste. */ width: calc(var(--ss-ratio) * var(--ss-h)); height: 100%; aspect-ratio: auto; } } /* ==================== 2c. KONTAKT ==================== */ /* Målt på assets/kontakt-hero.webp (2026-09-22): 2068×1200 (1,7233), 106,4 kB, laget fra kontakt-hero.png (3016×1750, utenfor repoet) med Lanczos, libwebp kvalitet 82, yuva420p. accurate_rnd er NØDVENDIG: med ffmpegs standard avrunding fikk hele det gjennomsiktige feltet alfa 1 i stedet for 0 (47 % av pikslene) - sløret fra arbeid-motivet. Nå 47,77 % helt gjennomsiktig. ALFA TRIMMET 2 PX INNOVER (to erosjoner av alfakanalen, 22.09.2026): mot den røde heroen hadde kanten et lyst bånd 1–3 px innenfor i 120 av 596 rader (20 %), synlig langs den mørke betongen øverst. Etter trimmingen 15 rader (2,5 %). Silhuetten flyttet seg 2–11 px til høyre på hver rad, aldri til venstre, så klaringen kan bare øke. ALPH tapsfri. Ingen mørk kontur (dybde 34, kontroll 3,06 px). Silhuetten: venstrekanten trekker seg fra 35,5 % til 66,2 % av bredden i øverste 30 %, står på 53,4 % fra 41 til 78 %, og feier ut mot 0 % nederst - gulvkilen. Tekst til venstre, motiv nede til høyre. Resten av oppsettet kommer fra .ss-hero-fyll (seksjon 1b). */ .ss-hero-has-scene--kontakt { --ss-ratio: calc(2068 / 1200); } /* 640–1023: tak 213 px. Fasit med 1 px steg, 640–1023 × 900/1500/2000 (1152 punkter), 46 px mot H1 med eyebrow og mot ingress: laveste grense er 218 px på 849, der H1 binder mot motivets øverste rader. 213 gir 5 px. Under 739 binder kolonnegulvet i stedet. */ @media (min-width: 640px) and (max-width: 1023px) { .ss-hero-has-scene--kontakt { --ss-h-tab: min(213px, calc((100vw - var(--ss-kolonne-min) - var(--ss-sidepad) - var(--ss-luft)) / var(--ss-ratio))); } } /* FRA 1024: KLARINGSGRENSEN FOR KONTAKT. Fasit med 1 px steg på 1024–2560 × 600/900 (3074 punkter). Tre rette linjer, hver minus det den stikker over fasiten minus 5 px margin, rundet ned: 1024–1087 H1 binder mot motivets aller øverste rader (0 %) fasit 0,4734 · W − 211,78, inntil 3,81 over → −221 1088–1279 H1 går fri av toppen; binder på rad 16–17 % fasit 0,9219 · W − 584,89, inntil 1,94 over → −592 fra 1280 tekstblokken bunnjusteres (varianten), ingressen binder mot gulvkilen på rad 91 % fasit 0,5805 · W − 179,93, inntil 1,20 over → −187 Minste høydemargin mot fasiten: 5,13 px på 1154. 600-taket binder fra 1356. SPRANGET PÅ 1088 er ekte og likt i begge vindushøydene: grensen går fra 305 til 418 idet H1 slipper motivets øverste rader. En max() av to linjer kan ikke gi et sprang oppover, derfor et brytepunkt. På 1024–1087 er passeringen ikke sammenhengende (høyere motiver kan passere igjen); regelen følger den sammenhengende grensen. HVOR KRAVENE KOLLIDERTE: 1024–1087, krav 1 over 2. Teksten var 379–382 px høy, klaringen tillot 264–294, og motivet fylte ikke heroen der. Med den mindre H1-en under 1280 gjelder det ikke lenger — se regelen under. Tallene over gjelder 1280 og oppover. */ /* H1 PAA SMALE SKJERMER, som paa Om oss. Den delte varianten gir clamp(2.5rem, 6vw, 4rem) = 61,4 px paa 1024. Med den kunne motivet ikke bli hoyere enn 276 px foer H1-gruppen kom under 46 px klaring, og heroen er 393 px - motivet fylte den ikke. 3,25rem (52 px) gir 495 px paa 1024 og 561 paa 1080, altsaa god margin over heroen. 44 px gir 529 og ville roert ordbrekket i H1; 52 holder. */ @media (min-width: 1024px) and (max-width: 1279px) { .ss-hero-has-scene--kontakt h1 { font-size: 3.25rem; } } /* MAALT PAA NYTT 23.09.2026 med H1 paa 3,25rem under 1280, 1 px steg, 1024-2560 x 600/900 (3074 punkter): 1024-1158 fasit 474 -> 599: calc(0,9280 * 100vw - 482px) 1159-1279 fasiten er over 700 overalt; 600-taket i varianten binder, saa klaringen settes til 600 Minste hoydemargin mot fasiten: 5,00 px (1030 og 1155), mot den LAVESTE av de to vindushoydene - paa 1024-1035 er 600 px vindu strengest (474 mot 479). Spranget paa 1088 er borte: med den mindre H1-en gaar teksten fri av motivets oeverste rader allerede fra 1024, saa grensen er én rett linje gjennom hele omraadet. */ @media (min-width: 1024px) and (max-width: 1158px) { .ss-hero-has-scene--kontakt { --ss-h-klaring: calc(0.928 * 100vw - 482px); } } @media (min-width: 1159px) and (max-width: 1279px) { .ss-hero-has-scene--kontakt { --ss-h-klaring: 600px; } } @media (min-width: 1280px) { .ss-hero-has-scene--kontakt { --ss-h-klaring: calc(0.5805 * 100vw - 187px); } } /* ==================== 2d. OM OSS ==================== */ /* Målt på assets/om-oss-hero.webp (tidligere tjenester-hero.webp, omdøpt med git mv, byte-lik): 1660×1208 (1,3742), 66,6 kB, VP8X med ALPHA-flagg + tapsfri ALPH. 38,9 % helt gjennomsiktig, 0,2 % delvis. Ingen mørk kontur (dybde 14,9, kontroll 3,04 px). 4 px luft langs høyre kant. Silhuetten: venstrekanten står på 30,7 % øverst, 45,9 % fra 11 til 70 % av høyden, og feier ut mot 0 % nederst. Heroen har bare første avsnitt som ingress; avsnitt 2 og 3 står i en egen seksjon under. Resten av oppsettet kommer fra .ss-hero-fyll. */ .ss-hero-has-scene--omoss { --ss-ratio: calc(1660 / 1208); } /* 640–1023: tak 209 px. Fasit med 1 px steg, 640–1023 × 900/1500/2000 (1152 punkter), 46 px mot H1 med eyebrow og mot ingress: laveste grense er 214 px på 1000. 209 gir 5 px. Under 659 binder kolonnegulvet i stedet. */ @media (min-width: 640px) and (max-width: 1023px) { .ss-hero-has-scene--omoss { --ss-h-tab: min(209px, calc((100vw - var(--ss-kolonne-min) - var(--ss-sidepad) - var(--ss-luft)) / var(--ss-ratio))); } } /* FRA 1024: KLARINGSGRENSEN FOR OM OSS. MÅLT PÅ NYTT 22.09.2026, etter at setningen om webutvikler i Oslo ble slettet fra ingressen. Fasit MÅLT PÅ NYTT 23.09.2026 med H1 på 2,75rem under 1280, 1 px steg, 1024–2560 × 600/900: 1024–1059 fasit 552 → 599, stigende: 1,333 · W − 813 → −818 1060–1279 fasiten er over 700 px overalt; 600-taket i varianten binder, så klaringen settes til 600 fra 1280 H1 er 4rem igjen, og linja fra forrige måling står: 1,2883 · W − 1084, fasit 579 mot regelens 565 på 1280 Minste høydemargin mot fasiten: 5,01 px (1024). Ved 600 px vindu er fasiten over 700 px på alle bredder — der binder viewporten først. Nettbrettregelen står: fasiten på 640–1023 × 900/1500/2000 er fortsatt lavest 214 px (1000×900), og taket 209 holder 5 px. KORTERE INGRESS GA LAVERE GRENSE, ikke høyere. Teksten er bunnjustert: når den krymper, stiger H1 opp mot motivets øverste, smaleste del i stedet for å stå i det brede feltet lenger nede. Den gamle regelen (243 / 1,0498 / 1,3453) gir 21,3 px klaring på 1024 med den kortere ingressen — målt, og under kravet. HVOR KRAVENE KOLLIDERER: motivet fyller ikke heroen på de smaleste desktopbreddene. Med regelen over fyller det fra 1236 ved 600 px vindu og fra 1238 ved 900. Ved 600 px vindushøyde er heroen fortsatt høyere enn skjermen på 1024–1279, mest 26,7 px (1279). Før slettingen var den høyere på alle bredder, mest 52,3 px. */ /* H1 PAA SMALE SKJERMER. Den delte varianten gir clamp(2.5rem, 6vw, 4rem) = 61,4 px paa 1024 og taket 64 px fra 1067. Med den naadde blekket x = 772,9 paa 1024, og motivet kunne ikke bli hoyere enn 227 px foer H1-gruppen kom under 46 px klaring - lavere enn gulvet i regelen under. 2,75rem (44 px) er punktet der ingressen overtar som bindende: 52 px gir 425, 44 gir 467, og 40 gir 468, altsaa ingenting mer aa hente. Maalt med 1 px skann paa 1024, 1100 og 1180. Sidepaddingen roeres ikke - teksten skal staa i linje med resten av sida. */ @media (min-width: 1024px) and (max-width: 1279px) { .ss-hero-has-scene--omoss h1 { font-size: 2.75rem; } } @media (min-width: 1024px) and (max-width: 1059px) { .ss-hero-has-scene--omoss { --ss-h-klaring: calc(1.333 * 100vw - 818px); } } /* 1060-1279: fasiten er over 700 px overalt med den mindre H1-en, saa det er 600-taket i varianten som binder, ikke klaringen. */ @media (min-width: 1060px) and (max-width: 1279px) { .ss-hero-has-scene--omoss { --ss-h-klaring: 600px; } } /* Fra 1280 gjelder H1 paa 4rem igjen, og linja fra forrige maaling staar: fasiten er 579 paa 1280 mot regelens 565. */ @media (min-width: 1280px) { .ss-hero-has-scene--omoss { --ss-h-klaring: calc(1.2883 * 100vw - 1084px); } } /* ==================== 2b. ARBEID ==================== */ /* Målt på assets/arbeid-hero.webp: 1566×756, VP8X med ALPHA-flagg + tapsfri ALPH-chunk Sideforhold 2,07143 Kontur: sort strek langs hele silhuetten, også langs topp-, høyre- og bunnkanten av lerretet. 1,9 px (halvverdi) til 2,2 px (90 %) i fila, målt vinkelrett på kanten. Designvalg, ikke fjern. KJENT OG VURDERT — SLØRET I MOTIVBOKSEN. IKKE «FIKS» I CSS. 51 % av pikslene har alfa 1 med sort farge, ikke alfa 0. Den gjennomsiktige delen av motivboksen blir derfor ett luminansnivå mørkere enn papiret, med skarp rektangelkant: papir #FFFFFF: 255 utenfor, 254 innenfor (målt på work.html) papir #F2F2F2: 242 utenfor, 241 innenfor kontrast 1,0085:1, ΔL* 0,35 — under synlighetsgrensen (~1) Kontrollfelt på samme grunn: alfa 0 → uendret, alfa 1/255 → ett nivå (identisk med sløret), alfa 3/255 → tre nivåer. Målingen skiller altså så vidt ett nivå. Vurdert som usynlig 2026-09-15; fila eksporteres ikke på nytt for dette. Skal det bort, er fiksen en alfaterskel i eksporten, ikke noe i CSS. HØYDENE ER SATT FRA EN FORHÅNDSSKANNING MED 1 PX STEG 640–2560, hver bredde, 900/1500/2000 px vindu, fersk sidelasting per punkt: 5763 punkter. For hver bredde største motivhøyde der H1 har ≥ 31 px og brødteksten ≥ 31 px klaring mot konturen. Kravet til regelen: minst 15 px margin mot den verdien overalt. På desktop varierer grensen ikke med vindushøyden (0 av 1537 bredder); på nettbrett gjør den det (213 av 384, fordi padding-bottom bruker vh). */ .ss-hero-has-scene--arbeid { --ss-ratio: calc(1566 / 756); } /* 640–1023: kolonnen står på gulvet (300 px), motivet tar resten. Minste margin mot grensen: 99,9 px (948). Ingen tak nødvendig: høyden er 314 px på 1023. */ @media (min-width: 640px) and (max-width: 1023px) { .ss-hero-has-scene--arbeid { --ss-h-tab: calc((100vw - var(--ss-kolonne-min) - var(--ss-sidepad) - var(--ss-luft)) / var(--ss-ratio)); } } /* Fra 1024: 368 PX, KONSTANT. Laveste grense er 387 px, på 1024 (neste: 388 på 1025–1026, stigende). 368 gir 19 px margin der. høyde margin 1024 bredder under 20 / 25 / 30 px margin 378 9 33 brudd på kravet 372 15 9 / 19 / 30 368 19 1 / 11 / 21 366 21 0 / 6 / 18 368 er der kurven knekker: ni færre bredder nær kravet enn 372 for 1 % høyde; 366 koster 2 px til for én bredde. Én konstant, ikke en kurve eller trapp: 378 kunne nås fra 1035, men bare med en trapp, og trapper har brukket mellom målepunktene i dette prosjektet. Tekstblokken bunnjusteres fra 1024 med padding-bottom 22 (services først fra 1280). Grensene over er målt med nettopp det oppsettet; endres det, gjelder de ikke lenger. Ingressen er 462 px — under ~75 tegn per linje. */ /* ------------------------------------------------------------ FORSØK 2026-09-15, UCOMMITTET: MOTIVET FYLLER VIEWPORTEN UNDER SIDEHEADEREN. Kan bli rullet tilbake til 368 px (se over). ------------------------------------------------------------ Høyde = 100vh − sideheaderen (117 px, sticky, målt likt på 1024–2560 × 700–1440) − 1 px border-b. Motivet blir bredere enn skjermen og beskjæres på venstre side av overflow-x-clip. Teksten toppjusteres og venstrestilles på sidepaddingen (48 px), i det gjennomsiktige feltet øverst til venstre i motivet. Nederst går silhuetten over hele bredden, så bunnjustert tekst kolliderer ved denne høyden uansett ingressbredde. Ingressen er fast 462 px: kolonnen står ikke lenger ved siden av motivboksen, men inne i den, så --ss-kolonne-ved-motiv gjelder ikke. MOTIVET ER HØYERE ENN HEROEN (--ss-vekst). To grunner: 1) Filas øverste rad er halvgjennomsiktig i kolonne 635–1103 (alfa under 128). Den leste som en lys stripe rett under headerens sorte kantlinje: luminans 203 mot 71 i radene under, målt på 1280, 1440, 1920 og 2560. Når motivet er høyere enn heroen og forankret i bunnen, havner den raden over heroens overkant — bak sideheaderen, som er ugjennomsiktig og ligger over (z-index 50). Stripen er dermed borte uten at fila røres. 2) Skulpturen blir større i samme grep. Heroen selv fyller fortsatt viewporten: --ss-hero-fyll er heroens egen høyde, ikke motivets. Veksten må holde seg under sideheaderens høyde, ellers stikker motivet opp over den. KLARINGEN, MÅLT PÅ NYTT 22.09.2026. Den gamle merknaden om 40 px på 1440×900 er tatt ut: den lot seg ikke gjenskape med noen av de to verktøyene, heller ikke i tilstanden før veksten (59 px der). 1440×900 H1 104 px malt blekk, 84,6 px med ordbokser 1431×900 båndkanten, H1 95 px malt, 75,6 px med ordbokser laveste i hele båndet 851–1050: 54,0 px med ordbokser (1354×851) DE TO TALLENE MÅLER ULIKT, og forskjellen er 19–20 px overalt: ordboksen for «PÅ» er full bredde helt opp til Å-ringens topp, mens silhuettens skråkant ligger nærmest akkurat der - ringens høyre kant sitter ~20 px lenger inn enn boksen. Kontroll: flyttes H1 80 px mot motivet, faller den malte målingen med nøyaktig 80 px. Ikke gjør veksten permanent uten ny vurdering. */ @media (min-width: 1024px) { .ss-hero-has-scene--arbeid { --ss-sideheader: 117px; --ss-hero-hoyde: calc(100vh - var(--ss-sideheader) - 1px); --ss-vekst: 1.10; --ss-tak: calc(0.42 * 100vw - 40px); /* Gulvet: paa de smaleste vinduene ga taket 390 px motiv mens innholdet er 395-406 px hoyt, og heroen stakk 5-16 px over motivet (maalt). Gulvet lukker det. */ --ss-gulv: 430px; --ss-h: max(var(--ss-gulv), min(calc(var(--ss-hero-hoyde) * var(--ss-vekst)), var(--ss-tak))); /* Naar taket gjelder, foelger heroen motivet: ellers ble det staaende 160-270 px hvitt mellom headeren og motivets topp (maalt). Det er standarden (--ss-hero-fyll), saa den settes ikke her. Der full hoyde er trygg, settes --ss-hero-fyll til heroens egen hoyde i blokken under, saa heroen fyller viewporten og motivet stikker opp bak headeren. */ justify-content: flex-start; /* Kolonnen ligger inne i motivet, venstrestilt paa sidepaddingen, ikke i grid-containeren ved siden av motivboksen. */ --ss-inner-maks: none; --ss-inner-marg: 0; } .ss-hero-has-scene--arbeid .ss-hero-ingress { max-width: 462px; } } /* FULL HØYDE DER VINDUET ER BREDT NOK I FORHOLD TIL HØYDEN. Motivet er 2,07 ganger så bredt som høyt. Vokser det med vindushøyden, når det lenger og lenger inn på tekstspalten. Målt på 616 punkter (bredde 1024–2560 i steg på 20, vindushøyde 700–1440): full høyde er trygg i 393 av dem, og utrygg bare når vinduet er høyt i forhold til bredden. Grensen flytter seg med vindushøyden — den ligger på sideforhold 1,61 ved 700 px vindu og 1,39 ved 1440 — derfor fire bånd, ikke én terskel. Terskelen i hvert bånd er den målte grensen med margin: vindu ≤ 850 grense 1,606 (1124 px ved 700) terskel 1,61 851–1050 terskel 1,59 — MÅLT PÅ NYTT 22.09.2026, se under 1051–1250 grense 1,485 (1604 ved 1080) terskel 1,49 ≥ 1251 grense 1,418 (1844 ved 1300) terskel 1,43 BÅNDET 851–1050 ER HEVET FRA 1,55 TIL 1,59. Kanten er skannet for hver eneste vindushøyde i båndet, fire bredder rundt kanten per høyde (800 punkter): med 1,55 og med 1,57 faller klaringen under 46 px i bunnen av båndet - 1,57 gir 36,99 px på 1337×851, og 47 punkter under kravet. Laveste terskel som holder, regnet fra de målte tallene, er 1,5828; 1,59 er den nærmeste rene verdien og gir 54,0 px som laveste klaring i hele båndet. Et sveip over 1024–2560 i steg på 8, åtte vindushøyder (1420 punkter), har ingen punkter under 46. Utenfor båndene gjelder taket --ss-tak: 0,42 av bredden minus 40 px. Det er en målt øvre grense, ikke et utledet tall — den holder H1 over 46 px klaring (31 px krav pluss 15 px margin) og brødteksten over 31 i alle 616 punktene. KLARINGEN ER IKKE SYNKENDE I HØYDEN. Den dypper og kommer tilbake: når motivet vokser, havner H1 først i den smale øvre delen av silhuetten, siden i det brede gjennomsiktige feltet lenger nede. Derfor kan full høyde være trygg der en mindre høyde ikke er, og «største sammenhengende høyde» er feil mål her. */ @media (min-width: 1024px) and (max-height: 850px) and (min-aspect-ratio: 161 / 100), (min-width: 1024px) and (min-height: 851px) and (max-height: 1050px) and (min-aspect-ratio: 159 / 100), (min-width: 1024px) and (min-height: 1051px) and (max-height: 1250px) and (min-aspect-ratio: 149 / 100), (min-width: 1024px) and (min-height: 1251px) and (min-aspect-ratio: 143 / 100) { .ss-hero-has-scene--arbeid { --ss-h: calc(var(--ss-hero-hoyde) * var(--ss-vekst)); --ss-hero-fyll: var(--ss-hero-hoyde); } }