/* ========================================================================== 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. ========================================================================== */ /* ========================================================================== 0. Self-hosted Font — DM Sans (OFL licensed) Variable font, Latin + Latin-ext subsets, weights 400–600. ========================================================================== */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/dm-sans-latin-7c87a648293fbb5b2924aafaa59e8aea.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/dm-sans-latin-ext-49935c4b623536eb645c61103b8e6cae.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== 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: Cerulean — vivid blue, authoritative anchor */ --theme-primary: #2b7de9; --theme-primary-rgb: 43, 125, 233; --theme-primary-hover: #1f6ad4; --theme-primary-active: #1758b8; /* Secondary: Slate — neutral for Open status */ --theme-secondary: #64748b; --theme-secondary-rgb: 100, 116, 139; --theme-secondary-hover: #475569; /* Info: Royal Violet — In Review, well separated from primary (265° vs 220°) */ --theme-info: #7c3aed; --theme-info-rgb: 124, 58, 237; --theme-info-hover: #6d28d9; /* Success: Jade — Completed, darker for white-text contrast */ --theme-success: #16a34a; --theme-success-rgb: 22, 163, 74; --theme-success-hover: #15803d; /* Warning: Marigold — In Progress, warm but not alarming */ --theme-warning: #e6a740; --theme-warning-rgb: 230, 167, 64; --theme-warning-hover: #cc9332; /* Danger: Vermilion — Overdue/delete, deep red */ --theme-danger: #dc2626; --theme-danger-rgb: 220, 38, 38; --theme-danger-hover: #b91c1c; /* Surfaces — blue-tinted neutrals for brand cohesion */ --theme-body-bg: #f7f9fc; --theme-body-bg-rgb: 247, 249, 252; --theme-body-color: #1a2332; --theme-body-color-rgb: 26, 35, 50; --theme-border-color: #dce3ed; --theme-light: #edf1f7; --theme-light-rgb: 237, 241, 247; /* Surface layers — distinct elevation backgrounds */ --theme-surface-raised: #ffffff; --theme-surface-sunken: #eef2f7; /* Focus */ --theme-focus-ring: rgba(43, 125, 233, 0.3); --theme-focus-border: #7cb3f0; /* Button text — WCAG AA contrast-safe against each fill color */ --theme-primary-text: #fff; /* white on cerulean — 4.56:1 */ --theme-info-text: #fff; /* white on violet — 7.27:1 */ --theme-success-text: #fff; /* white on jade — 4.52:1 */ --theme-warning-text: #1e293b; /* dark on marigold — 9.2:1 */ --theme-danger-text: #fff; /* white on vermilion — 5.63:1 */ /* Links: use primary shade for readability on white backgrounds */ --theme-link: #1f6ad4; --theme-link-rgb: 31, 106, 212; --theme-link-hover: #1758b8; --theme-link-hover-rgb: 23, 88, 184; /* Navbar: frosted dark blue */ --theme-navbar-bg: rgba(25, 40, 70, 0.92); --theme-navbar-border: rgba(43, 125, 233, 0.12); } /* ========================================================================== 1b. Theme Palette — "Notebook" Warm editorial palette. Cream canvas, terracotta accent, warm neutrals, multi-layer shadows, whisper borders. ========================================================================== */ [data-theme="notebook"] { /* Primary: Terracotta — warm, editorial, confident (4.92:1) */ --theme-primary: #b35537; --theme-primary-rgb: 179, 85, 55; --theme-primary-hover: #9a4930; --theme-primary-active: #843e29; /* Secondary: Warm Stone — muted, natural */ --theme-secondary: #78716c; --theme-secondary-rgb: 120, 113, 108; --theme-secondary-hover: #615b56; /* Info: Dusty Plum — In Review, distinct from terracotta (295° vs 15°) */ --theme-info: #8b5e83; --theme-info-rgb: 139, 94, 131; --theme-info-hover: #764f6f; /* Success: Olive — Completed, earthy green (4.70:1) */ --theme-success: #358254; --theme-success-rgb: 53, 130, 84; --theme-success-hover: #2d6d46; /* Warning: Amber — In Progress, warm gold */ --theme-warning: #c48a2c; --theme-warning-rgb: 196, 138, 44; --theme-warning-hover: #a87524; /* Danger: Brick — Overdue/delete, warm red */ --theme-danger: #c4362a; --theme-danger-rgb: 196, 54, 42; --theme-danger-hover: #a32d22; /* Surfaces — warm cream canvas */ --theme-body-bg: #f9f7f3; --theme-body-bg-rgb: 249, 247, 243; --theme-body-color: #1c1c1e; --theme-body-color-rgb: 28, 28, 30; --theme-border-color: #e5e0d8; --theme-light: #f0ece5; --theme-light-rgb: 240, 236, 229; /* Surface layers — warm tints */ --theme-surface-raised: #ffffff; --theme-surface-sunken: #f0ece5; /* Focus */ --theme-focus-ring: rgba(179, 85, 55, 0.25); --theme-focus-border: #cf9279; /* Button text — WCAG AA contrast-safe */ --theme-primary-text: #fff; /* white on terracotta — 4.92:1 */ --theme-info-text: #fff; /* white on dusty plum — 5.22:1 */ --theme-success-text: #fff; /* white on olive — 4.70:1 */ --theme-warning-text: #1c1c1e; /* dark on amber — 8.6:1 */ --theme-danger-text: #fff; /* white on brick — 5.84:1 */ /* Links: slightly deeper terracotta for white-bg readability */ --theme-link: #9a4930; --theme-link-rgb: 154, 73, 48; --theme-link-hover: #843e29; --theme-link-hover-rgb: 132, 62, 41; /* Navbar: warm dark with terracotta glow */ --theme-navbar-bg: rgba(40, 36, 32, 0.94); --theme-navbar-border: rgba(179, 85, 55, 0.15); } /* ========================================================================== 1c. Theme Palette — "Titanium" Industrial precision. Zero border-radius, flat depth via background layering, compressed typography, dark masthead. ========================================================================== */ [data-theme="titanium"] { /* Primary: Steel Blue — the singular interactive color */ --theme-primary: #0f62fe; --theme-primary-rgb: 15, 98, 254; --theme-primary-hover: #0353e9; --theme-primary-active: #002d9c; /* Secondary: Graphite — neutral text/icon color */ --theme-secondary: #525252; --theme-secondary-rgb: 82, 82, 82; --theme-secondary-hover: #393939; /* Info: Purple 60 — In Review, distinct from blue (270° vs 220°, 5.83:1) */ --theme-info: #8a3ffc; --theme-info-rgb: 138, 63, 252; --theme-info-hover: #6929c4; /* Success: Industrial Green — Completed (5.02:1) */ --theme-success: #198038; --theme-success-rgb: 25, 128, 56; --theme-success-hover: #0e6027; /* Warning: Signal Yellow — high visibility */ --theme-warning: #f1c21b; --theme-warning-rgb: 241, 194, 27; --theme-warning-hover: #d2a106; /* Danger: Engineering Red — error/delete */ --theme-danger: #da1e28; --theme-danger-rgb: 218, 30, 40; --theme-danger-hover: #ba1b23; /* Surfaces — white/gray layering for depth */ --theme-body-bg: #ffffff; --theme-body-bg-rgb: 255, 255, 255; --theme-body-color: #161616; --theme-body-color-rgb: 22, 22, 22; --theme-border-color: #e0e0e0; --theme-light: #f8f8f8; --theme-light-rgb: 248, 248, 248; /* Surface layers */ --theme-surface-raised: #ffffff; --theme-surface-sunken: #e8e8e8; /* Focus — strong blue ring */ --theme-focus-ring: rgba(15, 98, 254, 0.4); --theme-focus-border: #0f62fe; /* Button text — WCAG AA verified */ --theme-primary-text: #fff; /* white on Blue 60 — 4.62:1 */ --theme-info-text: #fff; /* white on Purple 60 — 5.83:1 */ --theme-success-text: #fff; /* white on Green 60 — 5.02:1 */ --theme-warning-text: #161616; /* dark on Yellow 30 — 13.0:1 */ --theme-danger-text: #fff; /* white on Red 60 — 5.00:1 */ /* Links: steel blue */ --theme-link: #0f62fe; --theme-link-rgb: 15, 98, 254; --theme-link-hover: #0043ce; --theme-link-hover-rgb: 0, 67, 206; /* Navbar: Gray 100 solid dark masthead */ --theme-navbar-bg: #161616; --theme-navbar-border: #262626; } /* ========================================================================== 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-info: var(--theme-info); --bs-info-rgb: var(--theme-info-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); } /* --- Buttons: info ------------------------------------------------------ */ [data-theme] .btn-info { --bs-btn-bg: var(--theme-info); --bs-btn-border-color: var(--theme-info); --bs-btn-color: var(--theme-info-text, #fff); --bs-btn-hover-bg: var(--theme-info-hover); --bs-btn-hover-border-color: var(--theme-info-hover); --bs-btn-hover-color: var(--theme-info-text, #fff); --bs-btn-active-bg: var(--theme-info-hover); --bs-btn-active-border-color: var(--theme-info-hover); --bs-btn-active-color: var(--theme-info-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-info-rgb); --bs-btn-disabled-bg: var(--theme-info); --bs-btn-disabled-border-color: var(--theme-info); --bs-btn-disabled-color: var(--theme-info-text, #fff); } [data-theme] .btn-outline-info { --bs-btn-color: var(--theme-info); --bs-btn-border-color: var(--theme-info); --bs-btn-hover-bg: var(--theme-info); --bs-btn-hover-border-color: var(--theme-info); --bs-btn-hover-color: var(--theme-info-text, #fff); --bs-btn-active-bg: var(--theme-info); --bs-btn-active-border-color: var(--theme-info); --bs-btn-active-color: var(--theme-info-text, #fff); --bs-btn-focus-shadow-rgb: var(--theme-info-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 { background-color: #fff; border-color: var(--bs-secondary-color, #6c757d); } [data-theme] .form-check-input:checked { background-color: var(--theme-primary); border-color: var(--theme-primary); } [data-theme] .form-check-input:disabled { background-color: var(--theme-surface-sunken); border-color: var(--theme-border-color); opacity: 1; } [data-theme] .form-check-input:checked:disabled { background-color: var(--theme-primary); opacity: 0.5; } [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. Design Tokens — motion, shadow, radius, and typography scales ========================================================================== */ [data-theme] { /* Easing — purpose-driven curves instead of generic "ease" */ --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* Elements entering */ --ease-in: cubic-bezier(0.5, 0, 0.75, 0); /* Elements exiting */ --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* State toggles */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Playful overshoot */ /* Durations — 100/300/500 rule */ --duration-fast: 120ms; /* Instant feedback: hover, toggle, checkbox */ --duration-normal: 250ms; /* State transitions: modal, dropdown, card lift */ --duration-slow: 400ms; /* Entrance animations: toast, page reveal */ /* Shadows — two-shadow technique (contact + ambient) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.1); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.1), 0 32px 64px rgba(0, 0, 0, 0.14); /* Border radius */ --radius-sm: 0.375rem; /* Badges, small chips, inputs */ --radius-md: 0.625rem; /* Buttons, dropdowns, small cards */ --radius-lg: 0.875rem; /* Cards, modals, large containers */ --radius-xl: 1.25rem; /* Hero sections, prominent panels */ --radius-full: 9999px; /* Pills, avatars */ } /* ========================================================================== 4. Shared Refinements — visual polish active on any theme ========================================================================== */ /* ── Typography ────────────────────────────────────────────────────── */ /* Custom font: DM Sans — clean, geometric, modern */ [data-theme] { --bs-body-font-family: "DM Sans", system-ui, -apple-system, sans-serif; --bs-body-font-weight: 400; } [data-theme] body { font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [data-theme] h1, [data-theme] h2, [data-theme] h3, [data-theme] h4, [data-theme] h5, [data-theme] h6 { font-weight: 600; letter-spacing: -0.025em; } [data-theme] h1, [data-theme] .h1 { letter-spacing: -0.03em; } [data-theme] .display-4 { font-weight: 600; letter-spacing: -0.035em; } /* ── Cards ─────────────────────────────────────────────────────────── */ [data-theme] .card { background: var(--theme-surface-raised, #fff); box-shadow: var(--shadow-sm); border: none; transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } [data-theme] .card.card-lift:hover { box-shadow: var(--shadow-lg) !important; transform: translateY(-4px); } [data-theme] .card { --bs-card-border-radius: var(--radius-lg); --bs-card-inner-border-radius: var(--radius-lg); } [data-theme] .modal-content { --bs-modal-border-radius: var(--radius-lg); --bs-modal-inner-border-radius: var(--radius-lg); } /* ── Dropdowns ─────────────────────────────────────────────────────── */ [data-theme] .dropdown-menu { border-color: var(--theme-border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 0.375rem; } [data-theme] .dropdown-item { border-radius: var(--radius-sm); padding: 0.45rem 0.75rem; transition: background-color var(--duration-fast) var(--ease-in-out); } [data-theme] .dropdown-item:hover, [data-theme] .dropdown-item:focus { background-color: rgba(var(--theme-body-color-rgb), 0.06); } /* ── Form Controls ─────────────────────────────────────────────────── */ [data-theme] .form-control, [data-theme] .form-select { background-color: #fff; border-color: var(--theme-border-color); border-radius: var(--radius-sm); transition: border-color var(--duration-fast) var(--ease-in-out), box-shadow var(--duration-fast) var(--ease-in-out); } /* Readonly: white bg, dashed border — editable-looking but signals "not yours to change" */ [data-theme] .form-control:read-only:not(:disabled) { background-color: #fff; border-style: dashed; color: var(--bs-secondary-color, #6c757d); } /* Disabled: sunken bg, no border — clearly inert */ [data-theme] .form-control:disabled, [data-theme] .form-select:disabled { background-color: var(--theme-surface-sunken); border-color: transparent; color: var(--bs-secondary-color, #6c757d); } /* Match input-group-text to adjacent disabled controls (e.g., checklist checkboxes) */ [data-theme] .input-group:has(.form-control:disabled) .input-group-text { background-color: var(--theme-surface-sunken); border-color: transparent; } [data-theme] .form-control { padding: 0.5rem 0.875rem; } /* input-group-text must match form-control padding so they align in input-groups */ [data-theme] .input-group-text { padding-top: 0.5rem; padding-bottom: 0.5rem; } [data-theme] .form-select { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.875rem; /* right padding left at Bootstrap default to accommodate dropdown arrow */ } [data-theme] .form-control:focus, [data-theme] .form-select:focus { border-color: var(--theme-focus-border); box-shadow: 0 0 0 3px var(--theme-focus-ring); } [data-theme] .form-control-sm { padding: 0.3rem 0.625rem; } [data-theme] .input-group-sm > .input-group-text { padding-top: 0.3rem; padding-bottom: 0.3rem; } [data-theme] .form-select-sm { padding-top: 0.3rem; padding-bottom: 0.3rem; padding-left: 0.625rem; } /* ── Buttons ───────────────────────────────────────────────────────── */ [data-theme] .btn { border-radius: var(--radius-sm); font-weight: 500; /* Match vertical padding to form-control so buttons align in same-row layouts */ --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 0.875rem; transition: all var(--duration-fast) var(--ease-out); } [data-theme] .btn:active { transform: scale(0.97); } [data-theme] .btn-sm, [data-theme] .btn-group-sm > .btn { --bs-btn-padding-y: 0.3rem; --bs-btn-padding-x: 0.625rem; } [data-theme] .btn-lg { border-radius: var(--radius-md); --bs-btn-padding-y: 0.625rem; --bs-btn-padding-x: 1.5rem; } /* ── Badges ─────────────────────────────────────────────────────────── */ [data-theme] .badge { font-weight: 500; letter-spacing: 0.01em; padding: 0.3em 0.65em; } /* ── Modals ─────────────────────────────────────────────────────────── */ [data-theme] .modal.fade .modal-dialog { transform: translateY(20px) scale(0.96); transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out); } [data-theme] .modal.show .modal-dialog { transform: translateY(0) scale(1); } [data-theme] .modal-content { box-shadow: var(--shadow-xl); border: none; } [data-theme] .modal-header { border-bottom-color: var(--theme-border-color); } [data-theme] .modal-footer { border-top-color: var(--theme-border-color); } /* ── Tables ─────────────────────────────────────────────────────────── */ [data-theme] .table-hover tbody tr { transition: background-color var(--duration-fast) var(--ease-in-out); } [data-theme] .table td { font-variant-numeric: tabular-nums; } [data-theme] .table { --bs-table-border-color: var(--theme-border-color); } [data-theme] .table thead th { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary); border-bottom-width: 2px; } /* ── Navbar ─────────────────────────────────────────────────────────── */ [data-theme] .navbar { padding-top: 0.625rem; padding-bottom: 0.625rem; } /* ── Footer ────────────────────────────────────────────────────────── */ [data-theme] .footer { border-top-color: var(--theme-border-color); } /* ── Focus ring — visible on keyboard only, offset for clarity ────── */ [data-theme] :focus-visible { outline: 2px solid var(--theme-focus-border, var(--bs-primary)); outline-offset: 2px; } [data-theme] .btn:focus-visible, [data-theme] .form-control:focus-visible, [data-theme] .form-select:focus-visible { outline: none; /* These use box-shadow focus rings instead */ } /* ── Alerts ────────────────────────────────────────────────────────── */ [data-theme] .alert { border-radius: var(--radius-md); } /* ── List groups ───────────────────────────────────────────────────── */ [data-theme] .list-group-item { border-color: var(--theme-border-color); transition: background-color var(--duration-fast) var(--ease-in-out); } [data-theme] .list-group-item-action:hover { background-color: var(--theme-surface-sunken, var(--bs-light)); } /* ========================================================================== 5. Notebook Theme Refinements Elevated visual polish: warm editorial feel, multi-layer depth, tighter typography, whisper borders, inset button shadows. Only active when data-theme="notebook". ========================================================================== */ /* ── Token overrides — must come AFTER the shared [data-theme] design tokens. */ [data-theme="notebook"] { /* Multi-layer shadows — ring + soft blur + lift */ --shadow-xs: 0 1px 2px rgba(28, 28, 30, 0.04); --shadow-sm: 0 0 0 1px rgba(28, 28, 30, 0.02), 0 1px 4px rgba(28, 28, 30, 0.04), 0 4px 12px rgba(28, 28, 30, 0.06); --shadow-md: 0 0 0 1px rgba(28, 28, 30, 0.02), 0 2px 6px rgba(28, 28, 30, 0.05), 0 8px 24px rgba(28, 28, 30, 0.08); --shadow-lg: 0 0 0 1px rgba(28, 28, 30, 0.02), 0 4px 8px rgba(28, 28, 30, 0.06), 0 16px 40px rgba(28, 28, 30, 0.1); --shadow-xl: 0 0 0 1px rgba(28, 28, 30, 0.02), 0 8px 16px rgba(28, 28, 30, 0.08), 0 32px 64px rgba(28, 28, 30, 0.12); /* Border radius — tighter, more professional */ --radius-sm: 0.3125rem; /* 5px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.625rem; /* 10px */ --radius-xl: 1rem; /* 16px */ } /* ── Typography: tighter heading tracking + positive small-text tracking ─ */ [data-theme="notebook"] h1, [data-theme="notebook"] .h1 { letter-spacing: -0.04em; } [data-theme="notebook"] h2, [data-theme="notebook"] .h2 { letter-spacing: -0.035em; } [data-theme="notebook"] h3, [data-theme="notebook"] .h3 { letter-spacing: -0.03em; } [data-theme="notebook"] .display-4 { font-weight: 600; letter-spacing: -0.045em; } /* Positive tracking on small text for legibility */ [data-theme="notebook"] .badge { letter-spacing: 0.02em; } [data-theme="notebook"] .table thead th { letter-spacing: 0.06em; } /* ── Cards: whisper border + refined shadow ──────────────────────────── */ [data-theme="notebook"] .card { border: 1px solid rgba(28, 28, 30, 0.06); } [data-theme="notebook"] .card.card-lift:hover { border-color: rgba(28, 28, 30, 0.1); } /* ── Buttons: inset highlight on primary ────────────────────────────── */ [data-theme="notebook"] .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(28, 28, 30, 0.12); } [data-theme="notebook"] .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 4px rgba(28, 28, 30, 0.16); } [data-theme="notebook"] .btn-primary:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } /* Subtle inset on other solid buttons too */ [data-theme="notebook"] .btn-success, [data-theme="notebook"] .btn-danger, [data-theme="notebook"] .btn-info { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(28, 28, 30, 0.1); } /* ── Form controls: warm border tint ─────────────────────────────────── */ [data-theme="notebook"] .form-control, [data-theme="notebook"] .form-select { border-color: #ddd8d0; } [data-theme="notebook"] .form-control:focus, [data-theme="notebook"] .form-select:focus { border-color: var(--theme-focus-border); box-shadow: 0 0 0 3px var(--theme-focus-ring); } /* ── Dropdowns: warm border ──────────────────────────────────────────── */ [data-theme="notebook"] .dropdown-menu { border-color: #ddd8d0; } /* ── Navbar: warmer frosted glass ────────────────────────────────────── */ [data-theme="notebook"] .navbar.bg-primary { backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } /* ── Section alternation helper ───────────────────────────────────────── */ [data-theme="notebook"] .bg-light { background-color: var(--theme-light) !important; } /* ── Modal: whisper border + warm shadow ─────────────────────────────── */ [data-theme="notebook"] .modal-content { border: 1px solid rgba(28, 28, 30, 0.06); } /* ── Pagination: softer borders ──────────────────────────────────────── */ [data-theme="notebook"] .page-link { border-color: #ddd8d0; } /* ── Alerts: warm transparent tints ──────────────────────────────────── */ [data-theme="notebook"] .alert-primary { --bs-alert-bg: rgba(var(--theme-primary-rgb), 0.08); --bs-alert-border-color: rgba(var(--theme-primary-rgb), 0.15); } /* ========================================================================== 6. Titanium Theme Refinements Industrial precision: zero border-radius on ALL elements, flat depth via background-color layering, compressed typography, bottom-border inputs, solid dark masthead. Only active when data-theme="titanium". ========================================================================== */ /* ── Token overrides — must come AFTER the shared [data-theme] design tokens section so these values win (same specificity, later source order). */ [data-theme="titanium"] { /* Shadows — minimal; depth via background layering */ --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.2); --shadow-xl: 0 2px 6px rgba(0, 0, 0, 0.3); /* Border radius — ZERO everywhere, angular identity */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 9999px; /* Bootstrap's own radius variables */ --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; --bs-border-radius-pill: 9999px; /* Titanium surface tokens — centralize repeated gray values */ --theme-input-bg: #f4f4f4; } /* ── Nuclear zero radius — override EVERY Bootstrap component ────────── */ /* Bootstrap hardcodes border-radius on many components. The --bs-border-radius variables only cover some. This catches everything else. */ [data-theme="titanium"] .btn, [data-theme="titanium"] .card, [data-theme="titanium"] .card-header:first-child, [data-theme="titanium"] .card-footer:last-child, [data-theme="titanium"] .card-img-top, [data-theme="titanium"] .card-img-bottom, [data-theme="titanium"] .modal-content, [data-theme="titanium"] .modal-header, [data-theme="titanium"] .modal-footer, [data-theme="titanium"] .dropdown-menu, [data-theme="titanium"] .dropdown-item, [data-theme="titanium"] .form-control, [data-theme="titanium"] .form-select, [data-theme="titanium"] .form-check-input, [data-theme="titanium"] .input-group > :not(:first-child), [data-theme="titanium"] .input-group > :not(:last-child), [data-theme="titanium"] .input-group-text, [data-theme="titanium"] .alert, [data-theme="titanium"] .toast, [data-theme="titanium"] .toast-header, [data-theme="titanium"] .badge, [data-theme="titanium"] .list-group, [data-theme="titanium"] .list-group-item, [data-theme="titanium"] .list-group-item:first-child, [data-theme="titanium"] .list-group-item:last-child, [data-theme="titanium"] .page-link, [data-theme="titanium"] .page-item:first-child .page-link, [data-theme="titanium"] .page-item:last-child .page-link, [data-theme="titanium"] .accordion-item, [data-theme="titanium"] .accordion-button, [data-theme="titanium"] .nav-link, [data-theme="titanium"] .nav-tabs .nav-link, [data-theme="titanium"] .breadcrumb, [data-theme="titanium"] .progress, [data-theme="titanium"] .progress-bar, [data-theme="titanium"] .popover, [data-theme="titanium"] .tooltip-inner, [data-theme="titanium"] .btn-group > .btn, [data-theme="titanium"] .btn-group > .btn:first-child, [data-theme="titanium"] .btn-group > .btn:last-child, [data-theme="titanium"] .btn-close, [data-theme="titanium"] searchable-select .ss-wrapper::after, [data-theme="titanium"] searchable-select .ss-wrapper.open .ss-input, [data-theme="titanium"] searchable-select .ss-menu { border-radius: 0 !important; } /* Exception: pill badges keep full radius */ [data-theme="titanium"] .rounded-pill { border-radius: 9999px !important; } /* ── Typography: light display, compressed, productive scale ──────────── */ [data-theme="titanium"] h1, [data-theme="titanium"] .h1 { font-weight: 400; letter-spacing: -0.035em; line-height: 1.17; } [data-theme="titanium"] h2, [data-theme="titanium"] .h2 { font-weight: 400; letter-spacing: -0.025em; line-height: 1.2; } [data-theme="titanium"] h3, [data-theme="titanium"] .h3 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; } [data-theme="titanium"] h4, [data-theme="titanium"] .h4, [data-theme="titanium"] h5, [data-theme="titanium"] .h5, [data-theme="titanium"] h6, [data-theme="titanium"] .h6 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } [data-theme="titanium"] .display-4 { font-weight: 400; letter-spacing: -0.04em; line-height: 1.1; } /* Body text: tighter line-height */ [data-theme="titanium"] body { line-height: 1.4; } /* Micro-tracking on small text */ [data-theme="titanium"] .badge { font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.7rem; } [data-theme="titanium"] .table thead th { letter-spacing: 0.08em; font-size: 0.72rem; } /* ── Cards: flat — NO shadow, border only, background-color hover ────── */ [data-theme="titanium"] .card { box-shadow: none; border: 1px solid var(--theme-border-color); background: var(--theme-surface-raised); } [data-theme="titanium"] .card.card-lift:hover { box-shadow: none !important; transform: none; background-color: var(--theme-input-bg); border-color: #c6c6c6; } /* Card headers on gray surface for layering depth */ [data-theme="titanium"] .card-header { border-bottom: 1px solid var(--theme-border-color); } /* ── Buttons: flat — no shadow, no transform ──────────────────────────── */ [data-theme="titanium"] .btn { font-weight: 500; letter-spacing: 0.01em; } [data-theme="titanium"] .btn:active { transform: none; } /* Focus: inset blue + white inner ring */ [data-theme="titanium"] .btn:focus-visible { outline: none !important; box-shadow: inset 0 0 0 1px var(--theme-primary), inset 0 0 0 2px #fff !important; } /* ── Form controls: flat gray-filled inputs ──────────────────────────── */ /* KEY RULE: never override padding, border-width, or height. Only change visual properties: background-color, border-color. Bootstrap handles sizing. */ [data-theme="titanium"] .form-control, [data-theme="titanium"] .form-select { background-color: var(--theme-input-bg); border-color: transparent; } [data-theme="titanium"] .input-group-text { background-color: var(--theme-input-bg); border-color: transparent; color: #525252; } /* Bootstrap uses margin-left:-1px on non-first input-group children to overlap adjacent borders. With transparent borders this creates a visible 1px shift where the gray background peeks through asymmetrically. Remove it. */ [data-theme="titanium"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not( .invalid-feedback ) { margin-left: 0; } /* Focus: use the standard theme focus ring (not bottom-border) — Bootstrap's input-group border merging makes bottom-border focus unreliable. */ [data-theme="titanium"] .form-control:focus, [data-theme="titanium"] .form-select:focus { background-color: var(--theme-input-bg); border-color: var(--theme-focus-border); } [data-theme="titanium"] .form-control:disabled, [data-theme="titanium"] .form-select:disabled { background-color: #e8e8e8; border-color: transparent; color: #8d8d8d; } [data-theme="titanium"] .form-control:read-only:not(:disabled) { background-color: var(--theme-input-bg); border-color: transparent; border-bottom-style: dashed; border-bottom-color: #c6c6c6; color: #525252; } /* Labels: small, weighted */ [data-theme="titanium"] .form-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: #525252; margin-bottom: 0.375rem; } /* Checkboxes: square */ [data-theme="titanium"] .form-check-input { border-color: #161616; } [data-theme="titanium"] .form-check-input:checked { background-color: var(--theme-primary); border-color: var(--theme-primary); } /* ── Searchable-select: use standard theme focus ─────────────────────── */ [data-theme="titanium"] searchable-select .ss-input { background-color: var(--theme-input-bg); border-color: transparent; } /* Disabled/readonly */ [data-theme="titanium"] searchable-select[disabled] .ss-input { background-color: #e8e8e8; border-color: transparent; } [data-theme="titanium"] searchable-select[readonly] .ss-input { background-color: var(--theme-input-bg); border-color: transparent; border-bottom-style: dashed; border-bottom-color: #c6c6c6; } /* ── Dropdowns: sharp, floating ──────────────────────────────────────── */ [data-theme="titanium"] .dropdown-menu { border: 1px solid #e0e0e0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); padding: 0.25rem 0; } [data-theme="titanium"] .dropdown-item { padding: 0.5rem 1rem; transition: background-color var(--duration-fast) var(--ease-in-out); } [data-theme="titanium"] .dropdown-item:hover, [data-theme="titanium"] .dropdown-item:focus { background-color: #e8e8e8; } /* ── Navbar: solid Gray 100 masthead ─────────────────────────────────── */ [data-theme="titanium"] .navbar.bg-primary { background-color: #161616 !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #393939; } /* ── Modals: sharp, slide-down entrance ──────────────────────────────── */ [data-theme="titanium"] .modal-content { border: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } [data-theme="titanium"] .modal.fade .modal-dialog { transform: translateY(-20px) scale(1); } [data-theme="titanium"] .modal.show .modal-dialog { transform: translateY(0) scale(1); } /* ── Alerts: left-border accent band ──────────────────────────────────── */ [data-theme="titanium"] .alert { border: none; border-left: 3px solid; } [data-theme="titanium"] .alert-primary { --bs-alert-bg: #edf5ff; --bs-alert-color: #002d9c; --bs-alert-border-color: var(--theme-primary); } /* ── Tables: tighter, denser ─────────────────────────────────────────── */ [data-theme="titanium"] .table { --bs-table-striped-bg: var(--theme-input-bg); } [data-theme="titanium"] .table thead th { vertical-align: middle; } /* ── List groups: flat, tight ────────────────────────────────────────── */ [data-theme="titanium"] .list-group-item-action:hover { background-color: #e8e8e8; } /* ── Toasts: sharp ───────────────────────────────────────────────────── */ [data-theme="titanium"] .toast { border: 1px solid #e0e0e0; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }