/* ========================================================================== Aiva Hub — quieter light theme variants (opt-in, Kompott stays default) Kompott ruhig: same shapes, cream + white, 1px lines Leinen: warm paper, Fraunces headings, soft shadow Fjord: cool grey, Schibsted Grotesk, lines only Set by /js/theme.js (localStorage 'hub-theme'). Load AFTER tokens.css. Strategy: 1) each theme overrides the colour tokens + theme knobs from tokens.css (--k-bw, --k-shadow, --k-radius*, --font-*); 2) the shared "quiet" block below neutralises the Kompott-only looks (area fills, coloured header, ink contours, offset shadows, press-in chips). The pastel tokens (--butter, --mint, ...) are re-used as muted *area marker* colours here: they only appear as dots / thin stripes, never as fills. ========================================================================== */ /* ---------- 1 · Kompott ruhig ---------- */ :root[data-theme="calm"] { color-scheme: light; --bg: 250 247 242; /* #FAF7F2 */ --butter: 226 177 60; /* area markers (dots / stripes) */ --mint: 104 176 139; --lilac: 157 139 214; --sky: 111 162 212; --peach: 229 139 109; --surface-900: var(--bg); --surface-800: 255 255 255; --surface-700: 246 242 235; /* #F6F2EB */ --surface-600: 237 231 222; --surface-500: 220 211 198; --surface-400: 199 188 173; --line: 226 217 204; /* soft grey-brown contour #E2D9CC */ --line-soft: 237 231 222; --line-mid: 176 165 150; /* checkboxes: >= 3:1 non-text */ --shadow-c: 60 45 30; --text-primary: 42 37 32; /* #2A2520 15:1 */ --text-secondary: 92 83 75; /* #5C534B 7.0:1 */ --text-muted: 107 99 92; /* #6B635C 5.5:1 */ --accent: 224 97 63; /* #E0613F muted coral */ --accent-hover: 232 118 90; --accent-text: 178 74 45; /* #B24A2D 5.0:1 on bg */ --accent-text-hover: 143 58 34; --on-accent: 31 27 24; /* 4.85:1 on #E0613F */ --ok: 47 138 90; --ok-text: 29 110 70; --warn: 212 145 30; --warn-text: 138 90 0; --err: 205 60 50; --err-text: 170 40 30; --info: 50 100 190; --info-text: 40 85 170; --k-radius: 18px; --k-border: 1px; --k-bw: 1px; --k-bw-sm: 1px; --k-shadow: 0 1px 2px rgb(60 45 30 / 0.05), 0 4px 14px -8px rgb(60 45 30 / 0.14); --k-shadow-sm: 0 1px 2px rgb(60 45 30 / 0.06); --k-shadow-pop: 0 12px 32px -12px rgb(60 45 30 / 0.28); } /* ---------- 2 · Leinen ---------- */ :root[data-theme="leinen"] { color-scheme: light; --bg: 245 240 230; /* #F5F0E6 */ --butter: 201 162 74; --mint: 126 158 115; --lilac: 154 136 168; --sky: 120 150 174; --peach: 201 138 110; --surface-900: var(--bg); --surface-800: 255 252 246; /* #FFFCF6 */ --surface-700: 247 242 232; --surface-600: 239 232 218; /* #EFE8DA */ --surface-500: 226 216 198; --surface-400: 207 195 174; --line: 226 216 198; /* #E2D8C6 */ --line-soft: 235 227 213; --line-mid: 168 156 140; --shadow-c: 60 40 20; --text-primary: 43 38 33; /* #2B2621 */ --text-secondary: 106 97 87;/* #6A6157 5.3:1 on bg */ --text-muted: 113 102 88; /* #716658 4.9:1 (mockup #9A8F82 is only 2.8:1) */ --accent: 185 83 44; /* #B9532C, white on it 4.8:1 */ --accent-hover: 165 72 36; --accent-text: 168 73 36; /* #A84924 */ --accent-text-hover: 135 57 27; --on-accent: 255 255 255; --ok: 79 122 58; /* #4F7A3A */ --ok-text: 72 112 52; --warn: 183 129 27; /* #B7811B */ --warn-text: 140 99 16; /* #8C6310 5.2:1 */ --err: 168 58 50; /* #A83A32 */ --err-text: 168 58 50; --info: 63 103 132; /* #3F6784 */ --info-text: 63 103 132; --k-radius: 10px; --k-radius-xl: 8px; --k-radius-lg: 6px; --k-radius-btn: 8px; --k-border: 1px; --k-bw: 1px; --k-bw-sm: 1px; --k-shadow: 0 1px 0 rgb(60 40 20 / 0.04), 0 6px 18px -10px rgb(60 40 20 / 0.18); --k-shadow-sm: 0 1px 0 rgb(60 40 20 / 0.05), 0 2px 6px -3px rgb(60 40 20 / 0.14); --k-shadow-pop: 0 14px 34px -14px rgb(60 40 20 / 0.30); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Instrument Sans', 'Nunito', sans-serif; --body-weight: 400; --display-tracking: -0.015em; } /* ---------- 3 · Fjord ---------- */ :root[data-theme="fjord"] { color-scheme: light; --bg: 242 244 246; /* #F2F4F6 */ --butter: 205 160 70; --mint: 80 150 120; --lilac: 130 120 190; --sky: 90 140 200; --peach: 215 125 95; --surface-900: var(--bg); --surface-800: 255 255 255; --surface-700: 245 247 249; --surface-600: 233 237 241; /* #E9EDF1 */ --surface-500: 220 226 232; --surface-400: 195 204 213; --line: 220 226 232; /* #DCE2E8 */ --line-soft: 230 234 238; --line-mid: 150 161 173; --shadow-c: 19 26 34; --text-primary: 19 26 34; /* #131A22 */ --text-secondary: 75 86 99; /* #4B5663 6.8:1 */ --text-muted: 94 106 119; /* #5E6A77 5.0:1 (mockup #8793A0 is 3.1:1) */ --accent: 39 83 184; /* #2753B8, white on it 7.0:1 */ --accent-hover: 31 70 160; --accent-text: 39 83 184; --accent-text-hover: 27 60 140; --on-accent: 255 255 255; --ok: 47 125 91; /* #2F7D5B */ --ok-text: 40 112 79; --warn: 183 121 31; /* #B7791F */ --warn-text: 149 102 15; /* #95660F 5.0:1 */ --err: 194 59 59; /* #C23B3B */ --err-text: 179 52 52; --info: 39 83 184; --info-text: 39 83 184; --k-radius: 6px; --k-radius-xl: 6px; --k-radius-lg: 4px; --k-radius-btn: 6px; --k-border: 1px; --k-bw: 1px; --k-bw-sm: 1px; --k-shadow: none; --k-shadow-sm: none; --k-shadow-pop: 0 10px 28px -14px rgb(19 26 34 / 0.22); /* popovers only */ --font-display: 'Schibsted Grotesk', 'Nunito', sans-serif; --font-body: 'Schibsted Grotesk', 'Nunito', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --body-weight: 400; --display-tracking: -0.02em; } /* ========================================================================== Quiet block: shared neutralisation of Kompott looks for all three variants ========================================================================== */ /* Dense data views: stay at 1px */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) [data-dense] .k-card, :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) [data-dense] .bg-surface-800.rounded-2xl.border { border-width: 1px !important; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .bg-surface-800.rounded-xl.border { border-color: rgb(var(--line)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .border-2.border-ink { border-width: 1px; } /* Dashboard tiles: white cards, no pastel areas */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #view-dashboard [data-dash-module].bg-surface-800 { background: rgb(var(--surface-800)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #view-dashboard [data-dash-module] .bg-surface-700 { background: rgb(var(--surface-700)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #view-dashboard [data-dash-module] .bg-surface-700\/50 { background: rgb(var(--surface-700) / 0.5); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #view-dashboard [data-dash-module] .hover\:bg-surface-600:hover { background: rgb(var(--surface-600)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #view-dashboard [data-dash-module] .hover\:bg-surface-700:hover { background: rgb(var(--surface-700)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #view-dashboard [data-dash-module] .border-surface-600 { border-color: rgb(var(--line-soft)); } /* Greeting hero: plain card (Leinen/Fjord refine below) */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-hero { background: rgb(var(--surface-800)); } /* Header: not coloured, thin line */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #app-header { background: rgb(var(--surface-900) / 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgb(var(--line)); } /* Sidebar navigation */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #sidebar { border-right: 1px solid rgb(var(--line)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .nav-item { border-color: transparent; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .nav-item.active { border-color: rgb(var(--line)); box-shadow: var(--k-shadow-sm); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-logo-dot { border: 0; width: 22px; height: 22px; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-dot { border: 0; width: 8px; height: 8px; border-radius: 50%; } /* Buttons, chips, badges: no press-in offset, no ink edges on fills */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-btn { font-weight: 700; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-btn:active, :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-chip:active { transform: none; box-shadow: none; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-btn-accent, :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-btn-ink { border-color: transparent; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-chip { font-weight: 700; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-chip:hover { background: rgb(var(--surface-700)); border-color: rgb(var(--line-mid)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-chip .k-swatch { border: 0; width: 10px; height: 10px; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-badge { font-weight: 700; } /* Header timer: the one accent. Stop is neutral ink instead of a 2nd loud colour */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #header-timer-widget .k-timer-run { background: rgb(var(--accent) / 0.08); border-color: rgb(var(--accent) / 0.35); box-shadow: none; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-live-dot { background: rgb(var(--accent)); border: 0; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-live-dot.paused { background: rgb(var(--warn)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-stop-btn { border-color: transparent; background: rgb(var(--text-primary)); color: rgb(var(--surface-800)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #header-timer-paused-badge { background: rgb(var(--warn) / 0.14) !important; color: rgb(var(--warn-text)); border-color: transparent; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #timer-dropdown, :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-toast { background: rgb(var(--surface-800)); box-shadow: var(--k-shadow-pop); } /* Mobile bottom nav */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #k-bottomnav { box-shadow: var(--k-shadow-pop); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #k-bottomnav a, :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #k-bottomnav button { font-weight: 700; border-radius: var(--k-radius-btn); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) #k-bottomnav .on { background: rgb(var(--accent) / 0.10); color: rgb(var(--accent-text)); border-color: transparent; } /* Shopping list */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-shop-group > .k-shop-head { background: rgb(var(--surface-700)); border-bottom: 1px solid rgb(var(--line-soft)); font-weight: 700; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-shop-row + .k-shop-row { border-top: 1px solid rgb(var(--line-soft)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-check { border: 1.5px solid rgb(var(--line-mid)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-check.on { border-color: rgb(var(--ok)); } /* Segmented control + theme picker: accent tint instead of butter */ :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-seg { box-shadow: none; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-seg button[aria-pressed="true"], :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-theme-grid button[aria-pressed="true"] { background: rgb(var(--accent) / 0.10); color: rgb(var(--accent-text)); box-shadow: none; } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-theme-grid button[aria-pressed="true"] { border-color: rgb(var(--accent)); } :root:is([data-theme="calm"], [data-theme="leinen"], [data-theme="fjord"]) .k-theme-grid button { font-weight: 700; } /* ========================================================================== Per-theme details ========================================================================== */ /* ---- Kompott ruhig: area colour only as a 4px stripe on dashboard tiles ---- */ :root[data-theme="calm"] #view-dashboard [data-dash-module].bg-surface-800 { box-shadow: inset 0 4px 0 rgb(var(--area)), var(--k-shadow); } :root[data-theme="calm"] #view-dashboard [data-dash-module="todos"]:not(#dash-deadlines-widget) { --area: var(--butter); } :root[data-theme="calm"] #view-dashboard [data-dash-module="waste"] { --area: var(--line-mid); } :root[data-theme="calm"] .k-shop-group > .k-shop-head { background: rgb(var(--surface-800)); box-shadow: inset 0 4px 0 rgb(var(--mint)); padding-top: 12px; } :root[data-theme="calm"] .nav-item.active { background: rgb(var(--surface-800)) !important; } /* ---- Leinen: paper, serif headings, greeting without a box ---- */ :root[data-theme="leinen"] :is(h1, h2, h3, h4, .font-display) { font-weight: 600 !important; } :root[data-theme="leinen"] .k-hero { background: transparent; border-color: transparent; box-shadow: none; padding-left: 0; padding-right: 0; } :root[data-theme="leinen"] #dash-greeting { font-weight: 400 !important; letter-spacing: -0.02em; } :root[data-theme="leinen"] #page-title { font-weight: 500 !important; } :root[data-theme="leinen"] .nav-item.active { border-color: transparent; background: rgb(var(--surface-800)) !important; } :root[data-theme="leinen"] .k-shop-group > .k-shop-head { background: transparent; font-family: var(--font-display); font-weight: 600; font-size: 16px; } :root[data-theme="leinen"] .k-check { border-radius: 6px; } :root[data-theme="leinen"] .k-btn, :root[data-theme="leinen"] .k-chip, :root[data-theme="leinen"] .k-badge { font-weight: 600; } :root[data-theme="leinen"] #k-bottomnav { border-radius: 16px; } /* ---- Fjord: white chrome, lines only, blue accent ---- */ :root[data-theme="fjord"] #app-header { background: rgb(var(--surface-800) / 0.96); } :root[data-theme="fjord"] #sidebar { background: rgb(var(--surface-800)); } :root[data-theme="fjord"] .k-dot { display: none; } :root[data-theme="fjord"] .k-logo-dot { width: 16px; height: 16px; border-radius: 4px; } :root[data-theme="fjord"] .nav-item.active { background: rgb(var(--accent) / 0.08) !important; color: rgb(var(--accent-text)) !important; border-color: transparent; box-shadow: none; } :root[data-theme="fjord"] .nav-item:hover { background: rgb(var(--surface-700)); } :root[data-theme="fjord"] .k-hero { border-color: rgb(var(--line)); } :root[data-theme="fjord"] .k-shop-group > .k-shop-head { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--text-muted)); } :root[data-theme="fjord"] .k-check { border-radius: 50%; } :root[data-theme="fjord"] #k-bottomnav { border-radius: 10px; } :root[data-theme="fjord"] .k-btn, :root[data-theme="fjord"] .k-chip, :root[data-theme="fjord"] .k-badge { font-weight: 600; } :root[data-theme="fjord"] #k-bottomnav { box-shadow: none; } /* Leinen: calmer navigation weights (mockup: regular text, no heavy labels) */ :root[data-theme="leinen"] .nav-item { font-weight: 500; } :root[data-theme="leinen"] .nav-item.active { font-weight: 600; } :root[data-theme="leinen"] #sidebar-nav p.font-extrabold { font-weight: 600; letter-spacing: 0.12em; } /* Aiva-Avatar statt Farbpunkt als Logo (Menü/Kopf), in allen Themes gleich */ .k-logo-dot { width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 0 !important; background: url(/icons/aiva-avatar.jpg) center / cover no-repeat !important; box-shadow: 0 0 0 2px rgb(var(--surface-900)), 0 0 0 3px rgb(var(--surface-600)); } /* Untere Leiste bündig am unteren Rand (wie native Tab-Bar), Home-Indicator-Bereich mit abgedeckt */ #k-bottomnav { left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: calc(60px + env(safe-area-inset-bottom)) !important; padding-bottom: env(safe-area-inset-bottom); border-radius: 0 !important; border-width: 1px 0 0 0 !important; box-shadow: none !important; } @media (max-width: 1023px) { .k-has-bottomnav { padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important; } }