/* ========================================================================== WEBTOGET — «Linja» design system for alle undersider Hallmark · pre-emit critique: P5 H4 E4 S4 R5 V4 Samme identitet som forsiden: mørk flate, lilla signal, Syne/Manrope, IBM Plex Mono-etiketter, piller, hårlinjer. Erstatter theme.css + site.css. Lastes SIST i slik at den vinner over eldre inline-stiler. ========================================================================== */ /* Ikke-tematiske tokens — like i begge temaer. */ :root { --radius: 14px; --wrap: 1200px; --pad: clamp(1.25rem, 5vw, 3rem); --sec: clamp(4.5rem, 9vw, 8rem); --font-display: 'Syne', 'Segoe UI', Arial, sans-serif; --font-body: 'Manrope', 'Segoe UI', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'Consolas', monospace; } /* ========================================================== MØRKT — standard. Gjelder også når mangler data-theme (JS av / før FOUC-vakten rekker å kjøre). ========================================================== */ :root, :root[data-theme="dark"] { /* Linja-tokens (som forsiden) */ --bg: #09090b; --bg-raised: #131316; --bg-card: #18181b; --ink: #fafafa; --ink-soft: #a1a1aa; --ink-faint: #6b6b74; --line: rgba(255, 255, 255, 0.09); --line-soft: rgba(255, 255, 255, 0.055); --accent: #6563FC; --accent-2: #8382FF; --accent-soft: rgba(101, 99, 252, 0.12); --ontime: #4ade80; /* Flate-tokens som erstatter hardkodede verdier lenger nede. */ --nav-blur-bg: rgba(9, 9, 11, 0.82); --mnav-bg: rgba(9, 9, 11, 0.97); --overlay-scrim: rgba(0, 0, 0, 0.6); --disabled-ink: #3f3f46; --card-shadow: none; --btn-glow: 0 0 30px rgba(101, 99, 252, 0.25); --zebra: rgba(255, 255, 255, 0.02); --stop: #f87171; --stop-strong: #ef4444; --warn: #f59e0b; --surface-wash: rgba(255, 255, 255, 0.04); --surface-line: rgba(255, 255, 255, 0.08); --quote-grad: #1a1a2e; /* Eldre variabelnavn (brukes av side-spesifikke inline-stiler + cookie-consent) */ --bg-overlay: #27272a; --bg-input: #09090b; --text: #fafafa; --text-strong: #ffffff; --text-muted: #a1a1aa; --text-faint: #6b6b74; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --border-faint: rgba(255, 255, 255, 0.055); --accent-hover: #8382FF; --accent-softer: rgba(101, 99, 252, 0.05); --success: #86efac; --success-strong: #22c55e; --nav-bg: rgba(9, 9, 11, 0.82); --nav-bg-scrolled: rgba(9, 9, 11, 0.92); --nav-border: rgba(255, 255, 255, 0.055); --scrollbar-track: #09090b; --scrollbar-thumb: #2a2a2e; --scrollbar-hover: #3f3f46; --selection-bg: rgba(101, 99, 252, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --logo-filter: brightness(0) invert(1); color-scheme: dark; } /* ========================================================== LYST — opt-in. Settes av assets/theme-toggle.js og av FOUC-vakten i . Mørkt forblir merkevarens standard. To tokens snur betydning her: · --accent-2 er den LESBARE lilla. På mørkt er den lysere enn --accent, på lyst må den være mørkere (6,0:1). · --accent er FYLLFARGEN. #6563FC gir bare 4,43:1 med hvit tekst, så lyst tema bruker #5250E4 (5,8:1). ========================================================== */ :root[data-theme="light"] { --bg: #f6f6f8; --bg-raised: #fdfdfe; --bg-card: #ffffff; --ink: #16161a; --ink-soft: #55555f; --ink-faint: #6c6c78; --line: rgba(16, 16, 22, 0.12); --line-soft: rgba(16, 16, 22, 0.07); --accent: #5250E4; --accent-2: #4B49D0; --accent-soft: rgba(82, 80, 228, 0.10); --ontime: #15803d; --nav-blur-bg: rgba(255, 255, 255, 0.82); --mnav-bg: rgba(252, 252, 253, 0.98); --overlay-scrim: rgba(16, 16, 22, 0.45); --disabled-ink: #b4b4bd; --card-shadow: 0 1px 2px rgba(16, 16, 22, 0.04), 0 8px 24px -12px rgba(16, 16, 22, 0.10); --btn-glow: 0 6px 18px -6px rgba(82, 80, 228, 0.45); --zebra: rgba(16, 16, 22, 0.025); --stop: #b32020; --stop-strong: #c02626; --warn: #a35a00; --surface-wash: rgba(16, 16, 22, 0.035); --surface-line: rgba(16, 16, 22, 0.11); --quote-grad: #eceef6; --bg-overlay: #eeeef1; --bg-input: #ffffff; --text: #16161a; --text-strong: #09090b; --text-muted: #55555f; --text-faint: #6c6c78; --border: rgba(16, 16, 22, 0.12); --border-strong: rgba(16, 16, 22, 0.20); --border-faint: rgba(16, 16, 22, 0.07); --accent-hover: #4B49D0; --accent-softer: rgba(82, 80, 228, 0.05); --success: #15803d; --success-strong: #16a34a; --nav-bg: rgba(255, 255, 255, 0.82); --nav-bg-scrolled: rgba(255, 255, 255, 0.94); --nav-border: rgba(16, 16, 22, 0.07); --scrollbar-track: #ececef; --scrollbar-thumb: #d2d2d8; --scrollbar-hover: #b4b4bd; --selection-bg: rgba(82, 80, 228, 0.20); --shadow-sm: 0 1px 2px rgba(16, 16, 22, 0.06); --shadow-md: 0 6px 24px rgba(16, 16, 22, 0.08); --logo-filter: none; color-scheme: light; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; background: var(--bg) !important; color: var(--ink) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: var(--selection-bg); color: var(--ink); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg) !important; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb) !important; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover) !important; } img { max-width: 100%; } a { color: inherit; } /* Inline-SVG uten mål (pil-/hakeikoner i tekst) skal følge teksten. :where() = null spesifisitet, så alle klassebaserte størrelser vinner. */ svg:where(:not([width]):not([height])) { width: 1em; height: 1em; flex-shrink: 0; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); } :is(a, button, summary, input, textarea, select):focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; } /* ---------- typografi ---------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; } h1 { letter-spacing: -0.02em; } h1 .em { color: var(--accent-2); } .mono { font-family: var(--font-mono); } /* ---------- gamle dekorasjoner: av ---------- */ .noise::before { display: none !important; } div[class*="blur-["], div[class*="blur-3xl"], div[class*="blur-2xl"] { display: none !important; } .green-glow, [class*="green-glow"] { text-shadow: none !important; } .grid-bg { background-image: none !important; } .gradient-line { height: 1px !important; background: var(--line-soft) !important; opacity: 1 !important; border: 0 !important; } /* ========================================================== NAVIGASJON (Linja-header, samme som forsiden) ========================================================== */ header.site { position: sticky; top: 0; z-index: 100; background: var(--nav-blur-bg); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .25s ease; } header.site.scrolled { border-bottom-color: var(--line-soft); } .navbar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 78px; } .brand { display: inline-flex; align-items: center; text-decoration: none; } .brand img { height: 52px; width: auto; filter: var(--logo-filter); opacity: .92; display: block; } .nav-links { display: flex; align-items: center; gap: 1.9rem; } .nav-links a:not(.btn) { font-size: .9rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .nav-links a:not(.btn):hover { color: var(--ink); border-bottom-color: var(--accent); } .nav-links a.active { color: var(--ink); border-bottom-color: var(--accent); } .nav-links .btn { padding: .68rem 1.25rem; font-size: .82rem; } .burger { display: none; flex-direction: column; gap: 5px; padding: .6rem; background: none; border: none; cursor: pointer; } .burger span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform .3s ease, opacity .3s ease; } .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.open span:nth-child(2) { opacity: 0; } .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* !important: enkelte eldre inline-skript maler inline-stiler på første