/** Shopify CDN: Minification failed Line 620:0 Unexpected "}" Line 768:0 Unexpected "}" **/ /* ========================================================================== MAISON HAMZA — Luxe Design System All responsive logic lives here. Sections only emit CSS custom properties via snippets/luxe-style.liquid, so per-section CSS payload stays near zero. Breakpoints: mobile-first / tablet >=750px / desktop >=1200px ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { --lx-ink: #141310; --lx-ink-soft: #3A3730; --lx-canvas: #FAF8F5; --lx-linen: #EFEAE3; --lx-brass: #B08D4F; --lx-brass-lt: #C9AC77; --lx-stone: #8A8378; --lx-line: #E2DCD3; --lx-white: #FFFFFF; --lx-font-display: Georgia, 'Times New Roman', serif; --lx-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Letterspaced uppercase UI — the brand's core typographic gesture */ --lx-track-ui: 0.18em; --lx-track-logo: 0.32em; --lx-gutter: 20px; --lx-page: 1440px; --lx-ease: cubic-bezier(0.22, 1, 0.36, 1); --lx-ease-io: cubic-bezier(0.65, 0, 0.35, 1); --lx-dur: 0.6s; --lx-header-h: 72px; } @media (min-width: 750px) { :root { --lx-gutter: 40px; --lx-header-h: 84px; } } @media (min-width: 1200px) { :root { --lx-gutter: 56px; } } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body.lx-body { margin: 0; background: var(--lx-canvas); color: var(--lx-ink); font-family: var(--lx-font-body); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lx-body img, .lx-body svg, .lx-body video { display: block; max-width: 100%; } .lx-body a { color: inherit; text-decoration: none; } .lx-body h1, .lx-body h2, .lx-body h3, .lx-body h4, .lx-body p, .lx-body figure { margin: 0; } .lx-body :focus-visible { outline: 2px solid var(--lx-brass); outline-offset: 3px; } .lx-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .lx-body ::selection { background: var(--lx-brass); color: #fff; } /* Scoped resets — these repeat the .lx-body rules at component level so a Luxe section looks identical whether it sits in the standalone layout or is layered on top of another theme that owns the tag. */ .lx-section, .lx-header, .lx-footer, .lx-announce, .lx-drawer { font-family: var(--lx-font-body); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .lx-section a, .lx-header a, .lx-footer a, .lx-announce a, .lx-drawer a { color: inherit; text-decoration: none; } .lx-section img, .lx-section svg, .lx-header img, .lx-header svg, .lx-footer img, .lx-footer svg { display: block; max-width: 100%; } .lx-section h1, .lx-section h2, .lx-section h3, .lx-section h4, .lx-section p, .lx-section figure, .lx-section blockquote { margin: 0; } .lx-section button, .lx-header button, .lx-drawer button, .lx-footer button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* -------------------------------------------------------------------------- 3. SECTION SHELL — consumes engine variables -------------------------------------------------------------------------- */ .lx-section { position: relative; padding-top: var(--pad-top-m, var(--pad-top-d, 64px)); padding-bottom: var(--pad-bot-m, var(--pad-bot-d, 64px)); padding-left: var(--pad-x-m, var(--pad-x-d, 0px)); padding-right: var(--pad-x-m, var(--pad-x-d, 0px)); margin-top: var(--mar-top, 0px); margin-bottom: var(--mar-bot, 0px); margin-left: var(--mar-left, 0px); margin-right: var(--mar-right, 0px); background-color: var(--bg-color, transparent); color: var(--body-color, inherit); border-radius: var(--radius, 0px); border-style: solid; border-width: var(--border-w, 0px); border-color: var(--border-color, transparent); isolation: isolate; } @media (min-width: 750px) { .lx-section { padding-top: var(--pad-top-t, var(--pad-top-d, 88px)); padding-bottom: var(--pad-bot-t, var(--pad-bot-d, 88px)); padding-left: var(--pad-x-t, var(--pad-x-d, 0px)); padding-right: var(--pad-x-t, var(--pad-x-d, 0px)); } } @media (min-width: 1200px) { .lx-section { padding-top: var(--pad-top-d, 120px); padding-bottom: var(--pad-bot-d, 120px); padding-left: var(--pad-x-d, 0px); padding-right: var(--pad-x-d, 0px); } } /* Background image + gradient + overlay ---------------------------------- */ .lx-section[data-bg-image]::before, .lx-section[data-bg-gradient]::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: var(--bg-image, var(--bg-gradient, none)); background-size: cover; background-position: var(--bg-position, center); background-repeat: no-repeat; border-radius: inherit; } .lx-section[data-bg-fixed]::before { background-attachment: fixed; } .lx-section[data-overlay]::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--overlay-color, #000); opacity: var(--overlay-opacity, 0.3); border-radius: inherit; pointer-events: none; } /* Width containers -------------------------------------------------------- */ .lx-wrap { width: 100%; margin-inline: auto; padding-inline: var(--lx-gutter); } .lx-wrap--boxed { max-width: var(--content-max, 1440px); } .lx-wrap--narrow { max-width: var(--content-max, 900px); } .lx-wrap--full { max-width: none; padding-inline: 0; } .lx-wrap--full-padded { max-width: none; } /* Visibility -------------------------------------------------------------- */ .lx-hide-m { display: none !important; } @media (min-width: 750px) { .lx-hide-m { display: revert !important; } .lx-hide-t { display: none !important; } } @media (min-width: 1200px) { .lx-hide-t { display: revert !important; } .lx-hide-d { display: none !important; } } /* -------------------------------------------------------------------------- 4. TYPOGRAPHY ENGINE Three addressable roles per section: eyebrow (e), heading (h), body (b). -------------------------------------------------------------------------- */ .lx-eyebrow { font-family: var(--e-family, var(--lx-font-body)); font-size: var(--e-size-m, var(--e-size-d, 11px)); font-weight: var(--e-weight, 500); font-style: var(--e-style, normal); letter-spacing: var(--e-ls, 0.22em); line-height: var(--e-lh, 1.4); text-transform: var(--e-transform, uppercase); text-align: var(--e-align, inherit); color: var(--e-color, var(--lx-brass)); margin-bottom: var(--e-gap, 20px); display: block; } .lx-heading { font-family: var(--h-family, var(--lx-font-display)); font-size: var(--h-size-m, var(--h-size-d, 34px)); font-weight: var(--h-weight, 400); font-style: var(--h-style, normal); letter-spacing: var(--h-ls, -0.01em); line-height: var(--h-lh, 1.1); text-transform: var(--h-transform, none); text-align: var(--h-align, inherit); color: var(--h-color, var(--lx-ink)); text-wrap: balance; } /* SIGNATURE: the italic brass accent word inside a display heading */ .lx-heading em, .lx-accent { font-style: italic; font-weight: inherit; color: var(--accent-color, var(--lx-brass)); } .lx-text { font-family: var(--b-family, var(--lx-font-body)); font-size: var(--b-size-m, var(--b-size-d, 15px)); font-weight: var(--b-weight, 400); font-style: var(--b-style, normal); letter-spacing: var(--b-ls, 0em); line-height: var(--b-lh, 1.8); text-transform: var(--b-transform, none); text-align: var(--b-align, inherit); color: var(--b-color, var(--lx-stone)); } .lx-text p + p { margin-top: 1.1em; } @media (min-width: 750px) { .lx-eyebrow { font-size: var(--e-size-t, var(--e-size-d, 11px)); } .lx-heading { font-size: var(--h-size-t, var(--h-size-d, 48px)); } .lx-text { font-size: var(--b-size-t, var(--b-size-d, 16px)); } } @media (min-width: 1200px) { .lx-eyebrow { font-size: var(--e-size-d, 11px); } .lx-heading { font-size: var(--h-size-d, 64px); } .lx-text { font-size: var(--b-size-d, 16px); } } /* Brass hairline above an eyebrow — from the story section of the brief */ .lx-rule { display: block; width: 44px; height: 1px; background: var(--rule-color, var(--lx-brass)); margin-bottom: 24px; } .lx-rule--center { margin-inline: auto; } .lx-header-block { max-width: var(--head-max, 720px); } .lx-header-block[data-align='center'] { margin-inline: auto; text-align: center; } .lx-header-block[data-align='center'] .lx-rule { margin-inline: auto; } .lx-header-block[data-align='right'] { margin-inline-start: auto; text-align: right; } .lx-header-block[data-align='right'] .lx-rule { margin-inline-start: auto; } .lx-header-block .lx-text { margin-top: 22px; } /* -------------------------------------------------------------------------- 5. BUTTONS -------------------------------------------------------------------------- */ .lx-btn { --btn-bg: var(--lx-ink); --btn-fg: #fff; --btn-bd: var(--lx-ink); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--btn-py, 17px) var(--btn-px, 36px); font-family: var(--btn-family, var(--lx-font-body)); font-size: var(--btn-size, 11px); font-weight: var(--btn-weight, 600); letter-spacing: var(--btn-ls, var(--lx-track-ui)); text-transform: var(--btn-transform, uppercase); line-height: 1; color: var(--btn-fg); background: transparent; border: 1px solid var(--btn-bd); border-radius: var(--btn-radius, 0px); cursor: pointer; overflow: hidden; transition: color 0.45s var(--lx-ease), border-color 0.45s var(--lx-ease); -webkit-tap-highlight-color: transparent; } /* Wipe-fill hover: the fill slides in from the bottom, no colour flash */ .lx-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); transform: translateY(0); transition: transform 0.55s var(--lx-ease); } .lx-btn > * { position: relative; z-index: 1; } .lx-btn:hover::before { transform: translateY(-101%); } .lx-btn:hover { color: var(--btn-bg-hover-fg, var(--lx-ink)); border-color: var(--lx-ink); } .lx-btn--outline { --btn-bg: transparent; --btn-fg: var(--lx-ink); --btn-bd: var(--lx-ink); } .lx-btn--outline::before { background: var(--lx-ink); transform: translateY(101%); } .lx-btn--outline:hover::before { transform: translateY(0); } .lx-btn--outline:hover { color: #fff; } .lx-btn--brass { --btn-bg: var(--lx-brass); --btn-bd: var(--lx-brass); } .lx-btn--brass:hover { color: var(--lx-brass); border-color: var(--lx-brass); } .lx-btn--light { --btn-bg: #fff; --btn-fg: var(--lx-ink); --btn-bd: #fff; } .lx-btn--light:hover { color: #fff; border-color: #fff; } .lx-btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: transparent; padding-inline: 0; } .lx-btn--ghost::before { display: none; } /* Underline-sweep text link — "EXPLORE COLLECTION →" */ .lx-link { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 600; letter-spacing: var(--lx-track-ui); text-transform: uppercase; color: var(--link-color, var(--lx-brass)); line-height: 1; } .lx-link span { position: relative; padding-bottom: 4px; } .lx-link span::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--lx-ease); } .lx-link:hover span::after { transform: scaleX(1); transform-origin: left; } .lx-link svg { transition: transform 0.5s var(--lx-ease); } .lx-link:hover svg { transform: translateX(5px); } .lx-btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--btn-gap, 40px); } .lx-btn-row[data-align='center'] { justify-content: center; } .lx-btn-row[data-align='right'] { justify-content: flex-end; } /* -------------------------------------------------------------------------- 6. MEDIA -------------------------------------------------------------------------- */ .lx-media { position: relative; overflow: hidden; background: var(--lx-linen); border-radius: var(--media-radius, 0px); aspect-ratio: var(--ratio, 3 / 4); } .lx-media > img, .lx-media > video, .lx-media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .lx-media--natural { aspect-ratio: auto; } .lx-media--natural > img { position: static; height: auto; } .lx-media__ph { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--lx-linen); fill: rgba(20,19,16,0.12); } /* Zoom on hover — applied by the card, opt-in per section */ .lx-zoom img { transition: transform 1.1s var(--lx-ease); will-change: transform; } .lx-zoom:hover img { transform: scale(var(--zoom, 1.06)); } /* Scrim used on category cards */ .lx-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(20,19,16,var(--scrim-strength, 0.72)) 0%, rgba(20,19,16,calc(var(--scrim-strength, 0.72) * 0.45)) 38%, rgba(20,19,16,0) 72%); transition: opacity 0.6s var(--lx-ease); } /* -------------------------------------------------------------------------- 7. GRID + CAROUSEL (no library — CSS scroll-snap) -------------------------------------------------------------------------- */ .lx-grid { display: grid; gap: var(--gap-m, var(--gap-d, 16px)); grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr)); } @media (min-width: 750px) { .lx-grid { gap: var(--gap-t, var(--gap-d, 20px)); grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); } } @media (min-width: 1200px) { .lx-grid { gap: var(--gap-d, 24px); grid-template-columns: repeat(var(--cols-d, 3), minmax(0, 1fr)); } } .lx-carousel { position: relative; } .lx-track { display: flex; gap: var(--gap-m, var(--gap-d, 16px)); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; /* keeps focus rings visible */ } .lx-track::-webkit-scrollbar { display: none; } .lx-track > * { scroll-snap-align: start; flex: 0 0 calc((100% - (var(--cols-m, 1) - 1) * var(--gap-m, var(--gap-d, 16px))) / var(--cols-m, 1)); } @media (min-width: 750px) { .lx-track { gap: var(--gap-t, var(--gap-d, 20px)); } .lx-track > * { flex-basis: calc((100% - (var(--cols-t, 2) - 1) * var(--gap-t, var(--gap-d, 20px))) / var(--cols-t, 2)); } } @media (min-width: 1200px) { .lx-track { gap: var(--gap-d, 24px); } .lx-track > * { flex-basis: calc((100% - (var(--cols-d, 3) - 1) * var(--gap-d, 24px)) / var(--cols-d, 3)); } } .lx-track[data-peek='true'] > *:last-child { margin-right: var(--lx-gutter); } .lx-carousel__nav { display: flex; align-items: center; gap: 10px; } .lx-carousel__nav[data-pos='top'] { position: absolute; top: -66px; right: 0; } .lx-carousel__nav[data-pos='bottom'] { justify-content: center; margin-top: 36px; } .lx-arrow { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--arrow-border, var(--lx-line)); background: var(--arrow-bg, transparent); color: var(--arrow-color, var(--lx-ink)); border-radius: var(--arrow-radius, 0); cursor: pointer; transition: background 0.4s var(--lx-ease), color 0.4s var(--lx-ease), border-color 0.4s var(--lx-ease), opacity 0.3s; } .lx-arrow:hover { background: var(--lx-ink); color: #fff; border-color: var(--lx-ink); } .lx-arrow[disabled] { opacity: 0.25; pointer-events: none; } .lx-progress { position: relative; height: 1px; margin-top: 32px; background: var(--lx-line); overflow: hidden; } .lx-progress__bar { position: absolute; left: 0; top: 0; height: 100%; width: 20%; background: var(--lx-ink); transition: transform 0.25s linear, width 0.25s linear; } .lx-dots { display: flex; gap: 8px; justify-content: center; margin-top: 30px; } .lx-dots button { width: 24px; height: 1px; padding: 0; border: 0; cursor: pointer; background: var(--lx-line); transition: background 0.3s; } .lx-dots button[aria-current='true'] { background: var(--lx-ink); } /* -------------------------------------------------------------------------- 8. HEADER -------------------------------------------------------------------------- */ .lx-announce { position: relative; z-index: 60; overflow: hidden; background: var(--bg-color, var(--lx-ink)); color: var(--fg-color, #fff); font-size: 11px; letter-spacing: var(--lx-track-ui); text-transform: uppercase; } .lx-announce__inner { display: flex; align-items: center; justify-content: center; min-height: 40px; gap: 14px; text-align: center; } .lx-announce__slide { display: none; padding: 11px 0; } .lx-announce__slide.is-active { display: block; animation: lx-fade-in 0.6s var(--lx-ease) both; } .lx-header { position: relative; z-index: 50; background: var(--bg-color, var(--lx-canvas)); border-bottom: 1px solid var(--header-border, var(--lx-line)); transition: background 0.45s var(--lx-ease), border-color 0.45s var(--lx-ease), transform 0.45s var(--lx-ease); } .lx-header__inner { display: grid; align-items: center; grid-template-columns: 1fr auto 1fr; min-height: var(--lx-header-h); gap: 20px; } /* Exactly three grid children — start / logo / utils. Visual order is set here, not in markup. A fourth child wraps to a second row. */ .lx-header__start { display: flex; align-items: center; gap: 8px; min-width: 0; order: 1; } .lx-header[data-layout='logo-center'] .lx-logo { order: 2; justify-self: center; } .lx-header[data-layout='logo-center'] .lx-header__utils { order: 3; } .lx-header[data-layout='logo-left'] .lx-header__inner { grid-template-columns: auto 1fr auto; } .lx-header[data-layout='logo-left'] .lx-logo { order: 1; justify-self: start; } .lx-header[data-layout='logo-left'] .lx-header__start { order: 2; justify-content: center; } .lx-header[data-layout='logo-left'] .lx-header__utils { order: 3; } .lx-header[data-layout='logo-left'] .lx-header__nav { justify-content: center; } /* Transparent-over-hero mode */ .lx-header[data-transparent='true']:not(.is-stuck):not(.is-open) { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; color: var(--transparent-fg, #fff); } .lx-header[data-transparent='true']:not(.is-stuck):not(.is-open) .lx-logo, .lx-header[data-transparent='true']:not(.is-stuck):not(.is-open) .lx-nav__link, .lx-header[data-transparent='true']:not(.is-stuck):not(.is-open) .lx-icon-btn { color: var(--transparent-fg, #fff); } .lx-header[data-transparent='true']:not(.is-stuck):not(.is-open) .lx-logo__b { color: var(--transparent-accent, var(--lx-brass-lt)); } .lx-header.is-sticky { position: sticky; top: 0; } .lx-header.is-stuck { box-shadow: 0 1px 0 rgba(20,19,16,0.06); } .lx-header.is-hidden { transform: translateY(-100%); } .lx-logo { display: inline-flex; align-items: baseline; gap: 0.34em; font-family: var(--logo-family, var(--lx-font-display)); font-size: var(--logo-size-m, var(--logo-size-d, 17px)); font-weight: var(--logo-weight, 400); letter-spacing: var(--logo-ls, var(--lx-track-logo)); text-transform: uppercase; color: var(--logo-color, var(--lx-ink)); white-space: nowrap; } @media (min-width: 1200px) { .lx-logo { font-size: var(--logo-size-d, 21px); } } .lx-logo__b { color: var(--logo-accent, var(--lx-brass)); } .lx-logo img { width: auto; height: var(--logo-img-h, 34px); } .lx-header__nav { display: none; } @media (min-width: 1200px) { .lx-header__nav { display: flex; align-items: center; justify-content: center; gap: var(--nav-gap, 38px); } } .lx-nav__link { position: relative; display: block; padding: 12px 0; font-family: var(--nav-family, var(--lx-font-body)); font-size: var(--nav-size, 11px); font-weight: var(--nav-weight, 500); letter-spacing: var(--nav-ls, var(--lx-track-ui)); text-transform: var(--nav-transform, uppercase); color: var(--nav-color, var(--lx-ink)); white-space: nowrap; transition: color 0.35s var(--lx-ease); } .lx-nav__link::after { content: ''; position: absolute; left: 0; bottom: 6px; width: 100%; height: 1px; background: var(--nav-underline, var(--lx-brass)); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--lx-ease); } .lx-nav__item:hover > .lx-nav__link::after, .lx-nav__link[aria-expanded='true']::after { transform: scaleX(1); transform-origin: left; } .lx-nav__item:hover > .lx-nav__link { color: var(--nav-color-hover, var(--lx-brass)); } .lx-nav__item { position: relative; } .lx-nav__caret { margin-left: 6px; transition: transform 0.35s var(--lx-ease); } .lx-nav__item:hover .lx-nav__caret { transform: rotate(180deg); } /* Mega menu */ .lx-mega { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 240px; background: var(--lx-canvas); border: 1px solid var(--lx-line); padding: 26px 30px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s var(--lx-ease), transform 0.4s var(--lx-ease), visibility 0.4s; z-index: 40; } .lx-nav__item:hover .lx-mega, .lx-nav__item:focus-within .lx-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); } .lx-mega--wide { left: 0; right: auto; transform: translate(0, 8px); width: min(1100px, calc(100vw - var(--lx-gutter) * 2)); display: grid; grid-template-columns: repeat(var(--mega-cols, 4), 1fr); gap: 34px; padding: 44px 48px; } .lx-nav__item:hover .lx-mega--wide, .lx-nav__item:focus-within .lx-mega--wide { transform: translate(0, 0); } .lx-mega--wide.lx-mega--anchor-center { left: 50%; transform: translate(-50%, 8px); } .lx-nav__item:hover .lx-mega--anchor-center { transform: translate(-50%, 0); } .lx-mega__title { font-size: 10px; letter-spacing: var(--lx-track-ui); text-transform: uppercase; color: var(--lx-brass); margin-bottom: 16px; display: block; } .lx-mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .lx-mega__list a { font-family: var(--lx-font-display); font-size: 15px; color: var(--lx-ink-soft); transition: color 0.3s var(--lx-ease), transform 0.4s var(--lx-ease); display: inline-block; } .lx-mega__list a:hover { color: var(--lx-brass); transform: translateX(4px); } .lx-mega__promo .lx-media { margin-bottom: 14px; } .lx-header__utils { display: flex; align-items: center; justify-content: flex-end; gap: var(--util-gap, 6px); } .lx-icon-btn { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; padding: 0; cursor: pointer; color: var(--icon-color, var(--lx-ink)); transition: color 0.3s var(--lx-ease), transform 0.3s var(--lx-ease); } .lx-icon-btn:hover { color: var(--icon-color-hover, var(--lx-brass)); transform: translateY(-1px); } .lx-icon-btn__count { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; font-size: 9px; font-weight: 600; letter-spacing: 0; background: var(--count-bg, var(--lx-brass)); color: var(--count-fg, #fff); border-radius: 999px; } /* display:grid above outranks [hidden]'s UA display:none — which is why an empty cart still showed a "0". */ .lx-icon-btn__count[hidden] { display: none; } } @media (min-width: 1200px) { .lx-burger { display: none; } } /* Drawers + overlay */ .lx-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(20,19,16,0.45); opacity: 0; visibility: hidden; transition: opacity 0.5s var(--lx-ease), visibility 0.5s; backdrop-filter: blur(2px); } .lx-overlay.is-open { opacity: 1; visibility: visible; } .lx-drawer { position: fixed; top: 0; bottom: 0; z-index: 100; width: min(420px, 88vw); background: var(--lx-canvas); display: flex; flex-direction: column; transition: transform 0.55s var(--lx-ease); overscroll-behavior: contain; } .lx-drawer--left { left: 0; transform: translateX(-102%); } .lx-drawer--right { right: 0; transform: translateX(102%); } .lx-drawer.is-open { transform: translateX(0); } .lx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--lx-gutter); border-bottom: 1px solid var(--lx-line); font-size: 11px; letter-spacing: var(--lx-track-ui); text-transform: uppercase; } .lx-drawer__body { flex: 1; overflow-y: auto; padding: 26px var(--lx-gutter) 40px; } /* Mobile nav — staggered entrance */ .lx-mnav { list-style: none; margin: 0; padding: 0; } .lx-mnav > li { border-bottom: 1px solid var(--lx-line); opacity: 0; transform: translateY(14px); } .lx-drawer.is-open .lx-mnav > li { animation: lx-rise 0.6s var(--lx-ease) forwards; animation-delay: calc(var(--i, 0) * 55ms + 120ms); } .lx-mnav a, .lx-mnav button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 0; background: none; border: 0; cursor: pointer; font-family: var(--lx-font-display); font-size: 20px; color: var(--lx-ink); text-align: left; } .lx-mnav__sub { list-style: none; margin: 0; padding: 0 0 14px 14px; display: none; } .lx-mnav__sub.is-open { display: block; } .lx-mnav__sub a { font-size: 15px; padding: 9px 0; color: var(--lx-ink-soft); font-family: var(--lx-font-body); } .lx-mnav [aria-expanded='true'] .lx-nav__caret { transform: rotate(180deg); } /* Search */ .lx-search__form { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--lx-ink); padding-bottom: 12px; } .lx-search__form input { flex: 1; border: 0; background: none; padding: 8px 0; font-family: var(--lx-font-display); font-size: 22px; color: var(--lx-ink); } .lx-search__form input:focus { outline: none; } /* -------------------------------------------------------------------------- 9. HERO -------------------------------------------------------------------------- */ .lx-hero { position: relative; } .lx-hero__grid { display: grid; } .lx-hero[data-layout='split'] .lx-hero__grid { grid-template-columns: 1fr; } @media (min-width: 990px) { .lx-hero[data-layout='split'] .lx-hero__grid { grid-template-columns: var(--split-ratio, 1fr 1fr); align-items: stretch; } /* Media is first in the DOM, so 'left' is the natural order and 'right' is the one that needs moving — this was inverted. */ .lx-hero[data-layout='split'][data-media='right'] .lx-hero__media { order: 2; } } .lx-hero__content { display: flex; flex-direction: column; justify-content: var(--v-align, center); padding: var(--content-pad-m, 64px var(--lx-gutter)) ; min-height: var(--content-min-m, auto); } .lx-hero[data-layout='split'] .lx-hero__content { background: var(--content-bg, transparent); } @media (min-width: 990px) { .lx-hero__content { padding: var(--content-pad-d, 100px 7vw); } } /* Explicit hex fallback: if the design tokens ever fail to load, the media area still paints rather than vanishing into the page background. */ .lx-hero__media { position: relative; overflow: hidden; background: var(--lx-linen, #EFEAE3); } .lx-hero__ph { position: absolute; inset: 0; background: var(--lx-linen, #EFEAE3); } /*