/* css/base.css — palett, typografi, reset Aesthetic: analytisk editorial — varmt mørkt papir, kobber-aksenter, Fraunces display + IBM Plex Sans body. Høy kontrast gjennomgående. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root { /* Surface — varmt papir-mørkt, ikke sterilt navy */ --bg: #14110e; /* dypeste — kanvas */ --bg-1: #1c1915; /* seksjons-surface */ --bg-2: #252117; /* kort/panel */ --bg-3: #2f2a1f; /* hevet (hover) */ --bg-inset: #0e0c09; /* inset (bar, input) */ /* Ink — off-white med varme, sekundær høyt kontrast */ --ink: #f5efe0; /* primærtekst (14.2:1 mot --bg) */ --ink-2: #d4c9ae; /* sekundær (9.1:1) */ --ink-3: #a89970; /* tertiær, labels (5.4:1 — fortsatt lesbar) */ --ink-mute: #756950; /* kun for dekor, aldri for data */ /* Linjer/regler */ --rule: #4a3f2c; --rule-soft: #332d20; /* Aksenter */ --accent: #d4845a; /* kobber/sienna — varm, nordisk */ --accent-2: #6b8ca3; /* stålblå — sekundær */ --accent-ink: #14110e; /* tekst på aksent-bakgrunn */ /* Dimensjonsfarger — fire distinkte identiteter */ --dim-avail: #8fbf9f; /* salvie-grønn: kontinuitet */ --dim-cost: #d4a054; /* dempet gull: verdi */ --dim-patch: #c97064; /* terrakotta: sikkerhet/hast */ --dim-compl: #a088b8; /* støvete lavendel: jus/formalitet */ /* Status */ --ok: #8fbf9f; --warn: #d4a054; --bad: #c97064; --crit: #b44a45; /* Effekter */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4); --shadow-lg: 0 16px 48px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4); --shadow-inset:inset 0 1px 0 rgba(255,240,210,0.04); /* Rytme */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 14px; /* Typografi */ --font-display: 'Fraunces', 'Iowan Old Style', 'Charter', Georgia, serif; --font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', 'Menlo', monospace; } /* ============================================================ LYST TEMA — varmt papir, dempet blekk, samme aksent-karakter. Aktiveres via (settes av js/theme.js). Kontraster validert: ink på bg ≥ 12:1, ink-2 ≥ 8:1, ink-3 ≥ 4.6:1. ============================================================ */ [data-theme="light"] { /* Surface — kremhvitt, varm papir */ --bg: #faf6ec; --bg-1: #f3ede0; --bg-2: #ece5d3; --bg-3: #e2d9c3; --bg-inset: #ffffff; /* Ink — mørk kaffe, ikke rent svart. Kontraster validert mot --bg (#faf6ec): ink 14.5:1, ink-2 10.2:1, ink-3 5.8:1, ink-mute 3.4:1 (kun for dekor). */ --ink: #1c1915; --ink-2: #362f1f; --ink-3: #544725; --ink-mute: #8a7a50; /* Linjer */ --rule: #c9bfa3; --rule-soft: #e0d7ba; /* Aksenter (kobber fungerer godt på lys) */ --accent: #b85c2a; /* litt mørkere kobber for kontrast mot lys bg */ --accent-2: #4a7086; --accent-ink: #ffffff; /* hvit tekst på kobber-bakgrunn */ /* Dimensjonsfarger — litt mørkere enn mørkt-tema for kontrast */ --dim-avail: #4a8560; --dim-cost: #a07220; --dim-patch: #a84030; --dim-compl: #6b4a8f; /* Status */ --ok: #4a8560; --warn: #a07220; --bad: #a84030; --crit: #7d1f1b; /* Skygger — lysere, mindre dramatiske på lys bg */ --shadow-sm: 0 1px 2px rgba(60,40,20,0.10); --shadow-md: 0 4px 12px rgba(60,40,20,0.08), 0 1px 2px rgba(60,40,20,0.10); --shadow-lg: 0 16px 48px rgba(60,40,20,0.14), 0 2px 6px rgba(60,40,20,0.10); --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.6); } [data-theme="light"] html, html[data-theme="light"] { background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184,92,42,0.05), transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(74,112,134,0.04), transparent 60%); } /* Reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { background: var(--bg); /* Subtil papir-tekstur via radial gradient — nesten umerkelig men gir varme */ background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,132,90,0.04), transparent 60%), radial-gradient(ellipse 60% 40% at 100% 100%, rgba(107,140,163,0.03), transparent 60%); background-attachment: fixed; color: var(--ink); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100dvh; font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-feature-settings: 'ss01', 'cv05', 'cv11'; } /* Typografisk hierarki — display-serif for gravitas */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); font-variation-settings: "opsz" 14; } h1 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; font-variation-settings: "opsz" 144, "SOFT" 50; } h2 { font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); font-family: var(--font-body); } h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.005em; font-variation-settings: "opsz" 24; } h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-family: var(--font-body); } p { color: var(--ink-2); } small { color: var(--ink-3); font-size: 12px; } strong { color: var(--ink); font-weight: 600; } em { font-style: italic; color: var(--ink); } /* Lenker — underlinjet på hover, aldri bare farge */ a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease; } a:hover { border-bottom-color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Numeriske tabular tall der de er data */ .num, .value, .kpi .val, .dim-kpi .value, td.num, th.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum', 'lnum'; } /* Header — editorial masthead, scrolls with page */ header { background: linear-gradient(180deg, var(--bg-1) 0%, transparent 100%); border-bottom: 1px solid var(--rule); padding: 22px 32px 18px; } header h1 { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; font-variation-settings: "opsz" 48, "SOFT" 30; } header p { margin-top: 4px; font-size: 13px; color: var(--ink-3); font-family: var(--font-body); letter-spacing: 0.02em; } header nav { margin-top: 12px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; display: flex; gap: 22px; flex-wrap: wrap; } header nav a { color: var(--accent-2); font-weight: 500; } header nav a:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Utility */ .note { font-size: 12px; color: var(--ink-3); line-height: 1.6; } .muted { color: var(--ink-3); } .eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } /* Selection */ ::selection { background: var(--accent); color: var(--accent-ink); } /* Scrollbar — subtil warm */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 5px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); } ::-webkit-scrollbar-corner { background: var(--bg); } /* Global input-fokus: varm aura, konsistent med aksent */ input:not([type="checkbox"]):not([type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(212, 132, 90, 0.14); } /* Reduser motion-preferanse respekteres */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }