@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ===== Anvil HUD — drop-in override for Bootstrap 5.3 ===== Load AFTER bootstrap.min.css and AFTER app.css in base.html . Do not remove Bootstrap — it still provides the grid/utilities/JS (modals, dropdowns, tabs). This file only overrides the visual layer, re-using Bootstrap's existing class names so templates don't need to change class="" attributes. */ :root { --bg-page: #1c232f; /* oklch(15% 0.018 250) */ --bg-surface: #232b3a; --bg-surface-2: #2b3446; --border: #3a4356; --border-strong: #52607a; --text-primary: #eef1f6; --text-secondary: #b7c0cf; --text-muted: #838fa3; --text-on-accent: #0d1420; --accent: #63c9e8; --accent-hover: #7fd6f0; --accent-soft: #23485a; --emphasis: #e39a4c; --success: #6fd6a0; --warning: #e0b25a; --danger: #e5636b; --table-head-bg: #0f141d; --table-head-fg: #b9dce8; --table-stripe: #212a38; --xero-actual-bg: #1f4351; --focus-ring: rgba(99, 201, 232, 0.45); --shadow-glow: 0 0 16px rgba(99, 201, 232, 0.35); --font-display: 'Space Grotesk', sans-serif; --font-ui: 'Space Grotesk', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* ── Extended surface palette ───────────────────────────────── */ --bg-surface-raised: #2f3850; /* ── Semantic aliases (design-system ground truth) ──────────── */ --surface-page: var(--bg-page); --surface-card: var(--bg-surface); --surface-card-hover: var(--bg-surface-2); --surface-raised: var(--bg-surface-raised); --surface-input: var(--bg-surface); --border-default: var(--border); --border-emphasis: var(--border-strong); --text-heading: var(--text-primary); --text-body: var(--text-secondary); --text-faint: var(--text-muted); --link: var(--accent); --link-hover: var(--accent-hover); /* ── Spacing scale ──────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ── Typography scale ───────────────────────────────────────── */ --text-2xs: 10.5px; --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 36px; --text-3xl: 48px; --label-tracking: .06em; --label-tracking-wide: .12em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --line-tight: 1.15; --line-normal: 1.5; /* ── Layout constants ───────────────────────────────────────── */ --radius-none: 0px; --navbar-height: 56px; --report-header-height: 72px; --border-width: 1px; --border-width-strong: 1.5px; --bracket-size: 14px; /* Bootstrap 5.3 token overrides — remap light-theme defaults to HUD palette */ --bs-body-bg: var(--bg-page); --bs-body-color: var(--text-primary); --bs-body-color-rgb: 238, 241, 246; --bs-secondary-color: var(--text-secondary); --bs-secondary-rgb: 183, 192, 207; --bs-tertiary-color: var(--text-muted); --bs-border-color: var(--border); --bs-border-color-translucent: rgba(58, 67, 86, 0.6); /* Flip light/dark semantic tokens */ --bs-light: var(--bg-surface-2); --bs-dark: var(--text-primary); --bs-light-bg-subtle: var(--bg-surface-2); --bs-dark-bg-subtle: var(--bg-surface); /* Info → accent cyan */ --bs-info: var(--accent); --bs-info-rgb: 99, 201, 232; --bs-info-bg-subtle: var(--accent-soft); --bs-info-text-emphasis: var(--accent); --bs-info-border-subtle: rgba(99, 201, 232, 0.3); /* Subtle colour tokens for -subtle badge/alert variants */ --bs-success-bg-subtle: rgba(111, 214, 160, 0.12); --bs-success-text-emphasis: var(--success); --bs-success-border-subtle: rgba(111, 214, 160, 0.3); --bs-warning-bg-subtle: rgba(224, 178, 90, 0.12); --bs-warning-text-emphasis: var(--warning); --bs-warning-border-subtle: rgba(224, 178, 90, 0.3); --bs-danger-bg-subtle: rgba(229, 99, 107, 0.12); --bs-danger-text-emphasis: var(--danger); --bs-danger-border-subtle: rgba(229, 99, 107, 0.3); --bs-primary-bg-subtle: var(--accent-soft); --bs-primary-text-emphasis: var(--accent); --bs-primary-border-subtle: rgba(99, 201, 232, 0.3); /* Contextual table row colours (table-info, table-success, table-primary …) */ --bs-table-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-striped-bg: var(--table-stripe); --bs-table-hover-bg: var(--accent-soft); /* Code elements */ --bs-code-color: var(--accent); } body { background: var(--bg-page); color: var(--text-primary); font-family: var(--font-ui); } a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* Navbar */ .navbar.bg-dark { background: var(--table-head-bg) !important; border-bottom: 1px solid var(--border); } .navbar-brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; } .nav-link { font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--label-tracking); text-transform: uppercase; transition: color .12s ease, opacity .12s ease; } .nav-link:hover { color: var(--accent) !important; } .nav-link.active { color: var(--accent) !important; border-bottom: 2px solid var(--accent); } /* Buttons — quick "haptic" click feedback */ .btn { border-radius: var(--radius-none) !important; font-weight: var(--weight-semibold); letter-spacing: var(--label-tracking); text-transform: uppercase; font-size: var(--text-sm); transition: filter .12s ease, transform .08s ease, box-shadow .15s ease; } .btn:hover { filter: brightness(1.15); box-shadow: 0 0 0 1px var(--accent), var(--shadow-glow); } .btn:active { transform: scale(0.96); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); } .btn-outline-secondary, .btn-outline-primary { border-color: var(--border-strong); color: var(--text-primary); } .btn-outline-success { border-color: var(--success); color: var(--success); } /* Cards → HUD module panels with corner brackets */ .card { background: var(--bg-surface) !important; border: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; position: relative; transition: border-color .15s ease, box-shadow .15s ease; } .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-glow); } .card::before, .card::after { content: ''; position: absolute; width: var(--bracket-size); height: var(--bracket-size); pointer-events: none; } .card::before { top: -1px; left: -1px; border-top: var(--border-width-strong) solid var(--accent); border-left: var(--border-width-strong) solid var(--accent); } .card::after { bottom: -1px; right: -1px; border-bottom: var(--border-width-strong) solid var(--accent); border-right: var(--border-width-strong) solid var(--accent); } .card-header { background: transparent !important; border-bottom: var(--border-width) solid var(--border) !important; font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--label-tracking-wide); text-transform: uppercase; color: var(--text-secondary) !important; } .card-body { color: var(--text-primary); } /* Badges / status pills */ .badge { border-radius: var(--radius-none) !important; font-weight: var(--weight-semibold); letter-spacing: var(--label-tracking); text-transform: uppercase; font-size: var(--text-2xs); } .badge.bg-success { background: var(--success) !important; color: var(--text-on-accent) !important; } .badge.bg-secondary { background: var(--bg-surface-2) !important; color: var(--text-secondary) !important; } .badge.bg-warning { background: var(--warning) !important; color: var(--text-on-accent) !important; } .badge.bg-danger { background: var(--danger) !important; color: var(--text-on-accent) !important; } .badge.bg-primary { background: var(--accent) !important; color: var(--text-on-accent) !important; } .badge.bg-info { background: var(--accent) !important; color: var(--text-on-accent) !important; } .badge.bg-light { background: var(--bg-surface-2) !important; color: var(--text-secondary) !important; } /* Bootstrap uses --bs-dark-rgb for .text-dark which defaults to near-black #212529 */ .text-dark { color: var(--text-secondary) !important; } /* Tables (list tables) */ /* Re-define Bootstrap's own local .table variables so the cell color chain resolves correctly */ .table { color: var(--text-primary); --bs-table-color: var(--text-primary); --bs-table-striped-color: var(--text-primary); --bs-table-active-color: var(--text-primary); --bs-table-hover-color: var(--text-primary); --bs-table-striped-bg: var(--table-stripe); --bs-table-hover-bg: var(--accent-soft); } /* Bootstrap 5.3 hardcodes --bs-table-color: #000 on all contextual row variants; override here */ .table-info, .table-success, .table-warning, .table-danger, .table-primary, .table-secondary, .table-light { --bs-table-color: var(--text-primary); --bs-table-striped-color: var(--text-primary); --bs-table-active-color: var(--text-primary); --bs-table-hover-color: var(--text-primary); color: var(--text-primary); } /* Remove the blue tint from series summary rows — transparent so they read like normal rows */ .table-info { --bs-table-bg: transparent; --bs-table-hover-bg: var(--accent-soft); --bs-table-border-color: var(--border); } .table-info:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent) !important; } .table-light, thead.table-light th { background: var(--table-head-bg) !important; color: var(--table-head-fg) !important; font-size: var(--text-xs); letter-spacing: var(--label-tracking); text-transform: uppercase; } .table-hover tbody tr:hover { background: var(--accent-soft) !important; } .table > :not(caption) > * > * { border-color: var(--border); font-family: var(--font-mono); } /* Financial report tables (extends app.css .table-financial rules) */ .table-financial thead th { background: var(--table-head-bg) !important; color: var(--table-head-fg) !important; } .table-financial th:first-child, .table-financial td:first-child { background: var(--bg-surface) !important; border-right-color: var(--border) !important; } .table-financial tr.table-section-header td { background: var(--bg-surface-2) !important; letter-spacing: .12em; } .table-financial tr.total td, .table-financial tr.table-total td { border-top-color: var(--border-strong) !important; border-bottom-color: var(--border-strong) !important; } .xero-actual { background: var(--xero-actual-bg) !important; } /* Forms / modals / dropdowns */ .form-control, .form-select { background: var(--surface-input); border: var(--border-width) solid var(--border-emphasis); color: var(--text-primary); border-radius: var(--radius-none); font-family: var(--font-mono); } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); background: var(--surface-input); color: var(--text-primary); } .modal-content { background: var(--surface-card); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-none); } .modal-header, .modal-footer { border-color: var(--border); } .dropdown-menu { background: var(--bg-surface-raised, var(--bg-surface)); border: 1px solid var(--border); border-radius: 0; } .dropdown-item { color: var(--text-primary); } .dropdown-item:hover { background: var(--accent-soft); color: var(--accent); } /* Headings */ h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; } /* Code elements — override Bootstrap's default magenta (#d63384) and any utility-class !important. code[class] specificity is 0-1-1 which beats Bootstrap's class-only 0-1-0 even with !important. */ code { color: var(--accent) !important; font-family: var(--font-mono); } code[class] { color: var(--accent) !important; } /* List group */ .list-group-item { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .list-group-item-action:hover, .list-group-item-action:focus { background: var(--accent-soft); color: var(--accent); } /* Horizontal rules */ hr { border-color: var(--border); opacity: 1; } /* btn-xs — single global definition (duplicate per-template