/* Hverdagsverktøy — theme overrides for site-shell.css. Themes mirror the live site (hverdagsverktoy.com) and are applied via `data-theme="…"` on . Default = "carbon". Site-shell variables: --bg --surface --surface-2 --surface-3 --ink --ink2 --ink3 --ink4 --accent --accent-2 --accent-deep --line --line-2 --line-warm --pos --neg ────────────────────────────────────────────────────────── */ /* Dark group ────────────────────────────────────────────── */ html[data-theme="carbon"]{ --bg:#070605; --surface:#0f0e0d; --surface-2:#15140f; --surface-3:#1c1a16; --ink:#ecebe7; --ink2:#9d978c; --ink3:#807c73; --ink4:#48453f; --accent:#b88a5e; --accent-2:#d1a276; --accent-deep:#8a6336; --line:rgba(255,248,232,.05); --line-2:rgba(255,248,232,.09); --line-warm:rgba(184,138,94,.14); --pos:#e6e1d8; --neg:#9d978c; /* aurora atmosphere — cream over deep amber (matches inline-atmosphere pages) */ --atmo-base-top:#0F0D0A; --atmo-base-bottom:#070605; --atmo-band-a:38,60%,75%; --atmo-band-a-op:.08; --atmo-band-a-op-breathe:.10; --atmo-band-b:28,50%,55%; --atmo-band-b-op:.05; --atmo-band-b-op-breathe:.07; --atmo-cursor:38,70%,75%; --atmo-cursor-op:.04; color-scheme:dark; } /* Carbon — subtle warm glow + hairline shine on cards. A single off-center radial bloom in deep amber pools behind content, reading as faint candlelight rather than a gradient. The ::after on surfaces lays a 1px top highlight (like brushed metal catching light). */ html[data-theme="carbon"] body::before{ content:""; position:fixed; inset:0; z-index:-4; pointer-events:none; background: radial-gradient(70vw 60vh at 18% -6%, rgba(184,138,94,.07), transparent 62%), radial-gradient(60vw 50vh at 92% 110%, rgba(138,99,54,.05), transparent 60%); } html[data-theme="carbon"] .ks{ background: linear-gradient(180deg, rgba(255,236,210,.025) 0%, transparent 22%), var(--surface) !important; box-shadow: inset 0 1px 0 rgba(255,236,210,.045), 0 1px 0 rgba(0,0,0,.4), 0 20px 48px -16px rgba(0,0,0,.55) !important; } html[data-theme="dark"]{ /* Mørk-blå — same restraint as carbon, cool side */ --bg:#0b0f1a; --surface:#11172a; --surface-2:#161e36; --surface-3:#1d2746; --ink:#e9edf4; --ink2:#9aa4ba; --ink3:#7a8397; --ink4:#454c5e; --accent:#8aa3c8; --accent-2:#a3bcdf; --accent-deep:#6a87b0; --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.10); --line-warm:rgba(138,163,200,.16); --pos:#dde3ef; --neg:#9aa4ba; /* aurora atmosphere — cool blue + violet (op lifted in site-shell.css) */ --atmo-base-top:#141520; --atmo-base-bottom:#0a0b14; --atmo-band-a:222,80%,72%; --atmo-band-a-op:.09; --atmo-band-a-op-breathe:.12; --atmo-band-b:258,55%,55%; --atmo-band-b-op:.06; --atmo-band-b-op-breathe:.08; --atmo-cursor:222,80%,72%; --atmo-cursor-op:.05; color-scheme:dark; } html[data-theme="hendrix"]{ /* LIGHT 60s psychedelic — Fillmore-poster cream */ --bg:#fdf1e3; --surface:#fff8ec; --surface-2:#f8e3cc; --surface-3:#f0d2b3; --ink:#2a0d3d; /* deep aubergine — readable on cream */ --ink2:#5b2766; --ink3:#90589d; --ink4:#c39ac9; --accent:#d6248f; /* hot rose-magenta — Hendrix scarf pink */ --accent-2:#ff6a1a; /* electric orange */ --accent-deep:#7c1aa8; /* deep violet */ --line:rgba(42,13,61,.08); --line-2:rgba(42,13,61,.14); --line-warm:rgba(214,36,143,.22); --pos:#2a0d3d; --neg:#7a3d8a; color-scheme:light; } /* Hendrix — psychedelic poster glow on cream. Three offset pastel-saturated gradients (rose + tangerine + violet) bloom over the warm cream base for that vintage poster vibrance. */ html[data-theme="hendrix"] body::before{ content:""; position:fixed; inset:0; z-index:-4; pointer-events:none; background: radial-gradient(58vw 48vh at 8% 4%, rgba(214,36,143,.28), transparent 64%), radial-gradient(68vw 56vh at 96% 14%, rgba(255,160,40,.32), transparent 62%), radial-gradient(78vw 64vh at 58% 108%, rgba(124,26,168,.20), transparent 60%); filter:saturate(1.08); } /* Light-theme nav/tab backdrop so blur reads against cream */ html[data-theme="hendrix"] .nav-wrap{ background:color-mix(in srgb, var(--bg) 78%, transparent) !important; } html[data-theme="hendrix"] .tabs-wrap{ background:color-mix(in srgb, var(--bg) 72%, transparent) !important; } html[data-theme="hendrix"] .ks{ background:var(--surface) !important; box-shadow:0 1px 0 rgba(124,26,168,.04), 0 12px 32px rgba(214,36,143,.10) !important; } html[data-theme="hendrix"] .ik-input, html[data-theme="hendrix"] .ik-select{ background:var(--surface) !important; color:var(--ink) !important; } html[data-theme="hendrix"] .ik-segs{ background:var(--surface-2) !important; } html[data-theme="bw"]{ /* Sort/hvit — high contrast monochrome */ --bg:#0a0a0a; --surface:#141414; --surface-2:#1a1a1a; --surface-3:#222; --ink:#fafafa; --ink2:#aaa; --ink3:#808080; --ink4:#444; --accent:#fafafa; --accent-2:#fff; --accent-deep:#c8c8c8; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-warm:rgba(255,255,255,.14); --pos:#fafafa; --neg:#aaa; color-scheme:dark; } html[data-theme="disco"]{ /* neon nightclub */ --bg:#0d0a18; --surface:#161226; --surface-2:#1e1832; --surface-3:#2a2348; --ink:#f0e6ff; --ink2:#c4b0e0; --ink3:#8d75b2; --ink4:#5a4878; --accent:#e91e8c; --accent-2:#ff4da6; --accent-deep:#c0186e; --line:rgba(233,30,140,.10); --line-2:rgba(233,30,140,.16); --line-warm:rgba(233,30,140,.22); --pos:#e6dcff; --neg:#c4b0e0; /* aurora atmosphere — neon pink + purple */ --atmo-base-top:#0d0a18; --atmo-base-bottom:#060410; --atmo-band-a:328,70%,70%; --atmo-band-a-op:.10; --atmo-band-a-op-breathe:.13; --atmo-band-b:268,60%,58%; --atmo-band-b-op:.07; --atmo-band-b-op-breathe:.09; --atmo-cursor:328,75%,72%; --atmo-cursor-op:.05; color-scheme:dark; } html[data-theme="nordlys"]{ /* Nordlys — aurora green over an arctic night */ --bg:#050a0c; --surface:#0c1416; --surface-2:#111c1e; --surface-3:#16262a; --ink:#e6f0ec; --ink2:#93ab9f; --ink3:#6f8579; --ink4:#44524b; --accent:#4ec9a0; --accent-2:#74dcb6; --accent-deep:#2e9472; --line:rgba(190,255,232,.06); --line-2:rgba(190,255,232,.10); --line-warm:rgba(78,201,160,.16); --pos:#e6f0ec; --neg:#93ab9f; /* aurora atmosphere — luminous green band + violet counter-band */ --atmo-base-top:#08110f; --atmo-base-bottom:#050a0c; --atmo-band-a:158,64%,58%; --atmo-band-a-op:.12; --atmo-band-a-op-breathe:.16; --atmo-band-b:272,55%,60%; --atmo-band-b-op:.08; --atmo-band-b-op-breathe:.11; --atmo-cursor:158,64%,60%; --atmo-cursor-op:.05; color-scheme:dark; } /* Nordlys — twin aurora glow (green crown + violet hem) pooled behind content, plus the same hairline shine on cards as carbon. */ html[data-theme="nordlys"] body::before{ content:""; position:fixed; inset:0; z-index:-4; pointer-events:none; background: radial-gradient(72vw 60vh at 16% -8%, rgba(78,201,160,.08), transparent 62%), radial-gradient(64vw 52vh at 94% 108%, rgba(123,92,196,.06), transparent 60%); } html[data-theme="nordlys"] .ks{ background: linear-gradient(180deg, rgba(210,255,238,.022) 0%, transparent 22%), var(--surface) !important; box-shadow: inset 0 1px 0 rgba(210,255,238,.04), 0 1px 0 rgba(0,0,0,.4), 0 20px 48px -16px rgba(0,0,0,.55) !important; } /* Light group ───────────────────────────────────────────── */ html[data-theme="frost"]{ --bg:#f7f9fc; --surface:#fff; --surface-2:#f0f4fb; --surface-3:#e7eef7; --ink:#0f172a; --ink2:#3b4963; --ink3:#627194; --ink4:#a8b4ce; --accent:#4f5fe5; --accent-2:#6e7cf0; --accent-deep:#3b4ad0; --line:rgba(15,23,42,.07); --line-2:rgba(15,23,42,.12); --line-warm:rgba(79,95,229,.16); --pos:#1f2937; --neg:#64748b; color-scheme:light; } html[data-theme="glass"]{ --bg:#e8edf6; --surface:rgba(255,255,255,.62); --surface-2:rgba(255,255,255,.42); --surface-3:rgba(255,255,255,.32); --ink:#1a1a2e; --ink2:#4a5568; --ink3:#5f6981; --ink4:#aebcd0; --accent:#6875f5; --accent-2:#8b95ff; --accent-deep:#4f5bd5; --line:rgba(26,26,46,.08); --line-2:rgba(26,26,46,.14); --line-warm:rgba(104,117,245,.18); --pos:#1f2937; --neg:#64748b; color-scheme:light; } html[data-theme="pink"]{ /* Rosa */ --bg:#fffbfc; --surface:#fff; --surface-2:#fef5f8; --surface-3:#fbe9ef; --ink:#3a2030; --ink2:#6a4458; --ink3:#876a7a; --ink4:#d8b8c8; --accent:#d4748e; --accent-2:#e8a0b8; --accent-deep:#b85a74; --line:rgba(58,32,48,.07); --line-2:rgba(58,32,48,.12); --line-warm:rgba(212,116,142,.18); --pos:#3a2030; --neg:#6a4458; color-scheme:light; } /* Light themes — nav backdrop tweak so blur reads against white */ html[data-theme="frost"] .nav-wrap, html[data-theme="glass"] .nav-wrap, html[data-theme="pink"] .nav-wrap{ background:color-mix(in srgb, var(--bg) 78%, transparent) !important; } html[data-theme="frost"] .tabs-wrap, html[data-theme="glass"] .tabs-wrap, html[data-theme="pink"] .tabs-wrap{ background:color-mix(in srgb, var(--bg) 72%, transparent) !important; } html[data-theme="frost"] .ks, html[data-theme="glass"] .ks, html[data-theme="pink"] .ks{ background:var(--surface) !important; box-shadow:0 1px 0 rgba(0,0,0,.02), 0 12px 32px rgba(15,23,42,.06) !important; } html[data-theme="frost"] .ik-input, html[data-theme="glass"] .ik-input, html[data-theme="pink"] .ik-input, html[data-theme="frost"] .ik-select, html[data-theme="glass"] .ik-select, html[data-theme="pink"] .ik-select{ background:var(--surface) !important; color:var(--ink) !important; } html[data-theme="frost"] .ik-segs, html[data-theme="glass"] .ik-segs, html[data-theme="pink"] .ik-segs{ background:var(--surface-2) !important; } /* Theme + language menus, ⌘K hint, ticker — see top-chrome.js */