/* | Brand layer — maps the school's two-colour brand palette onto Bootstrap 5.3. | | Bootstrap 5.3 styles every component from CSS custom properties, so the whole | UI can be re-skinned at runtime with no build step: we override the component | variables here and feed the palette itself from PHP (brand_palette_css() in | app/helpers.php, emitted in each layout's AFTER this file so it wins). | | Loaded by: layouts/admin.blade.php, public/layout.blade.php, layouts/kiosk.blade.php. | | The :root block below is only a FALLBACK for when the PHP palette is absent | (e.g. a mail preview or a cached view rendered without settings). Real values | come from Settings → Theme. */ :root { --brand: #43096C; --brand-rgb: 67, 9, 108; --brand-hover: #3B085F; --brand-hover-rgb: 59, 8, 95; --brand-dark: #2C0646; --brand-darker: #1E0431; --brand-light: #DDD3E5; --brand-tint: #F0EBF3; --brand-contrast: #FFFFFF; --accent: #D26E12; --accent-rgb: 210, 110, 18; --accent-hover: #B96110; --accent-dark: #934D0D; --accent-light: #F7E5D4; --accent-tint: #FBF3EC; --accent-safe: #AE5B0F; --accent-contrast: #FFFFFF; } /* ------------------------------------------------------------------ | Bootstrap theme colour remap | ------------------------------------------------------------------ */ :root { --bs-primary: var(--brand); --bs-primary-rgb: var(--brand-rgb); --bs-primary-text-emphasis: var(--brand-dark); --bs-primary-bg-subtle: var(--brand-tint); --bs-primary-border-subtle: var(--brand-light); --bs-link-color: var(--brand); --bs-link-color-rgb: var(--brand-rgb); --bs-link-hover-color: var(--brand-hover); /* Reboot's a:hover reads the *-rgb triplet, not the hex — without this the hover state falls back to Bootstrap blue. */ --bs-link-hover-color-rgb: var(--brand-hover-rgb); /* Bootstrap derives focus rings from this. */ --bs-focus-ring-color: rgba(var(--brand-rgb), .25); } /* Buttons ---------------------------------------------------------- */ .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand-hover); --bs-btn-hover-border-color: var(--brand-hover); --bs-btn-hover-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-active-color: var(--brand-contrast); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-disabled-color: var(--brand-contrast); --bs-btn-focus-shadow-rgb: var(--brand-rgb); } .btn-outline-primary { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand); --bs-btn-active-border-color: var(--brand); --bs-btn-active-color: var(--brand-contrast); --bs-btn-disabled-color: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-focus-shadow-rgb: var(--brand-rgb); } .btn-link { --bs-btn-color: var(--brand); --bs-btn-hover-color: var(--brand-hover); --bs-btn-active-color: var(--brand-dark); } /* | Accent buttons use --accent-safe (a darkened accent) rather than --accent, | because the brand orange only reaches ~3.5:1 against white — below the WCAG | AA 4.5:1 needed for button label text. */ .btn-accent { --bs-btn-bg: var(--accent-safe); --bs-btn-border-color: var(--accent-safe); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--accent-safe); --bs-btn-disabled-border-color: var(--accent-safe); --bs-btn-disabled-color: #fff; --bs-btn-focus-shadow-rgb: var(--accent-rgb); } .btn-outline-accent { --bs-btn-color: var(--accent-safe); --bs-btn-border-color: var(--accent-safe); --bs-btn-hover-bg: var(--accent-safe); --bs-btn-hover-border-color: var(--accent-safe); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: var(--accent-rgb); } /* Forms ------------------------------------------------------------ */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--brand-light); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .2); } .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } .form-switch .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); } /* The switch knob is a background SVG, so recolour it via --bs-form-switch-bg; restyling :focus alone left an unfocused-blue knob on focus. */ .form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2343096c'/%3e%3c/svg%3e"); } .form-range::-webkit-slider-thumb { background-color: var(--brand); } .form-range::-moz-range-thumb { background-color: var(--brand); } /* Navs, tabs, pills, pagination ------------------------------------ */ .nav-pills { --bs-nav-pills-link-active-bg: var(--brand); --bs-nav-pills-link-active-color: var(--brand-contrast); } .nav-tabs .nav-link.active { color: var(--brand); border-bottom-color: transparent; } .nav-tabs .nav-link:not(.active):hover { color: var(--brand-hover); } .pagination { --bs-pagination-color: var(--brand); --bs-pagination-hover-color: var(--brand-hover); --bs-pagination-hover-bg: var(--brand-tint); --bs-pagination-focus-color: var(--brand-hover); --bs-pagination-focus-bg: var(--brand-tint); --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .25); --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-active-color: var(--brand-contrast); } /* Lists, dropdowns, progress, misc --------------------------------- */ .list-group { --bs-list-group-active-bg: var(--brand); --bs-list-group-active-border-color: var(--brand); --bs-list-group-active-color: var(--brand-contrast); --bs-list-group-action-hover-bg: var(--brand-tint); } .dropdown-menu { --bs-dropdown-link-active-bg: var(--brand); --bs-dropdown-link-active-color: var(--brand-contrast); --bs-dropdown-link-hover-bg: var(--brand-tint); } .progress { --bs-progress-bar-bg: var(--brand); } .accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .2); --bs-accordion-active-color: var(--brand); --bs-accordion-active-bg: var(--brand-tint); } .alert-primary { --bs-alert-color: var(--brand-dark); --bs-alert-bg: var(--brand-tint); --bs-alert-border-color: var(--brand-light); } .spinner-border.text-primary, .spinner-grow.text-primary { color: var(--brand) !important; } /* Carousel controls/indicators need to read on light hero art. */ .carousel-indicators [data-bs-target] { background-color: var(--accent); } /* Tables ----------------------------------------------------------- */ .table { --bs-table-hover-bg: rgba(var(--brand-rgb), .045); } .table-primary { --bs-table-bg: var(--brand-tint); --bs-table-border-color: var(--brand-light); --bs-table-color: var(--brand-dark); --bs-table-striped-color: var(--brand-dark); --bs-table-hover-color: var(--brand-dark); } .table > thead th.sorting_asc, .table > thead th.sorting_desc { color: var(--brand); } /* Breadcrumbs, modals, offcanvas, toasts, tooltips, popovers -------- */ .breadcrumb { --bs-breadcrumb-item-active-color: var(--brand-dark); } .breadcrumb a { color: var(--brand); text-decoration: none; } .breadcrumb a:hover { color: var(--brand-hover); text-decoration: underline; } .modal-header { border-bottom-color: var(--brand-light); } .modal-header .modal-title { color: var(--brand-dark); } .offcanvas-header { border-bottom: 1px solid var(--brand-light); } .offcanvas-title { color: var(--brand-dark); } .toast-header { color: var(--brand-dark); } /* Secondary maps to the accent so Bootstrap's second colour is on-brand too. */ :root { --bs-secondary: var(--accent-dark); --bs-secondary-rgb: var(--accent-rgb); --bs-secondary-text-emphasis: var(--accent-dark); --bs-secondary-bg-subtle: var(--accent-tint); --bs-secondary-border-subtle: var(--accent-light); } .btn-secondary { --bs-btn-bg: var(--accent-safe); --bs-btn-border-color: var(--accent-safe); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--accent-dark); --bs-btn-hover-border-color: var(--accent-dark); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--accent-dark); --bs-btn-active-border-color: var(--accent-dark); --bs-btn-focus-shadow-rgb: var(--accent-rgb); } .btn-outline-secondary { --bs-btn-color: var(--brand-dark); --bs-btn-border-color: var(--brand-light); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark); --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: var(--brand-rgb); } /* Third-party widgets bundled by the admin panel -------------------- */ .select2-container--bootstrap-5 .select2-selection:focus, .select2-container--bootstrap-5.select2-container--focus .select2-selection { border-color: var(--brand-light); box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .2); } .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted, .select2-container--bootstrap-5 .select2-dropdown .select2-results__option[aria-selected="true"] { background-color: var(--brand); color: #fff; } .swal2-styled.swal2-confirm { background-color: var(--brand) !important; } .swal2-styled.swal2-confirm:focus { box-shadow: 0 0 0 .25rem rgba(var(--brand-rgb), .3) !important; } #toast-container > .toast-info, #toast-container > .toast-success { background-color: var(--brand); } .dt-buttons .btn { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand-light); } /* ------------------------------------------------------------------ | Brand utilities (used by both admin and public views) | ------------------------------------------------------------------ */ .text-brand { color: var(--brand) !important; } .text-accent { color: var(--accent-dark) !important; } .bg-brand { background-color: var(--brand) !important; color: var(--brand-contrast); } .bg-brand-tint { background-color: var(--brand-tint) !important; } .bg-accent { background-color: var(--accent) !important; color: var(--accent-contrast); } .bg-accent-tint { background-color: var(--accent-tint) !important; } .border-brand { border-color: var(--brand) !important; } .border-accent { border-color: var(--accent) !important; } /* Soft circular icon chip — replaces the repeated inline rgba(13,110,253,.1). */ .icon-chip { width: 64px; height: 64px; display: inline-grid; place-items: center; border-radius: 50%; background: rgba(var(--brand-rgb), .10); color: var(--brand); flex-shrink: 0; } .icon-chip.icon-chip-sm { width: 48px; height: 48px; } .icon-chip.icon-chip-accent { background: rgba(var(--accent-rgb), .12); color: var(--accent-dark); } /* Brand gradients — the site's recurring hero/CTA treatment. */ .bg-brand-gradient { background: linear-gradient(135deg, var(--brand), var(--brand-darker)); color: #fff; } .bg-brand-accent-gradient { background: linear-gradient(135deg, var(--brand), var(--accent-dark)); color: #fff; } .bg-accent-gradient { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }