/* ========================================================================= * DIMMELENKE – css/base.css * ========================================================================= * ANSVAR * Design-tokens (farger, typografi, avstand, radius, skygge) + en liten * reset + grunnleggende elementstiler. * * TEMA * Alt styres av CSS-variabler på :root. Nettleseren velger mørkt eller * lyst automatisk via prefers-color-scheme. Brukeren kan overstyre med * data-tema="lys" / "mork" på (settes av app.js). * * TILGJENGELIGHET * * :focus-visible får en tydelig ring (aldri outline: none uten erstatning) * * Forkortet bevegelse respekteres via prefers-reduced-motion OG * data-bevegelse="av" på * * Farger er valgt med god kontrast mot bakgrunnen i begge temaer * ========================================================================= */ /* ---------- 1. Tokens: lys modus er grunnlaget ---------- */ :root { /* Bakgrunn og flater */ --bakgrunn: #f7f5f0; --flate: #ffffff; --flate-2: #efece5; --kant: #ddd8cd; --kant-sterk: #c7c0b2; /* Tekst. --tekst-veldig-svak er mørknet fra #83878f til #6c7078: den gamle ga 3,60:1 mot hvit og 3,31:1 mot bakgrunnen, og feilet AA-kravet på 4,5:1 (den brukes til hjelpetekstene og forklaringen på moduskortene). Nå: 4,97:1 mot hvit og 4,56:1 mot bakgrunnen - samme grå som diplom- printen (se diplom.css). Statisk sjekk regner kontrasten på nytt. */ --tekst: #1d1f22; --tekst-svak: #5c6068; --tekst-veldig-svak: #6c7078; /* Aksent (gull fra lenkene) og støttefarger */ --aksent: #a87b12; --aksent-sterk: #8a6410; --aksent-svak: rgba(217, 178, 60, 0.18); --fare: #a03123; --gronn: #2f7d52; /* Form */ --radius: 14px; --radius-liten: 9px; --radius-pille: 999px; --skygge: 0 1px 2px rgba(20, 18, 12, 0.06), 0 8px 24px rgba(20, 18, 12, 0.07); --skygge-sterk: 0 18px 50px rgba(12, 11, 8, 0.28); /* Avstand og typografi */ --liten: 0.5rem; --midt: 0.9rem; --stor: 1.4rem; --storste: 2.2rem; --maks-bredde: 860px; --skrift: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, 'Helvetica Neue', Arial, sans-serif; --skrift-tall: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } /* ---------- 2. Mørkt tema ---------- */ @media (prefers-color-scheme: dark) { :root { --bakgrunn: #0f1317; --flate: #171d23; --flate-2: #1f262e; --kant: #2b333c; --kant-sterk: #3b4550; --tekst: #eef1f4; --tekst-svak: #a6b0ba; --tekst-veldig-svak: #7d8792; --aksent: #e0bb52; --aksent-sterk: #f0d27a; --aksent-svak: rgba(224, 187, 82, 0.16); --fare: #f08a7a; --gronn: #6ecf9b; --skygge: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35); --skygge-sterk: 0 20px 60px rgba(0, 0, 0, 0.6); } } /* Manuelt valgt tema vinner over systemvalget. */ html[data-tema='lys'] { --bakgrunn: #f7f5f0; --flate: #ffffff; --flate-2: #efece5; --kant: #ddd8cd; --kant-sterk: #c7c0b2; --tekst: #1d1f22; --tekst-svak: #5c6068; --tekst-veldig-svak: #6c7078; /* samme som :root - se kontrastmerknaden der */ --aksent: #a87b12; --aksent-sterk: #8a6410; --aksent-svak: rgba(217, 178, 60, 0.18); --fare: #a03123; --gronn: #2f7d52; } html[data-tema='mork'] { --bakgrunn: #0f1317; --flate: #171d23; --flate-2: #1f262e; --kant: #2b333c; --kant-sterk: #3b4550; --tekst: #eef1f4; --tekst-svak: #a6b0ba; --tekst-veldig-svak: #7d8792; --aksent: #e0bb52; --aksent-sterk: #f0d27a; --aksent-svak: rgba(224, 187, 82, 0.16); --fare: #f08a7a; --gronn: #6ecf9b; } /* ---------- 3. Reset og grunnstiler ---------- */ *, *::before, *::after { box-sizing: border-box; } html { /* color-scheme gjør at rullefelt og skjemafelt følger temaet. */ color-scheme: light dark; scroll-behavior: smooth; /* Hindrer at iOS blåser opp teksten når man roterer telefonen. */ -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bakgrunn); color: var(--tekst); font-family: var(--skrift); font-size: 16px; line-height: 1.55; /* dvh/svh håndterer iOS-verktøylinjen som endrer høyde ved scrolling. Fallback til vh for eldre nettlesere. */ min-height: 100vh; min-height: 100dvh; /* Uten dette "henger" scrollingen på toppen av siden på iOS. */ overscroll-behavior-y: none; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--liten); font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: clamp(1.5rem, 5vw, 2rem); } h2 { font-size: clamp(1.2rem, 4vw, 1.5rem); } h3 { font-size: 1rem; } p { margin: 0 0 var(--midt); } a { color: var(--aksent-sterk); text-underline-offset: 2px; } button, input, select, textarea { font: inherit; color: inherit; } /* Tydelig fokusring for tastaturbrukere. */ :focus-visible { outline: 3px solid var(--aksent); outline-offset: 2px; border-radius: var(--radius-liten); } /* Skjult for øyet, men lesbar for skjermlesere. */ .usynlig { position: absolute; width: 1px; height: 1px ; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hopp-til-innhold { position: absolute; left: -9999px; top: 0; z-index: 50; padding: var(--midt) var(--stor); background: var(--aksent); color: #10130f; border-radius: 0 0 var(--radius) 0; font-weight: 600; } .hopp-til-innhold:focus { left: 0; } /* Respekter brukerens ønske om mindre bevegelse. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } html[data-bevegelse='av'] { scroll-behavior: auto; } html[data-bevegelse='av'] * { animation: none !important; transition: none !important; }