/* ===================================================================================================================== PROPERTY SETTLEMENT CALCULATOR — THE PALETTE CUSTOM PROPERTIES ONLY. shared/css/shell.css holds every rule, every layout and every component; this file changes what colour the shell comes out, never how it is built. A hundred calculators each free to restyle their own buttons is a hundred stylesheets to maintain and a hundred chances to ship something broken on mobile. A hundred calculators that are the same well tested layout in different colours is one stylesheet and a palette per tool. Adding a rule here is how that stops being true. --------------------------------------------------------------------------------------------------------------- THE ACCENT: AN INDIGO VIOLET, AND THE REASON IS WHAT IS LEFT RATHER THAN WHAT IS WANTED The shell reserves GREEN for money gained and RED for money lost, on the figures. On this calculator that distinction is doing more work than on any other tool on the domain: the free result turns jade when the offer on the table is above the assessed range and amber when it is not, the scenarios page is six red cards and three green ones, and every factor chart draws one direction against the other. Brand-coloured chrome anywhere near either family would cost the reader the only cue they have. Amber is out for the same reason — it is the shell's warning colour. So the free families are blue and violet, and the domain's own sapphire, the aged care teal-blue, the CGT navy, the Division 296 petrol and the land tax slate blue have four of the blues between them. #5B4B8A it is. It also happens to be the right register for the subject: serious without being funereal, and nowhere near the colour of a warning, on a page read by somebody who is already frightened. THE ROTATION WALKS TOWARDS BLUE, NEVER TOWARDS RED. Violet, indigo, steel blue — three steps in one direction, stopping well short of anything that could be mistaken for the loss colour. Every stop clears 4.5:1 against white: #5B4B8A at 7.3:1, #45558F at 7.0:1 and #34648F at 6.3:1 — ten components put small text or an icon directly on these. Whatever appears in :root appears in [data-theme="dark"], line for line. A variable in one and not the other is a variable stuck on the wrong theme. --------------------------------------------------------------------------------------------------------------- Coded By Claude. ===================================================================================================================== */ :root { --gold: #5B4B8A; --gold-bright: #7261AB; --gold-light: #BDB2DC; --gold-text: #473A6D; --gold-tint: rgba(91, 75, 138, 0.13); --gold-tint-line: rgba(91, 75, 138, 0.32); --champagne: #EDEAF6; --primary: #5B4B8A; --accent: #5B4B8A; --accent-cyan: #7261AB; --accent-glow: rgba(91, 75, 138, 0.32); /* A sweep across two hues rather than one colour lightened and darkened. The lightest stop, #34648F, clears 6.3:1 against white, which is what the ten components that put text on this gradient need. */ --gradient-primary: linear-gradient(115deg, #443872 0%, #5B4B8A 46%, #34648F 100%); --gradient-vivid: linear-gradient(115deg, #34648F 0%, #5B4B8A 46%, #443872 100%); --border-hover: rgba(91, 75, 138, 0.52); --input-focus-glow: rgba(91, 75, 138, 0.18); /* THE ACCENT ROTATION. Everything that repeats as siblings — the numbered wizard steps, the dashboard cards' icons, the report's section numbers, the progress rail, the section marks — walks this three-step ramp. Step one is --gold above; these are steps two and three. Both -text variants clear 4.5:1 on --bg-secondary. */ --accent-2: #45558F; --accent-2-bright: #5A6DAB; --accent-2-text: #374473; --accent-2-tint: rgba(69, 85, 143, 0.13); --accent-2-line: rgba(69, 85, 143, 0.32); --accent-2-glow: rgba(69, 85, 143, 0.32); --accent-3: #34648F; --accent-3-bright: #457FB3; --accent-3-text: #2A5073; --accent-3-tint: rgba(52, 100, 143, 0.13); --accent-3-line: rgba(52, 100, 143, 0.32); --accent-3-glow: rgba(52, 100, 143, 0.32); /* THE ORBS: the three soft washes behind every page, and the largest coloured objects on the site. Same ramp, and the alphas are the shell's own. 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 add more of them. */ --ambient-1: rgba(91, 75, 138, 0.10); --ambient-2: rgba(69, 85, 143, 0.09); --ambient-3: rgba(52, 100, 143, 0.08); /* THE TWO FIXED DARK PANELS: the member home's welcome panel (.dash-hero) and page one of the report (.rp-cover). DECLARED HERE RATHER THAN LEFT ON THE SHELL'S DEFAULTS, because the shell's defaults are the domain's navy into deep teal-blue and a violet accent does not belong under a teal-blue gradient — the cover title's accented word would read as a different brand to the rest of the page it sits on. Those two panels 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. Every stop below is therefore dark, the accent clears 4.5:1 against the lightest stop of its own gradient, and the SAME accent is used on both panels because those pieces of text are one voice rather than three. The identical block is repeated in [data-theme="dark"] below. */ --dash-hero-gradient: linear-gradient(150deg, #140F2A 0%, #342A5E 46%, #23355E 100%); --dash-hero-accent: #BDB2DC; --rp-cover-gradient: linear-gradient(150deg, #140F2A 0%, #342A5E 38%, #23355E 76%, #100C22 100%); --rp-cover-accent: #BDB2DC; /* 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. ON THIS CALCULATOR SLOT 1 AND SLOT 2 MEAN SOMETHING. Every chart in js/report-charts.js draws "towards the person the report is for" in slot 0 and "towards their former partner" in slot 1, always the same way round. Changing this value changes what one side of every factor chart looks like, and nothing else. */ --chart-1: #55467F; } [data-theme="dark"] { --gold: #A99AD8; --gold-bright: #C4B9E8; --gold-light: #DCD5F0; --gold-text: #C4B9E8; --gold-tint: rgba(169, 154, 216, 0.16); --gold-tint-line: rgba(169, 154, 216, 0.36); --champagne: #E9E5F5; --primary: #A99AD8; --accent: #A99AD8; --accent-cyan: #C4B9E8; --accent-glow: rgba(169, 154, 216, 0.34); --gradient-primary: linear-gradient(115deg, #8E7FC4 0%, #A99AD8 46%, #7FA8D0 100%); --gradient-vivid: linear-gradient(115deg, #7FA8D0 0%, #A99AD8 46%, #8E7FC4 100%); --border-hover: rgba(169, 154, 216, 0.52); --input-focus-glow: rgba(169, 154, 216, 0.20); /* The rotation and the orbs, in dark. Unlike the two panel gradients 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: #93A3DC; --accent-2-bright: #B0BCE9; --accent-2-text: #B0BCE9; --accent-2-tint: rgba(147, 163, 220, 0.17); --accent-2-line: rgba(147, 163, 220, 0.36); --accent-2-glow: rgba(147, 163, 220, 0.34); --accent-3: #7FB0DC; --accent-3-bright: #A3C7E9; --accent-3-text: #A3C7E9; --accent-3-tint: rgba(127, 176, 220, 0.17); --accent-3-line: rgba(127, 176, 220, 0.36); --accent-3-glow: rgba(127, 176, 220, 0.34); --ambient-1: rgba(169, 154, 216, 0.09); --ambient-2: rgba(147, 163, 220, 0.08); --ambient-3: rgba(127, 176, 220, 0.07); /* The two fixed dark panels. Identical to 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, #140F2A 0%, #342A5E 46%, #23355E 100%); --dash-hero-accent: #BDB2DC; --rp-cover-gradient: linear-gradient(150deg, #140F2A 0%, #342A5E 38%, #23355E 76%, #100C22 100%); --rp-cover-accent: #BDB2DC; --chart-1: #A99AD8; }