/* Theme Name: HauteLab Theme URI: https://hautelab.agency/ Description: Author: Peak Narrative Author URI: https://peaknarrative.com Template: bricks Version: 1.2 Text Domain: bricks */ /* Page titles run slightly larger than the ACSS scale, site-wide. Scales the fluid token, so mobile gains proportionally too. */ h1 { font-size: calc(var(--h1) * 1.15); } /* Global announcement banner. Rendered in the theme via wp_body_open, in normal flow above the sticky header. Dark ink bar, ivory text, gold link. .hl-banner-dismissed is set on pre-paint for visitors who closed it. */ .site-banner { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: var(--space-s); padding-block: var(--space-xs); padding-inline: var(--space-xl); background-color: var(--base); color: var(--neutral); font-size: var(--text-xs); letter-spacing: 0.04em; text-align: center; } .site-banner__text { margin: 0; } .site-banner__link { color: inherit; text-decoration: none; transition: color 0.2s ease; } .site-banner__link:hover, .site-banner__link:focus-visible { color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; } .site-banner__close { position: absolute; inset-block-start: 50%; inset-inline-end: var(--space-s); transform: translateY(-50%); display: inline-flex; padding: 0.35em; border: 0; background: none; color: inherit; font-size: 1.25em; line-height: 1; cursor: pointer; opacity: 0.65; transition: opacity 0.2s ease; } .site-banner__close:hover, .site-banner__close:focus-visible { opacity: 1; } .hl-banner-dismissed .site-banner { display: none; } /* Banner offsets. The fixed bar reserves its height through a custom property measured in inc/site-banner.php; the fixed header drops below the bar and the page content clears it. Everything falls back to 0 when there is no banner or it has been dismissed, so these rules are inert on a banner-free site. */ :root { --hl-banner-h: 0px; } body { padding-block-start: var(--hl-banner-h); } #brx-header { top: var(--hl-banner-h); } .hl-banner-dismissed { --hl-banner-h: 0px; } /* Keep the fixed header (and banner) below the WP admin bar when logged in. The banner override above set #brx-header top from --hl-banner-h alone, which clobbered Bricks' admin-bar offset; restore it here, stacked with the banner. */ body.admin-bar .site-banner { inset-block-start: var(--wp-admin--admin-bar--height, 32px); } body.admin-bar #brx-header { top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--hl-banner-h)); } /* Off-canvas group labels (.oc-label): sit tight to their own nav (the column row-gap), with generous space above each group. The first label in a column needs no top space (it already sits at the column's top). */ .oc-label { margin-block-start: var(--space-l); } .oc-label:first-child { margin-block-start: 0; } /* Logo: never let either logo be squeezed/clipped inside the header flex row, and swap to the monogram before the full wordmark would start to compress. The global class swaps at 991px (the mobile-menu point); the desktop nav still shows down to ~992px and the wordmark needs ~1200px to sit without clipping, so the swap happens earlier here - monogram in the 992-1199px desktop range. */ #brx-header .header-logo, #brx-header .header-logo--mono { flex-shrink: 0; } @media (max-width: 1199px) { #brx-header .header-logo { display: none; } #brx-header .header-logo--mono { display: block; } } /* Load-more loading state. Bricks natively adds .is-loading to the button while the AJAX page request is in flight; hide the label and show a centred, primary-colour spinner so the click gives immediate feedback. Applies to every archive/loop "Load more" button site-wide. */ .bricks-button.is-loading { pointer-events: none; position: relative; } /* Hide the label (a child element with its own colour) without collapsing the button; the ::after spinner is a pseudo-element so it stays visible. */ .bricks-button.is-loading > * { visibility: hidden; } .bricks-button.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.15em; height: 1.15em; border: 2px solid color-mix(in srgb, var(--primary) 28%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: hl-spin 0.6s linear infinite; } @keyframes hl-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .bricks-button.is-loading::after { animation-duration: 1.6s; } } /* Filter loading overlay. Bricks fires bricks/ajax/start|end around any query-filter request; inc/archive-filter-ui.php flags body.hl-filtering for the duration (not for load-more). Dim the active archive grid + show a spinner so it's obvious the gallery is updating, instead of the filter inputs just disabling silently. */ body.hl-filtering .archive-grid { position: relative; min-height: 50vh; isolation: isolate; /* own stacking context so the overlay sits above the cards */ } body.hl-filtering .archive-grid::after { content: ""; position: absolute; inset: 0; z-index: 20; background: color-mix(in srgb, var(--neutral) 55%, transparent); } body.hl-filtering .archive-grid::before { content: ""; position: absolute; z-index: 21; inset-block-start: clamp(2.5rem, 14vh, 9rem); inset-inline: 0; margin-inline: auto; width: 1.85rem; height: 1.85rem; border: 2px solid color-mix(in srgb, var(--primary) 28%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: hl-spin 0.7s linear infinite; } @media (prefers-reduced-motion: reduce) { body.hl-filtering .archive-grid::before { animation-duration: 1.6s; } } /* ─────────────────────────────────────────────────────────────────────────── Safari 15.4 colour-mix() fallback layer (QA5/A5). color-mix() needs Safari 16.2+. On 15.4–16.1 every `color-mix(...)` declaration is invalid and dropped, so borders/tints/colours built from it vanish. (The oklch brand PALETTE — which breaks the nav/menu/label backgrounds on Safari < 15.4 — is handled by the companion @supports(not oklch) block at the foot of this file; this block only adds the color-mix tint/border/shadow help.) This is a HIGH-IMPACT SUBSET (agreed), not full parity: the ACSS utility variables (borders/dividers/shadows/muted text) plus the visible header, nav, menu, label and high-traffic component chrome. The long tail (loading spinners/overlays, members dashboard, hero/profile gradients) stays color-mix-only on 15.4. Because the original color-mix declarations are invalid on 15.4, these valid rgba/solid declarations win there regardless of source order; on browsers that DO support color-mix the whole @supports block is ignored. Values are the exact sRGB the modern build resolves to (base ≈ 4,1,19 · primary ≈ 184,153,104 · neutral ≈ 250,247,242), so 15.4 renders identically. ─────────────────────────────────────────────────────────────────────────── */ @supports not (color: color-mix(in srgb, red, blue)) { /* ACSS framework variables built from color-mix (automatic-variables.css). :root:root so it wins over ACSS's :root regardless of stylesheet load order (custom-property values aren't validated, so the original color-mix value is stored, not dropped — only specificity/order decides). */ :root:root { --border-color-dark: rgba(0, 0, 0, 0.2); --border-color-light: rgba(255, 255, 255, 0.2); --divider-color-dark: rgba(0, 0, 0, 0.2); --divider-color-light: rgba(255, 255, 255, 0.2); --text-dark-muted: rgba(0, 0, 0, 0.8); --text-light-muted: rgba(255, 255, 255, 0.8); --box-shadow-1: 0 0 40px rgba(0, 0, 0, 0.1); --box-shadow-2: 0 0 60px rgba(0, 0, 0, 0.2); --box-shadow-3: 0 0 80px rgba(0, 0, 0, 0.3); --drop-shadow-1: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); --drop-shadow-2: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); --drop-shadow-3: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.25)); --text-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2); --text-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3); --text-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.4); } /* Header, off-canvas nav + footer nav. */ #brx-header { border-bottom: 1px solid rgba(4, 1, 19, 0.12); } #brx-header.scrolling { box-shadow: 0 1px 24px rgba(4, 1, 19, 0.08); } .offcanvas-bar { border-bottom: 1px solid rgba(4, 1, 19, 0.12); } .offcanvas-search .search-field__form { border-color: rgba(4, 1, 19, 0.24); } .oc-contact-link { border-bottom: 1px solid rgba(4, 1, 19, 0.08); } .header-divider { background-color: rgba(4, 1, 19, 0.22); } .header-phone::after { background-color: rgba(4, 1, 19, 0.22); } .footer-dark { color: rgba(250, 247, 242, 0.7); } .footer-dark__nav ul.bricks-nav-menu a { color: rgba(250, 247, 242, 0.55); } /* Menus: the Models A–Z dropdown + the archive-tabs "More" menu. */ .models-dropdown { box-shadow: 0 18px 60px rgba(4, 1, 19, 0.22); } .models-dropdown::-webkit-scrollbar-thumb { background-color: rgba(184, 153, 104, 0.6); } .models-dropdown a:hover { background-color: rgba(184, 153, 104, 0.08); } .archive-tabs__menu { box-shadow: 0 18px 50px rgba(4, 1, 19, 0.18); } .archive-tabs__menu-link:hover { background-color: rgba(184, 153, 104, 0.08); } /* Labels / badges (e.g. the card "DUO"/"NEW" tag). */ .companion-card__tag { background: rgba(250, 247, 242, 0.92); } /* Filters, toolbar + search controls. */ .archive-filters__foot { border-top: 1px solid rgba(4, 1, 19, 0.1); } .archive-filters .brx-option-text.bricks-button { border: 1px solid rgba(4, 1, 19, 0.18); } .archive-filters .bricks-choices__inner { border: 1px solid rgba(4, 1, 19, 0.18); } .archive-filters .bricks-choices__list--multiple .bricks-choices__button { border-left: 1px solid rgba(255, 255, 255, 0.35); } .archive-filters .bricks-choices__list--dropdown { box-shadow: 0 12px 40px rgba(4, 1, 19, 0.18); } .archive-filters .bricks-choices__list--dropdown .bricks-choices__item--selectable.is-highlighted { background: rgba(184, 153, 104, 0.14); } .archive-toolbar { border-bottom: 1px solid rgba(4, 1, 19, 0.12); } .models-search { border-bottom: 1px solid rgba(4, 1, 19, 0.08); } .models-search input { border-bottom: 1px solid rgba(4, 1, 19, 0.18); } .icon-btn { border: 1px solid rgba(4, 1, 19, 0.22); } .search-field__form { border: 1px solid rgba(4, 1, 19, 0.18); } /* High-traffic bands. */ .testimonials-band { background-color: rgb(247, 243, 236); border-top: 1px solid rgba(4, 1, 19, 0.08); } .testimonials-band .splide__pagination__page { background: rgba(4, 1, 19, 0.18); } .review-form textarea { border: 1px solid rgba(4, 1, 19, 0.15); } .member-gate { border: 1px solid rgba(4, 1, 19, 0.12); } .review-form { border-top: 1px solid rgba(4, 1, 19, 0.08); } .page-head__intro p { color: rgba(4, 1, 19, 0.7); } .page-head__updated { color: rgba(4, 1, 19, 0.55); } .page-prose p { color: rgba(4, 1, 19, 0.88); } .page-prose blockquote { color: rgba(4, 1, 19, 0.75); } .page-prose td { border: 1px solid rgba(4, 1, 19, 0.12); } .page-prose hr { border-block-start: 1px solid rgba(4, 1, 19, 0.12); } .book-bar { background: rgba(250, 247, 242, 0.97); } .note { background: rgba(184, 153, 104, 0.08); } .duo-set__head { border-block-end: 1px solid rgba(4, 1, 19, 0.12); } .duo-set__cta { border-block-start: 1px solid rgba(4, 1, 19, 0.12); } } /* ─────────────────────────────────────────────────────────────────────────── Safari < 15.4 oklch() palette fallback (QA5/A5). ACSS defines the ENTIRE brand palette (--base, --neutral, --primary, …, every shade) with oklch(), which only shipped in Safari 15.4. On 15.0–15.3 those declarations are unusable, so `background: var(--neutral)` (the header/nav + off-canvas menu), `color: var(--primary)` (labels) and the dark sections (the footer fell back to white-on-black) all lose their colour. Re-declare the palette as the exact sRGB hex the modern build resolves to, so 15.0–15.3 renders the design. Custom-property values are NOT validated, so the original oklch declarations are stored (not dropped); :root:root wins over ACSS's :root regardless of load order. Browsers WITH oklch ignore this whole block (so 15.4+ keeps oklch and only the color-mix block above applies). --white / --black are already sRGB. */ @supports not (color: oklch(0% 0 0)) { :root:root { --accent: #d9c9a8; --accent-dark: #2c1f02; --accent-hover: #fff3d4; --accent-light: #dcccab; --accent-semi-dark: #46391b; --accent-semi-light: #9d8d6e; --accent-ultra-dark: #060300; --accent-ultra-light: #fdedcb; --base: #040113; --base-dark: #211d38; --base-hover: #060217; --base-light: #ccc9ed; --base-semi-dark: #393653; --base-semi-light: #8d8bac; --base-ultra-dark: #040112; --base-ultra-light: #edecff; --neutral: #faf7f2; --neutral-dark: #2a200f; --neutral-hover: #473d2b; --neutral-light: #d9ccb7; --neutral-semi-dark: #433927; --neutral-semi-light: #998e7a; --neutral-ultra-dark: #060300; --neutral-ultra-light: #faedd7; --primary: #b89968; --primary-dark: #311d00; --primary-hover: #daba88; --primary-light: #e9c996; --primary-semi-dark: #4f3500; --primary-semi-light: #a88a59; --primary-ultra-dark: #060300; --primary-ultra-light: #ffebc6; --secondary: #a8a39a; --secondary-dark: #25211a; --secondary-hover: #cac5bc; --secondary-light: #d2cdc4; --secondary-semi-dark: #3e3a32; --secondary-semi-light: #938f86; --secondary-ultra-dark: #050301; --secondary-ultra-light: #f3eee4; --success: #3fa66a; --success-dark: #002c0f; --success-hover: #61c687; --success-light: #82e7a7; --success-semi-dark: #004a1e; --success-semi-light: #3fa66a; --success-ultra-dark: #000501; --success-ultra-light: #c9fed9; --tertiary: #5c6478; --tertiary-dark: #1b2132; --tertiary-hover: #717a8e; --tertiary-light: #c4cee4; --tertiary-semi-dark: #333a4c; --tertiary-semi-light: #868fa4; --tertiary-ultra-dark: #01030e; --tertiary-ultra-light: #e7eeff; } }