/* The brand palette and the typeface, for the whole site - authenticated and not. These are the Ingage Dealer Portal's tokens, copied from its app.css so the two products read as one. When the Portal's palette moves, this file is what moves with it; nothing else in this site should name a brand color directly. Everything that used to - Site.css, MarketingSite.css, pagecss/ShiftHub.css - reads these instead. WHY THE NAMES ARE THE PORTAL'S, ODDITIES INCLUDED --text-dark is the main text color, so in dark mode it flips to a light value. That reads wrong and it is deliberate: renaming it here would mean this file and the Portal's could no longer be diffed against each other, which is the one thing that keeps them from drifting apart. Same for --card and --white being separate tokens with the same light-mode value: --card is a surface that goes dark, --white is literally white and is also the text color on brand-blue fills. Backgrounds take --card. Text on a blue fill takes --white. WHERE DARK COMES FROM Two selectors, and BOTH are now written onto by the server - RootAuthenticated.master.cs ApplyThemeToHtmlTag(), off the same 'theme' cookie MainContentAuthenticated.master.cs reads to pick the DevExpress skin. That is new, and it is the whole of the white-flash fix. Until 2026-08-28 neither hook was in the served markup: RootAuthenticated.js set [data-bs-theme] on DOM ready and DevExpress added its own dxTheme- class from its client script, so the browser painted a dark-mode page LIGHT and repainted it dark a moment later. Measured: with neither hook present the ground computes #f9fafb, with either one it computes #0f1626. Keeping both selectors still matters. data-bs-theme drives this palette; the dxTheme- class is what the DevExpress skin's own rules key on, so the splitter panes and the grid chrome need it. The client-side setter also stays - it is what flips the theme without a reload. ShiftHub.css keys on the same pair for the same reasons. The unauthenticated master hard-codes data-bs-theme="light" and has no theme switch, so the marketing and sign-in pages only ever use the light block. WHERE IT SITS IN THE LINK ORDER After bootstrap, before every site stylesheet. Token definitions are order-independent - var() resolves at use - but the font rules are not: bootstrap sets body's family through --bs-body-font-family at the same specificity, so the last one linked wins. Loading after it also lets --bs-body-font-family be redefined below, which is what carries Inter into bootstrap's own components rather than just into body. fonts/inter/inter.css is linked separately, immediately before this file, rather than pulled in from here with @import. @import would serialise the two: the browser cannot discover the font stylesheet until it has fetched and parsed this one, which costs a round trip before the first glyph can load. Two links cost nothing and the Dealer Portal links its copy the same way. */ :root { --brand-primary: #105d89; --brand-primary-dark: #0d4a6e; --brand-primary-darker: #0a3854; --brand-primary-light: #e8f3f9; --brand-primary-mid: #d0e8f5; --brand-accent: #1a7ab5; --text-dark: #1a1a2e; --text-muted: #6b7280; /* One step lighter than --text-muted, for the third rank of text (a hint, a placeholder, a unit beside a number). The Portal has no token for it because nothing there needed one; the card pages do. Gray-400 to --text-muted's gray-500, so it sits in the same family rather than being picked by eye. */ --text-faint: #9ca3af; --border-color: #e5e7eb; /* One step softer than --border-color, for a rule inside a card rather than around one. Gray-100, same reasoning as --text-faint. */ --border-soft: #f3f4f6; --surface: #f9fafb; --card: #ffffff; --white: #ffffff; --success: #059669; --warning: #d97706; --danger: #dc2626; --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 12px rgba(0,0,0,.1); --shadow-lg: 0 10px 30px rgba(0,0,0,.12); --radius: 8px; --radius-lg: 12px; --transition: all .2s ease; /* Semantic tints. The Portal states these on .badge-* / .alert-* rather than as tokens; the card pages need them as tokens because a status rides a card there rather than a pill. Values are the Portal's, so a green pill is the same green in both products. --*-fill is the wash, --*-ink the text on it, and the spine color is the plain --success / --warning / --danger above. */ --tint-success: #d1fae5; --tint-success-ink: #065f46; --tint-warning: #fef3c7; --tint-warning-ink: #92400e; --tint-danger: #fee2e2; --tint-danger-ink: #991b1b; --tint-info: var(--brand-primary-light); --tint-info-ink: var(--brand-primary-dark); --tint-gray: #f3f4f6; --tint-gray-ink: #4b5563; /* The typeface, named once. Inter first (self-hosted, linked just before this file), then the stack the Portal falls back through. */ --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Code', Consolas, Menlo, monospace; /* Bootstrap's own components (navbar, buttons, modals, form controls on the marketing pages) read their family from this rather than inheriting, so redefining it is what actually moves them onto Inter. Its default is a long system stack. */ --bs-body-font-family: var(--font-sans); } /* Dark. Only the tokens change; no rule below this point in any stylesheet needs a dark twin unless it hard-codes a color a token does not cover. */ [data-bs-theme="dark"], .dxTheme-Office365Dark { /* A brighter brand blue: the light-mode #105d89 all but vanishes as text on a dark card. --brand-primary-darker is untouched - it anchors the marketing hero gradients, which are already dark in both themes. */ --brand-primary: #2b8ec9; --brand-primary-dark: #1a7ab5; --brand-primary-light: #14293c; --brand-primary-mid: #1d3c57; --brand-accent: #4aa3d8; --text-dark: #e8edf5; --text-muted: #9aa7ba; --text-faint: #7d8ca3; --border-color: #2b3950; --border-soft: #273348; --surface: #0f1626; --card: #1a2334; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --shadow-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.45); --shadow-lg: 0 10px 30px rgba(0,0,0,.55); /* Light mode fills these with pastels and deep text; dark swaps to translucent washes and lightened text. The Portal's badge values. */ --tint-success: rgba(16,185,129,.15); --tint-success-ink: #34d399; --tint-warning: rgba(245,158,11,.15); --tint-warning-ink: #fbbf24; --tint-danger: rgba(239,68,68,.15); --tint-danger-ink: #f87171; --tint-info: rgba(43,142,201,.18); --tint-info-ink: #9ccdea; --tint-gray: #273348; --tint-gray-ink: #b6c2d4; } /* --white stays literal white in dark mode, so it is not in the block above. Saying so here rather than trusting the absence to read as intent. */ /* Native widgets - a select's caret, a date picker, a scrollbar - take their colors from this rather than from the page's, so without it a dark page hands you a white spinner. Set on the root so it reaches everything, including the DevExpress controls that draw native inputs. */ [data-bs-theme="dark"], .dxTheme-Office365Dark { color-scheme: dark; } :root:not([data-bs-theme="dark"]) { color-scheme: light; } /* The typeface, applied. Inter reaches the DevExpress controls through the theme's own font setting instead (ASPxWebControl.GlobalThemeFont in MainContentAuthenticated.master.cs, and the font attribute on in Web.config for the pages that never call CheckTheme) - the skin sets font-family on its own elements at a specificity a plain body rule will not beat, so both halves are needed and they name the same stack. */ html, body { font-family: var(--font-sans); }