/*
* Varial Platform — Brand & Component Overrides
*
* Loaded after bootstrap.min.css and layout.css.
* Owns: design tokens, typography, Bootstrap component overrides,
* sidebar visual styling, and app-chrome details.
*/
/* ----------------------------------------
1. Design Tokens (CSS Custom Properties)
---------------------------------------- */
:root {
/* The page (base.html) tells
the browser it supports both, so absent anything more specific it renders
native chrome (the page scrollbar, form control defaults) to match the OS
preference — not the app's own light/dark toggle. On a light-themed page
with a dark-mode OS, that rendered the main scrollbar dark against the
cream background (#3731). Pin it to the active data-bs-theme (overridden
below for dark) so native chrome always matches what's actually on screen. */
color-scheme: light;
/* Primary palette — bright mid blue */
--varial-primary: #2563EB;
--varial-primary-dark: #1D4ED8;
--varial-primary-light: #60A5FA;
/* App shell navigation — very dark navy */
--varial-nav: #0D1B2E;
/* Accent — amber/gold (action/energy) — aliases the amber family */
--varial-accent: var(--varial-amber);
--varial-accent-dark: var(--varial-amber-dark);
--varial-accent-light: var(--varial-amber-light);
/* Secondary — green (UI accents, completed states, positive deltas) */
--varial-secondary: #16A34A;
--varial-secondary-dark: #15803D;
--varial-secondary-light:#4ADE80;
/* Shorthand aliases for green — map to secondary tokens */
--varial-green: var(--varial-secondary);
--varial-green-dark: var(--varial-secondary-dark);
--varial-green-light: var(--varial-secondary-light);
/* Amber — also used as "Gold" in color family palette */
--varial-amber: #F59E0B;
--varial-amber-dark: #D97706;
--varial-amber-light: #FCD34D;
/* Premium — the "PRO"/paid-tier accent (#4189), on the brand violet family
(--varial-purple #9333EA; dark/light from the VIOLET styleguide swatch). A
deliberate non-warning colour distinct from the FREE badge's primary blue; used
for the VarialView paid row's badge + Buy-now CTA so both read as one coherent
premium treatment. */
--varial-premium: var(--varial-purple, #9333EA);
--varial-premium-dark: #6A25A8;
--varial-premium-light: #B16CF0;
/* Status */
--varial-danger: #DC2626;
--varial-info: #0EA5E9;
--varial-success: #059669;
--varial-warning: #F59E0B;
/* Style exploration palettes (styleguide previews only) */
--varial-alt-a-nav: #1F3A8A;
--varial-alt-a-main: #F5F7FC;
--varial-alt-a-surface: var(--varial-white, #FFFFFF);
--varial-alt-a-line: #D7DEEC;
--varial-alt-a-accent: #0EA5E9;
--varial-alt-a-copy: #64748B;
--varial-alt-b-nav: #1F2937;
--varial-alt-b-main: #F7F8F9;
--varial-alt-b-surface: var(--varial-white, #FFFFFF);
--varial-alt-b-line: #D7DCE3;
--varial-alt-b-accent: #0F766E;
--varial-alt-b-copy: #6B7280;
--varial-alt-b-amber: #C18A1A;
--varial-alt-b-amber-dark:#9B6F13;
--varial-alt-b-amber-light:#D9B25E;
--varial-alt-c-nav: #1E3A34;
--varial-alt-c-main: #F7F7F3;
--varial-alt-c-surface: var(--varial-white, #FFFFFF);
--varial-alt-c-line: #D9DDD3;
--varial-alt-c-accent: #B45309;
--varial-alt-c-copy: #6B6F62;
--varial-alt-c-warning: #B06C17;
--varial-alt-d-nav: #2A2F36;
--varial-alt-d-main: #F5F6F7;
--varial-alt-d-surface: var(--varial-white, #FFFFFF);
--varial-alt-d-line: #D9DDE1;
--varial-alt-d-accent: #4B5563;
--varial-alt-d-copy: #6B7280;
--varial-alt-e-nav: #111827;
--varial-alt-e-main: #EEF6FF;
--varial-alt-e-surface: var(--varial-white, #FFFFFF);
--varial-alt-e-line: #C9D8F2;
--varial-alt-e-accent: #FF4D6D;
--varial-alt-e-copy: #4B5563;
--varial-alt-e-primary-light: #1D4ED8;
--varial-alt-e-success: #14B8A6;
--varial-alt-e-glow: rgba(255, 77, 109, 0.28);
/* Brand tertiary accents */
--varial-fuchsia: #FF4D6D;
--varial-fuchsia-dark: #C94359;
--varial-fuchsia-light: #F46D80;
/* Pastel backgrounds — light tints for icon badges / accents */
--varial-primary-bg: #bfdbfe;
--varial-primary-bg-light: #dbeafe;
--varial-green-bg: #bbf7d0;
--varial-green-bg-light: #dcfce7;
--varial-purple: #9333EA;
--varial-purple-bg: #e9d5ff;
--varial-purple-bg-light: #f3e8ff;
/* --varial-amber duplicate removed — canonical value is #F59E0B above */
--varial-amber-bg: #fde68a;
--varial-amber-bg-light: #fef3c7;
/* Surfaces — warm cream (Chelsea kit ivory) */
--varial-bg: #FAF7EE;
--varial-bg-subtle: #F0EBDA;
--varial-border: #E7E0CC;
/* Interactive-control boundary (form inputs). Meets WCAG 2.1 AA 1.4.11
(3:1) on the white field fill — 3.39:1. --varial-border above stays the
light cream edge for decorative card borders/dividers, which are exempt
from the UI-component contrast bar (#3189). */
--varial-border-interactive: #948B72;
/* Neutrals — warm-leaning gray scale */
--varial-gray-50: #F8F7F5;
--varial-gray-100: #F1F0ED;
--varial-gray-200: #E4E2DC;
--varial-gray-300: #CCC9C3;
--varial-gray-400: #6E6A63; /* darkened for WCAG AA text contrast — 5.02:1 cream / 4.51:1 subtle (#3189) */
--varial-gray-500: #6B6763;
--varial-gray-600: #4D4A46;
--varial-gray-700: #38352F;
--varial-gray-800: #211F1C;
--varial-gray-900: #131210;
/* Typography */
--varial-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--varial-font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--varial-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
/* Modular type scale */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
/* Spacing */
--varial-space-xs: 0.25rem;
--varial-space-sm: 0.5rem;
--varial-space-md: 1rem;
--varial-space-lg: 1.5rem;
--varial-space-xl: 2rem;
--varial-space-2xl: 3rem;
/* Borders & Shadows */
--varial-radius-sm: 0.25rem;
--varial-radius-md: 0.375rem;
--varial-radius-lg: 0.5rem;
--varial-radius-xl: 0.75rem;
--varial-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--varial-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--varial-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
/* Compact density — data-heavy UI elements */
--varial-density-2xs: 2px;
--varial-density-xs: 4px;
--varial-density-sm: 6px;
--varial-density-md: 8px;
--varial-density-lg: 12px;
--varial-density-xl: 16px;
/* Brand whites — single source of truth for any direct #fff/#ffffff usage. */
--varial-white: #ffffff;
/* Card surfaces */
--varial-card-bg: var(--varial-white, #ffffff);
--varial-card-border: var(--varial-border);
--varial-card-shadow: var(--varial-shadow-sm);
--varial-card-radius: var(--varial-radius-lg);
/* Card spacing — single source of truth, tune here to scale density globally.
Used by static/css/components/cards.css and row gutters in card-grid pages. */
--varial-card-gutter: var(--varial-space-md, 1rem); /* gap between cards in a row */
--varial-card-body-padding: var(--varial-space-md, 1rem); /* standard interior padding */
--varial-card-body-padding-compact: 0.625rem 0.75rem; /* dense data layouts */
--varial-card-body-padding-metric: 0.875rem var(--varial-space-md, 1rem);
--varial-card-header-padding: 0.625rem var(--varial-space-md, 1rem);
--varial-card-header-padding-compact: 0.375rem 0.75rem;
--varial-card-header-padding-flush: var(--varial-space-sm, 0.5rem) var(--varial-space-md, 1rem);
/* App chrome sizing */
--varial-topnav-height: 56px;
--varial-sidebar-inner-inset: 0.75rem;
/* Subtle square-grid textures */
--varial-shell-grid-line: rgba(27, 58, 160, 0.045);
--varial-shell-grid-size: 14px;
--varial-sidebar-stripe-line: rgba(255, 255, 255, 0.04);
--varial-sidebar-stripe-step: 4px;
/* MarketView VWAP comparison-row backgrounds (Tabulator-overridden).
Slot-B mirrors --varial-secondary (green); active-row mirrors
Bootstrap's primary blue at the same alpha. Keep both as raw rgba
literals (rather than color-mix(...)) for simpler theming + no new
CSS-feature dependency. */
--varial-vwap-slot-b-bg: rgba(22, 163, 74, 0.06);
--varial-vwap-row-active-bg: rgba(13, 110, 253, 0.06);
/* Data table row sizing */
--varial-row-height: 40px;
--varial-row-height-compact: 32px; /* read-only tables (dashboard, review) */
--varial-row-height-dense: 28px; /* wizard/editable tables */
--varial-cell-px: 8px;
--varial-cell-py: 4px;
--varial-cell-px-dense: 6px; /* wizard/editable cell horizontal padding */
--varial-cell-py-dense: 2px; /* wizard/editable cell vertical padding */
/* Transitions */
--varial-transition-fast: 150ms ease;
--varial-transition-base: 250ms ease;
/* ── Bootstrap body typography — flows into ALL BS components automatically.
Setting these here means nav-links, badges, etc. all inherit the Varial
compact scale. NOTE: some BS5 components (dropdown, tooltip, popover) set
their own font vars locally on the element — those require direct overrides
in Section 3b below; `:root` values are ignored for those components. ── */
--bs-body-font-family: var(--varial-font-family);
--bs-body-font-size: 0.8125rem; /* 13px */
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
/* Map Varial primary to Bootstrap's primary-rgb for bg-primary consistency */
--bs-primary: var(--varial-primary);
--bs-primary-rgb: 37, 99, 235;
/* ----------------------------------------
Domain Chart Colors
To change any color: edit here, it flows
through CSS and JS (varial-colors.js).
---------------------------------------- */
/* Scenario series (up to 5) — brand five-colour palette */
--chart-scenario-1: var(--varial-primary); /* S1 — primary blue */
--chart-scenario-2: var(--varial-amber); /* S2 — amber */
--chart-scenario-3: #16A34A; /* S3 — green */
--chart-scenario-4: #FF4D6D; /* S4 — fuchsia */
--chart-scenario-5: #9333EA; /* S5 — violet */
/* Weather year band opacity (applied to scenario color) */
--chart-band-opacity: 0.12;
/* NEM Regions — aligned with S1–S5 brand palette */
--chart-region-nsw: #2563EB; /* NSW — primary blue (S1) */
--chart-region-qld: #F59E0B; /* QLD — gold (S2) */
--chart-region-vic: #16A34A; /* VIC — green (S3) */
--chart-region-sa: #FF4D6D; /* SA — fuchsia (S4) */
--chart-region-tas: #9333EA; /* TAS — violet (S5) */
/* Generation technologies */
--chart-tech-solar: #F59E0B;
--chart-tech-rooftop-pv: #FCD34D;
--chart-tech-wind: #93C5FD;
--chart-tech-wind-offshore:#60A5FA;
--chart-tech-black-coal: #1C1917;
--chart-tech-brown-coal: #92400E;
--chart-tech-gas-ccgt: #6B7280;
--chart-tech-gas-ocgt: #9CA3AF;
--chart-tech-gas-steam: #4B5563;
--chart-tech-hydro: #0284C7;
--chart-tech-pumped-hydro: #0369A1;
--chart-tech-battery: #8B5CF6;
--chart-tech-diesel: #DC2626;
/* teal — REZ / flow capacity limit line */
--chart-rez-limit: #0D9488;
/* Chart axis grid + zero line — read by varial.plotlyLayout() (varial-colors.js)
so every Plotly chart that uses the shared layout picks the theme-correct,
subtle grid. Edit here (not JS) per the static/ CSS-token rule. */
--chart-grid: rgba(204, 201, 195, 0.35);
--chart-zeroline: #B4B0AA;
/* Dark warm-grey (gray-700) so axis ticks/titles read clearly on the cream page.
Was gray-500 (#6B6763), which sat too faint against light backgrounds. The grid
above stays deliberately subtle — only the axis text/zero line darken. */
--chart-axis-text: #38352F;
/* Chart (Plotly) title text — read by varial.plotlyLayout(). Dark ink on the
cream page; flips to near-white on the dark theme below so titles stop
rendering as Plotly's default mid-grey on navy. */
--chart-title: #131210;
/* Fuel-icon palette — semantic aliases of the chart-tech tokens for
fuel labels / badges in product UI. Both names resolve to the same
hex; pick the one that fits the surface (charts vs UI badges). */
--varial-fuel-solar: var(--chart-tech-solar);
--varial-fuel-rooftop-pv: var(--chart-tech-rooftop-pv);
--varial-fuel-wind: var(--chart-tech-wind);
--varial-fuel-wind-offshore:var(--chart-tech-wind-offshore);
--varial-fuel-black-coal: var(--chart-tech-black-coal);
--varial-fuel-brown-coal: var(--chart-tech-brown-coal);
--varial-fuel-gas-ccgt: var(--chart-tech-gas-ccgt);
--varial-fuel-gas-ocgt: var(--chart-tech-gas-ocgt);
--varial-fuel-gas-steam: var(--chart-tech-gas-steam);
--varial-fuel-hydro: var(--chart-tech-hydro);
--varial-fuel-pumped-hydro: var(--chart-tech-pumped-hydro);
--varial-fuel-battery: var(--chart-tech-battery);
--varial-fuel-diesel: var(--chart-tech-diesel);
/* Retro 3D button palette — the "New Forecast" / "New Valuation" CTA
on the Spot and DIYvar landing pages. Base maps to varial-green;
hover/active deepen along the secondary scale; shadow is the bottom
edge of the 3D press effect. */
--varial-retro-green: var(--varial-secondary);
--varial-retro-green-hover: var(--varial-secondary-dark);
--varial-retro-green-active: #14532D;
--varial-retro-green-shadow: #0D6B30;
/* Override Bootstrap body background */
--bs-body-bg: #FAF7EE; /* = --varial-bg */
--bs-body-bg-rgb: 250, 247, 238;
/* Layout dimensions (used in Section 4 and layout.css) */
--vrl-sidebar-w: 12.625rem; /* expanded sidebar */
--vrl-sidebar-collapsed: 3.125rem; /* collapsed sidebar (icons only) */
--vrl-content-max-w: 100rem; /* max content width — caps stretching on ultra-wide screens */
--vrl-content-px: 1.5rem; /* side padding on the main content container — edit here to adjust globally */
}
/* ----------------------------------------
Sidebar — transparent variant (non-card): graphite + stripe
---------------------------------------- */
.navbar-vertical {
background-color: var(--varial-nav, #0D1B2E);
}
/* In dark mode the rail and page are near-identical navy and the sidebar
disappears — give it a darker shade + a crisp divider + depth so it reads
as its own surface. (Light mode already contrasts dark-on-cream.) */
[data-bs-theme="dark"] .navbar-vertical {
background-color: #0A1322;
border-right: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.28);
}
/* Dot-grid texture + bottom radial glow — matches the dashboard hero */
.navbar-vertical::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 140% 50% at 50% 105%, rgba(37, 99, 235, 0.16) 0%, transparent 65%),
radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: auto, 24px 24px;
pointer-events: none;
z-index: 0;
}
.navbar-vertical .navbar-collapse {
background-color: transparent;
}
/* Links */
.navbar-vertical .nav-link {
color: rgba(255, 255, 255, 0.78);
}
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
color: var(--varial-white, #fff);
}
.navbar-vertical .nav-link.active {
color: var(--varial-white, #fff);
}
/* Section labels & dividers */
.navbar-vertical .navbar-vertical-label {
color: rgba(255, 255, 255, 0.45);
}
.navbar-vertical .navbar-vertical-divider,
.navbar-vertical hr {
border-color: rgba(255, 255, 255, 0.12);
}
/* Brand text + toggle icon in sidebar header */
.navbar-vertical .navbar-brand {
color: var(--varial-white, #fff);
}
/* Scrollbar in the sidebar */
.navbar-vertical .navbar-vertical-content.scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
}
/* Dark mode overrides */
[data-bs-theme="dark"] {
color-scheme: dark;
--varial-bg: #0F172A;
--varial-bg-subtle: #1E293B;
--varial-border: #334155;
/* Interactive-control boundary on dark — 3.35:1 on the #1E293B field fill (#3189). */
--varial-border-interactive: #6B7A90;
--varial-card-bg: #1E293B;
--varial-card-border: #334155;
/* Generic panel surface — hardcoded to white at :root and used directly by
several components (e.g. the commodity chart cards, fuel/policy panels).
Without a dark value those surfaces rendered white on the dark page. */
--varial-surface: #1E293B;
/* Re-point the Bootstrap body bg we override at :root (line ~297) so BS
components keyed off it (accordions, etc.) stop rendering cream on dark. */
--bs-body-bg: #0F172A;
--bs-body-bg-rgb: 15, 23, 42;
--varial-gray-50: #1E293B;
--varial-gray-100: #334155;
--varial-gray-200: #475569;
--varial-gray-300: #64748B;
--varial-gray-400: #94A3B8;
--varial-gray-500: #CBD5E1;
/* 600-800 continue the inverted scale toward light so secondary/label/
heading TEXT stays legible on dark (the only bg uses are styleguide swatches). */
--varial-gray-600: #E2E8F0;
--varial-gray-700: #F1F5F9;
--varial-gray-800: #F8FAFC;
--varial-gray-900: #F8F7F5;
--varial-shell-grid-line: rgba(148, 163, 184, 0.07);
--varial-sidebar-stripe-line: rgba(255, 255, 255, 0.045);
/* The #2563EB primary is too dark on navy. Lift it to a light blue so every
link/accent that colours TEXT with it (footer links, "GET STARTED", feed
links, forecast names, outline buttons) stays legible. Solid primary
BUTTONS are pinned back to a mid-blue below so their white text keeps
contrast. */
--varial-primary: #60A5FA;
/* --varial-text-muted has no :root definition — callers rely on a #5b6472
fallback that vanishes on navy. Pin it to the dark muted grey here. NOTE we
deliberately do NOT lift --varial-success/-danger/-warning here: those double
as solid badge backgrounds (settings .badge.bg-* with white text), so a
lighter value would wreck white-on-colour contrast. Status TEXT that needs
lifting on dark is handled per-component. */
--varial-text-muted: #94A3B8;
/* Pastel "-bg"/"-bg-light" tints are near-white at :root, so chip/badge
backgrounds that use them (e.g. the bidding "Set next" badge) rendered as
bright boxes. Repoint to translucent primary accents. */
--varial-primary-bg: rgba(96, 165, 250, 0.24);
--varial-primary-bg-light: rgba(96, 165, 250, 0.16);
--bs-link-color: #8AB4FF;
--bs-link-hover-color: #B6D0FF;
--bs-link-color-rgb: 138, 180, 255;
/* Soft surface tokens the chat widget (and others) reference only via
fallback — define them dark so those surfaces stop rendering light. */
--varial-bg-muted: #172033;
--varial-primary-soft: rgba(96, 165, 250, 0.16);
--varial-fg-muted: #94A3B8;
--varial-warning-soft: rgba(248, 113, 113, 0.16);
--varial-error-soft: rgba(248, 113, 113, 0.16);
/* Much more subtle chart grid on navy, standardised across every Plotly chart
that builds its layout via varial.plotlyLayout(). */
--chart-grid: rgba(148, 163, 184, 0.10);
--chart-zeroline: rgba(148, 163, 184, 0.22);
/* Axis tick/title text — light enough to read on navy. Read by plotlyLayout()
so it's set directly on the chart (the CSS .xtick override alone wasn't
reliably beating Plotly's inline default fill). */
--chart-axis-text: #CBD5E1;
/* Chart title — white on navy (the light-theme value is mid-grey on dark). */
--chart-title: #F8FAFC;
}
/* Dark-mode surface overrides for components that hardcode a light bg off the
cream page (tables lift via white rows, inputs via white fill). */
[data-bs-theme="dark"] .table {
--bs-table-bg: var(--varial-bg-subtle);
}
/* Bootstrap's .table-light forces a near-white --bs-table-bg on the header cells,
which collides with our light .table thead th text and renders white-on-white in
dark mode (staff-hub headers). Remap it to the dark table surface so headers read. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table .table-light > th,
[data-bs-theme="dark"] .table .table-light > td {
--bs-table-bg: var(--varial-bg-subtle);
--bs-table-color: var(--varial-gray-800);
color: var(--varial-gray-800);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
background-color: var(--varial-gray-50);
border-color: var(--varial-border-interactive);
/* Pin the text colour alongside the background — without this the field
inherits whatever colour an enclosing surface set, which produced
low-contrast "light text on grey" inputs on dark. */
color: var(--varial-gray-900);
}
[data-bs-theme="dark"] .form-control::placeholder {
color: var(--varial-gray-400);
}
/* ----------------------------------------
2. Typography
---------------------------------------- */
body {
color: var(--varial-gray-800, #211F1C);
background-color: var(--varial-bg);
-webkit-font-smoothing: antialiased;
}
/* Heading scale — proportional to 14px base, tight weights */
h1, .h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
h2, .h2 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
h3, .h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
h4, .h4 { font-size: 1rem; font-weight: 600; line-height: 1.4; }
h5, .h5 { font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.03em; text-transform: uppercase; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--varial-font-heading);
color: var(--varial-gray-900, #131210);
margin-bottom: 0.5rem;
}
/* Page-level section headings scoped to .content */
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
font-family: var(--varial-font-heading);
color: var(--varial-gray-900);
}
/* Small / muted text */
.small, small { font-size: 0.8125rem; } /* 11.375px at 14px base */
/* !important: Bootstrap's .text-muted ships with !important; only !important
can repaint it to our gray-500 token. */
.text-muted { color: var(--varial-gray-500, #6B6763) !important; }
/* Labels — form labels, table column headers */
label,
.form-label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--varial-gray-700, #38352F);
}
/* Monospace — code, data values. Fuchsia is intentional brand treatment for inline code. */
code, pre, .text-mono {
font-family: var(--varial-font-mono);
font-size: 0.8125rem;
color: var(--varial-fuchsia, #FF4D6D);
}
/* ----------------------------------------
2b. Contrast Safety — White Text on Dark Backgrounds
Needed because Section 2 sets headings to --varial-gray-900.
Only override where OUR rules cause contrast problems;
Bootstrap handles .bg-primary/.bg-dark contrast natively.
---------------------------------------- */
/* Explicit .text-white must win over our heading color rules.
!important: .text-white is also a Bootstrap utility shipped with !important;
matching it ensures our token wins consistently across heading + non-heading
elements regardless of source order. */
.content .text-white,
.content h1.text-white, .content h2.text-white, .content h3.text-white,
.content h4.text-white, .content h5.text-white, .content h6.text-white {
color: var(--varial-white, #fff) !important;
}
/* Our custom components with colored backgrounds */
.card-header-gradient,
.card-header-gradient h5,
.card-header-gradient h6,
.pricing-cta,
.pricing-cta h2,
.pricing-cta h3,
.pricing-cta p {
color: var(--varial-white, #fff);
}
/* ----------------------------------------
3. Bootstrap Component Overrides
---------------------------------------- */
/* --- Button base: compact padding, sharp radius, brand transitions, 3D depth --- */
.btn {
--bs-btn-padding-y: 0.25rem;
--bs-btn-padding-x: 0.75rem;
--bs-btn-font-size: 0.875rem;
--bs-btn-border-radius: var(--varial-radius-sm, 0.25rem);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
transition: background-color 150ms ease, border-color 150ms ease,
color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.btn:hover {
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transform: translateY(-1px);
}
.btn:active {
box-shadow: 0 0 0 rgba(0, 0, 0, 0.12),
inset 0 2px 3px rgba(0, 0, 0, 0.12);
transform: translateY(1px);
}
/* btn-link has no fill/border to anchor the 3D depth treatment against — it
would render as a bare shadow floating with nothing underneath. Opt it out
entirely so it stays a plain, flat text link. */
.btn-link,
.btn-link:hover,
.btn-link:active {
box-shadow: none;
transform: none;
}
/* Outline buttons: white fill so they lift off the cream page bg; subtler depth */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
--bs-btn-bg: var(--varial-white, #fff);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
/* Primary button uses Varial blue */
.btn-primary {
--bs-btn-bg: var(--varial-primary, #1B3AA0);
--bs-btn-border-color: var(--varial-primary, #1B3AA0);
--bs-btn-hover-bg: var(--varial-primary-dark, #122880);
--bs-btn-hover-border-color: var(--varial-primary-dark, #122880);
--bs-btn-active-bg: var(--varial-primary-dark, #122880);
--bs-btn-active-border-color: var(--varial-primary-dark, #122880);
--bs-btn-color: var(--varial-white, #fff);
--bs-btn-hover-color: var(--varial-white, #fff);
}
/* Dark mode lifts --varial-primary to a light blue for readable link text, but
a solid button needs a mid-blue bg to keep its white label legible. */
[data-bs-theme="dark"] .btn-primary {
--bs-btn-bg: #2563EB;
--bs-btn-border-color: #2563EB;
--bs-btn-hover-bg: #1D4ED8;
--bs-btn-hover-border-color: #1D4ED8;
--bs-btn-active-bg: #1D4ED8;
--bs-btn-active-border-color: #1D4ED8;
}
/* Outline buttons hardcode a white fill (to lift off the cream page). In dark
that's a bright patch — give them the dark surface; per-variant text/border
(primary blue, etc.) stays readable, and secondary gets a light text/border. */
[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-outline-success,
[data-bs-theme="dark"] .btn-outline-danger,
[data-bs-theme="dark"] .btn-outline-warning,
[data-bs-theme="dark"] .btn-outline-info {
--bs-btn-bg: var(--varial-bg-subtle);
}
[data-bs-theme="dark"] .btn-outline-secondary {
--bs-btn-color: var(--varial-gray-700);
--bs-btn-border-color: var(--varial-border);
--bs-btn-hover-bg: var(--varial-gray-100);
--bs-btn-hover-color: var(--varial-gray-800);
}
/* Bootstrap utility classes (.text-muted/.text-dark/.bg-light/.bg-white) don't
flip for dark, so re-point them here. `!important` is required because the
Bootstrap utilities themselves ship with `!important` — only `!important` can
beat them. This matches the existing justified utility overrides in this file
(e.g. .text-white / .text-success above); see static/CLAUDE.md CSS rule #1. */
[data-bs-theme="dark"] .text-muted {
color: var(--varial-gray-400, #94A3B8) !important;
}
[data-bs-theme="dark"] .text-dark {
color: var(--varial-gray-700, #F1F5F9) !important;
}
.btn-outline-primary {
--bs-btn-color: var(--varial-primary, #1B3AA0);
--bs-btn-border-color: var(--varial-primary, #1B3AA0);
--bs-btn-hover-bg: var(--varial-primary, #1B3AA0);
--bs-btn-hover-border-color: var(--varial-primary, #1B3AA0);
--bs-btn-hover-color: var(--varial-white, #fff);
}
/* Size variants: keep distinct from our compact base */
.btn-sm {
--bs-btn-padding-y: 0.125rem;
--bs-btn-padding-x: 0.5rem;
--bs-btn-font-size: 0.75rem;
}
.btn-lg {
--bs-btn-padding-y: 0.5rem;
--bs-btn-padding-x: 1.25rem;
--bs-btn-font-size: 1rem;
}
/* Disabled buttons: solid gray, flat (no 3D depth), not washed-out opacity */
.btn.disabled, .btn:disabled {
--bs-btn-disabled-bg: var(--varial-gray-300, #CCC9C3);
--bs-btn-disabled-border-color: var(--varial-gray-300, #CCC9C3);
--bs-btn-disabled-color: var(--varial-gray-500, #6B6763);
--bs-btn-disabled-opacity: 1;
box-shadow: none;
transform: none;
pointer-events: none;
}
/* Icon-only button: square, centered icon */
.btn-icon {
--bs-btn-padding-x: 0.25rem;
--bs-btn-padding-y: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
line-height: 1;
}
/* Success button — standard green (not teal success, not accent orange) */
.btn-success {
--bs-btn-bg: var(--varial-green, #16A34A);
--bs-btn-border-color: var(--varial-green, #16A34A);
--bs-btn-hover-bg: var(--varial-green-dark, #15803D);
--bs-btn-hover-border-color: var(--varial-green-dark, #15803D);
--bs-btn-active-bg: var(--varial-green-dark, #15803D);
--bs-btn-active-border-color: var(--varial-green-dark, #15803D);
--bs-btn-color: var(--varial-white, #fff);
--bs-btn-hover-color: var(--varial-white, #fff);
}
/* Success text — match varial-green rather than Bootstrap's duller #198754.
!important: Bootstrap's .text-success ships with !important; only !important
can repaint it. */
.text-success {
color: var(--varial-green, #16A34A) !important;
}
/* Retro 3D press button — reusable bold CTA (same press effect as .btn-new-forecast).
Used as `.btn .btn-retro` on /