/* Task 715 (Johan) - user-picked colour themes over the MaxWealth look. HOW IT WORKS: carries data-mw-theme="" for every theme except the default. Light (Design 21, maxwealth.css) is the default and gets NO attribute, so nothing in this file touches it - light is byte-for-byte what it was. The theme is stored server-side (dbo.ToolState Tool='theme', Tools\UiTheme.cs; task 647: nothing kept in the browser) and written by the layout, so there is no flash and no script. ADDING A THEME: add its name to UiTheme.All, then one palette block (tokens) below plus any overrides for the few places maxwealth.css / mwcalc.css hard-code a light colour. Colours only - never layout. Loaded after maxwealth.css, and only when the brand is themed. */ /* ---------------------------------------------------------------- Dark: Design 04 "Dark Fintech" -- Palette from /designs/design-04.html: bg #0B0F17, bg2 #0F1520, card #131A27, line #222C3D, txt #E8ECF4, mut #94A0B4, lime #C6FF3D, teal #2DD4BF, coral #FF7A6B, grey #5B6577. */ :root[data-theme="maxwealth"][data-mw-theme="dark"] { color-scheme: dark; --mw-accent: #C6FF3D; --cream: #0B0F17; --cream2: #0F1520; --sand: #222C3D; --terra: #C6FF3D; --terra-d: #A8E22E; --ochre: #F5B544; --ochre-d: #F5B544; --indigo: #2DD4BF; --indigo-d: #14B8A6; --mw-ink: #2A3446; --mw-ink2: #94A0B4; --plane: #0B0F17; --surface: #131A27; --raised: #182132; --wash: #0F1520; --ink: #E8ECF4; --ink-2: #C3CBD8; --muted: #94A0B4; --border: #222C3D; --grid: #1B2333; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35); --s1: #C6FF3D; --s1-ink: #0B0F17; --s1-wash: rgba(198, 255, 61, .12); --s2: #2DD4BF; --s2-wash: rgba(45, 212, 191, .12); --critical: #FF7A6B; --delta-good: #4ADE80; --warning: #F5B544; --warning-wash: rgba(245, 181, 68, .14); --navy: #0F1520; --navy-ink: #E8ECF4; --navy-ink-2: #C3CBD8; --navy-muted: #94A0B4; --navy-line: #222C3D; --navy-wash: rgba(255, 255, 255, .06); --line: #222C3D; /* Chart colours read by mwcalc.js (C palette) - unset in light, where its own defaults stand. */ --mwc-green: #4ADE80; --mwc-greenBg: rgba(74, 222, 128, .14); --mwc-red: #FF7A6B; --mwc-redBg: rgba(255, 122, 107, .14); --mwc-ink: #E8ECF4; --mwc-ink2: #94A0B4; --mwc-grid: #222C3D; --mwc-indigo: #2DD4BF; --mwc-amber: #FACC15; --mwc-terra: #FB923C; } /* Surfaces that maxwealth.css / mwcalc.css paint white or cream directly. */ [data-theme="maxwealth"][data-mw-theme="dark"] .tool-exec-body, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-banner, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card, [data-theme="maxwealth"][data-mw-theme="dark"] .board .tile, [data-theme="maxwealth"][data-mw-theme="dark"] .board .card, [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-out, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-close, [data-theme="maxwealth"][data-mw-theme="dark"] .mwi-add, [data-theme="maxwealth"][data-mw-theme="dark"] .mwi-del, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-src, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-why-dlg, [data-theme="maxwealth"][data-mw-theme="dark"] dialog { background: #131A27; color: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock .mw-panel, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock:not(.is-inline) .mw-panel, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock:not(.is-inline) .mw-panel-head { background: #0F1520; color: #E8ECF4; border-color: #222C3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .bc-nav { background: #0F1520; border-right-color: #222C3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .nav-item[aria-current="page"] { background: linear-gradient(90deg, rgba(198, 255, 61, .14), transparent); color: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] footer { background: #0F1520; color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] footer a { color: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .pub-head { box-shadow: 0 4px 0 #222C3D; } [data-theme="maxwealth"][data-mw-theme="dark"] input, [data-theme="maxwealth"][data-mw-theme="dark"] select, [data-theme="maxwealth"][data-mw-theme="dark"] textarea { background-color: #0F1520; color: #E8ECF4; border-color: #2A3446; } /* Text that used the ink colour, which is a border colour in dark. */ [data-theme="maxwealth"][data-mw-theme="dark"] .pub-brand, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-score, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile-value, [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-out, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-close, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-tip text { color: #E8ECF4; fill: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-key, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile-real, [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-none, [data-theme="maxwealth"][data-mw-theme="dark"] .slidechart-none, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-why-scroll td small { color: #94A0B4; } /* Lime and teal fills carry dark text, not white. */ [data-theme="maxwealth"][data-mw-theme="dark"] .btn-primary, [data-theme="maxwealth"][data-mw-theme="dark"] button[type="submit"]:not(.danger):not(.link), [data-theme="maxwealth"][data-mw-theme="dark"] .mw-adjust, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-tab, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-warn .tool-card-alert { color: #0B0F17; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-adjust, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-tab { background: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] :focus-visible { outline-color: #C6FF3D; } /* Status banners: tinted washes instead of light pastels. */ [data-theme="maxwealth"][data-mw-theme="dark"] .tool-demo, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-card-banner.is-warn, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-warn { background: rgba(245, 181, 68, .12); color: #F5D9A0; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-card-banner.is-critical, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-critical { background: rgba(255, 122, 107, .12); color: #FFC4BC; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-ok { background: rgba(74, 222, 128, .10); border-color: #2F6B47; color: #B6F2CC; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-none { background: #0F1520; border-color: #222C3D; color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-critical .tool-verdict { color: #FF7A6B; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile.is-whatif .tool-tile-label::after { background: #1B2333; color: #2DD4BF; } /* Sliders and charts. */ [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-s input::-webkit-slider-runnable-track, [data-theme="maxwealth"][data-mw-theme="dark"] .slidechart.mw-dock .slidechart-slider input[type=range]::-webkit-slider-runnable-track { background: #222C3D; box-shadow: inset 0 0 0 1px #2A3446; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-s input::-moz-range-track, [data-theme="maxwealth"][data-mw-theme="dark"] .slidechart.mw-dock .slidechart-slider input[type=range]::-moz-range-track { background: #222C3D; box-shadow: inset 0 0 0 1px #2A3446; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-s input::-webkit-slider-thumb, [data-theme="maxwealth"][data-mw-theme="dark"] .slidechart.mw-dock .slidechart-slider input[type=range]::-webkit-slider-thumb { background: #C6FF3D; border-color: #0B0F17; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-s input::-moz-range-thumb, [data-theme="maxwealth"][data-mw-theme="dark"] .slidechart.mw-dock .slidechart-slider input[type=range]::-moz-range-thumb { background: #C6FF3D; border-color: #0B0F17; } [data-theme="maxwealth"][data-mw-theme="dark"] .slidechart, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-chart { --sc-1: #C6FF3D; --sc-2: #2DD4BF; --sc-3: #FF7A6B; --sc-4: #4ADE80; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-tip-box { fill: #0B0F17; stroke: #222C3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-tip-mark { stroke: #94A0B4; } /* ================================================================ Task 718: Dark = design-04 LAYOUT ====== Johan, chat 1053: "For the dark theme, get rid of all the African stuff. We want the layout to look like design-04.html." Dark is no longer a recolour of Design 21: no Ndebele band/disc/edges, no zigzag caps, no ink frames or offset shadows, no serif. Inter + JetBrains Mono (self-hosted, CSP font-src 'self'), 20px glow-edged cards, lime buttons, design-04 rail. Every rule is scoped to the dark selector - light untouched. Glow edge = design-04 .glow, done as a padding-box/border-box background pair (no pseudo-element needed). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght.woff2") format("woff2"); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono-latin-wght.woff2") format("woff2"); } :root[data-theme="maxwealth"][data-mw-theme="dark"] { --serif: Inter, system-ui, sans-serif; --sans: Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --ochre: #94A0B4; --ochre-d: #94A0B4; --mw-ink: #222C3D; --ndebele: none; --zig: none; --glow: linear-gradient(135deg, #C6FF3D88, #2DD4BF22 40%, #222C3D 60%, #2DD4BF66); --card-bg: linear-gradient(#131A27, #131A27) padding-box; --shadow: none; } [data-theme="maxwealth"][data-mw-theme="dark"] body { font-family: var(--sans); -webkit-font-smoothing: antialiased; } [data-theme="maxwealth"][data-mw-theme="dark"] h1, [data-theme="maxwealth"][data-mw-theme="dark"] h2, [data-theme="maxwealth"][data-mw-theme="dark"] h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-band { display: none; } /* Rail: design-04 .side - bg2, hairline edge, muted links, lime gradient + inset bar on the current page. */ [data-theme="maxwealth"][data-mw-theme="dark"] .bc-nav { background: #0F1520; border-right: 1px solid #222C3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .bc-nav .nav-heading { font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #8792A5; } [data-theme="maxwealth"][data-mw-theme="dark"] .nav-item { color: #94A0B4; border-radius: 10px; } [data-theme="maxwealth"][data-mw-theme="dark"] .nav-item:hover { background: #161E2C; color: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] .nav-item[aria-current="page"] { background: linear-gradient(90deg, #C6FF3D1f, transparent); color: #C6FF3D; font-weight: 600; box-shadow: inset 2px 0 0 #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .nav-item[aria-current="page"] .nav-ico { color: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .nav-item[aria-current="page"] .nav-count { color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .bc-nav .mw-mark small, [data-theme="maxwealth"][data-mw-theme="dark"] .pub-brand .mw-mark small { color: #5B6577; } [data-theme="maxwealth"][data-mw-theme="dark"] .pub-head { background: #0B0F17d9; border-bottom: 1px solid #222C3D; box-shadow: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .pub-brand .mw-logo { --mw-accent: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] footer { background: transparent; border-top: 1px solid #222C3D; color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] footer a { color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] footer a:hover { color: #C6FF3D; } @media (max-width: 60rem) { [data-theme="maxwealth"][data-mw-theme="dark"] .bc-nav { border-right: 0; border-bottom: 1px solid #222C3D; } } @media (max-width: 767.98px) { [data-theme="maxwealth"][data-mw-theme="dark"] .bc-nav .mw-burger, [data-theme="maxwealth"][data-mw-theme="dark"] .pub-head .mw-burger { color: #E8ECF4; } } /* Buttons: lime, 12px radius, no ink border or offset shadow; glow on hover. */ [data-theme="maxwealth"][data-mw-theme="dark"] button, [data-theme="maxwealth"][data-mw-theme="dark"] .btn { border-radius: 12px; } [data-theme="maxwealth"][data-mw-theme="dark"] button.primary, [data-theme="maxwealth"][data-mw-theme="dark"] .btn-primary, [data-theme="maxwealth"][data-mw-theme="dark"] button[type="submit"]:not(.danger):not(.link), [data-theme="maxwealth"][data-mw-theme="dark"] .mw-adjust { background: #C6FF3D; color: #0B0F17; font-weight: 700; border: 0; box-shadow: 0 0 0 0 #C6FF3D66; transition: box-shadow .25s, transform .25s; } [data-theme="maxwealth"][data-mw-theme="dark"] button.primary:hover, [data-theme="maxwealth"][data-mw-theme="dark"] .btn-primary:hover, [data-theme="maxwealth"][data-mw-theme="dark"] button[type="submit"]:not(.danger):not(.link):hover, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-adjust:hover { background: #C6FF3D; box-shadow: 0 0 30px 0 #C6FF3D66; transform: translateY(-1px); } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-tab { background: #C6FF3D; color: #0B0F17; border: 0; box-shadow: 0 0 24px #C6FF3D44; } /* Verdict banner = design-04 score card: gauge + pill-sized verdict + headline, glow edge, no Ndebele edge. */ [data-theme="maxwealth"][data-mw-theme="dark"] .tool-banner { padding: 24px; border: 1px solid transparent; border-radius: 20px; box-shadow: none; background: var(--card-bg), var(--glow) border-box; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-banner::after { display: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-exec .tool-banner .tool-verdict { font-family: var(--sans); font-weight: 800; font-size: 30px; letter-spacing: -.02em; color: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-banner .tool-headline { font-size: 15px; color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-exec h2 { font-size: 16px; font-weight: 700; letter-spacing: 0; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-gauge-bg { display: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-gauge-track { stroke: #1E2738; stroke-linecap: round; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-gauge .tool-gauge-arc { stroke: url(#mw-gauge-grad); stroke-linecap: round; filter: drop-shadow(0 0 6px #C6FF3D55); } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-gauge-hub { fill: transparent; stroke: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-gauge-num { font-family: var(--mono); font-weight: 700; fill: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-gauge-of { font-family: var(--sans); fill: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-demo { background: repeating-linear-gradient(135deg, #121722 0 8px, #151B27 8px 16px); color: #C3CBD8; border: 1px solid #2A3446; border-left: 1px solid #2A3446; border-radius: 14px; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-demo a { color: #C6FF3D; } /* The summary body is no longer one framed box: its tiles are separate glow cards (design-04 .kpis). */ [data-theme="maxwealth"][data-mw-theme="dark"] .tool-exec-body { background: transparent; border: 0; padding: 0; box-shadow: none; border-radius: 0; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tiles { gap: 16px; margin: 16px 0 16px; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile:nth-child(n) { padding: 16px 18px; border: 1px solid transparent; border-radius: 20px; box-shadow: none; background: var(--card-bg), var(--glow) border-box; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile::before, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile:nth-child(n)::before { display: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile-label { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile-value { font-family: var(--mono); font-weight: 700; font-size: 30px; letter-spacing: -.02em; margin: 4px 0; color: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile-meaning { font-size: 12.5px; color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile.is-whatif .tool-tile-value { color: #2DD4BF; } /* "What this means": a glow card of hairline rows with glowing teal squares (design-04 .find). */ [data-theme="maxwealth"][data-mw-theme="dark"] .tool-findings { gap: 0; padding: 10px 22px; border: 1px solid transparent; border-radius: 20px; background: var(--card-bg), var(--glow) border-box; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-findings li { padding: 11px 0 11px 22px; border-top: 1px solid #222C3D; font-size: 14.5px; color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-findings li:first-child { border-top: 0; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-findings li::before, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-findings li:nth-child(n)::before { left: 0; top: 18px; width: 8px; height: 8px; border: 0; border-radius: 2px; transform: none; background: #2DD4BF; box-shadow: 0 0 8px #2DD4BF; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-findings b, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-findings strong { color: #E8ECF4; font-weight: 600; } /* Overview tool cards (design-04 .tool): glow edge, lift on hover, mono score; weak-score banners keep their tint but lose the ink frame, offset shadow and Ndebele edge. */ [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card { border: 1px solid transparent; border-radius: 20px; box-shadow: none; transition: transform .25s; background: var(--card-bg), var(--glow) border-box; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card:hover, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card:focus-visible { transform: translateY(-4px); box-shadow: none; background: var(--card-bg), linear-gradient(135deg, #C6FF3D, #2DD4BF) border-box; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card.is-demo { background: repeating-linear-gradient(135deg, #131A27 0 10px, #151C2A 10px 20px) padding-box, var(--glow) border-box; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-title { font-family: var(--sans); font-weight: 700; font-size: 19px; letter-spacing: -.01em; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-score, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-score { font-family: var(--mono); font-weight: 700; letter-spacing: -.02em; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-score { font-size: 28px; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-card-banner, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-card-banner.is-critical, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-card-banner.is-warn { border: 1px solid #2A3446; border-radius: 12px; box-shadow: none; padding: 10px 12px; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-card-banner.is-critical { border-color: #FF7A6B55; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-card-banner.is-warn { border-color: #F5B54455; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card .tool-card-banner::after { display: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner .tool-verdict { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: -.01em; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner .tool-card-alert { border-radius: 6px; font: 600 11px var(--sans); letter-spacing: .04em; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-critical .tool-card-alert { background: #FF7A6B; color: #0B0F17; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-critical .tool-score { color: #FF7A6B; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-warn .tool-score, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-warn .tool-verdict { color: #F5B544; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-card-banner.is-warn .tool-card-alert { background: #F5B544; color: #0B0F17; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-board > h2 { font-size: clamp(28px, 3vw, 38px); } /* /budget statement board: tiles and chart cards as glow cards, no zigzag caps. */ [data-theme="maxwealth"][data-mw-theme="dark"] .board .tile, [data-theme="maxwealth"][data-mw-theme="dark"] .board .card, [data-theme="maxwealth"][data-mw-theme="dark"] .board .tile:nth-child(n), [data-theme="maxwealth"][data-mw-theme="dark"] .board .card:nth-child(n) { padding-top: var(--sp-4, 16px); border: 1px solid transparent; border-radius: 20px; box-shadow: none; background: var(--card-bg), var(--glow) border-box; } [data-theme="maxwealth"][data-mw-theme="dark"] .board .tile::before, [data-theme="maxwealth"][data-mw-theme="dark"] .board .card::before, [data-theme="maxwealth"][data-mw-theme="dark"] .board .tile:nth-child(n)::before, [data-theme="maxwealth"][data-mw-theme="dark"] .board .card:nth-child(n)::before { display: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .board .tile .lbl { font-weight: 400; letter-spacing: 0; text-transform: none; color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .board .tile .val { font-family: var(--mono); font-weight: 700; font-size: 28px; letter-spacing: -.02em; color: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] .board .card header h3 { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: 0; } /* Calculator graph card + dock panel. */ [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-out { border: 1px solid transparent; border-radius: 20px; box-shadow: none; background: var(--card-bg), var(--glow) border-box; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl h3, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-title { font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock:not(.is-inline) .mw-panel { border-left: 1px solid #222C3D; box-shadow: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock:not(.is-inline) .mw-panel-head { border-bottom: 1px solid #222C3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-close { border: 1px solid #2A3446; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-close:hover { background: #161E2C; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock-overview:not(.is-inline) .mw-panel .tool-card { border-radius: 16px; } @media (min-width: 900px) { [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock .mw-split-handle { background-image: linear-gradient(#222C3D, #222C3D); } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock .mw-split-handle::after { background: #2A3446; border: 1px solid #2A3446; box-shadow: none; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock .mw-split-handle:hover, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock .mw-split-handle.is-dragging { background-image: linear-gradient(#C6FF3D, #C6FF3D); } } @media (max-width: 620px) { [data-theme="maxwealth"][data-mw-theme="dark"] .tool-banner { padding: 18px; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-exec .tool-banner .tool-verdict { font-size: 24px; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile, [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile:nth-child(n) { padding: 12px 14px; } [data-theme="maxwealth"][data-mw-theme="dark"] .tool-tile-value { font-size: 24px; } [data-theme="maxwealth"][data-mw-theme="dark"] .board .tile .val { font-size: 22px; } } /* Task 718: inline SVGs that still carry Design 21 colours as attributes (CSS beats presentation attributes). */ [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#F6EBDD" i], [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#EFDFCB" i], [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#E6CFB2" i], [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#F3D9B8" i], [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#FBE7CC" i] { fill: #1B2333; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#A3461E" i] { fill: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#1F2A5C" i] { fill: #2DD4BF; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#D99A2B" i] { fill: #5B6577; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#2A1A10" i] { fill: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [fill="#5B4334" i] { fill: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [stroke="#2A1A10" i], [data-theme="maxwealth"][data-mw-theme="dark"] svg [stroke="#5B4334" i] { stroke: #2A3446; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [stroke="#EFDFCB" i], [data-theme="maxwealth"][data-mw-theme="dark"] svg [stroke="#E6CFB2" i], [data-theme="maxwealth"][data-mw-theme="dark"] svg [stroke="#E6D6C2" i] { stroke: #1E2738; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [stroke="#A3461E" i] { stroke: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [stroke="#1F2A5C" i] { stroke: #2DD4BF; } [data-theme="maxwealth"][data-mw-theme="dark"] svg [stroke="#D99A2B" i] { stroke: #5B6577; } /* Task 718 go-live: adjust-panel leftovers mwcalc.css hard-codes in Design 21 brown/tan/rust (section labels, legend, notes, add/remove buttons, group rules, checkbox). Design-04 muted grey, hairlines and lime instead. */ [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-sec { color: #94A0B4; border-bottom-color: #222C3D; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-l, [data-theme="maxwealth"][data-mw-theme="dark"] .mwi-l, [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-chk { color: #C3CBD8; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-note, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-help { color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-s output { color: #E8ECF4; font-family: var(--mono); } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-pg { border-left-color: #222C3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-panel-help { border-top-color: #222C3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-chk input { accent-color: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-key i.gh { border-top-color: #94A0B4; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-key i.d { border-top-color: #2DD4BF; } /* Task 725: the car calculator's four lines */ [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-key i.k1 { background: #4ADE80; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-key i.k2 { background: #2DD4BF; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-key i.k3 { background: #FACC15; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-key i.k4 { border-top-color: #FB923C; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwi-add, [data-theme="maxwealth"][data-mw-theme="dark"] .mwi-del { border-color: #2A3446; color: #C6FF3D; border-radius: 12px; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwi-add:hover, [data-theme="maxwealth"][data-mw-theme="dark"] .mwi-del:hover { border-color: #C6FF3D; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock .mw-split-handle { background-image: linear-gradient(#222C3D, #222C3D); } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock .mw-split-handle:hover, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-dock .mw-split-handle.is-dragging { background-image: linear-gradient(#C6FF3D, #C6FF3D); } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-say b.g { color: #4ADE80; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-say b.r { color: #FF7A6B; } /* Task 720: solar presets in Dark. */ [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-pbtn, [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-qbtn, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-preset-card { background: #131A27; color: #E8ECF4; border-color: #3A4658; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-qbtn[aria-pressed="true"] { background: #A3461E; border-color: #A3461E; color: #fff; } [data-theme="maxwealth"][data-mw-theme="dark"] .mw-house { color: #E8ECF4; } [data-theme="maxwealth"][data-mw-theme="dark"] .mwl-pnow, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-preset-who, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-preset-sys, [data-theme="maxwealth"][data-mw-theme="dark"] .mw-preset-note { color: #94A0B4; }