/* ===== TrackSpace design tokens (sourced from TrackTracker design system) ===== */ :root { --tt-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif; --tt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --tt-font-display: var(--tt-font-sans); --tt-brand-navy: #052767; --tt-brand-plum: #3a0647; --tt-brand-sidebar: linear-gradient(180deg, #052767 0%, #3a0647 70%); --tt-brand-amber: #FF7A00; /* apex mark - the one constant brand accent */ --tt-primary: #1b6ec2; --tt-primary-border: #1861ac; --tt-primary-rgb: 27, 110, 194; --tt-primary-text: #ffffff; --tt-cta: #d5001c; /* call-to-action / most-important action - replaces the Card/Panel --tt-primary→red override */ --tt-cta-border: #b00018; --tt-cta-rgb: 213, 0, 28; --tt-cta-on-dark: #ff5a6e; /* lightened Guards-Red for accents/eyebrows on always-dark hero shells (theme-independent) */ /* Button roles - name the action hierarchy by role, not by Bootstrap heritage. Each maps to a themed primitive, so it adapts across light / dark / paddock with no per-theme overrides. (`--tt-primary` stays as the legacy accent alias for links / accents / hero buttons.) */ --tt-btn-primary: var(--tt-ink-1); /* dominant affirmative action - black */ --tt-btn-primary-text: var(--tt-surface-0); /* inverse of ink-1, so it stays legible in every theme */ --tt-btn-secondary: var(--tt-surface-0); /* lower-emphasis companion - white, bordered */ --tt-btn-secondary-text: var(--tt-ink-1); --tt-btn-secondary-border: var(--tt-line); --tt-btn-cta: var(--tt-cta); /* single most-important action - Guards-Red */ --tt-btn-cta-text: #ffffff; --tt-btn-hero: var(--tt-primary); /* buttons set on a dark hero - the themeable accent (was "primary") */ --tt-btn-hero-text: var(--tt-primary-text); --tt-btn-danger: var(--tt-danger); /* destructive action */ --tt-btn-danger-text: #ffffff; --tt-link: #0071c1; --tt-accent: #6366f1; --tt-accent-soft: #eef2ff; --tt-ink-1: #0f172a; --tt-ink-2: #334155; --tt-ink-3: #475569; --tt-ink-4: #94a3b8; --tt-line: #cdd5f5; --tt-line-soft: #d6d5d5; --tt-surface-0: #ffffff; --tt-surface-1: #f7f7f7; --tt-surface-2: #e8e8ec; /* chrome backdrop behind the layout; pages render on surface-1 */ --tt-surface-inverse: #0f172a; /* always-dark spotlight band (white text sits on it in every theme) */ /* App bar / chrome - tokenized so it responds to the active theme */ --tt-bar-bg: #e0e0e0; --tt-bar-ink: #0e1418; --tt-bar-border: var(--tt-line-soft); --tt-avatar-bg: #5f6368; --tt-success: #13c47d; --tt-success-soft: #AEFF9E; --tt-warning: #96e617; --tt-warning-soft: #ffff00; --tt-danger: #ee0606; --tt-danger-soft: #ED7677; --tt-danger-strong: crimson; /* Wear-life / status severity - colorblind-safe lightness ramp (crit dark < ok mid < warn light); forecast on a separate blue axis. */ --tt-status-ok: #16a34a; --tt-status-warn: #facc15; /* fill / badge (light yellow) */ --tt-status-warn-on: #422006; /* text/icon ON a warn fill */ --tt-status-warn-text: #854d0e; /* warn-colored text on a light surface */ --tt-status-warn-border: #ca8a04; /* warn pill outline (separates pill from a warn tint) */ --tt-status-crit: #c62828; /* fill + text (deep red, still darker than ok-green) */ --tt-status-forecast: #2563eb; /* forecast projection */ --tt-status-warn-surface: #fef9c3; /* warn row/background tint */ --tt-status-crit-surface: #fbcdc9; /* crit row/background tint */ /* ===== Elevation (shadow) scale ===== Shadow encodes height, not hue. One per-theme ambient tint (--tt-shadow-rgb) is layered at fixed alphas per step, so elevation stays decoupled from color yet adapts across light / dark / paddock. Focus + glow rings intentionally inherit the local accent (--tt-primary-rgb / --tt-cta-rgb) so a ring is red inside Card/Panel and blue elsewhere - matching the button-role scoping. Structural offset "shadows" (bars, ticks, inset borders) are NOT elevation and stay hand-rolled with color tokens. */ --tt-shadow-rgb: 15, 23, 42; /* slate ink - light/default ambient tint */ --tt-shadow-xs: 0 1px 3px rgba(var(--tt-shadow-rgb), 0.22); /* small "hardware" controls: toggle knob, segmented tab */ --tt-shadow-sm: 0 1px 2px rgba(var(--tt-shadow-rgb), 0.05), 0 4px 12px rgba(var(--tt-shadow-rgb), 0.05); /* resting cards, panels, raised chrome */ --tt-shadow-md: 0 4px 8px rgba(var(--tt-shadow-rgb), 0.06), 0 12px 24px rgba(var(--tt-shadow-rgb), 0.08); /* hover-lift on cards / frames */ --tt-shadow-lg: 0 8px 24px rgba(var(--tt-shadow-rgb), 0.14); /* popovers, dropdowns, appbar menu */ --tt-shadow-modal: 0 20px 60px rgba(var(--tt-shadow-rgb), 0.22); /* dialogs, sheets */ --tt-shadow-focus: 0 0 0 3px rgba(var(--tt-primary-rgb), 0.12); /* ring - standard inputs / fields */ --tt-shadow-focus-tight: 0 0 0 2px rgba(var(--tt-primary-rgb), 0.18); /* ring - dense grid controls */ --tt-shadow-glow: 0 3px 8px rgba(var(--tt-cta-rgb), 0.32); /* CTA emphasis glow */ /* ===== Radius scale ===== Value-named like spacing (the number IS the px value). Clusters: 2 = detail (ticks/swatches/badges), 4 = controls (buttons/chips/inputs), 8 = modals/tiles, 12 = cards (per DS), 16 = hero / bottom-sheet. Plus 999px pills; squares (0) and circles (50%) stay literal - they're not radii on the scale. */ --tt-radius-2: 2px; --tt-radius-4: 4px; --tt-radius-8: 8px; --tt-radius-12: 12px; --tt-radius-16: 16px; --tt-radius-pill: 999px; --tt-border-w: 1px; /* the standard hairline width (wider bespoke widths stay literal) */ /* ===== Spacing scale ===== Value-named: the token number IS the pixel value. The app's real cadence is a 2px rhythm through 24px (6/10/14/18/22 are used as heavily as the 4px steps), then 4px steps to 48, then 8px for large gaps. Odd nudges (3/5/7/9px) and rare one-offs (72/84/92px) stay literal - they're not part of the scale. */ --tt-s-2: 2px; --tt-s-4: 4px; --tt-s-6: 6px; --tt-s-8: 8px; --tt-s-10: 10px; --tt-s-12: 12px; --tt-s-14: 14px; --tt-s-16: 16px; --tt-s-18: 18px; --tt-s-20: 20px; --tt-s-22: 22px; --tt-s-24: 24px; --tt-s-28: 28px; --tt-s-32: 32px; --tt-s-36: 36px; --tt-s-40: 40px; --tt-s-44: 44px; --tt-s-48: 48px; --tt-s-56: 56px; --tt-s-64: 64px; --tt-text-xs: 0.75rem; --tt-text-sm: 0.85rem; --tt-text-base: 1rem; --tt-text-md: 1.1rem; --tt-text-lg: 1.25rem; --tt-text-xl: 1.5rem; --tt-text-2xl: 1.8rem; --tt-text-3xl: 2rem; /* Display sizes - the thin, oversized heading treatment. Extends the scale past 3xl; bespoke per-hero sizes (2.5-4.2rem, mostly one-offs) stay literal. */ --tt-text-4xl: 2.4rem; /* page-title h1 */ --tt-text-5xl: 3rem; /* large display */ --tt-text-6xl: 4rem; /* hero display */ /* Weights - 200/300 added for the light display headings (the DS's thin, oversized look). */ --tt-weight-light: 200; /* thin display headings */ --tt-weight-book: 300; /* light hero / lede emphasis */ --tt-weight-regular: 400; --tt-weight-medium: 500; --tt-weight-semibold: 600; --tt-weight-bold: 700; --tt-tracking-wide: 0.08em; --tt-leading-tight: 1.25; --tt-leading-normal: 1.5; } [data-theme="dark"] { --tt-brand-sidebar: linear-gradient(180deg, #020a1f 0%, #1a0322 70%); --tt-primary: #4ea4ed; --tt-primary-border: #2f7fc4; --tt-link: #5bb1ec; --tt-accent: #818cf8; --tt-accent-soft: #1e1b4b; --tt-ink-1: #f1f5f9; --tt-ink-2: #cbd5e1; --tt-ink-3: #94a3b8; --tt-ink-4: #64748b; --tt-line: #1e293b; --tt-line-soft: #334155; --tt-surface-0: #0b1220; --tt-surface-1: #111827; --tt-surface-2: #0f172a; --tt-surface-inverse: #1e293b; /* lifted off the near-black card so the band stays distinct */ --tt-bar-bg: #1a2230; --tt-bar-ink: #e2e8f0; --tt-avatar-bg: #475569; /* Shadows read weakly on dark surfaces - re-tint to pure black and boost alphas. */ --tt-shadow-rgb: 0, 0, 0; --tt-shadow-xs: 0 1px 3px rgba(var(--tt-shadow-rgb), 0.50); --tt-shadow-sm: 0 1px 2px rgba(var(--tt-shadow-rgb), 0.40), 0 4px 12px rgba(var(--tt-shadow-rgb), 0.40); --tt-shadow-md: 0 4px 8px rgba(var(--tt-shadow-rgb), 0.45), 0 12px 24px rgba(var(--tt-shadow-rgb), 0.50); --tt-shadow-lg: 0 8px 24px rgba(var(--tt-shadow-rgb), 0.55); --tt-shadow-modal: 0 20px 60px rgba(var(--tt-shadow-rgb), 0.70); } /* Paddock - functional high-sun theme: pure-white surfaces, black hairlines. Ported from the TrackTracker DS ui_kits/web/palettes.css [data-palette="paddock"]. */ [data-theme="paddock"] { --tt-primary: #d5001c; --tt-primary-border: #b00018; --tt-link: #0e1418; --tt-accent: #d5001c; --tt-accent-soft: #fdecee; --tt-ink-1: #000000; --tt-ink-2: #0e1418; --tt-ink-3: #313639; --tt-ink-4: #626669; --tt-line: #0e1418; --tt-line-soft: #c4c4c8; --tt-surface-1: #ffffff; --tt-surface-2: #ffffff; --tt-bar-bg: #ffffff; --tt-bar-ink: #0e1418; --tt-bar-border: #0e1418; /* High-sun light theme - keep the :root alphas, only re-tint the ambient shadow. */ --tt-shadow-rgb: 14, 20, 24; } *, *::before, *::after { box-sizing: border-box; } button { font-family: inherit; } html, body { margin: 0; padding: 0; height: 100%; font-family: var(--tt-font-sans); font-size: var(--tt-text-base); line-height: var(--tt-leading-normal); color: var(--tt-ink-1); background: var(--tt-surface-2); } /* ===== Typography utilities ===== */ h1 { font-size: var(--tt-text-4xl); font-weight: var(--tt-weight-light); line-height: var(--tt-leading-tight); letter-spacing: -0.01em; margin: 0 0 var(--tt-s-18); } .tt-eyebrow { text-transform: uppercase; font-size: var(--tt-text-xs); letter-spacing: var(--tt-tracking-wide); color: var(--tt-ink-4); font-weight: var(--tt-weight-semibold); margin: 0 0 var(--tt-s-8); } .tt-label { font-size: var(--tt-text-xs); font-weight: var(--tt-weight-regular); color: var(--tt-ink-4); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--tt-s-4); } .tt-field { font-size: var(--tt-text-md); font-weight: var(--tt-weight-bold); color: var(--tt-ink-1); margin: 0; } /* ===== Button utilities ===== */ .tt-btn { display: inline-flex; align-items: center; gap: var(--tt-s-8); padding: var(--tt-s-8) var(--tt-s-16); border-radius: var(--tt-radius-8); font-family: var(--tt-font-sans); font-size: var(--tt-text-base); font-weight: var(--tt-weight-medium); cursor: pointer; border: var(--tt-border-w) solid transparent; text-decoration: none; line-height: 1.5; } /* Disabled - dimmed, matching the Modal and ConsumablesGrid buttons. Declared once here so a disabled .tt-btn never renders as if it were actionable, whatever its role variant. The variant :hover rules below are guarded so a disabled button stays visually inert. */ .tt-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Role-named variants - see the button-role tokens in :root. */ .tt-btn-primary { background: var(--tt-btn-primary); border-color: var(--tt-btn-primary); color: var(--tt-btn-primary-text); } .tt-btn-primary:hover:not(:disabled) { background: var(--tt-ink-2); border-color: var(--tt-ink-2); } .tt-btn-secondary { background: var(--tt-btn-secondary); border-color: var(--tt-btn-secondary-border); color: var(--tt-btn-secondary-text); } .tt-btn-secondary:hover:not(:disabled) { background: var(--tt-surface-1); } .tt-btn-cta { background: var(--tt-btn-cta); border-color: var(--tt-cta-border); color: var(--tt-btn-cta-text); } .tt-btn-cta:hover:not(:disabled) { background: var(--tt-cta-border); } .tt-btn-hero { background: var(--tt-btn-hero); border-color: var(--tt-primary-border); color: var(--tt-btn-hero-text); } .tt-btn-hero:hover:not(:disabled) { background: var(--tt-primary-border); } .tt-btn-danger { background: var(--tt-btn-danger); border-color: var(--tt-btn-danger); color: var(--tt-btn-danger-text); } .tt-btn-danger:hover:not(:disabled) { filter: brightness(0.88); } /* Legacy aliases - kept while components migrate to the role names above. `.tt-btn-outline` / `.tt-btn-ghost` are the older spelling of the secondary button. */ .tt-btn-outline { background: transparent; border-color: var(--tt-line-soft); color: var(--tt-ink-2); } .tt-btn-outline:hover:not(:disabled) { background: var(--tt-surface-1); } .tt-btn-ghost { background: var(--tt-surface-0); border-color: var(--tt-line-soft); color: var(--tt-ink-1); } .tt-btn-ghost:hover:not(:disabled) { background: var(--tt-surface-2); } /* ===== Stat row (label + value pair, space-between) ===== */ .tt-stat-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--tt-s-12); } .tt-stat-row .tt-label { margin: 0; font-size: 11px; color: var(--tt-ink-4); text-transform: uppercase; letter-spacing: 0.06em; font-weight: var(--tt-weight-semibold); white-space: nowrap; } .tt-val { font-size: 13px; color: var(--tt-ink-2); text-align: right; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: var(--tt-border-w) solid #26b050; } .invalid { outline: var(--tt-border-w) solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .darker-border-checkbox.form-check-input { border-color: #929292; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ===== Data table ===== */ .tf-table { width: 100%; border-collapse: collapse; margin-top: var(--tt-s-16); font-size: var(--tt-text-sm); color: var(--tt-ink-1); } .tf-table th { padding: var(--tt-s-8) var(--tt-s-12); text-align: left; font-size: var(--tt-text-xs); font-weight: var(--tt-weight-semibold); letter-spacing: var(--tt-tracking-wide); text-transform: uppercase; color: var(--tt-ink-3); border-bottom: 2px solid var(--tt-line); } .tf-table td { padding: var(--tt-s-8) var(--tt-s-12); border-bottom: var(--tt-border-w) solid var(--tt-line-soft); vertical-align: middle; } .tf-table tbody tr:last-child td { border-bottom: none; } .tf-table tbody tr:hover td { background: var(--tt-surface-1); } /* ===== Card info-block utilities ===== */ /* Dot-separated stat run (TrackHistory, StockBreakdown) */ .tt-stock { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--tt-s-4); color: var(--tt-ink-2); font-size: 13px; } /* Flow variant - entries run together as wrapping inline text with inline bullet separators, instead of each item breaking to its own flex line. Used where entries are long (e.g. car history: best lap per track). */ .tt-stock--flow { display: block; line-height: 1.4; } .tt-stock strong { font-weight: var(--tt-weight-semibold); color: var(--tt-ink-1); font-variant-numeric: tabular-nums; } .tt-stock__zero { color: var(--tt-ink-4); } .tt-stock__zero strong { color: var(--tt-ink-4); font-weight: var(--tt-weight-medium); } .tt-stock__dot { color: var(--tt-ink-4); padding: 0 1px; } /* Product / brand chip list */ .tt-product-chips { display: inline-flex; flex-wrap: wrap; gap: var(--tt-s-4); } .tt-product-chip { display: inline-flex; align-items: center; padding: 3px var(--tt-s-10); font-size: 12px; font-weight: var(--tt-weight-medium); color: var(--tt-ink-1); background: var(--tt-surface-2); border: var(--tt-border-w) solid var(--tt-line-soft); border-radius: var(--tt-radius-pill); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .tt-product-chip--more { background: transparent; border-color: var(--tt-line); color: var(--tt-ink-3); }