@charset "UTF-8"; /* * ============================================================ * main.css - framework layer * ============================================================ * * Load order in : * 1. bootstrap.min.css * 2. theme-{name}.css (brand token VALUES) * 3. THIS FILE (derivations + components) * 4. header.css (nav) * 5. custom.css (custom to project) * * CONTRACT: this file contains NO raw brand values. * Every colour, radius and font here is derived from a token the * theme file supplies. If you find yourself typing a hex code below, * it belongs in the theme file instead. * * WHY ONE DERIVATION BLOCK: * Custom properties resolve on the element where they are DECLARED, * then inherit as a resolved value. A derived token declared only * under :root will NOT re-resolve inside a nested [data-bs-theme] * scope, so a dark CTA section on a light page would keep the light * brand colour. Declaring every derivation under * :root, [data-bs-theme] * means any element that sets a mode token also re-derives from it. * Do not split this block into light/dark halves. * * Dark mode: set data-bs-theme="dark" on . The .dark / .light * class aliases are deliberately NOT supported - Bootstrap scopes its * own 52 dark tokens to the attribute, so a class-only toggle yields * a half-themed page. * ============================================================ */ /* ============================================================ DERIVED TOKENS ============================================================ */ :root, [data-bs-theme] { /* -- Composite hsl triplets, rebuilt from theme components. Lets component rules keep using hsla(var(--theme-hsl), a). -- */ --theme-hsl: var(--theme-h), var(--theme-s), var(--theme-l); --theme-hover-hsl: var(--theme-hover-h), var(--theme-hover-s), var(--theme-hover-l); --success-hsl: var(--success-h), var(--success-s), var(--success-l); --warning-hsl: var(--warning-h), var(--warning-s), var(--warning-l); --danger-hsl: var(--danger-h), var(--danger-s), var(--danger-l); --info-hsl: var(--info-h), var(--info-s), var(--info-l); /* -- Brand accent -- */ --theme: hsl(var(--theme-hsl)); --theme-hover: hsl(var(--theme-hover-hsl)); --theme-light: hsla(var(--theme-hsl), var(--theme-light-alpha)); /* -- State colours -- */ --success: hsl(var(--success-hsl)); --warning: hsl(var(--warning-hsl)); --danger: hsl(var(--danger-hsl)); --info: hsl(var(--info-hsl)); /* -- Bootstrap colour mapping -- */ --bs-primary: hsl(var(--theme-hsl)); --bs-primary-rgb: var(--theme-rgb); --bs-success: hsl(var(--success-hsl)); --bs-success-rgb: var(--success-rgb); --bs-warning: hsl(var(--warning-hsl)); --bs-warning-rgb: var(--warning-rgb); --bs-danger: hsl(var(--danger-hsl)); --bs-danger-rgb: var(--danger-rgb); --bs-info: hsl(var(--info-hsl)); --bs-info-rgb: var(--info-rgb); /* NOTE: --bs-secondary is deliberately NOT overridden. In Bootstrap it is a grey COLOUR driving .btn-secondary and .bg-secondary, not a surface. Pointing it at --bs-secondary-bg produced white-on-white secondary buttons. Surfaces use --bs-secondary-bg directly. */ /* -- Links -- */ --bs-link-color: hsl(var(--theme-hsl)); --bs-link-color-rgb: var(--theme-rgb); --bs-link-hover-color: hsl(var(--theme-hover-hsl)); --bs-link-hover-color-rgb: var(--theme-hover-rgb); /* -- Subtle / emphasis family. Bootstrap references these 170 times (.alert-*, .list-group-item-*, .bg-*-subtle, .text-*-emphasis, link hover states). Left undeclared they fall back to Bootstrap's stock blues and greens on every brand. Emphasis text re-lights via --emphasis-l so it stays legible when the surface flips. -- */ --bs-primary-text-emphasis: hsl(var(--theme-h), var(--theme-s), var(--emphasis-l)); --bs-success-text-emphasis: hsl(var(--success-h), var(--success-s), var(--emphasis-l)); --bs-warning-text-emphasis: hsl(var(--warning-h), var(--warning-s), var(--emphasis-l)); --bs-danger-text-emphasis: hsl(var(--danger-h), var(--danger-s), var(--emphasis-l)); --bs-info-text-emphasis: hsl(var(--info-h), var(--info-s), var(--emphasis-l)); --bs-secondary-text-emphasis: var(--bs-secondary-color); --bs-primary-bg-subtle: hsla(var(--theme-hsl), var(--subtle-bg-alpha)); --bs-success-bg-subtle: hsla(var(--success-hsl), var(--subtle-bg-alpha)); --bs-warning-bg-subtle: hsla(var(--warning-hsl), var(--subtle-bg-alpha)); --bs-danger-bg-subtle: hsla(var(--danger-hsl), var(--subtle-bg-alpha)); --bs-info-bg-subtle: hsla(var(--info-hsl), var(--subtle-bg-alpha)); --bs-secondary-bg-subtle: var(--bs-secondary-bg); --bs-primary-border-subtle: hsla(var(--theme-hsl), var(--subtle-border-alpha)); --bs-success-border-subtle: hsla(var(--success-hsl), var(--subtle-border-alpha)); --bs-warning-border-subtle: hsla(var(--warning-hsl), var(--subtle-border-alpha)); --bs-danger-border-subtle: hsla(var(--danger-hsl), var(--subtle-border-alpha)); --bs-info-border-subtle: hsla(var(--info-hsl), var(--subtle-border-alpha)); --bs-secondary-border-subtle: var(--bs-border-color); /* -- Focus ring, validation, code, highlight. All four ship hardcoded Bootstrap blue/pink/green and ignore the brand entirely unless remapped here. -- */ --bs-focus-ring-color: hsla(var(--theme-hsl), 0.25); --bs-form-valid-color: hsl(var(--success-hsl)); --bs-form-valid-border-color: hsl(var(--success-hsl)); --bs-form-invalid-color: hsl(var(--danger-hsl)); --bs-form-invalid-border-color: hsl(var(--danger-hsl)); --bs-code-color: hsl(var(--theme-hsl)); --bs-highlight-bg: hsla(var(--warning-hsl), var(--subtle-bg-alpha)); --bs-highlight-color: var(--bs-body-color); /* -- Typography mapping -- */ --bs-heading-color: var(--bs-body-color); --bs-font-monospace: var(--theme-font-mono); /* -- Surfaces -- */ --bs-card-cap-bg: var(--bs-secondary-bg); /* -- Shadows. Colour and opacity come from the theme so one block covers both modes. -- */ --bs-box-shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), var(--shadow-opacity-sm)); --bs-box-shadow: 0 1px 3px rgba(var(--shadow-rgb), var(--shadow-opacity)); --bs-box-shadow-lg: 0 10px 30px rgba(var(--shadow-rgb), var(--shadow-opacity-lg)); --shadow-theme: var(--bs-box-shadow-lg); --shadow-theme-sm: var(--bs-box-shadow); --shadow-glow: 0 0 30px -5px hsla(var(--theme-hsl), var(--glow-alpha)), 0 0 60px -10px hsla(var(--theme-hsl), 0.12); /* -- Code editor palette. Deliberately always dark, independent of page theme. Not brand-tunable by design. -- */ --code-bg: hsl(225, 20%, 10%); --code-fg: hsla(210, 20%, 92%, 0.86); --code-accent: hsl(175, 85%, 45%); --code-purple: hsl(265, 85%, 60%); --code-purple-hsl: 265, 85%, 60%; } /* ============================================================ GLOBAL / BASE ============================================================ */ body { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--bs-body-font-family); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; } header, footer { flex: 0 0 auto; } main { flex: 1 0 auto; } /* Add this if removing .fixed-top on navbar */ /* header { position: absolute; top: 0; left: 0; right: 0; z-index: 1030; } */ section, .section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); } /* Zero padding for sections inside tab panels or legal pages */ section.tab-section, .legal section { padding-top: 0; padding-bottom: 0; } .z-index-font { z-index: 9999; } @media (min-width: 992px) { section, .section { padding-top: var(--section-padding-y-lg); padding-bottom: var(--section-padding-y-lg); } } /* ============================================================ TYPOGRAPHY ============================================================ */ /* All heading levels — editorial serif */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--theme-font-heading); font-weight: 700; letter-spacing: -0.02em; color: var(--bs-heading-color); } .smaller {font-size: 0.75em;} .link-hover {text-decoration: none;} .link-hover:hover {text-decoration: underline;} /* Brand wordmark */ .logo { font-family: var(--theme-font-heading); font-weight: 700; font-size: 1.77rem; letter-spacing: -0.027em; line-height: 1; } /* * System mono stack — covers all code contexts without * loading an external font. Ordered by quality per OS: * SF Mono (macOS) → Cascadia Code (Win11) → Consolas (Win) → fallback */ code, pre, kbd, samp, .font-monospace { font-family: var(--theme-font-mono); } /* Explicit font utility classes */ .font-editorial { font-family: var(--theme-font-heading); } .font-body { font-family: var(--bs-body-font-family); } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ COLOR UTILITIES ============================================================ */ .bg-body { background-color: var(--bs-body-bg) !important; } .bg-theme { background-color: var(--theme) !important; } .bg-theme-dark { background-color: var(--theme-hover) !important; } .bg-theme-light { background-color: var(--theme-light) !important; } .text-theme { color: var(--theme) !important; } .border-theme { border-color: var(--theme) !important; } /* Gradient text — used on marketing headline accents */ .text-gradient { background: linear-gradient(135deg, var(--theme), var(--theme-hover)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Accent glow box-shadow utility */ .accent-glow { box-shadow: var(--shadow-glow); } /* ============================================================ BUTTONS ============================================================ */ /* Base — all buttons get consistent radius and weight */ .btn { --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-bg: var(--bs-secondary-bg); --bs-btn-disabled-border-color: var(--bs-border-color); border-radius: var(--bs-border-radius-lg); font-weight: 600; font-family: var(--bs-body-font-family); text-transform: var(--btn-text-transform); } /* small — nav, various */ .btn-sm { border-radius: var(--bs-border-radius); } .btn-xl { --bs-btn-padding-y: 0.75rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: 1.1rem; } /* Extra-small — tables, compact UI */ .btn-xs { padding: 0.1rem 0.5rem; font-size: 0.8rem; line-height: 1.5; border-radius: var(--bs-border-radius-sm); } /* * Primary button — glow on hover. * Uses BS5 local vars so :hover/:active don't need separate rules. * Radius inherited from .btn above. */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: var(--theme-contrast); --bs-btn-hover-bg: var(--theme-hover); --bs-btn-hover-border-color: var(--theme-hover); --bs-btn-hover-color: var(--theme-contrast); --bs-btn-active-bg: var(--theme-hover); --bs-btn-active-border-color: var(--theme-hover); --bs-btn-focus-shadow-rgb: var(--theme-rgb); } .btn-primary:hover, .btn-primary:focus-visible { box-shadow: var(--shadow-glow); } /* .btn-theme — legacy class alias, keeps existing HTML working */ .btn.btn-theme { color: var(--theme-contrast); background-color: var(--theme); border-color: var(--theme); } .btn.btn-theme:hover, .btn.btn-theme:focus, .btn.btn-theme:active { background-color: var(--theme-hover); border-color: var(--theme-hover); box-shadow: var(--shadow-glow); } /* Outline primary — radius and weight inherited from .btn */ .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-hover-color: var(--theme-contrast); --bs-btn-active-bg: var(--theme-hover); --bs-btn-focus-shadow-rgb: var(--theme-rgb); } /* Breadcrumb button */ .breadcrumb {margin-bottom: 0;} .btn-breadcrumb {color: var(--theme);text-decoration: none;} .btn-breadcrumb:hover { color: var(--theme-hover); text-decoration: underline;} /* Shine animation — marketing CTAs */ .btn-shine { position: relative; overflow: hidden; } .btn-shine::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: shine 5s ease-in-out infinite; } .btn-arrow { display: inline-block; transition: transform 0.2s ease; } .btn:hover .btn-arrow { transform: translateX(4px); } /* Strip focus rings — BS5 handles accessible outlines */ .btn:focus, .btn.focus, .page-link:focus, .page-link.focus { outline: 0; box-shadow: none; } /* Pagination */ .page-link { color: var(--theme); } .page-link:hover { color: var(--theme-hover); } .page-item.active .page-link { background-color: var(--theme); border-color: var(--theme); } .page-item.active .page-link:hover { background-color: var(--theme-hover); border-color: var(--theme-hover); color: inherit; } /* Collapse toggle arrow */ [aria-expanded="true"] .rotate-90-click { transform: rotate(90deg); } /* ============================================================ NAV PILLS & DROPDOWNS ============================================================ */ /* * .items-soft — shared token set applied to .nav-pills or * .dropdown-menu for a consistent soft/ghost style. */ .items-soft { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-body-color); --bs-nav-link-padding-x: 0.65rem; --bs-nav-pills-link-active-color: var(--theme-contrast); --bs-nav-pills-link-active-bg: var(--theme); --bs-dropdown-link-color: var(--bs-secondary-color); --bs-dropdown-link-hover-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); --bs-dropdown-link-active-color: var(--theme-contrast); --bs-dropdown-link-active-bg: var(--theme); --bs-dropdown-min-width: 5rem; --bs-dropdown-font-size: 0.9rem; } .nav-pills.items-soft, .dropdown-menu.items-soft { padding: 0.44rem; } .items-soft .dropdown-item, .items-soft .nav-pills .nav-link { padding: 0.33rem 0.77rem; border-radius: var(--bs-border-radius-sm); } .items-soft .nav-pills .nav-link { margin: 0 0.125rem; } .items-soft .dropdown-item:not(.active):hover, .items-soft .nav-link:not(.active):hover { background-color: var(--bs-tertiary-bg); } /* Dim secondary elements (count, icon) until active */ .nav-pills .nav-link span { opacity: 0.65; transition: opacity 0.3s ease; } .nav-pills .nav-link.active span, .nav-pills .nav-link:hover span { opacity: 1; } /* Global dropdown polish */ .dropdown-menu { border-radius: var(--bs-border-radius-lg); border: 1px solid var(--bs-border-color); box-shadow: var(--bs-box-shadow-lg); } /* ============================================================ FORMS ============================================================ */ .form-label { font-size: 0.875rem; margin-bottom: 0.25rem; font-weight: 500; } .form-control, .form-select { border-radius: var(--bs-border-radius-lg); border-color: var(--bs-border-color); background-color: var(--form-control); transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Theme focus ring — consistent with brand accent */ .form-control:focus, .form-select:focus { border-color: hsla(var(--theme-hsl), 0.5); box-shadow: 0 0 0 0.2rem hsla(var(--theme-hsl), 0.15); } /* Checkbox/radio validation error state */ .form-check.is-invalid { border: 1px solid var(--bs-danger); border-radius: var(--bs-border-radius); padding: 0.75rem 0 0.75rem 2rem; background-color: hsla(var(--danger-hsl), 0.06); } .form-check.is-invalid .form-check-label { color: var(--bs-danger); } .form-check-input {--bs-form-check-bg: var(--form-control);} .form-check-input:focus { border-color: hsla(var(--theme-hsl), 0.5); box-shadow: 0 0 0 0.25rem hsla(var(--theme-hsl), 0.15); } .form-check-input:checked { background-color: var(--theme); border-color: var(--theme); } .form-check-input[type=checkbox]:indeterminate { background-color: var(--theme); border-color: var(--theme); } /* ============================================================ CARDS ============================================================ */ .card { --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.5rem; --bs-card-border-radius: var(--bs-border-radius-lg); border: 1px solid var(--bs-border-color); transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* Default card hover. Opt out with .card-no-hover, which is required inside .card-grid where the shared borders are removed. */ .card:hover:not(.card-no-hover) { border-color: hsla(var(--theme-hsl), 0.3); box-shadow: var(--bs-box-shadow-lg); } /* ============================================================ CARD GRID ============================================================ */ /* Joined tiles: 1px gaps show the container background, so lines never double. Cards need .card-no-hover, and .hover-alpha for a hover. .card-grid 1 → 3 cols at md .card-grid-even 1 → 2 at md → 3 at lg Set style="--card-grid-cols: 4" to change the full-width count. */ .card-grid { --card-grid-cols: 3; display: grid; grid-template-columns: 1fr; gap: 1px; background-color: var(--bs-border-color); background-clip: padding-box; border: 1px solid var(--bs-border-color); } @media (min-width: 768px) { .card-grid { grid-template-columns: repeat(var(--card-grid-cols), 1fr); } .card-grid-even { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .card-grid-even { grid-template-columns: repeat(var(--card-grid-cols), 1fr); } } .card-grid > .card { border: 0; border-radius: 0; box-shadow: none; } /* ============================================================ HOVER EFFECTS ============================================================ */ /* .hover-lift — raises an element on hover. */ .hover-lift { box-shadow: var(--bs-box-shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; will-change: transform; } .hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-theme); } /* .hover-alpha — tints a surface toward the text colour. Flips with the mode automatically, since --bs-body-color-rgb does. The ::after layer sidesteps background utilities that set !important. Strength per element: style="--hover-alpha: 0.08" */ .hover-alpha { --hover-alpha: 0.05; position: relative; isolation: isolate; } .hover-alpha::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: rgba(var(--bs-body-color-rgb), 0); transition: background-color 0.2s ease; pointer-events: none; } .hover-alpha:hover::after, .hover-alpha:focus-within::after { background-color: rgba(var(--bs-body-color-rgb), var(--hover-alpha)); } /* Child affordances, driven by either hover class. */ .hover-heading { transition: color 0.18s ease 0.08s; } .hover-lift:hover .hover-heading, .hover-alpha:hover .hover-heading { color: var(--theme); } .arrow { display: inline-block; transition: transform 0.2s ease, color 0.2s ease; } .hover-lift:hover .arrow, .hover-alpha:hover .arrow { transform: translate(4px, -4px); color: var(--theme-hover) !important; } /* ============================================================ SHADOW UTILITIES ============================================================ */ .shadow-theme { box-shadow: var(--shadow-theme); } .shadow-theme-sm { box-shadow: var(--shadow-theme-sm); } /* ============================================================ BADGES ============================================================ */ .badge { padding: 0.3rem 0.65rem; font-size: 0.7rem; font-weight: 600; font-family: var(--bs-body-font-family); letter-spacing: 0.01em; border-radius: var(--bs-border-radius-pill); text-transform: capitalize; } /* Soft tinted variants — tinted bg + colored text + subtle border */ .badge.bg-warning { background-color: hsla(var(--warning-hsl), 0.12) !important; color: var(--warning) !important; border: 1px solid hsla(var(--warning-hsl), 0.30); } .badge.bg-success { background-color: hsla(var(--success-hsl), 0.12) !important; color: var(--success) !important; border: 1px solid hsla(var(--success-hsl), 0.30); } .badge.bg-danger { background-color: hsla(var(--danger-hsl), 0.12) !important; color: var(--danger) !important; border: 1px solid hsla(var(--danger-hsl), 0.30); } .badge.bg-info { background-color: hsla(var(--info-hsl), 0.12) !important; color: var(--bs-info) !important; border: 1px solid hsla(var(--info-hsl), 0.30); } .badge.bg-theme { background-color: hsla(var(--theme-hsl), 0.10) !important; color: var(--theme) !important; border: 1px solid hsla(var(--theme-hsl), 0.25); } .badge.bg-theme-solid { background-color: var(--theme) !important; color: var(--theme-contrast) !important; border: 1px solid hsla(var(--theme-hsl), 0.25); } /* ============================================================ NAVBAR ============================================================ */ .navbar { font-family: var(--bs-body-font-family); } /* ============================================================ MODALS & ALERTS ============================================================ */ .modal-content { border-radius: var(--bs-border-radius-xl); border: 1px solid var(--bs-border-color); } .modal-fluid { --bs-modal-width: 95%; } .alert { border-radius: var(--bs-border-radius-lg); } .alert-success { --bs-alert-color: var(--success); --bs-alert-bg: hsla(var(--success-hsl), 0.08); --bs-alert-border-color: hsla(var(--success-hsl), 0.25); } .alert-warning { --bs-alert-color: var(--warning); --bs-alert-bg: hsla(var(--warning-hsl), 0.08); --bs-alert-border-color: hsla(var(--warning-hsl), 0.25); } .alert-danger { --bs-alert-color: var(--danger); --bs-alert-bg: hsla(var(--danger-hsl), 0.08); --bs-alert-border-color: hsla(var(--danger-hsl), 0.25); } .alert-info { --bs-alert-color: var(--bs-info); --bs-alert-bg: hsla(var(--info-hsl), 0.08); --bs-alert-border-color: hsla(var(--info-hsl), 0.25); } /* ============================================================ ACCORDIONS ============================================================ */ /* Flush treatment — border-bottom only, no radius */ .accordion, .accordion-item, .accordion-item:first-of-type, .accordion-item:last-of-type, .accordion-button { border-radius: 0 !important; } .accordion-item { border: 0; border-bottom: 1px solid var(--bs-border-color); } .accordion-item:last-child { overflow: hidden; border-bottom: 0; } .accordion-button { background-color: transparent; font-family: var(--bs-body-font-family); font-weight: 600; font-size: 1.125rem; padding: 1.25rem 1.25rem 1.25rem 0; color: var(--bs-body-color); } .accordion-button:not(.collapsed) { background-color: transparent; box-shadow: none; color: var(--theme); } .accordion-button:focus { box-shadow: none; border-color: transparent; } .accordion-button:hover { color: var(--theme); } .accordion-body { padding: 0 0 1.25rem 0; } .accordion-button::after { opacity: 0.65; transition: transform 0.2s ease, opacity 0.2s ease; } .accordion-button:not(.collapsed)::after, .accordion-button:hover::after { opacity: 1; } .accordion-button-sm {padding: 0.875rem 1rem; font-size: 0.875rem;} .accordion-body-sm {padding: 0 1rem 1rem 1rem;} /* ============================================================ TABLES & DATATABLES ============================================================ */ .table td, .table th { padding: 0.7rem 1.25rem; line-height: 1.44; } .table tbody tr:last-child td { border-bottom: none; } .dataTable { border-collapse: separate; overflow: hidden; } /* Uppercase label style for column headers */ .table thead th, .dataTable thead th { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); font-family: var(--bs-body-font-family); } .table td, .dataTable td { vertical-align: middle; font-size: 0.9rem; padding-top: 1rem; padding-bottom: 1rem; } /* Flush left/right edges — no outer vertical borders */ .dataTable.border td, .dataTable.border th { border-right: none; border-bottom: 1px solid var(--bs-border-color); } .dataTable.border td:first-child, .dataTable.border th:first-child { border-left: none; } .dataTable.border td:last-child, .dataTable.border th:last-child { border-right: none; } .dataTable.border tbody tr:last-child td, .dataTable tbody tr:last-child td { border-bottom: none; } .dt-container .dt-info, .dt-container .dt-length label { font-size: 0.875rem; } .dtr-details {width: 100%;} .dtr-details li {display: flex;justify-content: space-between;} div.dt-processing > div:last-child > div {background: var(--theme);} /* ============================================================ PROGRESS BARS ============================================================ */ .progress { height: 0.67rem; border-radius: var(--bs-border-radius-pill); } .progress-mini { height: 0.44rem; width: 70px; } .progress-bar { border-radius: var(--bs-border-radius-pill); transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .progress-mini .progress-bar { transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Force correct colors — BS5 utility classes can clash with custom palette */ .progress-bar.bg-theme { background-color: var(--theme) !important; } .progress-bar.bg-success { background-color: var(--success) !important; } .progress-bar.bg-warning { background-color: var(--warning) !important; } .progress-bar.bg-danger { background-color: var(--danger) !important; } /* ============================================================ ICONS ============================================================ */ /* Square logo mark — navbar / auth pages */ .logo-icon { width: 40px; height: 40px; background: var(--theme); border-radius: var(--bs-border-radius); display: inline-flex; align-items: center; justify-content: center; color: var(--theme-contrast); font-weight: 700; font-size: 1.25rem; } /* Square feature icon — feature cards and section headers */ .feature-icon { width: 48px; height: 48px; background: var(--theme-light); border-radius: var(--bs-border-radius); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--theme); flex-shrink: 0; } /* Phosphor Icons */ .ph-2x { font-size: 2em; } .ph-5x { font-size: 5em; } .ph-fw {width: 1.25em;text-align: center;} .ph-spin { animation: ph-spin 1s linear infinite; } @keyframes ph-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================ HERO & MARKETING GRADIENTS ============================================================ */ /* * .hero-gradient — three radial blobs creating depth behind hero content. * ::after adds a soft top-edge vignette. * z-index not needed — background-only, no stacking issues. */ .hero-gradient { position: relative; overflow: hidden; background: radial-gradient(at 20% 30%, hsla(var(--theme-hsl), 0.07) 0px, transparent 50%), radial-gradient(at 80% 70%, hsla(var(--theme-hsl), 0.05) 0px, transparent 50%), radial-gradient(at 50% 50%, hsla(var(--theme-hsl), 0.03) 0px, transparent 50%); } [data-bs-theme="dark"] .hero-gradient { background: radial-gradient(at 20% 30%, hsla(var(--theme-hsl), 0.10) 0px, transparent 50%), radial-gradient(at 80% 70%, hsla(var(--theme-hsl), 0.07) 0px, transparent 50%), radial-gradient(at 50% 50%, hsla(var(--theme-hsl), 0.05) 0px, transparent 50%); } .hero-gradient::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0%, hsla(var(--theme-hsl), 0.08) 0%, transparent 45%); opacity: 0.65; } /* Fluid hero headline — no breakpoint needed */ .hero-title { letter-spacing: -0.03em; line-height: 1; font-weight: 800; font-size: clamp(2.8rem, 7vw, 6rem); z-index: -1; } /* * .page-texture — inline SVG noise overlay for large surface areas. * Apply to a position:relative parent. Opacity kept at 0.025 * so it reads as subtle warmth rather than visible grain. */ .page-texture::before { content: ''; position: absolute; inset: 0; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); pointer-events: none; z-index: -1; } /* ============================================================ CODE BLOCKS ============================================================ */ /* Shared dark surface — always dark regardless of page theme */ .content pre { background: var(--code-bg); color: var(--code-fg); font-family: var(--theme-font-mono); font-size: 0.92rem; line-height: 1.55; padding: 14px 16px; overflow: auto; } .content pre { border-radius: var(--bs-border-radius); white-space: pre-wrap; margin: 0; } .content pre code { background: transparent; color: inherit; padding: 0; } /* Copy button — floats top-right inside .code-block-wrapper */ .code-block-wrapper { position: relative; margin-bottom: 1.5rem; } .code-copy-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255,255,255,.10); border: none; border-radius: 0.25rem; padding: 0.375rem 0.5rem; color: rgba(255,255,255,.65); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; z-index: 10; } .code-copy-btn:hover { background: rgba(255,255,255,.20); color: rgba(255,255,255,.90); } /* * .code-glow — decorative gradient border for featured code blocks. * Wrap a .schema-editor or pre in a .code-glow container. * Uses mask-composite to render only the border layer. */ .code-glow { border: 1px solid var(--bs-border-color); position: relative; } .code-glow::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid transparent; background: linear-gradient(135deg, hsla(var(--theme-hsl), 0.30), transparent 50%, hsla(var(--code-purple-hsl), 0.20) ) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ============================================================ THEME LISTS ============================================================ */ .theme-ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; counter-reset: theme-li; } .theme-ol > li { counter-increment: theme-li; padding-left: 1.85rem; position: relative; } .theme-ol > li::before { content: counter(theme-li); position: absolute; left: 0; top: 0.1em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background-color: hsla(var(--theme-hsl), 0.10); color: var(--theme); font-size: 0.68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .theme-ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .theme-ul > li { padding-left: 1.25rem; position: relative; } .theme-ul > li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--theme); } /* ============================================================ UTILITY CLASSES ============================================================ */ /* Negative horizontal bleed — full-width rows inside padded containers */ .mx-n-4 { margin-right: -1.5rem !important; margin-left: -1.5rem !important; } .height-chart { min-height: 250px; } .height-textarea { height: 100px !important; } /* ============================================================ COMPARISON TABLE ============================================================ */ .comparison-table { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-xl); overflow: hidden; } .comparison-table .table { table-layout: fixed; border-collapse: collapse; margin-bottom: 0; } /* Left column — muted bg, muted text */ .comparison-col-left { width: 50%; padding: 1rem 1.5rem; color: var(--bs-secondary-color); background: var(--bs-tertiary-bg) !important; border-right: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); font-size: 0.95rem; font-weight: 400; } /* Right column — very subtle warm tint, full-strength body text */ .comparison-col-right { width: 50%; padding: 1rem 1.5rem; background: var(--theme-light) !important; border-bottom: 1px solid var(--bs-border-color); font-size: 0.95rem; font-weight: 500; } /* thead cells — slightly heavier */ .comparison-table thead th { font-size: 0.9rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 1rem 1.5rem; } /* Remove bottom border on last row */ .comparison-table tbody tr:last-child td { border-bottom: none; } /* Italic muted heading accent — "A sales strategist." */ .comparison-heading-alt { color: var(--bs-secondary-color); } /* ============================================================ INVERTED SECTION ============================================================ */ /* * Flips the surface by overriding mode tokens, so every component * inside inherits correctly with no per-component rules. * * --body-color-inverse is always this mode's own --bs-body-bg, so * --bs-body-bg-rgb is its rgb triplet and gives the inverse ink at * any alpha. No extra theme tokens needed. */ .section-invert { position: relative; background: radial-gradient(ellipse at 50% 50%, hsla(var(--theme-hsl-inverse), 0.25) 0%, transparent 90%), var(--body-bg-inverse); --bs-body-color: var(--body-color-inverse); --bs-heading-color: var(--body-color-inverse); --bs-emphasis-color: var(--body-color-inverse); --bs-secondary-color: rgba(var(--bs-body-bg-rgb), 0.65); --bs-tertiary-color: rgba(var(--bs-body-bg-rgb), 0.45); --bs-border-color: rgba(var(--bs-body-bg-rgb), 0.30); --bs-border-color-translucent: rgba(var(--bs-body-bg-rgb), 0.14); --bs-secondary-bg: rgba(var(--bs-body-bg-rgb), 0.08); --bs-tertiary-bg: rgba(var(--bs-body-bg-rgb), 0.05); --form-control: rgba(var(--bs-body-bg-rgb), 0.04); --theme: hsl(var(--theme-hsl-inverse)); --theme-hsl: var(--theme-hsl-inverse); color: var(--bs-body-color); } [data-bs-theme="dark"] .section-invert { background: radial-gradient(ellipse at 50% 50%, hsla(var(--theme-hsl-inverse), 0.09) 0%, transparent 90%), var(--body-bg-inverse); } .section-invert .h-inverse { color: var(--body-color-inverse) !important; } .section-invert .form-floating > label { color: rgba(var(--bs-body-bg-rgb), 0.65); } .section-invert .form-control:focus, .section-invert .form-select:focus { background-color: rgba(var(--bs-body-bg-rgb), 0.10); color: var(--bs-body-color); } /* Outlined button on the inverted surface. */ .btn-outline-inverse { --bs-btn-color: var(--body-color-inverse); --bs-btn-border-color: var(--body-color-inverse); --bs-btn-hover-bg: var(--body-color-inverse); --bs-btn-hover-border-color: var(--body-color-inverse); --bs-btn-hover-color: var(--body-bg-inverse); --bs-btn-active-bg: var(--body-color-inverse); --bs-btn-active-color: var(--body-bg-inverse); } /* ============================================================ SCROLL-REVEAL ANIMATIONS ============================================================ */ /* * Pairs with APP.scrollAnimate in app.js (IntersectionObserver). * * Usage: data-animate="[type]" * Types: fade | slide-up | slide-down | slide-left | slide-right | * zoom-in | zoom-out | flip-x | flip-y | flip-up | flip-down | * blur-in | skew-left | skew-right * * Options: data-animate-delay="300" — delay in ms * data-animate-once — fire once, then unobserve * data-animate-reset — re-hide on scroll back * * Stagger: data-animate-stagger="150" on parent — gaps child [data-animate] */ [data-animate] { opacity: 0; transition: opacity 500ms ease; } [data-animate].is-visible { opacity: 1; } [data-animate="fade"].is-visible { animation: saFade 0.75s ease-in-out both; } [data-animate="slide-up"].is-visible { animation: saSlideUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } [data-animate="slide-down"].is-visible { animation: saSlideDown 0.7s ease-in-out both; } [data-animate="slide-left"].is-visible { animation: saSlideLeft 0.7s ease-in-out both; } [data-animate="slide-right"].is-visible { animation: saSlideRight 0.7s ease-in-out both; } [data-animate="zoom-in"].is-visible { animation: saZoomIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } [data-animate="zoom-out"].is-visible { animation: saZoomOut 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } [data-animate="flip-x"].is-visible, [data-animate="flip-y"].is-visible, [data-animate="flip-up"].is-visible, [data-animate="flip-down"].is-visible { backface-visibility: hidden; } [data-animate="flip-x"].is-visible { animation: saFlipX 0.7s ease-in-out both; } [data-animate="flip-y"].is-visible { animation: saFlipY 0.7s ease-in-out both; } [data-animate="flip-up"].is-visible { animation: saFlipUp 0.7s ease-in-out both; } [data-animate="flip-down"].is-visible { animation: saFlipDown 0.7s ease-in-out both; } [data-animate="blur-in"].is-visible { animation: saBlurIn 0.8s ease-out both; } [data-animate="skew-left"].is-visible { animation: saSkewLeft 0.6s ease-out both; } [data-animate="skew-right"].is-visible { animation: saSkewRight 0.6s ease-out both; } /* ============================================================ KEYFRAMES ============================================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes shine { 0% { left: -100%; transition-property: left; } 10%, 100% { left: 100%; transition-property: left; } } @keyframes saFade { from { opacity: 0; } to { opacity: 1; } } @keyframes saSlideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes saSlideDown { from { transform: translateY(-60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes saSlideLeft { from { transform: translateX(-80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes saSlideRight{ from { transform: translateX(80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes saZoomIn { from { transform: scale(0.75); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes saZoomOut { from { transform: scale(1.25); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes saFlipX { from { transform: perspective(600px) rotateX(45deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } } @keyframes saFlipY { from { transform: perspective(600px) rotateY(45deg); opacity: 0; } to { transform: perspective(600px) rotateY(0); opacity: 1; } } @keyframes saFlipUp { from { transform: perspective(600px) rotateX(-45deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } } @keyframes saFlipDown { from { transform: perspective(600px) rotateX(45deg); opacity: 0; } to { transform: perspective(600px) rotateX(0); opacity: 1; } } @keyframes saBlurIn { from { filter: blur(12px); opacity: 0; } to { filter: blur(0); opacity: 1; } } @keyframes saSkewLeft { from { transform: skewX(-15deg) translateX(-40px); opacity: 0; } to { transform: skewX(0) translateX(0); opacity: 1; } } @keyframes saSkewRight { from { transform: skewX(15deg) translateX(40px); opacity: 0; } to { transform: skewX(0) translateX(0); opacity: 1; } } /* ============================================================ ACCESSIBILITY ============================================================ */ /* Disable all animation for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { [data-animate] { transition : none !important; animation : none !important; opacity : 1 !important; } }