/* To familier med hver sin jobb. Familjen Grotesk (skandinavisk grotesk) er stemmen: overskrifter, navn og alle tall. Source Sans 3 er lesefonten. Tall settes alltid i displayfonten, så beløp og enhet hører til samme system i stedet for å være to tilfeldige størrelser. */ @font-face { font-family:"Familjen"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/assets/fonts/familjen-grotesk-latin.woff2") format("woff2"); } @font-face { font-family:"Kilde"; font-style:normal; font-weight:200 900; font-display:swap; src:url("/assets/fonts/source-sans-3-latin.woff2") format("woff2"); } :root { /* Grunn: varm stein, gråbrutt. Bevisst ikke krem — krem med terrakotta er den mest gjenkjennelige generiske forbrukersidepaletten som finnes. */ --bg:#F4F3EE; --flate:#FFFFFF; --baand:#EAE9E1; /* Nøytralene er dratt mot aksenten: blekket er grønnsvart, ikke grått */ --blekk:#16201B; --dempet:#5C6660; --strek:#DFDED5; /* Ett sted å være modig: dyp skoggrønn som handlingsfarge. Alle konkurrentene kjører oransje, og grønt kler mat uten å rope. */ --aksent:#1E5540; --aksent-moerk:#16412F; --aksent-mykt:rgba(30,85,64,.08); --cta:#1E5540; --cta-moerk:#16412F; --spar:#2A7049; --spar-mykt:rgba(47,125,82,.11); /* Signalfargen er reservert. Den brukes KUN til «billigst nå». */ --ribbe:#CE3F2A; --opp:#B4432E; --fotbg:#16201B; --fottekst:#E6E7E0; --rav:#5C6660; --skygge:0 1px 2px rgba(22,32,27,.04), 0 8px 24px -16px rgba(22,32,27,.22); /* Typeskala, fast forhold. Ingen størrelse utenfor denne. */ --t-xs:.75rem; --t-s:.875rem; --t-m:1rem; --t-l:1.125rem; --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:clamp(2.1rem,4.6vw,3rem); /* Lesesporets bredde. Fast i rem, aldri ch: ch varierer med elementets egen font-size og gir skjeve akser. */ --lese:34rem; } * { box-sizing:border-box; margin:0; } html { scroll-behavior:smooth; } body { background:var(--bg); color:var(--blekk); font:17px/1.6 "Kilde", -apple-system, "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1, h2, h3, .merke, .tall, .pris, button, .cta, .cta-sek, th { font-family:"Familjen", "Kilde", system-ui, sans-serif; } /* Het .mono av historiske grunner, men har aldri vært monospace — det er tabulære tall, som er det tallkolonner faktisk trenger. */ .mono, .tallrad, td, th { font-variant-numeric:tabular-nums; } .mono { font-weight:600; } /* Beløp og enhet som én låst enhet. Enheten er ikke en hvisking: den er satt i samme familie, halv størrelse, på samme grunnlinje. */ .beloep { display:inline-flex; align-items:baseline; gap:.3em; font-family:"Familjen", system-ui, sans-serif; font-variant-numeric:tabular-nums; font-size:2.5rem; line-height:1; } .beloep .tall { font-size:1em; font-weight:700; letter-spacing:-.025em; line-height:1; } /* .40em av beløpet: stor nok til å leses som en enhet, liten nok til at tallet fortsatt bærer. Ved 2.5rem beløp blir dette 1rem. */ .beloep .enhet { font-size:.40em; font-weight:500; color:var(--dempet); letter-spacing:.005em; white-space:nowrap; } .etikett { font-family:"Familjen", system-ui, sans-serif; font-size:var(--t-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--dempet); } .ramme { position:relative; z-index:1; max-width:880px; margin:0 auto; padding:0 20px 0; } nav.topp { display:flex; align-items:center; gap:4px; padding:16px 0 14px; position:sticky; top:0; z-index:6; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); } nav.topp .merke { font-weight:700; letter-spacing:-.02em; margin-right:auto; color:inherit; text-decoration:none; font-size:1.2rem; padding:9px 2px; display:inline-flex; align-items:center; } nav.topp .merke::after { content:"."; color:var(--aksent); } nav.topp .punkt { color:var(--dempet); text-decoration:none; font-size:.95rem; font-weight:600; padding:11px 12px; border-radius:10px; } nav.topp .punkt:hover { color:var(--blekk); background:var(--aksent-mykt); } nav.topp .punkt[aria-current="page"] { color:var(--blekk); font-weight:700; text-decoration:underline; text-decoration-color:var(--aksent); text-decoration-thickness:3px; text-underline-offset:6px; } /* align-items:center framfor standard stretch: da får hvert menypunkt sin egen min-høyde i stedet for å strekkes til linjeboksen, og og havner på samme senterlinje uten at vi må kjenne flex-semantikken i
. */ nav.topp .lenker { display:flex; align-items:center; gap:2px; margin-left:auto; } /* Fast høyde framfor line-height: er inline og er flex, og linjeboksene deres regnes ulikt selv med identisk padding og font. */ nav.topp .punkt { white-space:nowrap; display:inline-flex; align-items:center; min-height:48px; line-height:1.2; } /* Mobilmeny: skjult over 520 px, der den vide menyen får plass på én rad. */ .mmeny { display:none; margin:0; position:relative; } .mm-knapp { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid var(--strek); border-radius:999px; font-weight:650; font-size:.95rem; color:var(--blekk); background:var(--flate); transition:transform .2s, background .2s, color .2s; } .mm-knapp::-webkit-details-marker { display:none; } .mm-strek { width:16px; height:2px; background:currentColor; border-radius:2px; box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor; } .mmeny[open] .mm-knapp { background:var(--aksent); border-color:var(--aksent); color:#fff; } /* Forankret til høyre kant, som nedtrekkene: knappen ligger til høyre, og left:0 ville skjøvet panelet utenfor viewporten. */ .mm-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:min(80vw, 288px); background:var(--flate); border:1px solid var(--strek); border-radius:14px; box-shadow:0 18px 40px -14px rgba(22,32,27,.38); padding:8px; display:grid; max-height:min(72vh, 560px); overflow-y:auto; /* Et sveip som når enden av panelet skal stoppe der, ikke fortsette å rulle siden bak. */ overscroll-behavior:contain; } /* Låsing av siden mens mobilmenyen er åpen. Uten dette rullet siden bak panelet mens fingeren lå på menyen: panelet henger i en sticky nav og fulgte med oppover, som leses som at menyen glir avgårde. touch-action legges på innholdet og ikke på body, for touch-action:none på en forelder kan ikke slås på igjen av et barn - da hadde panelet selv mistet rullingen sin. nav.topp er unntatt nettopp fordi panelet ligger der. Klassen settes av skriptet nederst på siden. Låsen ligger på BODY, ikke på html. Det er ikke smakssak, det er overflytspropagering: body har allerede overflow-x:hidden, og så lenge html står på visible er det body sin overflyt som propagerer til viewporten - body er da ikke selv en rullecontainer. Settes html til hidden, vinner html propageringen, body beholder sin egen overflyt og BLIR en rullecontainer. Da måler den sticky navlinja mot body i stedet for mot viewporten: åpnet man menyen 800 px nede på siden, hoppet knappen og panelet 790 px opp og ut av skjermen. Målt på iPhone 13-profil, ikke antatt - og det er verdt å måle på nytt hvis overflyten på body endres. */ html.meny-apen body { overflow:hidden; } html.meny-apen .ramme > :not(nav.topp), html.meny-apen .fotramme { touch-action:none; } .mm-panel a { display:block; padding:11px 12px; min-height:44px; border-radius:9px; text-decoration:none; color:var(--blekk); font-size:.95rem; font-weight:600; } .mm-panel a[aria-current] { background:var(--aksent-mykt); color:var(--aksent); font-weight:700; } /* .8rem, ikke .74: 11,8 px falt under portens 12 px-grense for tekst. */ .mm-gruppe { display:block; padding:10px 12px 4px; font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--dempet); } /* Sikkerhetsventil: nav var en nowrap flexrad, så innhold som ikke fikk plass dyttet siden bredere i stedet for å brekke. Det ga horisontal scroll på HELE nettstedet fra 540 til 750 px, opptil 206 px, på hver eneste side. Med wrap blir en for bred meny stygg, ikke ødelagt. Grensen under gjør at det normalt aldri skjer, men en ny by eller et lengre menypunkt skal ikke kunne gi horisontal scroll igjen. */ nav.topp, nav.topp .lenker { flex-wrap:wrap; } @media (max-width:759px) { /* Den vide menyen brøt til to høyrestilte rader som ikke linjerte opp med ordmerket, et åpent nedtrekk dekket rad to, og mellom 540 og 750 px sprengte den viewporten. Under 760 px byttes den derfor med mobilmenyen. 760 er målt: den vide menyen får plass fra og med 760 px, ikke før. Lenkene finnes fortsatt i HTML-en begge veier, så crawlere ser dem. */ nav.topp .lenker { display:none; } .mmeny { display:block; margin-left:auto; } nav.topp { flex-wrap:nowrap; gap:0; padding:10px 0; } nav.topp .merke { font-size:1.02rem; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } } .hero { display:grid; grid-template-columns:1.15fr 1fr; gap:32px; align-items:center; padding:26px 0 28px; } .hero > div { min-width:0; } h1 { font-size:clamp(2rem, 5vw, 3.1rem); line-height:1.12; letter-spacing:-.02em; font-weight:700; } .hero p { color:var(--dempet); margin-top:12px; max-width:36ch; font-size:1.1rem; font-weight:400; } .trust { list-style:none; padding:0; margin-top:18px; display:grid; gap:8px; } .trust li { display:flex; align-items:center; gap:10px; font-weight:600; font-size:.98rem; } .hake { display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--spar-mykt); color:var(--spar); align-items:center; justify-content:center; font-size:13px; font-weight:700; flex:0 0 22px; } .hero-visual { position:relative; } /* height:auto er nødvendig: bildet har height="600" i HTML-en, og uten dette vinner attributtet over aspect-ratio og gir et 600 px høyt bilde på mobil. */ .hero-visual > img { width:100%; height:auto; border-radius:14px; aspect-ratio:16/10; object-fit:cover; box-shadow:var(--skygge); display:block; } .hero-visual .beste { position:relative; margin:-30px 12px 0; } .beste { background:var(--flate); border:1px solid var(--strek); border-radius:16px; padding:18px 20px; box-shadow:var(--skygge); } .beste .hva { font-family:"Familjen",system-ui,sans-serif; font-size:var(--t-xs); color:var(--dempet); font-weight:600; text-transform:uppercase; letter-spacing:.08em; } /* Byside: nøkkeltall og leverandørkort */ .by-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:22px auto 0; max-width:var(--lese); } .bs { background:var(--flate); border:1px solid var(--strek); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:3px; } /* 700, ikke 800: Familjen Grotesk går bare til 700, og 800 blir syntetisk falsk fet (FRONTEND seksjon 2). Gjaldt tre steder, alle med tall i. */ .bs-tall { font-family:"Familjen",system-ui,sans-serif; font-weight:700; font-size:1.25rem; color:var(--blekk); font-variant-numeric:tabular-nums; } .bs-tekst { color:var(--dempet); font-size:.8rem; font-weight:600; line-height:1.35; } .by-lev-par { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; } /* .kort har ingen egen padding (den bor i .kort-kropp på forsiden), så by-kortet må ha sin egen. */ .by-lev { display:flex; flex-direction:column; padding:20px 22px 22px; } .by-lev-hode { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; } .by-lev-hode img { height:26px; width:auto; display:block; } .by-lev-pris { font-family:"Familjen",system-ui,sans-serif; font-weight:600; color:var(--dempet); font-size:.9rem; } .by-lev-pris b { color:var(--cta); font-weight:700; font-size:1.15rem; } .by-lev-tekst { color:var(--dempet); font-size:.92rem; margin-top:10px; line-height:1.5; } .by-lev .fordeler { max-width:none; margin:12px 0 0; } /* Basens .cta-rad er en sentrert blokk med max-width (margin auto). Inne i kortet skal raden fylle bredden og stille seg til venstre. */ .by-lev .cta-rad { margin:auto 0 0; max-width:none; padding-top:16px; flex-wrap:wrap; justify-content:flex-start; } @media (max-width:820px) { .by-stats { grid-template-columns:repeat(2,1fr); } .by-lev-par { grid-template-columns:1fr; } } .beste .lev { margin-top:9px; } .beste .lev img { height:26px; width:auto; display:block; } .beste-detalj { margin-top:8px; color:var(--dempet); font-size:.85rem; font-weight:600; } .beste-cta { display:flex; align-items:center; justify-content:center; margin-top:12px; min-height:48px; padding:0 22px; font-size:.95rem; } .beste-fot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; flex-wrap:wrap; gap:4px; } .beste-fot .stempel { margin-top:0; } .beste .beloep { margin-top:8px; color:var(--blekk); } .beste .beloep { font-size:clamp(2.3rem,5.6vw,2.9rem); margin-top:6px; } .beste .enh { font-size:var(--t-s); color:var(--dempet); margin-top:2px; } .stempel { display:inline-block; margin-top:10px; font-size:.75rem; letter-spacing:.06em; color:var(--rav); font-weight:650; text-transform:uppercase; } /* Artikkelbyline, som i WordPress: publisert + sist oppdatert under H1. Publisert kommer fra artikkelens egen dato (samme som datePublished i skjemaet), sist oppdatert fra sidemanifestet - datoen settes bare når innholdet faktisk er endret, aldri av selve byggingen. */ .sidedato { font-size:var(--t-s); color:var(--dempet); font-weight:500; margin-top:10px; } .sidedato b { font-weight:650; color:inherit; } .inn { opacity:0; transform:translateY(18px); } .vist .inn { opacity:1; transform:none; transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .vist .inn:nth-child(2) { transition-delay:.08s; } .vist .inn:nth-child(3) { transition-delay:.16s; } .reveal { opacity:0; transform:translateY(22px); } .reveal.paa { opacity:1; transform:none; transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .filterrad { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:4px 0 22px; padding:10px 0; } .filterrad label { font-size:.9rem; color:var(--dempet); font-weight:700; } select { font:inherit; font-weight:700; padding:10px 14px; border:2px solid var(--strek); border-radius:999px; background:var(--flate); color:var(--blekk); min-height:44px; cursor:pointer; } select:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid var(--aksent); outline-offset:2px; } .toggle { display:flex; background:var(--flate); border:2px solid var(--strek); border-radius:999px; padding:3px; } .toggle button { font:inherit; font-size:.88rem; font-weight:700; padding:8px 16px; min-height:40px; border:0; border-radius:999px; background:transparent; color:var(--dempet); cursor:pointer; transition:background .25s, color .25s, transform .2s; } .toggle button[aria-pressed="true"] { background:var(--spar-mykt); color:var(--spar); } .kort { background:var(--flate); border:1px solid var(--strek); border-radius:18px; margin-bottom:22px; box-shadow:var(--skygge); overflow:hidden; position:relative; transition:transform .35s cubic-bezier(.16,1,.3,1); } @media (hover:hover) { .kort:hover { transform:translateY(-3px); } } /* Leverandørkortene ved siden av hverandre: hele poenget er å sammenligne, og stablet i full bredde måtte man scrolle mellom dem. */ #kort { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:20px; align-items:start; } #kort .kort { margin-bottom:0; display:flex; flex-direction:column; } #kort .kort-kropp { flex:1; display:flex; flex-direction:column; } #kort .knapperad { margin-top:auto; } .kort-bilde { width:100%; height:170px; object-fit:cover; display:block; } #kort .kort-bilde { height:132px; } /* Avstandene lå som margin-top på hvert enkelt element og kolliderte: #kort .knapperad{margin-top:auto} slo ut de 18 pikslene, så sparebadgen og knappene endte helt inntil hverandre. Layouten eier avstanden nå. */ .kort-kropp { padding:22px 24px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:15px; } .kort-kropp > * { margin-top:0; } .kort-kropp .fordeler { margin:0 auto; } /* Prisen og «du sparer» hører sammen og skal stå tettere enn resten. */ .kort-kropp .prislinje + div { margin-top:-6px; } /* Litt ekstra pust før handlingen. */ .kort-kropp .knapperad { margin-top:4px; } #kort .kort-kropp .knapperad { margin-top:auto; padding-top:4px; } .tomgraf { padding:26px 24px; } .tomgraf-tittel { font-family:"Familjen",system-ui,sans-serif; font-weight:650; font-size:var(--t-l); margin-bottom:6px; } .tomgraf p { color:var(--dempet); max-width:56ch; } .ribbon { position:absolute; top:14px; left:-6px; background:var(--ribbe); color:#fff; font-size:.78rem; font-weight:650; padding:6px 14px; border-radius:0 999px 999px 0; box-shadow:var(--skygge); text-transform:uppercase; letter-spacing:.04em; } /* Må stå etter .ribbon: lik spesifisitet, så rekkefølgen avgjør. */ .ribbon.ribbon-mild { background:var(--dempet); } .lev-logo { height:52px; display:inline-flex; align-items:center; justify-content:center; margin-top:2px; background:#FFFFFF; border-radius:12px; padding:9px 16px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } .lev-logo img { height:100%; width:auto; display:block; } .kort .metarad { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; color:var(--dempet); font-size:.9rem; font-weight:700; margin-top:10px; } .fordeler { list-style:none; padding:0; margin:14px auto 0; max-width:40ch; display:grid; gap:7px; text-align:left; } .fordeler li { display:flex; gap:10px; align-items:flex-start; font-weight:400; font-size:.97rem; } .prislinje { margin-top:16px; display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; color:var(--blekk); } .foerpris { font-family:"Familjen",system-ui,sans-serif; font-variant-numeric:tabular-nums; color:var(--dempet); font-weight:500; font-size:var(--t-m); text-decoration-thickness:1.5px; } .prislinje .beloep { font-size:2.3rem; } .prislinje del { font-weight:600; text-decoration-thickness:2px; } .sparbadge { display:inline-block; margin-top:8px; background:var(--spar-mykt); color:var(--spar); font-weight:650; font-size:.88rem; border-radius:999px; padding:5px 14px; } .knapperad { display:flex; justify-content:center; gap:12px; margin-top:18px; flex-wrap:wrap; } .cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 26px; border-radius:999px; background:var(--cta); color:#fff; /* Skyggen er knappens egen farge. Den sto i rgba(194,65,12) - terrakotta fra paletten før 01.08.2026 - og la et oransje skjær under en grønn knapp på hver eneste CTA. */ box-shadow:0 2px 10px -4px rgba(30,85,64,.55); text-decoration:none; font-weight:650; font-size:1rem; transition:background .25s, transform .2s; } .cta:hover { background:var(--cta-moerk); transform:translateY(-1px); } .cta-sek { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 22px; border-radius:999px; border:2px solid var(--strek); color:var(--blekk); text-decoration:none; font-weight:650; font-size:.95rem; transition:background .25s, transform .2s; } .cta-sek:hover { background:var(--baand); } /* Følger samme senterakse som lesespalten. Sto tidligere venstrestilt mot rammekanten mens alt annet på siden var sentrert. */ .cta-rad { display:flex; align-items:center; justify-content:center; gap:12px; margin:20px auto 4px; flex-wrap:wrap; max-width:var(--lese); } .annonse { font-size:12px; color:var(--dempet); font-weight:650; } .kort .annonse { display:block; margin-top:8px; } /* CTA-toppen (FRONTEND 19, eiers ordre 26.09.2026): én knapp per aktiv leverandør rett under svaret, første knapp innenfor første skjerm på 360×800. Knappen er en avrundet flate, ikke en pille: den bærer tre linjer (leverandør, fordel, pris), og en pille med tre linjer ser ut som et uhell. Stablet på mobil, side om side når det er plass til to. */ .ct-topp { display:grid; gap:14px; max-width:var(--lese); margin:4px auto 26px; grid-template-columns:repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); /* Uten containment blåser auto-fit opp innholdsbredden til en forelder som måles etter innholdet (forsidens hero-kolonne), og hele siden ruller sidelengs på 360. */ container-type:inline-size; } .ct-topp.ct-en { grid-template-columns:minmax(0,1fr); } .ct-lev { display:flex; flex-direction:column; gap:6px; min-width:0; } .cta.ct-knapp { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; padding:11px 16px 12px 18px; border-radius:16px; text-align:left; line-height:1.25; width:100%; } .ct-tekst { display:flex; flex-direction:column; gap:2px; min-width:0; } .ct-navn { font-size:var(--t-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; opacity:.8; } .ct-hoved { font-size:var(--t-l); font-weight:700; letter-spacing:-.01em; } .ct-pris { font-size:var(--t-s); font-weight:500; opacity:.92; font-variant-numeric:tabular-nums; } .ct-pil { flex:0 0 auto; } .ct-vilkar { display:block; font-size:var(--t-xs); line-height:1.5; color:var(--dempet); padding:0 4px; } .ct-vilkar .annonse { white-space:nowrap; } /* Sekundærknappen (de andre leverandørene på en side om én leverandør): samme flate, lys fylling og grønn kant. Den er fortsatt en annonselenke og merket som det, men den skal ikke konkurrere med sidens egen. */ .cta.ct-knapp.ct-sek { background:var(--flate); color:var(--cta); min-height:52px; border:2px solid var(--cta); box-shadow:none; } .cta.ct-knapp.ct-sek:hover { background:var(--aksent-mykt); } .ct-sek .ct-hoved { font-size:var(--t-m); } /* På et mørkt bilde (leverandørsidens hero): hvit knapp med grønn tekst, lys vilkårstekst. En grønn knapp forsvinner mot det mørke bildet. */ .ct-mork { margin:18px 0 4px; max-width:30rem; } .ct-mork .cta.ct-knapp { background:#fff; color:var(--cta); box-shadow:0 6px 18px -8px rgba(0,0,0,.6); } .ct-mork .cta.ct-knapp:hover { background:#EEF3EF; } .ct-mork .cta.ct-knapp.ct-sek { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); box-shadow:none; } .ct-mork .cta.ct-knapp.ct-sek:hover { background:rgba(255,255,255,.1); } .ct-mork .ct-vilkar, .ct-mork .annonse { color:#D9E0DA; } /* Det klistrede feltet (FRONTEND 19.5, eier 28.09.2026): toppknappene i liten utgave, festet nederst på mobilskjermen når toppknappene er rullet ut av synet. Én lav rad: merkingen, én knapp per leverandør side om side (navn og kort grunn fra målingen) og lukkeknappen. Rendres med hidden og vises bare av skriptet (felles.js), så [hidden] må vinne over display:flex: ellers står feltet synlig ved sidelast og uten JavaScript. Bredden styres av data-maks i skriptet (seo/app.json → entiteter.klistret), ikke av en media query her. Setter egen farge og font: på leverandørsiden står det i den mørke heroen og ville arvet lys tekst. z-index under nav.topp, så mobilmenyen legger seg over, og skjult mens menyen er åpen. Ingen animasjon: feltet kommer og går uten bevegelse, og knappenes trykkrespons følger reduced-motion-blokka. */ .ct-kl { position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; align-items:center; gap:6px; padding:6px 6px calc(6px + env(safe-area-inset-bottom, 0px)) 10px; background:var(--flate); color:var(--blekk); border-top:1px solid var(--strek); box-shadow:0 -8px 20px -14px rgba(22,32,27,.4); font-family:"Familjen", "Kilde", system-ui, sans-serif; line-height:1.2; text-align:left; } .ct-kl[hidden], html.meny-apen .ct-kl { display:none; } .ct-kl-merke { flex:0 0 auto; font-family:"Kilde", system-ui, sans-serif; font-size:var(--t-xs); font-weight:650; color:var(--dempet); } .cta.ct-kl-knapp { flex:1 1 0; min-width:0; min-height:44px; padding:4px 12px; border-radius:12px; flex-direction:column; align-items:flex-start; justify-content:center; gap:1px; line-height:1.2; box-shadow:none; } .ct-kl-navn, .ct-kl-grunn { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ct-kl-navn { font-size:var(--t-xs); font-weight:600; opacity:.85; } .ct-kl-grunn { font-size:var(--t-s); font-weight:700; font-variant-numeric:tabular-nums; } .cta.ct-kl-knapp.ct-sek { background:var(--flate); color:var(--cta); border:2px solid var(--cta); } .cta.ct-kl-knapp.ct-sek:hover { background:var(--aksent-mykt); } .ct-kl-lukk { flex:0 0 44px; width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:12px; background:transparent; color:var(--dempet); cursor:pointer; } .ct-kl-lukk:active { background:var(--baand); } /* Bunnen av siden skal ikke dekkes: høyden settes av skriptet når feltet vises. */ html.ct-kl-vist body { padding-bottom:var(--ct-kl-hoyde, 60px); } /* 50vw inkluderer rullefeltet, 50% gjør det ikke. Uten --rullefelt gir differansen noen piksler overflyt til venstre på desktop. */ .band { margin-inline:calc(50% - 50vw + var(--rullefelt, 0px) / 2); padding-inline:calc(50vw - 50% - var(--rullefelt, 0px) / 2); background:var(--baand); padding-top:32px; padding-bottom:34px; margin-top:40px; } .steg { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:22px; } .steg .nr { display:inline-flex; width:34px; height:34px; border-radius:50%; background:var(--aksent); color:#fff; align-items:center; justify-content:center; font-weight:700; font-size:1.05rem; } .steg h3 { font-size:1.08rem; font-weight:650; margin:10px 0 4px; } .steg p { font-size:.95rem; color:var(--dempet); font-weight:400; } @media (max-width:640px) { .steg { grid-template-columns:1fr; gap:20px; } } .ukechip { display:inline-flex; align-items:center; gap:8px; background:var(--spar-mykt); color:var(--spar); font-weight:650; font-size:.85rem; border-radius:999px; padding:6px 14px; margin-top:10px; } .grafseksjon { margin-top:56px; } h2 { font-size:1.5rem; letter-spacing:-.01em; font-weight:700; } .grafintro { color:var(--dempet); font-size:.98rem; margin-top:4px; max-width:56ch; font-weight:400; } .grafkort { background:var(--flate); border:1px solid var(--strek); border-radius:18px; padding:20px 14px 12px; margin-top:18px; box-shadow:var(--skygge); } /* Forklaringen ligger i legenden som en NØKKEL, ikke som en setning om strek og stiplet: hver leverandør får en båndprøve i sin egen farge, med gjeldende tilbudspris og ordinærpris ved siden av. Da er legenden samtidig direktemerkingen på smale skjermer, der marginen til endelapper ikke finnes. */ .legend { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:flex-start; padding:0 6px 14px; } .legendpunkt { display:inline-flex; align-items:center; gap:9px; font-weight:650; font-size:.95rem; } /* Prøven speiler merket: et bånd er en flate, ikke en prikk. Den lyse fyllingen med to kraftige kanter ER grafen i miniatyr. */ .baandproeve { width:16px; height:22px; border-radius:4px; flex:0 0 16px; background:color-mix(in srgb, var(--serie) 12%, transparent); border-top:2px solid color-mix(in srgb, var(--serie) 55%, transparent); border-bottom:2px solid var(--serie); } .legendtall { display:block; font-size:.82rem; font-weight:500; color:var(--dempet); margin-top:1px; } .legendtall b { color:var(--blekk); font-weight:700; font-variant-numeric:tabular-nums; } .legendhint { font-size:.85rem; color:var(--dempet); font-weight:400; flex-basis:100%; max-width:60ch; } /* viewBox følger den MÅLTE bredden, så én SVG-enhet er én piksel og teksten er den størrelsen den sier den er. Med fast viewBox og width:100% ble aksetekstene skalert ned til rundt 5 px på telefon. */ svg.graf { display:block; width:100%; height:auto; touch-action:pan-y; } svg.graf text { font-family:"Kilde", sans-serif; font-size:12px; font-weight:650; fill:var(--dempet); font-variant-numeric:tabular-nums; } svg.graf .aksetittel { font-size:12px; font-weight:650; } /* Rutenettet er hårfint og heltrukket. Stiplet rutenett leses som terskel eller framskrivning, og her er det bare et rutenett. */ .rutenett { stroke:var(--strek); stroke-width:1; } .nullinje { stroke:var(--dempet); stroke-width:1; opacity:.35; } .linje { stroke-dasharray:1; stroke-dashoffset:1; } .paa .linje { animation:tegnlinje 1.4s cubic-bezier(.16,1,.3,1) forwards; } @keyframes tegnlinje { to { stroke-dashoffset:0; } } /* 2 px ring i flatefargen, ikke en ramme rundt merket: den holder punktet lesbart der det krysser en linje eller et annet punkt. */ circle.punkt { opacity:0; stroke:var(--flate); stroke-width:2; } .paa circle.punkt { animation:punktinn .5s .6s cubic-bezier(.16,1,.3,1) forwards; } @keyframes punktinn { to { opacity:1; } } .baand { opacity:0; } .paa .baand { animation:baandinn .7s .25s cubic-bezier(.16,1,.3,1) forwards; } @keyframes baandinn { to { opacity:1; } } svg.graf .el-navn { font-size:12.5px; font-weight:700; fill:var(--blekk); } svg.graf .el-verdi { font-size:16px; font-weight:700; fill:var(--blekk); } /* 12 px, ikke 11,5: gulvet for tekst gjelder også inne i en SVG. Aksetekstene brøt det allerede fordi en fast viewBox ble skalert ned. */ svg.graf .el-sek { font-size:12px; font-weight:600; fill:var(--dempet); } .leder { stroke:var(--strek); stroke-width:1; } /* Krysshåret finner X-en. Leseren sikter på en dato, aldri på en 2 px linje. */ .krysshaar { stroke:var(--dempet); stroke-width:1; opacity:.45; } .grafhit { fill:transparent; cursor:crosshair; } svg.graf:focus-visible { outline:2px solid var(--aksent); outline-offset:3px; border-radius:10px; } /* Verdien leder, navnet følger: leseren har serien og vil ha tallet. */ .tt-dato { display:block; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-bottom:6px; } .tt-rad { display:flex; align-items:baseline; gap:8px; margin-top:4px; } .tt-noekkel { width:14px; height:2px; border-radius:2px; flex:0 0 14px; align-self:center; } .tt-navn { font-weight:600; opacity:.75; font-size:.78rem; } .tt-tall { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; } .tt-tall .ord { font-weight:500; opacity:.7; } details { margin-top:6px; } summary { cursor:pointer; font-size:.88rem; color:var(--dempet); padding:10px; font-weight:700; } table { border-collapse:collapse; width:100%; font-size:.92rem; } th, td { text-align:right; padding:10px 12px; border-bottom:1px solid var(--strek); } th:first-child, td:first-child { text-align:left; } tr:last-child td { border-bottom:0; } thead th { font-size:.78rem; color:var(--dempet); font-weight:650; text-transform:uppercase; letter-spacing:.03em; } td.billigst, .billigst { color:var(--spar); font-weight:650; } td.billigst { background:var(--spar-mykt); border-radius:8px; } /* Sideveis rulling i tabellen er sikkerhetsventilen, ikke løsningen: en firekolonners pristabell er 380 til 490 px bred, og får aldri plass på en telefon uten å bryte 12 px-gulvet for tekst. Skriptet stabler derfor de tabellene som ikke får plass, og rullingen gjelder bare det som blir igjen: tabeller uten å hente kolonnenavn fra, og lesere uten JavaScript. Regelen lå tidligere inne i @media (max-width:700px), så over 700 px stakk en for bred tabell rett ut av kortet sitt. overscroll-behavior hindrer at et sveip som når enden av tabellen forplanter seg videre til siden bak. */ .tabellrull { overflow-x:auto; overscroll-behavior-x:contain; } /* Leverandørene uten avtale (eier 27.09.2026, andre_leverandorer() i generatoren): alltid under partnerne, og aldri partnernes knappestil. Lenken til dem er en vanlig tekstlenke, og merkingen «Vi har ikke avtale med …» en dempet linje, i tabellcellen under navnet. */ .andre { margin-top:40px; } .andre h3 { margin:26px 0 6px; font-size:1.1rem; } .andre .kort { margin-top:12px; } .andre td { white-space:nowrap; } .andre-fot { color:var(--dempet); font-size:.92rem; } .merking { color:var(--dempet); font-weight:500; font-size:.88rem; } th .merking, td .merking { display:block; margin-top:2px; text-transform:none; letter-spacing:0; } .lenke-uten-avtale { color:inherit; text-decoration:underline; } /* Stablet tabell: én rad blir én blokk, og hver celle bærer kolonnenavnet sitt selv. Klassen settes av skriptet, og bare når tabellen faktisk er bredere enn rommet sin - da finnes det ikke lenger noe å rulle bort fra. */ table.stablet, table.stablet thead, table.stablet tbody, table.stablet tr, table.stablet th, table.stablet td { display:block; } /* Hodene er ikke borte, bare visuelt skjult: skjermlesere leser fortsatt tabellen som en tabell, og hver celle har navnet sitt i data-etikett. */ table.stablet thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } table.stablet tbody tr { padding:14px 16px; border-top:1px solid var(--strek); } table.stablet tbody tr:first-child { border-top:0; } /* Første celle er radens navn, og er overskrift for blokken. */ table.stablet tbody tr > :first-child { text-align:left; font-weight:700; font-size:.98rem; padding:0 0 8px; border-bottom:0; } table.stablet td[data-etikett] { display:flex; align-items:baseline; justify-content:space-between; gap:14px; text-align:right; padding:5px 0; border-bottom:0; } /* .85rem er 14,5 px: over 12 px-gulvet porten måler. */ table.stablet td[data-etikett]::before { content:attr(data-etikett); font-size:.85rem; font-weight:600; color:var(--dempet); text-align:left; } table.stablet td.billigst { padding-left:9px; padding-right:9px; } .lev-chip { display:inline-flex; align-items:center; background:#FFFFFF; border-radius:10px; padding:6px 12px; height:34px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07); } .lev-chip img { height:100%; width:auto; display:block; } .filterkort { background:var(--flate); border:1px solid var(--strek); border-radius:16px; padding:20px 24px; box-shadow:var(--skygge); display:grid; grid-template-columns:1fr 1fr minmax(180px, auto); gap:26px; align-items:end; margin-top:18px; } .filterkort label { display:block; font-weight:650; font-size:.95rem; margin-bottom:10px; } .filterkort output { font-weight:700; color:var(--cta); } input[type="range"] { width:100%; accent-color:var(--aksent); height:40px; cursor:pointer; } .filterkort select { width:100%; } @media (max-width:700px) { .filterkort { grid-template-columns:1fr; gap:16px; } } .resrad .ribbon { top:-13px; left:16px; border-radius:999px; } .resrad { position:relative; display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr auto; gap:16px; align-items:center; background:var(--flate); border:1px solid var(--strek); border-radius:14px; padding:18px 22px; margin-top:12px; box-shadow:var(--skygge); } .res-lev .note { font-size:.8rem; color:var(--dempet); margin-top:6px; } .res-etikett { display:block; font-size:.75rem; font-weight:650; text-transform:uppercase; letter-spacing:.05em; color:var(--dempet); margin-bottom:2px; } .res-tall { font-weight:700; font-size:1.15rem; font-variant-numeric:tabular-nums; } .res-tilbud { color:var(--cta); } .res-spar { font-size:.8rem; font-weight:700; color:var(--spar); margin-top:2px; } .res-cta { text-align:center; } .res-cta .annonse { display:block; margin-top:6px; } @media (max-width:720px) { .resrad { grid-template-columns:1fr 1fr; } .res-lev { grid-column:1 / -1; } .res-cta { grid-column:1 / -1; } .res-cta .cta { width:100%; } } .svarblokk { background:var(--flate); border:1px solid var(--strek); border-left:4px solid var(--aksent); border-radius:14px; padding:18px 22px; margin:6px 0 26px; max-width:var(--lese); font-size:1.05rem; font-weight:400; line-height:1.65; box-shadow:var(--skygge); } /* Mobil først (26.09.2026): svaret står mellom H1 og CTA-toppen, og hver linje i det skyver knappen ned. Tettere luft og bredere tekstflate på smal skjerm gir ca. 20 % lavere blokk uten å bytte skriftfamilie. */ @media (max-width:640px) { .svarblokk { padding:15px 16px 14px 18px; font-size:1rem; line-height:1.58; margin-bottom:18px; } } .sp-liste { display:grid; gap:14px; margin-top:22px; } .sp-liste a { display:block; background:var(--flate); border:1px solid var(--strek); border-radius:14px; padding:16px 20px; color:inherit; text-decoration:none; font-weight:650; transition:transform .3s cubic-bezier(.16,1,.3,1); box-shadow:var(--skygge); } @media (hover:hover) { .sp-liste a:hover { transform:translateY(-2px); } } .sp-liste a span { display:block; font-weight:400; font-size:.88rem; color:var(--dempet); margin-top:4px; } .relatert { margin-top:36px; } .relatert h2 { font-size:1.15rem; } .artikkelliste { display:grid; gap:14px; margin-top:26px; } .artikkelliste a { display:grid; grid-template-columns:136px 1fr; gap:18px; align-items:center; background:var(--flate); border:1px solid var(--strek); border-radius:14px; padding:14px 18px 14px 14px; color:inherit; text-decoration:none; box-shadow:var(--skygge); transition:transform .3s cubic-bezier(.16,1,.3,1); } .artikkelliste img { width:136px; height:96px; object-fit:cover; border-radius:10px; } @media (max-width:560px) { .artikkelliste a { grid-template-columns:1fr; } .artikkelliste img { width:100%; height:150px; } } @media (hover:hover) { .artikkelliste a:hover { transform:translateY(-2px); } } .artikkelliste .t { display:block; font-weight:650; font-size:1.08rem; } .artikkelliste .u { display:block; font-size:.88rem; color:var(--dempet); margin-top:4px; font-weight:400; } /* Lesespaltene var venstrestilte i en 880 px ramme, som ga en tom kolonne på et par hundre piksler til høyre på hver eneste tekstside. Alt som tilhører lesesporet sentreres nå i samme akse. */ .prosa, .artikkel, .artikkelbilde, .priskort, .sp-liste, .artikkelliste, .relatert, .tomgraf, .svarblokk, .grafintro { margin-inline:auto; } .svarblokk, .grafintro { max-width:var(--lese); } .sp-liste, .artikkelliste, .relatert { max-width:var(--lese); } .prosa { max-width:var(--lese); } .prosa h1 { margin:36px 0 10px; } .prosa h2 { margin:32px 0 8px; } .prosa p { margin:12px 0; font-weight:400; } .prosa li { margin:6px 0; } .prosa ul { padding-left:22px; } /* height:auto er nødvendig fordi bildet har et height-attributt med sine ekte mål (stående) - uten dette vinner attributtet over aspect-ratio og boksen blir 1120 px høy. margin må ha auto på sidene: en egen margin- erklæring her overstyrer margin-inline:auto i fellesregelen. */ .artikkelbilde { width:100%; max-width:var(--lese); height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:16px; margin:4px auto 20px; box-shadow:var(--skygge); display:block; } /* Leverandørens eget bilde i teksten (leverandorbilde()): figuren følger lesebredden uten nettleserens innrykk, bildet er .artikkelbilde og krediteringen står som et stempel rett under. */ .levbilde { max-width:var(--lese); margin:18px auto 22px; } .levbilde .artikkelbilde { margin:0 auto; } .levbilde figcaption { display:block; margin-top:8px; } .artikkel { font-size:1.06rem; line-height:1.7; } .artikkel p { margin:14px 0; font-weight:400; } .artikkel li { font-weight:400; } .artikkel h2 { font-size:1.3rem; margin:34px 0 8px; } /* Samme brødtekstlenke på leverandørsidene (kontroll av parti 3): hoved- spalten der er ikke .artikkel, og lenkene i avsnittene og i «Pris per husstand» sto i nettleserens blå. Bare avsnitt og lister direkte i en seksjon, så kortene (.rel-liste) og knappene beholder sin stil. */ .artikkel a:not(.cta):not(.cta-sek):not(.lenke-uten-avtale), .lev-hoved > .seksjon > p a:not(.cta):not(.cta-sek):not(.lenke-uten-avtale), .lev-hoved > .seksjon > ul a { color:var(--cta); font-weight:700; text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px; } .badge { display:inline-block; background:var(--aksent-mykt); color:var(--cta); font-weight:650; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; border-radius:999px; padding:4px 12px; } .artikkelliste .badge { margin-bottom:8px; } .priskort { background:var(--flate); border:1px solid var(--strek); border-radius:16px; padding:18px 20px; margin:26px 0; box-shadow:var(--skygge); max-width:var(--lese); } .pk-hode { font-weight:650; font-size:1.02rem; margin-bottom:6px; } .pk-hode span { color:var(--dempet); font-weight:600; font-size:.85rem; margin-left:8px; } .pk-rad { display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--strek); transition:transform .18s ease; } .pk-rad:hover { transform:translateY(-1px); } .pk-rad:last-of-type { border-bottom:0; } .pk-info { display:flex; flex-direction:column; gap:5px; min-width:0; } .pk-navn { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .pk-navn img { height:24px; width:auto; display:block; } .pk-merke { background:var(--ribbe); color:#fff; font-family:"Familjen",sans-serif; font-weight:650; font-size:.75rem; padding:2px 9px; border-radius:999px; white-space:nowrap; } .pk-detalj { color:var(--dempet); font-size:.82rem; font-weight:600; line-height:1.35; } .pk-pris { display:flex; flex-direction:column; align-items:flex-end; gap:1px; font-variant-numeric:tabular-nums; text-align:right; } .pk-belop { font-family:"Familjen",sans-serif; font-weight:700; color:var(--cta); font-size:1.35rem; line-height:1.1; } .pk-belop .pk-enh { font-size:.78rem; color:var(--dempet); font-weight:600; } .pk-ord { color:var(--dempet); font-weight:600; font-size:.82rem; } .pk-ord del { text-decoration-thickness:1.5px; } .pk-cta { min-height:46px; padding:0 22px; font-size:.95rem; } .pk-fot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; } @media (max-width:640px) { .pk-rad { grid-template-columns:1fr auto; } .pk-cta { grid-column:1 / -1; justify-content:center; display:flex; align-items:center; } } .fotramme { background:var(--fotbg); color:var(--fottekst); margin-top:48px; } .fotramme .indre { max-width:880px; margin:0 auto; padding:36px 20px 28px; } /* Fire kolonner siden Leverandører kom til. Uten eksplisitt fjerde spor brøt den siste ned på egen rad og gjorde footeren dobbelt så høy. */ footer.stor { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px; } @media (max-width:820px) { footer.stor { grid-template-columns:1fr 1fr; gap:24px; } } footer.stor .merke { font-weight:700; letter-spacing:-.02em; font-size:1.15rem; } footer.stor .merke::after { content:"."; color:var(--aksent); } footer.stor p { font-size:.88rem; opacity:.75; margin-top:8px; max-width:34ch; font-weight:400; } footer.stor h3 { font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; opacity:.6; font-weight:650; margin-bottom:10px; } footer.stor ul { list-style:none; padding:0; } footer.stor li { margin:8px 0; } footer.stor a { color:var(--fottekst); text-decoration:none; font-size:.94rem; font-weight:700; } footer.stor a:hover { color:var(--aksent); } @media (max-width:640px) { footer.stor { grid-template-columns:1fr; gap:20px; } } .fot { margin-top:24px; font-size:.78rem; opacity:.6; border-top:1px solid rgba(255,255,255,.15); padding-top:14px; font-weight:400; } .fot a { color:inherit; } .tooltip { position:fixed; pointer-events:none; background:var(--blekk); color:var(--bg); padding:9px 12px; border-radius:10px; font-size:.8rem; font-weight:700; display:none; z-index:9; box-shadow:var(--skygge); min-width:184px; text-align:left; } @media (max-width:700px) { .hero { grid-template-columns:1fr; gap:16px; padding:16px 0 20px; } .hero p { max-width:none; font-size:1.02rem; } .hero-visual > img { aspect-ratio:16/9; } .hero-visual .beste { margin:-52px 10px 0; } .trust { margin-top:14px; gap:6px; } .trust li { font-size:.92rem; } /* Trangere celler gir tabellen noen titalls piksler, og er nok til at de smaleste tabellene slipper å stables i det hele tatt. Skriftene ligger på 12,8 og 12,0 px, altså på og ikke under portens 12 px-gulv. */ .tabellrull table { font-size:.8rem; } .tabellrull th, .tabellrull td { padding:9px 7px; } .tabellrull thead th { font-size:.75rem; letter-spacing:0; } /* Tall skal aldri brytes over to linjer. Første kolonne er tekst og skal. */ .tabellrull td { white-space:nowrap; } .tabellrull td:first-child, .tabellrull th:first-child { white-space:normal; } /* ...men i stablet form er cellen en egen linje, og nowrap ville presset lange etiketter og tall fra hverandre i stedet for å brekke. */ .tabellrull table.stablet td { white-space:normal; } .tabellrull table.stablet { font-size:.92rem; } } /* ---------- Leverandørside ---------- */ .skjult { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .brodsmule { display:flex; gap:8px; align-items:center; font-size:var(--t-s); color:var(--dempet); padding:14px 0 4px; white-space:nowrap; min-width:0; } .brodsmule a { color:var(--dempet); padding:9px 0; display:inline-flex; align-items:center; min-height:40px; flex:none; } .brodsmule span[aria-hidden] { opacity:.5; flex:none; } /* Én linje på mobil (LENKEPLAN §6): blir stien for lang, kortes sidens eget navn med «…», aldri lenkene, og ingenting ruller sidelengs. */ .brodsmule span[aria-current] { overflow:hidden; text-overflow:ellipsis; min-width:0; } @media (max-width:400px) { .brodsmule { gap:6px; font-size:.8125rem; } } /* På tekstsidene følger stien lesespalten, og H1 rett under trenger ikke sin vanlige toppmarg: stien tar plassen, så knappen blir stående høyt. */ .brodsmule:has(+ .prosa) { max-width:var(--lese); margin-inline:auto; padding:4px 0 0; } .brodsmule + .prosa > h1:first-child { margin-top:10px; } .lev-hero { position:relative; border-radius:20px; overflow:hidden; margin-top:8px; background:var(--blekk); } .lev-hero-bilde { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .lev-hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(22,32,27,.94) 0%, rgba(22,32,27,.88) 34%, rgba(22,32,27,.58) 72%, rgba(22,32,27,.34) 100%); } .lev-hero-inn { position:relative; z-index:2; padding:30px 32px 28px; color:#F3F5F1; } .lev-logo-stor { display:inline-flex; align-items:center; background:#fff; border-radius:12px; padding:9px 14px; height:52px; margin-bottom:14px; } .lev-logo-stor img { height:100%; width:auto; display:block; } .lev-hero h1 { color:#fff; font-size:clamp(1.9rem,4.4vw,2.7rem); } .lev-pitch { color:#D9E0DA; margin-top:8px; max-width:52ch; font-size:var(--t-l); } .lev-fakta { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .lf-post { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:9px 14px; backdrop-filter:blur(4px); } .lf-ikon svg { width:19px; height:19px; display:block; color:#9FD0B4; } .lf-tall { font-family:"Familjen",system-ui,sans-serif; font-weight:650; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; } .lf-etikett { font-size:var(--t-s); color:#B9C6BC; } /* Referansehusstanden (4x5) merkes i pilartabellen, så leseren ser hvilken rad tallene ellers på nettstedet gjelder. */ .ref-rad { background:var(--aksent-mykt); } .ref-rad th[scope="row"]::after { content:" · referanse"; color:var(--aksent); font-weight:700; font-size:.82em; } .lev-chips { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .lev-chips li { display:flex; align-items:center; gap:7px; font-size:var(--t-s); color:#E4EAE5; background:rgba(255,255,255,.08); border-radius:999px; padding:6px 13px; } .lev-chips .hake { width:17px; height:17px; flex:0 0 17px; font-size:12px; background:rgba(159,208,180,.22); color:#9FD0B4; } /* Krediteringen av heltbildet (leverandørens eget foto, bibliotekbilde()): nederst i heltet, under knappene, i samme dempede farge som etikettene, på venstre side der gradienten er mørkest. */ .lev-foto { display:block; margin-top:14px; font-size:var(--t-xs); color:#B9C6BC; } /* «Pris per husstand» (husstand_liste(lev=)) og leverandørens bilder i teksten følger venstrekanten til avsnittene i hovedspalten. */ .lev-hoved > .seksjon ul { padding-left:22px; max-width:60ch; } .lev-hoved > .seksjon li { margin:6px 0; } .lev-hoved .levbilde { margin-inline:0; } .lev-grid { display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:34px; align-items:start; margin-top:30px; } .lev-hoved { min-width:0; } .lev-hoved .seksjon { scroll-margin-top:96px; margin-top:34px; } .lev-hoved .seksjon:first-of-type { margin-top:24px; } .lev-hoved h2 { font-size:var(--t-xl); } .lev-hoved p { margin-top:10px; max-width:60ch; } .neste-maling { font-weight:600; color:var(--aksent); } .lev-panel { position:sticky; top:74px; display:grid; gap:16px; } .lp-kort { background:var(--flate); border:1px solid var(--strek); border-radius:16px; padding:20px; text-align:center; box-shadow:var(--skygge); display:grid; justify-items:center; gap:9px; } .lp-logo { display:inline-flex; align-items:center; height:40px; } .lp-logo img { height:100%; width:auto; } .lp-pris { font-size:2.1rem; } .lp-fra { font-size:var(--t-s); color:var(--dempet); } .lp-score { font-size:var(--t-s); color:var(--dempet); } .lp-score b { font-family:"Familjen",system-ui,sans-serif; font-size:var(--t-l); color:var(--aksent); font-weight:700; } .lp-kort .cta-rad { margin:6px 0 0; max-width:none; } .lp-toc { background:var(--flate); border:1px solid var(--strek); border-radius:16px; padding:18px 20px; box-shadow:var(--skygge); } .lp-toc h2 { font-size:var(--t-s); text-transform:uppercase; letter-spacing:.08em; color:var(--dempet); font-weight:600; } .lp-toc ol { margin:12px 0 0; padding-left:20px; display:grid; gap:9px; } .lp-toc li { font-size:var(--t-s); } .lp-toc a { color:var(--blekk); text-decoration:none; } .lp-toc a:hover { color:var(--aksent); text-decoration:underline; } .lp-toc a.aktiv { color:var(--aksent); font-weight:650; } .rel-liste { display:grid; gap:12px; margin-top:16px; } .rel-liste a { display:block; background:var(--flate); border:1px solid var(--strek); border-radius:14px; padding:15px 18px; text-decoration:none; color:inherit; box-shadow:var(--skygge); transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s; } @media (hover:hover) { .rel-liste a:hover { transform:translateY(-2px); border-color:var(--aksent); } } .rl-tittel { display:block; font-family:"Familjen",system-ui,sans-serif; font-weight:650; } .rl-under { display:block; font-size:var(--t-s); color:var(--dempet); margin-top:3px; } .scorekort { background:var(--flate); border:1px solid var(--strek); border-radius:16px; padding:22px 24px; box-shadow:var(--skygge); margin-top:16px; } .sc-topp { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding-bottom:16px; border-bottom:1px solid var(--strek); margin-bottom:16px; } .sc-topp .beloep { font-size:2.4rem; color:var(--aksent); } .sc-rad { display:grid; grid-template-columns:1fr 120px 46px; gap:12px; align-items:center; padding:11px 0; border-bottom:1px solid var(--strek); } .sc-rad:last-of-type { border-bottom:0; } .sc-navn { font-weight:600; font-size:var(--t-s); } .sc-spor { height:8px; border-radius:999px; background:var(--baand); overflow:hidden; } .sc-fyll { display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--aksent), var(--spar)); transition:width 1s cubic-bezier(.16,1,.3,1); } .sc-tall { text-align:right; font-family:"Familjen",system-ui,sans-serif; font-weight:650; } .sc-hvorfor { grid-column:1 / -1; font-size:var(--t-s); color:var(--dempet); margin-top:-4px; } .sc-fot { font-size:var(--t-s); color:var(--dempet); margin-top:14px; } /* Nedtrekk i menyen */ /* .lenker er flex, så -ene strekkes til linjehøyden.
er flex-elementet, ikke , så summaryen må fylle forelderen for at menypunktene skal bli like høye. */ /* margin:0 er nødvendig:
har 6px topp-margin i nettleserens standardstil, og med align-items:center sentreres marginboksen - derfor lå menypunktet 3 px lavere enn de andre. */ .nedtrekk { position:relative; display:flex; margin:0; } .nedtrekk > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; } .nedtrekk > summary::-webkit-details-marker { display:none; } .nedtrekk > summary::after { content:""; width:6px; height:6px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .2s; } .nedtrekk[open] > summary::after { transform:rotate(-135deg) translateY(-2px); } /* Forankret til høyre: menyen ligger til høyre, og med left:0 stakk panelet utenfor viewporten på mellomstore skjermer. */ .nedtrekk-panel { position:absolute; top:calc(100% + 6px); right:0; left:auto; z-index:9; background:var(--flate); border:1px solid var(--strek); border-radius:12px; box-shadow:0 12px 30px -12px rgba(22,32,27,.3); padding:6px; display:grid; min-width:190px; max-height:min(70vh, 520px); overflow-y:auto; overscroll-behavior:contain; } .nedtrekk-panel a { display:block; padding:9px 12px; border-radius:8px; text-decoration:none; color:var(--blekk); font-size:var(--t-s); font-weight:600; white-space:nowrap; } .nedtrekk-panel a:hover { background:var(--aksent-mykt); color:var(--aksent); } .nedtrekk-panel a[aria-current] { background:var(--aksent-mykt); color:var(--aksent); } .nedtrekk > summary[aria-current] { color:var(--blekk); text-decoration:underline; text-decoration-color:var(--aksent); text-decoration-thickness:3px; text-underline-offset:6px; } @media (max-width:900px) { .lev-grid { grid-template-columns:minmax(0,1fr); gap:24px; } .lev-panel { position:static; order:-1; } .lp-toc { display:none; } } /* NB: her lå et @media (max-width:520px) som aldri ble lukket, med bare en kommentar igjen etter at sveipestripen ble fjernet. CSS tillater nestede @media, så blokken under ble tolket som «520 OG 640», altså 520. Reglene her er ment for 640 px og fyrte aldri mellom 520 og 640. */ @media (max-width:640px) { .lev-hero-inn { padding:22px 20px 20px; } .lev-fakta { gap:8px; } .lf-post { padding:8px 11px; } .sc-rad { grid-template-columns:1fr 74px 42px; } .nedtrekk-panel { min-width:0; } } /* ---------- Trykkrespons ---------- */ /* Tilbakemeldingen hører til NEDTRYKKET, ikke til slippet. Hover finnes ikke på en telefon, så uten :active sto halve nettstedet - kortlenkene, menypunktene, sekundærknappene - helt stille fra fingeren traff til siden byttet. Det er den ene tilstanden som avgjør om et grensesnitt kjennes direkte, og den manglet overalt unntatt på .cta. Fart: 100 ms ned, og elementets vanlige kurve tilbake opp. Flaten skal lese som at den gir etter, ikke som en animasjon. Skalaen følger flatens størrelse. .97 er tydelig på en knapp og et hopp på et kort som er 600 px bredt; store flater får .985. -webkit-tap-highlight-color slås av BARE der vi gir vår egen tilbakemelding. Brødtekstlenker beholder nettleserens grå blink: å fjerne den uten å sette noe i stedet er å fjerne svaret. */ .cta, .cta-sek, .mm-knapp, .toggle button, nav.topp .punkt, .sp-liste a, .artikkelliste a, .rel-liste a, .mm-panel a, .nedtrekk-panel a { -webkit-tap-highlight-color:transparent; } .cta:active, .cta-sek:active, .mm-knapp:active, .toggle button:active { transform:scale(.97); transition-duration:.1s; } .cta-sek:active { background:var(--baand); } .sp-liste a:active, .artikkelliste a:active, .rel-liste a:active { transform:scale(.985); transition-duration:.1s; } /* Menypunktene er små. En flate som tennes leser bedre enn en skalering på et mål som er 48 px høyt, og den treffer også tastaturbruk. */ nav.topp .punkt:active, .mm-panel a:active, .nedtrekk-panel a:active { background:var(--aksent-mykt); color:var(--aksent); } /* ---------- Panelene kommer fra knappen ---------- */ /* Panelet vokser ut fra knappen som åpnet det, ikke fra sitt eget senter. Den romlige sammenhengen mellom knapp og innhold ER forklaringen på hvor panelet kom fra, og begge panelene er allerede forankret til høyre. Kort og svakt med vilje: menyfasen i porten åpner et nedtrekk og måler etter 120 ms, og med denne kurven er panelet framme lenge før det. */ .mm-panel, .nedtrekk-panel { transform-origin:top right; } .mmeny[open] > .mm-panel { animation:panelinn .18s cubic-bezier(.16,1,.3,1); } .nedtrekk[open] > .nedtrekk-panel { animation:panelinn .16s cubic-bezier(.16,1,.3,1); } @keyframes panelinn { from { opacity:0; transform:scale(.97) translateY(-4px); } } /* Ankermål landet under den klebrige menyen: nettleseren setter målet på toppen av viewporten, og navlinja ligger oppå de øverste 78 pikslene der. Seksjonene på leverandørsiden hadde sin egen scroll-margin, men by-FAQ-ene (#s0 til #s7) og #prisgraf hadde det ikke. Gjelder alle id-er nå, så en ny ankerlenke ikke kan gjenta feilen. */ [id] { scroll-margin-top:96px; } @media (prefers-reduced-motion: reduce) { .inn, .reveal { opacity:1; transform:none; transition:none; } /* Løftet på hover er dekorasjon og fjernes. Trykkresponsen står igjen: «mindre bevegelse» betyr en roligere tilbakemelding, ikke ingen - og en flate som ikke svarer på et trykk leses som ødelagt, ikke som rolig. */ .kort:hover, .sp-liste a:hover, .artikkelliste a:hover, .rel-liste a:hover, .pk-rad:hover, .cta:hover { transform:none; } .kort, .sp-liste a, .artikkelliste a, .rel-liste a, .pk-rad { transition:none; } .mmeny[open] > .mm-panel, .nedtrekk[open] > .nedtrekk-panel { animation:none; } .linje { stroke-dasharray:none; stroke-dashoffset:0; } /* .baand MÅ stå her: flaten starter på opacity:0 og males fram av en animasjon, så uten denne linja ble selve grafen usynlig for lesere som har bedt om mindre bevegelse. Alt som starter skjult og avsløres av en animasjon, hører hjemme i denne blokka. */ .paa .linje, .paa circle.punkt, circle.punkt, .paa .baand, .baand { animation:none; opacity:1; } .sc-fyll { transition:none; } html { scroll-behavior:auto; } /* Må gjentas her: hover-regelen over har samme spesifisitet og står senere enn trykkblokken, så uten dette mistet en PC-bruker med redusert bevegelse trykkresponsen på alt hun holdt musepekeren over. */ .cta:active, .cta-sek:active, .mm-knapp:active, .toggle button:active { transform:scale(.97); } .sp-liste a:active, .artikkelliste a:active, .rel-liste a:active { transform:scale(.985); } } /* Gjennomsiktighet og kontrast er to egne innstillinger, ikke det samme som bevegelse. En leser som har bedt om mindre gjennomsiktighet i systemet sitt får en tett menylinje i stedet for et blurlag, og en som har bedt om mer kontrast får definerte kanter på kortene og mørkere sekundærtekst. */ @media (prefers-reduced-transparency: reduce) { nav.topp { background:var(--bg); backdrop-filter:none; } .lf-post { background:rgba(255,255,255,.2); backdrop-filter:none; } } @media (prefers-contrast: more) { nav.topp { background:var(--bg); backdrop-filter:none; } .kort, .grafkort, .beste, .priskort, .lp-kort, .lp-toc, .filterkort, .scorekort, .resrad, .svarblokk, .bs, .sp-liste a, .artikkelliste a, .rel-liste a, .mm-panel, .nedtrekk-panel { border-color:var(--dempet); } .cta-sek, select, .toggle, .mm-knapp { border-color:var(--blekk); } nav.topp .punkt, .lp-toc a, .brodsmule a { color:var(--blekk); } }