/* ===================================================================== BlueCraft Studios — Brand theme --------------------------------------------------------------------- Re-themes Bootstrap 5.3 by overriding its CSS custom properties. The two brand inputs (`--brand-primary`, `--brand-accent`) come from Settings and are rendered inline in ; this file fills in everything else (hovers, borders, surfaces) so the palette stays coherent. ===================================================================== */ :root { /* Brand inputs — overridable from Settings (rendered inline in ). */ --brand-primary: #2563EB; --brand-primary-rgb: 37, 99, 235; --brand-primary-hover: #1D4ED8; --brand-primary-active: #1E40AF; --brand-primary-soft: #DBEAFE; --brand-on-primary: #ffffff; --brand-accent: #F59E0B; --brand-accent-rgb: 245, 158, 11; --brand-accent-hover: #D97706; --brand-on-accent: #1F2937; /* Semantic palette — each is configurable in Settings. For each role we expose: --brand- base color --brand--rgb same color as r,g,b for rgba() --brand--hover darker for :hover --brand--active even darker for :active --brand-on- text color that contrasts with base */ --brand-success: #10B981; --brand-success-rgb: 16, 185, 129; --brand-success-hover: #059669; --brand-success-active: #047857; --brand-on-success: #ffffff; --brand-danger: #EF4444; --brand-danger-rgb: 239, 68, 68; --brand-danger-hover: #DC2626; --brand-danger-active: #B91C1C; --brand-on-danger: #ffffff; --brand-warning: #F59E0B; --brand-warning-rgb: 245, 158, 11; --brand-warning-hover: #D97706; --brand-warning-active: #B45309; --brand-on-warning: #1F2937; --brand-info: #0EA5E9; --brand-info-rgb: 14, 165, 233; --brand-info-hover: #0284C7; --brand-info-active: #0369A1; --brand-on-info: #ffffff; --brand-secondary: #64748B; --brand-secondary-rgb: 100, 116, 139; --brand-secondary-hover: #475569; --brand-secondary-active: #334155; --brand-on-secondary: #ffffff; /* Neutrals (light) */ --brand-bg: #F8FAFC; --brand-surface: #FFFFFF; --brand-text: #0F172A; --brand-muted: #64748B; --brand-border: #E2E8F0; } /* ---- Map brand vars onto Bootstrap's variables ------------------- */ :root, [data-bs-theme="light"] { --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); --bs-link-color: var(--brand-primary); --bs-link-hover-color: var(--brand-primary-hover); --bs-success: var(--brand-success); --bs-success-rgb: var(--brand-success-rgb); --bs-danger: var(--brand-danger); --bs-danger-rgb: var(--brand-danger-rgb); --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-text); --bs-border-color: var(--brand-border); --bs-secondary-color: var(--brand-muted); } [data-bs-theme="dark"] { /* Subtly desaturate the light brand for dark surfaces. */ --brand-bg: #0F172A; --brand-surface: #1E293B; --brand-text: #E2E8F0; --brand-muted: #94A3B8; --brand-border: #334155; --brand-primary-soft: rgba(var(--brand-primary-rgb), 0.18); --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-text); --bs-border-color: var(--brand-border); --bs-secondary-color: var(--brand-muted); --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); } /* ---- Buttons ----------------------------------------------------- Every solid `.btn-` and outline variant is wired up to the brand palette. We force colors with `!important` on the resolved bg/border/color so any third-party CSS loaded after this file (e.g. plugin styles) still shows the brand. */ .btn-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-primary-hover); --bs-btn-hover-border-color: var(--brand-primary-hover); --bs-btn-active-bg: var(--brand-primary-active); --bs-btn-active-border-color: var(--brand-primary-active); --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary); --bs-btn-color: var(--brand-on-primary); --bs-btn-hover-color: var(--brand-on-primary); --bs-btn-active-color: var(--brand-on-primary); background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--brand-on-primary) !important; } .btn-primary:hover, .btn-primary:focus-visible { background-color: var(--brand-primary-hover) !important; border-color: var(--brand-primary-hover) !important; color: var(--brand-on-primary) !important; } .btn-primary:active, .btn-primary.active, .btn-check:checked + .btn-primary { background-color: var(--brand-primary-active) !important; border-color: var(--brand-primary-active) !important; color: var(--brand-on-primary) !important; } .btn-success { --bs-btn-bg: var(--brand-success); --bs-btn-border-color: var(--brand-success); --bs-btn-hover-bg: var(--brand-success-hover); --bs-btn-hover-border-color: var(--brand-success-hover); --bs-btn-active-bg: var(--brand-success-active); --bs-btn-active-border-color: var(--brand-success-active); --bs-btn-color: var(--brand-on-success); --bs-btn-hover-color: var(--brand-on-success); --bs-btn-active-color: var(--brand-on-success); background-color: var(--brand-success) !important; border-color: var(--brand-success) !important; color: var(--brand-on-success) !important; } .btn-success:hover, .btn-success:focus-visible { background-color: var(--brand-success-hover) !important; border-color: var(--brand-success-hover) !important; } .btn-danger { --bs-btn-bg: var(--brand-danger); --bs-btn-border-color: var(--brand-danger); --bs-btn-hover-bg: var(--brand-danger-hover); --bs-btn-hover-border-color: var(--brand-danger-hover); --bs-btn-active-bg: var(--brand-danger-active); --bs-btn-active-border-color: var(--brand-danger-active); --bs-btn-color: var(--brand-on-danger); --bs-btn-hover-color: var(--brand-on-danger); --bs-btn-active-color: var(--brand-on-danger); background-color: var(--brand-danger) !important; border-color: var(--brand-danger) !important; color: var(--brand-on-danger) !important; } .btn-danger:hover, .btn-danger:focus-visible { background-color: var(--brand-danger-hover) !important; border-color: var(--brand-danger-hover) !important; } .btn-warning { --bs-btn-bg: var(--brand-warning); --bs-btn-border-color: var(--brand-warning); --bs-btn-hover-bg: var(--brand-warning-hover); --bs-btn-hover-border-color: var(--brand-warning-hover); --bs-btn-active-bg: var(--brand-warning-active); --bs-btn-active-border-color: var(--brand-warning-active); --bs-btn-color: var(--brand-on-warning); --bs-btn-hover-color: var(--brand-on-warning); --bs-btn-active-color: var(--brand-on-warning); background-color: var(--brand-warning) !important; border-color: var(--brand-warning) !important; color: var(--brand-on-warning) !important; } .btn-warning:hover, .btn-warning:focus-visible { background-color: var(--brand-warning-hover) !important; border-color: var(--brand-warning-hover) !important; color: var(--brand-on-warning) !important; } .btn-info { --bs-btn-bg: var(--brand-info); --bs-btn-border-color: var(--brand-info); --bs-btn-hover-bg: var(--brand-info-hover); --bs-btn-hover-border-color: var(--brand-info-hover); --bs-btn-active-bg: var(--brand-info-active); --bs-btn-active-border-color: var(--brand-info-active); --bs-btn-color: var(--brand-on-info); --bs-btn-hover-color: var(--brand-on-info); --bs-btn-active-color: var(--brand-on-info); background-color: var(--brand-info) !important; border-color: var(--brand-info) !important; color: var(--brand-on-info) !important; } .btn-info:hover, .btn-info:focus-visible { background-color: var(--brand-info-hover) !important; border-color: var(--brand-info-hover) !important; } .btn-secondary { --bs-btn-bg: var(--brand-secondary); --bs-btn-border-color: var(--brand-secondary); --bs-btn-hover-bg: var(--brand-secondary-hover); --bs-btn-hover-border-color: var(--brand-secondary-hover); --bs-btn-active-bg: var(--brand-secondary-active); --bs-btn-active-border-color: var(--brand-secondary-active); --bs-btn-color: var(--brand-on-secondary); --bs-btn-hover-color: var(--brand-on-secondary); --bs-btn-active-color: var(--brand-on-secondary); background-color: var(--brand-secondary) !important; border-color: var(--brand-secondary) !important; color: var(--brand-on-secondary) !important; } .btn-secondary:hover, .btn-secondary:focus-visible { background-color: var(--brand-secondary-hover) !important; border-color: var(--brand-secondary-hover) !important; } .btn-light { --bs-btn-bg: #F1F5F9; --bs-btn-border-color: #CBD5E1; --bs-btn-hover-bg: #E2E8F0; --bs-btn-hover-border-color: #94A3B8; --bs-btn-color: #0F172A; --bs-btn-hover-color: #0F172A; background-color: var(--bs-btn-bg) !important; border-color: var(--bs-btn-border-color) !important; color: var(--bs-btn-color) !important; } .btn-light:hover, .btn-light:focus-visible { background-color: var(--bs-btn-hover-bg) !important; border-color: var(--bs-btn-hover-border-color) !important; } [data-bs-theme="dark"] .btn-light { --bs-btn-bg: #334155; --bs-btn-border-color: #475569; --bs-btn-hover-bg: #475569; --bs-btn-color: #F1F5F9; --bs-btn-hover-color: #fff; } .btn-dark { --bs-btn-bg: #1F2937; --bs-btn-border-color: #1F2937; --bs-btn-hover-bg: #111827; --bs-btn-hover-border-color: #111827; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; } /* ---- Outline variants ------------------------------------------- */ .btn-outline-primary { --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary); --bs-btn-hover-color: var(--brand-on-primary); --bs-btn-active-bg: var(--brand-primary-active); --bs-btn-active-border-color: var(--brand-primary-active); --bs-btn-active-color: var(--brand-on-primary); --bs-btn-disabled-color: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary); color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; background-color: transparent !important; } .btn-outline-primary:hover, .btn-outline-primary:focus-visible { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: var(--brand-on-primary) !important; } .btn-outline-primary.active, .btn-outline-primary:active, .btn-check:checked + .btn-outline-primary { background-color: var(--brand-primary-active) !important; border-color: var(--brand-primary-active) !important; color: var(--brand-on-primary) !important; } .btn-outline-secondary { --bs-btn-color: var(--brand-secondary-hover); --bs-btn-border-color: #94A3B8; --bs-btn-bg: transparent; --bs-btn-hover-bg: var(--brand-secondary-hover); --bs-btn-hover-border-color: var(--brand-secondary-hover); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-secondary-active); --bs-btn-active-border-color: var(--brand-secondary-active); --bs-btn-active-color: #fff; color: var(--brand-secondary-hover) !important; border-color: #94A3B8 !important; background-color: transparent !important; } .btn-outline-secondary:hover, .btn-outline-secondary:focus-visible { background-color: var(--brand-secondary-hover) !important; border-color: var(--brand-secondary-hover) !important; color: #fff !important; } .btn-outline-secondary.active, .btn-outline-secondary:active, .btn-check:checked + .btn-outline-secondary { background-color: var(--brand-secondary-active) !important; border-color: var(--brand-secondary-active) !important; color: #fff !important; } .btn-outline-success { color: var(--brand-success) !important; border-color: var(--brand-success) !important; background-color: transparent !important; } .btn-outline-success:hover, .btn-outline-success:focus-visible { background-color: var(--brand-success) !important; color: var(--brand-on-success) !important; } .btn-outline-danger { color: var(--brand-danger) !important; border-color: var(--brand-danger) !important; background-color: transparent !important; } .btn-outline-danger:hover, .btn-outline-danger:focus-visible { background-color: var(--brand-danger) !important; color: var(--brand-on-danger) !important; } .btn-outline-warning { color: var(--brand-warning-active) !important; border-color: var(--brand-warning) !important; background-color: transparent !important; } .btn-outline-warning:hover, .btn-outline-warning:focus-visible { background-color: var(--brand-warning) !important; color: var(--brand-on-warning) !important; } .btn-outline-info { color: var(--brand-info-hover) !important; border-color: var(--brand-info) !important; background-color: transparent !important; } .btn-outline-info:hover, .btn-outline-info:focus-visible { background-color: var(--brand-info) !important; color: var(--brand-on-info) !important; } /* Accent button utility — use for high-contrast CTAs against blue */ .btn-accent { --bs-btn-bg: var(--brand-accent); --bs-btn-border-color: var(--brand-accent); --bs-btn-hover-bg: var(--brand-accent-hover); --bs-btn-hover-border-color: var(--brand-accent-hover); --bs-btn-active-bg: var(--brand-accent-hover); --bs-btn-color: var(--brand-on-accent); --bs-btn-hover-color: var(--brand-on-accent); --bs-btn-active-color: var(--brand-on-accent); color: var(--brand-on-accent); background-color: var(--brand-accent); border-color: var(--brand-accent); } /* ---- Navbar (always dark, branded) ------------------------------- */ .navbar.bg-dark, .navbar.navbar-dark { /* Solid dark, with a primary-tinted top edge as a subtle brand cue. Avoids `color-mix()` so it works in older browsers too. */ background-color: #0B1220 !important; background-image: linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.35) 0%, rgba(var(--brand-primary-rgb), 0.0) 60%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Bootstrap 5.3 reads these CSS vars for navbar text/links. Set them explicitly so hover/active never inherit the dark bg. */ --bs-navbar-color: rgba(255, 255, 255, 0.85); --bs-navbar-hover-color: var(--brand-accent); --bs-navbar-active-color: #ffffff; --bs-navbar-disabled-color: rgba(255, 255, 255, 0.4); --bs-navbar-brand-color: #ffffff; --bs-navbar-brand-hover-color: #ffffff; --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.15); } .navbar.bg-dark .navbar-brand, .navbar.navbar-dark .navbar-brand { color: #fff !important; font-weight: 600; } .navbar.bg-dark .nav-link, .navbar.navbar-dark .nav-link { color: rgba(255, 255, 255, 0.85) !important; } .navbar.bg-dark .nav-link:hover, .navbar.bg-dark .nav-link:focus, .navbar.navbar-dark .nav-link:hover, .navbar.navbar-dark .nav-link:focus { color: var(--brand-accent) !important; } .navbar.bg-dark .nav-link.active, .navbar.navbar-dark .nav-link.active, .navbar.bg-dark .nav-link.show, .navbar.navbar-dark .nav-link.show { color: #ffffff !important; } /* ---- Cards / surfaces ------------------------------------------- */ .card { background-color: var(--brand-surface); } /* Give card-header a subtle tint so the section title is clearly separated from the body. This complements the transparent rule from mobile.css and re-asserts a visible boundary. */ .card > .card-header { background-color: rgba(var(--brand-primary-rgb), 0.05); border-bottom: 1px solid var(--brand-border); color: var(--brand-text); } [data-bs-theme="dark"] .card > .card-header { background-color: rgba(var(--brand-primary-rgb), 0.12); color: #fff; } /* Branded "totals" cards on credits page */ .card.bg-primary { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover)) !important; color: var(--brand-on-primary) !important; border: 0; } .card.bg-warning { background: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-hover)) !important; color: var(--brand-on-accent) !important; border: 0; } /* ---- Forms ------------------------------------------------------- */ .form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.2); } /* ---- Links ------------------------------------------------------- */ a { color: var(--brand-primary); } a:hover { color: var(--brand-primary-hover); } /* ---- Badges (use brand for primary badges) ----------------------- */ .badge.bg-primary { background-color: var(--brand-primary) !important; } /* ---- Removed: legacy .btn-secondary / .btn-light / .btn-warning / .btn-info overrides — fully covered above with the unified palette. */ /* ---- Alerts: subtle branded info alert -------------------------- */ .alert-primary { --bs-alert-bg: var(--brand-primary-soft); --bs-alert-border-color: rgba(var(--brand-primary-rgb), 0.3); --bs-alert-color: var(--brand-primary-active); } /* ---- Color preset swatches (Settings page) ---------------------- */ .theme-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; } .theme-preset { border: 2px solid transparent; border-radius: 0.5rem; padding: 0.35rem 0.5rem; background: var(--bs-body-bg); cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; transition: border-color 0.15s ease, transform 0.15s ease; } .theme-preset:hover { transform: translateY(-1px); } .theme-preset.active { border-color: var(--brand-primary); } .theme-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.12); box-shadow: inset 0 0 0 3px var(--brand-surface, #fff); } .theme-color-row { display: flex; align-items: center; gap: 0.75rem; } .theme-color-row input[type="color"] { width: 56px; height: 40px; padding: 2px; border-radius: 0.5rem; border: 1px solid var(--brand-border); cursor: pointer; background: var(--brand-surface); }