/** * AIR Global UI Theme (2026-07-30) * * A single, reusable design system applied storefront-wide via CSS custom * properties - never a page-by-page rewrite. Loaded once, last, from * catalog/view/template/common/header.twig (the one template every * storefront page already shares) - AFTER bootstrap.css and stylesheet.css, * so its overrides win the cascade without needing `!important` anywhere. * * ARCHITECTURE: this fork's bootstrap.css is a real Bootstrap 5.3 build * with a full CSS-variable-driven component system (`--bs-btn-*`, * `--bs-card-*`, `--bs-modal-*`, `--bs-table-*`, `--bs-dropdown-*`, * `--bs-pagination-*`, etc.) AND Bootstrap's own built-in dark color mode * (`[data-bs-theme="dark"]`, activated globally via one `data-bs-theme` * attribute added to in header.twig). That combination is * deliberately reused here rather than reinvented: activating dark mode * gets every dark-aware structural fix Bootstrap already ships for free * (the form-select arrow icon, the navbar-toggler icon, the btn-close * icon, the accordion caret, ...) - components a hand-rolled dark theme * would otherwise have to rediscover one broken icon at a time. This file * then overrides ONLY the actual colour values (both Bootstrap's own * tokens and this fork's bespoke `#menu`/`#top`/footer selectors in * stylesheet.css) to the exact requested AIR palette. * * `--air-*` custom properties are the single source of truth for that * palette - every rule below reads from them, never a literal hex value a * second time. Change the palette by editing the `:root` block only. */ :root { /* ---- AIR design tokens - the one place the palette is defined ---- */ --air-bg-page: #141414; --air-bg-section: #191919; --air-bg-card: #2d333b; --air-bg-card-hover: #343b44; --air-accent: #ff9500; --air-accent-hover: #e68600; --air-accent-rgb: 255, 149, 0; --air-text-primary: #f5f5f5; --air-text-secondary: #c9c9c9; --air-text-muted: #9098a3; --air-border: #4b5563; --air-divider: #444444; /* Semantic surface tints + neutral overlays. Kept as tokens (not literals) so they switch with the theme; these :root values are the Night set. The semantic HUE (danger red, warning amber) is preserved in both themes - only the surface lightness flips. */ --air-danger-bg: #3a1414; --air-danger-border: #5a1f1f; --air-danger-text: #ff8080; --air-danger-bg-hover: #4a1a1a; --air-warning-bg: #3a2c10; --air-warning-border: #5a4518; --air-warning-text: #e0a940; --air-warning-bg-hover: #4a3814; --air-table-striped: rgba(255, 255, 255, 0.03); --air-header-overlay: rgba(0, 0, 0, 0.18); /* AIR services nav surface. Night = the exact Bootstrap .bg-dark value it already renders (#212529), so Night is unchanged; Day flips it light. */ --air-services-nav-bg: #212529; --air-radius: 0.5rem; --air-radius-sm: 0.375rem; --air-btn-radius: 7px; --air-btn-height: 46px; } /* ========================================================================== Re-point Bootstrap's own dark-mode tokens at the AIR palette. Scoped to [data-bs-theme="dark"] (set on by header.twig) rather than :root, so this file stays additive to bootstrap.css's own dark block instead of silently fighting light-mode consumers that don't exist on this storefront anyway (there is no light/dark toggle - dark is the only mode). ========================================================================== */ [data-bs-theme="dark"] { --bs-body-bg: var(--air-bg-page); --bs-body-color: var(--air-text-primary); --bs-emphasis-color: #ffffff; --bs-secondary-color: var(--air-text-secondary); --bs-tertiary-color: var(--air-text-muted); --bs-secondary-bg: var(--air-bg-section); --bs-tertiary-bg: var(--air-bg-section); --bs-border-color: var(--air-border); --bs-border-color-translucent: var(--air-border); --bs-link-color: var(--air-accent); --bs-link-color-rgb: var(--air-accent-rgb); --bs-link-hover-color: var(--air-accent-hover); --bs-heading-color: var(--air-text-primary); } /* ========================================================================== DAY THEME (2026-09-16). Additive, opt-in: activated only when the theme switcher sets data-bs-theme="light" on (Night stays the default and is preserved byte-for-byte above). It re-points the SAME `--air-*` tokens to a light palette built on the original OpenCart storefront look (white cards on a light-grey page, dark text, light borders) while KEEPING the AIR orange accent (--air-accent is intentionally NOT overridden here, so it inherits #ff9500 from :root). Every component rule below already reads these tokens, so nothing else needs a day-specific rule. Same block also re-points Bootstrap's own light-mode tokens at the AIR palette, mirroring the dark block, so Bootstrap components (links, borders, surfaces) match. ========================================================================== */ [data-bs-theme="light"] { --air-bg-page: #ffffff; --air-bg-section: #f4f5f6; --air-bg-card: #f4f5f6; --air-bg-card-hover: #eceef1; /* --air-accent / --air-accent-hover / --air-accent-rgb inherited (orange) */ --air-text-primary: #212529; --air-text-secondary: #495057; --air-text-muted: #6c757d; --air-border: #dee2e6; --air-divider: #e9ecef; --air-danger-bg: #fdecea; --air-danger-border: #f5c2c0; --air-danger-text: #b02a37; --air-danger-bg-hover: #f9dcd9; --air-warning-bg: #fff4e0; --air-warning-border: #ffe0b0; --air-warning-text: #9a5b00; --air-warning-bg-hover: #ffeccb; --air-table-striped: rgba(0, 0, 0, 0.03); --air-header-overlay: rgba(0, 0, 0, 0.04); --air-services-nav-bg: var(--air-bg-section); --bs-body-bg: var(--air-bg-page); --bs-body-color: var(--air-text-primary); --bs-emphasis-color: #000000; --bs-secondary-color: var(--air-text-secondary); --bs-tertiary-color: var(--air-text-muted); --bs-secondary-bg: var(--air-bg-section); --bs-tertiary-bg: var(--air-bg-section); --bs-border-color: var(--air-border); --bs-border-color-translucent: var(--air-border); --bs-link-color: var(--air-accent); --bs-link-color-rgb: var(--air-accent-rgb); --bs-link-hover-color: var(--air-accent-hover); --bs-heading-color: var(--air-text-primary); } body { background-color: var(--air-bg-page); color: var(--air-text-primary); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--air-text-primary); } a { color: var(--air-accent); } a:hover { color: var(--air-accent-hover); } hr { border-color: var(--air-divider); opacity: 1; } ::selection { background-color: var(--air-accent); color: #ffffff; } /* ========================================================================== Buttons - every primary action matches the orange DOWNLOAD button: orange fill, bold white text, 7px rounded corners, 44-48px tall, at least 24px of horizontal padding, darker on hover - identical everywhere, including every modal (see the .air-services-btn* block below for why that needed a second, explicit fix). ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--air-btn-radius); font-weight: 700; min-height: var(--air-btn-height); padding: 0 24px; line-height: 1.2; } .btn-lg { min-height: 52px; padding: 0 32px; border-radius: var(--air-btn-radius); } .btn-sm { min-height: 32px; padding: 0 14px; border-radius: var(--air-btn-radius); } .btn-primary { --bs-btn-color: #ffffff; --bs-btn-bg: var(--air-accent); --bs-btn-border-color: var(--air-accent); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--air-accent-hover); --bs-btn-hover-border-color: var(--air-accent-hover); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--air-accent-hover); --bs-btn-active-border-color: var(--air-accent-hover); --bs-btn-disabled-color: #ffffff; --bs-btn-disabled-bg: var(--air-accent); --bs-btn-disabled-border-color: var(--air-accent); --bs-btn-focus-shadow-rgb: var(--air-accent-rgb); font-weight: 700; } .btn-outline-primary { --bs-btn-color: var(--air-accent); --bs-btn-border-color: var(--air-accent); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--air-accent); --bs-btn-hover-border-color: var(--air-accent); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--air-accent-hover); --bs-btn-active-border-color: var(--air-accent-hover); --bs-btn-focus-shadow-rgb: var(--air-accent-rgb); } .btn-secondary, .btn-outline-secondary, .btn-light { --bs-btn-color: var(--air-text-primary); --bs-btn-bg: var(--air-bg-card); --bs-btn-border-color: var(--air-border); --bs-btn-hover-color: var(--air-text-primary); --bs-btn-hover-bg: var(--air-bg-card-hover); --bs-btn-hover-border-color: var(--air-accent); --bs-btn-active-color: var(--air-text-primary); --bs-btn-active-bg: var(--air-bg-card-hover); --bs-btn-active-border-color: var(--air-accent); --bs-btn-disabled-color: var(--air-text-muted); --bs-btn-disabled-bg: var(--air-bg-card); --bs-btn-disabled-border-color: var(--air-border); } /* Danger/success/info/warning keep their own semantic colour (a "Delete" button must still read as dangerous) - only the surface changes to sit naturally against the dark page instead of being fully re-themed orange. */ .btn-danger { --bs-btn-hover-bg: #c0392b; --bs-btn-hover-border-color: #c0392b; } .btn-outline-danger { --bs-btn-hover-color: #ffffff; } .btn-success { --bs-btn-hover-bg: #1e8449; --bs-btn-hover-border-color: #1e8449; } .btn-info { --bs-btn-color: #0b2530; --bs-btn-hover-color: #0b2530; } .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 0.25rem rgba(var(--air-accent-rgb), 0.35); } /* Pre-existing storefront rule (stylesheet.css) that forced plain-state home-page button text to black - fought every dark button underneath it. Overridden back to normal so .btn-primary/.btn-outline-primary text is never forced black on a dark card. */ #air-network-home .btn:not(:hover):not(:active):not(:focus) { color: inherit; } /* ========================================================================== AIR Services custom buttons (.air-services-btn / .air-services-btn-primary / .air-services-btn-secondary / .air-services-btn-sm / .air-services-btn-danger) - a parallel button system (not Bootstrap's .btn) used across ~30 account pages (Teams, Zero Trust, AIRDRIVE, ...) and every AirServicesModal-based modal (Connect New Machine, Storybook Popup, ...). Previously ONLY ever defined per-page, scoped to that page's own container id (e.g. `#account-teams-info .air-services-btn-primary`) - which works for a button rendered inside that page's own markup, but AirServicesModal (air_services_modal.js) appends its overlay directly to , OUTSIDE every page's own container id, so none of those scoped rules ever matched a modal's own buttons - they fell back to the browser's bare default control styling (2026-07-30 bug report: "Bootstrap's default white rectangular appearance" in modals - confirmed live via getComputedStyle() showing literally zero applied border-radius/padding/ colour before this fix, not a Bootstrap style at all, just unstyled UA defaults). Defined here, once, unscoped, so it reaches every context including modals - the actual single source of truth this class system always should have had. The matching per-page `#account-X .air-services-btn*` blocks have been removed from every template that had them (see that deploy's own commit/backup) rather than left as now-redundant dead weight that could drift out of sync again. ========================================================================== */ .air-services-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--air-btn-radius); font-weight: 700; min-height: var(--air-btn-height); padding: 0 24px; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.2; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .air-services-btn-sm { min-height: 32px; padding: 0 14px; font-size: 0.85rem; } .air-services-btn-primary { background-color: var(--air-accent); border-color: var(--air-accent); color: #ffffff; } .air-services-btn-primary:hover, .air-services-btn-primary:focus { background-color: var(--air-accent-hover); border-color: var(--air-accent-hover); color: #ffffff; } .air-services-btn-secondary { background-color: var(--air-bg-card); border-color: var(--air-border); color: var(--air-text-primary); } .air-services-btn-secondary:hover, .air-services-btn-secondary:focus { background-color: var(--air-bg-card-hover); border-color: var(--air-accent); color: var(--air-accent); } .air-services-btn-danger { background-color: var(--air-danger-bg); border-color: var(--air-danger-border); color: var(--air-danger-text); } .air-services-btn-danger:hover, .air-services-btn-danger:focus { background-color: var(--air-danger-bg-hover); border-color: var(--air-danger-text); color: var(--air-danger-text); } /* AIR Admin Network - Admin SSH (2026-08-24) - deliberately its own color (amber, not the accent/secondary/danger already in use) so the Admin SSH action is never visually confused with the normal customer SSH Terminal button next to it. */ .air-services-btn-warning { background-color: var(--air-warning-bg); border-color: var(--air-warning-border); color: var(--air-warning-text); } .air-services-btn-warning:hover, .air-services-btn-warning:focus { background-color: var(--air-warning-bg-hover); border-color: var(--air-warning-text); color: var(--air-warning-text); } .air-services-btn:disabled, .air-services-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* ========================================================================== Cards - dark fill, subtle border, orange titles, rounded corners, orange border on hover. ========================================================================== */ .card { --bs-card-bg: var(--air-bg-card); --bs-card-border-color: var(--air-border); --bs-card-cap-bg: var(--air-header-overlay); --bs-card-cap-color: var(--air-text-primary); --bs-card-color: var(--air-text-secondary); --bs-card-title-color: var(--air-accent); --bs-card-subtitle-color: var(--air-text-muted); border-radius: var(--air-radius); transition: background-color 0.15s ease, border-color 0.15s ease; } .card:hover { background-color: var(--air-bg-card-hover); border-color: var(--air-accent); } .card-title { font-weight: 700; } /* ========================================================================== Forms - dark inputs/selects, light text, orange focus border. Applies to every .form-control/.form-select regardless of page (account forms, AIR Services modals, admin-styled front-end panels). ========================================================================== */ .form-control, .form-select { background-color: var(--air-bg-card); border-color: var(--air-border); color: var(--air-text-primary); } .form-control::placeholder { color: var(--air-text-muted); opacity: 1; } .form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--air-bg-section); color: var(--air-text-muted); } .form-control:focus, .form-select:focus { background-color: var(--air-bg-card); border-color: var(--air-accent); color: var(--air-text-primary); box-shadow: 0 0 0 0.25rem rgba(var(--air-accent-rgb), 0.25); } .form-check-input { background-color: var(--air-bg-card); border-color: var(--air-border); } .form-check-input:checked { background-color: var(--air-accent); border-color: var(--air-accent); } .form-check-input:focus { border-color: var(--air-accent); box-shadow: 0 0 0 0.25rem rgba(var(--air-accent-rgb), 0.25); } .form-switch .form-check-input:checked { background-color: var(--air-accent); border-color: var(--air-accent); } label, .form-label, .col-form-label { color: var(--air-text-secondary); } .form-text { color: var(--air-text-muted); } .input-group-text { background-color: var(--air-bg-section); border-color: var(--air-border); color: var(--air-text-secondary); } /* ========================================================================== Tables - dark surface, orange headers, light text, hover rows. ========================================================================== */ .table { --bs-table-bg: var(--air-bg-card); --bs-table-color: var(--air-text-primary); --bs-table-border-color: var(--air-border); --bs-table-hover-bg: var(--air-bg-card-hover); --bs-table-hover-color: var(--air-text-primary); --bs-table-striped-bg: var(--air-table-striped); --bs-table-striped-color: var(--air-text-primary); border-radius: var(--air-radius); overflow: hidden; } .table thead th { color: var(--air-accent); border-bottom-color: var(--air-border); font-weight: 700; background-color: var(--air-header-overlay); } /* AIR Messaging Inbox (2026-08-07) - unread conversation rows previously used stock Bootstrap `.table-warning`, whose own `--bs-table-bg: #feedd6` is a hardcoded pale/light orange that this theme's `.table` rule above never overrides (a real gap, not a `.table-warning` bug - that class is intentionally left alone here so any OTHER, unrelated use of genuine Bootstrap "warning" semantics elsewhere on the platform keeps its own real meaning). A new, dedicated class instead - a subtle accent-tinted dark row plus a left accent bar, so unread state reads clearly against the dark theme without ever becoming the page's dominant background colour. Read/unread stays doubly distinguishable even without colour: the existing bold subject text and red unread- count badge (unchanged, already correct) are the primary signal; this row tint is a secondary reinforcement. */ .air-message-unread { --bs-table-bg: rgba(var(--air-accent-rgb), 0.08); --bs-table-color: var(--air-text-primary); box-shadow: inset 3px 0 0 0 var(--air-accent); } .air-message-unread:hover { --bs-table-bg: rgba(var(--air-accent-rgb), 0.14); } /* ========================================================================== Modals - dark background, orange title, same button styling (buttons inside a modal already inherit the .btn rules above - nothing modal- specific to add there). ========================================================================== */ .modal-content { --bs-modal-bg: var(--air-bg-card); --bs-modal-color: var(--air-text-primary); --bs-modal-border-color: var(--air-border); --bs-modal-header-border-color: var(--air-border); --bs-modal-footer-border-color: var(--air-border); border-radius: var(--air-radius); } .modal-title { color: var(--air-accent); font-weight: 700; } /* Night only: whiten the modal close icon against the dark modal. In Day (light modal) Bootstrap's own dark close glyph is correct, so no filter. */ [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ========================================================================== Navigation - dark nav, orange active item, light text. Covers both the generic Bootstrap .navbar/.nav-link vocabulary AND this fork's own hand-styled #top/#menu bars (stylesheet.css), which never used Bootstrap CSS variables to begin with and so need direct overrides. ========================================================================== */ #top { background-color: var(--air-bg-section); border-bottom-color: var(--air-border); } #top .list-inline-item > a, #top .list-inline-item .dropdown > a { color: var(--air-text-secondary); } #top .list-inline-item > a:hover { color: var(--air-accent); } /* Hide the promotional category bar (the orange #menu navbar whose only item is the "AIR Trust Managed Server plans…" catalog category) - 2026-09-16, per request. Presentation-only; the category itself is left untouched in the DB. */ #menu { display: none; } #menu { background-color: var(--air-bg-section); background-image: none; border-color: var(--air-border); } #menu .navbar-nav > li > a { color: var(--air-text-secondary); text-shadow: none; } #menu .navbar-nav > li > a:hover, #menu .navbar-nav > li > a.active, #menu .navbar-nav > li.active > a { color: var(--air-accent); background-color: rgba(var(--air-accent-rgb), 0.1); } /* AIR services nav (rendered by {{ air_services }}). Its surface is a Bootstrap `.bg-dark` full-width WRAPPER (a direct child of #container) around the nav. Made theme-aware here in the theme layer only (no template change): Night keeps the exact #212529 it already renders; Day flips it to the light section surface and restyles the navbar-dark link/brand/toggler colours below so text stays legible. */ #container > .container-fluid.bg-dark { background-color: var(--air-services-nav-bg) !important; } [data-bs-theme="light"] #air-services { --bs-navbar-color: var(--air-text-secondary); --bs-navbar-hover-color: var(--air-accent); --bs-navbar-active-color: var(--air-accent); --bs-navbar-brand-color: var(--air-text-primary); --bs-navbar-brand-hover-color: var(--air-text-primary); --bs-navbar-toggler-border-color: var(--air-border); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(33,37,41,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } [data-bs-theme="light"] #air-services .navbar-nav .nav-link, [data-bs-theme="light"] #air-services .navbar-brand { color: var(--air-text-secondary); } [data-bs-theme="light"] #air-services .navbar-brand { color: var(--air-text-primary); } [data-bs-theme="light"] #air-services .navbar-nav .nav-link:hover, [data-bs-theme="light"] #air-services .navbar-nav .nav-link:focus, [data-bs-theme="light"] #air-services .navbar-nav .nav-link.active { color: var(--air-accent); } #category { color: var(--air-text-primary); text-shadow: none; } .nav-tabs { --bs-nav-tabs-border-color: var(--air-border); --bs-nav-tabs-link-hover-border-color: var(--air-border) var(--air-border) var(--air-border); --bs-nav-tabs-link-active-color: var(--air-accent); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: var(--air-border) var(--air-border) var(--air-bg-page); } .nav-pills { --bs-nav-pills-link-active-color: #ffffff; --bs-nav-pills-link-active-bg: var(--air-accent); } .breadcrumb { background-color: var(--air-bg-section); border-color: var(--air-border); } /* stylesheet.css's own `.breadcrumb > li.breadcrumb-item` rules predate this theme and hardcode a light-background design (black link text, a white 1px text-shadow meant as a subtle light-mode emboss - it reads as a stray white glow on dark text here). Matched/exceeded in specificity and neutralised rather than edited in place, since stylesheet.css is this fork's base theme file, not an AIR-owned one. */ .breadcrumb > li.breadcrumb-item { text-shadow: none; } .breadcrumb-item a, .breadcrumb > li.breadcrumb-item > a { color: var(--air-text-secondary); } .breadcrumb-item a:hover, .breadcrumb > li.breadcrumb-item > a:hover { color: var(--air-accent); } .breadcrumb-item.active { color: var(--air-text-muted); } .breadcrumb > li.breadcrumb-item:after { border-right-color: var(--air-border); border-bottom-color: var(--air-border); } .pagination { --bs-pagination-bg: var(--air-bg-card); --bs-pagination-border-color: var(--air-border); --bs-pagination-hover-bg: var(--air-bg-card-hover); --bs-pagination-hover-border-color: var(--air-accent); --bs-pagination-active-bg: var(--air-accent); --bs-pagination-active-border-color: var(--air-accent); --bs-pagination-disabled-bg: var(--air-bg-section); --bs-pagination-disabled-border-color: var(--air-border); } /* ========================================================================== Alerts - dark background, coloured left border (per Bootstrap contextual type - a validation error must still read as an error). ========================================================================== */ .alert { background-color: var(--air-bg-card); color: var(--air-text-primary); border: 1px solid var(--air-border); border-left-width: 4px; border-radius: var(--air-radius-sm); } .alert-primary { border-left-color: var(--air-accent); } .alert-secondary { border-left-color: var(--air-text-muted); } .alert-success { border-left-color: #2fb344; } .alert-danger { border-left-color: #e5484d; } .alert-warning { border-left-color: #f5a623; } .alert-info { border-left-color: #3b9eda; } .alert-light { border-left-color: var(--air-border); } .alert-dark { border-left-color: var(--air-divider); } /* ========================================================================== Badges - orange primary badge, other contextual badges kept recognisable. ========================================================================== */ .badge.bg-primary, .badge.text-bg-primary { background-color: var(--air-accent) !important; color: #ffffff !important; } .badge.bg-secondary, .badge.text-bg-secondary { background-color: var(--air-bg-card-hover) !important; color: var(--air-text-primary) !important; } .badge.bg-light, .badge.text-bg-light { background-color: var(--air-bg-section) !important; color: var(--air-text-secondary) !important; border: 1px solid var(--air-border); } /* ========================================================================== Dropdowns - same dark surface as cards/tables, orange hover/active item. ========================================================================== */ .dropdown-menu { --bs-dropdown-bg: var(--air-bg-card); --bs-dropdown-border-color: var(--air-border); --bs-dropdown-link-color: var(--air-text-secondary); --bs-dropdown-link-hover-color: #ffffff; --bs-dropdown-link-hover-bg: var(--air-accent); --bs-dropdown-link-active-color: #ffffff; --bs-dropdown-link-active-bg: var(--air-accent); --bs-dropdown-divider-bg: var(--air-divider); border-radius: var(--air-radius-sm); } #cart .dropdown-menu { background: var(--air-bg-card); } /* ========================================================================== Misc storefront surfaces that predate this theme and used hardcoded colours directly (stylesheet.css) rather than Bootstrap variables. ========================================================================== */ footer { background-color: var(--air-bg-section); border-color: var(--air-border); color: var(--air-text-secondary); } footer hr { border-color: var(--air-divider); } footer a { color: var(--air-text-secondary); } footer a:hover { color: var(--air-accent); } footer h5 { color: var(--air-text-primary); } .product-thumb, .blog-thumb { border-color: var(--air-border); background-color: var(--air-bg-card); } .product-thumb .button button { background-color: var(--air-bg-section); border-color: var(--air-border); color: var(--air-text-secondary); } .product-thumb .button button:hover { background-color: var(--air-bg-card-hover); color: var(--air-accent); } .price { color: var(--air-text-primary); } .price-old { color: var(--air-text-muted); } .price-tax { color: var(--air-text-muted); } #cookie { background: var(--air-bg-section); color: var(--air-text-secondary); border-top: 1px solid var(--air-border); } .list-group-item { background-color: var(--air-bg-card); border-color: var(--air-border); color: var(--air-text-primary); } .list-group-item.active { background-color: var(--air-accent); border-color: var(--air-accent); color: #ffffff; } .list-group-item-action:hover { background-color: var(--air-bg-card-hover); color: var(--air-text-primary); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--air-bg-page); } ::-webkit-scrollbar-thumb { background: var(--air-border); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--air-accent); } /* ========================================================================== Card icon inheritance (2026-07-30) - the shared "icon + heading" component used by catalog/view/template/common/partials/air_heading_with_icon.twig AND by AirServicesModal's own modal header (see air_services_modal.js's own docblock for how it builds this same markup for a modal title) - one single visual pattern for every destination page heading, related list heading, and modal title opened from a Card, all sized from the SAME icon value (CardRegistryStore is the only place that value is ever typed). `.air-heading-with-icon-sm` is the modal-scale variant - smaller, same proportions, never a different icon. ========================================================================== */ .air-heading-with-icon { display: flex; align-items: center; gap: 12px; } .air-heading-with-icon h1, .air-heading-with-icon h2, .air-heading-with-icon h3 { margin: 0; } .air-heading-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 32px; } img.air-heading-icon { object-fit: contain; } i.air-heading-icon { font-size: 28px; line-height: 1; color: var(--air-accent); } .air-heading-with-icon-sm .air-heading-icon { width: 20px; height: 20px; } .air-heading-with-icon-sm i.air-heading-icon { font-size: 18px; } /* ========================================================================== Theme switcher (Day / Night / System) - 2026-09-16. A compact segmented control in the top bar. Reads the theme tokens so it looks right in both modes; the active option is filled with the AIR accent. ========================================================================== */ .air-theme-switch { display: inline-flex; border: 1px solid var(--air-border); border-radius: var(--air-btn-radius); overflow: hidden; vertical-align: middle; } .air-theme-switch .air-theme-opt { -webkit-appearance: none; appearance: none; background: transparent; border: 0; color: var(--air-text-secondary); padding: 4px 9px; font-size: 0.85rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; transition: background-color 0.15s ease, color 0.15s ease; } .air-theme-switch .air-theme-opt + .air-theme-opt { border-left: 1px solid var(--air-border); } .air-theme-switch .air-theme-opt:hover { color: var(--air-accent); } .air-theme-switch .air-theme-opt.is-active { background-color: var(--air-accent); color: #ffffff; }