/* ========================================================================== JUNO-KIT.CSS — broen mellom /juno-modulene og kit-skallet ========================================================================== Lastes KUN på malen page-juno-kit.php, aldri på den live /juno-siden. Hele poenget: la `.kit-seksjon` eie luften og flaten, og la de eksisterende modulene beholde sitt indre oppsett. Ingen modul er skrevet om; de er bare fratatt sin egen padding, marg og bakgrunn. 🪤 ROTÅRSAKEN VI RETTER: modulene bar luften sin som `margin-top`, ikke padding — `.juno-size` 80 px, `.juno-one` 96 px, `.juno-nfc-note` 56 px, `.juno-founder` 96 px. Derfor kollapset avstandene mot naboer og lot seg ikke justere ett sted. En seksjon setter ALLTID sin egen padding; det er regel 1 i STILGUIDE. ⛔ Ingen tekst, ingen farge og ingen komponentregel endres her. Kun luft, flate og de tre stedene en krem-flate krever at noe snus. ========================================================================== */ /* ========================================================================== 0. RYTMEN PÅ DENNE SIDEN 📏 MÅLT: med standard `--band` (128 px på desktop) ble siden 11,8 skjermer mot 7,1 før. Elleve seksjoner som hver setter 128 px topp OG bunn gir 256 px mellom hver — der de gamle modulene hadde 80–96 px kollapsende marg. Veksten var altså ikke luft vi manglet, men dobbelttelling. `--band-tett` (80 px) gir 160 px mellom seksjoner: mer enn før, fordi flere seksjoner hadde 0 og lå klemt, men ikke dobbelt. ⛔ Ingen ny rå verdi — tokenet finnes i tokens.css. ========================================================================== */ /* 🪤 FALLBACK ER OBLIGATORISK. Skrev jeg `var(--band-tett)` uten den, og tokens.css ikke var lastet, ble hele `padding`-erklæringen ugyldig og ti seksjoner falt til 0 px — målt. Kit-et er bygget fallback-sikkert; en overstyring må holde samme kontrakt. */ .juno-kit { --kit-band: var(--band-tett, clamp(48px, 8vw, 80px)); } /* ========================================================================== 1. SKALLET OVERTAR LUFTEN ========================================================================== */ /* 🪤 SPESIFISITETSFELLA JEG GIKK I FØRST: `.juno-kit .juno-split` (0,2,0) slår `.kit-seksjon` (0,1,0). Skrev jeg `padding: 0; background: none` her for å «fjerne modulens egen luft», slo jeg samtidig ut skallets padding og flate — målt: alle seksjoner endte på 0 px og feil farge. Broen må derfor SETTE skallets verdier, ikke nullstille dem. `--kit-flate` settes av `--lys`/`--dyp` på samme element, så variabelen gjør jobben. */ /* --- Modulene som ALLEREDE er fullbredde med eget innerskall ---------- */ .juno-kit .juno-gallery, .juno-kit .juno-specs { margin: 0; padding: var(--kit-band) var(--kit-edge); background: var(--kit-flate); } /* --- Modulene som har EGEN max-width og EGEN sidepadding -------------- `.juno-split` er `max-width: 1240` med **40 px** sidepadding på desktop, ikke `--max-w` med `--edge`. `.sp-box` og `.juno-size` har sine egne mål igjen. Å regne målbredden inn i paddingen krevde altså én formel per modul per bruddpunkt — og første forsøk bommet med 52 px på designfilosofien og 144 px på «I esken». Målt. ✅ Løsningen fjerner regnestykket helt: modulen beholder sin egen `max-width` og sidepadding NØYAKTIG som live, og flaten males fullbredde av en skygge som får lov å flyte utenfor. `clip-path` holder den fra å lage vannrett rulling. 🪤 `clip-path` lager en ny utklippsboks: et barn som stikker UT loddrett (dropdown, tooltip) ville blitt kappet. Ingen av disse har det — sjekk på nytt hvis en modul får et slikt element. */ .juno-kit .juno-split, .juno-kit .juno-size, .juno-kit .juno-one, .juno-kit .juno-founder, .juno-kit .sp-box { margin-block: 0; padding-block: var(--kit-band); background: var(--kit-flate); box-shadow: 0 0 0 100vmax var(--kit-flate); clip-path: inset(0 -100vmax); } /* Hårstreken hørte til da boksen var en blokk MIDT i en flate. Nå er den en egen flate med egen farge, og en strek på toppen av et fargeskift leser som en feil. */ .juno-kit .sp-box { border-top: 0; } /* Galleriet mister `padding: 0 0 80px` — seksjonen eier nå sidemargin, så sporet skal ikke legge sin egen oppå. */ .juno-kit .juno-gallery-track { padding: 0; } /* Notisen er en INNRYKKET boks, ikke en flate. Den beholder sin egen bakgrunn og padding; seksjonen rundt gir luften. */ .juno-kit .juno-kit-note .juno-nfc-note { margin: 0 auto; } /* Skjermbeskyttelsen er en delt template-part som også brukes på /utstyr. ⛔ Ikke rør `.mof`-reglene — wrapperen tar luften, delen er urørt. */ .juno-kit .juno-kit-mof .mof { margin-top: 0; margin-bottom: 0; } /* ========================================================================== 2. HERO — står utenfor stigen Heroen har sitt eget motiv som flate og skal gå helt til topps. ========================================================================== */ .juno-kit .juno-hero { padding: 0; } /* ========================================================================== 3. KREM-FLATENE — de tre stedene noe må snus `.kit-seksjon--lys` bytter de semantiske aliasene, så overskrift, brødtekst og eyebrow følger med av seg selv. Men tre ting er skrevet med RÅ rgba i juno.css og arver derfor ikke: ========================================================================== */ /* 3a — Designfilosofien (slot B). Brødteksten er rå rgba(255,251,239,.65). */ .juno-kit .kit-seksjon--lys .juno-split-text p { color: var(--text-dim, rgba(20, 16, 10, .76)); } .juno-kit .kit-seksjon--lys .juno-split-text h2, .juno-kit .kit-seksjon--lys .juno-split-text h2 em { color: var(--text, #14100A); } .juno-kit .kit-seksjon--lys .eyebrow { color: var(--gold, #7E6F45); } /* 3b — Ærlighetsblokka (slot F). Egen h3, strong og lenke. */ .juno-kit .kit-seksjon--lys .juno-one-honest h3, .juno-kit .kit-seksjon--lys .juno-one-honest h3 em, .juno-kit .kit-seksjon--lys .juno-one-honest strong { color: var(--text, #14100A); } .juno-kit .kit-seksjon--lys .juno-one-honest p { color: var(--text-dim, rgba(20, 16, 10, .76)); } .juno-kit .kit-seksjon--lys .juno-one-honest a, .juno-kit .kit-seksjon--lys .juno-one-more a { color: var(--gold, #7E6F45); border-bottom-color: var(--border, rgba(20, 16, 10, .16)); } /* Blokka lå som en avslutning inne i grensesnitt-seksjonen og hadde derfor `margin-top: 52px` på mobil. Som egen seksjon eier skallet den luften. */ .juno-kit .juno-one-honest { margin-top: 0; } /* 3c 🪤 KNAPPEN MÅ SNUS PÅ KREM. Kremen her er #FFFBEF (samme som .ff-lys på forsiden), ikke tokens.css sin --sand-1 — den målte 4,31:1 på brødtekst mot 8,78:1 for denne. `.btn-gold` setter `color: #0a0a0a !important`; uten `!important` på motsvarende regel blir knappen navy flate med nesten-sort tekst — målt 1,2:1 på live tidligere. Invertert måler 15,97:1. Regelen finnes i kit.css; denne fanger tilfellet der knappen ligger dypere enn kit-et ser. */ .juno-kit .kit-seksjon--lys .btn-gold { background: var(--text, #14100A) !important; color: var(--p-cream, #FFFBEF) !important; } /* ========================================================================== 4. MOBIL Modulene har sine egne bruddpunkter i juno.css. Her nullstilles bare de marginene som ellers ville lagt seg oppå skallets padding igjen. ========================================================================== */ @media (max-width: 767px) { /* ⛔ Kun loddrett. Sidepaddingen er modulens egen — rører vi den, brekker vi det oppsettet som allerede er riktig på mobil. */ .juno-kit .juno-split, .juno-kit .juno-size, .juno-kit .juno-one, .juno-kit .juno-founder { margin-block: 0; padding-block: var(--kit-band); } } /* ========================================================================== 5. MÅLENE INNE I FOTOBÅNDET Sto først som egen seksjon under bildet — det ble en nesten tom flate med tre tall i venstre hjørne (Tor 08.09: «fjernes fra egen seksjon»). Nå er de et tillegg under brødteksten i bildets frisone. 📏 Plassbudsjett: frisonen er 37 % av bredden. På 1440 px = 527 px, på 800 px = 290 px. Lengste ledd («100,6 mm») måler ~62 px ved 13 px skrift, tre ledd + to mellomrom ≈ 220 px. Klaring selv på 800 px. 🪤 Ikke gjør etikettene lengre — sperret versaltekst tar mye bredde, og spalta kan ikke vokse: den er låst av telefonenes kant. ========================================================================== */ .juno-kit .kit-band__say .juno-size-dims { display: flex; gap: clamp(14px, 1.6vw, 26px); margin-top: clamp(12px, 1.4vw, 20px); padding-top: clamp(10px, 1.2vw, 16px); border-top: 1px solid var(--kit-strek); border-bottom: 0; grid-template-columns: none; } .juno-kit .kit-band__say .juno-size-dims > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .juno-kit .kit-band__say .juno-size-dims span { font-family: var(--font-sans, system-ui, sans-serif); font-size: clamp(8px, .68vw, 10px); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .juno-kit .kit-band__say .juno-size-dims strong { font-family: var(--font-serif, Georgia, serif); font-weight: 400; font-size: clamp(13px, 1.2vw, 17px); white-space: nowrap; } /* Lyst motiv: samme blekk som resten av tekstblokka. */ /* 📏 0,72 og ikke 0,62: etikettene er 10 px, så AA krever 4,5:1. Mot verste flate bak blokka (rgb 184,166,153) med 18 % krem-skjerm måler 0,62 bare **4,04:1** — under. 0,72 gir 5,27:1 og er fortsatt tydelig roligere enn verdiene, som står på 9,52:1. ⛔ Ikke demp dem tilbake «for hierarkiets skyld» uten å måle. */ .juno-kit .kit-band--lyst-motiv .juno-size-dims span { color: rgba(20, 16, 10, .72); } .juno-kit .kit-band--lyst-motiv .juno-size-dims strong { color: #14100A; } .juno-kit .kit-band--lyst-motiv .juno-size-dims { border-top-color: rgba(20, 16, 10, .18); } @media (max-width: 767px) { /* Under bildet står de på seksjonens egen flate og arver dens blekk. */ .juno-kit .kit-band--lyst-motiv .juno-size-dims span { color: var(--kit-blekk-svak); } .juno-kit .kit-band--lyst-motiv .juno-size-dims strong { color: var(--kit-blekk); } .juno-kit .kit-band--lyst-motiv .juno-size-dims { border-top-color: var(--kit-strek); } .juno-kit .kit-band__say .juno-size-dims span { font-size: 9px; } .juno-kit .kit-band__say .juno-size-dims strong { font-size: 15px; } } /* ========================================================================== 6. GALLERIET I FULLBREDDE Tor 08.09: «fullbredde på desktop, og gjerne annen farge enn seksjonen over og under, så vi skiller mer». 🪤 Kit-ets `kit-galleri--bleed` styler `.kit-galleri__rutenett`. Juno-malen har `.juno-gallery-track`. Klassen på seksjonen alene gjorde derfor ingenting — målt: sporet sto igjen på 1240 px i 3 kolonner mens seksjonen var 1905. Broen kobler de to navnene. 📐 ÉN RAD på desktop. Et 3×2-rutenett i full bredde blir for høyt: på 1920 px ville hver flis bli 635 px bred og 847 px høy — 1 694 px for to rader. Seks fliser à 1/6 gir 318×424, altså 424 px totalt. ========================================================================== */ /* 🪤 SPESIFISITET IGJEN: broens `.juno-kit .juno-gallery` (0,2,0) setter `padding: var(--kit-band) var(--kit-edge)` og slår kit-ets `.kit-galleri--bleed` (0,1,0). Uten regelen under sto sporet på 1761 px i et 1905 px vindu — 144 px sidemargin igjen. Målt. ⛔ Sidemarginen må nullstilles HER, ikke i kit.css. */ .juno-kit .kit-galleri--bleed { padding-left: 0; padding-right: 0; } .juno-kit .kit-galleri--bleed .juno-gallery-track { max-width: none; padding: 0; grid-template-columns: repeat(6, 1fr); gap: var(--kit-galleri-gap, 6px); } /* Flisene mister avrundingen i fullbredde — en filmstripe har rette kanter, og radius på 6 fliser kant i kant leser som seks løsrevne kort. */ .juno-kit .kit-galleri--bleed .juno-gallery-img { border-radius: 0; aspect-ratio: 3 / 4; } @media (max-width: 1199px) { .juno-kit .kit-galleri--bleed .juno-gallery-track { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .juno-kit .kit-galleri--bleed .juno-gallery-track { grid-template-columns: repeat(2, 1fr); gap: 4px; } }