/* ===================================================================================================================== SMALL BUSINESS CGT — THE PALETTE CUSTOM PROPERTIES ONLY. shared/css/shell.css holds every rule, every layout and every component and is identical for every calculator on the domain; this file changes what colour it comes out, never how it is built. --------------------------------------------------------------------------------------------------------------- THE RULE THIS FILE MUST OBEY: ONLY THE ACCENT FAMILY, AND ALWAYS IN BOTH BLOCKS. shell.css declares its palette twice — once on :root for light, once on [data-theme="dark"] for dark. Both are specificity 0-1-0, so the dark block wins purely by coming later in the file. This file loads AFTER shell.css. So the moment it names a variable on :root, that declaration is later still and beats shell.css's DARK value for the same variable. Naming --bg-primary here, even with a perfectly sensible light value, therefore forces the light background to win in dark mode. Two consequences, and neither is optional: 1. Only override what genuinely differs between calculators — the accent family below. Backgrounds, text, borders and shadows are the shell's and are already themed correctly. Leave them alone. 2. Whatever appears in :root MUST also appear in [data-theme="dark"], line for line. A variable in one and not the other is a variable stuck on the wrong theme. --------------------------------------------------------------------------------------------------------------- THE ACCENT: DEEP NAVY. The shell reserves green for money gained and red for money lost, on the figures themselves — and on a page that spends its whole time saying "this combination leaves you more and that one leaves you less", losing that cue would cost the reader the only thing telling them which is which. So no green and no red. Purple is out for a different reason: the shell's own ramp runs blue to cyan, and a purple tool inside it looks like a mistake rather than a decision. What is left is the blue family, and this calculator takes the deep, unhurried end of it. The domain's own sapphire (#1E5FD8) is bright and the first calculator on the domain took the teal side of it (#0A7AAF), so a third bright blue would have read as either of the other two. A navy this deep reads as the ledger rather than the pitch, which is the right register for somebody working out what a return is going to say. Coded By Darko G. ===================================================================================================================== */ :root { --gold: #1D4E89; --gold-bright: #2F70BE; --gold-light: #86AFDD; --gold-text: #17406F; --gold-tint: rgba(29, 78, 137, 0.13); --gold-tint-line: rgba(29, 78, 137, 0.32); --champagne: #E3EDF8; --primary: #1D4E89; --accent: #1D4E89; --accent-cyan: #2F70BE; --accent-glow: rgba(29, 78, 137, 0.32); /* A sweep across two hues, not one colour lightened and darkened — and it lands on the domain's sapphire at the far end, so this calculator reads as part of the family rather than a separate site. Every stop clears 4.5:1 against --on-accent, because components put text and icons directly on this. */ --gradient-primary: linear-gradient(115deg, #14375F 0%, #1D4E89 46%, #1E5FD8 100%); --gradient-vivid: linear-gradient(115deg, #1D4E89 0%, #1E5FD8 46%, #123FA8 100%); --border-hover: rgba(29, 78, 137, 0.52); --input-focus-glow: rgba(29, 78, 137, 0.18); /* THE ACCENT ROTATION — steps two and three. Everything that repeats as siblings — numbered steps, the dashboard cards' icons, report section numbers, the progress rail, the section marks — walks a three-step ramp, step one being --gold. The shell's defaults are royal, deep blue, then a cyan; against this navy the first two of those are close enough to the accent that the rotation would read as one colour with a stutter in it. So it runs the other way: this tool's navy, then the domain's royal sapphire, then a teal-blue that is plainly a third thing. Both -text variants are used AS TEXT on --bg-secondary and clear 4.5:1 there. */ --accent-2: #1E5FD8; --accent-2-bright: #2F70E8; --accent-2-text: #1A4BB0; --accent-2-tint: rgba(30, 95, 216, 0.13); --accent-2-line: rgba(30, 95, 216, 0.32); --accent-2-glow: rgba(30, 95, 216, 0.32); --accent-3: #0A7AAF; --accent-3-bright: #12A5DE; --accent-3-text: #096B99; --accent-3-tint: rgba(10, 122, 175, 0.13); --accent-3-line: rgba(10, 122, 175, 0.32); --accent-3-glow: rgba(10, 122, 175, 0.32); /* THE AMBIENT ORBS — the three soft washes behind every page. Leading with this calculator's navy, same three positions and the same ramp as above. The alphas are NOT raised from the shell's. Its note is explicit that nothing above 0.14 has ever looked right and that the way to make these stronger is not to make them bigger. */ --ambient-1: rgba(29, 78, 137, 0.10); --ambient-2: rgba(30, 95, 216, 0.09); --ambient-3: rgba(10, 122, 175, 0.08); /* THE TWO FIXED DARK PANELS: the member home's welcome panel (.dash-hero) and page one of the report (.rp-cover). Both are dark in BOTH themes — their text is a near-white literal in shell.css, not a token — so all four of these are declared identically in the two blocks. They are theme-independent by nature, and this file's rule (everything on :root also on [data-theme="dark"]) is kept literally rather than reasoned around. Near-black, then this calculator's navy as the dominant mid stop, then the domain's sapphire at the far end — the same construction as --gradient-primary above, rebuilt dark. Every stop stays dark enough to carry the panels' fixed #E9EFF9. --panel-glow-a/b are deliberately NOT overridden. The shell's blooms are a cyan and a sapphire, which is already inside this accent family. */ --dash-hero-gradient: linear-gradient(150deg, #060D18 0%, #12385F 46%, #1A3F86 100%); --dash-hero-accent: #9DC4EE; --rp-cover-gradient: linear-gradient(150deg, #060D18 0%, #12385F 38%, #1A3F86 76%, #050B14 100%); --rp-cover-accent: #9DC4EE; /* Chart 1 only, so the report's primary series matches the brand. Charts 2-8 are held in common across every calculator on purpose: they are chosen to stay distinguishable from one another and in greyscale, and re-picking them per tool would quietly break that. */ --chart-1: #1d4e89; } [data-theme="dark"] { --gold: #6FA8E8; --gold-bright: #9AC4F4; --gold-light: #BEDBFA; --gold-text: #9AC4F4; --gold-tint: rgba(111, 168, 232, 0.17); --gold-tint-line: rgba(111, 168, 232, 0.36); --champagne: #DCEBFB; --primary: #6FA8E8; --accent: #6FA8E8; --accent-cyan: #9AC4F4; --accent-glow: rgba(111, 168, 232, 0.34); --gradient-primary: linear-gradient(115deg, #4A85C8 0%, #6FA8E8 46%, #6BA8FF 100%); --gradient-vivid: linear-gradient(115deg, #6FA8E8 0%, #6BA8FF 46%, #4F86FF 100%); --border-hover: rgba(111, 168, 232, 0.52); --input-focus-glow: rgba(111, 168, 232, 0.20); /* The rotation and the orbs, in dark. Unlike the panel tokens below these DO flip: they sit on the themed page surfaces rather than on the two fixed dark panels, so they take the luminous end of the ramp the way --gold does. */ --accent-2: #6BA8FF; --accent-2-bright: #9CC5FF; --accent-2-text: #9CC5FF; --accent-2-tint: rgba(107, 168, 255, 0.17); --accent-2-line: rgba(107, 168, 255, 0.36); --accent-2-glow: rgba(107, 168, 255, 0.34); --accent-3: #38C5F5; --accent-3-bright: #7BDBFF; --accent-3-text: #7BDBFF; --accent-3-tint: rgba(56, 197, 245, 0.17); --accent-3-line: rgba(56, 197, 245, 0.36); --accent-3-glow: rgba(56, 197, 245, 0.34); --ambient-1: rgba(111, 168, 232, 0.09); --ambient-2: rgba(107, 168, 255, 0.08); --ambient-3: rgba(56, 197, 245, 0.07); /* The two fixed dark panels, identical to the light block above and for the reason given there: .dash-hero and .rp-cover are dark in both themes, so a per-theme value would repaint a surface that does not change. */ --dash-hero-gradient: linear-gradient(150deg, #060D18 0%, #12385F 46%, #1A3F86 100%); --dash-hero-accent: #9DC4EE; --rp-cover-gradient: linear-gradient(150deg, #060D18 0%, #12385F 38%, #1A3F86 76%, #050B14 100%); --rp-cover-accent: #9DC4EE; --chart-1: #6fa8e8; }