/* annonsekort.css — annonsekortet, delt av alle sider. * * Lå i css/side-forbrukslan.css til 15. august 2026, sammen med rendereren. * Da Uno Score-kortet skulle på gjeldsregistersiden, ville stilen måttet * kopieres, og to kopier av det samme kortet er to kort som før eller siden * ser ulike ut. Markupen ligger i js/annonsekort.js, stilen her, dataene i * data/annonselenker.json. * * Lastes av hver side som faktisk har et kort. Ikke lagt i pengeguide.css: * de fleste sidene har ingen, og de skal ikke betale for stilen. * * ============================================================ * TRE FORMATER, ÉN RENDERER * ============================================================ * * A. Bredt tre kolonner: logo, tekst, knapp. Priseksempelet på egen * rad under, på tvers. For artikkeltekst i full lesespalte. * B. Smalt stablet i full bredde. For sidefelt og mobil. * C. Rad kompakt. For kort inni en liste, som annonsørkortet i * lånelista. Skal matche radene rundt seg. * * A og B velges med en CONTAINER QUERY, ikke en media query. Samme kort * kan stå i en 672 px lesespalte og i et 300 px sidefelt på samme * skjermbredde, og da er det kortets egen bredde som avgjør, ikke * vinduets. C settes av kalleren, fordi «står i en liste» er noe kortet * ikke kan måle seg fram til. * * ============================================================ * BYTEPUNKTET ER REGNET UT, IKKE GJETTET * ============================================================ * * Tre kolonner krever at alle tre får plass samtidig: * * logoboks 6.5rem fast, se under * kolonneavstand 1.375rem * tekstspalte 20rem minimum, se under * kolonneavstand 1.375rem * knappespalte 9.5rem * ------------------------------ * sum 38.75rem * * Tekstspaltas minimum er 20rem. Ved --tekst-sm på 16 px gir det rundt 40 * tegn per linje, som er nedre grense for lesbar prosa. Under det blir * overskriften brutt i tre og brødteksten en smal søyle. * * POLSTRINGEN SKAL IKKE VÆRE MED I SUMMEN. Det var den i første forsøk, og * terskelen havnet på 42rem. En container query måler beholderens * CONTENT-BOX, altså etter at polstringen er trukket fra. Kortet i * artikkelen er 672 px bredt, men spør med 632. Terskelen slo derfor aldri * inn, og formatet som var laget for lesespalta var død kode i det * øyeblikket det ble skrevet. Målt før rettelsen: grid-template-columns * sto som «none» på et 672 px kort. * * Terskelen står derfor på 38.75rem, som er summen over. Den er ikke valgt * fordi den er et pent tall. Endrer du logoboksen, knappespalta eller * kolonneavstanden, skal dette regnestykket regnes om — og polstringen * skal fortsatt holdes utenfor. */ /* ---------- felles ---------- */ /* .midtkort er BEHOLDEREN container query-en spør. Gridden ligger på .akort inni, fordi et element ikke kan spørre om sin egen bredde. */ .midtkort{background:var(--spruce);color:var(--on-spruce); border-radius:10px;padding:1.125rem 1.25rem;min-width:0; container-type:inline-size;container-name:akort} /* TO KORT SKAL ALDRI KUNNE KOLLAPSE TIL ÉN FLATE. --------------------------------------------------------------- Kortene har ingen egen margin, fordi de vanligvis står alene i en flyt der naboene har sin. Står to etter hverandre, betyr det at de møtes kant i kant, og to marineblå flater uten mellomrom leses som én dobbel annonse. Det skjedde på restskattsiden, med et gjeldsoversiktskort og et lånekort som gjør helt forskjellige ting. Marginen står på kortet selv og ikke på det som omgir det, så regelen gjelder uansett hvor kortet settes inn. Den doble avstanden mellom to naboer er med vilje større enn den vanlige blokkluften: skillet mellom to annonser må være tydeligere enn skillet mellom en annonse og brødtekst, ellers ser leseren én flate. */ .brod .midtkort{margin-block:var(--luft-blokk)} .brod .midtkort + .midtkort{margin-top:calc(var(--luft-blokk) * 2)} /* Format B, smalt: stablet. Standarden, fordi den fungerer i enhver bredde. A er tillegget som slår inn når det er plass. */ .midtkort .akort{display:grid;gap:.875rem 1.375rem;min-width:0} /* ---------- logoen ---------- ÉN FAST BOKS FOR ALLE ANNONSØRER, og logofila skaleres inn i den. Boksen fulgte tidligere logofila gjennom en `logo_hoyde` per annonsør, satt som inline stil. Målt på restskattsiden 15. august 2026: Uno Score fikk 168x60, Uno Finans 120x44, i to kort rett under hverandre. De så ut som to komponenter, og korthøyden fulgte etter med 154 mot 176 piksler. Logoen ligger på hvit flate, ikke rett på det marineblå. Uno Finans sitt ordmerke er mørk marineblå og ville forsvunnet inn i --spruce. Vi kan ikke fargelegge om en annonsørs merke, det er deres, så løsningen er å gi den underlaget den er laget for. Se dokumentasjon/annonsormateriell.md. object-fit:contain er det som gjør boksen fast: filen skaleres til den passer, uansett sideforhold, og boksen står stille. Et rombeformet merke ser da mindre ut enn et ordmerke i samme boks, og det er riktig. Skal et merke fylle mer, ber vi om en fil med mindre luft rundt merket. */ .midtkort .amerke{display:flex;align-items:center;min-width:0} .midtkort .alogo{ display:block;box-sizing:border-box; inline-size:6.5rem;block-size:2.75rem; object-fit:contain;object-position:center; background:#fff;border-radius:6px;padding:.3125rem .5rem} /* Annonsører uten logofil får navnet i tekst. Samme boks, så raden ikke hopper når en logo mangler. */ .midtkort .alogo.tekst{ display:flex;align-items:center;justify-content:center; color:var(--spruce);font-size:var(--tekst-sm); font-variation-settings:"wdth" 84,"wght" 700; overflow:hidden;text-align:center;line-height:1.1} /* ---------- teksten ---------- */ .midtkort .abrod{min-width:0} .midtkort h3{margin:0 0 .25rem;font-size:var(--tekst-base);color:var(--on-spruce); font-variation-settings:"wdth" 84,"wght" 720;overflow-wrap:anywhere} .midtkort .atekst{margin:0;color:var(--on-spruce-dim);max-width:66ch; font-size:var(--tekst-sm);line-height:1.45} .midtkort .atekst b{color:var(--on-spruce); font-variation-settings:"wdth" 100,"wght" 650} /* ---------- priseksempelet ---------- Egen rad på tvers, under de tre kolonnene, i ALLE formater. Sto tidligere inne i tekstspalta, uten egen font-size. Da arvet den --tekst-base på 20 px mens brødteksten ved siden av var --tekst-sm på 16 px, altså STØRRE enn teksten den ikke skulle konkurrere med. Og den brakk midt i en term: «Nominell rente 10,10 %, effektiv» / «rente 11,31 %». Dette er den lengste strengen kortet må bære, den er pliktig, og den kan ikke kortes ned. Derfor er det den layouten dimensjoneres etter. Streken over er ikke pynt: den skiller annonsørens siterte opplysning fra vår egen ramme rundt den. */ .midtkort .eks{margin:0;padding-top:.75rem; border-top:1px solid var(--linje); color:var(--on-spruce-dim);font-size:var(--tekst-xs);line-height:1.5; text-wrap:pretty} /* ---------- knappen ---------- */ .midtkort .aknapp{display:flex;flex-direction:column;gap:.375rem; align-items:stretch;min-width:0} .midtkort .cta{background:var(--rust-dim);color:var(--ink);width:100%} .midtkort .cta:hover,.midtkort .cta:focus-visible{ background:var(--on-spruce);color:var(--spruce)} .midtkort .amerk{font-size:var(--tekst-xs);color:var(--on-spruce-dim); letter-spacing:.05em;text-transform:uppercase; font-variation-settings:"wdth" 92,"wght" 520;text-align:center} /* ============================================================ FORMAT A: BREDT ============================================================ Terskelen er regnet ut øverst i fila. Endrer du logoboksen, knappespalta eller polstringen, regn den om. */ @container akort (min-width:38.75rem){ .midtkort .akort{ grid-template-columns:auto minmax(20rem,1fr) 9.5rem; align-items:center} /* Priseksempelet spenner alle tre kolonnene. */ .midtkort .eks{grid-column:1 / -1} .midtkort .amerke{align-items:flex-start} } /* ============================================================ FORMAT C: RAD ============================================================ For kort som står inni en liste og skal ha listas rytme, ikke sin egen. Strammere polstring og mindre avstand, men samme logoboks og samme tekststørrelser som de andre formatene. Det er rytmen som endres, ikke geometrien: et kort som krymper logoen sin i en liste er tilbake til feilen dette skulle rette. */ .midtkort--rad{padding:.875rem 1rem} .midtkort--rad .akort{gap:.625rem 1rem} .midtkort--rad h3{font-size:var(--tekst-sm)} .midtkort--rad .eks{padding-top:.5rem} @container akort (min-width:38.75rem){ .midtkort--rad .akort{gap:.5rem 1rem} }