/* ============================================================================ LUX4RIDES — HOMEPAGE v2 (2026-07-24) Homepage-only stylesheet. Every selector is namespaced under `.l4h` (set on
) or prefixed `l4h-`, so nothing here can collide with global.css, the shared header (.lux-hd-*) or the shared footer (.lux-footer-*). EXCEPTIONS — intentionally NOT namespaced, and why: .hp-booker-* the frozen hero booking-form contract (class names are style AND logic hooks; they must keep these exact names) .pac-container / .pac-item Google Places injects these at level, outside .l4h, so they cannot be scoped Typography uses the two families the shared header already loads (Playfair Display + Montserrat). No additional font family is requested. ========================================================================== */ /* ── Design tokens ───────────────────────────────────────────────────────── */ .l4h { --l4h-black: #080808; --l4h-charcoal: #141414; --l4h-ink: #0e0e0e; --l4h-ivory: #F7F4EE; --l4h-ivory-deep: #EFEAE1; --l4h-light-text: #171717; --l4h-light-muted: #5E5951; --l4h-gold: #E8A020; --l4h-gold-lt: #F5BE5A; /* Gold for use on the ivory sections. The brief suggested #936B1E, but that measures only 4.39:1 on #F7F4EE and 4.02:1 on #EFEAE1 — below the WCAG AA 4.5:1 minimum for text at these sizes (11–12px). Darkened to #7A5714, which measures 5.98:1 / 5.48:1 / 6.56:1 and keeps the same gold character. The accessibility gate takes precedence over the suggested hex. */ --l4h-gold-on-light:#7A5714; --l4h-hairline-dark: rgba(232,160,32,.16); --l4h-hairline-light: rgba(20,18,14,.12); --l4h-on-dark: rgba(255,255,255,.72); --l4h-on-dark-soft: rgba(255,255,255,.55); --l4h-motion-fast: 220ms; --l4h-motion-reveal: 650ms; --l4h-motion-cinematic: 900ms; --l4h-ease-out: cubic-bezier(.22, 1, .36, 1); --l4h-ease-soft: cubic-bezier(.2, .7, .2, 1); --l4h-stagger: 70ms; --l4h-maxw: 1280px; --l4h-pad-y: clamp(80px, 8vw, 116px); --l4h-pad-y-sm: clamp(52px, 14vw, 72px); --l4h-radius: 16px; --l4h-radius-sm: 12px; --l4h-radius-lg: 20px; --l4h-tap: 44px; --l4h-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --l4h-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: var(--l4h-body); background: var(--l4h-black); color: #fff; display: block; overflow-x: clip; } .l4h *, .l4h *::before, .l4h *::after { box-sizing: border-box; } .l4h img { max-width: 100%; height: auto; display: block; } /* NOTE on specificity: global.css styles bare elements — `h1..h6 { color: var(--fg) }` and `p { color: var(--fg-muted) }`, both light. A bare element rule always beats an INHERITED value, so headings inside the ivory sections would render near-white unless we set colour explicitly here. `color: inherit` below (specificity 0,1,1) restores inheritance so each heading takes its section's colour — white on dark, ink on ivory. Conversely we must NOT set `color` on `.l4h a`: that would be (0,1,1) and would beat component classes like `.l4h-btn--gold` (0,1,0), turning gold button labels white-on-gold. global.css already gives anchors `color: inherit` at (0,0,1), which every component class safely overrides. */ .l4h a { text-decoration: none; } .l4h h1, .l4h h2, .l4h h3, .l4h h4, .l4h h5, .l4h h6 { font-family: var(--l4h-serif); font-weight: 500; line-height: 1.14; letter-spacing: -0.01em; margin: 0; color: inherit; } .l4h p { margin: 0; } .l4h ul { margin: 0; padding: 0; list-style: none; } /* ── Layout primitives ───────────────────────────────────────────────────── */ .l4h-wrap { width: 100%; max-width: var(--l4h-maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); } .l4h-section { padding-block: var(--l4h-pad-y); position: relative; } @media (max-width: 768px) { .l4h-section { padding-block: var(--l4h-pad-y-sm); } } .l4h-section--dark { background: var(--l4h-black); color: #fff; } .l4h-section--ink { background: var(--l4h-ink); color: #fff; } .l4h-section--light { background: var(--l4h-ivory); color: var(--l4h-light-text); } .l4h-section--light-deep { background: var(--l4h-ivory-deep); color: var(--l4h-light-text); } /* Section heading block */ .l4h-head { max-width: 720px; margin-bottom: clamp(38px, 4.5vw, 60px); } .l4h-head--center { margin-inline: auto; text-align: center; } .l4h-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--l4h-gold); margin-bottom: 14px; } .l4h-section--light .l4h-eyebrow, .l4h-section--light-deep .l4h-eyebrow { color: var(--l4h-gold-on-light); } .l4h-h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); margin-bottom: 14px; } .l4h-lead { font-size: clamp(0.98rem, 1.2vw, 1.08rem); line-height: 1.75; color: var(--l4h-on-dark); max-width: 62ch; } .l4h-section--light .l4h-lead, .l4h-section--light-deep .l4h-lead { color: var(--l4h-light-muted); } /* Hairline rule */ .l4h-rule { height: 1px; background: linear-gradient(90deg, var(--l4h-gold), rgba(232,160,32,0)); width: 56px; margin-top: 18px; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .l4h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--l4h-tap); padding: 14px 28px; border-radius: var(--l4h-radius-sm); font-family: var(--l4h-body); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: transform var(--l4h-motion-fast) var(--l4h-ease-out), background var(--l4h-motion-fast) var(--l4h-ease-out), border-color var(--l4h-motion-fast) var(--l4h-ease-out), color var(--l4h-motion-fast) var(--l4h-ease-out); } .l4h-btn svg { width: 15px; height: 15px; flex-shrink: 0; } .l4h-btn--gold { background: linear-gradient(135deg, var(--l4h-gold-lt), var(--l4h-gold)); color: #0a0a0a; } .l4h-btn--ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); color: #fff; } .l4h-btn--dark { background: transparent; border-color: rgba(20,18,14,.28); color: var(--l4h-light-text); } @media (hover: hover) { .l4h-btn:hover { transform: translateY(-2px); } .l4h-btn--ghost:hover { background: rgba(232,160,32,.10); border-color: var(--l4h-gold); color: var(--l4h-gold-lt); } .l4h-btn--dark:hover { border-color: var(--l4h-gold-on-light); color: var(--l4h-gold-on-light); } } .l4h-btn:active { transform: translateY(0) scale(.985); } /* Text link with arrow */ .l4h-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--l4h-tap); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--l4h-gold); } .l4h-section--light .l4h-link, .l4h-section--light-deep .l4h-link { color: var(--l4h-gold-on-light); } .l4h-link svg { width: 14px; height: 14px; transition: transform var(--l4h-motion-fast) var(--l4h-ease-out); } @media (hover: hover) { .l4h-link:hover svg { transform: translateX(5px); } } /* Focus visibility on BOTH dark and light sections (WCAG AA) */ .l4h a:focus-visible, .l4h button:focus-visible, .l4h input:focus-visible, .l4h select:focus-visible, .l4h [tabindex]:focus-visible { outline: 3px solid var(--l4h-gold); outline-offset: 3px; border-radius: 4px; } .l4h-section--light a:focus-visible, .l4h-section--light button:focus-visible, .l4h-section--light-deep a:focus-visible, .l4h-section--light-deep button:focus-visible { outline-color: #7A5714; } /* ============================================================================ MOTION SYSTEM — progressive enhancement Content is VISIBLE BY DEFAULT. Only after home-v2.js initialises does it add `.l4h-motion-ready` to , which arms not-yet-revealed elements. If JS fails, the observer errors, or the browser lacks IntersectionObserver, the class is never added (or is removed), so everything simply stays visible. ========================================================================== */ .l4h [data-reveal] { opacity: 1; transform: none; } .l4h-motion-ready .l4h [data-reveal]:not(.is-visible) { opacity: 0; transform: translate3d(0, 22px, 0); } .l4h [data-reveal] { transition: opacity var(--l4h-motion-reveal) var(--l4h-ease-out), transform var(--l4h-motion-reveal) var(--l4h-ease-out); } .l4h [data-reveal].is-visible { opacity: 1; transform: none; } /* Card assembly: slight lateral offset + <1.5deg rotation, desktop only */ @media (min-width: 769px) { .l4h-motion-ready .l4h [data-reveal="card"]:not(.is-visible) { transform: translate3d(0, 58px, 0) rotate(1.1deg); } .l4h-motion-ready .l4h [data-reveal="card-alt"]:not(.is-visible) { transform: translate3d(0, 62px, 0) rotate(-1.05deg); } } /* Mobile: <=22px displacement, never any rotation */ @media (max-width: 768px) { .l4h-motion-ready .l4h [data-reveal]:not(.is-visible) { transform: translate3d(0, 20px, 0); } } /* ============================================================================ LOWER-PAGE MOTION (added 2026-07-25) Extends the SAME single IntersectionObserver — no second observer, no library, no scroll-jacking, no pinning, nothing that loops forever. Every family below animates only transform/opacity, reveals once, and is fully neutralised by the reduced-motion block further down. PROTECTED COMPONENT: none of these selectors can reach the approved "Cadillac Escalade ESV" section (#l4hVehicle). Specifically: • `.l4h-head` — #l4hVehicle's eyebrow/h2/lead are direct children of a plain
, not of a .l4h-head, so these rules structurally cannot match it. • `.l4h-rule` is deliberately NOT used: its only instance on the page is inside #l4hVehicle. A brand-new `.l4h-head::after` hairline is used instead. • `.l4h-final`, `.l4h-svc*`, `.l4h-fleet-card*`, `.l4h-faq__item`, `#l4hExpFrame` do not exist inside #l4hVehicle. • The shared classes it DOES carry (.l4h-section, .l4h-section--dark, .l4h-wrap, .l4h-eyebrow, .l4h-h2, .l4h-lead) are never targeted bare. ========================================================================== */ /* ── Section heading + supporting copy, with an internal cascade ─────────── */ .l4h .l4h-head > * { transition: opacity 560ms var(--l4h-ease-out), transform 560ms var(--l4h-ease-out); } .l4h-motion-ready .l4h .l4h-head:not(.is-visible) > * { opacity: 0; transform: translate3d(0, 16px, 0); } .l4h .l4h-head.is-visible > * { opacity: 1; transform: none; } .l4h .l4h-head.is-visible > .l4h-eyebrow { transition-delay: 0ms; } .l4h .l4h-head.is-visible > .l4h-h2 { transition-delay: 90ms; } .l4h .l4h-head.is-visible > .l4h-lead { transition-delay: 180ms; } @media (max-width: 768px) { .l4h-motion-ready .l4h .l4h-head:not(.is-visible) > * { transform: translate3d(0, 12px, 0); } } /* ── Gold hairline that draws itself under each heading ──────────────────── */ .l4h .l4h-head { position: relative; } .l4h .l4h-head::after { content: ''; position: absolute; left: 0; bottom: -20px; width: 64px; height: 1px; background: linear-gradient(90deg, var(--l4h-gold), rgba(232, 160, 32, 0)); transform: scaleX(1); transform-origin: left center; transition: transform 760ms var(--l4h-ease-soft) 260ms; } .l4h-section--light .l4h-head::after, .l4h-section--light-deep .l4h-head::after { background: linear-gradient(90deg, var(--l4h-gold-on-light), rgba(122, 87, 20, 0)); } .l4h-motion-ready .l4h .l4h-head:not(.is-visible)::after { transform: scaleX(0); } .l4h .l4h-head--center::after { left: 50%; margin-left: -32px; transform-origin: center center; } /* ── Journey tiles assembling into the grid ──────────────────────────────── */ .l4h [data-reveal="tile"] { transition: opacity 520ms var(--l4h-ease-out), transform 520ms var(--l4h-ease-out); } .l4h-motion-ready .l4h [data-reveal="tile"]:not(.is-visible) { opacity: 0; transform: translate3d(0, 26px, 0) scale(.986); } @media (max-width: 768px) { .l4h-motion-ready .l4h [data-reveal="tile"]:not(.is-visible) { transform: translate3d(0, 18px, 0) scale(.99); } } /* ── Trust/credential facts entering in sequence ─────────────────────────── */ .l4h [data-reveal="fact"] { transition: opacity 520ms var(--l4h-ease-out), transform 520ms var(--l4h-ease-out); } .l4h-motion-ready .l4h [data-reveal="fact"]:not(.is-visible) { opacity: 0; transform: translate3d(0, 14px, 0); } /* the small pills inside the two feature cards follow their card in */ .l4h .l4h-svc__fact { transition: opacity 380ms var(--l4h-ease-out), transform 380ms var(--l4h-ease-out); } .l4h-motion-ready .l4h .l4h-svc[data-reveal]:not(.is-visible) .l4h-svc__fact { opacity: 0; transform: translate3d(0, 6px, 0); } .l4h .l4h-svc[data-reveal].is-visible .l4h-svc__fact:nth-child(1) { transition-delay: 300ms; } .l4h .l4h-svc[data-reveal].is-visible .l4h-svc__fact:nth-child(2) { transition-delay: 360ms; } .l4h .l4h-svc[data-reveal].is-visible .l4h-svc__fact:nth-child(3) { transition-delay: 420ms; } /* ── Card imagery settling out of a slight scale ─────────────────────────── */ .l4h-motion-ready .l4h [data-reveal]:not(.is-visible) .l4h-svc__media img, .l4h-motion-ready .l4h [data-reveal]:not(.is-visible) .l4h-fleet-card__media img { transform: scale(1.06); } .l4h [data-reveal].is-visible .l4h-svc__media img, .l4h [data-reveal].is-visible .l4h-fleet-card__media img { transform: scale(1); transition: transform 1100ms var(--l4h-ease-soft); } /* Re-assert the hover zoom: the rule above is (0,4,1) and would otherwise outrank the existing (0,3,1) hover rule and kill it. */ @media (hover: hover) { .l4h [data-reveal].is-visible:hover .l4h-svc__media img { transform: scale(1.045); } } /* ── Feature pair converging from opposite sides (desktop only) ──────────── */ @media (min-width: 1025px) { .l4h-motion-ready .l4h .l4h-svc--feature[data-reveal="card"]:not(.is-visible) { transform: translate3d(-20px, 46px, 0) rotate(.7deg); } .l4h-motion-ready .l4h .l4h-svc--feature[data-reveal="card-alt"]:not(.is-visible) { transform: translate3d(20px, 46px, 0) rotate(-.7deg); } } /* ── FAQ rows entering one at a time ────────────────────────────────────── */ .l4h .l4h-faq__item { transition: opacity 460ms var(--l4h-ease-out), transform 460ms var(--l4h-ease-out); } .l4h-motion-ready .l4h .l4h-faq__item:not(.is-visible) { opacity: 0; transform: translate3d(0, 10px, 0); } .l4h .l4h-faq__item.is-visible { opacity: 1; transform: none; } /* ── Experience frame entrance + its controls ────────────────────────────── */ .l4h #l4hExpFrame { transition: opacity 780ms var(--l4h-ease-soft), transform 780ms var(--l4h-ease-soft); } .l4h-motion-ready .l4h #l4hExpFrame:not(.is-visible) { opacity: 0; transform: scale(.985); } .l4h-motion-ready .l4h #l4hExpFrame:not(.is-visible) + .l4h-exp__controls { opacity: 0; transform: translate3d(0, 8px, 0); } .l4h #l4hExpFrame.is-visible + .l4h-exp__controls { opacity: 1; transform: none; transition: opacity 460ms var(--l4h-ease-out) 260ms, transform 460ms var(--l4h-ease-out) 260ms; } /* ── Final CTA, the one place the slower cinematic register is used ──────── */ .l4h .l4h-final > .l4h-wrap > * { transition: opacity 820ms var(--l4h-ease-soft), transform 820ms var(--l4h-ease-soft); } .l4h-motion-ready .l4h .l4h-final:not(.is-visible) > .l4h-wrap > * { opacity: 0; transform: translate3d(0, 26px, 0); } .l4h-motion-ready .l4h .l4h-final:not(.is-visible) > .l4h-wrap > .l4h-final__ctas { transform: translate3d(0, 12px, 0); } .l4h .l4h-final.is-visible > .l4h-wrap > * { opacity: 1; transform: none; } .l4h .l4h-final.is-visible > .l4h-wrap > .l4h-eyebrow { transition-delay: 0ms; } .l4h .l4h-final.is-visible > .l4h-wrap > .l4h-h2 { transition-delay: 110ms; } .l4h .l4h-final.is-visible > .l4h-wrap > .l4h-lead { transition-delay: 210ms; } .l4h .l4h-final.is-visible > .l4h-wrap > .l4h-final__ctas { transition-duration: 560ms; transition-delay: 320ms; } .l4h .l4h-final.is-visible > .l4h-wrap > .l4h-final__note { transition-delay: 420ms; } /* ── While armed, don't let an invisible control take a click ────────────── */ .l4h-motion-ready .l4h [data-reveal="tile"]:not(.is-visible), .l4h-motion-ready .l4h .l4h-faq__item:not(.is-visible), .l4h-motion-ready .l4h .l4h-final:not(.is-visible) > .l4h-wrap > .l4h-final__ctas { pointer-events: none; } /* ── Mobile fleet rail: scale instead of translate, so a reveal can never create scroll distance inside the horizontal rail ─────────────────── */ @media (max-width: 900px) { .l4h-motion-ready .l4h .l4h-fleet-card[data-reveal]:not(.is-visible) { transform: scale(.97); } } /* ============================================================================ SCROLL-PROGRESS CHOREOGRAPHY — "scatter · settle · release" Used by the Credentials grid and the Fleet rail. Each card carries a deterministic direction (--sx / --sy / --sr, authored below per position — never random). home-v2.js writes a single 0→1 progress value per card as its section crosses the viewport, and the transform is derived from it, so the motion is inherently REVERSIBLE when scrolling back up — no observer re-trigger, no flicker. Progress map (see js): 0–0.34 scatter→settle · 0.34–0.72 held perfectly still and readable · 0.72–1 gentle release. Opacity is only animated on the way IN; on release the cards stay fully opaque, so content never disappears while the section is still being read. ========================================================================== */ .l4h-scatter { --p: 1; /* transform progress: 0 = scattered, 1 = settled */ --o: 1; /* opacity progress — SEPARATE from --p on purpose */ --sx: 0px; /* authored scatter direction, per card */ --sy: 0px; --sr: 0deg; transform: translate3d(calc(var(--sx) * (1 - var(--p))), calc(var(--sy) * (1 - var(--p))), 0) rotate(calc(var(--sr) * (1 - var(--p)))) scale(calc(0.92 + (0.08 * var(--p)))); /* Opacity is driven by --o, which only ever rises (on the way in) and then stays at 1. The release phase moves --p but NOT --o, so a card can drift outward without ever fading — essential content cannot disappear while it is readable. */ /* Floor of 0.35 rather than 0, and --o completes early (see js), so a card is always legible — it never arrives as an invisible block of text. */ opacity: calc(0.35 + (0.65 * var(--o))); will-change: transform; } /* Settled state: nothing animating, no will-change left behind. */ .l4h-scatter.is-settled { transform: none; opacity: 1; will-change: auto; } /* Before JS arms the page — and forever, if JS never runs — cards sit finished. */ .l4h:not(.l4h-armed) .l4h-scatter, html:not(.l4h-motion-ready) .l4h-scatter { transform: none !important; opacity: 1 !important; will-change: auto !important; } /* Deterministic directions. Credentials: four cards sweep in from the four corners of the composition and rotate into alignment. */ .l4h-proof__grid > .l4h-scatter:nth-child(1) { --sx: -128px; --sy: 62px; --sr: -5deg; } .l4h-proof__grid > .l4h-scatter:nth-child(2) { --sx: -54px; --sy: -88px; --sr: 4deg; } .l4h-proof__grid > .l4h-scatter:nth-child(3) { --sx: 58px; --sy: 92px; --sr: -4deg; } .l4h-proof__grid > .l4h-scatter:nth-child(4) { --sx: 132px; --sy: -58px; --sr: 5.5deg; } /* Fleet: alternating sides with a little depth, cards assembling into the row. */ .l4h-fleet__rail > .l4h-scatter:nth-child(1) { --sx: -122px; --sy: 54px; --sr: -4deg; } .l4h-fleet__rail > .l4h-scatter:nth-child(2) { --sx: -46px; --sy: -96px; --sr: 3.4deg; } .l4h-fleet__rail > .l4h-scatter:nth-child(3) { --sx: 50px; --sy: 98px; --sr: -3.4deg; } .l4h-fleet__rail > .l4h-scatter:nth-child(4) { --sx: 124px; --sy: -52px; --sr: 4.6deg; } /* Vehicle images get their own small independent settle. */ .l4h-fleet-card.l4h-scatter .l4h-fleet-card__media img { transform: translate3d(0, calc(14px * (1 - var(--p))), 0); } .l4h-fleet-card.l4h-scatter.is-settled .l4h-fleet-card__media img { transform: none; } /* Mobile: small upward entrance only — no rotation, no lateral travel, so a reveal can never create horizontal overflow or fight the scroll-snap rail. NOTE the `:nth-child(n)`: the per-card rules above are (0,2,1) because of their own :nth-child, so a plain child selector here would be (0,2,0) and LOSE — the desktop 132px displacement then leaked onto mobile. Matching their specificity and coming later in the file is what makes these values win. */ @media (max-width: 900px) { .l4h-proof__grid > .l4h-scatter:nth-child(n), .l4h-fleet__rail > .l4h-scatter:nth-child(n) { --sx: 0px; --sy: 24px; --sr: 0deg; } .l4h-scatter { transform: translate3d(0, calc(var(--sy) * (1 - var(--p))), 0) scale(calc(0.97 + (0.03 * var(--p)))); } } @media (prefers-reduced-motion: reduce) { /* Completed static grid, always. */ .l4h-scatter, .l4h-scatter.is-settled { transform: none !important; opacity: 1 !important; transition: none !important; will-change: auto !important; } .l4h-fleet-card.l4h-scatter .l4h-fleet-card__media img { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .l4h [data-reveal], .l4h-motion-ready .l4h [data-reveal]:not(.is-visible), /* every family added above must be neutralised explicitly: the blanket `.l4h *` rule below only forces durations, never opacity or transform */ .l4h-motion-ready .l4h .l4h-head:not(.is-visible) > *, .l4h-motion-ready .l4h .l4h-faq__item:not(.is-visible), .l4h-motion-ready .l4h .l4h-final:not(.is-visible) > .l4h-wrap > *, .l4h-motion-ready .l4h #l4hExpFrame:not(.is-visible), .l4h-motion-ready .l4h #l4hExpFrame:not(.is-visible) + .l4h-exp__controls, .l4h-motion-ready .l4h [data-reveal]:not(.is-visible) .l4h-svc__media img, .l4h-motion-ready .l4h [data-reveal]:not(.is-visible) .l4h-fleet-card__media img, .l4h-motion-ready .l4h .l4h-svc[data-reveal]:not(.is-visible) .l4h-svc__fact { opacity: 1 !important; transform: none !important; transition: none !important; } .l4h .l4h-head::after { transform: scaleX(1) !important; } .l4h *, .l4h *::before, .l4h *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ A. HERO — dark ========================================================================== */ .l4h-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--l4h-black); padding-top: clamp(96px, 12vh, 140px); padding-bottom: clamp(40px, 6vw, 72px); } .l4h-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .l4h-hero__media img { width: 100%; height: 100%; object-fit: cover; /* `center 58%` was inert: at every real viewport ratio the hero box is taller relative to its width than the 16:9 source, so `cover` fits the height and overflows only horizontally — the vertical value never applied. The breakpoint blocks further down set the axis that actually does something. */ object-position: 50% 50%; transform: scale(1.035); transform-origin: center center; } /* Hero settle: 1.035 -> 1 over ~1.4s, once, on first paint */ .l4h-hero__media img.is-settled { transform: scale(1); transition: transform 1400ms var(--l4h-ease-soft); } .l4h-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.30) 26%, rgba(8,8,8,.55) 62%, rgba(8,8,8,.95) 100%), linear-gradient(90deg, rgba(8,8,8,.86) 0%, rgba(8,8,8,.46) 46%, rgba(8,8,8,.12) 100%); } .l4h-hero__inner { position: relative; z-index: 2; width: 100%; } .l4h-hero__content { max-width: 780px; } .l4h-hero__eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--l4h-gold-lt); padding: 8px 16px; border: 1px solid rgba(232,160,32,.32); border-radius: 100px; background: rgba(8,8,8,.5); margin-bottom: 20px; } .l4h-hero h1 { font-size: clamp(2.15rem, 5.4vw, 4.05rem); line-height: 1.06; margin-bottom: 18px; text-wrap: balance; } .l4h-hero h1 em { font-style: normal; color: var(--l4h-gold-lt); } .l4h-hero__sub { font-size: clamp(0.95rem, 1.25vw, 1.08rem); line-height: 1.75; color: rgba(255,255,255,.78); max-width: 60ch; margin-bottom: 26px; } /* margin-top permanently reserves the slot the absolutely-positioned `.l4h-booker-fallback` occupies when Places is unavailable, so that hint can appear without shifting anything or overlapping these buttons. Below 1200px the form and these buttons share one column, so the reserve is required there; at >=1200px the form moves to its own grid column and the reserve is dropped. */ .l4h-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 46px; } @media (max-width: 640px) { .l4h-hero__ctas { margin-top: 56px; } } /* ============================================================================ HERO COMPOSITION (revised 2026-07-25) The booking panel used to sit directly on top of the car. Measured against the car's silhouette, the panel hid 76.9% of it at 1440, 75.1% at 1920, 92.8% at 768 and 91.0% at 390 — and the part it hid was the whole FACE (grille, star, number plate, both headlights, bonnet, windscreen, front wheel), leaving only the rear visible. Nothing is layered over the form to fix this; instead the panel is moved into genuinely empty parts of the frame: >=1200px copy left / panel top-right, over the empty sky above the roofline. The car keeps the entire lower band. Measured occlusion after: 5.85% at 1200 (a corner of the rear roof only), 1.21% at 1440, 0.09% at 1920, 0.00% at 2560. Side effect, deliberate: the hero collapses to exactly 100svh, so at 1920 the whole frame is visible with no crop at all. <=1199px the media becomes a deliberate top band and the panel sits on solid black beneath it — a real mobile crop rather than a shrunk desktop composition. Measured occlusion: exactly 0% at every width tested. ========================================================================== */ /* Breakpoint is 1024, not 1200. With the band layout running up to 1199px the whole booking panel fell below the fold on 1024-class laptops and iPad landscape — measured: submit button 283px below the fold at 1024x768 and 369px at 1180x820. The grid puts it back on screen (submit at ~426px) at the cost of a little more rear-roofline overlap, which is the right trade for a revenue-critical control. */ @media (min-width: 1024px) { .l4h-hero { align-items: flex-start; } .l4h-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: clamp(32px, 4vw, 72px); align-items: start; } /* Promotes the five children into the grid with no HTML change. Safe here because .l4h-hero__content carries no box of its own (only a max-width). */ .l4h-hero__content { display: contents; } .l4h-hero__eyebrow { grid-column: 1; grid-row: 1; } .l4h-hero h1 { grid-column: 1; grid-row: 2; } .l4h-hero__sub { grid-column: 1; grid-row: 3; max-width: 44ch; } .l4h-hero__ctas { grid-column: 1; grid-row: 4; margin-top: 24px; } /* Targeted by ID so the frozen .hp-booker-inline class rule is not edited. */ #hpBookerForm { grid-column: 2; grid-row: 1 / span 4; align-self: start; margin-top: 0; max-width: 440px; } /* Re-balanced so the darkest part of the scrim falls on the empty edges rather than on the car's nose and the LAX pylon sign. */ .l4h-hero__scrim { background: linear-gradient(180deg, rgba(8,8,8,.84) 0%, rgba(8,8,8,.40) 30%, rgba(8,8,8,.26) 58%, rgba(8,8,8,.90) 100%), linear-gradient(90deg, rgba(8,8,8,.74) 0%, rgba(8,8,8,.30) 38%, rgba(8,8,8,.08) 60%, rgba(8,8,8,.55) 100%); } } /* Narrow-desktop step: a slimmer panel and a smaller headline so the two columns both breathe at 1024-1199px. */ @media (min-width: 1024px) and (max-width: 1199px) { .l4h-hero__inner { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 28px; } #hpBookerForm { max-width: 400px; } .l4h-hero h1 { font-size: clamp(1.9rem, 3.5vw, 2.5rem); } .l4h-hero__sub { max-width: 38ch; } } @media (max-width: 1023px) { .l4h-hero { padding-top: 0; align-items: flex-start; } .l4h-hero__media { inset: 0 0 auto 0; } .l4h-hero__scrim { background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.10) 22%, rgba(8,8,8,.08) 56%, rgba(8,8,8,.97) 93%, #080808 100%); } .l4h-hero__sub { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 18px; } } @media (max-width: 767px) { .l4h-hero__media { height: clamp(232px, 32svh, 340px); } .l4h-hero__media img { object-position: 40% 72%; } .l4h-hero__inner { padding-top: calc(clamp(232px, 32svh, 340px) + 16px); } } @media (min-width: 768px) and (max-width: 1023px) { .l4h-hero__media { aspect-ratio: 100 / 40; height: auto; } .l4h-hero__media img { object-position: 50% 56%; } .l4h-hero__inner { padding-top: calc(40vw + 20px); } } /* Hero entrance stagger — CSS-only, runs once, never gates interactivity. The booking form is deliberately NOT in this list: it is visible and usable from the very first frame. */ @keyframes l4hRise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } } /* Duration is deliberately short (520ms, not the 900ms cinematic token) and the stagger is 70ms. These elements start at opacity:0, so a long entrance would push Largest Contentful Paint out by exactly its delay + duration — measured at 1856ms with a 220ms delay + 900ms duration, which failed the LCP budget. The hero booking form is intentionally excluded from this animation and is interactive from the first frame. */ .l4h-hero__eyebrow, .l4h-hero h1, .l4h-hero__sub, .l4h-hero__ctas { animation: l4hRise 520ms var(--l4h-ease-out) both; } .l4h-hero__eyebrow { animation-delay: 40ms; } .l4h-hero h1 { animation-delay: 110ms; } .l4h-hero__sub { animation-delay: 180ms; } .l4h-hero__ctas { animation-delay: 250ms; } @media (prefers-reduced-motion: reduce) { .l4h-hero__eyebrow, .l4h-hero h1, .l4h-hero__sub, .l4h-hero__ctas { animation: none; } .l4h-hero__media img, .l4h-hero__media img.is-settled { transform: none; transition: none; } } /* ============================================================================ FROZEN BOOKING CONTRACT — .hp-booker-* (class names must not change). Carried over from the previous inline homepage styles, with the two endless animations (gold shimmer + scanline) removed per the motion brief. ========================================================================== */ .hp-booker-inline{--hp-ease:cubic-bezier(.16,1,.3,1);max-width:780px;margin:26px 0 0;display:flex;flex-direction:column;align-items:stretch;width:100%;position:relative;font-family:inherit;text-align:left} .hp-booker-inline *{box-sizing:border-box} .hp-booker-inline::before{content:'';position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:85%;height:130%;background:radial-gradient(ellipse at center,rgba(232,160,32,.10) 0%,transparent 65%);pointer-events:none;z-index:0} .hp-booker-tabs{position:relative;z-index:1;display:inline-flex;align-self:flex-start;gap:2px;padding:4px;background:rgba(5,8,16,.8);border:1px solid rgba(232,160,32,.15);border-radius:100px;margin-bottom:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(0,0,0,.35)} .hp-booker-tab{padding:10px 18px;background:transparent;border:none;color:rgba(255,255,255,.72);font-size:11px;font-weight:700;letter-spacing:.12em;cursor:pointer;border-radius:100px;transition:all .28s var(--hp-ease);font-family:inherit;text-transform:uppercase;white-space:nowrap;-webkit-tap-highlight-color:transparent;min-height:44px} .hp-booker-tab:hover:not(.active){color:#fff;background:rgba(255,255,255,.04)} .hp-booker-tab.active{background:linear-gradient(135deg,#F5BE5A,#E8A020);color:#0a0a0a;box-shadow:0 4px 16px rgba(232,160,32,.4)} .hp-booker-bar{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;background:rgba(5,8,16,.85);border:1px solid rgba(232,160,32,.22);border-radius:16px;box-shadow:0 0 0 1px rgba(232,160,32,.06),0 32px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);-webkit-backdrop-filter:blur(32px) saturate(1.8);backdrop-filter:blur(32px) saturate(1.8)} .hp-booker-field{position:relative;padding:12px 16px;border-radius:10px;background:rgba(255,255,255,.028);border:1px solid rgba(232,160,32,.12);min-width:0;display:flex;flex-direction:column;justify-content:center;transition:border-color .25s var(--hp-ease),background .25s var(--hp-ease)} .hp-booker-field:focus-within{border-color:rgba(232,160,32,.55);background:rgba(232,160,32,.04);box-shadow:0 0 0 3px rgba(232,160,32,.08)} .hp-booker-field-lg{grid-column:1 / -1} .hp-booker-field-hours{grid-column:1 / -1} .hp-booker-field.is-hidden{display:none} .hp-booker-field label{display:block;font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(232,160,32,.78);margin-bottom:4px;cursor:pointer} .hp-booker-input-wrap{display:flex;align-items:center;gap:8px} .hp-booker-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .hp-booker-dot--pu{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.22)} .hp-booker-dot--do{background:#f43f5e;box-shadow:0 0 0 3px rgba(244,63,94,.22)} /* NOTE — `background-color`, deliberately NOT the `background` shorthand. When the Google Maps JS API fails to authenticate (bad key, referrer restriction, exhausted quota, lapsed billing, rotated key) Google adds the class `gm-err-autocomplete` to these inputs and sets an error icon as an INLINE background-image, relying on its own rule .gm-err-autocomplete{background-repeat:no-repeat;background-size:15px 15px} to draw it once. That rule is specificity (0,1,0); this one is (0,1,1), so a `background` shorthand here would win and reset background-repeat to `repeat` and background-size to `auto` — tiling Google's 15px error icon ~47× across the field. That was the "repeated grey warning icons" defect. Setting only background-color leaves Google's repeat/size intact. See also the .gm-err-autocomplete override further down, which removes the icon entirely. */ .hp-booker-field input, .hp-booker-field select.hp-booker-select{width:100%;border:none;background-color:transparent;color:#fff;font-size:16px;font-weight:500;padding:0;outline:none;font-family:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;line-height:1.3;min-height:0} .hp-booker-field input::placeholder{color:rgba(255,255,255,.4);font-weight:400} .hp-booker-field input[type="date"],.hp-booker-field input[type="time"]{color-scheme:dark;cursor:pointer} .hp-booker-field select.hp-booker-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F5BE5A' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;padding-right:22px} .hp-booker-submit{grid-column:1 / -1;margin-top:2px;padding:16px 28px;background:linear-gradient(135deg,#F5BE5A,#E8A020);color:#080808;border:none;border-radius:10px;font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .25s var(--hp-ease),box-shadow .25s var(--hp-ease);display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font-family:inherit;min-height:56px;box-shadow:0 8px 32px rgba(232,160,32,.45);-webkit-tap-highlight-color:transparent} .hp-booker-submit:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(232,160,32,.58)} .hp-booker-submit svg{width:15px;height:15px} .hp-booker-trust{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin:12px 0 0;font-size:11px;font-weight:500;color:rgba(255,255,255,.58);letter-spacing:.03em} .hp-booker-trust svg{width:12px;height:12px;color:#F5BE5A;flex-shrink:0;opacity:.95} /* Google Places dropdown — injected at level, so NOT namespaced. z-index must clear every fixed layer (.lux-hd 1000, .l4h-quotebar 900, .l4h-fab 800) so suggestion taps always land on the dropdown. */ .pac-container{background:#100b04 !important;border:1px solid rgba(232,160,32,.30) !important;border-radius:14px !important;box-shadow:0 24px 68px rgba(0,0,0,.7) !important;overflow:hidden;font-family:'Montserrat',-apple-system,sans-serif !important;padding:6px 0;margin-top:8px !important;z-index:100001 !important} .pac-item{padding:13px 18px !important;border:none !important;color:rgba(255,255,255,.82) !important;font-size:14px !important;cursor:pointer;line-height:1.45;min-height:44px;box-sizing:border-box} .pac-item:hover,.pac-item-selected{background:rgba(232,160,32,.12) !important} .pac-item-query{color:#fff !important;font-weight:600 !important;font-size:14px !important} .pac-matched{color:#F5BE5A !important;font-weight:700 !important} .pac-icon,.pac-icon-marker,.pac-logo::after{display:none !important} /* ── Google Maps auth-failure hardening ────────────────────────────────────── If the Maps API cannot authenticate, Google decorates the autocomplete inputs with `gm-err-autocomplete` + an inline error-icon background. We never want a foreign error graphic drawn inside a Lux4Rides booking field, so the image is removed outright (inline styles need !important to beat) and the padding it reserved is reverted. The field then looks completely normal and stays fully usable for manual address entry; home-v2.js surfaces a proper text hint via the documented window.gm_authFailure hook. */ .hp-booker-field input.gm-err-autocomplete, .hp-booker-field input.gm-err-autocomplete:focus { background-image: none !important; background-repeat: no-repeat !important; background-size: auto !important; padding-left: 0 !important; } /* Manual-entry fallback hint (shown only when Places is unavailable). ABSOLUTELY positioned on purpose. Google only flags the auth failure after the first Places request fails — which happens WHILE the customer is typing — so a hint in normal flow would grow the form and slide the fields out from under their cursor. Taking it out of flow means showing it can never move a control or contribute layout shift. The space it occupies is permanently reserved by `.l4h-hero__ctas { margin-top }` below, so nothing overlaps either. */ .l4h-booker-fallback { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 2; /* Deliberately compact: a single quiet line, not a warning panel. It must never dominate the hero — it only ever appears after a real API failure. */ align-items: center; gap: 6px; margin: 6px 0 0; padding: 0; border: 0; background: none; font-size: 11.5px; line-height: 1.45; letter-spacing: .01em; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l4h-booker-fallback svg { width: 13px; height: 13px; flex: 0 0 auto; stroke: var(--l4h-gold-lt); opacity: .9; } @media (max-width: 640px) { .l4h-booker-fallback { white-space: normal; } } .l4h-booker--manual .l4h-booker-fallback { display: flex; } @media(max-width:640px){ .hp-booker-tabs{align-self:stretch;justify-content:space-between;gap:2px} .hp-booker-tab{flex:1;padding:10px 8px;font-size:10px;letter-spacing:.1em} .hp-booker-bar{grid-template-columns:1fr 1fr;padding:6px;gap:5px;border-radius:14px} .hp-booker-field{padding:10px 14px;border-radius:10px;min-height:56px} .hp-booker-field-sm{grid-column:span 1} .hp-booker-submit{padding:14px 20px;min-height:52px;border-radius:10px;font-size:12px} } @media(prefers-reduced-motion:reduce){ .hp-booker-inline,.hp-booker-tab,.hp-booker-field,.hp-booker-submit{transition:none !important;animation:none !important} } /* Keyboard focus for the booking fields. The widget's original styling resets `outline:none` on these inputs, so every focus ring here has to be re-declared. Two Chrome behaviours matter: · date/time inputs delegate keyboard focus into their shadow DOM, so when a user tabs to #hpDate or #hpTime the host is document.activeElement but matches NEITHER :focus NOR :focus-visible — the match is on the shadow child. Only :focus-within reaches the host, so it must be in this list; without it those two fields were the only tab stops on the page with no ring (clicking them looked fine, which is what hid the problem). · :focus is included alongside :focus-visible because these are text entry fields, where showing the ring to a pointer user is helpful, not noisy. */ .l4h .hp-booker-field input:focus, .l4h .hp-booker-field input:focus-within, .l4h .hp-booker-field input:focus-visible, .l4h .hp-booker-field select:focus, .l4h .hp-booker-field select:focus-visible, .l4h .hp-booker-tab:focus-visible, .l4h .hp-booker-submit:focus-visible { outline: 3px solid var(--l4h-gold); outline-offset: 2px; } /* Tap comfort: the inputs themselves were only ~21px tall inside a 56px field, so the input's own hit area was below the minimum target size. Growing the input to fill the field keeps the widget's proportions but makes the whole field practically tappable (the