/* ============================================================ PRESTIGE HYPERBARIC — Design System Brand: Gold #F09530 | Deep Purple #7B1FA2 | Ice Blue #7ECFEF ============================================================ */ /* --- Typeface --- Montserrat is self-hosted (upright + italic, variable weights 100-900) and loaded via in the of every page, ahead of this file. Deliberately NOT an @import here: a nested import would register all ten @font-face rules a second time. Any new page must include that link tag - see fix_fonts.py. */ /* ======================== DESIGN TOKENS ======================== */ :root { /* Brand Colors */ --brand-gold: #F09530; --brand-gold-dark: #C87020; --brand-gold-light: #F5B060; --brand-purple: #7B1FA2; --brand-purple-dark: #4A0072; --brand-purple-mid: #A030A0; --brand-crimson: #C04070; --brand-ice: #7ECFEF; /* Surfaces — deep luxury dark theme */ --color-bg: #0C0810; --color-surface: #130E1A; --color-surface-2: #1A1224; --color-surface-3: #221830; --color-border: rgba(240, 149, 48, 0.15); --color-border-soft: rgba(255,255,255,0.06); /* Text */ --color-text: #EFE3C8; --color-text-muted: #BBA98A; --color-text-faint: #6A5F7A; /* Gradients */ --grad-gold: linear-gradient(135deg, #F09530 0%, #F5B060 50%, #C87020 100%); --grad-purple: linear-gradient(135deg, #4A0072 0%, #7B1FA2 50%, #A030A0 100%); --grad-hero: linear-gradient(160deg, #0C0810 0%, #1A0A2E 50%, #0E0515 100%); --grad-card: linear-gradient(160deg, #1A1224 0%, #221830 100%); --grad-glow-gold: radial-gradient(ellipse at center, rgba(240,149,48,0.18) 0%, transparent 70%); --grad-glow-purple: radial-gradient(ellipse at center, rgba(123,31,162,0.22) 0%, transparent 70%); /* Typography */ --font-display: 'Montserrat', 'Helvetica Neue', sans-serif; --font-body: 'Montserrat', 'Helvetica Neue', sans-serif; /* Type Scale */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Layout */ --content-narrow: 640px; --content-default: 980px; --content-wide: 1240px; /* Radius */ --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 2rem; --radius-full: 9999px; /* Transitions */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --transition: 220ms var(--ease-out); /* Shadows */ --shadow-gold: 0 0 40px rgba(240,149,48,0.2), 0 8px 32px rgba(0,0,0,0.5); --shadow-purple: 0 0 40px rgba(123,31,162,0.3), 0 8px 32px rgba(0,0,0,0.5); --shadow-card: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04) inset; } /* ======================== BASE RESET ======================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; /* --nav-h is the clearance the fixed header needs, not its exact height. It steps up in the two-row range below; anything that has to sit clear of the header must use it rather than a hardcoded pixel value. */ --nav-h: 80px; scroll-padding-top: var(--nav-h); } body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); min-height: 100dvh; line-height: 1.6; overflow-x: hidden; } img, picture, video, svg { display: block; max-width: 100%; height: auto; } ul[role='list'], ol[role='list'] { list-style: none; } input, button, textarea, select { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.15; } p, li { text-wrap: pretty; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ======================== UTILITY CLASSES ======================== */ .container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); } .container--narrow { max-width: var(--content-narrow); } .container--default { max-width: var(--content-default); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } .text-gold { color: var(--brand-gold); } .text-muted { color: var(--color-text-muted); } /* ======================== NAVIGATION ======================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-6); background: rgba(12, 8, 16, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-border-soft); transition: background var(--transition), box-shadow var(--transition); } .nav--scrolled { background: rgba(12, 8, 16, 0.97); box-shadow: 0 4px 32px rgba(0,0,0,0.5); } .nav__logo { display: flex; align-items: center; gap: var(--space-3); } .nav__logo img { height: 48px; width: auto; object-fit: contain; } .nav__logo-text { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 0.02em; } .nav__links { display: flex; align-items: center; gap: var(--space-5); list-style: none; } .nav__links a { font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; transition: color var(--transition); /* Without this, two-word items like "Opening Soon" break mid-item when the row runs short. Because .nav__links is align-items: center, one taller item shifts its own baseline and the bar reads as overlapping text. */ white-space: nowrap; } .nav__links a:hover { color: var(--brand-gold); } .nav__links a.active { color: var(--brand-gold); } /* The bar carries 8 top-level items, each of which is either a destination or a heading that opens a submenu on hover. Nothing was removed when it went from 14 items to 8 - Home moved onto the logo and the rest moved under Visit, Learn, Company and Support. The menu itself is generated from /partials/header.html by scripts/build-header.py; do not hand-edit a header inside a page. History, so this is not undone by accident. At 14 items one row of links plus the logo and the CTA block needed roughly 1700px, and the CTA block alone is 525px wide. An earlier attempt held one row by stepping the type down to 0.53rem (8.5px) and 0.58rem (9.3px), which is far under any legibility floor and did not even work - items broke internally and the bar rendered as two ragged overlapping rows from 1180 to 1600. The fix after that was a deliberate two-row header between 1180 and 1699px. Eight items fit one row at 0.72rem at every supported width, so the two-row case is gone and --nav-h stays at its base value. Retune only after document.fonts.ready settles; the self-hosted face is wider than the system sans fallback. */ /* The logo and the button cluster must never be squeezed. Flex will happily shrink them to make room, and it did: at 1180px the logo was crushed from 50px to 18px and sat on top of the first menu item. Holding them at their natural size means any shortfall shows up as a real overlap the width sweep can catch, instead of a silently mangled logo. */ .nav__logo, .nav__cta { flex-shrink: 0; } @media (min-width: 1180px) { .nav__links { flex-wrap: nowrap; gap: 1rem; } .nav__links a { letter-spacing: 0.03em; } } /* 1180-1289 is the tight band. Everything needed for one comfortable row adds up to about 1276px: 48px of edge padding, a 50px logo, 613px of menu and a 525px button cluster. Rather than drop to two rows or shrink the text below a legible size, the band recovers about 110px from things that cost nothing to lose - narrower page edges, a tighter menu gap, and the Text Us button reduced to its icon, which already carries an aria-label so it stays readable to a screen reader. */ @media (min-width: 1180px) and (max-width: 1289px) { .nav { padding-left: var(--space-4); padding-right: var(--space-4); } .nav__links { gap: 0.7rem; } .nav__cta { gap: var(--space-3); } .nav__cta-btn--text span { display: none; } .nav__cta-btn--text { padding: 8px 10px; } .nav__cta .btn--gold { padding-left: 1.1rem; padding-right: 1.1rem; } } @media (min-width: 1700px) { .nav__links { gap: 1.35rem; } } /* Submenu placement. Centring a 200px submenu on its heading pushes it off the screen at both ends of the bar, so each one is pinned to an edge of its own heading instead: left edge normally, right edge for the last three headings where a left-pinned submenu would run past the right side of the window. */ .nav__links .nav__dropdown-menu { left: 0; right: auto; transform: none; } .nav__links > li:nth-last-child(-n+3) .nav__dropdown-menu { left: auto; right: 0; } /* Hamburger handles everything below 1180px - the display: flex half of this rule lives after the .nav__hamburger base declaration further down, since that base rule sets display: none and would otherwise win on source order. */ @media (max-width: 1179px) { .nav__links, .nav__cta { display: none; } } /* Dropdown nav */ .nav__dropdown { position: relative; } .nav__dropdown-menu { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--color-surface, #111); border: 1px solid var(--color-border-soft, rgba(255,255,255,0.1)); border-radius: 10px; padding: 8px 0; min-width: 200px; z-index: 200; list-style: none; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .nav__dropdown:hover .nav__dropdown-menu, .nav__dropdown:focus-within .nav__dropdown-menu { display: block; } .nav__dropdown-menu li { padding: 0; } .nav__dropdown-menu a { display: block; padding: 9px 20px; font-size: 0.875rem; color: var(--color-text, #fff); white-space: nowrap; text-decoration: none; } .nav__dropdown-menu a:hover { color: var(--brand-gold); background: rgba(255,255,255,0.04); } /* Arrow indicator on parent link */ .nav__dropdown > a::after { content: ' ▾'; font-size: 0.7em; opacity: 0.6; } .nav__cta { display: flex; align-items: center; gap: var(--space-4); } .nav__phone { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 500; } .nav__phone span { color: var(--brand-gold); } /* Icon-only phone button (v2) hover state */ a.nav__phone[data-nav-phone="v2"]:hover, a.nav__phone[data-nav-phone="v2"]:focus-visible { background: rgba(201,161,90,0.15); border-color: var(--brand-gold) !important; outline: none; } /* Hamburger — sized to match the 40x40 circular mobile CTA buttons beside it */ .nav__hamburger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); flex-shrink: 0; box-sizing: border-box; transition: all var(--transition, 180ms ease); } @media (max-width: 1179px) { .nav__hamburger { display: flex; } } .nav__hamburger span { display: block; width: 18px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); } /* Mobile nav */ .nav__mobile { display: none; position: fixed; top: 72px; left: 0; right: 0; bottom: 0; background: rgba(12, 8, 16, 0.98); backdrop-filter: blur(20px); z-index: 99; flex-direction: column; align-items: center; /* Do NOT use justify-content: center here. With 20 items the panel is taller than the viewport, and centring overflow pushes the first links above the scrollable area where they cannot be reached. Auto margins on the children centre the list only when it actually fits. */ justify-content: flex-start; gap: var(--space-8); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--space-8) var(--space-5); } .nav__mobile > :first-child { margin-top: auto; } .nav__mobile > :last-child { margin-bottom: auto; } .nav__mobile.open { display: flex; } .nav__mobile a { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: var(--color-text); transition: color var(--transition); } .nav__mobile a:hover { color: var(--brand-gold); } /* ======================== BUTTONS ======================== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-8); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: all var(--transition); white-space: nowrap; } .btn--gold { background: var(--grad-gold); color: #1A0A00; box-shadow: 0 4px 20px rgba(240,149,48,0.35); } .btn--gold:hover { box-shadow: 0 6px 30px rgba(240,149,48,0.55); transform: translateY(-2px); } .btn--outline { border: 1px solid rgba(240,149,48,0.5); color: var(--brand-gold); background: rgba(240,149,48,0.05); } .btn--outline:hover { border-color: var(--brand-gold); background: rgba(240,149,48,0.12); transform: translateY(-2px); } .btn--ghost { color: var(--color-text-muted); border: 1px solid var(--color-border-soft); } .btn--ghost:hover { color: var(--color-text); border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); } .btn--lg { padding: var(--space-4) var(--space-10); font-size: var(--text-base); } /* ======================== HERO SECTION ======================== */ .hero { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding-top: var(--nav-h); } .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(12,8,16,0.55) 0%, rgba(12,8,16,0.30) 30%, rgba(12,8,16,0.40) 60%, rgba(12,8,16,0.92) 100% ); } .hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: var(--space-20) var(--space-6) var(--space-12); } .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); border: 1px solid rgba(240,149,48,0.85); border-radius: var(--radius-full); background: rgba(20,12,32,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #FFD89E; text-shadow: 0 1px 2px rgba(0,0,0,0.6); box-shadow: 0 4px 16px rgba(0,0,0,0.35); } .hero__eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gold); box-shadow: 0 0 8px var(--brand-gold); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .hero__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; max-width: 14ch; } .hero__title .line-gold { display: block; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__subtitle { font-size: var(--text-lg); color: var(--color-text); max-width: 52ch; line-height: 1.6; font-weight: 300; } .hero__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; justify-content: center; } .hero__scroll { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); color: var(--color-text-faint); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; animation: bounce-arrow 2s ease-in-out infinite; } @keyframes bounce-arrow { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } .hero__scroll svg { color: var(--brand-gold); opacity: 0.7; } /* ======================== SPLIT HERO Two-panel chooser: Shop Equipment / Wellness Center Desktop: hover grows a panel. Mobile: tap expands + reveals CTA (2nd tap/CTA tap navigates). ======================== */ .split-hero { position: relative; background: var(--grad-hero); overflow: hidden; } .split-hero__eyebrow-bar { text-align: center; padding: var(--space-3) var(--space-4); background: rgba(240, 149, 48, 0.08); border-bottom: 1px solid var(--color-border); } .split-hero__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-gold-light); } .split-hero__panels { display: flex; align-items: stretch; min-height: 640px; height: 82vh; max-height: 860px; position: relative; } .split-hero__panel { position: relative; flex: 1 1 50%; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; transition: flex-basis 0.7s cubic-bezier(0.65, 0, 0.2, 1); cursor: pointer; } .split-hero__media { position: absolute; inset: 0; z-index: 0; } .split-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.06); filter: saturate(0.9) brightness(0.75); transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.7s ease; } .split-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12,8,16,0.15) 0%, rgba(12,8,16,0.35) 45%, rgba(12,8,16,0.92) 100%); transition: background 0.6s ease; } .split-hero__panel--equipment .split-hero__scrim { background: linear-gradient(180deg, rgba(12,8,16,0.1) 0%, rgba(20,10,5,0.4) 45%, rgba(15,8,2,0.94) 100%); } .split-hero__panel--wellness .split-hero__scrim { background: linear-gradient(180deg, rgba(12,8,16,0.1) 0%, rgba(20,5,25,0.4) 45%, rgba(20,5,25,0.94) 100%); } .split-hero__body { position: relative; z-index: 2; width: 100%; padding: var(--space-8) var(--space-8) var(--space-12); display: flex; flex-direction: column; gap: var(--space-3); } .split-hero__tag { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-gold-light); } .split-hero__panel--wellness .split-hero__tag { color: var(--brand-ice); } .split-hero__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: #fff; line-height: 1.05; } .split-hero__desc { max-width: 30ch; color: var(--color-text-muted); font-size: var(--text-sm); opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; max-height: 0; overflow: hidden; } .split-hero__cta { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; margin-top: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-full); background: var(--grad-gold); color: #1a0f00; font-weight: 700; font-size: var(--text-sm); box-shadow: var(--shadow-gold); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease; } .split-hero__panel--wellness .split-hero__cta { background: var(--grad-purple); color: #fff; } .split-hero__cta svg { transition: transform 0.3s ease; } .split-hero__tap-hint { position: absolute; z-index: 2; top: var(--space-5); right: var(--space-5); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--color-text); background: rgba(12, 8, 16, 0.55); border: 1px solid var(--color-border-soft); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; } /* Desktop hover state */ @media (hover: hover) and (pointer: fine) { .split-hero__panel:hover { flex-basis: 62%; } .split-hero__panel:hover .split-hero__media img { transform: scale(1); filter: saturate(1) brightness(0.9); } .split-hero__panel:hover .split-hero__desc, .split-hero__panel:hover .split-hero__cta { opacity: 1; transform: translateY(0); max-height: 120px; pointer-events: auto; } .split-hero__panel:hover .split-hero__cta svg { transform: translateX(4px); } .split-hero__panel:not(:hover) .split-hero__title { font-size: var(--text-xl); } } /* Expanded state — driven by JS on both touch and click, mirrors hover on desktop too */ .split-hero__panel.is-expanded { flex-basis: 62%; } .split-hero__panel.is-expanded .split-hero__media img { transform: scale(1); filter: saturate(1) brightness(0.9); } .split-hero__panel.is-expanded .split-hero__desc, .split-hero__panel.is-expanded .split-hero__cta { opacity: 1; transform: translateY(0); max-height: 120px; pointer-events: auto; } .split-hero__panel.is-expanded .split-hero__tap-hint { opacity: 0; } .split-hero__panels.has-expanded .split-hero__panel:not(.is-expanded) { flex-basis: 38%; } .split-hero__panels.has-expanded .split-hero__panel:not(.is-expanded) .split-hero__title { font-size: var(--text-xl); } .split-hero__divider { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; width: 0; } .split-hero__divider-badge { position: absolute; width: 44px; height: 44px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--brand-gold); color: var(--brand-gold-light); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-gold); } .split-hero__scroll { position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; animation: bounce-arrow 2s ease-in-out infinite; pointer-events: none; opacity: 1; transition: opacity 0.3s ease; } .split-hero__panels.has-expanded .split-hero__scroll, .split-hero__panels:has(.split-hero__panel:hover) .split-hero__scroll { opacity: 0; } @media (max-width: 900px) { .split-hero__panels { height: auto; min-height: 0; flex-direction: column; } .split-hero__panel { flex-basis: 260px !important; min-height: 260px; } .split-hero__panel.is-expanded { flex-basis: 420px !important; min-height: 420px; } .split-hero__body { padding: var(--space-6) var(--space-5) var(--space-6); } .split-hero__title { font-size: var(--text-xl) !important; } .split-hero__desc { max-width: 42ch; } .split-hero__divider { width: 100%; height: 0; } .split-hero__divider-badge { position: relative; margin: -22px auto; } .split-hero__scroll { display: none; } .split-hero__tap-hint { opacity: 1; animation: tap-hint-pulse 1.8s ease-in-out infinite; } .split-hero__panel.is-expanded .split-hero__tap-hint { opacity: 0; animation: none; } } @keyframes tap-hint-pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @media (max-width: 480px) { .split-hero__eyebrow { font-size: 0.7rem; } .split-hero__cta { padding: var(--space-3) var(--space-5); font-size: 0.85rem; } } /* ======================== TRUST BAR ======================== */ .trust-bar { background: var(--color-surface); border-top: 1px solid var(--color-border-soft); border-bottom: 1px solid var(--color-border-soft); padding: var(--space-5) 0; } .trust-bar__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-10); flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; } .trust-item__icon { color: var(--brand-gold); flex-shrink: 0; } .trust-bar__divider { width: 1px; height: 24px; background: var(--color-border-soft); } /* ======================== CATEGORY SECTION ======================== */ .categories { padding: clamp(var(--space-16), 8vw, var(--space-24)) 0; position: relative; } .categories::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, var(--brand-gold), transparent); opacity: 0.4; } .section__header { text-align: center; margin-bottom: var(--space-12); } .section__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-gold); margin-bottom: var(--space-4); } .section__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); margin-bottom: var(--space-4); } .section__subtitle { font-size: var(--text-base); color: var(--color-text-muted); max-width: 56ch; margin-inline: auto; line-height: 1.7; } /* Category Cards Grid */ .category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--space-6); } .category-card { position: relative; border-radius: var(--radius-xl); overflow: hidden; min-height: 540px; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; text-decoration: none; border: 1px solid var(--color-border-soft); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); group: true; } .category-card:hover { transform: translateY(-6px); border-color: rgba(240,149,48,0.25); } .category-card--wellness:hover { box-shadow: var(--shadow-purple); } .category-card--equipment:hover { box-shadow: var(--shadow-gold); } .category-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 600ms var(--ease-out); } .category-card:hover .category-card__img { transform: scale(1.04); } .category-card__overlay { position: absolute; inset: 0; transition: opacity var(--transition); } .category-card--wellness .category-card__overlay { background: linear-gradient( 180deg, rgba(12,8,16,0.55) 0%, rgba(12,8,16,0.7) 35%, rgba(12,8,16,0.92) 100% ); } .category-card--equipment .category-card__overlay { background: linear-gradient( 180deg, rgba(12,8,16,0.55) 0%, rgba(12,8,16,0.7) 35%, rgba(12,8,16,0.92) 100% ); } .category-card__body { position: relative; z-index: 2; padding: var(--space-10) var(--space-8); } .category-card__number { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; color: rgba(240,149,48,0.12); line-height: 1; margin-bottom: var(--space-3); letter-spacing: -0.02em; } .category-card__tag { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-4); } .category-card--wellness .category-card__tag { background: rgba(20,12,32,0.92); color: #E9C9F7; border: 1px solid rgba(212,160,240,0.85); font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.6); box-shadow: 0 4px 16px rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .category-card--equipment .category-card__tag { background: rgba(20,12,32,0.92); color: #FFD89E; border: 1px solid rgba(240,149,48,0.85); font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.6); box-shadow: 0 4px 16px rgba(0,0,0,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .category-card__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); line-height: 1.1; margin-bottom: var(--space-3); } .category-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--space-6); max-width: 38ch; } .category-card__services { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .service-pill { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; background: rgba(20,12,32,0.85); color: #F5EFE0; border: 1px solid rgba(255,255,255,0.35); text-shadow: 0 1px 2px rgba(0,0,0,0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .category-card__arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; transition: gap var(--transition), color var(--transition); } .category-card--wellness .category-card__arrow { color: #D4A0F0; } .category-card--equipment .category-card__arrow { color: var(--brand-gold); } .category-card:hover .category-card__arrow { gap: var(--space-4); } /* ======================== WHY PRESTIGE SECTION ======================== */ .why { padding: clamp(var(--space-16), 8vw, var(--space-24)) 0; background: var(--color-surface); position: relative; overflow: hidden; } .why::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: var(--grad-glow-purple); pointer-events: none; } .why::after { content: ''; position: absolute; bottom: -200px; left: -200px; width: 600px; height: 600px; background: var(--grad-glow-gold); pointer-events: none; } .why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .why__content { } .why__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: 1.15; margin-bottom: var(--space-6); } .why__title em { font-style: italic; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .why__body { color: var(--color-text-muted); line-height: 1.75; margin-bottom: var(--space-6); } .why__points { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); } .why__point { display: flex; gap: var(--space-4); align-items: flex-start; } .why__point-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md); background: rgba(240,149,48,0.1); border: 1px solid rgba(240,149,48,0.2); display: flex; align-items: center; justify-content: center; color: var(--brand-gold); font-size: 16px; margin-top: 2px; } .why__point-text strong { display: block; font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); font-size: var(--text-sm); } .why__point-text p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; } /* Stats card grid */ .why__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .stat-card { background: var(--color-surface-2); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-6); position: relative; overflow: hidden; transition: border-color var(--transition), transform var(--transition); } .stat-card:hover { border-color: rgba(240,149,48,0.25); transform: translateY(-3px); } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad-gold); opacity: 0.6; } .stat-card__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: var(--space-2); } .stat-card__label { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.4; font-weight: 400; } /* ======================== CTA BANNER ======================== */ .cta-banner { padding: clamp(var(--space-16), 8vw, var(--space-24)) 0; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(123,31,162,0.15) 0%, transparent 60%); } .cta-banner__inner { position: relative; z-index: 1; background: var(--color-surface); border: 1px solid rgba(240,149,48,0.2); border-radius: var(--radius-xl); padding: var(--space-16) var(--space-12); max-width: 800px; margin-inline: auto; } .cta-banner__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--space-4); } .cta-banner__title span { background: var(--grad-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cta-banner__subtitle { color: var(--color-text-muted); margin-bottom: var(--space-8); font-size: var(--text-base); max-width: 48ch; margin-inline: auto; margin-bottom: var(--space-8); } .cta-banner__actions { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } .cta-banner__contact { margin-top: var(--space-6); font-size: var(--text-sm); color: var(--color-text-faint); } .cta-banner__contact a { color: var(--brand-gold); font-weight: 600; } /* ======================== FOOTER ======================== */ /* ── Old footer (kept for backward compat) ── */ .footer { display: none; } /* ── Site footer (redesigned) ── */ .site-footer { background: var(--color-surface, #130E1A); border-top: 1px solid rgba(240,149,48,0.15); padding: 4rem 2rem 1.75rem; } .site-footer__inner { display: grid; grid-template-columns: minmax(240px, 1fr) 4fr; gap: 3.5rem; max-width: 1280px; margin: 0 auto 2.5rem; align-items: start; } .site-footer__brand { min-width: 0; } .site-footer__brandmark { font-family: var(--font, 'Montserrat', sans-serif); font-weight: 800; letter-spacing: 0.14em; font-size: 1.05rem; color: #F5B060; line-height: 1.1; } .site-footer__brandmark span { color: #BBA98A; font-weight: 600; } .site-footer__tagline { margin: 0.9rem 0 1.4rem; font-size: 0.82rem; color: #BBA98A; line-height: 1.55; max-width: 22ch; } .site-footer__contact { display: flex; flex-direction: column; gap: 0.35rem; } .site-footer__contact a { color: #DCC9A6; text-decoration: none; font-size: 0.85rem; line-height: 1.5; transition: color 0.2s ease; } .site-footer__contact a:hover { color: #F5B060; } .site-footer__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem 1.75rem; align-items: start; } .site-footer__col { min-width: 0; } .site-footer__col h4 { font-family: var(--font, 'Montserrat', sans-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #F09530; margin: 0 0 0.9rem; } .site-footer__col a { display: block; font-size: 0.82rem; color: #BBA98A; text-decoration: none; line-height: 1.35; padding: 0.24rem 0; transition: color 0.2s ease; } .site-footer__col a:hover { color: #F5B060; } .site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.06); max-width: 1280px; margin: 0 auto; padding-top: 1.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; } .site-footer__bottom p { font-size: 0.72rem; color: #6A5F7A; line-height: 1.55; margin: 0; max-width: 780px; } .site-footer__copy { color: #8A7D9C; } @media (max-width: 1080px) { .site-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; } .site-footer__brand { max-width: 480px; } .site-footer__tagline { max-width: none; } } @media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } } @media (max-width: 620px) { .site-footer { padding: 3rem 1.25rem 1.5rem; } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 400px) { .site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; } } /* ======================== WELLNESS PAGE ======================== */ .page-hero { position: relative; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; padding-top: var(--nav-h); } .page-hero__bg { position: absolute; inset: 0; } .page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,8,16,0.4) 0%, rgba(12,8,16,0.92) 100%); } .page-hero__content { position: relative; z-index: 2; padding: var(--space-16) var(--space-6) var(--space-12); width: 100%; max-width: var(--content-wide); margin-inline: auto; } .page-hero__back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); transition: color var(--transition); } .page-hero__back:hover { color: var(--brand-gold); } .page-hero__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; margin-bottom: var(--space-4); } .page-hero__subtitle { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 48ch; font-weight: 300; } /* Services Grid */ .services-section { padding: clamp(var(--space-12), 6vw, var(--space-20)) 0; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-5); } .service-card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .service-card:hover { transform: translateY(-4px); border-color: rgba(240,149,48,0.25); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } .service-card__img { width: 100%; height: 200px; object-fit: cover; } .service-card__body { padding: var(--space-6); } .service-card__icon { font-size: 28px; margin-bottom: var(--space-3); } .service-card__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-2); } .service-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; margin-bottom: var(--space-4); } .service-card__price { font-size: var(--text-sm); font-weight: 600; color: var(--brand-gold); } /* Booking Section */ .booking-section { padding: clamp(var(--space-12), 6vw, var(--space-20)) 0; background: var(--color-surface); } .booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: start; } .booking-info__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--space-6); } .booking-detail { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-5); } .booking-detail__icon { flex-shrink: 0; width: 40px; height: 40px; background: rgba(240,149,48,0.1); border: 1px solid rgba(240,149,48,0.2); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--brand-gold); font-size: 18px; } .booking-detail__text strong { display: block; font-weight: 600; margin-bottom: var(--space-1); font-size: var(--text-sm); } .booking-detail__text p { font-size: var(--text-sm); color: var(--color-text-muted); } .booking-form { background: var(--color-surface-2); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); padding: var(--space-8); } .booking-form__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--space-6); } .form-group { margin-bottom: var(--space-4); } .form-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); margin-bottom: var(--space-2); } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--space-3) var(--space-4); background: var(--color-surface-3); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--text-sm); font-family: var(--font-body); transition: border-color var(--transition), box-shadow var(--transition); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: rgba(240,149,48,0.5); box-shadow: 0 0 0 3px rgba(240,149,48,0.1); } .form-select option { background: var(--color-surface-3); } .form-textarea { resize: vertical; min-height: 100px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } /* ======================== EQUIPMENT / PRODUCTS PAGE ======================== */ .products-section { padding: clamp(var(--space-12), 6vw, var(--space-20)) 0; } .products-filter { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-8); } .filter-btn { padding: var(--space-2) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--color-border-soft); color: var(--color-text-muted); background: transparent; cursor: pointer; transition: all var(--transition); } .filter-btn:hover, .filter-btn.active { border-color: var(--brand-gold); color: var(--brand-gold); background: rgba(240,149,48,0.08); } .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .product-card { background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .product-card:hover { transform: translateY(-4px); border-color: rgba(240,149,48,0.2); box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(240,149,48,0.1); } .product-card__img-wrap { position: relative; aspect-ratio: 4 / 3; background: #0c0810; overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-card__img-wrap > a { display: block; width: 100%; height: 100%; cursor: pointer; } .product-card__img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms var(--ease-out); } .product-card:hover .product-card__img { transform: scale(1.05); } .product-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .badge--new { background: rgba(123,31,162,0.7); color: #E0B0FF; border: 1px solid rgba(160,80,160,0.5); } .badge--sale { background: rgba(192,64,112,0.7); color: #FFB8D0; border: 1px solid rgba(192,64,112,0.5); } .badge--popular { background: rgba(240,149,48,0.7); color: #1A0A00; border: 1px solid rgba(240,149,48,0.5); } .badge--service { background: rgba(126,207,239,0.2); color: var(--brand-ice); border: 1px solid rgba(126,207,239,0.3); } /* Live stock status ribbons — injected by stock-status-widget.js. */ .stock-ribbon { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; display: inline-flex; align-items: center; max-width: calc(100% - var(--space-6)); padding: 0.32rem 0.5rem; border-radius: var(--radius-full); font-size: 0.625rem; font-weight: 800; line-height: 1.1; letter-spacing: 0.015em; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.32); } .stock-ribbon--ships-now { background: #C41E3A; border: 1px solid rgba(255,255,255,0.55); color: #fff; } .stock-ribbon--ships-now::before { content: ''; width: 3px; align-self: stretch; margin-right: 0.38rem; border-radius: var(--radius-full); background: #fff; opacity: 0.95; } .stock-ribbon--incoming { background: #F0B54A; border: 1px solid rgba(255,232,175,0.8); color: #23180A; } /* Built-to-order products: no count, no ETA. Deep purple so it reads as a different kind of statement than the red ships-now and amber arriving pills. */ .stock-ribbon--custom-order { background: #7B1FA2; border: 1px solid rgba(255,255,255,0.55); color: #fff; } .stock-ribbon--stacked { top: calc(var(--space-3) + 2.25rem); } /* Secondary "more arriving" pill shown under the main ships-now ribbon when a product has both on-hand and confirmed incoming units. */ .stock-ribbon--sub { font-size: 0.56rem; padding: 0.24rem 0.44rem; opacity: 0.96; } .stock-ribbon--sub-offset { top: calc(var(--space-3) + 2.1rem); } .stock-ribbon--sub-stacked { top: calc(var(--space-3) + 2.1rem + 2.1rem); } /* A product can have more than one incoming batch (e.g. two separate shipments with different ETAs). Extra sub-ribbons stack further down. */ .stock-ribbon--sub-offset.stock-ribbon--sub-extra-1 { top: calc(var(--space-3) + 2.1rem + 1.9rem); } .stock-ribbon--sub-stacked.stock-ribbon--sub-extra-1 { top: calc(var(--space-3) + 2.1rem + 2.1rem + 1.9rem); } @media (max-width: 640px) { .stock-ribbon { top: var(--space-2); right: var(--space-2); padding: 0.28rem 0.42rem; font-size: 0.585rem; } .stock-ribbon--stacked { top: calc(var(--space-2) + 2.25rem); } .stock-ribbon--sub-offset { top: calc(var(--space-2) + 1.95rem); } .stock-ribbon--sub-stacked { top: calc(var(--space-2) + 1.95rem + 1.95rem); } .stock-ribbon--sub-offset.stock-ribbon--sub-extra-1 { top: calc(var(--space-2) + 1.95rem + 1.75rem); } .stock-ribbon--sub-stacked.stock-ribbon--sub-extra-1 { top: calc(var(--space-2) + 1.95rem + 1.95rem + 1.75rem); } .stock-ribbon--sub { font-size: 0.53rem; padding: 0.2rem 0.38rem; } .stock-ribbon--ships-now::before { margin-right: 0.3rem; } } /* Inline stock ribbon variant for product detail pages (non-absolute, sits inline near the title/price block). Injected by stock-status-widget.js into [data-stock-sku-inline] containers. */ .stock-ribbon--inline { position: static; display: inline-flex; margin-bottom: var(--space-3); box-shadow: none; } .stock-ribbon--inline.stock-ribbon--sub { margin-left: var(--space-2); margin-bottom: var(--space-3); } .pd-stock-slot { display: flex; flex-wrap: wrap; align-items: center; } .in-stock-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); } .in-stock-section, .in-stock-browse { padding: clamp(var(--space-12), 7vw, var(--space-20)) 0; } .in-stock-browse { background: var(--color-surface); border-top: 1px solid var(--color-border-soft); } .in-stock-browse__grid { grid-template-columns: repeat(3, 1fr); } .in-stock-empty { max-width: 60ch; margin: var(--space-8) auto 0; color: var(--color-text-muted); line-height: 1.7; text-align: center; } @media (max-width: 768px) { .in-stock-hero__actions { gap: var(--space-3); } .in-stock-browse__grid { grid-template-columns: 1fr; } } .product-card__body { padding: var(--space-5) var(--space-5) var(--space-6); display: flex; flex-direction: column; flex: 1; gap: var(--space-2); } .product-card__category { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-gold); } .product-card__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-text); line-height: 1.2; } .product-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; flex: 1; } .product-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--color-border-soft); margin-top: auto; } .product-card__price { font-size: var(--text-xl); font-weight: 800; color: var(--color-text); letter-spacing: -0.01em; line-height: 1.1; } .product-card__price-old { font-size: var(--text-xs); color: var(--color-text-faint); text-decoration: line-through; margin-right: var(--space-2); } .product-card__price-sale { color: var(--brand-gold); } .product-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--brand-gold); color: #0a0a0a; background: var(--brand-gold); transition: all var(--transition); cursor: pointer; text-decoration: none; white-space: nowrap; } .product-card__cta:hover { background: #ffad4d; border-color: #ffad4d; color: #0a0a0a; transform: translateY(-1px); } @media (max-width: 480px) { .product-card__footer { flex-direction: column; align-items: stretch; gap: var(--space-3); } .product-card__cta { width: 100%; padding: var(--space-3) var(--space-4); } .product-card__price { text-align: left; } } /* Service banner on equipment page */ .service-banner { margin-block: var(--space-16); background: var(--color-surface); border: 1px solid rgba(126,207,239,0.15); border-radius: var(--radius-xl); padding: var(--space-12) var(--space-10); display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; position: relative; overflow: hidden; } .service-banner::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(ellipse, rgba(126,207,239,0.08) 0%, transparent 70%); pointer-events: none; } .service-banner__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; margin-bottom: var(--space-3); } .service-banner__title span { color: var(--brand-ice); } .service-banner__body { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 52ch; line-height: 1.7; } .service-banner__actions { display: flex; flex-direction: column; gap: var(--space-3); flex-shrink: 0; } .btn--ice { background: rgba(126,207,239,0.12); border: 1px solid rgba(126,207,239,0.35); color: var(--brand-ice); transition: all var(--transition); } .btn--ice:hover { background: rgba(126,207,239,0.22); border-color: var(--brand-ice); transform: translateY(-2px); } /* ======================== RESPONSIVE ======================== */ @media (max-width: 1024px) { .category-grid { grid-template-columns: 1fr; max-width: 600px; } .category-card { min-height: 460px; } .why__grid { grid-template-columns: 1fr; } .why__stats { margin-top: var(--space-8); } /* old footer rules removed */ .products-grid { grid-template-columns: repeat(2, 1fr); } .booking-grid { grid-template-columns: 1fr; } .service-banner { grid-template-columns: 1fr; } } @media (max-width: 768px) { .nav__links, .nav__cta { display: none; } .nav__hamburger { display: flex; } .nav { padding: var(--space-4) var(--space-5); } .trust-bar__inner { gap: var(--space-5); } .trust-bar__divider { display: none; } .category-grid { padding-inline: var(--space-4); gap: var(--space-4); } .category-card { min-height: 400px; } .category-card__body { padding: var(--space-6) var(--space-5); } .why__stats { grid-template-columns: 1fr 1fr; } .products-grid { grid-template-columns: 1fr; } /* old footer rules removed */ .cta-banner__inner { padding: var(--space-10) var(--space-6); } .services-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } } /* ======================== PRODUCT DOCUMENTS (Manuals / Brochures) ======================== */ .product-card__docs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft); } .product-card__doc { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; color: var(--brand-gold); text-decoration: none; padding: 0.4rem 0.7rem; border: 1px solid rgba(240, 149, 48, 0.3); border-radius: 6px; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .product-card__doc:hover { background: rgba(240, 149, 48, 0.08); border-color: var(--brand-gold); color: var(--brand-gold-light); } .product-card__doc--muted { color: var(--color-text-muted); border-color: var(--color-border-soft); cursor: default; pointer-events: none; opacity: 0.75; } .product-card__sku { display: inline-block; font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-2); font-weight: 500; } /* ======================== PRODUCT DETAIL PAGES ======================== */ .pd-breadcrumbs { font-size: 0.78rem; color: var(--color-text-muted); letter-spacing: 0.03em; margin: var(--space-6) 0 var(--space-4); } .pd-breadcrumbs a { color: var(--color-text-muted); text-decoration: none; } .pd-breadcrumbs a:hover { color: var(--brand-gold); } .pd-breadcrumbs__sep { margin: 0 var(--space-2); opacity: 0.4; } .pd-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-10); align-items: start; margin: var(--space-6) 0 var(--space-12); } @media (max-width: 900px) { .pd-layout { grid-template-columns: 1fr; gap: var(--space-6); } } .pd-gallery { display: grid; gap: var(--space-3); } .pd-gallery__main { width: 100%; aspect-ratio: 4 / 3; background: var(--color-surface-2); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); overflow: hidden; } .pd-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; } .pd-gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } .pd-gallery__thumb { aspect-ratio: 1 / 1; background: var(--color-surface-2); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; } .pd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pd-gallery__thumb.is-active { border-color: var(--brand-gold); } /* Auto-cycle + lightbox viewer (assets/js/pd-gallery.js) */ .pd-gallery__main { position: relative; } .pd-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(10, 12, 16, 0.92); padding: var(--space-6); } .pd-lightbox.is-open { display: flex; } .pd-lightbox__img { max-width: min(92vw, 1400px); max-height: 86vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .pd-lightbox__close { position: absolute; top: var(--space-4); right: var(--space-5); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .pd-lightbox__close:hover { background: rgba(255,255,255,0.18); } .pd-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; } .pd-lightbox__nav:hover { background: rgba(255,255,255,0.18); } .pd-lightbox__nav--prev { left: var(--space-5); } .pd-lightbox__nav--next { right: var(--space-5); } .pd-lightbox__caption { position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.8); font-size: 0.85rem; letter-spacing: 0.04em; } @media (max-width: 640px) { .pd-lightbox__nav { width: 40px; height: 40px; } .pd-lightbox__close { width: 38px; height: 38px; top: var(--space-3); right: var(--space-3); } } .pd-summary__eyebrow { display: inline-block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-gold); font-weight: 700; margin-bottom: var(--space-3); } .pd-summary__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; font-weight: 800; margin-bottom: var(--space-3); color: var(--color-text); } .pd-summary__sub { color: var(--color-text-muted); font-size: 0.95rem; margin-bottom: var(--space-4); } .pd-summary__price { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--brand-gold); margin: var(--space-4) 0; } .pd-summary__price--small { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 500; margin-left: var(--space-2); } .pd-summary__lede { color: var(--color-text); font-size: 0.96rem; line-height: 1.65; margin-bottom: var(--space-5); } .pd-summary__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); } .pd-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); } .pd-quick__item { background: var(--color-surface-2); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } .pd-quick__label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.2rem; } .pd-quick__val { color: var(--color-text); font-weight: 700; font-size: 0.92rem; } .pd-section { margin-bottom: var(--space-12); scroll-margin-top: var(--nav-h); } .pd-section__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-soft); color: var(--color-text); } .pd-specs { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .pd-specs th, .pd-specs td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-soft); vertical-align: top; } .pd-specs th { width: 36%; color: var(--color-text-muted); font-weight: 600; } .pd-specs td { color: var(--color-text); } .pd-list { padding: 0; list-style: none; display: grid; gap: var(--space-2); } .pd-list li { position: relative; padding-left: 1.4em; color: var(--color-text); font-size: 0.94rem; line-height: 1.55; } .pd-list li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-gold); font-weight: 800; } .pd-list--two-col { grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-6); } @media (max-width: 700px) { .pd-list--two-col { grid-template-columns: 1fr; } } .pd-note { background: rgba(240,149,48,0.06); border: 1px solid rgba(240,149,48,0.25); border-left: 3px solid var(--brand-gold); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); color: var(--color-text); font-size: 0.88rem; line-height: 1.6; } .pd-note strong { color: var(--brand-gold-light); } /* ---- Product FAQ accordion (product detail "Common questions") ---- */ .pd-faq { display: grid; gap: var(--space-3); } .pd-faq__item { background: var(--color-surface-2, rgba(255,255,255,0.02)); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); overflow: hidden; } .pd-faq__item > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); font-weight: 700; font-size: 0.95rem; line-height: 1.5; color: var(--color-text); transition: color 0.18s ease, background 0.18s ease; } .pd-faq__item > summary::-webkit-details-marker { display: none; } .pd-faq__item > summary::marker { content: ""; } .pd-faq__item > summary::before { content: "+"; flex: 0 0 auto; width: 1.1em; color: var(--brand-gold); font-weight: 800; line-height: 1.5; transition: transform 0.18s ease; } .pd-faq__item[open] > summary::before { content: "\2212"; } .pd-faq__item > summary:hover { color: var(--brand-gold-light); background: rgba(240,149,48,0.05); } .pd-faq__item > summary:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: -2px; } .pd-faq__item > p { margin: 0; padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 1.1em + var(--space-3)); color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.65; } @media (max-width: 700px) { .pd-faq__item > summary { padding: var(--space-3) var(--space-4); } .pd-faq__item > p { padding: 0 var(--space-4) var(--space-4) calc(var(--space-4) + 1.1em + var(--space-3)); } } .pd-docs { display: flex; flex-wrap: wrap; gap: var(--space-3); } .pd-doc { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-surface-2); border: 1px solid var(--color-border-soft); color: var(--color-text); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 0.88rem; text-decoration: none; transition: var(--transition); } .pd-doc:hover { border-color: var(--brand-gold); color: var(--brand-gold-light); background: rgba(240,149,48,0.08); } .pd-doc--muted { opacity: 0.6; pointer-events: none; } .pd-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); } .pd-addon { position: relative; background: var(--color-surface-2); border: 1px solid rgba(240,149,48,0.45); border-radius: var(--radius-md); padding: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(240,149,48,0.16) inset, 0 12px 32px rgba(0,0,0,0.35); isolation: isolate; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .pd-addon::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(240,149,48,0.85), rgba(240,149,48,0.15) 40%, rgba(240,149,48,0.55) 70%, rgba(240,149,48,0.9)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } .pd-addon:hover { border-color: rgba(240,149,48,0.7); box-shadow: 0 0 0 1px rgba(240,149,48,0.32) inset, 0 18px 44px rgba(0,0,0,0.5), 0 0 28px rgba(240,149,48,0.14); transform: translateY(-2px); } .pd-addon__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); } .pd-addon__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .pd-addon__media--contain { background: radial-gradient(ellipse at center, rgba(240,149,48,0.08) 0%, rgba(7,7,9,0) 70%), linear-gradient(180deg, #0f0f12 0%, #0a0a0c 100%); } .pd-addon__media--contain img { object-fit: contain; padding: var(--space-3); } .pd-addon__media--contain::after { display: none; } .pd-addon:hover .pd-addon__media img { transform: scale(1.04); } .pd-addon__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,9,0) 55%, rgba(7,7,9,0.55) 100%); pointer-events: none; } .pd-addon__content { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; } .pd-addon__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-text); } .pd-addon__desc { color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.55; } .pd-addon__price { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--brand-gold); letter-spacing: 0.01em; margin-top: var(--space-1); } .pd-addon__price small { display: block; font-family: inherit; font-weight: 500; font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; } .pd-addon__cta { align-self: flex-start; margin-top: auto; font-size: 0.82rem; font-weight: 700; color: var(--brand-gold); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; } .pd-addon__cta:hover { color: var(--brand-gold-light); } .pd-cta-block { background: var(--grad-card); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); padding: var(--space-8); text-align: center; } .pd-cta-block h3 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); margin-bottom: var(--space-3); } .pd-cta-block p { color: var(--color-text-muted); max-width: 56ch; margin: 0 auto var(--space-5); font-size: 0.95rem; } .pd-cta-block__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* ======================== EQUIPMENT PAGE GROUPS ======================== */ .eq-group { margin-bottom: var(--space-12); } .eq-group__head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-soft); } .eq-group__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--color-text); } .eq-group__sub { font-size: 0.88rem; color: var(--color-text-muted); max-width: 60ch; } /* Compact summary card (no docs panel) */ .product-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); } .product-card__chip { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; background: rgba(126,207,239,0.08); color: var(--brand-ice); border: 1px solid rgba(126,207,239,0.2); padding: 0.2rem 0.55rem; border-radius: var(--radius-full); } /* ======================== EQUIPMENT CATEGORY NAV + SAUNA CATALOG ======================== */ .equipment-categories { padding: var(--space-8) 0 var(--space-6); background: radial-gradient(circle at 20% 0%, rgba(240,149,48,0.12), transparent 28%), linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0)); border-bottom: 1px solid var(--color-border-soft); } .equipment-categories--sauna { padding-top: var(--space-10); } .equipment-categories__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); } .equipment-categories__head h2 { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.15; color: var(--color-text); margin: 0; } .equipment-categories__head p { color: var(--color-text-muted); max-width: 46ch; margin: 0; line-height: 1.55; } .equipment-category-grid, .sauna-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } .equipment-category-card, .sauna-quick-card { text-decoration: none; display: grid; gap: var(--space-2); background: rgba(255,255,255,0.035); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-5); min-height: 150px; transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition); } .equipment-category-card:hover, .sauna-quick-card:hover { transform: translateY(-3px); border-color: rgba(240,149,48,0.4); background: rgba(240,149,48,0.07); box-shadow: 0 14px 36px rgba(0,0,0,0.28); } .equipment-category-card span, .sauna-quick-card span { color: var(--brand-gold); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .equipment-category-card strong, .sauna-quick-card strong { color: var(--color-text); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; } .equipment-category-card small, .sauna-quick-card small { color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.45; } .equipment-category-card--gold { border-color: rgba(240,149,48,0.35); background: linear-gradient(135deg, rgba(240,149,48,0.14), rgba(123,31,162,0.08)); } /* Premium gold-framed image hero category cards */ .equipment-category-grid--hero, .sauna-quick-grid--hero { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, 1fr); } .equipment-category-card--hero, .sauna-quick-card--hero { position: relative; display: flex; flex-direction: column; text-decoration: none; padding: 0; min-height: 0; overflow: hidden; border-radius: var(--radius-xl); background: linear-gradient(180deg, rgba(15,15,18,0.92), rgba(7,7,9,0.96)); border: 1px solid rgba(240,149,48,0.45); box-shadow: 0 0 0 1px rgba(240,149,48,0.18) inset, 0 18px 50px rgba(0,0,0,0.45); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .equipment-category-card--hero::before, .sauna-quick-card--hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(240,149,48,0.85), rgba(240,149,48,0.15) 40%, rgba(240,149,48,0.55) 70%, rgba(240,149,48,0.9)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } .equipment-category-card--hero:hover, .sauna-quick-card--hero:hover { transform: translateY(-4px); border-color: rgba(240,149,48,0.7); box-shadow: 0 0 0 1px rgba(240,149,48,0.32) inset, 0 26px 70px rgba(0,0,0,0.55), 0 0 36px rgba(240,149,48,0.18); } .equipment-category-card__media, .sauna-quick-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); } .equipment-category-card__media--contain { background: radial-gradient(ellipse at center, rgba(240,149,48,0.08) 0%, rgba(7,7,9,0) 70%), linear-gradient(180deg, #0f0f12 0%, #0a0a0c 100%); } .equipment-category-card__media--contain img { object-fit: contain !important; padding: var(--space-3); } .equipment-category-card__media--contain::after { display: none; } .equipment-category-card__media img, .sauna-quick-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .equipment-category-card--hero:hover .equipment-category-card__media img, .sauna-quick-card--hero:hover .sauna-quick-card__media img { transform: scale(1.05); } .equipment-category-card__media::after, .sauna-quick-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,9,0) 35%, rgba(7,7,9,0.55) 75%, rgba(7,7,9,0.85) 100%); pointer-events: none; } .equipment-category-card__body, .sauna-quick-card__body { position: relative; padding: var(--space-5); display: grid; gap: var(--space-2); z-index: 1; } .equipment-category-card--hero span, .sauna-quick-card--hero span { color: var(--brand-gold); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .equipment-category-card--hero strong, .sauna-quick-card--hero strong { color: var(--color-text); font-family: var(--font-display); font-size: 1.18rem; line-height: 1.2; font-weight: 800; } .equipment-category-card--hero small, .sauna-quick-card--hero small { color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.5; } .sauna-hero { padding: calc(var(--space-20) + 72px) 0 var(--space-14); background: radial-gradient(circle at 82% 18%, rgba(240,149,48,0.18), transparent 30%), radial-gradient(circle at 14% 22%, rgba(126,207,239,0.09), transparent 26%), var(--color-bg); } .sauna-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.75fr); gap: var(--space-10); align-items: center; } .sauna-hero__copy .page-hero__title { max-width: 11ch; } .sauna-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); } .sauna-hero__visual { position: relative; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(240,149,48,0.22); min-height: 420px; background: var(--color-surface); box-shadow: 0 28px 90px rgba(0,0,0,0.42); } .sauna-hero__visual img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; } .sauna-hero__stat { position: absolute; left: var(--space-5); bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); max-width: 280px; background: rgba(7,7,9,0.78); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: var(--space-4); backdrop-filter: blur(14px); } .sauna-hero__stat strong { font-family: var(--font-display); font-size: var(--text-xl); color: var(--brand-gold); line-height: 1; } .sauna-hero__stat span { color: var(--color-text); font-size: 0.86rem; line-height: 1.35; } .sauna-toolbar { display: flex; align-items: end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-5); } .sauna-toolbar__sub { color: var(--color-text-muted); max-width: 58ch; line-height: 1.65; margin-top: var(--space-2); } .sauna-search { display: grid; gap: var(--space-2); min-width: min(100%, 360px); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sauna-search input { width: 100%; border: 1px solid var(--color-border-soft); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); padding: 0.95rem 1.2rem; font: inherit; font-size: 0.9rem; letter-spacing: 0; text-transform: none; } .sauna-search input:focus { outline: 2px solid rgba(240,149,48,0.35); border-color: var(--brand-gold); } .sauna-filter .filter-btn span { opacity: 0.7; margin-left: 0.35rem; } .sauna-results { color: var(--color-text-muted); margin: calc(-1 * var(--space-4)) 0 var(--space-5); font-size: 0.9rem; } .sauna-grid { align-items: stretch; } .sauna-card__img-wrap .product-card__img, .sauna-card__img { object-fit: cover; } .sauna-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0; } .sauna-card__meta span { display: inline-flex; align-items: center; border: 1px solid var(--color-border-soft); border-radius: var(--radius-full); padding: 0.28rem 0.62rem; color: var(--color-text-muted); font-size: 0.72rem; line-height: 1.2; } .sauna-pd-layout .pd-gallery__main img, .sauna-pd-layout .pd-gallery__thumb img { object-fit: cover; } /* Reusable gold-framed category hero banner. Used at the top of each in-page category section (chamber-addons groups, equipment chamber sub-categories, pricing categories, wellness services). Pairs an image with eyebrow + title + optional summary copy. */ .category-hero { position: relative; display: grid; grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1fr); gap: 0; margin-bottom: var(--space-8); border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(180deg, rgba(15,15,18,0.92), rgba(7,7,9,0.96)); border: 1px solid rgba(240,149,48,0.45); box-shadow: 0 0 0 1px rgba(240,149,48,0.18) inset, 0 18px 50px rgba(0,0,0,0.45); isolation: isolate; } .category-hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(240,149,48,0.85), rgba(240,149,48,0.15) 40%, rgba(240,149,48,0.55) 70%, rgba(240,149,48,0.9)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } .category-hero__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); } .category-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .category-hero__media--contain { background: radial-gradient(ellipse at center, rgba(240,149,48,0.08) 0%, rgba(7,7,9,0) 70%), linear-gradient(180deg, #0f0f12 0%, #0a0a0c 100%); } .category-hero__media--contain img { object-fit: contain !important; padding: var(--space-3); } .category-hero__media--contain::after { display: none; } .category-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,9,0) 60%, rgba(7,7,9,0.55) 100%); pointer-events: none; } .category-hero__body { position: relative; padding: clamp(var(--space-5), 3vw, var(--space-8)); display: grid; align-content: center; gap: var(--space-3); z-index: 1; } .category-hero__eyebrow { color: var(--brand-gold); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .category-hero__title { color: var(--color-text); font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.2; font-weight: 800; margin: 0; } .category-hero__desc { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; } /* Gold-framed treatment for service-card images (wellness page) */ .service-card--gold { border-color: rgba(240,149,48,0.45); box-shadow: 0 0 0 1px rgba(240,149,48,0.18) inset, 0 18px 50px rgba(0,0,0,0.45); } .service-card--gold .service-card__img { position: relative; } .service-card--gold:hover { border-color: rgba(240,149,48,0.7); box-shadow: 0 0 0 1px rgba(240,149,48,0.32) inset, 0 26px 70px rgba(0,0,0,0.55), 0 0 36px rgba(240,149,48,0.18); } .service-card__media { position: relative; overflow: hidden; } .service-card__media::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(135deg, rgba(240,149,48,0.55), transparent 40%, transparent 70%, rgba(240,149,48,0.45)); mix-blend-mode: screen; opacity: 0.18; } @media (max-width: 1024px) { .equipment-category-grid, .sauna-quick-grid { grid-template-columns: repeat(2, 1fr); } .equipment-category-grid--hero, .sauna-quick-grid--hero { grid-template-columns: repeat(2, 1fr); } .sauna-hero__grid { grid-template-columns: 1fr; } .sauna-hero__copy .page-hero__title { max-width: 14ch; } } @media (max-width: 768px) { .equipment-categories__head, .sauna-toolbar { align-items: stretch; flex-direction: column; } .equipment-category-grid, .sauna-quick-grid { grid-template-columns: 1fr; } .equipment-category-grid--hero, .sauna-quick-grid--hero { grid-template-columns: 1fr; } .equipment-category-card, .sauna-quick-card { min-height: auto; } .sauna-hero { padding-top: calc(var(--space-16) + 72px); } .sauna-hero__visual, .sauna-hero__visual img { min-height: 320px; } .category-hero { grid-template-columns: 1fr; } .category-hero__media { aspect-ratio: 16 / 9; } .category-hero__media::after { background: linear-gradient(180deg, rgba(7,7,9,0) 50%, rgba(7,7,9,0.6) 100%); } } /* ======================================================== MOBILE ALIGNMENT & OVERFLOW FIXES (added 2026-05-02) Surgical fixes for: warranty overflow, button overflow, trust-bar centering, hero CTA symmetry, financing layout. ======================================================== */ /* Allow trust items to wrap; remove forced single-line behavior */ .trust-bar__inner { text-align: center; } .trust-item { white-space: normal; } /* Stacked label/sub-label for "3-Year No-Fuss Warranty" badge */ .trust-item--stacked { align-items: center; } .trust-item__label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; } .trust-item__sub { display: block; font-size: 0.72em; font-weight: 400; letter-spacing: 0.02em; opacity: 0.65; margin-top: 2px; } /* Universal mobile button safety: never overflow viewport */ @media (max-width: 600px) { .btn, a.btn, button.btn { box-sizing: border-box; max-width: 100%; white-space: normal; text-align: center; line-height: 1.25; } /* Hero action buttons: equalize width on mobile */ .hero__actions { width: 100%; flex-direction: column; align-items: stretch; padding-inline: var(--space-6); } .hero__actions .btn { width: 100%; justify-content: center; } /* CTA banner action buttons centered & full width */ .cta-banner__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); } .cta-banner__actions .btn { width: 100%; justify-content: center; } /* Service banner buttons (equipment page repair section) */ .service-banner { padding: var(--space-8) var(--space-5); } .service-banner__actions { width: 100%; } .service-banner__actions .btn { width: 100%; justify-content: center; } /* "Talk to Our Team" button under why__points list — center it */ .why__content > .btn { display: block; margin: var(--space-4) auto 0; width: 100%; max-width: 360px; justify-content: center; } /* Trust bar items centered on mobile, stack vertically with consistent gutter */ .trust-bar__inner { flex-direction: column; gap: var(--space-4); padding-inline: var(--space-5); } .trust-bar__divider { display: none; } .trust-item { justify-content: center; text-align: left; width: 100%; max-width: 320px; margin-inline: auto; } /* Page-hero CTA pair (financing, etc): force vertical stack & full-width. The global .page-hero rule sets display:flex on the section, which makes inline-styled flex children shrink to content. Force them to fill width. */ .page-hero { padding-inline: var(--space-5) !important; flex-direction: column !important; align-items: center !important; } .page-hero > div[style*="display:flex"], .page-hero > div[style*="display: flex"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; width: 100% !important; max-width: 360px !important; margin-inline: auto !important; gap: var(--space-3) !important; } .page-hero .btn { width: 100%; justify-content: center; } /* Equipment-page Addons CTA & similar inline-styled centered cards */ section .container > div[style*="text-align:center"] .btn, section .container > div[style*="text-align: center"] .btn { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; line-height: 1.3; } /* Qualify form (financing apply input) — full width stack */ .qualify__form { flex-direction: column; } .qualify__form .btn { width: 100%; justify-content: center; } } /* Smaller refinement for very narrow screens */ @media (max-width: 380px) { .btn, .btn--lg { font-size: 0.78rem; padding-inline: var(--space-5); letter-spacing: 0.04em; } } /* ======================== COLD PLUNGE PAGE — MOBILE FIXES ======================== */ /* Fix product card images to fill their container properly */ .product-card__img { object-fit: cover !important; } /* Photo gallery: 3-col on desktop, 2-col on tablet, 1-col on mobile */ .cp-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-10); } /* Stats bar: 4-col → 2-col on mobile */ .cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-10); text-align: center; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-xl); } /* Secondary 4-col photo row */ .cp-photo-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-10); } @media (max-width: 768px) { .cp-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; } .cp-stats { grid-template-columns: repeat(2, 1fr) !important; } .cp-photo-row { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .cp-gallery-grid { grid-template-columns: 1fr !important; } } /* ============================================================ Oxygen Masks & Accessories — product description prose, pricing tables, and category landing styles ============================================================ */ .pd-prose { color: var(--color-text); font-size: 0.97rem; line-height: 1.7; max-width: 70ch; } .pd-prose h3 { font-family: var(--font-display); font-size: var(--text-md, 1.15rem); font-weight: 800; color: var(--color-text); margin: var(--space-8) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-soft); } .pd-prose h3:first-child { margin-top: 0; } .pd-prose h4 { font-family: var(--font-display); font-weight: 700; color: var(--brand-gold-light); margin: var(--space-5) 0 var(--space-2); font-size: 1.02rem; } .pd-prose p { margin: 0 0 var(--space-4); color: var(--color-text); } .pd-prose strong { color: var(--color-text); font-weight: 700; } .pd-prose a { color: var(--brand-gold); font-weight: 600; text-decoration: none; } .pd-prose a:hover { text-decoration: underline; } .pd-prose ul, .pd-prose ol { margin: 0 0 var(--space-4) 0; padding-left: 1.4em; display: grid; gap: var(--space-2); } .pd-prose li { color: var(--color-text); } .pd-prose li strong { color: var(--brand-gold-light); } /* Description tables (FiO2 charts, comparison, conversion) */ .pd-prose table, table.prestige-table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: 0.9rem; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); overflow: hidden; } .pd-prose thead th, table.prestige-table thead th { background: var(--color-surface-2); color: var(--brand-gold-light); font-weight: 700; text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); } .pd-prose td, .pd-prose th, table.prestige-table td, table.prestige-table th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-soft); text-align: left; vertical-align: top; color: var(--color-text); } .pd-prose tbody tr:nth-child(even), table.prestige-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); } .pd-prose tbody tr:last-child td { border-bottom: none; } /* Horizontal scroll wrapper for wide tables on mobile */ .pd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-5) 0; } .pd-table-scroll table { margin: 0; } /* Pricing table for variants */ .pd-pricing { width: 100%; border-collapse: collapse; font-size: 0.94rem; margin-top: var(--space-2); } .pd-pricing th, .pd-pricing td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-soft); text-align: left; } .pd-pricing thead th { color: var(--color-text-muted); font-weight: 600; } .pd-pricing td:last-child, .pd-pricing th:last-child { text-align: right; } .pd-pricing td.pd-pricing__price { color: var(--brand-gold); font-weight: 700; } /* Bottom buy CTA block */ .pd-buy-again { text-align: center; } /* Category landing: reuse eq-group / pd-addons; product cards */ .acc-card__meta { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin-top:auto; } .acc-card__price { color: var(--brand-gold); font-weight: 700; font-size: 0.98rem; } .acc-card .pd-addon__cta { margin-top: var(--space-2); } /* Stock / fulfillment status pills — used on acc-card and pd-addon layouts */ .stock-pill { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:0.72rem; font-weight:600; letter-spacing:0.01em; white-space:nowrap; margin-bottom:var(--space-2); } .stock-pill--instock { background:rgba(46,160,90,0.16); color:#3ddc78; border:1px solid rgba(61,220,120,0.35); } .stock-pill--dropship { background:rgba(126,207,239,0.16); color:var(--brand-ice); border:1px solid rgba(126,207,239,0.35); } .stock-pill--incoming { background:#F0B54A; color:#23180A; border:1px solid rgba(255,232,175,0.8); } /* ============================================================ HEADER CALL / TEXT CTA — desktop buttons, mobile icons, modal Added: 2026-07-27 ============================================================ */ /* ---- Desktop CTA buttons in nav ---- */ .nav__cta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: all var(--transition, 180ms ease); background: transparent; color: var(--color-text, #fff); line-height: 1; } .nav__cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .nav__cta-btn--call { background: rgba(212, 175, 55, 0.14); border-color: rgba(212, 175, 55, 0.55); color: var(--brand-gold, #d4af37); } .nav__cta-btn--call:hover { background: rgba(212, 175, 55, 0.24); border-color: var(--brand-gold, #d4af37); transform: translateY(-1px); } .nav__cta-btn--text { background: rgba(126, 207, 239, 0.14); border-color: rgba(126, 207, 239, 0.55); color: var(--brand-ice, #7ecfef); } .nav__cta-btn--text:hover { background: rgba(126, 207, 239, 0.24); border-color: var(--brand-ice, #7ecfef); transform: translateY(-1px); } /* ---- Mobile CTA icons next to hamburger ---- */ .nav__mobile-cta { display: none; align-items: center; gap: 8px; margin-left: auto; } .nav__mobile-cta-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); cursor: pointer; padding: 0; transition: all var(--transition, 180ms ease); color: var(--color-text, #fff); } .nav__mobile-cta-btn svg { width: 18px; height: 18px; } .nav__mobile-cta-btn--call { color: var(--brand-gold, #d4af37); border-color: rgba(212, 175, 55, 0.5); background: rgba(212, 175, 55, 0.1); } .nav__mobile-cta-btn--call:active, .nav__mobile-cta-btn--call:hover { background: rgba(212, 175, 55, 0.22); } .nav__mobile-cta-btn--text { color: var(--brand-ice, #7ecfef); border-color: rgba(126, 207, 239, 0.5); background: rgba(126, 207, 239, 0.1); } .nav__mobile-cta-btn--text:active, .nav__mobile-cta-btn--text:hover { background: rgba(126, 207, 239, 0.22); } /* Show mobile CTA icons on small screens (matches nav collapse point) */ @media (max-width: 768px) { .nav__mobile-cta { display: inline-flex; } } /* ---- Modal ---- */ .cta-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; } .cta-modal.is-open { display: flex; } .cta-modal__backdrop { position: fixed; inset: 0; background: rgba(6, 10, 18, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .cta-modal__panel { position: relative; width: 100%; max-width: 520px; background: #12161e; color: #f2f4f7; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); padding: 28px 26px 22px; margin: 32px auto; animation: ctaModalIn 220ms ease-out; } @keyframes ctaModalIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .cta-modal__close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; background: transparent; color: #cfd6e0; font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px; } .cta-modal__close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .cta-modal__header { margin-bottom: 18px; padding-right: 30px; } .cta-modal__title { font-size: 1.5rem; font-weight: 700; margin: 0 0 6px; color: #ffffff; letter-spacing: -0.01em; } .cta-modal__subtitle { font-size: 0.925rem; color: #a9b3c1; margin: 0; line-height: 1.45; } .cta-modal__form { display: flex; flex-direction: column; gap: 14px; } .cta-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 480px) { .cta-modal__row { grid-template-columns: 1fr; } .cta-modal__panel { padding: 22px 18px 18px; } } .cta-modal__field { display: flex; flex-direction: column; gap: 6px; } .cta-modal__field label { font-size: 0.8rem; font-weight: 600; color: #cfd6e0; letter-spacing: 0.01em; } .cta-modal__field .req { color: var(--brand-gold, #d4af37); } .cta-modal__field .opt { color: #7c8698; font-weight: 500; font-size: 0.75rem; } .cta-modal__field input, .cta-modal__field textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: #f2f4f7; font-size: 0.95rem; font-family: inherit; transition: border-color 150ms ease, background 150ms ease; box-sizing: border-box; } .cta-modal__field input:focus, .cta-modal__field textarea:focus { outline: none; border-color: var(--brand-gold, #d4af37); background: rgba(255, 255, 255, 0.07); } .cta-modal__field textarea { resize: vertical; min-height: 78px; } .cta-modal__error { padding: 10px 12px; border-radius: 8px; background: rgba(220, 60, 60, 0.14); border: 1px solid rgba(220, 60, 60, 0.4); color: #ffb4b4; font-size: 0.88rem; } .cta-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; } .cta-modal__btn { padding: 10px 20px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 0.925rem; cursor: pointer; transition: all 150ms ease; font-family: inherit; } .cta-modal__btn--primary { background: var(--brand-gold, #d4af37); color: #0e1116; } .cta-modal__btn--primary:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); } .cta-modal__btn--primary:disabled { opacity: 0.7; cursor: wait; } .cta-modal__btn--ghost { background: transparent; color: #cfd6e0; border-color: rgba(255, 255, 255, 0.14); } .cta-modal__btn--ghost:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } .cta-modal__fineprint { margin: 4px 0 0; font-size: 0.75rem; color: #7c8698; text-align: center; line-height: 1.4; } .cta-modal__success { text-align: center; padding: 8px 6px 4px; } .cta-modal__success-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(126, 207, 239, 0.14); border: 2px solid var(--brand-ice, #7ecfef); color: var(--brand-ice, #7ecfef); font-size: 30px; line-height: 52px; margin: 6px auto 14px; font-weight: 700; } .cta-modal__success-title { font-size: 1.35rem; margin: 0 0 8px; color: #ffffff; font-weight: 700; } .cta-modal__success-body { color: #cfd6e0; margin: 0 0 20px; line-height: 1.5; font-size: 0.95rem; } .cta-modal__success .cta-modal__btn { margin: 0 auto; } /* Ensure [hidden] wins over the class display rules on form and success blocks */ .cta-modal__form[hidden], .cta-modal__success[hidden], .cta-modal__error[hidden] { display: none !important; } /* Scroll cue sits below the panel CTAs so it never overlaps them */ .split-hero__scroll { bottom: 0.75rem; opacity: 0.55; pointer-events: none; } @media (max-width: 900px) { .split-hero__scroll { display: none; } } /* ========================================================================== HOMEPAGE DEEP-DIVE SECTIONS + BUNDLE PROMO ========================================================================== */ .deep-section { padding: var(--space-24) 0; position: relative; } .deep-section--shop { background: linear-gradient(180deg, transparent 0%, rgba(240,149,48,0.03) 50%, transparent 100%); } .deep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .deep-grid--reverse .deep-copy { order: 2; } .deep-grid--reverse .deep-media { order: 1; } .deep-copy .section__eyebrow { display: block; margin-bottom: var(--space-4); } .deep-copy .section__title { margin-bottom: var(--space-6); } .deep-copy .section__subtitle { margin-bottom: var(--space-8); max-width: none; } .deep-bullets { list-style: none; padding: 0; margin: 0 0 var(--space-8) 0; display: grid; gap: var(--space-4); } .deep-bullets li { padding-left: var(--space-6); position: relative; color: var(--color-text-muted); line-height: 1.6; } .deep-bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-gold); box-shadow: 0 0 12px rgba(240,149,48,0.5); } .deep-bullets strong { color: var(--color-text); font-weight: 600; margin-right: var(--space-1); } .deep-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); } .deep-note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; } .deep-media { position: relative; } .deep-media__img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,0.5); display: block; } .deep-media__caption { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; font-style: italic; letter-spacing: 0.04em; } /* ---------- Bundle Promo Band ---------- */ .promo-band { padding: var(--space-16) 0; background: linear-gradient(135deg, rgba(240,149,48,0.08) 0%, rgba(212,160,240,0.05) 100%); border-top: 1px solid rgba(240,149,48,0.15); border-bottom: 1px solid rgba(240,149,48,0.15); position: relative; overflow: hidden; } .promo-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(240,149,48,0.12) 0%, transparent 60%); pointer-events: none; } .promo-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); align-items: center; position: relative; } .promo-copy { position: relative; z-index: 1; } .promo-tag { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: rgba(240,149,48,0.15); color: var(--brand-gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-4); border: 1px solid rgba(240,149,48,0.3); } .promo-title { font-family: var(--font-display, inherit); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; color: var(--color-text); margin: 0 0 var(--space-4) 0; letter-spacing: -0.02em; } .promo-title em { font-style: normal; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .promo-subtitle { color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.55; margin-bottom: var(--space-6); } .promo-bullets { list-style: none; padding: 0; margin: 0 0 var(--space-6) 0; display: grid; gap: var(--space-2); } .promo-bullets li { padding-left: var(--space-6); position: relative; color: var(--color-text-muted); } .promo-bullets li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-gold); font-weight: 700; } .promo-fine { font-size: var(--text-xs); color: var(--color-text-muted); opacity: 0.75; margin: 0; max-width: 42rem; } .promo-media { position: relative; } .promo-media__pair { position: relative; display: grid; gap: var(--space-4); } .promo-media__img { width: 100%; height: auto; border-radius: var(--radius-xl); box-shadow: 0 15px 45px rgba(0,0,0,0.4); display: block; } .promo-media__img--top { transform: rotate(-1.5deg); } .promo-media__img--bottom { transform: rotate(1.5deg); } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .deep-section { padding: var(--space-16) 0; } .deep-grid, .deep-grid--reverse { grid-template-columns: 1fr; gap: var(--space-10); } .deep-grid--reverse .deep-copy { order: 1; } .deep-grid--reverse .deep-media { order: 2; } .promo-band { padding: var(--space-12) 0; } .promo-grid { grid-template-columns: 1fr; gap: var(--space-10); } .promo-media__img--top, .promo-media__img--bottom { transform: none; } } /* Showroom gallery */ .deep-media--gallery { } .gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .gallery-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0,0,0,0.45); display: block; transition: transform var(--transition), box-shadow var(--transition); } .gallery-img:hover { transform: translateY(-3px); box-shadow: 0 18px 55px rgba(0,0,0,0.55); } @media (max-width: 480px) { .gallery-grid { gap: var(--space-2); } } /* Bundle promo — trio image layout (chamber hero + two smaller below) */ .promo-media__trio { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: var(--space-3); } .promo-media__img--chamber { grid-column: 1 / -1; aspect-ratio: 16 / 9; object-fit: contain; background: rgba(255,255,255,0.02); transform: rotate(-1deg); } .promo-media__img--plunge, .promo-media__img--redlight { aspect-ratio: 4 / 3; object-fit: cover; } .promo-media__img--plunge { transform: rotate(1deg); } .promo-media__img--redlight { transform: rotate(-1deg); } @media (max-width: 900px) { .promo-media__img--chamber, .promo-media__img--plunge, .promo-media__img--redlight { transform: none; } } /* ======================== SHOWROOM SLIDESHOW ======================== */ /* Alternating photo-left / photo-right rows, one at a time. */ .showroom-slideshow { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--grad-hero); position: relative; overflow: hidden; } .showroom-slideshow::before { content: ""; position: absolute; inset: 0; background: var(--grad-glow-purple); opacity: 0.6; pointer-events: none; } .showroom-slideshow > .container { position: relative; z-index: 1; } .showroom-slideshow__intro { text-align: center; max-width: 780px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); } .showroom-slideshow__intro .section__subtitle { margin-top: 1rem; } .showroom-slideshow__viewport { position: relative; overflow: hidden; border-radius: 20px; background: rgba(12, 8, 16, 0.6); border: 1px solid var(--color-border-soft); min-height: 560px; } .showroom-slideshow__track { position: relative; min-height: 560px; } /* Each slide is absolutely positioned, fades + slides in */ .showroom-slide { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 4vw, 3.5rem); position: absolute; inset: 0; opacity: 0; transform: translateX(60px); transition: opacity 0.55s ease, transform 0.55s ease; pointer-events: none; } .showroom-slide[data-active="true"] { opacity: 1; transform: translateX(0); pointer-events: auto; position: relative; } .showroom-slide[hidden] { display: grid; } /* Override hidden — JS controls visibility */ /* Photo panel */ .showroom-slide__photo { border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); aspect-ratio: 16 / 10; background: #0C0810; } .showroom-slide__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Alternating side control (desktop only) */ .showroom-slide--photo-left .showroom-slide__photo { order: 1; } .showroom-slide--photo-left .showroom-slide__info { order: 2; } .showroom-slide--photo-right .showroom-slide__info { order: 1; } .showroom-slide--photo-right .showroom-slide__photo { order: 2; } /* Info panel */ .showroom-slide__info { color: var(--color-text); } .showroom-slide__eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 600; color: var(--brand-gold); text-transform: uppercase; letter-spacing: 0.2em; padding-bottom: 0.4rem; border-bottom: 2px solid var(--brand-gold); margin-bottom: 1.2rem; } .showroom-slide__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 700; line-height: 1.05; margin: 0 0 1rem; color: var(--color-text); } .showroom-slide__tagline { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text-muted); margin: 0 0 1.5rem; } .showroom-slide__specs { list-style: none; padding: 0; margin: 0 0 2rem; } .showroom-slide__specs li { padding: 0.5rem 0; color: var(--color-text); font-size: var(--text-sm); border-bottom: 1px solid var(--color-border-soft); } .showroom-slide__specs li:last-child { border-bottom: none; } .showroom-slide__specs li::before { content: "●"; color: var(--brand-gold); margin-right: 0.75rem; font-size: 0.7em; } /* Actions row */ .showroom-slide__actions { display: flex; gap: 1rem; flex-wrap: wrap; } .showroom-slide__actions .btn { flex: 1; min-width: 180px; justify-content: center; text-align: center; } /* Purple CTA (new) */ .btn--purple { background: var(--grad-purple); color: #FFF; box-shadow: 0 4px 20px rgba(123, 31, 162, 0.4); } .btn--purple:hover { box-shadow: 0 6px 30px rgba(123, 31, 162, 0.6); transform: translateY(-2px); } /* Nav arrows */ .showroom-slideshow__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(12, 8, 16, 0.7); border: 1px solid var(--color-border-soft); color: var(--brand-gold); cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s, border-color 0.2s; } .showroom-slideshow__nav:hover { background: rgba(240, 149, 48, 0.15); border-color: var(--brand-gold); } .showroom-slideshow__nav--prev { left: 16px; } .showroom-slideshow__nav--next { right: 16px; } .showroom-slideshow__nav:active { transform: translateY(-50%) scale(0.95); } /* Dots */ .showroom-slideshow__dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 0.6rem; z-index: 2; } .showroom-slideshow__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(239, 227, 200, 0.25); border: none; cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; } .showroom-slideshow__dot:hover { background: rgba(239, 227, 200, 0.5); } .showroom-slideshow__dot[aria-selected="true"] { background: var(--brand-gold); transform: scale(1.3); } .showroom-slideshow__note { text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2rem; } /* Mobile: stack always photo-top, info-bottom */ @media (max-width: 900px) { .showroom-slideshow__viewport { min-height: 0; border-radius: 14px; } .showroom-slideshow__track { min-height: 0; } .showroom-slide { grid-template-columns: 1fr; padding: 1.5rem; gap: 1.5rem; } .showroom-slide__photo, .showroom-slide__info { order: 0 !important; } .showroom-slide__photo { order: -1 !important; } .showroom-slide__photo { aspect-ratio: 4 / 3; } .showroom-slide__title { font-size: 1.75rem; } .showroom-slide__tagline { font-size: 1rem; } .showroom-slide__actions { flex-direction: column; } .showroom-slide__actions .btn { width: 100%; } .showroom-slideshow__nav { width: 40px; height: 40px; top: 25%; background: rgba(12, 8, 16, 0.85); } .showroom-slideshow__nav--prev { left: 8px; } .showroom-slideshow__nav--next { right: 8px; } .showroom-slideshow__dots { bottom: 8px; } } /* ===== Multi-column spec grids on generated product pages ===== */ .pd-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .pd-specs--grid th, .pd-specs--grid td { width: auto; } /* Row labels and column headers read as one line; only free-text cells wrap. */ .pd-specs--grid thead th, .pd-specs--grid tbody td:first-child, .pd-specs--grid tbody td:nth-child(2) { white-space: nowrap; } .pd-specs--grid thead th { color: var(--brand-gold); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--color-border); } .pd-specs--grid tbody td:first-child { font-weight: 600; } .pd-swipe-hint { display: none; font-size: 0.8rem; color: var(--color-text-muted); margin: 0 0 var(--space-2); } .pd-swipe-hint::before { content: "\2194\FE0E "; } @media (max-width: 900px) { /* Wide matrices stay readable by scrolling sideways instead of wrapping every cell into a tall unreadable stack. */ .pd-specs--grid { min-width: 56rem; } .pd-table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); } .pd-swipe-hint { display: block; } } .pd-list + .pd-body, .pd-specs + .pd-body, .pd-table-wrap + .pd-body { margin-top: var(--space-5); } /* ===== Red light full lineup index ===== */ .rl-lineup { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .rl-lineup__title { font-size: 0.86rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-gold); margin-bottom: var(--space-3); } .rl-lineup__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); } .rl-lineup__list a { color: var(--color-text); text-decoration: none; font-size: 0.92rem; line-height: 1.45; border-bottom: 1px solid transparent; } .rl-lineup__list a:hover { color: var(--brand-gold); border-bottom-color: var(--brand-gold); } /* ===== Service cards (support.html) ===== */ .svc-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .svc-card { display: block; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); text-decoration: none; transition: border-color .2s ease, transform .2s ease; } .svc-card:hover { border-color: var(--brand-gold); transform: translateY(-2px); } .svc-card__title { font-size: 1rem; color: var(--brand-gold); margin: 0 0 var(--space-2); line-height: 1.3; } .svc-card__desc { font-size: 0.9rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } /* ===== Hub page tables: make the row action link read as a link ===== */ .pd-specs a { color: var(--brand-gold); text-decoration: none; border-bottom: 1px solid transparent; } .pd-specs a:hover { border-bottom-color: var(--brand-gold); } .pd-list a { color: var(--brand-gold); text-decoration: none; border-bottom: 1px solid transparent; } .pd-list a:hover { border-bottom-color: var(--brand-gold); } /* ── OxySafe cross-link strip: mobile collapse (2026-08-25) ── The strip's layout is an inline style attribute (display:grid;grid-template-columns:auto 1fr auto), so a normal media query cannot win against it — !important here is deliberate, not laziness. At 390px the three fixed tracks (120px image + text + 138px button + 48px gaps) exceeded the 278px of available content width and pushed the page to 409px, the sole cause of the horizontal scroll on product pages. Collapsing to one column removes it. */ @media (max-width: 600px) { .pd-crosslink { grid-template-columns: 1fr !important; justify-items: start; padding: var(--space-6) !important; gap: var(--space-4) !important; } .pd-crosslink img { width: 96px !important; } .pd-crosslink .btn { white-space: normal; width: 100%; justify-content: center; padding-inline: var(--space-4); } } /* NFPA-99-COMPLIANCE-STRIP mobile fix (2026-08-26) The strip's outer .container used an inline display:grid;grid-template-columns:1fr auto, which never stacked on small screens. On mobile the "NFPA 99 · Ready" pill, heading, and two CTA buttons all fought for space in the auto-sized second column, squeezing the pill and buttons off to the side instead of flowing full-width beneath the text. Adding a scoped .nfpa-strip class (see products/*.html) lets us override the inline style safely — !important is required because it's fighting an inline style attribute, not laziness. */ @media (max-width: 700px) { .nfpa-strip { grid-template-columns: 1fr !important; gap: var(--space-5) !important; } .nfpa-strip > div:last-child { min-width: 0 !important; width: 100%; } .nfpa-strip > div:last-child a { width: 100%; } } /* Optional A2P SMS consent used by phone-collecting forms. */ .sms-consent { display: flex; align-items: flex-start; gap: 0.65rem; margin: 1rem 0; } .sms-consent input[type="checkbox"] { width: 18px; height: 18px; margin: 0.25rem 0 0; flex: 0 0 auto; accent-color: var(--brand-gold); } .sms-consent label { margin: 0; font-size: var(--text-sm); font-weight: 400; line-height: 1.55; } .sms-consent a { color: var(--brand-gold); } .cta-modal__sms-consent { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0.25rem 0 1rem; } .cta-modal__sms-consent input[type="checkbox"] { width: 18px; height: 18px; margin: 0.25rem 0 0; flex: 0 0 auto; accent-color: var(--brand-gold); } .cta-modal__sms-consent label { margin: 0; color: var(--color-text-muted); font-size: 0.78rem; font-weight: 400; line-height: 1.5; } .cta-modal__sms-consent a { color: var(--brand-gold); }