/* ==========================================================================
Fabrix.ai — site.css
The one custom stylesheet for the v2.0 framework. It loads AFTER
Bootstrap 5.3.3: Bootstrap supplies reboot, grid and utilities, and this
file supplies the brand layer on top.
1. Tokens Bootstrap variable overrides + brand tokens
2. Base type, links, anchors
3. Navigation #nav-main mega menu + mobile drawer
4. Footer .fx-footer
5. Page components .fx-page sections, cards, grids, tabs, CTA
6. Page skins per-page backgrounds only
7. Runtime states content injection
Rules of the road
- Prefer a Bootstrap utility over a new rule.
- Components use class selectors only, namespaced .fx-*. Never style a bare
element outside section 2, or page CSS will leak into the nav and footer.
========================================================================== */
/* 0. Bootstrap 5.3.3 subset ==================================================
Pages converted from the legacy site do not load Bootstrap's CSS: their own
stylesheet (dist/css/pages/) already holds every Bootstrap rule they used,
and the full framework would restyle their markup (.btn, .nav-tabs...).
This is the part of Bootstrap the shared chrome needs on those pages:
reboot and root variables, the footer grid/utilities (scoped to .fx-footer),
and the widgets app.js creates (video modal, tabs/collapse states,
.visually-hidden). Rules are copied verbatim from bootstrap@5.3.3, so pages
that do load Bootstrap see identical values. Generated; do not hand-edit.
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root, [data-bs-theme="light"] { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-black: #000; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-primary-rgb: 13,110,253; --bs-secondary-rgb: 108,117,125; --bs-success-rgb: 25,135,84; --bs-info-rgb: 13,202,240; --bs-warning-rgb: 255,193,7; --bs-danger-rgb: 220,53,69; --bs-light-rgb: 248,249,250; --bs-dark-rgb: 33,37,41; --bs-primary-text-emphasis: #052c65; --bs-secondary-text-emphasis: #2b2f32; --bs-success-text-emphasis: #0a3622; --bs-info-text-emphasis: #055160; --bs-warning-text-emphasis: #664d03; --bs-danger-text-emphasis: #58151c; --bs-light-text-emphasis: #495057; --bs-dark-text-emphasis: #495057; --bs-primary-bg-subtle: #cfe2ff; --bs-secondary-bg-subtle: #e2e3e5; --bs-success-bg-subtle: #d1e7dd; --bs-info-bg-subtle: #cff4fc; --bs-warning-bg-subtle: #fff3cd; --bs-danger-bg-subtle: #f8d7da; --bs-light-bg-subtle: #fcfcfd; --bs-dark-bg-subtle: #ced4da; --bs-primary-border-subtle: #9ec5fe; --bs-secondary-border-subtle: #c4c8cb; --bs-success-border-subtle: #a3cfbb; --bs-info-border-subtle: #9eeaf9; --bs-warning-border-subtle: #ffe69c; --bs-danger-border-subtle: #f1aeb5; --bs-light-border-subtle: #e9ecef; --bs-dark-border-subtle: #adb5bd; --bs-white-rgb: 255,255,255; --bs-black-rgb: 0,0,0; --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-font-size: 1rem; --bs-body-font-weight: 400; --bs-body-line-height: 1.5; --bs-body-color: #212529; --bs-body-color-rgb: 33,37,41; --bs-body-bg: #fff; --bs-body-bg-rgb: 255,255,255; --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0,0,0; --bs-secondary-color: rgba(33, 37, 41, 0.75); --bs-secondary-color-rgb: 33,37,41; --bs-secondary-bg: #e9ecef; --bs-secondary-bg-rgb: 233,236,239; --bs-tertiary-color: rgba(33, 37, 41, 0.5); --bs-tertiary-color-rgb: 33,37,41; --bs-tertiary-bg: #f8f9fa; --bs-tertiary-bg-rgb: 248,249,250; --bs-heading-color: inherit; --bs-link-color: #0d6efd; --bs-link-color-rgb: 13,110,253; --bs-link-decoration: underline; --bs-link-hover-color: #0a58ca; --bs-link-hover-color-rgb: 10,88,202; --bs-code-color: #d63384; --bs-highlight-color: #212529; --bs-highlight-bg: #fff3cd; --bs-border-width: 1px; --bs-border-style: solid; --bs-border-color: #dee2e6; --bs-border-color-translucent: rgba(0, 0, 0, 0.175); --bs-border-radius: 0.375rem; --bs-border-radius-sm: 0.25rem; --bs-border-radius-lg: 0.5rem; --bs-border-radius-xl: 1rem; --bs-border-radius-xxl: 2rem; --bs-border-radius-2xl: var(--bs-border-radius-xxl); --bs-border-radius-pill: 50rem; --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); --bs-focus-ring-width: 0.25rem; --bs-focus-ring-opacity: 0.25; --bs-focus-ring-color: rgba(13, 110, 253, 0.25); --bs-form-valid-color: #198754; --bs-form-valid-border-color: #198754; --bs-form-invalid-color: #dc3545; --bs-form-invalid-border-color: #dc3545; }
.fx-footer *,
::after,
::before { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
:root { scroll-behavior: smooth; }
}
body { margin: 0px; font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); color: var(--bs-body-color); text-align: var(--bs-body-text-align); background-color: var(--bs-body-bg); text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
hr { margin: 1rem 0px; color: inherit; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: var(--bs-border-width) solid; opacity: 0.25; }
h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0px; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; color: var(--bs-heading-color); }
h1 { font-size: calc(1.375rem + 1.5vw); }
@media (min-width: 1200px) {
h1 { font-size: 2.5rem; }
}
h2 { font-size: calc(1.325rem + 0.9vw); }
@media (min-width: 1200px) {
h2 { font-size: 2rem; }
}
h3 { font-size: calc(1.3rem + 0.6vw); }
@media (min-width: 1200px) {
h3 { font-size: 1.75rem; }
}
h4 { font-size: calc(1.275rem + 0.3vw); }
@media (min-width: 1200px) {
h4 { font-size: 1.5rem; }
}
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
p { margin-top: 0px; margin-bottom: 1rem; }
ol,
ul { padding-left: 2rem; }
ol,
ul { margin-top: 0px; margin-bottom: 1rem; }
ol ol,
ol ul,
ul ol,
ul ul { margin-bottom: 0px; }
b,
strong { font-weight: bolder; }
small { font-size: 0.875em; }
a { color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)); text-decoration: underline; }
a:hover { --bs-link-color-rgb: var(--bs-link-hover-color-rgb); }
a:not([href]):not([class]),
a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }
a > code { color: inherit; }
img,
svg { vertical-align: middle; }
button { border-radius: 0px; }
button:focus:not(:focus-visible) { outline: 0px; }
button { margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; }
button { text-transform: none; }
#nav-main [type="button"],
button { appearance: button; }
button:not(:disabled) { cursor: pointer; }
.fx-footer ::-webkit-datetime-edit-day-field,
.fx-footer ::-webkit-datetime-edit-fields-wrapper,
.fx-footer ::-webkit-datetime-edit-hour-field,
.fx-footer ::-webkit-datetime-edit-minute,
.fx-footer ::-webkit-datetime-edit-month-field,
.fx-footer ::-webkit-datetime-edit-text,
.fx-footer ::-webkit-datetime-edit-year-field { padding: 0px; }
.fx-footer ::-webkit-inner-spin-button { height: auto; }
.fx-footer ::-webkit-search-decoration { appearance: none; }
.fx-footer ::-webkit-color-swatch-wrapper { padding: 0px; }
.fx-footer ::-webkit-file-upload-button { font: inherit; appearance: button; }
.fx-footer .list-unstyled { padding-left: 0px; list-style: none; }
.fx-footer .container { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-right: auto; margin-left: auto; }
@media (min-width: 576px) {
.fx-footer .container { max-width: 540px; }
}
@media (min-width: 768px) {
.fx-footer .container { max-width: 720px; }
}
@media (min-width: 992px) {
.fx-footer .container { max-width: 960px; }
}
@media (min-width: 1200px) {
.fx-footer .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
.fx-footer .container { max-width: 1320px; }
}
:root { --bs-breakpoint-xs: 0; --bs-breakpoint-sm: 576px; --bs-breakpoint-md: 768px; --bs-breakpoint-lg: 992px; --bs-breakpoint-xl: 1200px; --bs-breakpoint-xxl: 1400px; }
.fx-footer .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)); }
.fx-footer .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-top: var(--bs-gutter-y); }
@media (min-width: 768px) {
.fx-footer .col-md-6 { flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px) {
.fx-footer .col-lg-2 { flex: 0 0 auto; width: 16.6667%; }
.fx-footer .col-lg-3 { flex: 0 0 auto; width: 25%; }
}
.btn.active,
.btn.show { color: var(--bs-btn-active-color); background-color: var(--bs-btn-active-bg); border-color: var(--bs-btn-active-border-color); }
.btn.active:focus-visible,
.btn.show:focus-visible { box-shadow: var(--bs-btn-focus-box-shadow); }
.fade { transition: opacity 0.15s linear; }
@media (prefers-reduced-motion: reduce) {
.fade { transition: none; }
}
.fade:not(.show) { opacity: 0; }
.collapse:not(.show) { display: none; }
.collapsing { height: 0px; overflow: hidden; transition: height 0.35s; }
@media (prefers-reduced-motion: reduce) {
.collapsing { transition: none; }
}
.collapsing.collapse-horizontal { width: 0px; height: auto; transition: width 0.35s; }
@media (prefers-reduced-motion: reduce) {
.collapsing.collapse-horizontal { transition: none; }
}
.dropdown-item.active { color: var(--bs-dropdown-link-active-color); text-decoration: none; background-color: var(--bs-dropdown-link-active-bg); }
.dropdown-menu.show { display: block; }
.btn-group-vertical > .btn.active,
.btn-group > .btn.active { z-index: 1; }
.fx-footer .nav { --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: 0.5rem; --bs-nav-link-font-weight: ; --bs-nav-link-color: var(--bs-link-color); --bs-nav-link-hover-color: var(--bs-link-hover-color); --bs-nav-link-disabled-color: var(--bs-secondary-color); display: flex; flex-wrap: wrap; padding-left: 0px; margin-bottom: 0px; list-style: none; }
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active { color: var(--bs-nav-tabs-link-active-color); background-color: var(--bs-nav-tabs-link-active-bg); border-color: var(--bs-nav-tabs-link-active-border-color); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { color: var(--bs-nav-pills-link-active-color); background-color: var(--bs-nav-pills-link-active-bg); }
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link { font-weight: 700; color: var(--bs-nav-underline-link-active-color); border-bottom-color: currentcolor; }
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show { color: var(--bs-navbar-active-color); }
.card-header-tabs .nav-link.active { background-color: var(--bs-card-bg); border-bottom-color: var(--bs-card-bg); }
.breadcrumb-item.active { color: var(--bs-breadcrumb-item-active-color); }
.active > .page-link,
.page-link.active { z-index: 3; color: var(--bs-pagination-active-color); background-color: var(--bs-pagination-active-bg); border-color: var(--bs-pagination-active-border-color); }
.alert-dismissible .btn-close { position: absolute; top: 0px; right: 0px; z-index: 2; padding: 1.25rem 1rem; }
.list-group-item.active { z-index: 2; color: var(--bs-list-group-active-color); background-color: var(--bs-list-group-active-bg); border-color: var(--bs-list-group-active-border-color); }
.list-group-item + .list-group-item.active { margin-top: calc(-1 * var(--bs-list-group-border-width)); border-top-width: var(--bs-list-group-border-width); }
.list-group-horizontal > .list-group-item.active { margin-top: 0px; }
.list-group-horizontal > .list-group-item + .list-group-item.active { margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); }
@media (min-width: 576px) {
.list-group-horizontal-sm > .list-group-item.active { margin-top: 0px; }
.list-group-horizontal-sm > .list-group-item + .list-group-item.active { margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); }
}
@media (min-width: 768px) {
.list-group-horizontal-md > .list-group-item.active { margin-top: 0px; }
.list-group-horizontal-md > .list-group-item + .list-group-item.active { margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); }
}
@media (min-width: 992px) {
.list-group-horizontal-lg > .list-group-item.active { margin-top: 0px; }
.list-group-horizontal-lg > .list-group-item + .list-group-item.active { margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); }
}
@media (min-width: 1200px) {
.list-group-horizontal-xl > .list-group-item.active { margin-top: 0px; }
.list-group-horizontal-xl > .list-group-item + .list-group-item.active { margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); }
}
@media (min-width: 1400px) {
.list-group-horizontal-xxl > .list-group-item.active { margin-top: 0px; }
.list-group-horizontal-xxl > .list-group-item + .list-group-item.active { margin-left: calc(-1 * var(--bs-list-group-border-width)); border-left-width: var(--bs-list-group-border-width); }
}
.btn-close { --bs-btn-close-color: #000; --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e"); --bs-btn-close-opacity: 0.5; --bs-btn-close-hover-opacity: 0.75; --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); --bs-btn-close-focus-opacity: 1; --bs-btn-close-disabled-opacity: 0.25; --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%); box-sizing: content-box; width: 1em; height: 1em; padding: 0.25em; color: var(--bs-btn-close-color); background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat; border: 0px; border-radius: 0.375rem; opacity: var(--bs-btn-close-opacity); }
.btn-close:hover { color: var(--bs-btn-close-color); text-decoration: none; opacity: var(--bs-btn-close-hover-opacity); }
.btn-close:focus { outline: 0px; box-shadow: var(--bs-btn-close-focus-shadow); opacity: var(--bs-btn-close-focus-opacity); }
.btn-close.disabled,
.btn-close:disabled { pointer-events: none; -webkit-user-select: none; user-select: none; opacity: var(--bs-btn-close-disabled-opacity); }
.btn-close-white { filter: var(--bs-btn-close-white-filter); }
[data-bs-theme="dark"] .btn-close { filter: var(--bs-btn-close-white-filter); }
.toast:not(.show) { display: none; }
.toast-header .btn-close { margin-right: calc(-.5 * var(--bs-toast-padding-x)); margin-left: var(--bs-toast-padding-x); }
.modal { --bs-modal-zindex: 1055; --bs-modal-width: 500px; --bs-modal-padding: 1rem; --bs-modal-margin: 0.5rem; --bs-modal-color: ; --bs-modal-bg: var(--bs-body-bg); --bs-modal-border-color: var(--bs-border-color-translucent); --bs-modal-border-width: var(--bs-border-width); --bs-modal-border-radius: var(--bs-border-radius-lg); --bs-modal-box-shadow: var(--bs-box-shadow-sm); --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width))); --bs-modal-header-padding-x: 1rem; --bs-modal-header-padding-y: 1rem; --bs-modal-header-padding: 1rem 1rem; --bs-modal-header-border-color: var(--bs-border-color); --bs-modal-header-border-width: var(--bs-border-width); --bs-modal-title-line-height: 1.5; --bs-modal-footer-gap: 0.5rem; --bs-modal-footer-bg: ; --bs-modal-footer-border-color: var(--bs-border-color); --bs-modal-footer-border-width: var(--bs-border-width); position: fixed; top: 0px; left: 0px; z-index: var(--bs-modal-zindex); display: none; width: 100%; height: 100%; overflow: hidden auto; outline: 0px; }
.modal-dialog { position: relative; width: auto; margin: var(--bs-modal-margin); pointer-events: none; }
.modal.fade .modal-dialog { transition: transform 0.3s ease-out; transform: translate(0px, -50px); }
@media (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog { transition: none; }
}
.modal.show .modal-dialog { transform: none; }
.modal.modal-static .modal-dialog { transform: scale(1.02); }
.modal-dialog-scrollable { height: calc(100% - var(--bs-modal-margin) * 2); }
.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - var(--bs-modal-margin) * 2); }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; color: var(--bs-modal-color); pointer-events: auto; background-color: var(--bs-modal-bg); background-clip: padding-box; border: var(--bs-modal-border-width) solid var(--bs-modal-border-color); border-radius: var(--bs-modal-border-radius); outline: 0px; }
.modal-backdrop { --bs-backdrop-zindex: 1050; --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.5; position: fixed; top: 0px; left: 0px; z-index: var(--bs-backdrop-zindex); width: 100vw; height: 100vh; background-color: var(--bs-backdrop-bg); }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: var(--bs-backdrop-opacity); }
.modal-header { display: flex; flex-shrink: 0; align-items: center; padding: var(--bs-modal-header-padding); border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color); border-top-left-radius: var(--bs-modal-inner-border-radius); border-top-right-radius: var(--bs-modal-inner-border-radius); }
.modal-header .btn-close { padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5); margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto; }
.modal-title { margin-bottom: 0px; line-height: var(--bs-modal-title-line-height); }
.modal-body { position: relative; flex: 1 1 auto; padding: var(--bs-modal-padding); }
.modal-footer { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5); background-color: var(--bs-modal-footer-bg); border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color); border-bottom-right-radius: var(--bs-modal-inner-border-radius); border-bottom-left-radius: var(--bs-modal-inner-border-radius); }
.modal-footer > * { margin: calc(var(--bs-modal-footer-gap) * .5); }
@media (min-width: 576px) {
.modal { --bs-modal-margin: 1.75rem; --bs-modal-box-shadow: var(--bs-box-shadow); }
.modal-dialog { max-width: var(--bs-modal-width); margin-right: auto; margin-left: auto; }
.modal-sm { --bs-modal-width: 300px; }
}
@media (min-width: 992px) {
.modal-lg,
.modal-xl { --bs-modal-width: 800px; }
}
@media (min-width: 1200px) {
.modal-xl { --bs-modal-width: 1140px; }
}
.modal-fullscreen { width: 100vw; max-width: none; height: 100%; margin: 0px; }
.modal-fullscreen .modal-content { height: 100%; border: 0px; border-radius: 0px; }
.modal-fullscreen .modal-footer,
.modal-fullscreen .modal-header { border-radius: 0px; }
.modal-fullscreen .modal-body { overflow-y: auto; }
@media (max-width: 575.98px) {
.modal-fullscreen-sm-down { width: 100vw; max-width: none; height: 100%; margin: 0px; }
.modal-fullscreen-sm-down .modal-content { height: 100%; border: 0px; border-radius: 0px; }
.modal-fullscreen-sm-down .modal-footer,
.modal-fullscreen-sm-down .modal-header { border-radius: 0px; }
.modal-fullscreen-sm-down .modal-body { overflow-y: auto; }
}
@media (max-width: 767.98px) {
.modal-fullscreen-md-down { width: 100vw; max-width: none; height: 100%; margin: 0px; }
.modal-fullscreen-md-down .modal-content { height: 100%; border: 0px; border-radius: 0px; }
.modal-fullscreen-md-down .modal-footer,
.modal-fullscreen-md-down .modal-header { border-radius: 0px; }
.modal-fullscreen-md-down .modal-body { overflow-y: auto; }
}
@media (max-width: 991.98px) {
.modal-fullscreen-lg-down { width: 100vw; max-width: none; height: 100%; margin: 0px; }
.modal-fullscreen-lg-down .modal-content { height: 100%; border: 0px; border-radius: 0px; }
.modal-fullscreen-lg-down .modal-footer,
.modal-fullscreen-lg-down .modal-header { border-radius: 0px; }
.modal-fullscreen-lg-down .modal-body { overflow-y: auto; }
}
@media (max-width: 1199.98px) {
.modal-fullscreen-xl-down { width: 100vw; max-width: none; height: 100%; margin: 0px; }
.modal-fullscreen-xl-down .modal-content { height: 100%; border: 0px; border-radius: 0px; }
.modal-fullscreen-xl-down .modal-footer,
.modal-fullscreen-xl-down .modal-header { border-radius: 0px; }
.modal-fullscreen-xl-down .modal-body { overflow-y: auto; }
}
@media (max-width: 1399.98px) {
.modal-fullscreen-xxl-down { width: 100vw; max-width: none; height: 100%; margin: 0px; }
.modal-fullscreen-xxl-down .modal-content { height: 100%; border: 0px; border-radius: 0px; }
.modal-fullscreen-xxl-down .modal-footer,
.modal-fullscreen-xxl-down .modal-header { border-radius: 0px; }
.modal-fullscreen-xxl-down .modal-body { overflow-y: auto; }
}
.tooltip.show { opacity: var(--bs-tooltip-opacity); }
.carousel-item.active { display: block; }
.active.carousel-item-end { transform: translateX(100%); }
.active.carousel-item-start { transform: translateX(-100%); }
.carousel-fade .carousel-item.active { z-index: 1; opacity: 1; }
.carousel-fade .active.carousel-item-end,
.carousel-fade .active.carousel-item-start { z-index: 0; opacity: 0; transition: opacity 0.6s; }
@media (prefers-reduced-motion: reduce) {
.carousel-fade .active.carousel-item-end,
.carousel-fade .active.carousel-item-start { transition: none; }
}
.carousel-indicators .active { opacity: 1; }
@media (max-width: 575.98px) {
.offcanvas-sm.show:not(.hiding) { transform: none; }
.offcanvas-sm.show { visibility: visible; }
}
@media (max-width: 767.98px) {
.offcanvas-md.show:not(.hiding) { transform: none; }
.offcanvas-md.show { visibility: visible; }
}
@media (max-width: 991.98px) {
.offcanvas-lg.show:not(.hiding) { transform: none; }
.offcanvas-lg.show { visibility: visible; }
}
@media (max-width: 1199.98px) {
.offcanvas-xl.show:not(.hiding) { transform: none; }
.offcanvas-xl.show { visibility: visible; }
}
@media (max-width: 1399.98px) {
.offcanvas-xxl.show:not(.hiding) { transform: none; }
.offcanvas-xxl.show { visibility: visible; }
}
.offcanvas.show:not(.hiding) { transform: none; }
.offcanvas.show { visibility: visible; }
.offcanvas-backdrop.fade { opacity: 0; }
.offcanvas-backdrop.show { opacity: 0.5; }
.offcanvas-header .btn-close { padding: calc(var(--bs-offcanvas-padding-y) * .5) calc(var(--bs-offcanvas-padding-x) * .5); margin: calc(-.5 * var(--bs-offcanvas-padding-y)) calc(-.5 * var(--bs-offcanvas-padding-x)) calc(-.5 * var(--bs-offcanvas-padding-y)) auto; }
.ratio { position: relative; width: 100%; }
.ratio::before { display: block; padding-top: var(--bs-aspect-ratio); content: ""; }
.ratio > * { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.ratio-1x1 { --bs-aspect-ratio: 100%; }
.ratio-4x3 { --bs-aspect-ratio: 75%; }
.ratio-16x9 { --bs-aspect-ratio: 56.25%; }
.ratio-21x9 { --bs-aspect-ratio: 42.8571428571%; }
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) { width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; }
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),
.visually-hidden:not(caption) { position: absolute !important; }
.fx-footer .justify-content-center { justify-content: center !important; }
.fx-footer .text-end { text-align: right !important; }
.fx-footer .text-center { text-align: center !important; }
@media (min-width: 768px) {
.fx-footer .justify-content-md-start { justify-content: flex-start !important; }
}
/* 1. Tokens ================================================================ */
/* Metric-matched fallback for Montserrat -------------------------------------
Montserrat loads from Google Fonts with font-display: swap, so the first
paint uses the platform sans-serif and the page re-lays out when the webfont
arrives. Measured on this site at 100px:
avg glyph width ascent descent line box
Montserrat 62.59 97% 25% 122%
platform sans 57.43 91% 21% 112%
Montserrat is 8.98% wider and its line box is 10 points taller, so the swap
both re-wraps text and grows every line - it moved 5 of 25 sampled elements,
the largest by 27px, and grew the page by 101px. That is the field CLS of
0.19 that Search Console reports on 101 mobile URLs.
This re-describes the local sans-serif with Montserrat's metrics so the
fallback occupies the same space and the swap becomes invisible. The numbers
are derived from the measurements above, not guessed:
size-adjust = 62.585 / 57.429 = 108.98%
ascent-override = 97% / 1.0898 = 89.01%
descent-override = 25% / 1.0898 = 22.94%
unicode-range covers Latin plus general punctuation (em dash, curly quotes,
ellipsis) and stops before U+2190 arrows and U+2713 dingbats, which Montserrat
does not contain - those keep rendering in the unadjusted platform font, at
exactly the width they have today. */
/* Montserrat, self-hosted. Was two render-blocking requests to
fonts.googleapis.com + fonts.gstatic.com: a stylesheet that then revealed the
font file, so the font could not start downloading until both round trips had
finished (Lighthouse measured that chain at 1,960ms). Served from our own
origin it is one request on a connection the browser already has open.
Variable font: one file covers weights 100-900. unicode-range is kept, so a
subset is only fetched when the page actually uses those characters. */
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/montserrat-latin-ext-italic.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;
}
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/montserrat-latin-italic.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: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/montserrat-latin-ext-normal.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;
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/montserrat-latin-normal.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: "Montserrat Fallback";
src: local("Arial"), local("Helvetica Neue"), local("Roboto");
size-adjust: 108.98%;
ascent-override: 89.01%;
descent-override: 22.94%;
line-gap-override: 0%;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
:root {
/* Bootstrap 5.3 variables: this is how the brand reaches every component. */
/* Glyphs Montserrat lacks (→, ✓) still fall back to the platform sans-serif:
"Montserrat Fallback" below carries a unicode-range that deliberately stops
short of the arrow and dingbat blocks, so their width is unchanged. */
--bs-body-font-family: "Montserrat", "Montserrat Fallback", sans-serif;
--bs-body-font-size: 1.1rem;
--bs-body-line-height: 1.65;
--bs-body-color: #718096;
--bs-body-color-rgb: 113, 128, 150;
--bs-heading-color: #000e28;
--bs-link-color: #2b284a;
--bs-link-color-rgb: 43, 40, 74;
--bs-link-hover-color: #e14f29;
--bs-link-hover-color-rgb: 225, 79, 41;
/* Brand */
--fx-accent: #e14f29;
--fx-accent-2: #c4401f;
--fx-ink: #252525;
--fx-muted: rgba(11, 11, 20, .72);
--fx-line: #e4e4e8;
--fx-line-strong: #a4a4b2;
--fx-dark: #0b0b14;
--fx-darker: #080c16;
--fx-soft: #fafafa;
--fx-navy: #171347;
/* Navigation */
--nh: 68px;
--ink: #0b0d14;
--ink2: #374151;
--ink3: #6b7280;
--ink4: #9ca3af;
--surf: #ffffff;
--surf2: #f7f8fb;
--surf3: #eef0f5;
--bdr: rgba(15, 20, 40, .08);
--bdr2: rgba(15, 20, 40, .14);
--shadow: 0 16px 56px rgba(11, 13, 20, .14), 0 2px 8px rgba(11, 13, 20, .07);
--r: 12px;
/* Anchor jumps clear the sticky nav. app.js reads the same value. */
--fx-scroll-offset: 90px;
}
/* 2. Base ================================================================== */
/* Every ![]()
now carries width/height so the browser can reserve its box
before the bytes arrive - a layout-shift fix. Those attributes are a
presentational hint, and a hint still counts as a USED height, which
silently disables any `aspect-ratio` a stylesheet sets: aspect-ratio only
drives a dimension that is auto. The video-library thumbnails collapsed that
way - the CSS asked for 2.2/1 and got 246x440, because height="440" won.
`height: auto` hands sizing back to CSS and leaves the attributes doing the
only job they are there for: declaring the ratio up front. 251 page rules set
an img width without a height, so it belongs here rather than in each of them.
It is a single element selector, so any real height - a class, an inline
style, a page rule - still beats it. */
img { height: auto; }
/* overflow-x: clip keeps anything wider than the viewport (the off-canvas
mobile nav, a long counter) from widening the page on phones. Not hidden:
that would make a scroll container and un-stick the sticky nav. */
body {
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (max-width: 991.98px) {
html { overflow-x: hidden; }
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-weight: 700;
}
a {
text-decoration: none;
transition: color .2s ease-in-out;
}
/* Both anchor styles: the homepage still uses legacy targets. */
[id],
a[name] {
scroll-margin-top: var(--fx-scroll-offset);
}
/* Hidden holder for icon sprites. Not display:none - some engines
refuse to paint