/* ========================================================================== Theme System — Custom color schemes for Spring Workshop Load after bootstrap.min.css, before page-specific CSS. Activate by setting data-theme="workshop" on . Without data-theme, the site renders with stock Bootstrap colors. ========================================================================== */ /* ========================================================================== 1. Theme Palette — "Workshop" Picton Blue primary with Rhino secondary, Ocean Green / Roti / Pomegranate status colors. Tokens are mapped to Bootstrap in section 2. ========================================================================== */ [data-theme="workshop"] { /* Primary: Picton Blue */ --theme-primary: #4fb5ee; --theme-primary-rgb: 79, 181, 238; --theme-primary-hover: #3a9fd6; --theme-primary-active: #2889bf; /* Secondary: Rhino */ --theme-secondary: #2c4069; --theme-secondary-rgb: 44, 64, 105; --theme-secondary-hover: #1f3050; /* Success: Ocean Green */ --theme-success: #4db17f; --theme-success-rgb: 77, 177, 127; --theme-success-hover: #3d9a6b; /* Warning: Marigold */ --theme-warning: #e6a740; --theme-warning-rgb: 230, 167, 64; --theme-warning-hover: #cc9332; /* Danger: Pomegranate */ --theme-danger: #f44336; --theme-danger-rgb: 244, 67, 54; --theme-danger-hover: #d63527; /* Surfaces */ --theme-body-bg: #f8fafc; --theme-body-bg-rgb: 248, 250, 252; --theme-body-color: #1e293b; --theme-body-color-rgb: 30, 41, 59; --theme-border-color: #e2e8f0; --theme-light: #f1f5f9; --theme-light-rgb: 241, 245, 249; /* Focus */ --theme-focus-ring: rgba(79, 181, 238, 0.25); --theme-focus-border: #8fd0f4; /* Button text — WCAG AA contrast-safe against each fill color */ --theme-primary-text: #1e293b; /* dark on light blue */ --theme-success-text: #1e293b; /* dark on ocean green */ --theme-warning-text: #1e293b; /* dark on roti */ --theme-danger-text: #fff; /* white on pomegranate */ /* Links: use darker shade for readability on white backgrounds */ --theme-link: #2889bf; --theme-link-rgb: 40, 137, 191; --theme-link-hover: #1f6e9a; --theme-link-hover-rgb: 31, 110, 154; /* Navbar: frosted Rhino */ --theme-navbar-bg: rgba(25, 36, 60, 0.88); --theme-navbar-border: rgba(79, 181, 238, 0.12); } /* ========================================================================== 1b. Theme Palette — "Indigo" Deep indigo primary with slate secondary, teal success, amber warning, and rose danger. A bold, contemporary palette. ========================================================================== */ [data-theme="indigo"] { /* Primary: Indigo */ --theme-primary: #6366f1; --theme-primary-rgb: 99, 102, 241; --theme-primary-hover: #4f46e5; --theme-primary-active: #4338ca; /* Secondary: Slate */ --theme-secondary: #475569; --theme-secondary-rgb: 71, 85, 105; --theme-secondary-hover: #334155; /* Success: Teal */ --theme-success: #14b8a6; --theme-success-rgb: 20, 184, 166; --theme-success-hover: #0d9488; /* Warning: Amber */ --theme-warning: #f59e0b; --theme-warning-rgb: 245, 158, 11; --theme-warning-hover: #d97706; /* Danger: Rose */ --theme-danger: #f43f5e; --theme-danger-rgb: 244, 63, 94; --theme-danger-hover: #e11d48; /* Surfaces */ --theme-body-bg: #f8fafc; --theme-body-bg-rgb: 248, 250, 252; --theme-body-color: #1e293b; --theme-body-color-rgb: 30, 41, 59; --theme-border-color: #e2e8f0; --theme-light: #f1f5f9; --theme-light-rgb: 241, 245, 249; /* Focus */ --theme-focus-ring: rgba(99, 102, 241, 0.25); --theme-focus-border: #a5b4fc; /* Button text — WCAG AA contrast-safe */ --theme-primary-text: #fff; /* white on indigo */ --theme-success-text: #1e293b; /* dark on teal */ --theme-warning-text: #1e293b; /* dark on amber */ --theme-danger-text: #fff; /* white on rose */ /* Links */ --theme-link: #4f46e5; --theme-link-rgb: 79, 70, 229; --theme-link-hover: #4338ca; --theme-link-hover-rgb: 67, 56, 202; /* Navbar: frosted slate-indigo */ --theme-navbar-bg: rgba(30, 27, 75, 0.90); --theme-navbar-border: rgba(99, 102, 241, 0.12); } /* ========================================================================== 2. Shared Mappings — map --theme-* to Bootstrap --bs-* variables These rules only activate when a data-theme is set. ========================================================================== */ /* --- Root / utility-class variables ------------------------------------- */ [data-theme] { --bs-primary: var(--theme-primary); --bs-primary-rgb: var(--theme-primary-rgb); --bs-secondary: var(--theme-secondary); --bs-secondary-rgb: var(--theme-secondary-rgb); --bs-success: var(--theme-success); --bs-success-rgb: var(--theme-success-rgb); --bs-warning: var(--theme-warning); --bs-warning-rgb: var(--theme-warning-rgb); --bs-danger: var(--theme-danger); --bs-danger-rgb: var(--theme-danger-rgb); --bs-body-bg: var(--theme-body-bg); --bs-body-bg-rgb: var(--theme-body-bg-rgb); --bs-body-color: var(--theme-body-color); --bs-body-color-rgb: var(--theme-body-color-rgb); --bs-border-color: var(--theme-border-color); --bs-border-color-translucent: rgba(0, 0, 0, 0.1); --bs-light: var(--theme-light); --bs-light-rgb: var(--theme-light-rgb); --bs-link-color: var(--theme-link, var(--theme-primary)); --bs-link-color-rgb: var(--theme-link-rgb, var(--theme-primary-rgb)); --bs-link-hover-color: var(--theme-link-hover, var(--theme-primary-hover)); --bs-link-hover-color-rgb: var(--theme-link-hover-rgb, var(--theme-primary-rgb)); --bs-focus-ring-color: var(--theme-focus-ring); } /* --- Buttons: primary --------------------------------------------------- */ [data-theme] .btn-primary { --bs-btn-bg: var(--theme-primary); --bs-btn-border-color: var(--theme-primary); --bs-btn-color: var(--theme-primary-text, #fff); --bs-btn-hover-bg: var(--theme-primary-hover); --bs-btn-hover-border-color: var(--theme-primary-hover); --bs-btn-hover-color: var(--theme-primary-text, #fff); --bs-btn-active-bg: var(--theme-primary-active); --bs-btn-active-border-color: var(--theme-primary-active); --bs-btn-active-color: var(--theme-primary-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-primary-rgb); --bs-btn-disabled-bg: var(--theme-primary); --bs-btn-disabled-border-color: var(--theme-primary); --bs-btn-disabled-color: var(--theme-primary-text, #fff); } [data-theme] .btn-outline-primary { --bs-btn-color: var(--theme-primary); --bs-btn-border-color: var(--theme-primary); --bs-btn-hover-bg: var(--theme-primary); --bs-btn-hover-border-color: var(--theme-primary); --bs-btn-hover-color: var(--theme-primary-text, #fff); --bs-btn-active-bg: var(--theme-primary); --bs-btn-active-border-color: var(--theme-primary); --bs-btn-active-color: var(--theme-primary-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-primary-rgb); } /* --- Buttons: secondary ------------------------------------------------- */ [data-theme] .btn-secondary { --bs-btn-bg: var(--theme-secondary); --bs-btn-border-color: var(--theme-secondary); --bs-btn-hover-bg: var(--theme-secondary-hover); --bs-btn-hover-border-color: var(--theme-secondary-hover); --bs-btn-active-bg: var(--theme-secondary-hover); --bs-btn-active-border-color: var(--theme-secondary-hover); --bs-btn-focus-shadow-rgb: var(--theme-secondary-rgb); --bs-btn-disabled-bg: var(--theme-secondary); --bs-btn-disabled-border-color: var(--theme-secondary); } [data-theme] .btn-outline-secondary { --bs-btn-color: var(--theme-secondary); --bs-btn-border-color: var(--theme-secondary); --bs-btn-hover-bg: var(--theme-secondary); --bs-btn-hover-border-color: var(--theme-secondary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--theme-secondary); --bs-btn-active-border-color: var(--theme-secondary); --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: var(--theme-secondary-rgb); } /* --- Buttons: success --------------------------------------------------- */ [data-theme] .btn-success { --bs-btn-bg: var(--theme-success); --bs-btn-border-color: var(--theme-success); --bs-btn-color: var(--theme-success-text, #fff); --bs-btn-hover-bg: var(--theme-success-hover); --bs-btn-hover-border-color: var(--theme-success-hover); --bs-btn-hover-color: var(--theme-success-text, #fff); --bs-btn-active-bg: var(--theme-success-hover); --bs-btn-active-border-color: var(--theme-success-hover); --bs-btn-active-color: var(--theme-success-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-success-rgb); --bs-btn-disabled-bg: var(--theme-success); --bs-btn-disabled-border-color: var(--theme-success); --bs-btn-disabled-color: var(--theme-success-text, #fff); } [data-theme] .btn-outline-success { --bs-btn-color: var(--theme-success); --bs-btn-border-color: var(--theme-success); --bs-btn-hover-bg: var(--theme-success); --bs-btn-hover-border-color: var(--theme-success); --bs-btn-hover-color: var(--theme-success-text, #fff); --bs-btn-active-bg: var(--theme-success); --bs-btn-active-border-color: var(--theme-success); --bs-btn-active-color: var(--theme-success-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-success-rgb); } /* --- Buttons: warning --------------------------------------------------- */ [data-theme] .btn-warning { --bs-btn-bg: var(--theme-warning); --bs-btn-border-color: var(--theme-warning); --bs-btn-color: var(--theme-warning-text, #fff); --bs-btn-hover-bg: var(--theme-warning-hover); --bs-btn-hover-border-color: var(--theme-warning-hover); --bs-btn-hover-color: var(--theme-warning-text, #fff); --bs-btn-active-bg: var(--theme-warning-hover); --bs-btn-active-border-color: var(--theme-warning-hover); --bs-btn-active-color: var(--theme-warning-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-warning-rgb); --bs-btn-disabled-bg: var(--theme-warning); --bs-btn-disabled-border-color: var(--theme-warning); --bs-btn-disabled-color: var(--theme-warning-text, #fff); } [data-theme] .btn-outline-warning { --bs-btn-color: var(--theme-warning); --bs-btn-border-color: var(--theme-warning); --bs-btn-hover-bg: var(--theme-warning); --bs-btn-hover-border-color: var(--theme-warning); --bs-btn-hover-color: var(--theme-warning-text, #fff); --bs-btn-active-bg: var(--theme-warning); --bs-btn-active-border-color: var(--theme-warning); --bs-btn-active-color: var(--theme-warning-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-warning-rgb); } /* --- Buttons: danger ---------------------------------------------------- */ [data-theme] .btn-danger { --bs-btn-bg: var(--theme-danger); --bs-btn-border-color: var(--theme-danger); --bs-btn-color: var(--theme-danger-text, #fff); --bs-btn-hover-bg: var(--theme-danger-hover); --bs-btn-hover-border-color: var(--theme-danger-hover); --bs-btn-hover-color: var(--theme-danger-text, #fff); --bs-btn-active-bg: var(--theme-danger-hover); --bs-btn-active-border-color: var(--theme-danger-hover); --bs-btn-active-color: var(--theme-danger-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-danger-rgb); --bs-btn-disabled-bg: var(--theme-danger); --bs-btn-disabled-border-color: var(--theme-danger); --bs-btn-disabled-color: var(--theme-danger-text, #fff); } [data-theme] .btn-outline-danger { --bs-btn-color: var(--theme-danger); --bs-btn-border-color: var(--theme-danger); --bs-btn-hover-bg: var(--theme-danger); --bs-btn-hover-border-color: var(--theme-danger); --bs-btn-hover-color: var(--theme-danger-text, #fff); --bs-btn-active-bg: var(--theme-danger); --bs-btn-active-border-color: var(--theme-danger); --bs-btn-active-color: var(--theme-danger-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-danger-rgb); } /* --- Forms: focus states ------------------------------------------------ */ [data-theme] .form-control:focus, [data-theme] .form-select:focus { border-color: var(--theme-focus-border); box-shadow: 0 0 0 0.25rem var(--theme-focus-ring); } /* Searchable-select manages its own focus ring via ::after — suppress the duplicate box-shadow that the rule above would add to its inner input. */ [data-theme] searchable-select .ss-input:focus { box-shadow: none; } [data-theme] searchable-select .ss-wrapper:not(.open) .ss-input:focus { box-shadow: 0 0 0 0.25rem var(--theme-focus-ring); } [data-theme] .form-check-input:checked { background-color: var(--theme-primary); border-color: var(--theme-primary); } [data-theme] .form-check-input:focus { border-color: var(--theme-focus-border); box-shadow: 0 0 0 0.25rem var(--theme-focus-ring); } /* --- Navbar: frosted glass ---------------------------------------------- */ [data-theme] .navbar.bg-primary { background-color: var(--theme-navbar-bg) !important; backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); border-bottom: 1px solid var(--theme-navbar-border); position: sticky; top: 0; z-index: 1030; } /* --- Dropdown menus ----------------------------------------------------- */ [data-theme] .dropdown-item.active, [data-theme] .dropdown-item:active { background-color: var(--theme-primary); color: var(--theme-primary-text, #fff); } /* --- Pagination --------------------------------------------------------- */ [data-theme] .page-link { color: var(--theme-primary); } [data-theme] .page-item.active .page-link { background-color: var(--theme-primary); border-color: var(--theme-primary); color: var(--theme-primary-text, #fff); } [data-theme] .page-link:focus { box-shadow: 0 0 0 0.25rem var(--theme-focus-ring); } /* --- Card header text contrast ------------------------------------------ */ /* bg-success + text-white on task cards: override white if success is light */ [data-theme] .card-header.bg-success.text-white { color: var(--theme-success-text, #fff) !important; } [data-theme] .card-header.bg-success.text-white a { color: var(--theme-success-text, #fff) !important; } [data-theme] .card-header.bg-success .badge.bg-light { color: var(--theme-success) !important; } /* --- Alerts ------------------------------------------------------------- */ [data-theme] .alert-primary { --bs-alert-bg: rgba(var(--theme-primary-rgb), 0.1); --bs-alert-color: var(--theme-primary-hover); --bs-alert-border-color: rgba(var(--theme-primary-rgb), 0.2); } /* ========================================================================== 3. Shared Refinements — subtle polish active on any theme ========================================================================== */ /* Tighter heading tracking — modern, editorial feel */ [data-theme] h1, [data-theme] h2, [data-theme] h3 { letter-spacing: -0.025em; } [data-theme] .display-4 { font-weight: 600; letter-spacing: -0.03em; } /* Softer card shadows */ [data-theme] .card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); border-color: var(--theme-border-color); } [data-theme] .card.card-lift:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05) !important; } /* Slightly rounder cards */ [data-theme] .card, [data-theme] .modal-content { border-radius: 0.625rem; } /* Smooth inputs */ [data-theme] .form-control, [data-theme] .form-select { border-color: var(--theme-border-color); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* Footer adapts to theme border */ [data-theme] .footer { border-top-color: var(--theme-border-color); } /* Badge refinement */ [data-theme] .badge { font-weight: 500; }