/* * Warranty platform — silver and black. * * Every colour in the sale screens resolves through these tokens. They were * duplicated verbatim in all three Blade templates, which meant a palette * change had to be made three times and would drift the first time one was * missed. One file instead. * * There is no Node on the host (see CLAUDE.md), so this is plain CSS served * straight from `public/` — no build step, no Vite manifest. * * Semantic colours (ok / warn / bad) stay coloured deliberately. They carry * meaning that grey cannot: a blocked gate and a satisfied one must not be * distinguishable only by their text. */ :root { /* Surfaces — silver page, white panels. The page silver is deliberately a clear step darker than the panels; when the two are close the whole screen reads as washed-out grey rather than silver. */ --bg: #dfe3e8; --panel: #ffffff; --soft: #f2f4f6; /* Ink */ --ink: #0d0f12; --muted: #666d75; --dim: #b9c0c8; /* Silver rules and edges */ --line: #c4cad1; --silver: #b8bec6; /* Black is the accent — primary actions, the active step */ --accent: #0d0f12; --accent-hover:#000000; --accent-soft: #d6dbe1; --chip: #cfd5db; /* Status */ --ok: #1c7a4a; --ok-soft: #e9f3ee; --ok-ink: #17542f; --ok-line: #bcdcc9; --warn: #85610b; --warn-soft: #faf2e2; --warn-line: #eddcb6; --bad: #a4262c; --bad-soft: #fbebeb; --bad-line: #f0c8c8; /* Compulsory-field marker */ --req: #a4262c; /* ------------------------------------------------------------------ * * Sale types — New, Used, Fleet, Other. * * One colour each, used everywhere a sale type is shown, so the same * word is never two colours on two screens. Set 21 Aug 2026. * * **Deliberately outside the semantic set.** A sale type is not a state: * nothing about a Used car is a warning and nothing about a New one is a * success. Borrowing `ok` / `warn` / `bad` would say something untrue and * would also collide with the real warnings that sit beside them in the * same tables — the deals report previously drew `Other` in `warn` amber, * which read as a problem with the deal. * * Hues are spread rather than graded, and New / Used are the furthest * apart of the four because those two are the pair people compare. Fleet * takes the remaining cool hue; it is 3%% of sales, so it is the one that * can afford to sit nearest another. Other is neutral slate on purpose — * it is the catch-all, and grey is the honest colour for "none of the * above" (see SaleType::styleFor). * * These are NOT per-dealer themeable. A dealer changing their header must * not change what Used looks like, or two screenshots from two dealers * stop being comparable. * * Colour is never the only cue: every pill carries the type as text. * ------------------------------------------------------------------ */ --type-new: #2f52b0; /* blue */ --type-new-soft: #e8edf9; --type-new-line: #c3d0ec; --type-new-ink: #27459a; --type-used: #7a3fa8; /* purple */ --type-used-soft: #f2eaf8; --type-used-line: #ddc9ec; --type-used-ink: #6a3593; --type-fleet: #0e6f76; /* teal */ --type-fleet-soft: #e4f2f3; --type-fleet-line: #b7dade; --type-fleet-ink: #0c5f65; --type-other: #5b626b; /* slate */ --type-other-soft: #eef0f2; --type-other-line: #d2d7dc; --type-other-ink: #4d545c; --shadow: 0 1px 2px rgba(10,12,16,.06), 0 1px 3px rgba(10,12,16,.10); /* ------------------------------------------------------------------ * * Controls and small surfaces. * * Several of these are `#ffffff` today and could all read `--panel`. * They are kept apart deliberately: a dark theme needs a field, a button, * a popover and a panel to take *different* values, and collapsing them * now would have to be unpicked then. Tokenised 2026-08-19 for exactly * that reason — these were hardcoded literals across the three templates. * ------------------------------------------------------------------ */ --on-accent: #ffffff; /* text on any accent fill */ --field-bg: #ffffff; --field-readonly-bg: #f7f8fa; --placeholder: #aeb5bd; --faint: #9aa3ad; /* the "— optional" hints beside labels */ --needed-bg: #fffbfb; /* unfilled compulsory field */ --btn-bg: #ffffff; /* secondary / ghost buttons */ --popover-bg: #ffffff; --popover-shadow: rgba(16,24,40,.12); --divider: #f0f2f4; /* inner list rules, lighter than --line */ --actionbar-bg: rgba(255,255,255,.97); /* Keyboard hint chips */ --kbd-bg: #eef1f4; --kbd-line: #d8dde3; --kbd-ink: #4a525c; /* ------------------------------------------------------------------ * * Themeable surfaces — the only tokens intended to vary per dealer. * * Kept separate from the palette above so a dealer override is a short * `:root{}` block emitted after this file, not a fork of the stylesheet. * Every rule that paints these surfaces reads them from here, so nothing * needs editing when an override lands. * * Whatever sets these MUST set the matching ink token too — a light header * colour with white text is unreadable, and that pairing is the only part * of per-dealer theming that is not trivial. * ------------------------------------------------------------------ */ --masthead-bg: linear-gradient(180deg, #1a1d21 0%, #0d0f12 100%); --masthead-ink: #ffffff; --masthead-muted: #a8b0b8; --masthead-rule: var(--silver); --masthead-link: #dfe3e8; --masthead-link-hover: #ffffff; --card-head-bg: linear-gradient(180deg, #22262b 0%, #171a1e 100%); --card-head-ink: #e8eaed; --card-head-line: #0d0f12; /* A branch beneath its dealership. Deliberately not one of the semantic colours: a branch is a place, not a state, and borrowing `ok` or `warn` would say something about it that is not true. Blue-grey reads as structural against the silver and stays legible at 12.5px. */ --branch-ink: #3d6b8c; --branch-line: #b9cdda; /* ------------------------------------------------------------------ * * Links sitting ON a panel — Edit, View, a deal number, a certificate. * * Added 24 Aug 2026 because they were all borrowing `--masthead-link`, * which is `#dfe3e8`: correct against the black masthead it is named for, * and 1.1:1 against a white panel. The Edit link on the staff screen was * effectively invisible, and every `a.doc` on every table had the same * fault -- it just went unreported because those links also carry weight * 650, so they read as pale bold text rather than as missing. * * **A masthead token must not be used off the masthead.** That is the rule * this exists to enforce; `a.back` is the one that legitimately keeps it, * because `header.top` paints the dark background behind it. * * Deep blue rather than the black accent: on a screen where black is the * button colour, a black link is indistinguishable from body text unless * underlined, and underlining every certificate number in a table is * noise. 8.7:1 on white -- AAA at any size. It sits in the same blue-grey * family as `--branch-ink` above, which is what keeps it from reading as * a fifth accent colour. * ------------------------------------------------------------------ */ --link: #1d4e78; --link-hover: #0d0f12; /* ------------------------------------------------------------------ * * Charts — bars and the twelve-month trend. * * One colour, not a palette. Every chart on the dashboards compares a * measure against itself over time or across three segments, so a second * hue would imply a distinction that is not there. `--chart-now` marks the * current month, which is the only thing on a trend that means something * different from its neighbours. * * Deliberately outside the semantic set: a hit rate is not a success or a * warning, and colouring it as one would editorialise a number people are * judged on. Same reasoning as the sale-type colours above. * ------------------------------------------------------------------ */ --chart: #7d97ad; --chart-now: #1d4e78; --chart-track: #e6e9ed; --chart-rule: #9aa2aa; /* The same head as a flat colour. `--card-head-bg` is a gradient, so it cannot be used anywhere a single colour is required -- an inverted hover state was setting `color` to it, which is invalid and silently dropped, leaving light text on a light background. */ --card-head-solid: #1e2226; /* A card head that carries a warning: overdue deliveries, deals nobody owns. Amber rather than red on purpose -- these need working, they are not failures. Kept beside the neutral head so a per-dealer palette has to consider both or neither. */ --card-head-warn-bg: linear-gradient(180deg, #8a6a10 0%, #6f5409 100%); --card-head-warn-ink: #ffffff; --card-head-warn-line: #5a4407; /* The page column. Referenced by `.wrap` and by every sticky action bar, which have to line their buttons up with the content above them -- four of them held their own copy of the old 1180 and would have sat inboard of the column the moment it changed. */ --page-max: 1440px; } /* ---------------------------------------------------------------------- * * Page column. * * Was written out identically in all five templates, which is how five * copies of a number quietly stop matching. It lives here now, next to the * masthead whose negative margins have to cancel this padding. * * 1440 rather than 1180: the prospect list runs to seven columns and was * truncating names on a monitor with 370px of empty margin either side. It * is still a cap, not a stretch -- prose stays readable and a very wide * screen gets margin rather than a line of text nobody can track back. * ---------------------------------------------------------------------- */ .wrap { max-width: var(--page-max); margin: 0 auto; /* The bottom value differs per screen; only the sides are shared, and the masthead's -24px depends on them. */ padding: 20px 24px 80px; } /* ---------------------------------------------------------------------- * * Masthead. * * Owned here rather than in the three templates: it is the largest block of * colour on every screen, so leaving it triplicated would guarantee drift. * The templates keep only the flex layout, which is not a colour concern. * * The negative margins cancel `.wrap`'s padding (20px 24px) so the bar runs * full width. Those two values must stay in step. * ---------------------------------------------------------------------- */ header.top { background: var(--masthead-bg); color: var(--masthead-ink); margin: -20px -24px 20px; padding: 20px 24px 18px; border-bottom: 3px solid var(--masthead-rule); } header.top h1 { color: var(--masthead-ink); } /* Descendant selectors so these beat the templates' own `.dealer` / `a.back` rules on specificity, whatever order the stylesheets load in. */ header.top .dealer, header.top .savestate { color: var(--masthead-muted); } header.top a.back { color: var(--masthead-link); } header.top a.back:hover { color: var(--masthead-link-hover); } /* Signed-in identity and sign-out, sitting at the right of the masthead. */ header.top .who { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--masthead-muted); } header.top .who form { margin: 0; } header.top .who button { font: inherit; font-size: 13px; cursor: pointer; background: none; border: 0; padding: 0; color: var(--masthead-link); text-decoration: underline; } header.top .who button:hover { color: var(--masthead-link-hover); } /* ---------------------------------------------------------------------- * * On-panel links — the backstop, not the definition. * * Each view carries its own `