/* ===================================================================================================================== FAMILY PROVISION CLAIM EXPOSURE ESTIMATOR — THE PALETTE Custom properties ONLY. Every rule, layout and component lives in shared/css/shell.css and is identical for every calculator on the domain; this file changes what colour it comes out. ------------------------------------------------------------------------------------------------------------------- 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, would force 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"]. The two lists are identical, line for line. A variable in one and not the other is a variable stuck on the wrong theme. ------------------------------------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------------------------------- THE ACCENT: DEEP NAVY. Chosen for two reasons and one constraint. The constraint first: the shell reserves green for money gained and red for money lost, on the figures themselves. An accent in either family puts brand-coloured chrome beside verdict-coloured results and costs the reader the only cue they have for telling one from the other. Purples are out too — the shell's own ramp runs blue to cyan, so a purple tool inside it reads as a mistake. The two reasons: this is the sombrest subject on the domain — somebody is reading it a fortnight after a funeral — and a bright sapphire is the wrong register for it. And every other calculator here already sits in the teal-to-mid-blue part of the range, so a deep navy is far enough from all of them to be recognisable as a different tool without leaving the family. It is dark enough that white text on it clears 4.5:1 comfortably at every stop of the gradient. ------------------------------------------------------------------------------------------------------------------- Coded By Darko G. */ :root { --gold: #17335E; --gold-bright: #2E5C99; --gold-light: #8FB0DA; --gold-text: #14294A; --gold-tint: rgba(23, 51, 94, 0.13); --gold-tint-line: rgba(23, 51, 94, 0.32); --champagne: #E4EBF6; --primary: #17335E; --accent: #17335E; --accent-cyan: #2E5C99; --accent-glow: rgba(23, 51, 94, 0.32); /* A sweep across two hues, not one colour lightened and darkened. Every stop stays above 4.5:1 against --on-accent — ten components put text or an icon directly on this. */ --gradient-primary: linear-gradient(115deg, #0E2447 0%, #17335E 46%, #17516E 100%); --gradient-vivid: linear-gradient(115deg, #17516E 0%, #17335E 46%, #0E2447 100%); --border-hover: rgba(23, 51, 94, 0.52); --input-focus-glow: rgba(23, 51, 94, 0.18); /* THE ACCENT ROTATION AND THE AMBIENT ORBS. 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 is --gold; steps two and three are --accent-2* and --accent-3*. They are declared here rather than left on the shell's defaults because the default step three is a cyan, and a cyan two steps from this navy reads as a different site rather than as a ramp. The three below are one ramp walked in order: navy, slate blue, deep teal. Both -text variants clear 4.5:1 on --bg-secondary in their own theme, because both are used as text. */ --accent-2: #2A4C78; --accent-2-bright: #3E6699; --accent-2-text: #23406A; --accent-2-tint: rgba(42, 76, 120, 0.13); --accent-2-line: rgba(42, 76, 120, 0.32); --accent-2-glow: rgba(42, 76, 120, 0.32); --accent-3: #17516E; --accent-3-bright: #2A7396; --accent-3-text: #12455E; --accent-3-tint: rgba(23, 81, 110, 0.13); --accent-3-line: rgba(23, 81, 110, 0.32); --accent-3-glow: rgba(23, 81, 110, 0.32); /* The three soft washes behind every page, and the largest coloured objects on the site. Same ramp. Nothing above 0.14 has ever looked right, and the fix for a wash that reads too faint is never to make it bigger or to add more of them. */ --ambient-1: rgba(23, 51, 94, 0.10); --ambient-2: rgba(42, 76, 120, 0.09); --ambient-3: rgba(23, 81, 110, 0.08); /* THE TWO FIXED DARK PANELS: the member home's welcome panel (.dash-hero) and page one of the report (.rp-cover). They are the only surfaces on the site that are dark in BOTH themes, so their text is a fixed near-white literal in shell.css rather than a token, and these two declarations are theme-independent for the same reason — identical values in both blocks below. Four rules held to here: every stop stays dark, because these panels do NOT take --gradient-primary; the accent clears 4.5:1 against the lightest stop, since it carries the welcome eyebrow, "Unlimited", and the accented word in the cover title; the same accent value is used on both panels, because those three pieces of text are one voice; and both are repeated verbatim in the dark block. */ --dash-hero-gradient: linear-gradient(150deg, #060F1F 0%, #17335E 48%, #14465E 100%); --dash-hero-accent: #9EBEE6; --rp-cover-gradient: linear-gradient(150deg, #060F1F 0%, #17335E 38%, #14465E 76%, #050D1A 100%); --rp-cover-accent: #9EBEE6; /* Chart 1 only, so the report's primary series matches the brand. Charts 2-7 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: #17335E; } [data-theme="dark"] { --gold: #7FA8DE; --gold-bright: #A6C4EC; --gold-light: #C9DBF3; --gold-text: #A6C4EC; --gold-tint: rgba(127, 168, 222, 0.16); --gold-tint-line: rgba(127, 168, 222, 0.36); --champagne: #E4EDFA; --primary: #7FA8DE; --accent: #7FA8DE; --accent-cyan: #A6C4EC; --accent-glow: rgba(127, 168, 222, 0.34); --gradient-primary: linear-gradient(115deg, #5E8CC9 0%, #7FA8DE 46%, #6FBAD6 100%); --gradient-vivid: linear-gradient(115deg, #6FBAD6 0%, #7FA8DE 46%, #5E8CC9 100%); --border-hover: rgba(127, 168, 222, 0.52); --input-focus-glow: rgba(127, 168, 222, 0.20); /* The rotation and the orbs, in dark. Unlike the two panel tokens below, these DO flip — they sit on the themed page surfaces, so they take the luminous end of the ramp the way --gold does. */ --accent-2: #5E8CC9; --accent-2-bright: #8AAEE0; --accent-2-text: #8AAEE0; --accent-2-tint: rgba(94, 140, 201, 0.17); --accent-2-line: rgba(94, 140, 201, 0.36); --accent-2-glow: rgba(94, 140, 201, 0.34); --accent-3: #6FBAD6; --accent-3-bright: #9AD3E6; --accent-3-text: #9AD3E6; --accent-3-tint: rgba(111, 186, 214, 0.17); --accent-3-line: rgba(111, 186, 214, 0.36); --accent-3-glow: rgba(111, 186, 214, 0.34); --ambient-1: rgba(127, 168, 222, 0.09); --ambient-2: rgba(94, 140, 201, 0.08); --ambient-3: rgba(111, 186, 214, 0.07); /* The two fixed dark panels. Same values as the light block above, for the reason given there: .dash-hero and .rp-cover do not change between themes, so neither do these. */ --dash-hero-gradient: linear-gradient(150deg, #060F1F 0%, #17335E 48%, #14465E 100%); --dash-hero-accent: #9EBEE6; --rp-cover-gradient: linear-gradient(150deg, #060F1F 0%, #17335E 38%, #14465E 76%, #050D1A 100%); --rp-cover-accent: #9EBEE6; --chart-1: #739aef; }