/* JMG Ops — token-driven dark theme. Source: jmg.marketing site.css. See UI_REFACTOR_PLAN.md for the brand audit and rationale. */ :root { /* Palette */ --jmg-bg: #1a1a1a; --jmg-surface: #2a2a2a; --jmg-surface-2: #2c2c2c; --jmg-surface-3: #3a3a3a; --jmg-border: #a2abb3; --jmg-border-soft: rgba(255, 255, 255, 0.08); --jmg-text: #d4d4d4; --jmg-text-muted: #b4b4b4; --jmg-text-soft: #a2abb3; --jmg-heading: #e4e4e4; --jmg-focus: #258cfb; /* Accent — overridable per workspace later (PLAN.md §8). Default = forest green for FBL.ai/Brokers. */ --jmg-accent: #4a5e4a; --jmg-accent-hover: #5a7e5a; /* Override Bootstrap so all bs-* components inherit the JMG theme automatically */ --bs-body-bg: var(--jmg-bg); --bs-body-color: var(--jmg-text); --bs-heading-color: var(--jmg-heading); --bs-secondary-color: var(--jmg-text-soft); --bs-link-color: var(--jmg-text); --bs-link-hover-color: #fff; --bs-border-color: var(--jmg-border-soft); --bs-tertiary-bg: var(--jmg-surface-2); --bs-emphasis-color: var(--jmg-heading); } /* Future: per-workspace tints. Set on when workspaces ship. */ [data-workspace="carriers-bennett"] { --jmg-accent: #4d86b5; --jmg-accent-hover: #6ba4d3; } [data-workspace="carriers-fw"] { --jmg-accent: #b5654f; --jmg-accent-hover: #d3826a; } [data-workspace="truckmagnet"] { --jmg-accent: #9d6ba5; --jmg-accent-hover: #b888c0; } html, body { background-color: var(--jmg-bg); color: var(--jmg-text); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; } @media (min-width: 768px) { html, body { font-size: 16px; } } h1, h2, h3, h4, h5, h6 { color: var(--jmg-heading); } .lead { color: var(--jmg-text-muted); } .text-muted { color: var(--jmg-text-soft) !important; } a, .btn-link { color: var(--jmg-text); } a:hover, .btn-link:hover { color: #fff; } /* Buttons */ .btn-primary { background-color: var(--jmg-accent); border-color: var(--jmg-accent); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--jmg-accent-hover) !important; border-color: var(--jmg-accent-hover) !important; color: #fff; } .btn-outline-primary { color: var(--jmg-accent); border-color: var(--jmg-accent); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--jmg-accent); border-color: var(--jmg-accent); color: #fff; } .btn-outline-secondary { color: var(--jmg-text-soft); border-color: var(--jmg-text-soft); } .btn-outline-secondary:hover { background-color: var(--jmg-text-soft); border-color: var(--jmg-text-soft); color: var(--jmg-bg); } .btn-light { background-color: #fff; border-color: #fff; color: #000; } .btn-success { background-color: var(--jmg-accent); border-color: var(--jmg-accent); } .btn-success:hover { background-color: var(--jmg-accent-hover); border-color: var(--jmg-accent-hover); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus { box-shadow: 0 0 0 0.1rem var(--jmg-bg), 0 0 0 0.25rem var(--jmg-focus); } /* Cards & surfaces */ .card { background-color: var(--jmg-surface); border: none; border-radius: 10px; color: var(--jmg-text); } .card-header { background-color: var(--jmg-surface-2); border-bottom: 1px solid var(--jmg-border-soft); color: var(--jmg-heading); font-weight: 600; } .card-body { color: var(--jmg-text); } /* Hover-lift only on cards explicitly opted in via .lift-card. Skip on data-grid rows. */ .lift-card { transition: transform 0.3s; } .lift-card:hover { transform: translateY(-5px); } /* Tables */ .table { color: var(--jmg-text); --bs-table-bg: transparent; --bs-table-color: var(--jmg-text); --bs-table-hover-bg: var(--jmg-surface-2); --bs-table-hover-color: var(--jmg-heading); --bs-table-border-color: var(--jmg-border-soft); } .table thead th { color: var(--jmg-heading); border-color: var(--jmg-border-soft); background-color: transparent; } .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: var(--jmg-border-soft); } .table-active, .table-active > * { background-color: var(--jmg-surface-2) !important; color: var(--jmg-heading) !important; } /* Forms */ .form-control, .form-select { background-color: var(--jmg-surface); color: var(--jmg-text); border-color: var(--jmg-border-soft); } /* Bootstrap form-floating on dark: float-label needs a matching background so when it shrinks and translates up it sits cleanly over the input border. */ .form-floating > label { color: var(--jmg-text-soft); } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { color: var(--jmg-text-muted); background-color: var(--jmg-surface); height: auto; padding: 0 0.5rem; border-radius: 4px; } .form-floating > .form-control, .form-floating > .form-select { color: var(--jmg-text); background-color: var(--jmg-surface); border-color: var(--jmg-border-soft); } .form-floating > .form-control::placeholder { color: transparent; } .form-control:focus, .form-select:focus { background-color: var(--jmg-surface); color: var(--jmg-text); border-color: var(--jmg-accent); } .form-control::placeholder { color: var(--jmg-text-soft); } .form-control:disabled, .form-control[readonly] { background-color: var(--jmg-surface-2); color: var(--jmg-text-soft); } .form-label { color: var(--jmg-text-muted); } .form-check-input { background-color: var(--jmg-surface); border-color: var(--jmg-border-soft); } .form-check-input:checked { background-color: var(--jmg-accent); border-color: var(--jmg-accent); } .form-check-label { color: var(--jmg-text); } /* Badges */ .badge.bg-light, .badge.text-bg-light { background-color: var(--jmg-surface-2) !important; color: var(--jmg-text-muted) !important; } .badge.bg-primary { background-color: var(--jmg-accent) !important; } .badge.bg-success { background-color: var(--jmg-accent) !important; } .badge.bg-secondary { background-color: var(--jmg-text-soft) !important; color: var(--jmg-bg) !important; } .badge.bg-warning { background-color: #b59a4d !important; color: #1a1a1a !important; } .badge.bg-danger { background-color: #b5654f !important; } .badge.bg-info { background-color: #4d86b5 !important; } /* Alerts — dial back the eye-searing default colors against the dark bg */ .alert { background-color: var(--jmg-surface); border: 1px solid var(--jmg-border-soft); color: var(--jmg-text); border-radius: 10px; } .alert-warning { border-left: 4px solid #b59a4d; } .alert-danger { border-left: 4px solid #b5654f; color: #f5c5b9; } .alert-info { border-left: 4px solid #4d86b5; } .alert-success { border-left: 4px solid var(--jmg-accent); } /* Code / pre blocks (used in compose preview) */ pre, code { color: var(--jmg-text); background-color: var(--jmg-bg); } pre.bg-body-tertiary, pre[class*="bg-"] { background-color: var(--jmg-bg) !important; color: var(--jmg-text); border: 1px solid var(--jmg-border-soft); border-radius: 6px; } /* Definition lists (used in BrokerDetailsPage) */ dl dt { color: var(--jmg-text-soft); font-weight: 500; } dl dd { color: var(--jmg-text); } /* Page title accent — JMG-style border under the top of pages */ .content-header-border { border-bottom: 1px solid var(--jmg-border); padding-bottom: 1rem; margin-bottom: 1.5rem; } /* Validation styling kept from default Blazor template */ .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #b5654f; } .validation-message { color: #b5654f; } .blazor-error-boundary { background-color: #b5654f; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred."; } /* ------ Custom hamburger for nav (mobile) ------ */ .navbar-toggler { border-color: rgba(255,255,255,0.5); } .navbar-toggler-icon { background-image: url(/images/menu.svg); } /* Misc small fixes */ .btn-close { /* Default btn-close uses dark X; we need white on dark bg */ filter: invert(1) grayscale(100%) brightness(200%); } .dropdown-menu { background-color: var(--jmg-surface); border-color: var(--jmg-border-soft); } .dropdown-item { color: var(--jmg-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--jmg-surface-2); color: var(--jmg-heading); }