/* * 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; /* style.css's light-mode value (#c5c5c7) is a near-white light gray on a near-white/light-gray background wherever it's actually used (.text-body-secondary, and any built-in component that reads this variable) - contrast ratio to white is roughly 1.3:1, nowhere near WCAG AA's 4.5:1 minimum for normal text. Classic Bootstrap muted-gray instead, ~4.6:1 on white. */ --bs-secondary-color: #6c757d; /* 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); } } /* style.css sets h1-h6 to color: var(--bs-heading-color), pinned to --bs-gray-900 (near-black) in the light-mode block - a value applied directly to the heading element itself, not something an ancestor's .text-white/.text-bg-primary can override via normal inheritance. That's why a heading inside e.g.
still rendered black instead of white (hire-my-track's "Everything You Need to Manage Your Track"). Using `inherit` here doesn't fix it: for a custom property, `inherit` just re-fetches --bs-heading-color from the parent's *custom property*, which is still the same near-black value inherited all the way from :root - a no-op. `currentColor` is what actually works: custom property substitution is lazy, so the token travels down unevaluated and only resolves at the point color: var(--bs-heading-color) is actually used (the heading itself), at which point currentColor means "this heading's own inherited text color" - i.e. white, correctly picked up from .text-white/.text-bg-* through the normal color cascade. */ .text-white, .text-bg-primary, .text-bg-dark, .text-bg-success, .text-bg-info, .text-bg-warning, .text-bg-danger { --bs-heading-color: currentColor; } /* 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; } /* style.css sets h2 to 3rem at >=1200px - too large across the site's section headings, so it's scaled back down here rather than hand-edited in the generated file. */ @media (min-width: 1200px) { h2, .h2 { font-size: 2rem; } }