/* ============================================================================= * SPA — SECTION LAYOUTS (spa-sections.css) * * Full-section layout rules: hero, quote band, services grid, about split, * gallery strip, testimonials grid, and CTA banner. * * BUG FIX — Hero background full-width: * Root cause: Astra's page containers can restrict child width. * Fix: .spa-hero is full-viewport via min-height:100vh + overflow:hidden. * .spa-hero__bg uses position:absolute with explicit left:0 / right:0 / width:100% * and is intentionally 130% tall (top:-15%) to give the parallax JS room * to translate without revealing a gap at top or bottom. * * Contents: * 1. Hero * 2. Quote band * 3. Services grid * 4. About split * 5. Gallery strip * 6. Testimonials grid * 7. CTA banner * ============================================================================= */ /* ── 0. ASTRA WRAPPER SAFETY NET ────────────────────────────────────────── */ /* * Belt-and-suspenders override: if Astra's PHP filters above are insufficient * (e.g. a caching plugin serving stale markup), these CSS rules ensure the * SPA sections still span the full viewport width. * * The custom header-spa.php / footer-spa.php template parts bypass Astra's * structural wrappers entirely, so .spa-main is a direct child of . * We still reset it explicitly in case Astra's base stylesheet injects any * body > * margin/padding rules. */ .spa-main { width: 100%; max-width: none; margin: 0; padding: 0; overflow-x: hidden; /* Prevent any horizontal scroll bleed */ } .spa-hero, .spa-quote, .spa-cta, .spa-section { /* Ensure each section can expand to the full viewport width even if a parent container applies a max-width. */ width: 100%; box-sizing: border-box; } .spa-section--light { background-color: var(--spa-surface-strong); } /* ── 1. HERO ────────────────────────────────────────────────────────────── */ .spa-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; /* Traps the oversized parallax layer — do not remove */ overflow: hidden; /* Dark fallback shown until the image loads */ background: #1a1a1a; } /** * Background layer. * * Intentionally taller than the container (top:-15%, height:130%) so the * parallax translation (JS, spa-home.js) never exposes a gap. * On mobile the JS is disabled and these values reset to 0 / 100% * via spa-responsive.css. * * width:100% alone is sometimes insufficient when the page has a scrollbar; * left:0 / right:0 guarantees edge-to-edge coverage. */ .spa-hero__bg { position: absolute; top: -15%; left: 0; right: 0; width: 100%; height: 130%; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; /* GPU compositing layer — prevents paint on every frame */ will-change: transform; transform: translate3d(0, 0, 0); /* No CSS transition — parallax is driven exclusively by JS */ transition: none; } /* Dark semi-transparent scrim over the hero image */ .spa-hero__overlay { position: absolute; inset: 0; /* shorthand for top/right/bottom/left: 0 */ background: var(--spa-hero-overlay); z-index: 1; } /* Text content sits above both bg and overlay */ .spa-hero__content { position: relative; z-index: 2; text-align: center; padding: 0 var(--spa-space-md); max-width: var(--spa-max-width-narrow); margin: 0 auto; } .spa-hero__eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: var(--spa-tracking-label); text-transform: uppercase; color: var(--spa-gold); margin-bottom: var(--spa-space-md); } .spa-hero__title { font-size: clamp(44px, 6vw, 80px); font-weight: 300; color: var(--spa-white); line-height: var(--spa-leading-tight); margin: 0 0 var(--spa-space-md); font-family: var(--spa-font-serif); } .spa-hero__sub { font-size: var(--spa-text-md); color: rgba(255, 255, 255, 0.82); margin-bottom: 42px; font-weight: 300; line-height: 1.7; } /* Animated scroll indicator at the bottom of the hero */ .spa-hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--spa-space-xs); color: rgba(255, 255, 255, 0.6); font-size: 10px; letter-spacing: var(--spa-tracking-wider); text-transform: uppercase; pointer-events: none; /* Never block scroll interactions */ } .spa-hero__scroll::after { content: ''; display: block; width: 1px; height: 40px; background: rgba(255, 255, 255, 0.5); animation: scrollLine 1.6s ease-in-out infinite; } .spa-hero--inner { min-height: 55vh; } .spa-breadcrumb ol { display: flex; justify-content: center; gap: var(--spa-space-xs); list-style: none; padding: 0; margin: 0 0 var(--spa-space-sm); } .spa-breadcrumb li { font-size: var(--spa-text-sm); color: rgba(255, 255, 255, 0.75); } .spa-breadcrumb li + li::before { content: '/'; margin-right: var(--spa-space-xs); } .spa-breadcrumb a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } .spa-breadcrumb li[aria-current="page"] { color: var(--spa-white); } /* ── 2. QUOTE BAND ──────────────────────────────────────────────────────── */ .spa-quote { background: var(--spa-cream); padding: 64px var(--spa-space-md); text-align: center; border-top: 1px solid var(--spa-border); border-bottom: 1px solid var(--spa-border); } .spa-quote__mark { font-size: 72px; line-height: 1; color: var(--spa-sage-light); font-family: var(--spa-font-serif); margin-bottom: -16px; display: block; } .spa-quote__text { font-size: var(--spa-text-lg); font-style: italic; color: var(--spa-dark); font-family: var(--spa-font-serif); max-width: 600px; margin: 0 auto var(--spa-space-sm); line-height: 1.6; } .spa-quote__author { font-size: var(--spa-text-sm); letter-spacing: var(--spa-tracking-wide); text-transform: uppercase; color: var(--spa-sage); font-weight: 600; } /* ── 3. SERVICES GRID ───────────────────────────────────────────────────── */ .spa-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px; max-width: var(--spa-max-width); margin: 0 auto; } /* ── 4. ABOUT SPLIT LAYOUT ──────────────────────────────────────────────── */ .spa-about { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: var(--spa-max-width); margin: 0 auto; } .spa-about__img-wrap { position: relative; } .spa-about__img { width: 100%; height: 560px; object-fit: cover; border-radius: var(--spa-radius-md); display: block; } /* Gold border accent positioned behind the image */ .spa-about__accent { position: absolute; bottom: -24px; right: -24px; width: 200px; height: 200px; border: 3px solid var(--spa-gold); border-radius: var(--spa-radius-md); z-index: -1; pointer-events: none; } .spa-about__stat-row { display: flex; gap: var(--spa-space-lg); margin: 36px 0; padding: 28px 0; border-top: 1px solid var(--spa-border); border-bottom: 1px solid var(--spa-border); } .spa-stat__num { font-size: 36px; font-weight: 700; color: var(--spa-sage); display: block; font-family: var(--spa-font-serif); } .spa-stat__label { font-size: var(--spa-text-sm); color: var(--spa-mid); margin-top: 4px; } .spa-about__body { font-size: var(--spa-text-base); color: var(--spa-mid); line-height: var(--spa-leading-body); margin-bottom: 32px; } /* ── 5. GALLERY STRIP (auto-scroll) ─────────────────────────────────────── */ .spa-gallery-wrapper { overflow: hidden; position: relative; /* Fade edges for a premium bleed effect */ -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .spa-gallery-track { display: flex; gap: 0; /* Gap handled by margin-right on items — see below */ animation: galleryScroll 45s linear infinite; width: max-content; will-change: transform; } .spa-gallery-track:hover { animation-play-state: paused; } /* * Gallery item sizing — IMPORTANT loop-math note: * * We use margin-right instead of gap on the container because * gap creates N-1 spacers for N items, which makes translateX(-50%) * land a few pixels off the visual loop point (causing a jump). * * With margin-right on every item (including the last): * item slot = 380px content + 14px margin = 394px * set width = 5 × 394 = 1970px * total = 10 × 394 = 3940px * -50% = -1970px ← lands exactly at start of set B ✓ */ .spa-gallery__item { flex: 0 0 380px; margin-right: 14px; /* spacer that's included in the 50% calculation */ } .spa-gallery__item img { width: 100%; height: 320px; /* Taller for premium feel — mobile reduced in spa-responsive.css */ object-fit: cover; border-radius: var(--spa-radius-md); display: block; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .spa-gallery__item:hover img { transform: scale(1.06); } /* ── 6. TESTIMONIALS GRID ───────────────────────────────────────────────── */ .spa-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: var(--spa-max-width-mid); margin: 0 auto; } /* ── 7. CTA BANNER ──────────────────────────────────────────────────────── */ .spa-cta { background: linear-gradient(135deg, var(--spa-sage) 0%, #4a6b50 100%); padding: var(--spa-space-2xl) var(--spa-space-md); text-align: center; color: var(--spa-white); } .spa-cta__title { font-size: clamp(28px, 4vw, 48px); font-weight: 300; font-family: var(--spa-font-serif); margin-bottom: var(--spa-space-sm); line-height: var(--spa-leading-tight); } .spa-cta__sub { font-size: var(--spa-text-md); opacity: 0.85; margin-bottom: var(--spa-space-lg); max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.6; }