/* ========================================================== REVISA - stilark ========================================================== */ /* SKRIFTENE. Noeyaktig samme to som programmet henter i vedtakssjekk/revisa_tema.css og app.py. LIGGER LOKALT, IKKE HOS GOOGLE (29.09.2026). Foer ble de hentet fra fonts.googleapis.com, og da ble IP-adressen til hver besoekende sendt til Google. Naa ligger filene i skrifter/, og siden henter ingenting utenfra. Personvernsiden (personvern.html) sier dette - legges en ekstern skrift inn igjen, maa den teksten endres samtidig. BARE LATIN OG LATIN-EXT er tatt med. Det dekker norsk (æøå), §, «» og tankestrek. Kyrillisk, gresk og vietnamesisk er utelatt. unicode-range gjoer at nettleseren bare laster latin-ext-filen naar siden faktisk bruker et tegn derfra. Source Serif 4 er EN variabel fil som dekker alle vekter - derfor peker 400 og 500 paa samme fil. Den lastes bare én gang. Skriftene er under SIL Open Font License 1.1, se skrifter/LISENS.txt. VIRKER FORTSATT UTEN SKRIFTENE: finnes ikke filene, faller Source Serif 4 ned paa Georgia og Barlow Condensed paa Segoe UI. */ /* latin-ext */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url(skrifter/barlow-condensed-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url(skrifter/barlow-condensed-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(skrifter/barlow-condensed-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url(skrifter/barlow-condensed-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(skrifter/barlow-condensed-500-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(skrifter/barlow-condensed-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(skrifter/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(skrifter/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(skrifter/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(skrifter/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(skrifter/source-serif-4-variabel-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url(skrifter/source-serif-4-variabel-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(skrifter/source-serif-4-variabel-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 500; font-display: swap; src: url(skrifter/source-serif-4-variabel-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- SKRUENE ---------- Alt du sannsynligvis vil justere staar her, ett sted. Endrer du et tall her, slaar det gjennom overalt. */ :root { /* HET GULL, ER HVITT (13.09.2026). Aksentfargen #C9A24A er ute: programmet har ingen gullfarge lenger, og to ulike aksenter fikk nettsiden og verktoeyet til aa se ut som to produkter. NAVNET STAAR IGJEN. Det brukes to steder - streken under overskriftene og teksten i REVISA-baandet. Et navnebytte ville krevd at begge ble roert samtidig, med risiko for at ett ble glemt. Samme grep som --revisa-gull i programmets revisa_tema.css. Staar det «gull» i koden, er det hvitt som kommer ut. */ --gull: #FFFFFF; /* HET SORT, ER LYS (13.09.2026). Siden er lys over hele hoeyden naa, ikke bare i midtpartiet. #F4F5F7 er programmets egen flatefarge (backgroundColor i vedtakssjekk/.streamlit/config.toml). NAVNET STAAR IGJEN, av samme grunn som --gull og --navy: det brukes to steder - body og bunnfeltet - og et navnebytte krever at begge roeres samtidig. Staar det «sort» i koden, er det lys graa. */ --sort: #F4F5F7; --strek-farge: var(--gull); /* streken under overskriftene */ --tekst-lys: #c4c6c8; /* SKIFERGRAATT i heroen. Tre toner - lys oeverst, moerk nede. Vil du ha flaten lysere eller moerkere, endrer du alle tre i samme retning. Da holder dybden seg. GAA IKKE FOR LYST: over omtrent #55606B faar hvit tekst for lav kontrast. DETTE ER DEN MOERKE VERSJONEN, IKKE PROGRAMMETS EGEN FLATEFARGE. Det fantes en periode to konkurrerende svar paa "hvor lys skal heroen vaere": disse tre linjene sto en kort stund paa naer-hvite toner (#F8FAFC osv, laant fra programmets #F4F5F7), mens en egen proevefil (design-endring/prove-farger.css, 15.09.2026) samtidig satte de samme variablene til moerke skifertoner og VANT i nettleseren fordi den ble lastet sist. Nettsiden saa altsaa moerk ut i praksis hele tiden, mens denne fila paastod noe annet - noeyaktig den typen selvmotsigelse som gjoer en side vanskelig aa stole paa. Proevefila er nå tatt bort (21.09.2026), og de moerke tonene den brukte staar naa her, som eneste sannhet. Hvit heroetekst (.hero h1, .hero p) er skrevet med disse tre tonene som forutsetning - lyses de opp igjen, maa tekstfargene i heroen roeres samtidig. */ --skifer-lys: #3E4751; --skifer-midt: #343C45; --skifer-mork: #2B323A; /* --hero-hoyde er ikke lenger i bruk (21.09.2026): heroen faar naa hoeyden innholdet trenger, se .hero. Variabelnavnet staar igjen i tilfelle en fast hoeyde trengs igjen senere. */ --hero-hoyde: auto; /* Skriftstakkene, skrevet ut ett sted. Programmet bruker de samme to, og de er kopiert ord for ord derfra - ikke skrevet paa nytt. Univers Condensed Light staar foerst i broedskriften fordi den er kjoept og installert paa noen maskiner. Den kan IKKE lastes ned. Har maskinen den, brukes den; ellers faller den umerkelig ned paa Barlow Condensed, som har samme smale, lette karakter. */ --antikva: 'Source Serif 4', Georgia, 'Times New Roman', serif; --brodskrift: 'Univers Condensed Light', 'Univers LT Std 47 Light Cn', 'Barlow Condensed', 'Segoe UI Condensed', 'Segoe UI', sans-serif; } /* GRUNNSTOERRELSEN. 16px, ikke nettleserens vanlige 16px - samme verdi som programmet setter i revisa_tema.css. Alt som er skrevet i rem (nesten alt her) skalerer med denne, saa hele siden vokser jevnt og ingen enkeltregel maa roeres. Sto siden paa 16 og programmet paa 17.5, ville teksten vaert merkbart mindre her enn i verktoeyet. */ html { font-size: 16px; } * { box-sizing: border-box; } body { margin: 0; background: var(--sort); font-family: var(--brodskrift); /* Lett strek, som i programmet. Barlow Condensed i vanlig tykkelse blir for tung mot den smale bokstavformen. */ font-weight: 300; } /* ========================================================== TOPPBANNER ========================================================== */ /* SAMLET HIT FRA design-endring/prove-farger.css (21.09.2026). Fila var midlertidig fra starten - se kommentaren øverst i den - og lå der lenge nok til å bli en usynlig andre kilde til fargene på siden: to stilark som delvis sa det samme, delvis overstyrte hverandre, og som ingen så på samtidig. Alt som fortsatt var i bruk er nå flyttet inn her, og index.html peker ikke lenger dit. */ .banner { display: flex; align-items: center; gap: 3.2rem; padding: 0 3.5rem; height: 82px; /* Noeyaktig programmets menylinje: .rv-nav i app.py bruker samme flate og samme haarfine kant under. Sto paa ren hvit uten kant, og da fløt banneret sammen med seksjonen under. */ background: #F8F9FA; border-bottom: 1px solid #C9CDD4; /* HENGENDE BANNER. position:sticky lar banneret ta sin egen plass i sidens flyt helt til toppen av vinduet naar det opp - da blir det staaende. z-index loefter det over teksten som ruller forbi under; skyggen er svak med vilje (6 % sort) - den skal merkes, ikke ses. */ position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 12px rgba(0, 0, 0, .06); } .banner .merke { color: #14161a; font: 500 1.35rem/1 var(--antikva); /* #C9CDD4 er palettens kantfarge, den samme programmets menylinje bruker. Sto paa #b9bcc2 - en graatone som ikke fantes noe annet sted, og som derfor gjorde merket litt fremmed paa sin egen side. HELE NAVNET, IKKE BARE «R» (endret 29.09.2026, paa oenske). Fra 13.09 sto bare R her, for at navnet ikke skulle staa to ganger like over hverandre. Oensket er at merket skal kunne leses som navn overalt - ogsaa paa undersidene, der heroen ikke finnes. Versalene og sperringen er de samme som ordmerket i heroen, saa de to leses som samme merke i to stoerrelser. Programmet viser fortsatt bare R-ikonet (vedtakssjekk/app.py). */ font-size: 1.05rem; text-transform: uppercase; letter-spacing: .26em; border-top: 1px solid #C9CDD4; border-bottom: 1px solid #C9CDD4; /* Sperringen legger luft ETTER siste bokstav ogsaa. Den ekstra venstrepolstringen (calc) gjoer at ordet staar midt mellom strekene. */ padding: .45rem .5rem .45rem calc(.5rem + .26em); margin-right: auto; /* dytter menyen mot hoeyre */ text-decoration: none; } /* margin-left:auto dytter hele menyen mot hoeyre kant - ingen bredder aa regne ut, og det virker uansett hvor mange lenker menyen faar. */ .banner nav { display: flex; flex-wrap: wrap; margin-left: auto; gap: 0; } .banner nav a { color: #14161a; font: 400 .97rem var(--antikva); text-decoration: none; padding: .4rem 1.15rem; border-left: 1px solid #C9CDD4; border-bottom: 2px solid transparent; /* plass reservert, saa teksten ikke hopper naar streken kommer */ } .banner nav a:hover, .banner nav a.aktiv { border-bottom-color: #14161a; } .banner nav a:focus-visible { outline: 2px solid #14161a; outline-offset: 3px; } /* «Begrenset analyse» og «Logg inn» er handlinger, ikke sider - litt ekstra luft og halvfet skrift paa «Logg inn» skiller dem fra resten av menyen uten aa gjoere dem mindre lettleste. */ .banner nav .lokal-analyse { font-weight: 400; margin-left: .9rem; padding-left: 1.7rem; } .banner nav .logg-inn { margin-left: .9rem; padding-left: 1.7rem; padding-right: 0; border-left: 1px solid #C9CDD4; font-weight: 500; } .banner nav .lokal-analyse + .logg-inn { margin-left: 0; padding-left: 1.15rem; } /* ========================================================== MOERK MENYLINJE (29.09.2026, paa oenske) ========================================================== Staar ETTER de lyse reglene over og overstyrer dem - fjernes denne blokken, gaar menylinjen tilbake til lys. Reglene over er beholdt fordi kommentarene der forklarer oppsettet (hengende banner, bredder). HALVGJENNOMSIKTIG SKIFER MED USKARPHET. 92 % dekkevne, ikke mindre: paa undersidene ruller hvit tekst under banneret, og med lavere dekkevne ville lenkefargen falt under kontrastkravet der. Maalt: #94A3B8 mot banneret over hvit side (~#33383E) er 4,7. SYSTEMSKRIFT I MENYEN. «Inter eller en ren systemskrift» - systemets egen (Segoe UI paa Windows) er valgt, fordi den ikke krever noen nedlasting. Inter maatte enten hentes fra Google (i strid med personvernsiden) eller legges lokalt som enda en skriftfil. */ .banner { background: rgba(33, 39, 46, .92); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 1px 16px rgba(0, 0, 0, .18); } .banner .merke { color: #E3E8EE; border-top-color: rgba(201, 209, 218, .45); border-bottom-color: rgba(201, 209, 218, .45); } .banner .merke:focus-visible { outline: 2px solid #F4F5F7; outline-offset: 3px; } .banner nav { align-items: center; gap: .15rem; } .banner nav a { font: 500 .9rem/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #94A3B8; border-left: 0; border-bottom: 0; border-radius: 8px; padding: .6rem .85rem; transition: color .15s ease, background-color .15s ease, border-color .15s ease; } .banner nav a:hover, .banner nav a.aktiv { color: #FFFFFF; } .banner nav a:focus-visible { outline: 2px solid #F4F5F7; outline-offset: 2px; } /* Handlingene: kant i stedet for skillestreker. «Begrenset analyse» er en omrisset knapp, «Logg inn» en lys, fylt knapp - den ene tydelige handlingen oeverst. */ .banner nav .lokal-analyse, .banner nav .lokal-analyse + .logg-inn, .banner nav .logg-inn { border-left: 0; padding: .6rem 1.05rem; } .banner nav .lokal-analyse { margin-left: 1.1rem; color: #E2E8F0; border: 1px solid rgba(148, 163, 184, .4); } .banner nav .lokal-analyse:hover { color: #FFFFFF; border-color: rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .05); } .banner nav .logg-inn, .banner nav .lokal-analyse + .logg-inn { margin-left: .6rem; color: #1C1F23; background: #F4F5F7; border: 1px solid #F4F5F7; font-weight: 600; } .banner nav .logg-inn:hover { color: #1C1F23; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .banner { background: #2B323A; } } /* Ankerlenkene skal stoppe UNDER det hengende banneret, ikke bak det. */ section[id] { scroll-margin-top: calc(82px + 1.5rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Skjult for oeyet, lest opp av skjermleser - brukes paa tabellbildetekster. */ .skjult { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Rullefelt for brede tabeller, med tastaturtilgang (tabindex). */ .tabell-rull { overflow-x: auto; margin-top: 1.6rem; border-radius: 8px; } /* ========================================================== HERO ========================================================== */ .hero { position: relative; /* gjoer at lagene under kan legge seg nøyaktig oppaa denne boksen */ overflow: hidden; /* klipper vekk det som stikker utenfor */ display: flex; align-items: center; /* TO SPALTER, IKKE ÉN (21.09.2026). Heroen hadde bare tekst, plassert paa en 60 % bred spalte - resten av flaten var moensteret alene. Et ekte skjermbilde av analysen til hoeyre gjoer paastanden etterprøvbar med det samme, og fyller flaten med noe konkret i stedet for tomrom. HOEYDEN ER IKKE LENGER LAAST TIL SKJERMEN (var 50dvh/520px): et bilde av et helt sammendrag trenger den hoeyden innholdet faktisk krever, saa heroen bestemmes naa av polstringen under, som paa resten av siden. */ justify-content: space-between; gap: 3.5rem; padding: 4.5rem 3.5rem; /* SKIFERMOENSTER, variant C - «kryssende brudd» (valgt 13.09.2026). Tre lag, oeverst foerst. Nettleseren tegner dem nedenfra og opp, saa gradienten nederst i lista er bunnen, og stripene ligger oppaa. Lag 1 hvite arer, 163 grader - samme vinkel som gradienten. 1 piksel strek, saa 4 piksler tomt. Bare 3 % hvitt. Lag 2 moerke brudd, 73 grader - paa TVERS av arene. Det er krysningen som gjoer at det leses som stein og ikke som en stripet duk. 5 % sort, 1 piksel per 10. Lag 3 selve skiferflaten. PROSENTENE ER MED VILJE SAA LAVE. Ser du moensteret tydelig paa en vanlig skjerm, er det for sterkt: da konkurrerer flaten med overskriften i stedet for aa baere den. Det skal merkes, ikke ses. MAALT: hvit tekst mot den lyseste delen av flaten gir kontrast 9,4. Kravet er 4,5. Moensteret endrer ikke dette - lagene er saa svake at de ikke flytter maalingen ett trinn. Samme tre lag ligger i programmets forside, app.py. */ background: repeating-linear-gradient(163deg, rgba(255,255,255,.03) 0 1px, transparent 1px 5px), repeating-linear-gradient(73deg, rgba(0,0,0,.02) 0 1px, transparent 1px 11px), linear-gradient(163deg, var(--skifer-lys) 0%, var(--skifer-midt) 52%, var(--skifer-mork) 100%); } /* ---------- Bakgrunnen ---------- Skifer er ikke én farge. Ekte skifer er blaagraa, og lysere der lyset treffer. Derfor en svak gradient og ikke en flat flate: en helt jevn farge leses som «en boks», mens en antydning til overgang leses som «en flate med dybde». Fallet er bevisst lite - fra 3E4751 til 2B323A, altsaa under tjue trinn. Mer enn det begynner aa se ut som en effekt, og en effekt er nettopp det denne flaten IKKE skal vaere. Stoppunktet paa 52 % gjoer overgangen ujevn med vilje: en gradient med stoppet midt paa 50 % ser mekanisk ut. ---------------------------------------------------------- */ /* ---------- Innholdet ---------- */ .hero-innhold { position: relative; /* loefter teksten over bevegelseslagene */ width: min(48%, 34rem); flex-shrink: 0; } .hero h1 { margin: 0 0 1rem; color: #fff; } /* ---------- Skjermbildet ---------- Bildet er allerede rammet inn (kant, avrunding, skygge og «EKSEMPEL»-merket) i selve PNG-en - se nettside/bilder/README om det finnes, eller kommentaren der bildet lages. CSS-en her plasserer det bare paa flaten og holder det innenfor heroens hoeyde. */ .hero-bilde { position: relative; flex-grow: 1; min-width: 0; max-width: 40rem; display: flex; justify-content: center; } .hero-bilde img { width: 100%; height: auto; max-height: 34rem; object-fit: contain; object-position: top; } /* ---------- MERKET OVER TITTELEN (29.09.2026) ---------- Kapsel med tynn kant og en pulserende prikk i samme cyan som hodet. Prikken er det eneste som beveger seg; den pulserer rolig og staar stille ved «reduser bevegelse». Teksten er #E2E8F0 paa moerk flate, kontrast over 10. */ .lovmerke { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.4rem; padding: .4rem .95rem .4rem .8rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, .35); background: rgba(255, 255, 255, .04); color: #E2E8F0; font: 500 .82rem/1.3 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .01em; } .lovmerke-prikk { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #38D6F0; box-shadow: 0 0 8px rgba(56, 214, 240, .8); flex-shrink: 0; } .lovmerke-prikk::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #38D6F0; animation: lovpuls 2.4s ease-out infinite; } @keyframes lovpuls { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.8); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lovmerke-prikk::after { animation: none; opacity: 0; } } /* .hero p gir alle avsnitt i heroen lang linjeavstand og stor skrift; merket skal ha sin egen. */ .hero p.lovmerke { font-size: .82rem; line-height: 1.3; color: #E2E8F0; margin-bottom: 1.4rem; } /* ---------- NETTVERKSHODET (29.09.2026) ---------- Hodet fra hero-hode.js, tegnet rett paa skiferflaten. INGEN BOKS. Beholderen har gjennomsiktig bunn, og canvaset toemmes i hvert bilde i stedet for aa fylles. Kantene tones bort med en radial maske, saa gulvlinjene forsvinner i skiferen i stedet for aa slutte i en rett kant. GLODEN er en egen div bak canvaset: #0EA5E9 paa 15 % i midten, helt gjennomsiktig i kanten, og kraftig uskarp. Den ligger bak «hjernen», litt over midten. TALLET I HJOERNET («… av 1315 punkter lyser») er fjernet 29.09.2026. Det talte bare punktene i tegningen og kunne leses som et maaletall fra programmet. */ .hero-innhold { z-index: 1; } .hode { position: relative; background: transparent; flex-direction: column; align-items: stretch; } /* Gloeden ligger bak HODET, som staar til hoeyre (skjermen er til venstre, fra 29.09.2026). */ .hode-glod { position: absolute; left: 50%; right: 2%; top: 10%; height: 62%; border-radius: 50%; background: radial-gradient(closest-side, rgba(14, 165, 233, .15) 0%, rgba(14, 165, 233, .06) 55%, rgba(14, 165, 233, 0) 100%); filter: blur(48px); pointer-events: none; } .hode-lerret { position: relative; display: block; width: 100%; aspect-ratio: 700 / 600; /* = W / H i hero-hode.js med skjerm */ /* Bredere enn hoey (60 % / 52 %) siden skjermen kom til venstre - ellers ble skjermen tonet bort sammen med gulvkanten. */ -webkit-mask-image: radial-gradient(ellipse 60% 52% at 50% 48%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 60% 52% at 50% 48%, #000 72%, transparent 100%); } .hode-knapp { align-self: flex-end; min-height: 44px; /* minste trykkflate for en finger */ padding: 0 1.25rem; border-radius: 999px; background: rgba(18,22,27,.45); color: #E6E9EC; border: 1px solid rgba(255,255,255,.28); font-family: var(--brodskrift); font-size: .95rem; letter-spacing: .02em; cursor: pointer; } .hode-knapp:hover { border-color: rgba(255,255,255,.55); } .hode-knapp:focus-visible { outline: 3px solid #F4F5F7; outline-offset: 3px; } /* ---------- ORDMERKET ---------- Samme innretning som «R»-en oppe til venstre: to haarfine streker, én over og én under. Da leses heroen og banneret som samme merke, ikke som to ulike utforminger paa samme side. VERSALENE LAGES HER, ikke i index.html. Skal navnet tilbake til vanlig skrivemaate, er det denne ene linjen som fjernes. inline-block ER POENGET. Et span er normalt inline, og en ramme paa et inline-element strekker seg ikke over hele linjen - men den lar heller ikke hoeyden styres. inline-block gjoer at strekene legger seg noeyaktig rundt ordet og ingenting mer. SPERRINGEN LAGER ET HULL TIL HOEYRE. letter-spacing legger avstand ETTER hver bokstav, ogsaa den siste. Uten rettelsen under staar ordet skjevt inne i sin egen ramme - .28em for mye paa hoeyre side. Derfor trekkes det fra igjen i padding-right. */ /* STAAL OG SOELV (29.09.2026, paa oenske: «hoeyteknologisk, som representerer teknologiutvikling 2027 og fremover»). Bokstavene er en loddrett soelvgradient klippet til teksten (background-clip: text): lys kant oeverst, en moerkere staalstripe midt paa, og lys igjen nederst - slik boerstet metall ser ut. En svak lysrefleks glir over ordet hvert tiende sekund (soelvglans). Strekene over og under er samme metall: haarfine, sterkest i midten og svakere ut mot endene (border-image). KONTRAST: den moerkeste soelvtonen (#A9B4C0) er 3,2 mot heroens lyse topp. Logoer er unntatt kontrastkravet i WCAG 1.4.3, og navnet staar dessuten som vanlig tekst i h1 for skjermlesere. Gaa ikke moerkere. UTEN STOETTE for background-clip: text faller ordet tilbake til #E3E8EE (@supports under), ikke til usynlig tekst. */ .merkeord { display: inline-block; font-family: var(--antikva); font-weight: 500; font-size: clamp(1.1rem, 1.7vw, 1.45rem); text-transform: uppercase; letter-spacing: .3em; color: #E3E8EE; border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, rgba(201,209,218,.15), #E6EBF0 50%, rgba(201,209,218,.15)) 1; padding: .6rem .6rem .6rem calc(.6rem + .3em); margin-bottom: 1.6rem; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .merkeord { background: linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 60%) -200% 0 / 200% 100% no-repeat, linear-gradient(180deg, #F7F9FB 0%, #D5DCE3 38%, #A9B4C0 52%, #DCE2E8 70%, #F2F5F8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; animation: soelvglans 10s ease-in-out infinite; } } @keyframes soelvglans { 0%, 70% { background-position: -200% 0, 0 0; } 90%, 100% { background-position: 200% 0, 0 0; } } @media (prefers-reduced-motion: reduce) { .merkeord { animation: none; } } /* ---------- SLAGORDET ---------- Egen linje, vanlig skrivemaate. Versaler her ville senket lesehastigheten maalbart, og slagordet er en setning - ikke et navn. */ .slagord { display: block; /* STOERRELSEN ER SATT NED (var clamp(1.55rem,3.3vw,2.85rem)) etter proeving 15.09.2026: naar spalten ble smalere for aa gi plass til skjermbildet, brakk «Dokumentkontroll foer klage og anke» over tre linjer i den store stoerrelsen. Denne verdien sto i design-endring/prove-farger.css og er flyttet inn som endelig. */ font: 500 clamp(1.5rem, 3vw, 2rem)/1.25 var(--antikva); } .strek { width: 5.5rem; height: 4px; background: var(--strek-farge); margin-bottom: 1.9rem; } /* HEROENS STREK ER HAARFIN. Ordmerket over har allerede to streker, og en fjerde tykk strek rett under ble for mye - da konkurrerer inndelingen med teksten den skal dele opp. GJELDER BARE HEROEN. Strekene under seksjonsoverskriftene lenger nede staar urort paa 5,5rem x 4px. Skal de ogsaa bli tynne, er det den generelle .strek-regelen rett over som endres. */ .hero .strek { width: 2.5rem; height: 1px; margin-bottom: 1.6rem; } .hero p { margin: 0 0 1rem; color: rgba(255,255,255,.9); /* samme verdi som --sbm-text hos deg */ /* Flyttet inn fra design-endring/prove-farger.css (21.09.2026), som endelig verdi - se .slagord over for hvorfor spalten ble smalere. */ font-size: clamp(.95rem, 1.25vw, 1.0625rem); line-height: 1.85; } .hero p + p { margin-top: 1.4rem; } /* Hvit pille. border-radius 999px er trikset for helt runde ender: tallet er saa stort at nettleseren kapper det ned til halve hoeyden, uansett hvor hoey knappen blir. Skriver du 30px, maa det rettes hver gang polstringen endres. */ .cta { display: inline-block; margin-top: 1.4rem; padding: .95rem 2.1rem; border-radius: 999px; background: #fff; color: #14161a; font-size: 1.02rem; text-decoration: none; border: 1px solid rgba(0,0,0,.18); box-shadow: 0 3px 14px rgba(0,0,0,.35); transition: background .18s ease, box-shadow .18s ease; } .cta:hover { background: #f1f2f4; box-shadow: 0 5px 20px rgba(0,0,0,.45); } /* ========================================================== MINDRE SKJERMER ========================================================== */ @media (max-width: 900px) { .banner { height: auto; padding: 1rem 1.5rem; flex-wrap: wrap; gap: 1rem; position: static; } .banner nav { gap: 0; margin-left: 0; } .hero { flex-direction: column; align-items: stretch; padding: 2.5rem 1.5rem; } .hero-innhold { width: 100%; } .hero-bilde { max-width: 100%; } } /* Heroen har ingen bevegelse lenger, saa reglene for «reduser bevegelse» og for aa spare batteri paa telefon er fjernet sammen med lagene. Kommer bevegelse tilbake, maa de med tilbake - se arkiv/stil-med-vann.css. */ /* ========================================================== LYSE SEKSJONER ========================================================== */ /* Fargene for lys bunn hoerer til her, ikke i :root sammen med hero-fargene. Da ser man med én gang hva som gjelder hvor. */ .lys { /* SKIFERBLAA, IKKE MARINEBLAA (13.09.2026). Sto paa #14213D, en blaatone som ikke fantes noe sted i programmet. #3E4A5E er den samme som programmet bruker paa overskrifter og knapper (--revisa-navy i vedtakssjekk/revisa_tema.css). NAVNET STAAR IGJEN, av samme grunn som --gull over: det brukes fire steder, og et navnebytte krever at alle roeres samtidig. MAALT: 9,0 i kontrast mot hvit bunn. Kravet er 4,5. */ --navy: #3E4A5E; --brod: #5c6673; /* broedtekst */ --ramme-strek: #c9cdd4; /* STREKEN MAA OVERSTYRES HER. --strek-farge er hvit globalt, fordi heroen og Kontakt-seksjonen har moerk bunn. Paa hvit bunn ble den usynlig - streken sto der, 96 x 4 piksler, i samme farge som flaten bak. Funnet i nettleseren 13.09.2026, ikke gjettet. Skiferblaa her er ogsaa det programmet gjoer: h1::after i revisa_tema.css bruker --revisa-gull, som er satt til #3E4A5E. */ --strek-farge: var(--navy); background: #fff; color: var(--brod); } .seksjon { padding: 5.5rem 3.5rem; } .om-rad { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 32% 1fr; /* bilde | tekst */ gap: 3.5rem; align-items: start; } /* ---------- Bildet ---------- */ .om-bilde img, .bilde-plassholder { width: 100%; aspect-ratio: 4 / 3; border-radius: 6px; object-fit: cover; } .bilde-plassholder { display: grid; place-items: center; text-align: center; background: repeating-linear-gradient(45deg, #eceef1 0 10px, #e3e6ea 10px 20px); color: #8d95a1; font-size: .95rem; line-height: 1.6; border: 1px dashed var(--ramme-strek); } .bilde-plassholder small { font-size: .8rem; } /* ---------- Teksten ---------- */ .om-tekst h2 { margin: 0 0 1.6rem; text-align: center; color: var(--navy); font: 500 clamp(1.7rem, 2.6vw, 2.2rem)/1.2 var(--antikva); } /* HEL STREK, IKKE STIPLET (21.09.2026, var stiplet fra skissen). Stiplet kant er nettleseres vanlige tegn for «her mangler noe» eller «midlertidig plassholder» - denne boksen har alltid hatt ferdig tekst. Rett ved siden av staar .mork-boks, som ER det andre kortet i samme rad; nå deler de samme kant, radius og skygge, og leses som et par - lyst kort og moerkt kort - i stedet for et utkast ved siden av et ferdig element. */ .ramme { border: 1px solid var(--ramme-strek); border-radius: 8px; box-shadow: 0 6px 18px rgba(43, 50, 58, .08); padding: 2.2rem 2.4rem; background: #fff; } .ramme p { margin: 0 0 1.15rem; font-size: 1rem; line-height: 1.75; } .ramme p:last-child { margin-bottom: 0; } .ingress { color: var(--navy); } /* Skjermbildet inne i "Hvorfor Revisa" (21.09.2026). Bildet selv er allerede rammet inn (kant, avrunding, skygge, «EKSEMPEL»-merket) - her styres bare bredden og billedteksten. */ .funnkort-bevis { margin: 2.2rem 0; max-width: 34rem; } .funnkort-bevis img { width: 100%; height: auto; display: block; } .funnkort-bevis figcaption { margin-top: .9rem; font-size: .88rem; line-height: 1.6; color: var(--brod); font-style: italic; } /* «Under utvikling» skal leses som en merknad, ikke som et loefte. Kursiv og dempet farge sier det uten aa rope. */ /* MAALT OG RETTET 13.09.2026. #7a828d ga 3,89 mot hvit - underkjent, og feilen sto her fra foer denne omgangen. #646D79 gir 5,24 og er fortsatt lysere enn broedteksten rundt, saa merknaden leses fortsatt som en merknad og ikke som et loefte. */ .under-arbeid { font-style: italic; color: #646D79; } /* ========================================================== LYSE SEKSJONER PAA MINDRE SKJERMER ========================================================== */ /* TODO(human): naar skal bilde og tekst slutte aa staa ved siden av hverandre, og legge seg under hverandre i stedet? Fyll inn et brytepunkt og regelen som stabler dem: @media (max-width: DITTTALLpx) { .om-rad { grid-template-columns: ... ; gap: ... ; } .om-bilde { ... } } Lar du dette staa tomt, virker siden fortsatt - bilde og tekst blir bare smalere og smalere jo mindre skjermen er. */ @media (max-width: 900px) { .seksjon { padding: 3.5rem 1.5rem; } .ramme { padding: 1.6rem 1.4rem; } } /* ========================================================== REVISA-BAANDET ========================================================== */ /* MOERKT IGJEN, OG FLATT (14.09.2026). Sto lyst ett doegn. Grunnen til at det snus tilbake: etter heroen var siden lys hele veien ned, og da fantes det ikke ett eneste holdepunkt for oeyet. Ett moerkt baand deler siden i to - «hva dette er» over, «hvorfor det betyr noe» under. FLATT, IKKE MOENSTRET. Heroen har skifermoensteret. Faar denne flaten det ogsaa, konkurrerer de to om aa vaere sidens ansikt. Heroen er identiteten; dette baandet er en uttalelse, og skal vaere stillere. #2B323A er bunnen av heroens gradient. Da henger de to sammen uten aa gjenta hverandre. TO MOERKE FLATER ER GRENSEN. En tredje ville gjort siden tung. */ .baand { background: #2B323A; padding: 5rem 2rem; } /* ---------- 2027-UTSAGNET ---------- Erstattet R-E-V-I-S-A-akronymet 14.09.2026. max-width i ch, ikke i piksler. ch er bredden paa tegnet «0» i den skriften som faktisk brukes, saa linjelengden holder seg lesbar selv om skriftstoerrelsen endres. Over ca. 60 tegn mister oeyet linjen naar det skal tilbake til venstre kant - og dette er en setning folk skal huske, ikke skumme. */ .baand-utsagn { margin: 0 auto; max-width: 54ch; text-align: center; font-family: var(--antikva); } /* Paastanden. Stoerst, ren hvit - 13,0 i kontrast mot #2B323A. */ .baand-utsagn .paastand { display: block; color: #FFFFFF; font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.35; margin-bottom: 1.1rem; } /* Svaret. Mindre og dempet, saa oeyet tar paastanden foerst. #C9CDD4 gir 8,7 mot samme bunn - godt over kravet paa 4,5. */ .baand-utsagn .svaret { display: block; color: #C9CDD4; font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; } /* ========================================================== UNDERSIDER ========================================================== personvern.html, vilkar.html og ki-bruk.html. Alle tre har samme oppbygning: banner, smal moerk sidetopp, innhold, bunn. HVORFOR IKKE EN HERO: en underside skal ikke konkurrere med forsiden. Men den skal heller ikke vaere en naken hvit side der man mister foelelsen av hvilket produkt man er inne i. En smal moerk stripe loeser begge deler - den bruker samme flate som 2027-baandet, saa merket henger med uten aa ta plass. */ .sidetopp { background: #2B323A; padding: 3rem 3.5rem 3.2rem; } .sidetopp-innhold { max-width: 72ch; /* samme spaltebredde som .smal under, saa overskriften staar loddrett over teksten */ margin: 0 auto; } /* Tilbakelenken staar OVER overskriften, ikke under. Den er det foerste oeyet moeter etter banneret, og da vet man med én gang at dette er et sidespor man kommer tilbake fra. Samme teksttype som bunnmenyen og programmets menylinje: smaa versaler, sperret, halvfet. */ .sidetopp .tilbake { display: inline-block; margin-bottom: 1.6rem; color: #C9CDD4; text-decoration: none; font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .sidetopp .tilbake:hover { color: #FFFFFF; } .sidetopp h1 { margin: 0; color: #FFFFFF; font: 500 clamp(1.5rem, 2.8vw, 2.15rem)/1.2 var(--antikva); } /* Streken arver --strek-farge, som er hvit globalt. Riktig her, siden sidetoppen er moerk. Litt smalere enn seksjonsstrekene, som i heroen. */ .sidetopp .strek { width: 3.5rem; height: 2px; margin: 1.1rem 0 0; } /* Underoverskriftene inne i en underside. Venstrestilt, ikke midtstilt som paa forsiden: dette er dokumenttekst man leser ovenfra og ned, ikke seksjoner man skummer. */ .sidetopp + .seksjon .smal h2 { margin: 2.6rem 0 1rem; font: 500 clamp(1.15rem, 1.8vw, 1.4rem)/1.3 var(--antikva); color: var(--navy); } .sidetopp + .seksjon .smal h2:first-child { margin-top: 0; } @media (max-width: 900px) { .sidetopp { padding: 2.2rem 1.5rem 2.4rem; } } /* ========================================================== RETTSKILDESIDEN ========================================================== rettskilder.html er GENERERT av nettside/verktoy/lag-rettskildemeny.py fra FORSIDE_MENY i vedtakssjekk/rettskilder.py. Stilen staar her, i det vanlige stilarket - da kan utseendet endres uten aa roere skriptet, og skriptet kan kjoeres uten aa roere utseendet. */ .sidetopp-ingress { margin: 1.4rem 0 0; color: #C9CDD4; /* 8,7 mot #2B323A */ font-size: .95rem; line-height: 1.7; max-width: 52ch; } .kildespalte { max-width: 1180px; margin: 0 auto; } .kildegruppe { margin-bottom: 3.5rem; } .kildegruppe:last-child { margin-bottom: 0; } .kildegruppe h2 { margin: 0 0 .3rem; padding-bottom: .7rem; border-bottom: 1px solid var(--ramme-strek); font: 500 1.25rem var(--antikva); color: var(--navy); } /* Antallet i gruppeoverskriften. Et lite tall som sier «her er det mye» uten at man maa telle. Dempet, saa det ikke konkurrerer med selve navnet paa gruppen. */ .kildegruppe .antall { font-family: var(--brodskrift); font-size: .78rem; font-weight: 700; letter-spacing: .1em; color: #5C6673; /* 5,83 mot hvit */ vertical-align: .35em; margin-left: .4rem; } /* SPALTER, IKKE ÉN LANG LISTE. «Rettskilder» alene har 43 punkter. I én spalte blir det en halv skjermlengde med korte linjer og mye tomt til hoeyre - tungt aa skumme. column-width, ikke column-count: da bestemmer NETTLESEREN hvor mange spalter det blir plass til. Paa en bred skjerm blir det tre, paa en smal blir det én, uten at vi maa skrive en eneste mediasporring. break-inside: avoid hindrer at et langt punkt deles paa tvers av to spalter midt i en setning. */ .kildeliste { margin: 1.2rem 0 0; padding: 0; list-style: none; column-width: 22rem; column-gap: 2.5rem; } .kildeliste li { break-inside: avoid; margin-bottom: .55rem; } .kildeliste a { color: var(--brod); text-decoration: none; font-size: .95rem; line-height: 1.5; border-bottom: 1px solid transparent; } .kildeliste a:hover { color: var(--navy); border-bottom-color: var(--navy); } /* ========================================================== SMAL TEKSTSPALTE ========================================================== */ /* Broedtekst skal ikke gaa over hele skjermen. Over ca. 75 tegn per linje mister oeyet lett linjen naar det skal tilbake til venstre kant. Derfor et tak her, ikke i hver enkelt seksjon. */ .smal { max-width: 72ch; margin: 0 auto; } .smal p { margin: 0 0 1.35rem; font-size: 1rem; line-height: 1.8; } .smal p b { color: var(--navy); } .midtstilt { text-align: center; } /* Skriften gjelder ALLE overskrifter i seksjonene. Fargen settes for seg - ellers ville en moerk seksjon staatt uten skrifttype fordi regelen var laast til .lys. */ .seksjon h2, .kraft-rad h2 { margin: 0 0 1rem; font: 500 clamp(1.7rem, 2.6vw, 2.2rem)/1.2 var(--antikva); } .lys h2 { color: var(--navy); } /* Streken under overskriften, sentrert. Samme element som i heroen - derfor gjenbrukes .strek, og bare midtstillingen legges til. */ .midtstilt-strek { margin: 0 auto 2.4rem; } /* ========================================================== LOVENDRINGEN 2027 ========================================================== */ .kraft-rad { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .kraft-rad p { margin: 0; font-size: 1rem; line-height: 1.8; } /* ========================================================== MANGLENDE TEKST ========================================================== */ /* Med vilje stygg. En plassholder som ser ferdig ut, blir staaende. Denne skal irritere til den er borte. */ .mangler { border: 1px dashed #c2a06a; background: #fdf8ef; padding: 1.3rem 1.5rem; color: #7a6438; font-size: .95rem; line-height: 1.7; } .mangler b { display: block; margin-bottom: .35rem; color: #7a6438; } /* ========================================================== MOERK SEKSJON OG BUNN ========================================================== */ /* KLASSEN HETER FORTSATT «moerk-seksjon», MEN ER LYS (13.09.2026). Navnet staar igjen fordi det brukes i index.html, og et bytte krever at begge filene roeres samtidig. Samme grep som --gull og --sort. Kontakt-seksjonen har naa samme tone som REVISA-baandet, saa de to rammer inn de hvite seksjonene mellom seg. */ .moerk-seksjon { background: #EDEEF0; } .moerk-seksjon { --strek-farge: #3E4A5E; } .lys-tekst { color: #5c6673; } .moerk-seksjon h2 { color: #3E4A5E; } /* KNAPPEN SNUR MED FLATEN. .cta er en HVIT pille, laget for den moerke heroen. Paa lys bunn forsvant den. Her blir den en MOERK pille med lys skrift - noeyaktig som «Start ny vedtaksrevisjon» i programmet. */ .lys .cta, .moerk-seksjon .cta { background: #3E4A5E; color: #FFFFFF; border-color: rgba(0,0,0,.10); box-shadow: 0 2px 8px rgba(43,50,58,.18); } .lys .cta:hover, .moerk-seksjon .cta:hover { background: #2B323A; box-shadow: 0 4px 14px rgba(43,50,58,.28); } .bunn { background: var(--sort); /* Sto paa #8c9097, riktig mot sort og bare 2,4 mot lys flate. #6B7480 var neste forsoek og ga 4,34 - fortsatt under kravet. #5C6673 gir 5,34. Maalt, ikke gjettet. */ color: #5C6673; border-top: 1px solid #C9CDD4; padding: 2.5rem 3.5rem; text-align: center; } .bunn p { margin: 0; font-size: .9rem; line-height: 1.7; } /* ---------- BUNNMENYEN ---------- Samme teksttype som lenkene i programmets menylinje (.rv-nav-lenker i app.py): smaa versaler, sperret, halvfet. Det er den samme innretningen paa begge produkter, og det er hele poenget. flex-wrap gjoer at lenkene legger seg under hverandre paa en smal skjerm i stedet for aa presses sammen. */ .bunn-meny { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; margin-bottom: 1.6rem; } .bunn-meny a { color: #5C6673; text-decoration: none; font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid transparent; /* plass reservert, saa teksten ikke hopper naar streken kommer */ } .bunn-meny a:hover { color: #3E4A5E; border-bottom-color: #3E4A5E; } /* ========================================================== SEKSJON 3-6 PAA MINDRE SKJERMER ========================================================== */ @media (max-width: 820px) { .kraft-rad { grid-template-columns: 1fr; gap: 2.2rem; } .baand { padding: 3rem 1.2rem; } .baand-utsagn { max-width: 100%; } .bunn { padding: 2rem 1.5rem; } } /* ========================================================== MOTTOET ========================================================== */ /* Latin i kursiv er gammel setterskikk: det signaliserer at ordene er paa et annet spraak, foer leseren rekker aa lure. Litt sperring gjoer at de to leddene leses som ett uttrykk og ikke som fire loesrevne ord. */ .motto { font-style: italic; letter-spacing: .015em; font-size: clamp(1.5rem, 2.3vw, 2rem); } /* Oversettelsen staar naermere mottoet enn resten av teksten, saa oeyet knytter de to sammen. */ .ramme .ingress { margin-bottom: 1.7rem; } .ramme .ingress i { color: var(--brod); } /* ========================================================== FRISTEN 1.1.2027 OG PILOT (19.09.2026) Skiferfargene fra resten av siden. Gullet fra skjermbildet er ikke tatt med: det er #C9A24A, som ble tatt ut 13.09.2026. Unntaket er pilot-blokken, som bruker #CA8A04 etter oensket. ========================================================== */ .frist-panel { max-width: 900px; margin: 0 auto; padding: 2.6rem 2.8rem 2.2rem; background: #2B323A; color: #F4F5F7; /* 8px og en svak skygge (var 4px, ingen skygge) - samme haandtak som .mork-boks, saa de moerke boksene paa siden leser som ETT kortsystem og ikke som flere ulike stiler (21.09.2026). */ border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 25, 33, .16); } .frist-etikett { margin: 0 0 1rem; font: 600 .78rem/1 var(--brodskrift); letter-spacing: .14em; text-transform: uppercase; color: #c4c6c8; } .frist-dato { margin: 0 0 .5rem; font: 500 clamp(2.4rem, 5vw, 3.4rem)/1.05 var(--antikva); color: #FFFFFF; } .seksjon .frist-panel h2 { margin: 0 0 1.3rem; color: #FFFFFF; font-weight: 600; } .frist-liste { margin: 0 0 1.4rem; padding-left: 1.2rem; } .frist-liste li { margin: .45rem 0; font-size: 1.05rem; line-height: 1.5; } .frist-liste b { color: #FFFFFF; font-weight: 600; } .frist-tekst { margin: 0 0 1.4rem; color: #E2E8F0; line-height: 1.6; max-width: 62ch; } .frist-kilde { margin: 0; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .88rem; line-height: 1.55; color: #c4c6c8; } .pilot { background: #2B323A; color: #E2E8F0; } .pilot-boks { max-width: 760px; margin: 0 auto; text-align: center; } .pilot-etikett { margin: 0 0 .8rem; font: 600 .78rem/1 var(--brodskrift); letter-spacing: .14em; text-transform: uppercase; color: #c4c6c8; } .seksjon .pilot-boks h2 { color: #CA8A04; margin-bottom: 1.2rem; } .pilot-boks p { line-height: 1.65; } .pilot-boks .pilot-liten { font-size: .92rem; color: #c4c6c8; } .pilot-knapp { display: inline-block; margin-top: 1.4rem; padding: .95rem 2.3rem; border-radius: 999px; background: #CA8A04; color: #1c1f23; font-weight: 600; font-size: 1.02rem; text-decoration: none; transition: background .18s ease; } .pilot-knapp:hover { background: #CA8A04; box-shadow: 0 0 0 3px rgba(202,138,4,.35); } .pilot-knapp:focus-visible { outline: 3px solid #F4F5F7; outline-offset: 3px; } @media (max-width: 820px) { .frist-panel { padding: 1.8rem 1.3rem 1.6rem; } } /* HVIT I HEROEN (29.09.2026, paa oenske): «en skarp hvit knapp med moerk tekst» i stedet for den gule. Pilotblokken lenger ned beholder den gule knappen. Kontrast #1C1F23 paa #F4F5F7: over 15. */ .pilot-knapp-hero { margin-top: 1.6rem; background: #F4F5F7; color: #1C1F23; border-radius: 8px; padding: 1rem 2.1rem; letter-spacing: .02em; box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .35), 0 0 28px rgba(148, 163, 184, .22); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .pilot-knapp-hero:hover { background: #FFFFFF; transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .6), 0 0 36px rgba(148, 163, 184, .32); } @media (prefers-reduced-motion: reduce) { .pilot-knapp-hero, .pilot-knapp-hero:hover { transition: none; transform: none; } } /* ========================================================== SKISSEOPPSETTET (20.09.2026) To spalter med mørk boks til høyre, prisene i tabell, og «les mer» i samme oransje som pilotknappen (#CA8A04). ========================================================== */ .to-kol { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: start; max-width: 1180px; margin: 0 auto; } .to-kol .smal { max-width: none; margin: 0; } .mork-boks { background: #2B323A; color: #E2E8F0; padding: 2.2rem 2.4rem; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 25, 33, .16); } .seksjon .mork-boks h2 { color: #FFFFFF; font-size: clamp(1.4rem, 2vw, 1.75rem); margin: 0 0 1.2rem; } .mork-boks h3 { margin: 1.3rem 0 .35rem; color: #FFFFFF; font: 600 1rem/1.3 var(--brodskrift); } .mork-boks p { margin: 0 0 .8rem; line-height: 1.6; font-size: .97rem; } .frist-boks .frist-etikett { margin: 0 0 .9rem; font-size: 1rem; color: #c4c6c8; } .frist-boks .frist-liste li { font-size: 1rem; } .frist-boks .frist-kilde { margin: 1.2rem 0 0; padding-top: 1rem; } .etikett { margin: 0 0 .7rem; font: 600 .78rem/1 var(--brodskrift); letter-spacing: .14em; text-transform: uppercase; color: #5c6673; } .tid-venstre h2 { margin-bottom: 1rem; } .tid-venstre > p { line-height: 1.65; } .pris-tabell { width: 100%; border-collapse: collapse; margin-top: 1.4rem; } .pris-tabell th, .pris-tabell td { padding: .95rem .8rem; border-top: 1px solid var(--ramme-strek); text-align: left; font-weight: 400; font-size: .98rem; } .pris-tabell td { text-align: right; white-space: nowrap; font-weight: 600; color: #2B323A; } .pris-tabell th { color: #3E4A5E; } .pris-tabell tr:last-child th, .pris-tabell tr:last-child td { border-bottom: 1px solid var(--ramme-strek); } .pris-tabell tr.sum th, .pris-tabell tr.sum td { background: #F1F5F9; font-weight: 600; font-size: 1.05rem; } .pris-note { margin-top: 1.2rem; font-size: .88rem; line-height: 1.6; color: #5c6673; } /* «LES MER» I SAMME ORANSJE SOM PILOTKNAPPEN. På mørk boks: 4,4 mot #2B323A. På hvit bunn er #CA8A04 bare 2,94 (målt 20.09.2026), under selv 3,0-kravet for stor tekst. Teksten er derfor gjort STOR og FET for å hjelpe, men kontrasten er IKKE godkjent på hvit bunn. */ .les-mer-lenke { display: inline-block; margin-top: 1.4rem; color: #CA8A04; font-weight: 600; font-size: 1.15rem; text-decoration: none; border-bottom: 2px solid transparent; } .les-mer-lenke:hover, .les-mer-lenke:focus-visible { border-bottom-color: #CA8A04; } .les-mer-lenke:focus-visible { outline: 3px solid #F4F5F7; outline-offset: 4px; } /* NAVY, IKKE ORANSJE (21.09.2026, rettet). Sto paa #CA8A04, samme oransje som pilotknappen - men denne «Les mer»-pilen ligger i .seksjon, altsaa paa HVIT bunn, der oransjen selv er maalt til 2,94 (kommentaren over .les-mer-lenke, 20.09.2026) - under selv det lave 3,0-kravet for stor tekst. Oransjen er riktig BARE paa moerk bunn (.les-mer-lenke i frist-boksen, som beholder den). Navy er allerede sidens vanlige lenkefarge paa lys bunn (samme som .les-mer > summary lenger opp i fila, foer «SKISSEOPPSETTET»-seksjonen definerte sin egen, oransje versjon for akkurat denne detalj-visningen). */ .seksjon .les-mer > summary { color: var(--navy); font-size: 1.2rem; font-weight: 600; } .seksjon .les-mer > summary::before { border-right-color: var(--navy); border-bottom-color: var(--navy); } .seksjon .les-mer > summary:focus-visible { outline-color: var(--navy); } @media (max-width: 900px) { .to-kol { grid-template-columns: 1fr; gap: 2rem; } .mork-boks { padding: 1.6rem 1.3rem; } } /* ========================================================== LOVENDRINGSTABELLEN ========================================================== SAMLET HIT FRA design-endring/prove-farger.css (21.09.2026). Disse klassene fantes IKKE andre steder i stilarket - hele «Lovendringen»-seksjonen sto altsaa uten stil den dagen proevefila ble tatt bort, om den ikke var flyttet hit foerst. FIRKANTEN FORAN «Hjemmel» OG «Til sammenligning» VAR ROED-ORANSJE (#C2410C), en TREDJE aksentfarge ved siden av pilotknappens gule og sidens skiferblaa - ingen forklarte hvorfor, og den fantes ingen andre steder paa siden. Byttet til skiferblaa, samme farge som resten av sidens lenker og tall. */ .lov-hode { max-width: 52rem; } .lov-etikett { margin: 0 0 .6rem; color: var(--navy); font: 600 .78rem/1.3 var(--brodskrift); text-transform: uppercase; letter-spacing: .12em; } .lov-hode h2 { margin: 0 0 .8rem; } .lov-hode p:last-child { margin: 0; } .lovtabell { width: 100%; border-collapse: collapse; text-align: left; margin-top: 1.2rem; font-size: .94rem; line-height: 1.55; } .lovtabell thead th { padding: .7rem .9rem; border-bottom: 2px solid var(--navy); color: var(--navy); font: 600 .78rem/1.3 var(--brodskrift); text-transform: uppercase; letter-spacing: .09em; } .lovtabell tbody th { padding: .85rem .9rem; border-bottom: 1px solid var(--ramme-strek); color: var(--navy); font: 600 .94rem var(--brodskrift); text-align: left; vertical-align: top; white-space: nowrap; width: 34%; } .lovtabell tbody td { padding: .85rem .9rem; border-bottom: 1px solid var(--ramme-strek); color: var(--brod); vertical-align: top; } .lovtabell tbody tr:last-child th, .lovtabell tbody tr:last-child td { border-bottom: 0; } .lovtabell-kilde { margin: 1rem 0 0; color: var(--navy); font: 600 .88rem/1.5 var(--brodskrift); } @media (max-width: 700px) { .lovtabell tbody th { white-space: normal; } } /* Moerk tittelrad, som sammenligningstabellen lenger oppe paa siden - samme grep, saa de to tabellene leses som ett system. */ .lovtabell-bred { min-width: 36rem; margin-top: 0; } .lovtabell-bred thead th { background: #2B323A; color: #FFFFFF; border-bottom: 3px solid var(--navy); } .lovtabell-bred tbody tr:nth-child(even) th, .lovtabell-bred tbody tr:nth-child(even) td { background: #F1F3F5; } .lovtabell-bred tbody th { width: 30%; } .lov-bokser { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; } .lov-boks { padding: 1rem 1.2rem; border: 1px solid var(--ramme-strek); border-radius: 8px; background: #F1F3F5; } .lov-boks h3 { margin: 0 0 .4rem; color: var(--navy); font: 700 .95rem/1.3 var(--brodskrift); } .lov-boks h3::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .5rem; background: var(--navy); vertical-align: .08em; } .lov-boks p { margin: 0; font-size: .9rem; line-height: 1.6; } @media (max-width: 700px) { .lov-bokser { grid-template-columns: 1fr; } } /* ========================================================== NOEKKELTALLRADEN («9» og «7» rett under heroen) ========================================================== Ogsaa denne var bare i design-endring/prove-farger.css, hentet inn 21.09.2026. auto-fit: to spalter naar det er plass, én naar det ikke er det - bryter av seg selv under 26rem uten en egen @media-regel. */ .fakta { padding: 3.5rem; } .fakta-rad { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 2.5rem 4.5rem; } .fakta-tall { margin: 0 0 .4rem; font-family: var(--antikva); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--navy); } .fakta-punkt p:last-child { margin: 0; font-size: 1rem; line-height: 1.55; max-width: 34ch; } @media (max-width: 900px) { .fakta { padding: 2.5rem 1.5rem; } } /* ========================================================== FORSIDELAGET (29.09.2026) ========================================================== Overgangen fra heroen til tallene, den kompakte menylinjen, vinduene for «Om Revisa» og lovtabellen, og strømmen i den mørke stripen. Oppførselen står i side.js. Ingen tekst er endret. Står sist i fila og overstyrer reglene lenger opp. Fjernes blokken, går siden tilbake til slik den var – bortsett fra at side.js fortsatt flytter innholdet inn i vinduene; fjern da også