/* * TrackSlot brand overrides. * * Bootstrap's entire compiled stylesheet (style.css) is driven off these * CSS custom properties, so refining the brand here cascades correctly * through every component (buttons, dropdowns, badges, focus rings, etc.) * without needing to hand-edit the 20k-line generated file. */ /* No data-bs-theme attribute is actually set on anywhere in this app (there's no working dark-mode toggle), so :root is what really takes effect - [data-bs-theme=light] is kept alongside it as a no-cost safety net in case that ever gets wired up. */ :root, [data-bs-theme=light] { --bs-primary: #4338ca; --bs-primary-rgb: 67, 56, 202; --bs-primary-text-emphasis: #2d2a85; --bs-primary-bg-subtle: #e5e3fb; --bs-primary-border-subtle: #c7c2f5; --bs-link-color: #4338ca; --bs-link-hover-color: #332b9c; --bs-link-color-rgb: 67, 56, 202; --bs-link-hover-color-rgb: 51, 43, 156; --bs-nav-pills-link-active-bg: #4338ca; --bs-mode: #ffffff; /* Warm accent - used sparingly for standout CTAs/highlights, not a replacement for the existing warning/orange semantic colors. */ --brand-accent: #f5a623; --brand-accent-rgb: 245, 166, 35; --brand-accent-dark: #d98f13; --brand-ink: #0f172a; } [data-bs-theme=dark] { --bs-primary: #8177e0; --bs-primary-rgb: 129, 119, 224; --bs-link-color: #8177e0; --bs-link-hover-color: #a29be8; --bs-link-color-rgb: 129, 119, 224; --bs-link-hover-color-rgb: 162, 155, 232; --bs-nav-pills-link-active-bg: #8177e0; --bs-mode: #191b1d; --brand-accent: #f5a623; --brand-accent-rgb: 245, 166, 35; --brand-accent-dark: #d98f13; --brand-ink: #0f172a; } /* CSS for overriding primary colors */ .navbar { --bs-navbar-hover-color: var(--bs-primary); --bs-navbar-active-color: var(--bs-primary); } .navbar-dark { --bs-navbar-hover-color: var(--bs-primary) !important; --bs-navbar-active-color: var(--bs-primary) !important; } .nav{ --bs-nav-link-hover-color: var(--bs-primary); } .dropdown-menu { --bs-dropdown-link-hover-color: var(--bs-primary) !important; --bs-dropdown-link-hover-bg: rgba(var(--bs-primary-rgb), 0.1) !important; --bs-dropdown-link-active-color: var(--bs-primary) !important; --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), 0.1) !important; } .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-link-hover-color); --bs-btn-hover-border-color: var(--bs-link-hover-color); --bs-btn-active-bg: var(--bs-link-hover-color); --bs-btn-active-border-color: var(--bs-link-hover-color); --bs-btn-disabled-bg: var(--bs-primary); } .btn-link { --bs-btn-color: var(--bs-primary); --bs-link-color: var(--bs-primary); --bs-btn-hover-color: var(--bs-link-hover-color); --bs-btn-active-color: var(--bs-link-hover-color); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } .btn-primary-soft{ color: var(--bs-primary); background-color: rgba(var(--bs-primary-rgb), 0.1); } .btn-primary-soft:hover{ color: var(--bs-white); background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; } .btn-primary-soft:focus{ color: var(--bs-white); background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; } .btn-primary-soft.active{ color: var(--bs-white); background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; } .fill-primary{ fill: var(--bs-primary) !important; } .nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); } .form-control:focus{ border-color: var(--bs-primary); } .text-bg-primary{ background-color: rgba(var(--bs-primary-rgb), 1) !important; } .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } .choices.is-focused .choices__inner{ border-color: var(--bs-primary); } /* Divider between "browse" and "account action" nav links - only at the xl breakpoint where the navbar is a single row; on mobile the plain
divider inside the collapsed menu does this job instead. */ @media (min-width: 1200px) { .nav-section-divider { margin-left: 0.5rem; padding-left: 1.5rem !important; border-left: 1px solid var(--bs-border-color, #dee2e6); } } /* Brand accent utilities */ .btn-accent { background-color: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-ink); } .btn-accent:hover, .btn-accent:focus { background-color: var(--brand-accent-dark); border-color: var(--brand-accent-dark); color: var(--brand-ink); } .text-accent { color: var(--brand-accent) !important; } .bg-accent { background-color: var(--brand-accent) !important; }