/* DIRTVERSE Brand Theme * Retro off-road racing identity: desert-cream paper base, olive-black ink, * and the raspberry → gold → jade rally livery ('72–'86 off-road racing). * Ported from the DIRTVERSE design-system site (dirtverse-main). * * Two layers: * 1. Raw brand tokens (--dh-*) — the source of truth for the palette. * 2. shadcn semantic vars — remapped onto the brand tokens so both * Tailwind utilities (bg-primary, text-muted-foreground, border, …) and * BlazorBlueprint components adopt the identity with no per-component work. * * Light by default (:root); .dark holds the real night variant — the header * toggle flips a .dark class on (see js/theme.js). Values stay hex/rgba * because canvas JS reads them via getComputedStyle (Canvas 2D can't parse * oklch()). * * Per-deploy skins (/branding/theme.css, loaded last) may pin any of these in * a :root block — :root and .dark tie on specificity, so the later stylesheet * wins in BOTH modes. That is how the DirtHub.Tech deployment stays dark-only * (DirtHub2.Backend/Branding/dirthub-tech.css). */ :root { /* ── Raw brand tokens ───────────────────────────────────────────────── */ /* Base / neutrals */ --dh-paper: #fbf3de; /* desert cream — page base */ --dh-paper-2: #f3e7c8; /* deeper sand — raised surface */ --dh-ink: #2c2a20; /* olive-black — text + outline */ --dh-olive: #3e3a2d; /* mud panel — dark surface */ --dh-olive-2: #55503e; /* muted olive — secondary text */ --dh-sand: #c9be9c; /* dusty neutral mid-tone */ --dh-line: #e2d3ac; /* hairline dividers on cream */ /* Raspberry ramp (primary action) */ --dh-rasp: #d8506b; --dh-rasp-tint: #f0b7c3; --dh-rasp-deep: #b33a54; /* Sand-gold ramp (secondary / wordmark accent) */ --dh-gold: #ebc468; --dh-gold-bright: #f6e3ad; --dh-gold-deep: #d3a63f; --dh-on-gold: #2c2a20; /* Jade ramp (accent / success) */ --dh-jade: #54c596; --dh-jade-tint: #b4e6cf; --dh-jade-deep: #34996e; /* Legacy earth accents (charts, org branding) */ --dh-orange: #F17D25; --dh-orange-deep: #D9661A; --dh-mud: #7A5230; --dh-mud-light: #9A6E45; /* Legacy warm-black ink ramp — CONSTANT in both modes. Its only remaining * consumers are dark-locked chrome (video overlays, map HUD chips) that * must stay light-on-dark regardless of the site theme. Themed markup uses * the semantic vars below instead. */ --dh-black: #0E0D0C; --dh-ink-900: #161514; --dh-ink-800: #1C1A19; --dh-ink-700: #272524; --dh-ink-600: #2F2C2B; --dh-ink-500: #3A3735; --dh-ink-400: #57524F; --dh-ink-300: #8A837E; --dh-ink-200: #B8B2AD; --dh-ink-100: #E8E4E0; --dh-white: #FFFFFF; /* Telemetry / status */ --dh-live: #d8506b; /* raspberry doubles as the live red */ --dh-signal-green: #54c596; /* jade */ --dh-signal-blue: #4AA8FF; --dh-signal-purple: #8B7CF6; --dh-signal-cyan: #2DD4D4; /* Borders. --dh-border-strong (→ --input) is SOLID ink — hard component * outlines (buttons, chips, form fields, frames) are the DIRTVERSE * signature. --dh-border (→ --border) stays soft: it carries the swept * hairline dividers, which would overwhelm at full ink. */ --dh-border: rgba(44, 42, 32, 0.28); --dh-border-strong: #2c2a20; --dh-border-gold: rgba(211, 166, 63, 0.45); --hairline: #e2d3ac; /* Stamped-metal offset shadow ink ("clunk"); flips to black in dark mode. */ --clunk: #2c2a20; /* Press-room film grain — thresholded ink specks on transparent ground. * Skins that want no grain pin --texture-grain: none. */ --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0.4 0.8 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* ── shadcn semantic mappings — LIGHT (press room) ──────────────────── */ --background: var(--dh-paper); --foreground: var(--dh-ink); --card: #ffffff; --card-foreground: var(--dh-ink); --popover: #ffffff; --popover-foreground: var(--dh-ink); /* Layered surfaces: canvas < panel < raised */ --surface-1: var(--dh-paper); --surface-2: #ffffff; --surface-3: var(--dh-paper-2); --primary: var(--dh-rasp); --primary-foreground: var(--dh-paper); --secondary: var(--dh-gold); --secondary-foreground: var(--dh-ink); --muted: var(--dh-paper-2); --muted-foreground: var(--dh-olive-2); --accent: var(--dh-jade); --accent-foreground: var(--dh-ink); --destructive: var(--dh-rasp-deep); --destructive-foreground: var(--dh-paper); --border: var(--dh-border); --input: var(--dh-border-strong); --ring: var(--dh-rasp); /* Panel radius — matches the design system's --radius-dirt (14px). */ --radius: 0.875rem; /* Charts — the livery */ --chart-1: #d8506b; --chart-2: #ebc468; --chart-3: #54c596; --chart-4: #a17e28; --chart-5: #1f6b4b; /* Sidebar (admin shell) — olive panel in both modes */ --sidebar-background: var(--dh-olive); --sidebar-foreground: var(--dh-paper); --sidebar-primary: var(--dh-rasp); --sidebar-primary-foreground: var(--dh-paper); --sidebar-accent: var(--dh-olive-2); --sidebar-accent-foreground: var(--dh-paper); --sidebar-border: var(--dh-ink); --sidebar-ring: var(--dh-gold); /* Alerts */ --alert-success: var(--dh-jade-deep); --alert-success-foreground: #1f6b4b; --alert-success-bg: rgba(84, 197, 150, 0.16); --alert-info: var(--dh-signal-blue); --alert-info-foreground: #1d4f80; --alert-info-bg: rgba(74, 168, 255, 0.14); --alert-warning: var(--dh-gold-deep); --alert-warning-foreground: #a17e28; --alert-warning-bg: rgba(235, 196, 104, 0.2); --alert-danger: var(--dh-rasp-deep); --alert-danger-foreground: #832740; --alert-danger-bg: rgba(216, 80, 107, 0.14); } /* ── Night sheet — ink ground, olive panels, paper type ───────────────── */ .dark { --background: var(--dh-ink); --foreground: var(--dh-paper); --card: var(--dh-olive); --card-foreground: var(--dh-paper); --popover: var(--dh-olive); --popover-foreground: var(--dh-paper); --surface-1: var(--dh-ink); --surface-2: var(--dh-olive); --surface-3: var(--dh-olive-2); --primary: var(--dh-rasp); --primary-foreground: var(--dh-paper); --secondary: var(--dh-gold); --secondary-foreground: var(--dh-ink); --muted: var(--dh-olive-2); --muted-foreground: var(--dh-line); --accent: var(--dh-jade); --accent-foreground: var(--dh-ink); --destructive: var(--dh-rasp); --destructive-foreground: var(--dh-paper); --dh-border: rgba(251, 243, 222, 0.35); --dh-border-strong: #fbf3de; /* solid paper — the night-sheet outline */ --border: var(--dh-border); --input: var(--dh-border-strong); --ring: var(--dh-gold); --hairline: #4a4636; /* Offset shadows go pure black — ink shadows vanish on olive panels. */ --clunk: #000000; --alert-success: var(--dh-jade); --alert-success-foreground: #b4e6cf; --alert-success-bg: rgba(84, 197, 150, 0.14); --alert-info: var(--dh-signal-blue); --alert-info-foreground: #cfe6ff; --alert-info-bg: rgba(74, 168, 255, 0.12); --alert-warning: var(--dh-gold); --alert-warning-foreground: #f6e3ad; --alert-warning-bg: rgba(235, 196, 104, 0.14); --alert-danger: var(--dh-rasp); --alert-danger-foreground: #f0b7c3; --alert-danger-bg: rgba(216, 80, 107, 0.14); } /* One continuous sheet of film grain over the whole press run — multiply * keeps it to the paper; skins pin --texture-grain: none to turn it off. */ body::after { content: ""; position: fixed; inset: 0; z-index: 80; background-image: var(--texture-grain); background-size: 240px 240px; opacity: 0.2; mix-blend-mode: multiply; pointer-events: none; }