/* ============================================================================ Monetary — design tokens ============================================================================ ONE file. Every colour, corner radius, text size and weight on the site resolves here. HOW TO CHANGE A COLOUR Edit the value in section 4 (PALETTE). Every page picks it up. You should almost never need to touch a .php file to change how the site looks. Section 4 is the raw palette — the actual ink. Section 5 is the semantic layer — what each colour is FOR. Change a palette value -> that colour changes everywhere it is used. Change a semantic value -> only that role changes (e.g. only borders). THE 2026 BLUE REHAUL The site was navy + orange, then violet + cyan on cool slate. It is now a single continuous blue ramp running from near-black to white, with soft corners and layered elevation. blue #1D57CC the primary. Buttons, active nav, stat panels, focus. cyan #1BB0E0 the secondary. Charts, positive movement, accents. slate #0E1F3E the chrome. Topbar, breadcrumb band, headings. canvas #F4F7FC the page. Cards sit on it as white rectangles. Every neutral is blue-tinted. There is no warm grey anywhere on the site, which is what lets the ramp read as one family rather than as a blue accent dropped onto a neutral shell. The ONLY orange left on the site is the logo mark itself — --brand-mark. It is deliberately excluded from every other role, and against an all-blue site it is now the single warm note. Do not reintroduce it. CORNERS Softened from the previous all-square scheme. --radius-xs / sm / md / lg now step 4 / 8 / 10 / 14px, --radius-pill is a true pill, and --radius-circle stays 50% for avatars and icon badges. To go back to square, set every radius in section 1 to 0. Nothing else needs to change. CONTEXTS The site runs two surfaces: - DARK : index chrome, login, signup, contact, verify-email, and the dark property cards inside the app. - LIGHT : the app content cards (Properties, Portfolio, Ledger, Rentals, Settings). Tokens are suffixed accordingly where a role exists in both. CONTRAST Every ink/background pair annotated below has been measured. Body and label text clears WCAG AA (4.5:1); large figures and non-text borders clear 3:1. If you edit a value, re-check the pair noted beside it. ========================================================================= */ /* ============================================================================ 1. RADIUS SCALE ---------------------------------------------------------------------------- Set every value here to 0 to return the site to the square scheme. ========================================================================= */ :root { --radius-xs: 4px; /* hairline chips, tiny swatches, focus blocks */ --radius-sm: 8px; /* inputs, buttons, small pills, table cells */ --radius-md: 10px; /* summary cards, list rows, inline panels */ --radius-lg: 14px; /* content cards, modals, hero panels */ --radius-pill: 100px; /* status chips and toggles */ --radius-circle: 50%; /* avatars, icon badges, dots, glow blobs */ /* Top-only variants, for headers and accent bars that sit flush on a panel edge. Multi-value: they expand into the full border-radius. */ --radius-top-xs: 4px 4px 0 0; --radius-top-sm: 8px 8px 0 0; --radius-top-lg: 14px 14px 0 0; /* ========================================================================== 2. TYPE -------------------------------------------------------------------------- An 11-step scale. Poppins carries the interface; Inter carries anything that has to line up in a column. ====================================================================== */ /* ---- font stacks ------------------------------------------------------ */ /* One interface face across the whole site — marketing, auth and app. Served locally from /fonts; nothing is fetched from Google. */ --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-app: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-nav: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Figures. Poppins has no tabular numerals, so every money value, table cell, axis label and total is set in Inter. */ --font-numeric: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- size scale ------------------------------------------------------- */ /* The two steps below 11px exist only for the dense financial tables — column headers, lock glyphs and rate inputs. Nothing that has to be read as prose should use them. */ --fs-025: 9px; /* lock glyphs, rate suffixes */ --fs-050: 10px; /* table column headers, rate inputs */ --fs-100: 11px; /* micro labels, table sub-text, meta */ --fs-200: 12px; /* chip text, stat keys, uppercase labels */ --fs-300: 13px; /* secondary body, hints, small buttons */ --fs-400: 14px; /* BODY DEFAULT */ --fs-500: 15px; /* emphasised body, card addresses */ --fs-600: 16px; /* lead body, primary buttons */ --fs-700: 18px; /* small headings, section leads */ --fs-800: 21px; /* card values, logo wordmark, panel figures */ --fs-900: 24px; /* page titles on auth cards, status glyphs */ --fs-1000: 28px; /* large figures */ --fs-1100: 34px; /* hero headings on app pages */ /* ---- fluid display sizes (marketing hero only) ------------------------ */ --fs-display-1: clamp(38px, 5.6vw, 66px); --fs-display-2: clamp(26px, 3.4vw, 38px); --fs-display-lede: clamp(15px, 1.5vw, 17px); /* ---- weights ---------------------------------------------------------- */ /* Poppins is held here as Regular / Medium / Bold; 600 and 700 both resolve to the Bold file. See fonts/fonts.css. */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 700; /* ---- line heights ----------------------------------------------------- */ --lh-none: 1.12; /* display headings */ --lh-tight: 1.3; /* headings */ --lh-snug: 1.45; /* chips, dense rows */ --lh-base: 1.6; /* body */ --lh-relaxed: 1.7; /* long-form paragraphs, empty states */ /* ---- letter spacing --------------------------------------------------- */ --ls-display: -.03em; /* big hero type — tightened for the blue scheme */ --ls-heading: -.015em; /* headings */ --ls-normal: 0; --ls-label: .05em; /* uppercase micro labels */ --ls-caps: .06em; /* uppercase section labels */ --ls-eyebrow: .14em; /* uppercase eyebrows and kickers */ /* ---- numerals --------------------------------------------------------- */ /* Any figure that has to line up in a column. */ --numeric-features: "tnum" 1, "lnum" 1; /* ========================================================================== 3. SPACING ====================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 44px; --space-9: 64px; /* ========================================================================== 4. PALETTE — the raw ink -------------------------------------------------------------------------- CHANGE COLOURS HERE. One ramp, near-black-blue to white, read top to bottom: #02060E #050B18 #0B1730 #0E1F3E #16294B #10307A #143C97 #1849B4 #1D57CC #3D74E0 #94B4F0 #C3D5F8 #E2EBFB #F4F7FC #fff ====================================================================== */ /* ---- blue — the primary ------------------------------------------------ Named --c-violet-* so the hundreds of existing references keep working. The values are blue; the names are historical. */ --c-violet-900: #0B2465; /* deepest press state */ --c-violet-800: #10307A; /* pressed */ --c-violet-700: #143C97; /* deep — quote panels, dark blue fills */ --c-violet-600: #1849B4; /* hover */ --c-violet-500: #1D57CC; /* PRIMARY — buttons, active nav, stat cards */ --c-violet-400: #3D74E0; /* the lighter half of the stat-card wash */ --c-violet-300: #94B4F0; /* muted blue — chart bands, faint bars */ --c-violet-200: #C3D5F8; /* blue on dark chrome (active menu label) */ --c-violet-200-rgb: 195, 213, 248; /* same, for alpha-blended dim variants */ --c-violet-100: #E2EBFB; /* blue wash — chips, hovered rows */ --c-violet-050: #F1F5FD; /* palest blue — zebra rows, inset panels */ /* Forward-looking aliases. Prefer these in new code. */ --c-blue-900: var(--c-violet-900); --c-blue-800: var(--c-violet-800); --c-blue-700: var(--c-violet-700); --c-blue-600: var(--c-violet-600); --c-blue-500: var(--c-violet-500); --c-blue-400: var(--c-violet-400); --c-blue-300: var(--c-violet-300); --c-blue-200: var(--c-violet-200); --c-blue-100: var(--c-violet-100); --c-blue-050: var(--c-violet-050); /* ---- cyan — the secondary --------------------------------------------- */ --c-cyan-800: #075E79; /* cyan text on pale cyan wash */ --c-cyan-700: #0A7899; /* cyan text on white (5.1:1) */ --c-cyan-600: #1094BC; /* hover */ --c-cyan-500: #1BB0E0; /* SECONDARY — charts, sparklines, positives */ --c-cyan-400: #45C6EC; /* chip fills that carry dark ink */ --c-cyan-300: #6FD4F0; /* the softer chart fill */ --c-cyan-200: #A8E6F7; --c-cyan-100: #D8F3FC; /* cyan wash */ --c-cyan-050: #EEFAFE; /* ---- slate — the chrome and the ink ------------------------------------ Blue-tinted throughout. There is no neutral grey on the site. */ --c-slate-1000: #02060E; /* the hero floor — near-black blue */ --c-slate-950: #050B18; /* deepest chrome — dark page background */ --c-slate-900: #0B1730; /* breadcrumb band, primary ink */ --c-slate-850: #0E1F3E; /* topbar */ --c-slate-800: #16294B; /* raised dark card */ --c-slate-700: #1B3157; /* raised dark card, hovered */ --c-slate-600: #4A5F82; /* secondary ink on light (6.5:1 on white) */ --c-slate-500: #6E86A8; /* muted ink, meta text (3.7:1 on white) */ --c-slate-400: #9DAEC6; /* faint ink, placeholders */ --c-slate-300: #C3CEDF; /* input borders, dashed rules */ --c-slate-200: #DDE4EF; /* strong border */ --c-slate-100: #E9EEF6; /* the standard card border */ --c-slate-050: #F4F7FC; /* THE PAGE CANVAS */ /* ---- neutrals ----------------------------------------------------------- All four carry a blue cast so nothing on the page reads as warm grey. */ --c-white: #ffffff; --c-mist: #F7FAFE; /* inset panels, timeline rows, empty states */ --c-fog: #EFF3FA; /* sunken surface, ghost bars, table stripes */ --c-ash: #E5EBF5; /* chip background, hovered fog */ /* ---- brand mark ------------------------------------------------------- The logo, and nothing else. Against an all-blue site this is now the single warm note, which is exactly why it still reads as Monetary. Do not reintroduce it into chrome. */ --brand-mark: #FF7800; --brand-mark-lift: #FF9A40; --brand-mark-rgb: 255, 120, 0; /* ---- legacy orange aliases ------------------------------------------- Kept so nothing that still names them breaks. They resolve to the brand mark; they are NOT the accent. */ --c-orange: var(--brand-mark); --c-orange-lift: var(--brand-mark-lift); --c-orange-sand: #FFD08A; --c-orange-rgb: var(--brand-mark-rgb); --c-yellow: #E9A93C; /* ---- legacy navy aliases --------------------------------------------- The old navy family, repointed onto the blue slate ramp. */ --c-navy-950: var(--c-slate-950); --c-navy-900: var(--c-slate-900); --c-navy-850: var(--c-slate-850); --c-navy-800: var(--c-slate-900); --c-navy-700: var(--c-violet-500); --c-navy-ink: var(--c-slate-900); /* ---- legacy cool/warm neutral aliases --------------------------------- Every one of these now resolves onto the blue ramp. */ --c-cool-100: #EFF3FA; --c-cool-150: #E9EEF6; --c-cool-300: #C3CEDF; --c-cool-400: #9DAEC6; --c-cool-500: #6E86A8; --c-sand-50: var(--c-mist); --c-sand-100: var(--c-fog); --c-sand-200: var(--c-slate-100); --c-stone-50: var(--c-mist); --c-stone-100: var(--c-ash); --c-stone-200: var(--c-slate-100); --c-stone-300: var(--c-slate-200); --c-stone-400: var(--c-slate-400); --c-stone-500: var(--c-slate-500); --c-stone-600: var(--c-slate-500); --c-stone-700: var(--c-slate-600); --c-stone-800: var(--c-slate-600); --c-slate-ink: var(--c-slate-900); /* ---- hero gradient (app page headers) --------------------------------- Deep blue running into cyan, left to right. */ --c-hero-1: #0B1730; --c-hero-2: #143C97; --c-hero-3: #1D57CC; --c-hero-4: #1BB0E0; --c-hero-blob-1: #3D74E0; --c-hero-blob-2: #6FD4F0; /* ---- aurora — the blurred blobs behind dark hero surfaces -------------- Used by index.php and the auth pages. Deliberately low-alpha; they sit under a canvas mesh and must not compete with the headline. */ --aurora-1: rgba(29, 87, 204, .55); --aurora-2: rgba(27, 176, 224, .24); --aurora-3: rgba(20, 60, 151, .50); --mesh-line: rgba(147, 180, 240, .30); --mesh-dot: rgba(195, 213, 248, .42); --mesh-hot: rgba(69, 198, 236, .90); /* ---- categorical — summary card icons, chart series ------------------- Four blues and two status hues. The green and rose stay because on a financial page a coloured figure has to mean gain or loss. */ --c-cat-violet: #1D57CC; --c-cat-cyan: #1BB0E0; --c-cat-green: #10B394; --c-cat-amber: #E9A93C; --c-cat-rose: #E8455F; --c-cat-indigo: #10307A; --c-cat-lilac: #B67CDE; /* 4th property colour on the capital-gain charts and the header donut — was amber ("mustard"), swapped out below */ --c-cat-purple: #9C30E8; /* header band "Properties" bar chart, donut 4th slice, and the Cashflow/Capital Gain table row badges — vivid, not the softer lilac above. Two competing needs set the lightness: deeper reads better against the band's near-black floor, lighter gives white badge text more room. This is the compromise — white-on-it is 5.25:1 (badges need that; text), it's 3.4-3.9:1 against the band floor (a fill, not text, so 3:1 is the bar — see WCAG 1.4.11). */ /* legacy names */ --c-cat-blue: var(--c-cat-cyan); --c-cat-rust: var(--c-cat-rose); /* ---- status: rose / red ----------------------------------------------- */ --c-red-500: #E8455F; /* the badge fill */ --c-red-ink: #C22B44; /* red text on light (5.6:1) */ --c-red-soft: #FDE8EB; /* red wash on light */ --c-red-on-dark: #FF8A9C; /* red text on dark (7.9:1 on slate-900) */ --c-red-on-dark-2: #FFB3BF; --c-red-on-dark-3: #FF9DAC; --c-red-rgb: 232, 69, 95; --c-red-soft-rgb: 255, 138, 156; /* ---- status: green ----------------------------------------------------- */ --c-green-500: #10B394; /* the badge fill */ --c-green-400: #35CBAE; /* chip fill that carries dark ink */ --c-green: #0A7358; /* green text on light (5.8:1) */ --c-green-on-dark: #45DCC0; /* (10.4:1 on slate-900) */ --c-green-rgb: 16, 179, 148; /* ---- status: amber ----------------------------------------------------- */ --c-amber-500: #E9A93C; --c-amber-ink: #86601A; /* amber text on light (5.7:1) */ --c-amber-soft: #FCF2E2; /* ---- status: informational (stat keys on dark cards) ------------------ */ --c-blue-on-dark: #8FCDF5; --c-sky-on-dark: #6FD4F0; --c-amber-on-dark: #F5C879; --c-violet-on-dark: #B8CDF7; --c-violet-rgb: 184, 205, 247; /* ---- gain / loss ------------------------------------------------------ */ --c-gain: var(--c-green); --c-loss: var(--c-red-ink); /* ---- help block (Portfolio / Ledger / Rentals) ------------------------ */ --c-help-bg: #F7FAFE; --c-help-border: #E4EAF4; --c-help-hover: #EFF3FA; --c-help-meta: #6E86A8; --c-help-body: #4A5F82; --c-help-lock: #86601A; /* ---- data tables ------------------------------------------------------ */ --c-table-rule: #EDF1F7; /* row divider */ --c-table-th: #3F5372; /* header text, computed values */ --c-table-input-hover: #C3CEDF; /* input border on hover */ --c-table-underline: #C3CEDF; /* dashed "you can edit this" underline */ --c-table-focus: #1D57CC; /* input border on focus */ --c-table-disabled-bg: #EFF3FA; --c-table-disabled-ink:#9DAEC6; --c-table-computed-bg: #E9EEF6; /* formula columns */ --c-table-computed-th: #3F5372; --c-table-computed-th-bg: #DDE4EF; --c-table-foot-bg: #F7FAFE; --c-table-empty-ink: #9DAEC6; --c-table-rate-line: #94B4F0; --c-btn-secondary-hover: #F1F5FD; /* ---- data table column families -------------------------------------- Each family is: cell background, header ink, header background. Retinted onto the blue scheme. Every header ink clears 4.5:1 on its own cell background — measured, not estimated. */ --col-id-bg: #EEF2F8; --col-id-th: #3F5372; --col-id-th-bg: #E1E8F2; --col-finance-bg: #E2F1FB; --col-finance-th: #0A6E8C; --col-finance-th-bg: #CFE7F7; --col-insurance-bg: #E2F2ED; --col-insurance-th: #0A7358; --col-insurance-th-bg: #CFE9E0; --col-costs-bg: #FBF3E4; --col-costs-th: #86601A; --col-costs-th-bg: #F6E7CC; --col-fees-bg: #E7EDFB; --col-fees-th: #143C97; --col-fees-th-bg: #D6E1F6; --col-rent-bg: #E3F0F4; --col-rent-th: #12697C; --col-rent-th-bg: #D0E5EB; /* ---- per-property section panels -------------------------------------- */ --c-section-bg: #EFF3FA; --c-section-head: #DBE3F0; --c-section-head-hover: #CFD9EA; --c-section-input-hover: #E4EAF4; --c-section-input-focus: #FAFCFF; --c-section-placeholder: #9DAEC6; --c-panel-border-hover: #C3CEDF; --c-pill-border: #C3CEDF; --c-pill-border-zero: #DDE4EF; /* ---- status chips ------------------------------------------------------ Each chip is: background, ink, border. Rose = expense / request / rejected, green = credit / done, cyan = note, amber = open. */ --c-pill-expense-bg: #FDE8EB; --c-pill-expense-border: #F5C2CB; --c-pill-credit-bg: #E0F4EE; --c-pill-credit-border: #B9E4D5; --c-pill-note-bg: #E2F1FB; --c-pill-note-border: #B9DFF2; --c-pill-open-bg: #FCF2E2; --c-pill-open-border: #F1DCB2; /* ---- solid chips on the blue stat tiles ------------------------------- These sit ON the primary blue tile, so they need to separate from it AND carry legible text at 11px. The cyan and green fills take dark ink rather than white — white on a bright cyan fill only reaches 2.5:1. */ --chip-cyan-bg: var(--c-cyan-400); --chip-cyan-ink: var(--c-slate-1000); --chip-green-bg: var(--c-green-400); --chip-green-ink: var(--c-slate-1000); --chip-amber-bg: var(--c-amber-500); --chip-amber-ink: var(--c-slate-1000); --chip-rose-bg: var(--c-red-ink); --chip-rose-ink: var(--c-white); /* ---- rent-sync button (Rentals) --------------------------------------- */ --c-sync-bg: #E7EDFB; --c-sync-bg-hover: #D6E1F6; --c-sync-ink: #143C97; --c-sync-border: #C6D4EF; /* ---- modals ----------------------------------------------------------- */ --c-modal-scrim: rgba(5, 11, 24, .62); --c-modal-close-hover:#EFF3FA; --c-modal-src-border: #DBE3F0; --c-modal-rule: #E9EEF6; --c-modal-row-rule: #EFF3FA; --c-modal-row-hover: #F7FAFE; --c-warn-ink: #86601A; --c-warn-border: #F1DCB2; /* ---- alpha bases ------------------------------------------------------ */ /* Used to build the translucent panels, borders and washes. Keeping the RGB triplets here means an alpha layer can be retinted from one place. */ --c-white-rgb: 255, 255, 255; --c-black-rgb: 0, 0, 0; --c-accent-rgb: 29, 87, 204; /* the blue primary */ --c-cyan-rgb: 27, 176, 224; --c-navy-rgb: 11, 23, 48; /* the slate chrome */ --c-deep-rgb: 5, 11, 24; --c-mid-rgb: 20, 60, 151; /* ========================================================================== 5. SEMANTIC TOKENS — what each colour is FOR -------------------------------------------------------------------------- Point pages at these, not at section 4, wherever a colour has a job. ====================================================================== */ /* ---- chrome: the topbar, breadcrumb band and menu bar ------------------ */ --chrome-topbar: var(--c-slate-850); --chrome-band: var(--c-slate-900); --chrome-band-rule: rgba(var(--c-white-rgb), .06); --chrome-menu: var(--c-white); --chrome-menu-ink: var(--c-slate-600); --chrome-menu-active: var(--c-violet-500); --chrome-menu-rule: var(--c-slate-100); --chrome-ink: var(--c-white); --chrome-ink-dim: rgba(var(--c-white-rgb), .64); /* ---- DARK context: auth pages and dark cards inside the app ----------- */ --surface-dark: var(--c-slate-950); --surface-dark-deep: var(--c-slate-1000); /* hero floor */ --surface-dark-card: var(--c-slate-900); --surface-dark-card-hov: var(--c-slate-800); --surface-dark-panel: rgba(var(--c-white-rgb), .038); --surface-dark-panel-soft: rgba(var(--c-white-rgb), .05); --surface-dark-panel-lift: rgba(var(--c-white-rgb), .07); --surface-dark-inset: rgba(var(--c-white-rgb), .055); /* Frosted glass — the hero card treatment. */ --surface-glass: linear-gradient(158deg, rgba(147, 180, 240, .15), rgba(11, 23, 48, .62) 46%, rgba(2, 6, 14, .78)); --surface-glass-border: rgba(195, 213, 248, .20); --glass-blur: blur(26px) saturate(160%); --border-dark: rgba(var(--c-white-rgb), .08); --border-dark-soft: rgba(var(--c-white-rgb), .10); --border-dark-lift: rgba(var(--c-white-rgb), .14); --border-dark-strong: rgba(var(--c-white-rgb), .20); --border-dark-dash: rgba(var(--c-white-rgb), .24); --ink-on-dark: var(--c-cool-100); --ink-on-dark-card: var(--c-cool-150); --ink-on-dark-dim: var(--c-cool-400); --ink-on-dark-muted: var(--c-cool-500); --ink-on-dark-faint: rgba(var(--c-white-rgb), .52); /* ---- LIGHT context: app content cards --------------------------------- */ --surface-page: var(--c-slate-050); --surface-light: var(--c-white); --surface-light-sunken: var(--c-mist); --surface-light-inset: var(--c-fog); --surface-chip: var(--c-mist); --surface-chip-hover: var(--c-ash); /* ---- Frosted glass panel ---------------------------------------------- Sampled from Blue.png. The panel runs on a diagonal: a soft periwinkle at the bottom-left corner, through a pale sky mid, to near-white at the top-right, with a faint cyan cast over the top-left. Used by the property cards on Properties. Deliberately far paler than the cyan ramp — the tint should read as glass, not as a coloured fill. Darkest stop still gives --ink 13.9:1 and --ink-muted 5.1:1. */ --glass-1: #D0E6FF; /* bottom-left, most tinted */ --glass-2: #E4F2FF; /* midpoint */ --glass-3: #FAFCFF; /* top-right, all but white */ --border-light: var(--c-slate-100); --border-light-input: var(--c-slate-300); --border-chip: var(--c-slate-100); --border-chip-hover: var(--c-slate-200); --ink: var(--c-slate-900); --ink-muted: var(--c-slate-600); --ink-soft: var(--c-slate-500); --ink-faint: var(--c-slate-500); --ink-faintest: var(--c-slate-400); --ink-meta: var(--c-slate-500); --ink-archived: var(--c-slate-600); --ink-label: var(--c-slate-500); /* ---- accent — interactive, both contexts ------------------------------ */ --accent: var(--c-violet-500); --accent-hover: var(--c-violet-600); --accent-active: var(--c-violet-800); --accent-on: var(--c-white); /* text sitting ON the accent */ --accent-soft: rgba(var(--c-accent-rgb), .12); --accent-border: rgba(var(--c-accent-rgb), .30); --accent-border-lift: rgba(var(--c-accent-rgb), .45); --accent-glow: rgba(var(--c-accent-rgb), .45); --accent-on-dark: var(--c-violet-300); /* Gradient fills — the polish tier. Flat --accent still works everywhere; these are for primary buttons and the stat tiles. */ --accent-grad: linear-gradient(180deg, var(--c-violet-400), var(--c-violet-500)); --accent-grad-hover: linear-gradient(180deg, var(--c-violet-300), var(--c-violet-400)); --tile-grad: linear-gradient(155deg, var(--c-violet-600), var(--c-violet-500) 46%, var(--c-violet-700)); /* ---- secondary accent — charts, sparklines, positive movement --------- */ --accent-2: var(--c-cyan-500); --accent-2-ink: var(--c-cyan-700); --accent-2-soft: rgba(var(--c-cyan-rgb), .14); --accent-2-border: rgba(var(--c-cyan-rgb), .32); /* ---- circular badges — the pale discs on blue stat panels ------------- */ --badge-size: 44px; --badge-bg: rgba(var(--c-white-rgb), .18); --badge-ink: var(--c-white); --badge-bg-light: var(--c-violet-100); --badge-ink-light: var(--c-violet-700); /* ---- brand blues — app headings and primary buttons ------------------- */ --brand-deep: var(--c-slate-900); --brand-mid: var(--c-violet-500); /* ---- state ------------------------------------------------------------ */ --state-error-ink: var(--c-red-on-dark); --state-error-bg: rgba(var(--c-red-rgb), .12); --state-error-border: rgba(var(--c-red-rgb), .34); --state-success-ink: var(--c-green-500); --state-success-bg: rgba(var(--c-green-rgb), .12); --state-success-border:rgba(var(--c-green-rgb), .36); /* ---- charts ----------------------------------------------------------- Read by the Chart.js configs and the hand-drawn SVG charts so a palette change lands on the graphs as well as the cards. */ --chart-1: var(--c-cyan-500); --chart-1-fill: rgba(var(--c-cyan-rgb), .55); --chart-2: var(--c-violet-500); --chart-2-fill: rgba(var(--c-accent-rgb), .45); --chart-3: var(--c-cat-green); --chart-4: var(--c-cat-purple); /* was --c-cat-lilac */ --chart-ghost: var(--c-fog); /* the pale backdrop bars */ --chart-grid: #E9EEF6; /* faint horizontal rules */ --chart-axis-ink: var(--c-slate-400); --chart-track: #E9EEF6; /* the unfilled donut arc */ /* ========================================================================== 6. ELEVATION -------------------------------------------------------------------------- Layered now rather than flat: a tight contact shadow for the edge, and a wide soft one tinted with the navy so cards lift off the blue canvas without going grey. Structure still comes mostly from borders. ====================================================================== */ --shadow-xs: 0 1px 1px rgba(var(--c-deep-rgb), .05); --shadow-sm: 0 1px 2px rgba(var(--c-deep-rgb), .06), 0 2px 6px -2px rgba(var(--c-navy-rgb), .10); --shadow-md: 0 1px 2px rgba(var(--c-deep-rgb), .06), 0 8px 20px -8px rgba(var(--c-navy-rgb), .18); --shadow-lg: 0 2px 4px rgba(var(--c-deep-rgb), .06), 0 24px 56px -20px rgba(var(--c-navy-rgb), .30); --shadow-xl: 0 2px 6px rgba(var(--c-deep-rgb), .06), 0 40px 90px -34px rgba(var(--c-navy-rgb), .45); --shadow-card: 0 1px 2px rgba(var(--c-deep-rgb), .05), 0 6px 18px -10px rgba(var(--c-navy-rgb), .16); --shadow-card-hover: 0 2px 4px rgba(var(--c-deep-rgb), .06), 0 18px 40px -16px rgba(var(--c-navy-rgb), .28); --shadow-card-dark: 0 1px 2px rgba(var(--c-black-rgb), .30); --shadow-card-dark-hover: 0 6px 18px rgba(var(--c-black-rgb), .38); --shadow-row-dark: 0 1px 2px rgba(var(--c-black-rgb), .28); --shadow-accent: 0 1px 0 rgba(var(--c-white-rgb), .22) inset, 0 10px 28px -10px rgba(var(--c-accent-rgb), .55); --shadow-hero: 0 40px 120px -40px rgba(var(--c-deep-rgb), .65); --shadow-nav: 0 1px 3px rgba(var(--c-navy-rgb), .18); /* ========================================================================== 7. MOTION ====================================================================== */ --ease: cubic-bezier(.22, .8, .24, 1); --ease-out: cubic-bezier(.2, .7, .3, 1); --dur-fast: .12s; --dur-base: .20s; --dur-slow: .35s; --dur-reveal: .85s; /* ========================================================================== 8. LAYOUT ====================================================================== */ --page-max: 1300px; /* marketing / dashboard pages */ --app-max: 1584px; /* app pages */ } /* ============================================================================ 9. BASE — applies everywhere the stylesheet is linked ========================================================================= */ html { -webkit-text-size-adjust: 100%; /* ---- reserve the scrollbar gutter, always ------------------------------- Every page on the site keeps the vertical scrollbar's track reserved whether or not it currently has anything to scroll. WHY. Without this, the layout width changes by the width of the scrollbar (~15px on Windows) the moment a page becomes long enough to scroll — and back again when it doesn't. Every centred element on the page shifts sideways as that happens. It shows up as a jump when navigating between a short page and a long one, and as a visible flicker on any page that grows or shrinks in place: opening a modal that locks body scroll, expanding a section, filtering a table down to fewer rows. This lived in PropertyPortfolioApp.php's own