/* DISCOVERYONE — the order site painted in the product's own colours. ⚠⚠ VENDORED, NOT INVENTED. Every value below is copied from the DiscoveryONE application's design system — tractor/DiscoveryOne.SharedUI/wwwroot/app.css, the default "Blueprint" face at :root. A customer who buys here and signs in there must not feel the handover, which is the entire reason this file exists instead of a palette someone liked. ⚠ DO NOT RETUNE THESE BY EYE. They are the app's, and drift is the failure mode: re-copy from the source above when the product's system moves. If a colour looks wrong here, it looks wrong there too and that is where to fix it. ⚠ This file sets TOKENS and almost nothing else. The structure it paints is OrderSite.Core's order-site.css, which is loaded first and knows nothing about DiscoveryONE. Adding layout rules here is how the next product's order site quietly inherits this one's furniture. */ /* Inter, self-hosted — the app serves it from /_content/DiscoveryOne.SharedUI/ rather than from a font CDN, and a checkout that blocks on fonts.googleapis.com would be a worse version of a problem that repo already solved. Latin variable subset: one file, every weight. SIL Open Font License, which permits this. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* The metric-overridden fallback, copied with its numbers intact. This is what renders during the swap window, and it is what stops every heading and price reflowing when the real face lands — on a checkout, a layout shift under the customer's cursor is not cosmetic. ⚠ size-adjust scales the em, so ascent/descent are already divided by the same factor. Change one and all three are wrong. Tuned against Segoe UI. */ @font-face { font-family: 'Inter Fallback'; src: local('Segoe UI'), local('Helvetica Neue'), local('Arial'), local('Roboto'); size-adjust: 107.07%; ascent-override: 90.48%; descent-override: 22.55%; line-gap-override: 0%; } /* ── Shared by both faces ──────────────────────────────────────────────── ⚠⚠ TYPE AND GEOMETRY ARE THE SYSTEM; ONLY COLOUR IS THE FACE. Blueprint's scale, its typeface, its uppercase micro-label and its radii are the same whether the page is light or dark, so they are declared once, here, ahead of both palettes. ⚠ This block exists because they were once inside the LIGHT palette, back when light was the base. Making dark the base silently dropped all of them into Core's unbranded fallbacks on the theme that had just become the default — the eyebrows lost their capitals, Inter fell back to system-ui, and the radii and control heights reverted. Nothing errored; the page simply stopped looking like the product. Anything that is not a colour belongs here, not below. */ :root { /* 'Inter Fallback' sits directly after Inter deliberately: it is the metric-overridden face, and putting system-ui first restores the layout shift the override exists to prevent. */ --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-heading: var(--font-body); --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace; /* The app's type scale, verbatim: 11 / 13 / 16 / 15 / 22px. The 22px page title is the one people notice — the app does not do 32px headings, and a storefront that does stops looking like the same software. */ --fs-micro: 0.6875rem; /* 11px — pills, field labels, table heads */ --fs-small: 0.8125rem; /* 13px — inputs, table cells, secondary text */ --fs-body: 1rem; /* 16px — body, 16/1.5 */ --fs-card-title: 0.9375rem; /* 15px — card titles */ --fs-title: 1.375rem; /* 22px — page titles and KPI values */ --heading-weight: 700; --heading-tracking: -0.01em; /* ⚠ The uppercase micro-label is a signature, not decoration. Every label, legend, pill and table head in the product is 11px/600/uppercase at 0.08em (the app's `.lbl`). Turn this off and the family resemblance goes with it. */ --micro-weight: 600; --micro-transform: uppercase; --micro-tracking: 0.08em; /* Blueprint's radius scale: --r-sm on controls, --r on panels. */ --radius-sm: 8px; --radius-md: 12px; --radius-pill: 999px; /* 32px controls, matching the app's buttons and fields. Denser than a storefront would choose on its own, and that density is exactly what makes the handover to the product feel like one piece of software. */ --control-height: 32px; --control-padding: 0 14px; /* The drafting grid's pitch: the same 32px in both faces, only its ink changes. */ --canvas-size: 32px 32px; } /* ── DARK FIRST ────────────────────────────────────────────────────────── ⚠ The DARK palette is the one on bare `:root`, and the light face is the override. That is the wrong way round from most stylesheets and it is deliberate: it makes dark what the page is when nothing has said otherwise — JavaScript blocked, a crawler, the moment before theme.js runs. ⚠⚠ WITH JAVASCRIPT ON THIS CHANGES NOTHING, and it is worth knowing why before concluding the change did not work. theme.js resolves a preference — stored choice first, then the operating system — and stamps data-theme explicitly on every load, so one of the two blocks below always wins outright. What this ordering decides is the case where nothing stamps anything at all. ⚠ It does NOT override someone who has asked their OS for light. If the brand should insist on dark regardless, that is a one-line change in theme.js's fallback, not here — and it is a different decision, because it overrules a preference the visitor set deliberately. */ :root { color-scheme: dark; --ink: #f0ede8; /* text ink, inverted */ --ink-soft: #aeaea8; /* warm grey, AA on the dark card */ --ground: #191917; /* paper: the canvas */ --sheet: #22221f; /* card: the sheet, raised above the canvas */ --rule: #3a3a36; /* The drafting grid survives, at the dark paper's own value. */ --canvas-image: linear-gradient(rgba(240, 237, 232, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(240, 237, 232, 0.03) 1px, transparent 1px); /* Card up to surface, the same direction the light bar runs. */ --chrome-bg: linear-gradient(to bottom, #22221f, #2a2a26); --chrome-border: #3a3a36; /* ⚠ NOT the light theme's #2B6BDB. That measures far under AA on a stone ground; this is the same blue lightened to 6.43:1 on --ground. ⚠⚠ And --on-accent goes to INK, not white: white text on a lightened blue is the contrast failure the lightening was supposed to fix. The product does the same thing on its own primary button. */ --accent: #5B9CFF; --accent-deep: #4785E6; --accent-wash: rgba(91, 156, 255, 0.14); --on-accent: #1C1917; --ok: #5DCAA5; --warn: #EF9F27; --bad: #F09595; /* ⚠ Derived, not vendored — the product has no filled status wash in dark, only a bordered one (.flash-warn keeps #5a4a22 as an edge). These are its border tones used as fills, which is the nearest honest translation of a banner that has to read as a filled block here. */ --warn-wash: #2a2318; --bad-wash: #2a1a17; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.40); --focus-ring: 0 0 0 3px rgba(91, 156, 255, 0.14); /* The plate is already light-on-dark — it needs no inversion here. */ /* ⚠ THE ARTWORK IS DECLARED HERE, IN THE BASE, NOT IN THE LIGHT BLOCK. Now that dark is :root, a url() written only under [data-theme="light"] leaves the dark theme — the default — with no backdrop at all, and the only symptom is its absence. Light overrides the opacity and the filter below; it inherits the file. ⚠ ROOT-RELATIVE url(), leading slash: a relative url() inside a custom property resolves against the stylesheet that CONSUMES the var() — order-site.css, served from /_content/OrderSite.Core/ — not this file. */ --page-backdrop: url('/img/services-bg.webp'); --page-backdrop-opacity: 0.12; --page-backdrop-filter: none; } /* ── The light face ────────────────────────────────────────────────────── Blueprint's light palette, which is the product's own default — see the banner above for why it is the override here rather than the base. */ :root[data-theme="light"] { /* ⚠ Moves WITH the palette, always. Dropping this leaves the UA painting select popups, scrollbars, the caret and autofill in the base scheme — dark chrome around a light page, which looks like a rendering fault rather than a missing declaration. */ color-scheme: light; /* Andre's five, 2026-07-22 — the only source colours in the product. Ink #1C1917 warm near-black — text, and the one solid dark fill Paper #FAF9F7 warm white — the content canvas Surface #F5F4F0 a step darker — chrome, wells, headers Brand #2B6BDB DiscoveryONE blue — the SINGLE primary action White is not a brand colour; it is the sheet a card is printed on. */ --ink: #1C1917; --ink-soft: #57534E; /* the ONE approved muted grey */ --ground: #FAF9F7; /* paper: the content canvas */ --sheet: #FFFFFF; /* card: the printed sheet */ --rule: rgba(28, 25, 23, 0.12); /* THE BLUEPRINT SIGNATURE: a faint 32px drafting grid behind the cards, quiet enough to disappear under content and unmistakable in the gutters. This is the single most recognisable thing about the product's surface — without it the order site is merely the right colours. */ --canvas-image: linear-gradient(rgba(28, 25, 23, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 25, 23, 0.035) 1px, transparent 1px); /* The app's top bar: card white falling to surface, closed by a hairline. */ --chrome-bg: linear-gradient(to bottom, #FFFFFF, #F5F4F0); --chrome-border: rgba(28, 25, 23, 0.12); /* ⚠ NOT the wordmark blue #2F7BF6. That measures 4.0:1 on white and fails AA for normal text — and this token is link colour, not just a button fill. #2B6BDB is the same hue off the logo gradient at 4.97:1. Any future change stays above 4.5:1 on --sheet. */ --accent: #2B6BDB; --accent-deep: #1F55B4; /* pressed — 6.97:1 */ --accent-wash: rgba(43, 107, 219, 0.08); --on-accent: #FFFFFF; /* Status hues are meaning, not brand — taken from the app so "this failed" looks the same in the order site as it does inside the product. */ --ok: #1B6B45; --warn: #B27816; --bad: #B3261E; --warn-wash: #FDF6E7; --bad-wash: #FBEDEC; /* --shadow-soft, verbatim. Two layers: a 1px contact shadow that seats the card on the paper, and a wide soft one that lifts it off the grid. */ --shadow-card: 0 1px 2px rgba(28, 25, 23, 0.05), 0 4px 16px rgba(28, 25, 23, 0.04); /* The app's field focus: the border goes brand blue and a soft wash rings it. This is --sky-light (0.10) rather than --sky-soft (0.05) — both are the app's own tokens, and the order site's forms sit on white where the fainter of the two all but disappears. */ --focus-ring: 0 0 0 3px rgba(43, 107, 219, 0.10); /* The checkout's backdrop: an elevation drawing, which is about as on-brand as a background gets for a construction product. ⚠ ROOT-RELATIVE url(), leading slash. A relative url() inside a custom property resolves against the stylesheet that CONSUMES the var() — order-site.css, served from /_content/OrderSite.Core/ — not against this file. Written as url('img/…') it 404s and the backdrop is simply absent, with nothing on screen to say so. ⚠ The plate is WHITE LINES ON NEAR-BLACK, drawn for the dark theme. On paper it is inverted rather than re-exported: one file, and the two themes cannot drift apart. Lower opacity here because dark ink on a light ground carries much further than light ink on a dark one. */ --page-backdrop-opacity: 0.06; --page-backdrop-filter: invert(1); }