/* ============================================================ SHOW LIMOUSINES SYDNEY — design tokens ============================================================ */ :root { --color-bg: #0a0a0c; --color-bg-raised: #111116; --color-surface: #1a1a22; --color-border: rgba(255,255,255,0.08); --color-text: #f0f0f0; --color-muted: #888899; --color-accent: #C9A84C; --color-accent-hover: #e7cd7b; --accent-rgb: 201,168,76; --color-dark: #0F1014; /* Height of the fixed nav bar; refined at runtime by JS (main.js syncHeaderHeight) */ --header-height: 84px; /* Metallic gold lifted from the Show Limousines logo (champagne → gold → antique) */ --gold-gradient: linear-gradient(135deg, #F6E7A8 0%, #E3C66B 28%, #C9A84C 52%, #A6822F 78%, #E8CE80 100%); --gold-gradient-soft: linear-gradient(135deg, #E9CE7E 0%, #C9A84C 55%, #9C7A2C 100%); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: auto; } /* overflow-x:clip on the root reliably contains horizontal spill on iOS Safari (which ignores overflow-x:hidden on ); body hidden kept as a net. */ html { overflow-x: clip; } body { overflow-x: hidden; } /* Safe-area: keep content clear of the notch/Dynamic Island edges. env() is 0 in portrait and on non-notched devices, so this leaves the current portrait / Android / desktop layout byte-for-byte unchanged; it only insets in landscape. */ @media (max-width: 900px) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: 'DM Sans', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { background: none; border: none; font-family: inherit; cursor: pointer; } h1, h2, h3, h4, .display { font-family: 'Bebas Neue', sans-serif; font-weight: 400; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ----- Section label — [ BRACKETED ] ----- */ .label-bracket { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; } .label-bracket::before { content: '['; opacity: 0.7; margin-right: 4px; } .label-bracket::after { content: ']'; opacity: 0.7; margin-left: 4px; } /* ----- Diagonal beam ----- */ .beam { position: absolute; top: -200px; right: 10%; width: 50px; height: 1200px; background: white; opacity: 0.06; filter: blur(24px); transform: rotate(60deg); pointer-events: none; z-index: 1; } .beam--reverse { transform: rotate(-60deg); right: auto; left: 10%; } /* ----- Grain overlay ----- */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; opacity: 0.04; pointer-events: none; z-index: 9996; } /* ----- Custom cursor — desktop only ----- */ #c-dot { position: fixed; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); pointer-events: none; z-index: 9999; transition: width 0.2s, height 0.2s; } #c-ring { position: fixed; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--color-accent); pointer-events: none; z-index: 9998; opacity: 0; transition: width 0.3s, height 0.3s, opacity 0.3s; } #c-dot.is-hover { width: 4px; height: 4px; } #c-ring.is-hover { width: 64px; height: 64px; opacity: 0.35; } /* ----- Pill buttons ----- */ .btn-pill { display: inline-flex; align-items: center; gap: 12px; padding: 10px 12px 10px 24px; border-radius: 9999px; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: opacity 300ms ease, transform 300ms ease; border: none; white-space: nowrap; } .btn-pill:hover { opacity: 0.85; } .btn-pill__arrow { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 350ms cubic-bezier(.4,0,.2,1); } .btn-pill:hover .btn-pill__arrow { transform: rotate(45deg); } .btn-pill--primary { background: #000; color: #fff; } .btn-pill--primary .btn-pill__arrow { background: rgba(255,255,255,0.12); color: #fff; } .btn-pill--secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); padding: 8.5px 12px 8.5px 24px; } .btn-pill--secondary .btn-pill__arrow { background: rgba(255,255,255,0.12); color: #fff; } .btn-pill--gold { background: var(--gold-gradient); background-size: 140% 140%; color: #1a1206; box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.28); transition: background-position 600ms ease, box-shadow 300ms ease, transform 300ms ease; } .btn-pill--gold:hover { opacity: 1; background-position: 100% 100%; box-shadow: 0 8px 30px rgba(var(--accent-rgb), 0.45); transform: translateY(-1px); } .btn-pill--gold .btn-pill__arrow { background: rgba(0,0,0,0.18); color: #1a1206; } .btn-pill--sm { padding: 7px 9px 7px 18px; font-size: 12px; gap: 9px; } .btn-pill--sm .btn-pill__arrow { width: 24px; height: 24px; } .btn-outline-sm { display: inline-block; padding: 8px 18px; border: 1px solid rgba(255,255,255,0.25); border-radius: 9999px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; transition: border-color 300ms, color 300ms, background 300ms; } .btn-outline-sm:hover { border-color: var(--color-accent); color: var(--color-accent); background: rgba(var(--accent-rgb), 0.05); } /* ============================================================ NAV — main pill bar (7-item nav) ============================================================ */ .nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transform: translateY(-100%); transition: transform 0.6s cubic-bezier(.4, 0, .2, 1); } .nav-wrap.is-loaded { transform: translateY(0); } .nav-wrap.is-hidden { transform: translateY(-100%); } .nav-main { background: rgba(10, 10, 12, 0.82); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--color-border); } .nav-inner { max-width: 1320px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.06em; color: #fff; line-height: 1; } .nav-brand__mark { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); } .nav-brand__mark svg { width: 100%; height: 100%; } .nav-brand__name { color: #fff; } .nav-brand__name span { color: var(--color-accent); } /* The logo is a wide lockup (S monogram + SHOW LIMOUSINES + tagline baked in), ~5.4:1, cropped to its content in the SVG. Height drives the size; width auto-scales to preserve aspect ratio (~58px tall ≈ 314px wide). Desktop size bumped ~21% for presence; mobile is overridden to 42px at ≤640px. */ .nav-brand__logo { height: 58px; width: auto; display: block; } .nav-pills { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: 9999px; } .nav-pill { padding: 11px 22px; border-radius: 9999px; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.85); transition: background 300ms, color 300ms; white-space: nowrap; } .nav-pill:hover { background: rgba(var(--accent-rgb), 0.18); color: #fff; } .nav-right { display: inline-flex; align-items: center; gap: 14px; } /* Tagline + Call are mobile-only (two-row header); hidden on PC/tablet. */ .nav-brand__tag { display: none; } .nav-call { display: none; } .nav-phone { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.75); letter-spacing: 0.04em; transition: color 300ms; } .nav-phone:hover { color: var(--color-accent); } .nav-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; } .nav-burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 300ms, opacity 200ms; } .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; } .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--color-bg); z-index: 60; padding: 120px 28px 40px; transform: translateX(100%); transition: transform 400ms cubic-bezier(.4, 0, .2, 1); overflow-y: auto; } .nav-mobile.is-open { transform: translateX(0); } /* Non-link group labels (no landing page, so rendered as : Locations, Mercedes, Volkswagen) inherit the same Bebas Neue label typography as their siblings — keeps every mobile menu label consistent. */ .nav-mobile a, .nav-mobile__grouptop > span { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 0.04em; color: #fff; padding: 14px 0; border-bottom: 1px solid var(--color-border); transition: color 300ms; } .nav-mobile a:hover { color: var(--color-accent); } .nav-mobile .nav-mobile__cta { margin-top: 28px; } /* Mobile-menu footer CTA only: arrow removed (in markup) and label centred. Scoped to this instance — shared .btn-pill and every other button keep their arrows and padding. */ .nav-mobile__cta .btn-pill { justify-content: center; text-align: center; } @media (max-width: 1240px) { .nav-pills { display: none; } .nav-phone { display: none; } .nav-burger { display: inline-flex; } .nav-inner { padding: 12px 20px; } } @media (max-width: 520px) { .nav-brand { font-size: 20px; } .nav-brand__mark { width: 26px; height: 26px; } } /* ---- Mobile two-row header (Commit 7) — phones only; PC/tablet unchanged ---- */ @media (max-width: 640px) { /* Row-gap (24px) is the breathing room between the logo lockup (row 1) and the Call / Get a Quote / hamburger row (row 2). Mobile only; both rows stay centred. Trimmed from 40px to 24px to make the phone header more compact while still keeping the buttons clear of the logo lockup. */ .nav-inner { flex-wrap: wrap; gap: 24px 10px; padding: 12px max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); } /* Row 1: logo lockup on its own full-width row — centred so it doesn't hug the left edge (logo sits on its own row, so this can't crowd the row-2 Call / Get a Quote / hamburger buttons). Mobile only; desktop unchanged. */ .nav-brand { flex: 1 0 100%; flex-direction: column; align-items: center; gap: 5px; } .nav-brand__logo { height: 42px; max-width: 100%; } .nav-brand__tag { display: block; font-family: 'DM Sans', sans-serif; font-size: clamp(10.5px, 3.3vw, 13px); letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.62); white-space: nowrap; line-height: 1; } /* Row 2: Call + Get a Quote side by side, hamburger next to them */ .nav-right { flex: 1 0 100%; gap: 10px; } /* Call + Get a Quote must be an EXACTLY equal pair on mobile (iOS Safari was rendering Call narrower than Android). Root cause: base `flex: 1` (= 1 1 0%) with the default `min-width: auto` floors each pill at its own min-content, so the longer "Get a Quote" text claimed more width and Call got the leftover — and Safari's wider text-metric/percentage-basis handling made the gap worse. Fix (mobile only): both pills use `flex: 1 1 0` + `min-width: 0`, so the row's free space is split 50/50 regardless of content. Both then get the IDENTICAL box model — 10px vertical padding, 16px horizontal, a 1px border (gold on Call, transparent on Get a Quote) — so width AND height match to the pixel. Colours, gradient, text, icons and the 32px icon box are unchanged; desktop is untouched. */ .nav-call { display: inline-flex; flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 16px; gap: 12px; font-size: 12.5px; color: #fff; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.55); } .nav-call svg { width: 32px; height: 32px; padding: 9px; border-radius: 50%; color: #fff; box-sizing: border-box; flex-shrink: 0; } .nav-right .btn-pill--gold { flex: 1 1 0; min-width: 0; justify-content: center; padding: 10px 16px; font-size: 12.5px; border: 1px solid transparent; } .nav-burger { flex: 0 0 auto; } } /* ---- Mobile-only top breathing room above the logo/header ---- The logo was sitting flush under the status bar / notch. Add top spacing to the .nav-inner (the flex parent of BOTH the logo row and the Call/Quote/burger row), so the WHOLE header shifts down together and stays aligned. Padding is on .nav-inner (inside .nav-main), so the dark blurred header background fills up into the safe-area too. env(safe-area-inset-top) respects the iPhone notch / Dynamic Island (needs viewport-fit=cover, already set); the +20px is the Android/no-inset breathing room. Placed AFTER the ≤640px block so this padding-top wins across all mobile widths. Desktop (>768px) is untouched. */ @media (max-width: 768px) { .nav-inner { padding-top: calc(env(safe-area-inset-top) + 20px); } } /* ============================================================ HERO — Three.js 3D car + GSAP pinned scroll ============================================================ */ .hero { position: relative; margin-top: var(--header-height); height: calc(100svh - var(--header-height)); min-height: 0; width: 100%; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 15% 25%, rgba(var(--accent-rgb), 0.13) 0%, transparent 65%), radial-gradient(ellipse 55% 50% at 85% 80%, rgba(var(--accent-rgb), 0.07) 0%, transparent 65%), var(--color-bg); display: flex; align-items: center; isolation: isolate; } .hero__canvas, .hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--color-bg); } /* Single subtle dark overlay for text contrast — nothing else over the video */ .hero__overlay { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.65)); pointer-events: none; } /* ---- Cinematic atmosphere layer (sits over the 3D canvas, behind the copy) ---- */ .hero__fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } /* Drifting gold light blooms */ .hero__fx-glow { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: screen; opacity: 0.55; will-change: transform, opacity; } .hero__fx-glow--a { width: 46vw; height: 46vw; left: -8vw; top: -6vw; background: radial-gradient(circle at 50% 50%, rgba(243,226,168,0.55) 0%, rgba(201,168,76,0.30) 38%, transparent 70%); animation: heroGlowA 14s ease-in-out infinite; } .hero__fx-glow--b { width: 40vw; height: 40vw; right: -6vw; bottom: -10vw; background: radial-gradient(circle at 50% 50%, rgba(231,205,123,0.40) 0%, rgba(166,130,47,0.22) 42%, transparent 72%); animation: heroGlowB 18s ease-in-out infinite; } /* Slow sweeping light beams */ .hero__fx-beams { position: absolute; inset: -20% -10%; background: linear-gradient(102deg, transparent 38%, rgba(246,231,168,0.10) 47%, rgba(246,231,168,0.18) 50%, rgba(246,231,168,0.10) 53%, transparent 62%), linear-gradient(98deg, transparent 60%, rgba(201,168,76,0.08) 70%, transparent 80%); mix-blend-mode: screen; animation: heroBeams 16s ease-in-out infinite; opacity: 0.8; } /* Fine film grain */ .hero__fx-grain { position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px 200px; animation: heroGrain 1.2s steps(3) infinite; } /* Cinematic vignette + warm floor wash */ .hero__fx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 75% at 50% 42%, transparent 55%, rgba(0,0,0,0.55) 100%), linear-gradient(180deg, rgba(10,8,4,0.35) 0%, transparent 22%, transparent 70%, rgba(201,168,76,0.06) 100%); } @keyframes heroGlowA { 0%,100% { transform: translate3d(0,0,0) scale(1); opacity: 0.5; } 50% { transform: translate3d(4vw,3vh,0) scale(1.12); opacity: 0.7; } } @keyframes heroGlowB { 0%,100% { transform: translate3d(0,0,0) scale(1.05); opacity: 0.42; } 50% { transform: translate3d(-3vw,-2vh,0) scale(1); opacity: 0.62; } } @keyframes heroBeams { 0%,100% { transform: translateX(-6%); opacity: 0.55; } 50% { transform: translateX(6%); opacity: 0.9; } } @keyframes heroGrain { 0% { transform: translate(0,0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -2%); } 100% { transform: translate(0,0); } } @media (prefers-reduced-motion: reduce) { .hero__fx-glow--a, .hero__fx-glow--b, .hero__fx-beams, .hero__fx-grain { animation: none; } } .hero__inner { position: relative; z-index: 3; width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(14px, 2.5vh, 56px) 28px; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 4vw; align-items: center; } /* Constrain the copy to the left ~46% so it never sits over the car on the right */ .hero__text { min-width: 0; max-width: 520px; } .hero__label { margin-bottom: clamp(8px, 1.4vh, 16px); } .hero__seo-h1 { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.78); margin: 0 0 clamp(10px, 1.6vh, 22px); } .hero__seo-h1::before { content: ''; display: inline-block; width: 28px; height: 1px; background: var(--color-accent); vertical-align: middle; margin-right: 12px; transform: translateY(-2px); } .hero-heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(40px, min(8vw, 8.5vh), 132px); line-height: 0.9; letter-spacing: -0.02em; color: #fff; margin: 0 0 clamp(14px, 2.5vh, 28px); max-width: 10ch; overflow: hidden; } .hero-heading .w { display: inline-block; overflow: hidden; vertical-align: top; } .hero-heading .w > span { display: inline-block; transform: translateY(110%) rotate(3deg); opacity: 0; will-change: transform, opacity; } .hero-heading.is-in .w > span { animation: limo-word-up 0.95s cubic-bezier(.19,1,.22,1) forwards; } @keyframes limo-word-up { to { transform: translateY(0) rotate(0); opacity: 1; } } .hero__sub { font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.7vh, 18px); line-height: 1.55; color: rgba(240, 240, 240, 0.78); max-width: 480px; margin: 0 0 clamp(16px, 2.6vh, 40px); opacity: 0; transform: translateY(20px); animation: limo-rise 0.9s 0.6s cubic-bezier(.19,1,.22,1) forwards; } .hero__ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; opacity: 0; transform: translateY(20px); animation: limo-rise 0.9s 0.8s cubic-bezier(.19,1,.22,1) forwards; } @keyframes limo-rise { to { opacity: 1; transform: translateY(0); } } .hero__stats { display: flex; align-items: flex-end; gap: clamp(20px, 3vw, 36px); margin-top: clamp(16px, 3vh, 56px); opacity: 0; transform: translateY(20px); animation: limo-rise 0.9s 1.0s cubic-bezier(.19,1,.22,1) forwards; } .hero__stat { display: flex; flex-direction: column; gap: 4px; } .hero__stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 36px; line-height: 1; letter-spacing: 0.02em; color: var(--color-accent); background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero__stat-label { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 240, 240, 0.55); } .hero__stat-sep { width: 1px; height: 28px; background: rgba(255, 255, 255, 0.12); align-self: center; margin-bottom: 8px; } .hero__stage { min-height: 60vh; position: relative; } .hero__hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.5); font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; pointer-events: none; } .hero__hint .down { width: 14px; height: 14px; border-right: 1.5px solid rgba(255,255,255,0.5); border-bottom: 1.5px solid rgba(255,255,255,0.5); transform: rotate(45deg); animation: limo-bounce 1.8s cubic-bezier(.22,.61,.36,1) infinite; } @keyframes limo-bounce { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: 0.4; } 50% { transform: rotate(45deg) translate(4px,4px); opacity: 1; } } .hero.is-no-webgl .hero__canvas { display: none; } .hero.is-no-webgl .hero__inner { grid-template-columns: 1fr; max-width: 900px; } .hero.is-no-webgl .hero__stage { display: none; } @media (max-width: 1024px) { .hero__inner { grid-template-columns: 1fr; padding: clamp(20px, 3vh, 40px) 24px; } .hero__stage { display: none; } .hero-heading { max-width: 10ch; } } /* Mobile hero: zoom OUT so the whole limousine is in frame (Commit 9). Portrait viewports crop a 16:9 cover video badly; contain shows the full car, anchored to the lower area so the text reads above it. Desktop hero is untouched. */ @media (max-width: 768px) { .hero__video { object-fit: contain; object-position: center 72%; } /* Keep the upper text dark for legibility, but ease the overlay over the lower band so the whole limousine reads. */ .hero__overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.62) 36%, rgba(0,0,0,0.22) 66%, rgba(0,0,0,0.5) 100%); } } @media (max-width: 520px) { .hero-heading { font-size: clamp(34px, min(12vw, 7vh), 80px); } .hero__sub { margin-bottom: clamp(10px, 2vh, 28px); } .hero__stats { gap: 18px; margin-top: clamp(12px, 2vh, 40px); } .hero__stat-num { font-size: 28px; } .hero__hint { display: none; } } /* Very short viewports (small phones, landscape) — compress so the whole hero + car fit */ @media (max-height: 700px) { .hero__inner { padding-top: 12px; padding-bottom: 12px; } .hero-heading { font-size: clamp(30px, min(8vw, 6.2vh), 80px); margin-bottom: 10px; } .hero__sub { font-size: 14px; line-height: 1.45; margin-bottom: 10px; } .hero__ctas { gap: 8px; } .hero__ctas .btn-pill { padding-top: 9px; padding-bottom: 9px; } .hero__stats { margin-top: 10px; gap: 16px; } .hero__stat-num { font-size: 24px; } .hero__hint { display: none; } } /* ── Homepage hero — MOBILE ONLY (≤768px) ───────────────────────── Centred three-line stack (small headline → main headline → sub), the main headline forced onto one line, and the whole copy block lifted to the top so the limousine stays clearly visible below. Appended after the earlier mobile rules so these win by source order. Desktop (>768px) is intentionally untouched. */ @media (max-width: 768px) { /* Fill the hero height so the copy stays at the top while the Trust Bar is pushed to the bottom — i.e. below the car, which is a lower-anchored background video layer (the car itself is untouched). */ .hero { align-items: stretch; } .hero__inner { display: flex; flex-direction: column; } .hero__text { max-width: none; margin: 0 auto; text-align: center; flex: 1 1 auto; display: flex; flex-direction: column; } /* Centre the content. */ .hero__label { justify-content: center; } .hero__ctas { justify-content: center; } /* Trust Bar drops below the car: pushed to the bottom of the hero, keeping the order CTAs → car → Trust Bar on mobile. */ /* Top-align the three stats so the gold numbers line up on ONE row no matter how many lines each label wraps to. The long labels ("5-Star Google Reviews", "Days a year") wrap to 2 lines while "Years" stays 1, and WebKit/iOS wraps them differently from Blink/Android — with the base flex-end (bottom) alignment that left the numbers at uneven heights on iOS. flex-start keeps the numbers aligned on every engine; centring each column keeps the number centred over its label. Mobile only — desktop (>768px, single-line labels) is unaffected. */ .hero__stats { justify-content: center; align-items: flex-start; margin-top: auto; } .hero__stat { align-items: center; text-align: center; } .hero__stat-sep { align-self: flex-start; margin-bottom: 0; } /* Hide the SEO H1 visually but keep it in the DOM for crawlers, so the visible stack is exactly the three requested lines. */ .hero__seo-h1 { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* Main headline on ONE line, sized as LARGE as possible to fill the phone width. The heading breaks out of the .hero__inner 24px side padding (100vw + calc() margins) down to a small 12px gutter, then a fluid vw font scales the text to fill that width without wrapping. 8.2vw keeps "Wedding Cars & Stretch Limousines" on one line with a safe margin at 360px (the tightest typical phone). */ .hero-heading { max-width: none; white-space: nowrap; /* Full-bleed to the phone width WITHOUT 100vw (which overflows on iOS): negate the .hero__inner 24px side padding so the box spans the viewport exactly. Same text room as before; can't exceed the screen. */ width: auto; margin-left: -24px; margin-right: -24px; padding-left: 12px; padding-right: 12px; box-sizing: border-box; font-size: clamp(26px, 8.2vw, 56px); } .hero__sub { max-width: none; margin-left: auto; margin-right: auto; } } /* Narrow AND short (landscape / small phones): shrink the single-line headline further so it still never overflows. Both conditions are required, so this never matches a short desktop window. */ @media (max-width: 768px) and (max-height: 700px) { /* Short screens (small/short portrait phones + landscape): still one line and as big as fits BOTH the width and the limited height — min(vw,vh) so it never overflows horizontally or eats the vertical space. */ .hero-heading { font-size: clamp(22px, min(8.2vw, 8vh), 48px); } } /* ============================================================ TRUST STRIP — 4 cols, gold accent icons ============================================================ */ .trust { position: relative; background: var(--color-bg); padding: 64px 28px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .trust__inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .trust__item { display: flex; gap: 18px; align-items: flex-start; padding: 12px 24px; position: relative; } .trust__item + .trust__item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 64px; background: var(--color-border); } .trust__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.30); display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); } .trust__body { display: flex; flex-direction: column; gap: 4px; } .trust__head { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .trust__sub { font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.5; color: rgba(240, 240, 240, 0.6); } @media (max-width: 1024px) { .trust__inner { grid-template-columns: repeat(2, 1fr); gap: 32px 0; } .trust__item:nth-child(3)::before { display: none; } } @media (max-width: 560px) { .trust { padding: 48px 20px; } .trust__inner { grid-template-columns: 1fr; gap: 24px; } .trust__item::before { display: none; } .trust__item { padding: 0 8px; } } /* ============================================================ OCCASIONS — dark bg, 8 clickable cards ============================================================ */ .occasions { background: var(--color-bg); color: #fff; padding: 120px 28px 140px; position: relative; overflow: hidden; /* clip the rotated decorative .beam so it can't overflow the viewport (iOS) */ border-top: 1px solid var(--color-border); } .occasions__inner { max-width: 1320px; margin: 0 auto; } .occasions__header { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: end; margin-bottom: 64px; } .occasions__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(56px, 7vw, 96px); line-height: 0.95; letter-spacing: 0.005em; color: #fff; margin: 16px 0 0; max-width: 16ch; } .occasions__intro { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65; color: rgba(240, 240, 240, 0.65); max-width: 42ch; padding-bottom: 6px; } .occasions__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .occ-card { display: flex; flex-direction: column; gap: 18px; color: #fff; transition: transform 400ms cubic-bezier(.4,0,.2,1); } .occ-card:hover { transform: translateY(-6px); } .occ-card__media { width: 100%; aspect-ratio: 1 / 1.1; border-radius: 18px; position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 30% 25%, rgba(var(--accent-rgb), 0.22) 0%, transparent 65%), linear-gradient(160deg, #1a1a22 0%, #0F1014 100%); border: 1px solid var(--color-border); } .occ-card__media::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--card-img); background-size: cover; background-position: center; transition: transform 0.5s ease; } .occ-card:hover .occ-card__media::before { transform: scale(1.05); } /* Homepage service cards use a real responsive (srcset) instead of the CSS background, so they stay sharp on desktop/retina. Same cover fill, position and hover-zoom as ::before. Other pages still use the ::before background above, so they are unaffected. */ .occ-card__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s ease; will-change: transform; backface-visibility: hidden; } .occ-card:hover .occ-card__img { transform: scale(1.05); } /* Cards with a real : use the photos' native 16:9 framing so the full limousine is visible end to end — long stretch vehicles span the frame and object-fit:cover (centred) no longer clips the front or rear. Scoped via :has() so any card without an keeps its original 1/1.1 ratio. */ .occ-card__media:has(.occ-card__img) { aspect-ratio: 1400 / 781; } .occ-card__media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.55) 100%); pointer-events: none; } .occ-card__index { position: absolute; top: 16px; right: 18px; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); z-index: 2; } .occ-card__name { font-family: 'DM Sans', sans-serif; font-size: 19px; font-weight: 600; color: #fff; letter-spacing: -0.005em; margin: 0; } .occ-card__desc { font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.55; color: rgba(240, 240, 240, 0.55); margin: -10px 0 0; } .occ-card__more { margin-top: 4px; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); display: inline-flex; align-items: center; gap: 6px; transition: gap 300ms; } .occ-card:hover .occ-card__more { gap: 12px; } @media (max-width: 1024px) { .occasions__header { grid-template-columns: 1fr; align-items: start; gap: 18px; margin-bottom: 48px; } .occasions__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 480px) { .occasions { padding: 80px 20px 100px; } } /* ============================================================ ABOUT — heading, body, CTA, Google review badge ============================================================ */ .about { position: relative; background: var(--color-dark); padding: 120px 28px 140px; border-top: 1px solid var(--color-border); overflow: hidden; isolation: isolate; } .about__inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center; } .about__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(48px, 5.6vw, 80px); line-height: 0.98; letter-spacing: 0.005em; color: #fff; margin: 16px 0 28px; max-width: 16ch; } .about__body { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.75; color: rgba(240, 240, 240, 0.78); margin: 0 0 36px; max-width: 56ch; } /* Google review badge card */ .google-badge { position: relative; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; padding: 40px 36px; display: flex; flex-direction: column; gap: 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .google-badge__head { display: flex; align-items: center; gap: 14px; } .google-badge__logo { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .google-badge__logo svg { width: 24px; height: 24px; } .google-badge__title { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .google-badge__score { display: flex; align-items: baseline; gap: 16px; } .google-badge__num { font-family: 'Bebas Neue', sans-serif; font-size: 84px; line-height: 1; letter-spacing: 0.01em; color: var(--color-accent); } .google-badge__stars { display: flex; flex-direction: column; gap: 6px; } .google-badge__stars-row { color: var(--color-accent); font-size: 22px; letter-spacing: 2px; line-height: 1; } .google-badge__count { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(240, 240, 240, 0.6); } .google-badge__count strong { color: #fff; font-weight: 600; } @media (max-width: 1024px) { .about__inner { grid-template-columns: 1fr; gap: 56px; } } @media (max-width: 520px) { .about { padding: 80px 20px 100px; } .google-badge { padding: 28px 22px; } .google-badge__num { font-size: 64px; } } /* ============================================================ FLEET — single grid, 11 vehicles ============================================================ */ .fleet { position: relative; background: var(--color-bg); padding: 120px 28px 140px; overflow: hidden; isolation: isolate; border-top: 1px solid var(--color-border); } .fleet__inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 2; } .fleet__header { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: end; margin-bottom: 56px; } .fleet__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(56px, 7vw, 96px); line-height: 0.95; letter-spacing: 0.005em; color: #fff; margin: 16px 0 0; } .fleet__intro { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65; color: rgba(240, 240, 240, 0.65); max-width: 38ch; padding-bottom: 6px; } .fleet__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .fleet-card { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 400ms cubic-bezier(.4,0,.2,1), border-color 400ms ease, box-shadow 400ms ease; } .fleet-card:hover { transform: translateY(-8px); border-color: rgba(var(--accent-rgb), 0.55); box-shadow: 0 30px 60px -30px rgba(var(--accent-rgb), 0.35); } .fleet-card__media { width: 100%; height: 240px; position: relative; background: radial-gradient(ellipse 60% 50% at 30% 30%, rgba(var(--accent-rgb), 0.18) 0%, transparent 60%), linear-gradient(135deg, #1a1a22 0%, #0f0f15 100%); overflow: hidden; } .fleet-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10, 10, 12, 0.55) 85%, rgba(10, 10, 12, 0.85) 100%), radial-gradient(ellipse 90% 70% at 50% 100%, rgba(10, 10, 12, 0.35) 0%, transparent 70%); pointer-events: none; z-index: 2; } .fleet-card__img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 8px; object-fit: contain; object-position: center; display: block; transition: transform 700ms cubic-bezier(.4,0,.2,1), filter 400ms ease; will-change: transform; } .fleet-card:hover .fleet-card__img { transform: scale(1.06); filter: brightness(1.05); } /* Package showcase composites fill the media frame edge-to-edge (the image is already a finished dark-studio scene, so no contain/padding). */ .fleet-card__media--showcase .fleet-card__img { object-fit: cover; padding: 0; } .fleet-card__badge { z-index: 3; } .fleet-card__badge { position: absolute; top: 16px; left: 16px; padding: 5px 11px; border-radius: 9999px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); } .fleet-card__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 8px; } .fleet-card__brand { font-family: 'DM Sans', sans-serif; font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); font-weight: 600; } .fleet-card__model { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 500; color: #fff; letter-spacing: -0.01em; line-height: 1.2; } .fleet-card__capacity { font-family: 'DM Sans', sans-serif; font-size: 14px; color: rgba(240, 240, 240, 0.55); } .fleet-card__footer { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; } .fleet__viewall { display: inline-flex; align-items: center; gap: 10px; margin-top: 56px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); transition: gap 300ms; } .fleet__viewall:hover { gap: 16px; } .fleet__viewall .arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.45); display: inline-flex; align-items: center; justify-content: center; transition: background 300ms, transform 350ms cubic-bezier(.4,0,.2,1); } .fleet__viewall:hover .arrow { background: rgba(var(--accent-rgb), 0.15); transform: rotate(45deg); } @media (max-width: 1024px) { .fleet__grid { grid-template-columns: repeat(2, 1fr); } .fleet__header { grid-template-columns: 1fr; gap: 18px; align-items: start; } } @media (max-width: 640px) { .fleet { padding: 80px 20px 100px; } .fleet__grid { grid-template-columns: 1fr; gap: 18px; } .fleet-card__media { height: 220px; } } /* ============================================================ HOW IT WORKS — 4 accordion rows ============================================================ */ .how { position: relative; background: var(--color-dark); padding: 120px 28px 140px; overflow: hidden; isolation: isolate; border-top: 1px solid var(--color-border); } .how__inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 2; } .how__header { max-width: 720px; margin-bottom: 64px; } .how__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(56px, 7vw, 96px); line-height: 0.95; letter-spacing: 0.005em; color: #fff; margin: 16px 0 0; max-width: 14ch; } .how__list { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.2); } .how-row { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding: 32px 0; cursor: pointer; transition: background 300ms; } .how-row:hover { background: rgba(255, 255, 255, 0.015); } .how-row__top { display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center; } .how-row__num { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(36px, 5vw, 56px); line-height: 1; color: var(--color-accent); letter-spacing: 0.04em; } .how-row__title { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(32px, 4.4vw, 52px); line-height: 1; letter-spacing: 0.01em; color: #fff; margin: 0; } .how-row__arrow { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform 400ms cubic-bezier(.4,0,.2,1), border-color 300ms, background 300ms; flex-shrink: 0; } .how-row.is-open .how-row__arrow { background: var(--color-accent); border-color: var(--color-accent); color: #0a0a0c; transform: rotate(135deg); } .how-row__panel { max-height: 0; overflow: hidden; transition: max-height 500ms cubic-bezier(.4,0,.2,1); } .how-row__panel-inner { padding: 24px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 48px; align-items: start; } .how-row.is-open .how-row__panel { max-height: 360px; } .how-row__body { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.7; color: rgba(240, 240, 240, 0.78); margin: 0; max-width: 60ch; } .how-row__tags { display: flex; flex-wrap: wrap; gap: 8px; } .how-row__tag { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 9999px; background: rgba(var(--accent-rgb), 0.05); font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .how__book { display: inline-flex; align-items: center; gap: 12px; margin-top: 56px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); transition: gap 300ms; } .how__book:hover { gap: 18px; } .how__book .arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.45); display: inline-flex; align-items: center; justify-content: center; transition: background 300ms, transform 350ms cubic-bezier(.4,0,.2,1); } .how__book:hover .arrow { background: rgba(var(--accent-rgb), 0.15); transform: rotate(45deg); } @media (max-width: 768px) { .how-row__panel-inner { grid-template-columns: 1fr; gap: 24px; } .how-row__top { gap: 20px; } .how-row__arrow { width: 44px; height: 44px; } .how-row.is-open .how-row__panel { max-height: 480px; } } @media (max-width: 520px) { .how { padding: 80px 20px 100px; } .how__header { margin-bottom: 40px; } } /* ============================================================ QUOTE FORM — booking enquiry + info sidebar ============================================================ */ .quote { position: relative; background: var(--color-bg); padding: 120px 28px 140px; border-top: 1px solid var(--color-border); overflow: hidden; isolation: isolate; } .quote__inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 2; } .quote__header { margin-bottom: 56px; max-width: 760px; } .quote__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(56px, 7vw, 96px); line-height: 0.95; letter-spacing: 0.005em; color: #fff; margin: 16px 0 16px; max-width: 14ch; } .quote__sub { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.6; color: rgba(240, 240, 240, 0.65); max-width: 56ch; } .quote__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: start; } .quote-form { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--color-border); border-radius: 22px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .quote-form .full { grid-column: 1 / -1; } .quote-field { display: flex; flex-direction: column; gap: 8px; } .quote-field label { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 240, 240, 0.75); } .quote-field label .req { color: var(--color-accent); margin-left: 2px; } .quote-field input, .quote-field select, .quote-field textarea { background: rgba(0, 0, 0, 0.32); border: 1px solid var(--color-border); border-radius: 12px; padding: 14px 16px; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.4; transition: border-color 200ms, background 200ms; width: 100%; } .quote-field input:focus, .quote-field select:focus, .quote-field textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.6); background: rgba(0, 0, 0, 0.45); } .quote-field textarea { min-height: 120px; resize: vertical; } .quote-field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; } .quote-field select option { background: #0a0a0c; color: #fff; } .quote-submit { grid-column: 1 / -1; margin-top: 8px; } .quote-aside { background: var(--color-dark); border: 1px solid var(--color-border); border-radius: 22px; padding: 40px 36px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 120px; } .quote-aside__title { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.02em; color: #fff; margin: 0; } .quote-aside__row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--color-border); } .quote-aside__row:first-of-type { border-top: none; padding-top: 0; } .quote-aside__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.30); display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); } .quote-aside__label { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 240, 240, 0.55); margin-bottom: 2px; } .quote-aside__value { font-family: 'DM Sans', sans-serif; font-size: 15px; color: #fff; line-height: 1.45; } .quote-aside__value a { color: #fff; transition: color 300ms; } .quote-aside__value a:hover { color: var(--color-accent); } @media (max-width: 1024px) { .quote__grid { grid-template-columns: 1fr; gap: 28px; } .quote-aside { position: static; } } @media (max-width: 640px) { .quote { padding: 80px 20px 100px; } .quote-form { padding: 28px 22px; grid-template-columns: 1fr; } } /* ============================================================ TESTIMONIALS — 5-card carousel ============================================================ */ .testi { position: relative; background: var(--color-dark); padding: 120px 28px 140px; overflow: hidden; isolation: isolate; border-top: 1px solid var(--color-border); } .testi__inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 2; } .testi__header { margin-bottom: 56px; max-width: 720px; } .testi__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(56px, 7vw, 96px); line-height: 0.95; letter-spacing: 0.005em; color: #fff; margin: 16px 0 0; max-width: 12ch; } .testi__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: stretch; } .testi__media { border-radius: 18px; overflow: hidden; position: relative; min-height: 500px; background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(var(--accent-rgb), 0.32) 0%, transparent 65%), radial-gradient(ellipse 50% 40% at 75% 80%, rgba(var(--accent-rgb), 0.18) 0%, transparent 65%), linear-gradient(160deg, #1a1a22 0%, #0a0a0c 100%); } .testi__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.45) 100%); } .testi__media-mark { position: absolute; left: 32px; bottom: 32px; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85); z-index: 2; } .testi__media-mark span { display: block; color: var(--color-accent); font-size: 13px; letter-spacing: 0.22em; margin-bottom: 4px; } .testi__media-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(var(--accent-rgb), 0.35); font-family: 'Bebas Neue', sans-serif; font-size: 96px; line-height: 1; user-select: none; } .testi__card { position: relative; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 18px; padding: 44px 44px 36px; display: flex; flex-direction: column; justify-content: space-between; min-height: 500px; } .testi__slides { position: relative; flex: 1; } .testi__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; display: flex; flex-direction: column; gap: 24px; } .testi__slide.is-active { opacity: 1; position: relative; } .testi__quote-mark { font-family: 'Bebas Neue', sans-serif; font-size: 72px; line-height: 0.7; color: var(--color-accent); } .testi__quote { font-family: 'DM Sans', sans-serif; font-size: 18px; line-height: 1.65; color: rgba(240, 240, 240, 0.92); margin: 0; font-style: italic; font-weight: 400; } .testi__attr { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .testi__name { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .testi__meta { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(240, 240, 240, 0.6); } .testi__stars { display: inline-flex; gap: 2px; color: var(--color-accent); font-size: 16px; letter-spacing: 1px; } .testi__nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; row-gap: 16px; margin-top: 28px; } /* "Trusted by 160+ Sydney clients" relocated into the card footer (was its own box) */ .testi__trust { margin-right: auto; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.08em; line-height: 1.05; color: rgba(255, 255, 255, 0.85); } .testi__trust span { display: block; color: var(--color-accent); font-size: 13px; letter-spacing: 0.22em; margin-bottom: 2px; } .testi__nav-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background 300ms, border-color 300ms, color 300ms; } .testi__nav-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #0a0a0c; } .testi__counter { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(240, 240, 240, 0.5); letter-spacing: 0.08em; margin-left: 8px; } .testi__counter strong { color: #fff; font-weight: 500; } .testi__viewall { display: inline-flex; align-items: center; gap: 10px; margin-top: 48px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); transition: gap 300ms; } .testi__viewall:hover { gap: 16px; } .testi__viewall .arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.45); display: inline-flex; align-items: center; justify-content: center; transition: background 300ms, transform 350ms cubic-bezier(.4,0,.2,1); } .testi__viewall:hover .arrow { background: rgba(var(--accent-rgb), 0.15); transform: rotate(45deg); } /* Clickable Google-source badge, top-right of the testimonial card */ .testi__google { position: absolute; top: 28px; right: 28px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: rgba(240, 240, 240, 0.82); text-decoration: none; transition: border-color 300ms ease, background 300ms ease, color 300ms ease; } .testi__google:hover { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(255, 255, 255, 0.10); color: #fff; } .testi__google-logo { width: 16px; height: 16px; display: block; flex-shrink: 0; } @media (max-width: 900px) { .testi__grid { grid-template-columns: 1fr; gap: 18px; } .testi__media { min-height: 280px; } .testi__card { min-height: 0; padding: 32px 28px; } .testi__google { top: 20px; right: 20px; } } @media (max-width: 480px) { .testi { padding: 80px 20px 100px; } .testi__google { top: 16px; right: 16px; padding: 6px 10px; } .testi__google-text { display: none; } } /* ============================================================ LONG-FORM SEO CONTENT ============================================================ */ .seo { position: relative; background: var(--color-dark); padding: 120px 28px 140px; border-top: 1px solid var(--color-border); overflow: hidden; isolation: isolate; } .seo__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } .seo__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(48px, 6vw, 84px); line-height: 0.98; letter-spacing: 0.005em; color: #fff; margin: 18px 0 36px; max-width: 20ch; } .seo__body { font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.85; color: rgba(240, 240, 240, 0.8); max-width: 68ch; margin: 0 0 36px; } .seo__cta { margin-top: 8px; } @media (max-width: 520px) { .seo { padding: 80px 20px 100px; } } /* ============================================================ MAP + LOCATIONS ============================================================ */ .map { position: relative; background: var(--color-bg); padding: 120px 28px 140px; border-top: 1px solid var(--color-border); } .map__inner { max-width: 1320px; margin: 0 auto; } .map__header { margin-bottom: 48px; max-width: 720px; } .map__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(48px, 6vw, 84px); line-height: 0.98; letter-spacing: 0.005em; color: #fff; margin: 16px 0 0; max-width: 18ch; } .map__frame { border-radius: 22px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-dark); filter: grayscale(0.4) brightness(0.85) contrast(1.05); transition: filter 600ms; } .map__frame:hover { filter: grayscale(0.1) brightness(0.95) contrast(1.05); } .map__frame iframe { display: block; width: 100%; height: 460px; border: 0; } .map__locs-title { font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240, 240, 240, 0.55); margin: 56px 0 24px; } .map__locs { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px; } .map__locs li { border-top: 1px solid var(--color-border); padding: 14px 0; font-family: 'DM Sans', sans-serif; font-size: 15px; color: rgba(240, 240, 240, 0.78); display: flex; align-items: center; gap: 10px; transition: color 300ms; } .map__locs li:hover { color: #fff; } .map__locs li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; } @media (max-width: 900px) { .map__locs { grid-template-columns: repeat(2, 1fr); } .map__frame iframe { height: 360px; } } @media (max-width: 520px) { .map { padding: 80px 20px 100px; } /* two suburbs per line on mobile so the list isn't so long (Commit 16) */ .map__locs { grid-template-columns: repeat(2, 1fr); gap: 8px 16px; } .map__frame iframe { height: 300px; } } /* ============================================================ FAQ ACCORDION ============================================================ */ .faq { position: relative; background: var(--color-dark); padding: 120px 28px 140px; border-top: 1px solid var(--color-border); overflow: hidden; isolation: isolate; } .faq__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } .faq__header { margin-bottom: 48px; max-width: 720px; } .faq__heading { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(48px, 6vw, 84px); line-height: 0.98; letter-spacing: 0.005em; color: #fff; margin: 16px 0 0; max-width: 16ch; } .faq__list { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.18); } .faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding: 28px 0; cursor: pointer; transition: background 300ms; } .faq-item:hover { background: rgba(255, 255, 255, 0.015); } .faq-item__top { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; } .faq-item__q { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: 0.01em; color: #fff; margin: 0; } .faq-item__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: transform 400ms cubic-bezier(.4,0,.2,1), background 300ms, border-color 300ms, color 300ms; flex-shrink: 0; } .faq-item.is-open .faq-item__arrow { background: var(--color-accent); border-color: var(--color-accent); color: #0a0a0c; transform: rotate(45deg); } .faq-item__panel { max-height: 0; overflow: hidden; transition: max-height 500ms cubic-bezier(.4,0,.2,1); } .faq-item__a { padding: 18px 0 4px; font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.75; color: rgba(240, 240, 240, 0.78); max-width: 70ch; margin: 0; } .faq-item.is-open .faq-item__panel { max-height: 420px; } @media (max-width: 520px) { .faq { padding: 80px 20px 100px; } } /* ============================================================ CTA BAND (pre-footer) — recovered from commit 68f4ba2 ============================================================ */ .cta-band { background: var(--color-accent); color: #0a0a0c; padding: 22px 28px; } .cta-band__inner { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; } .cta-band__text { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 500; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 14px; } .cta-band__text .sep { opacity: 0.4; } .cta-band__phone { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: 0.02em; color: #0a0a0c; transition: opacity 300ms; } .cta-band__phone:hover { opacity: 0.8; } @media (max-width: 700px) { .cta-band__inner { flex-direction: column; gap: 8px; } .cta-band__text { font-size: 15px; gap: 8px; flex-wrap: wrap; justify-content: center; } .cta-band__phone { font-size: 17px; } } /* ============================================================ FOOTER — contact block, socials, 4 cols ============================================================ */ .foot { position: relative; background: var(--color-dark); padding: 96px 28px 40px; overflow: hidden; isolation: isolate; border-top: 1px solid var(--color-border); } .foot__inner { max-width: 1320px; margin: 0 auto; position: relative; z-index: 2; } .foot__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); margin-bottom: 56px; align-items: center; } .foot__contact-head { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 4.4vw, 56px); line-height: 0.98; letter-spacing: 0.01em; color: #fff; margin: 0 0 14px; max-width: 14ch; } .foot__contact-sub { font-family: 'DM Sans', sans-serif; font-size: 14px; color: rgba(240, 240, 240, 0.6); line-height: 1.6; max-width: 42ch; margin: 0; } .foot__contact-info { display: flex; flex-direction: column; gap: 18px; justify-self: end; } .foot__contact-row { display: flex; gap: 14px; align-items: center; } .foot__contact-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.10); border: 1px solid rgba(var(--accent-rgb), 0.30); display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); flex-shrink: 0; } .foot__contact-label { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 240, 240, 0.55); display: block; } .foot__contact-value { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 600; color: #fff; letter-spacing: 0.01em; transition: color 300ms; } .foot__contact-value:hover { color: var(--color-accent); } .foot__socials-label { display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); margin-top: 18px; } .foot__socials { display: flex; gap: 10px; margin-top: 8px; } .foot__social { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); transition: background 300ms, color 300ms, border-color 300ms, transform 300ms; } .foot__social:hover { background: var(--color-accent); border-color: var(--color-accent); color: #0a0a0c; transform: translateY(-2px); } .foot__top { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: end; padding-bottom: 56px; } .foot__brand-wrap { display: flex; flex-direction: column; gap: 16px; } .foot__brand { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.06em; color: #fff; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; } .foot__brand-mark { width: 36px; height: 36px; color: var(--color-accent); } .foot__brand-mark svg { width: 100%; height: 100%; } .foot__brand span { color: var(--color-accent); } .foot__brand-logo { height: 52px; width: auto; max-width: 100%; display: block; } .foot__tag { font-family: 'DM Sans', sans-serif; font-size: 14px; color: rgba(240, 240, 240, 0.6); max-width: 360px; line-height: 1.55; } .foot__sub { display: flex; flex-direction: column; gap: 10px; } .foot__sub-label { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 240, 240, 0.55); } .foot__sub-form { display: flex; gap: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--color-border); border-radius: 9999px; padding: 6px 6px 6px 20px; max-width: 520px; } .foot__sub-input { flex: 1; background: none; border: none; outline: none; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; padding: 8px 0; min-width: 0; } .foot__sub-input::placeholder { color: rgba(240, 240, 240, 0.4); } .foot__sub-btn { padding: 10px 22px; border-radius: 9999px; background: var(--color-accent); color: #0a0a0c; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity 300ms; white-space: nowrap; } .foot__sub-btn:hover { opacity: 0.85; } .foot__sub-note { font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(240, 240, 240, 0.45); } .foot__divider { height: 1px; background: rgba(255, 255, 255, 0.18); margin: 0 0 56px; } .foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 56px; } .foot-col__title { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; margin: 0 0 18px; } .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .foot-col a { font-family: 'DM Sans', sans-serif; font-size: 14px; color: rgba(240, 240, 240, 0.62); transition: color 300ms; } .foot-col a:hover { color: var(--color-accent); } .foot__bottom { border-top: 1px solid var(--color-border); padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(240, 240, 240, 0.48); } .foot__bottom a { color: rgba(240, 240, 240, 0.62); transition: color 300ms; } .foot__bottom a:hover { color: var(--color-accent); } .foot__bottom .sep { margin: 0 8px; opacity: 0.35; } .foot__credit { display: inline-flex; gap: 6px; align-items: center; } .foot__credit a { color: var(--color-accent); border-bottom: 1px dotted rgba(var(--accent-rgb), 0.4); padding-bottom: 1px; } @media (max-width: 1024px) { .foot__contact { grid-template-columns: 1fr; gap: 36px; } .foot__contact-info { justify-self: start; } .foot__top { grid-template-columns: 1fr; gap: 32px; align-items: start; } .foot__grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } /* Mobile/tablet only: the "Any Event" (services) and "Locations" footer lists split into two balanced columns instead of one tall column. Living inside this max-width:1024px block means the desktop footer is untouched. Targets the 2nd and 3rd .foot-col (Any Event, Locations); the 1st (Links) stays a single column. Order reads down the left column then the right (column-fill: balance is the default). */ .foot-col:nth-child(2) ul, .foot-col:nth-child(3) ul { display: block; columns: 2; column-gap: 24px; } .foot-col:nth-child(2) li, .foot-col:nth-child(3) li { margin-bottom: 10px; break-inside: avoid; } } @media (max-width: 520px) { .foot { padding: 64px 20px 32px; } .foot__grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 48px; } .foot__brand { font-size: 26px; } } /* ============================================================ MULTI-PAGE ADDITIONS (active nav, inner-page banner, CTA, gallery, wedding/feature, 7-item nav fit) ============================================================ */ .nav-pill.is-active { background: rgba(var(--accent-rgb), 0.18); color: #fff; } /* Fit 7 nav items: tighten pills, drop the separate phone link */ @media (min-width: 1241px) { .nav-pills { gap: 2px; padding: 4px 6px; } .nav-pill { padding: 9px 14px; font-size: 14px; letter-spacing: 0.02em; } .nav-inner { gap: 16px; } } @media (max-width: 1240px) { .nav-burger { display: inline-flex; } .nav-pills { display: none; } } /* Inner-page banner */ .page-hero { position: relative; width: 100%; /* Behaves like the homepage hero: sits BELOW the fixed navbar (no overlap), a single clean 16:9 image fills the whole section edge-to-edge via cover. The images are 16:9 with the car framed with margin, so the whole vehicle stays visible and there is no empty space or doubled-up image. */ margin-top: var(--header-height, 120px); aspect-ratio: 16 / 9; max-height: 720px; display: flex; align-items: center; justify-content: center; padding: 40px 24px; text-align: center; /* No border/strip on the banner — the edge-fade overlay (below) dissolves the image's four edges straight into the page background, so there is no box. */ background: var(--color-bg); overflow: hidden; /* Reusable four-edge fade: opaque page-bg exactly at each edge ramping to fully transparent a short way in, so all four edges of the banner dissolve into the page. Uses rgba(10,10,12,0) (bg colour at 0 alpha, NOT `transparent`) to avoid a grey/black tinge from premultiplied interpolation. Painted as an OVERLAY on ::after — it changes no image geometry (size/position/aspect untouched). */ --edge-fade: linear-gradient(to right, var(--color-bg) 0, rgba(10, 10, 12, 0) 7%, rgba(10, 10, 12, 0) 93%, var(--color-bg) 100%), linear-gradient(to bottom, var(--color-bg) 0, rgba(10, 10, 12, 0) 9%, rgba(10, 10, 12, 0) 91%, var(--color-bg) 100%); } /* Single full-bleed banner image — fills the whole header, no gaps, no duplicate */ .page-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--hero-img, none); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Subtle overlay so the centered title stays readable over the car, PLUS the edge-fade frame on top so the banner's four edges blend into the page (no box). */ .page-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--edge-fade), radial-gradient(ellipse 72% 64% at 50% 60%, rgba(10, 10, 12, 0) 0%, rgba(10, 10, 12, 0) 30%, rgba(10, 10, 12, 0.82) 100%), linear-gradient(180deg, rgba(10, 10, 12, 0.52) 0%, rgba(10, 10, 12, 0.22) 42%, rgba(10, 10, 12, 0.46) 100%); } .page-hero__inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; } /* Showcase variant (Fleet, Services): text anchored to the top so it never sits on the car; the car is nudged down a touch so the whole vehicle + tires stay clear. */ .page-hero--showcase { align-items: flex-start; } .page-hero--showcase::before { background-position: center 62%; } /* Services: compact one-line title, content near the top, clear of the car (overlay unchanged) */ .page-hero--toptext { align-items: flex-start; padding-top: 20px; } .page-hero--toptext::before { background-position: center var(--hero-pos, 42%); } .page-hero--toptext .page-hero__title { white-space: nowrap; font-size: clamp(16px, 5vw, 50px); margin: 0; } .page-hero--toptext .page-hero__sub { font-size: clamp(14px, 1.9vw, 18px); margin: 12px auto 0; color: #fff; } @media (max-width: 768px) { /* Reveal the desktop subheading on mobile too (matches desktop copy), sized/spaced for small screens so it clears the title and the car. */ .page-hero--toptext .page-hero__sub { display: block; font-size: 14px; line-height: 1.5; margin: 10px auto 0; max-width: 40ch; } } /* Wedding banners only: zoom the car photo out (smaller) and sit it lower so the heading + subtext clear the vehicle. Frame size + dark backdrop unchanged. A left/right dark gradient (color-matched to the bg) is layered over the photo so its side edges — which sit at 11%/89% — fade seamlessly into the surrounding background, giving the illusion of a single full-width, edge-to-edge banner. */ .page-hero--carzoom::before { background-image: linear-gradient(90deg, #0a0a0c 0%, #0a0a0c 11%, rgba(10, 10, 12, 0) 17%, rgba(10, 10, 12, 0) 83%, #0a0a0c 89%, #0a0a0c 100%), var(--hero-img); background-size: 100% 100%, 78% auto; background-position: center center, center bottom; background-repeat: no-repeat, no-repeat; } .page-hero--showcase::after { background: var(--edge-fade), radial-gradient(ellipse 90% 50% at 50% 0%, rgba(var(--accent-rgb), 0.18) 0%, transparent 55%), linear-gradient(180deg, rgba(10, 10, 12, 0.88) 0%, rgba(10, 10, 12, 0.50) 18%, rgba(10, 10, 12, 0.0) 40%, rgba(10, 10, 12, 0.0) 78%, rgba(10, 10, 12, 0.30) 100%); } @media (max-width: 768px) { .page-hero { aspect-ratio: 3 / 2; max-height: none; } /* On mobile the car fills the full height, so keep the text footprint minimal — compact title in a darker top band, descriptive sub hidden — so the whole car stays clear of the text. */ .page-hero--showcase .page-hero__sub { display: none; } .page-hero--showcase .page-hero__title { font-size: clamp(34px, 9vw, 52px); } .page-hero--showcase::after { background: var(--edge-fade), radial-gradient(ellipse 95% 45% at 50% 0%, rgba(var(--accent-rgb), 0.16) 0%, transparent 55%), linear-gradient(180deg, rgba(10, 10, 12, 0.90) 0%, rgba(10, 10, 12, 0.55) 22%, rgba(10, 10, 12, 0.0) 42%, rgba(10, 10, 12, 0.0) 72%, rgba(10, 10, 12, 0.28) 100%); } } .page-hero .label-bracket { justify-content: center; } .page-hero__title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(46px, 8vw, 92px); line-height: 0.96; letter-spacing: 0.01em; color: #fff; margin: 14px 0 0; } .page-hero__sub { font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.6; color: rgba(255, 255, 255, 0.6); max-width: 640px; margin: 18px auto 0; } @media (max-width: 768px) { .page-hero { padding-left: 20px; padding-right: 20px; } } /* Desktop only: drop the hero car into the lower portion of the banner so the centered title + subheading always sit ABOVE the vehicle (on wide screens the full-bleed car previously grew taller than the hero and rose into the text). Car is sized by hero height and bottom-anchored; a mask fades the banner's studio margins so the smaller image blends seamlessly. Mobile is untouched. */ @media (min-width: 769px) { .page-hero--toptext::before { background-image: var(--hero-img); background-size: auto 72%; background-position: center bottom; background-repeat: no-repeat; /* Feather ALL FOUR edges of the studio photo to transparent so the image dissolves into the page background on every side (no hard rectangle) — and the two intersecting fades round the corners softly. Generous bands give a gentle feather; the centre (incl. the whole vehicle) stays fully opaque. Mask tracks the image (same size/position). */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0, #000 22%, #000 80%, transparent 100%); -webkit-mask-size: auto 72%, auto 72%; mask-size: auto 72%, auto 72%; -webkit-mask-position: center bottom, center bottom; mask-position: center bottom, center bottom; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; } } /* Mobile: feather the studio-photo banners into the page too (no box at any width). Two geometries on small screens: • plain toptext = full-bleed cover photo → feather top + bottom only (the sides already reach the screen edges, so leave them flush — no new black margins). • carzoom = contained 78%-wide photo → feather all four edges with the mask tracking the image (78% auto, bottom-anchored) so its real edges dissolve and the corners round softly. Scene pages keep mask-image:none (their .page-hero.page-hero--scene rule has higher specificity), so the individual service pages are untouched. */ @media (max-width: 768px) { .page-hero--toptext::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .page-hero--toptext.page-hero--carzoom::before { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(180deg, transparent 0, #000 19%, #000 81%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(180deg, transparent 0, #000 19%, #000 81%, transparent 100%); -webkit-mask-size: 78% auto, 78% auto; mask-size: 78% auto, 78% auto; -webkit-mask-position: center bottom, center bottom; mask-position: center bottom, center bottom; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; } } /* ── Fleet landing hero (the 6-car montage) — FULL-BLEED, desktop ───────────── The montage IS a clean, edge-to-edge cinematic scene (showroom + full car lineup, no baked-in margins), so treat it exactly like the service SCENE banners: cover-fill the whole band — no contain, no edge-feather mask, no vignette — with a soft top scrim behind the heading. The band is given the montage's own aspect ratio (2400/1018 ≈ 2.36:1) so `cover` fills corner-to- corner with essentially no crop — every car stays visible — and it lands ~611px tall at 1440w, matching the service banners' 620px band height. This OVERRIDES the earlier .page-hero--carzoom 78%-contain draw + the 4-edge mask (higher specificity, later source order). Fleet-only (.page-hero--fleetmontage); no service/vehicle page carries this class, so nothing else is affected. */ @media (min-width: 769px) { .page-hero--fleetmontage.page-hero--toptext { aspect-ratio: 2400 / 1018; max-height: 660px; } .page-hero--fleetmontage.page-hero--toptext::before { background-image: var(--hero-img); background-size: cover; /* fills the band edge-to-edge */ background-position: center; background-repeat: no-repeat; -webkit-mask-image: none; /* drop the 4-edge feather → no black fade */ mask-image: none; } /* Readability: a single soft top scrim behind the top-centred heading only — the same treatment the service scene banners use. No vignette, no edge-fade; the photo reaches all four edges at full brightness below the heading. */ .page-hero--fleetmontage.page-hero--toptext::after { background: linear-gradient(180deg, rgba(10, 10, 12, 0.82) 0%, rgba(10, 10, 12, 0.60) 15%, rgba(10, 10, 12, 0.28) 28%, rgba(10, 10, 12, 0.0) 42%); } } /* MOBILE ONLY — /fleet/ hero swaps the wide 6-car montage for ONE bright hero car. The montage shrinks to a tiny dark, contained strip on phones and clashes with the bright single-car fleet cards below; here we cover-fill the hero with a single centred car (reusing the existing Gullwing cinematic banner). Desktop (>768px) is untouched — it keeps the montage, its 2400/1018 sizing and the edge-feather masks. NOTE: --hero-img is set inline on the element, so a stylesheet custom-property override can't win — we override background-image on the ::before directly. */ @media (max-width: 768px) { /* MOBILE ONLY — /fleet/ hero: clean STACKED layout, no text-on-car overlay. The hero becomes a flex column: heading + sub-heading sit in the black at the top, then the single Gullwing banner is shown WHOLE (contain) full-bleed below, then the fleet grid. The image pseudo (::before) is turned into a normal flex item and ordered BELOW the text; the ::after darkening scrim is dropped since nothing overlays the car now. Desktop (>768px) is untouched — it keeps the montage and the overlaid-text hero. */ .page-hero.page-hero--fleetmontage { display: flex; flex-direction: column; align-items: stretch; aspect-ratio: auto; min-height: 0; padding: 26px 0 0; /* no side padding → image is full-bleed */ } .page-hero--fleetmontage .page-hero__inner { order: 0; padding: 0 20px; /* keep the text off the screen edges */ } .page-hero--fleetmontage.page-hero--toptext.page-hero--carzoom::before { order: 1; /* image below the text */ position: static; /* was absolute inset:0 (overlay) */ width: 100%; /* Use the SAME full fleet-lineup montage as desktop, at its native 2400/1018 ratio and full width → the whole lineup reads (all cars visible), no squish, no crop, no letterbox bands; it's just shorter on a narrow phone. */ aspect-ratio: 2400 / 1018; margin-top: 18px; background-image: url('/assets/banner-fleet-montage-cinematic.jpg'); background-size: cover; /* ratio matches box → exact fill, no distortion */ background-position: center; background-repeat: no-repeat; -webkit-mask-image: none; /* drop the 78% carzoom framing + feather */ mask-image: none; } .page-hero--fleetmontage::after { display: none; } /* no overlay scrim needed */ } /* Individual service pages (airport, cruise, birthday, concert, school formal, corporate, party, hen's) — the service SCENE photo IS the hero background: full-bleed cover at every width so it reaches the band edges (no letterbox / black box). Higher specificity (.page-hero.page-hero--scene) overrides the toptext studio-margin sizing + mask above, so the image is never shrunk. The image file, its --hero-pos framing and the band dimensions are unchanged. */ .page-hero.page-hero--scene::before { background-image: var(--hero-img); background-size: cover; background-position: center var(--hero-pos, 50%); background-repeat: no-repeat; /* no studio-margin mask — the scene fills the whole band */ -webkit-mask-image: none; mask-image: none; } /* Readability over a photographic scene: a SINGLE soft pool of shade behind the top-centred headline/subheading only — a radial gradient anchored at top-centre that fades fully clear toward the sides and through the middle/bottom. No --edge-fade and no bottom floor, so the photo reaches the left/right/top edges and the lower area at full brightness with no vignette. */ .page-hero.page-hero--scene::after { background: radial-gradient(ellipse 78% 58% at 50% 0%, rgba(10, 10, 12, 0.60) 0%, rgba(10, 10, 12, 0.34) 38%, rgba(10, 10, 12, 0.0) 72%); } /* Fleet vehicle banners: the whole banner (and the whole vehicle) must be visible on load with no scroll. Fill the viewport height minus the fixed nav so the band bottom lands at the fold; cover + --hero-pos:82% keeps the full vehicle in frame across common window heights (1080/900/800). Desktop only — mobile keeps its short 3:2 band (already well within the fold). The stats live in a separate section below the hero, so height is unaffected. Reusable fleet-banner standard. */ @media (min-width: 769px) { /* One fit-to-screen banner standard, shared by the 11 vehicle pages (--vehfit) AND the Services + Location scene banners (--scene): the band bottom lands at the fold, so the whole hero and the whole car are on screen at load with no scrolling, and the framing is the same on every desktop. Explicit height also disables the base .page-hero aspect-ratio/max-height sizing for these heroes. */ .page-hero--vehfit, .page-hero--scene { height: calc(100vh - var(--header-height, 91px)); height: calc(100dvh - var(--header-height, 91px)); max-height: none; } } /* Keep the heading/subheading in the clear zone at the very top of the vehicle banner, above the car, and readable via a soft dark scrim that fades out before the vehicle — so the text sits above the vehicle, not on it. Overrides the --scene top shade (higher specificity + later in source). Standard for all fleet vehicle banners. */ .page-hero.page-hero--vehfit::after { background: linear-gradient(180deg, rgba(10, 10, 12, 0.86) 0, rgba(10, 10, 12, 0.66) 64px, rgba(10, 10, 12, 0.30) 116px, rgba(10, 10, 12, 0.0) 176px); } .page-hero--vehfit.page-hero--toptext { padding-top: 10px; } .page-hero--vehfit .page-hero__sub { margin-top: 8px; } /* Home CTA band */ .home-cta { padding: 110px 28px; text-align: center; border-top: 1px solid var(--color-border); background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(var(--accent-rgb), 0.12) 0%, transparent 65%), var(--color-bg); } .home-cta__inner { max-width: 760px; margin: 0 auto; } .home-cta .label-bracket { justify-content: center; } .home-cta__title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 5.5vw, 58px); line-height: 1.02; color: #fff; margin: 14px 0 0; } .home-cta__body { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.6); margin: 18px auto 32px; max-width: 600px; } .home-cta__actions { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; } /* Wedding / generic two-column feature */ .feature { padding: 100px 28px; } .feature__inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .feature__title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 5vw, 60px); line-height: 1.0; color: #fff; margin: 14px 0 22px; } .feature__copy p { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.62); margin: 0 0 16px; } .feature__list { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 10px; } .feature__list li { font-family: 'DM Sans', sans-serif; font-size: 15px; color: rgba(255,255,255,0.8); padding-left: 26px; position: relative; } .feature__list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); } .feature__media { border-radius: 20px; overflow: hidden; border: 1px solid var(--color-border); } .feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 900px) { .feature { padding: 70px 20px; } .feature__inner { grid-template-columns: 1fr; gap: 32px; } /* Mobile-only section reorder (vehicle pages): show the FEATURES text box first and push the photo GALLERY to the very bottom. .feature__media (carousel) and .feature__copy (label, FEATURES chips, heading, description, the "Any Occasion" copy and the enquire CTA — all nested inside .feature__copy) are the only two grid items, so swapping their `order` gives: hero → features text → Any Occasion → enquire CTA → gallery. Desktop (>900px, 2-col grid) sets no order, so the photo-beside-copy layout is untouched. One carousel instance — no duplication. */ .feature__copy { order: 0; } .feature__media { order: 1; } } /* ===== Vehicle photo gallery / carousel (fills the feature media slot) ===== */ .gallery { position: relative; width: 100%; } .gallery__viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0a0c; } .gallery__track { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; } .gallery__slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; } .gallery .gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(10,10,12,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s ease, color .2s ease; } .gallery__nav:hover, .gallery__nav:focus-visible { background: var(--color-accent, #C9A84C); color: #0a0a0c; } .gallery__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .gallery__nav svg { width: 20px; height: 20px; pointer-events: none; } .gallery__nav--prev { left: 12px; } .gallery__nav--next { right: 12px; } .gallery__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 44px; } .gallery__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,0.45); transition: background .2s ease, transform .2s ease; } .gallery__dot[aria-selected="true"] { background: var(--color-accent, #C9A84C); transform: scale(1.3); } .gallery__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .gallery__count { position: absolute; top: 10px; right: 12px; z-index: 3; font: 600 12px/1 'DM Sans', sans-serif; letter-spacing: .04em; color: #fff; background: rgba(10,10,12,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 6px 9px; border-radius: 999px; } .gallery[data-single] .gallery__nav, .gallery[data-single] .gallery__dots, .gallery[data-single] .gallery__count { display: none; } /* --fit: gallery mixes landscape + portrait photos; show the whole car (never crop). */ .gallery--fit .gallery__viewport { aspect-ratio: 3 / 2; background: #0a0a0c; } .gallery--fit .gallery__slide img { object-fit: contain; } @media (max-width: 900px) { .gallery__nav { width: 40px; height: 40px; } } @media (prefers-reduced-motion: reduce) { .gallery__track { transition: none; } } /* Vehicle spec chips — display badges for the per-vehicle FEATURES list. Non-interactive pills (not links/CTAs); reflow as a responsive wrapping grid. */ .spec-chips { list-style: none; padding: 0; margin: 18px 0 34px; display: flex; flex-wrap: wrap; gap: 10px; } .spec-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 13px; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; color: rgba(255,255,255,0.86); background: rgba(var(--accent-rgb), 0.07); border: 1px solid rgba(var(--accent-rgb), 0.22); border-radius: 999px; white-space: nowrap; cursor: default; transition: background 0.25s ease, border-color 0.25s ease; } .spec-chip:hover { background: rgba(var(--accent-rgb), 0.13); border-color: rgba(var(--accent-rgb), 0.4); } .spec-chip__ic { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-accent); } @media (max-width: 480px) { .spec-chips { gap: 8px; } .spec-chip { padding: 7px 13px 7px 11px; font-size: 12.5px; } } /* Localized services grid — per-location "Our Services in {Suburb}" section. Responsive card grid; each card links to the matching Sydney-wide service page. */ .loc-services { padding: 16px 28px 96px; position: relative; overflow: hidden; } .loc-services__inner { max-width: 1320px; margin: 0 auto; } .loc-services__inner > .label-bracket { margin-bottom: 12px; } .loc-services__heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 4.4vw, 46px); letter-spacing: 0.01em; color: #fff; margin: 0 0 30px; line-height: 1.04; } .loc-services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; } .loc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; padding: 26px 24px; border-radius: 16px; background: var(--color-bg-raised); border: 1px solid var(--color-border); text-decoration: none; color: inherit; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; } .loc-card:hover { border-color: rgba(var(--accent-rgb), 0.45); background: var(--color-surface); transform: translateY(-3px); } .loc-card__ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.22); } .loc-card__ic svg { width: 20px; height: 20px; color: var(--color-accent); } .loc-card__title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.02em; line-height: 1.08; color: #fff; margin: 3px 0 0; } .loc-card__desc { font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.6); margin: 0; } .loc-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; padding-top: 4px; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); } .loc-card__more svg { width: 13px; height: 13px; transition: transform 0.25s ease; } .loc-card:hover .loc-card__more svg { transform: translate(2px, -2px); } @media (max-width: 560px) { .loc-services { padding: 6px 20px 72px; } .loc-services__grid { grid-template-columns: 1fr; gap: 14px; } .loc-card { padding: 22px 20px; } } /* Gallery link strip (About page) */ .gallery-cta { padding: 70px 28px; text-align: center; border-top: 1px solid var(--color-border); } .gallery-cta__inner { max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; } .gallery-cta__text { font-family: 'Bebas Neue', sans-serif; font-size: clamp(24px, 4vw, 36px); color: #fff; margin: 0; letter-spacing: 0.02em; } /* Gallery grid */ .gallery { padding: 80px 28px 110px; } .gallery__inner { max-width: 1320px; margin: 0 auto; } .gallery__grid { columns: 3; column-gap: 18px; } .gallery__item { position: relative; display: block; margin: 0 0 18px; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); break-inside: avoid; background: linear-gradient(160deg, #1a1a22 0%, #0F1014 100%); } .gallery__item img { width: 100%; height: auto; display: block; transition: transform 700ms cubic-bezier(.4,0,.2,1), filter 400ms ease; } .gallery__item:hover img { transform: scale(1.05); filter: brightness(1.06); } .gallery__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(10,10,12,0.55) 100%); pointer-events: none; } .gallery__cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.92); letter-spacing: 0.02em; } @media (max-width: 1024px) { .gallery__grid { columns: 2; } } @media (max-width: 600px) { .gallery__grid { columns: 1; } .gallery { padding: 60px 20px 90px; } } /* ============================================================ NAV DROPDOWNS (desktop) + mobile submenu groups Added for the full multi-page menu mirroring showlimousines.com.au ============================================================ */ /* ---- Desktop dropdowns ---- */ .nav-pill-group { position: relative; display: inline-flex; } .nav-pill-group > .nav-pill { display: inline-flex; align-items: center; gap: 5px; } .nav-pill-caret { transition: transform 300ms; opacity: 0.65; flex: none; } .nav-pill-group:hover > .nav-pill .nav-pill-caret, .nav-pill-group:focus-within > .nav-pill .nav-pill-caret { transform: rotate(180deg); opacity: 1; } .nav-pill-group:hover > .nav-pill, .nav-pill-group:focus-within > .nav-pill { background: rgba(var(--accent-rgb), 0.18); color: #fff; } /* invisible hover bridge so the 14px gap to the panel doesn't drop it */ .nav-pill-group::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 18px; } .nav-dropdown { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 248px; background: rgba(13, 13, 16, 0.97); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 16px; padding: 10px; display: grid; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms ease, transform 240ms ease, visibility 240ms; z-index: 70; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6); } .nav-dropdown--wide { min-width: 480px; grid-template-columns: 1fr 1fr; } .nav-pill-group:hover > .nav-dropdown, .nav-pill-group:focus-within > .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown a { display: block; padding: 10px 14px; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); white-space: nowrap; transition: background 200ms, color 200ms; } .nav-dropdown a:hover, .nav-dropdown a[aria-current="page"] { background: rgba(var(--accent-rgb), 0.16); color: #fff; } /* keep the wide panels from overflowing the viewport edges */ .nav-pill-group:last-child .nav-dropdown, .nav-pill-group:nth-last-child(2) .nav-dropdown { left: auto; right: 0; transform: translateY(8px); } .nav-pill-group:last-child:hover > .nav-dropdown, .nav-pill-group:nth-last-child(2):hover > .nav-dropdown, .nav-pill-group:last-child:focus-within > .nav-dropdown, .nav-pill-group:nth-last-child(2):focus-within > .nav-dropdown { transform: translateY(0); } /* ---- Mobile submenu groups ---- */ .nav-mobile__group { border-bottom: 1px solid var(--color-border); } .nav-mobile__grouptop { display: flex; align-items: center; justify-content: space-between; } .nav-mobile__grouptop > a, .nav-mobile__grouptop > span { flex: 1; border-bottom: none; } .nav-mobile__caret { flex: none; width: 44px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); background: none; border: none; padding: 0; transition: transform 300ms, color 300ms; } .nav-mobile__caret:hover { color: var(--color-accent); } .nav-mobile__group.is-open > .nav-mobile__grouptop .nav-mobile__caret { transform: rotate(180deg); color: var(--color-accent); } .nav-mobile__sub { padding: 0 0 10px 16px; } .nav-mobile__sub a { font-size: 19px; padding: 9px 0; color: rgba(255, 255, 255, 0.7); border-bottom: none; } .nav-mobile__sub a:hover, .nav-mobile__sub a[aria-current="page"] { color: var(--color-accent); } /* Progressive enhancement: collapse only once JS marks the group ready. Direct-child (>) so nested groups (Fleet → make → vehicles) toggle their OWN submenu independently rather than every descendant sub at once. */ .nav-mobile__group.js-ready > .nav-mobile__sub { display: none; } .nav-mobile__group.js-ready.is-open > .nav-mobile__sub { display: block; } /* Nested make-level accordion inside the mobile Fleet group */ .nav-mobile__group--sub { border-bottom: none; } .nav-mobile__sub .nav-mobile__group--sub > .nav-mobile__grouptop > a, .nav-mobile__sub .nav-mobile__group--sub > .nav-mobile__grouptop > span { font-size: 19px; padding: 9px 0; color: rgba(255, 255, 255, 0.7); } .nav-mobile__sub .nav-mobile__group--sub > .nav-mobile__grouptop > span { display: block; flex: 1; } .nav-mobile__group--sub .nav-mobile__caret { height: 42px; } .nav-mobile__group--sub > .nav-mobile__sub { padding-left: 16px; } /* ---- Desktop two-level Fleet flyout ---- */ .nav-dropdown--fleet { min-width: 230px; } .nav-flyout { position: relative; } /* hover bridge across the 8px gap to the side panel */ .nav-flyout::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 12px; } .nav-flyout__parent { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); white-space: nowrap; background: none; border: none; text-align: left; cursor: pointer; transition: background 200ms, color 200ms; } .nav-flyout__caret { opacity: 0.6; flex: none; transition: transform 220ms, opacity 220ms; } .nav-flyout:hover > .nav-flyout__parent, .nav-flyout:focus-within > .nav-flyout__parent { background: rgba(var(--accent-rgb), 0.16); color: #fff; } .nav-flyout:hover > .nav-flyout__parent .nav-flyout__caret, .nav-flyout:focus-within > .nav-flyout__parent .nav-flyout__caret { opacity: 1; transform: translateX(2px); } .nav-flyout__panel { position: absolute; top: -11px; left: calc(100% + 9px); min-width: 238px; background: rgba(13, 13, 16, 0.98); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 16px; padding: 10px; display: grid; gap: 2px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(8px); transition: opacity 220ms ease, transform 220ms ease, visibility 220ms; z-index: 80; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6); } .nav-flyout:hover > .nav-flyout__panel, .nav-flyout:focus-within > .nav-flyout__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); } .nav-flyout__panel a { display: block; padding: 10px 14px; border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); white-space: nowrap; transition: background 200ms, color 200ms; } .nav-flyout__panel a:hover, .nav-flyout__panel a[aria-current="page"] { background: rgba(var(--accent-rgb), 0.16); color: #fff; } /* ============================================================ CONTENT REBUILD ADDITIONS — prose blocks + Fleet mega-panel Built only from existing tokens; visually native to the shell. ============================================================ */ .prose { padding: 80px 28px; position: relative; overflow: hidden; } .prose__inner { max-width: 920px; margin: 0 auto; } .prose__inner > .label-bracket { margin-bottom: 18px; } .prose__h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 4vw, 40px); letter-spacing: 0.01em; color: #fff; margin: 40px 0 14px; line-height: 1.04; } .prose__h3 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(20px, 3vw, 27px); letter-spacing: 0.02em; color: var(--color-accent); margin: 30px 0 10px; } .prose p { color: rgba(255,255,255,0.72); font-size: 16.5px; line-height: 1.75; margin: 0 0 16px; } .prose__list { list-style: none; margin: 6px 0 22px; padding: 0; } .prose__list li { position: relative; padding: 7px 0 7px 26px; color: rgba(255,255,255,0.78); } .prose__list li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-gradient-soft); } .prose__quote { border-left: 2px solid var(--color-accent); padding: 6px 0 6px 20px; margin: 20px 0; color: #fff; font-style: italic; } .prose a { color: var(--color-accent); } .prose a:hover { color: var(--color-accent-hover); } .prose__h2:first-child, .prose__inner > .prose__h2:first-of-type { margin-top: 0; } /* Wedding intro — reuses the homepage testimonials two-panel components (.testi__grid / .testi__media / .testi__card etc). Only layout glue here: sizing the image into the media panel and fitting the existing copy. */ .wedintro { margin: 8px 0 6px; } .wedintro .testi__media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px; object-fit: contain; object-position: center; display: block; } .wedintro .testi__card { justify-content: center; } /* Vehicle showcase slider inside the testimonials media panel */ .wvshow__slide { position: absolute; inset: 0; margin: 0; background: #0a0a0c; opacity: 0; pointer-events: none; transition: opacity .7s ease; } .wvshow__slide.is-active { opacity: 1; pointer-events: auto; } .wvshow__dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; justify-content: center; gap: 7px; } .wvshow__dot { width: 7px; height: 7px; border-radius: 50%; padding: 0; border: none; background: rgba(255,255,255,0.5); cursor: pointer; transition: background .3s, width .3s, border-radius .3s; } .wvshow__dot:hover { background: rgba(255,255,255,0.85); } .wvshow__dot.is-active { background: var(--color-accent); width: 20px; border-radius: 4px; } .wvshow__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(10,10,12,0.5); color: #fff; border: 1px solid rgba(255,255,255,0.22); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .3s, border-color .3s, color .3s; } .wvshow__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #0a0a0c; } .wvshow__btn--prev { left: 16px; } .wvshow__btn--next { right: 16px; } /* About Us — "Our Fleet" slider section (About Us page only). Reuses the global .wvshow slide/dot/button rules; only the frame + image fit are scoped here. */ .abfleet { padding: clamp(56px, 8vw, 96px) 24px; position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border); } .abfleet__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; } .abfleet__header { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); } .abfleet__header .label-bracket { justify-content: center; } .abfleet__heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px, 5.5vw, 60px); line-height: 1; color: #fff; margin: 8px 0 0; } /* Gallery page — cinematic masonry photo gallery (Gallery page only) */ .gallery-mason { padding: clamp(56px, 8vw, 100px) 24px; position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border); } .gallery-mason__inner { max-width: 1340px; margin: 0 auto; position: relative; z-index: 2; } .gallery-mason__head { text-align: center; margin-bottom: clamp(30px, 4vw, 52px); } .gallery-mason__head .label-bracket { justify-content: center; } .gallery-mason__heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(36px, 6vw, 66px); line-height: 1; color: #fff; margin: 8px 0 12px; } .gallery-mason__intro { color: rgba(255, 255, 255, 0.6); max-width: 660px; margin: 0 auto; font-size: clamp(14px, 1.8vw, 17px); line-height: 1.6; } .gallery-mason__grid { column-count: 4; column-gap: 14px; } .gallery-mason__item { break-inside: avoid; margin: 0 0 14px; position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--color-border); background: #111; cursor: pointer; } .gallery-mason__item img { width: 100%; height: auto; display: block; transition: transform .7s cubic-bezier(.2, .7, .2, 1); } .gallery-mason__item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(201, 168, 76, 0) 55%, rgba(10, 10, 12, 0.55) 100%); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .gallery-mason__item:hover img { transform: scale(1.06); } .gallery-mason__item:hover::after { opacity: 1; } @media (max-width: 1100px) { .gallery-mason__grid { column-count: 3; } } @media (max-width: 720px) { .gallery-mason__grid { column-count: 2; column-gap: 10px; } .gallery-mason__item { margin-bottom: 10px; border-radius: 11px; } } /* "Wedding Vehicles That Stand Out" — full-bleed dark/gold band. Reuses the existing .fleet-card component; only the band + pill tags are new. */ .wstandout { position: relative; /* Full-bleed breakout using dvw (dynamic viewport) instead of vw so it doesn't overflow on iOS Safari; root overflow-x:clip contains any rounding residue. */ width: 100dvw; left: 50%; right: 50%; margin-left: -50dvw; margin-right: -50dvw; margin-top: 64px; margin-bottom: 8px; background: var(--color-dark); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 84px 28px; } .wstandout__inner { max-width: 1180px; margin: 0 auto; } .wstandout__head { max-width: 760px; margin: 0 auto; text-align: center; } .wstandout__head .label-bracket { margin-bottom: 16px; } .wstandout__heading { margin: 0 0 22px; text-align: center; } .wstandout__head p { color: rgba(255, 255, 255, 0.72); } .wstandout__head p:last-child { margin-bottom: 0; } .wstandout__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; } .wstandout__cards--two { grid-template-columns: repeat(2, 1fr); max-width: 780px; margin: 52px auto 0; } /* Fleet carousel — shows 3 vehicles, slides through the full fleet */ .fleetcar { position: relative; margin-top: 40px; } .fleetcar__viewport { overflow: hidden; padding: 12px 2px; } .fleetcar__track { display: flex; gap: 24px; transition: transform .55s cubic-bezier(.2,.7,.2,1); will-change: transform; } .fleetcar__track > .fleet-card { flex: 0 0 calc((100% - 48px) / 3); } .fleetcar__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(10,10,12,0.72); border: 1px solid var(--color-border); color: #fff; cursor: pointer; transition: background .3s, border-color .3s, color .3s; } .fleetcar__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #0a0a0c; } .fleetcar__btn--prev { left: 6px; } .fleetcar__btn--next { right: 6px; } @media (max-width: 1024px) { .fleetcar__track > .fleet-card { flex-basis: calc((100% - 24px) / 2); } } @media (max-width: 640px) { .fleetcar__track > .fleet-card { flex-basis: 100%; } } /* Services — photo cards with title/description overlaid (like the /services/ page) */ .wstandout__services { margin-top: 60px; text-align: center; } .wstandout__services .label-bracket { display: inline-flex; margin-bottom: 30px; } .wsvc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; } .wsvc-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; text-decoration: none; border: 1px solid var(--color-border); transition: border-color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); } .wsvc-card:hover { border-color: rgba(var(--accent-rgb), 0.55); transform: translateY(-4px); } .wsvc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px; background: #0a0a0c; object-fit: contain; object-position: center; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .wsvc-card:hover .wsvc-card__img { transform: scale(1.06); } .wsvc-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,8,10,0.94) 6%, rgba(8,8,10,0.45) 42%, rgba(8,8,10,0.08) 100%); } .wsvc-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; padding: 24px 22px; } .wsvc-card__name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 2.3vw, 28px); letter-spacing: 0.02em; color: #fff; margin-bottom: 6px; } .wsvc-card__desc { font-family: 'DM Sans', sans-serif; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.72); margin-bottom: 14px; } .wsvc-card__more { display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent); font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: gap .3s ease; } .wsvc-card:hover .wsvc-card__more { gap: 11px; } @media (max-width: 860px) { .wsvc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .wsvc-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .wstandout { padding: 60px 22px; } .wstandout__cards { grid-template-columns: 1fr; } } .wedintro .label-bracket { margin-bottom: 16px; } .wedintro__heading { margin: 0 0 18px; } .wedintro .testi__card p { margin-bottom: 14px; } .wedintro .testi__card p:last-of-type { margin-bottom: 0; } /* Section spacer / divider after the intro */ .prose__inner > .wsection-divider { height: 1px; border: 0; margin: 58px auto; background: linear-gradient(to right, transparent, rgba(201,168,76,0.4), transparent); } .prose__inner > .wsection-divider + .prose__h2 { margin-top: 6px; } /* ============================================================ Wedding page — upper-body layout pass (layout only; copy unchanged). Echoes the homepage section language — raised cards, gold accents, wide breakout grids, eyebrow+title headings — without cloning it 1:1. ============================================================ */ /* Section headings get a short gold rule, like the homepage section headers. Scoped to direct children so the wintro heading is untouched. */ .prose__inner > .prose__h2 { margin-top: 66px; } .prose__inner > .prose__h2::after { content: ''; display: block; width: 56px; height: 3px; margin-top: 18px; border-radius: 2px; background: var(--gold-gradient-soft); } /* An h2 immediately followed by another h2 acts as a gold eyebrow above its title — the homepage label-bracket + heading pattern, reusing copy. */ .prose__inner > .prose__h2:has(+ .prose__h2) { margin-bottom: 0; font-family: 'DM Sans', sans-serif; font-size: clamp(13px, 1.5vw, 15px); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); } .prose__inner > .prose__h2:has(+ .prose__h2)::after { content: none; } .prose__inner > .prose__h2:has(+ .prose__h2) + .prose__h2 { margin-top: 10px; } /* Let the card grids break out wider than the 920px reading column so they breathe like the homepage's full-width sections. */ .wpkg-grid, .wrev-grid, .wfleet-grid { position: relative; width: min(1180px, 92vw); margin-left: 50%; transform: translateX(-50%); } /* Packages — premium cards (homepage occ-card / fleet-card family) */ .wpkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 34px; margin-bottom: 44px; } .wpkg-card { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: 18px; background: var(--color-bg-raised); padding: 32px 28px 30px; transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, background .4s; } .wpkg-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold-gradient-soft); opacity: .5; transition: opacity .4s; } .wpkg-card:hover { transform: translateY(-6px); border-color: rgba(201,168,76,0.45); background: #15151b; } .wpkg-card:hover::before { opacity: 1; } .wpkg-card .prose__h3 { margin: 4px 0 18px; } .wpkg-card .prose__list { margin: 0; } .wpkg-card__media { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin: -8px 0 20px; border-radius: 12px; overflow: hidden; } .wpkg-card__media img { width: 100%; height: 112px; object-fit: cover; display: block; } /* Reviews — centered 4x4 grid of individual review cards (homepage dark/gold). align-items:stretch (default) keeps every card in a row the same height. */ .wrev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; margin-bottom: 12px; } .wrev-card { display: flex; flex-direction: column; background: var(--color-bg-raised); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: 14px; padding: 24px 24px 22px; } .wrev-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .wrev-card__who { display: flex; flex-direction: column; gap: 3px; } .wrev-card__name { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; color: #fff; } .wrev-card__date { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--color-muted); } .wrev-card__stars { color: var(--color-accent); font-size: 14px; letter-spacing: 1px; flex-shrink: 0; } .wrev-card__text { margin: 0; font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.7); } .wrev-card__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .wrev-card__more { align-self: flex-start; margin-top: 12px; padding: 0; background: none; border: none; color: var(--color-accent); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: color .25s ease; } .wrev-card__more:hover { color: var(--color-accent-hover); text-decoration: underline; } .wrev-card__more[hidden] { display: none; } /* Fleet — image cards, echoing the homepage fleet grid */ .wfleet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 34px; margin-bottom: 44px; } .wfleet-card { display: block; color: inherit; text-decoration: none; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; background: var(--color-bg-raised); transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s; } .wfleet-card:hover { transform: translateY(-5px); border-color: rgba(201,168,76,0.4); } .wfleet-card__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--color-accent); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; transition: gap .3s ease; } .wfleet-card:hover .wfleet-card__more { gap: 11px; } .wfleet-card__media { aspect-ratio: 16 / 10; overflow: hidden; } .wfleet-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .wfleet-card:hover .wfleet-card__media img { transform: scale(1.05); } /* No-crop fit for the green Hummer and black Chrysler collection items */ .wfleet-card__media img[src*="fleet-hummer-green-v2"], .wfleet-card__media img[src*="fleet-chrysler-black-v2"] { width: 100%; height: 100%; padding: 12px; background: #0a0a0c; object-fit: contain; object-position: center; } .wfleet-card__body { padding: 18px 20px 22px; } .wfleet-card__body .prose__h3 { margin: 0; font-size: clamp(18px, 2vw, 22px); } .wfleet-card__body p { margin: 8px 0 0; color: rgba(255,255,255,0.55); font-size: 14px; } @media (max-width: 1024px) { .wrev-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .wrev-grid { grid-template-columns: 1fr; } .wpkg-grid, .wrev-grid, .wfleet-grid { width: 100%; margin-left: 0; transform: none; } } /* Fleet brand-grouped mega panel (Chrysler / Hummer / Mercedes / RR / VW) */ .nav-dropdown--mega { min-width: 720px; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; } .nav-mega__group { display: block; padding: 4px; } .nav-mega__heading { display: block; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); padding: 8px 14px 4px; } @media (max-width: 1240px) { .nav-dropdown--mega { min-width: 0; } } /* ============================================================ Services page — "what we cater for" cards, area tags, related searches ============================================================ */ .svc-cater { text-align: center; } .svc-cater .label-bracket { display: inline-flex; margin-bottom: 18px; } .svc-intro { color: rgba(255,255,255,0.82); font-size: 17px; margin: 0 0 30px; } .svc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 46px; } .svc-card { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; text-decoration: none; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-bg-raised); transition: border-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); } .svc-card:hover { border-color: rgba(var(--accent-rgb), 0.5); } .svc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .5s ease; } .svc-card:hover .svc-card__img { transform: scale(1.05); } .svc-card::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); } .svc-card__name { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px; font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 600; color: #fff; letter-spacing: 0.01em; line-height: 1.25; } .svc-areas-intro { color: rgba(255,255,255,0.82); font-size: 16px; margin: 0 0 16px; } .area-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .area-tag { display: inline-block; padding: 8px 18px; border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 999px; color: var(--color-accent); font-family: 'DM Sans', sans-serif; font-size: 13px; letter-spacing: 0.03em; } .related { padding: 56px 28px 76px; border-top: 1px solid var(--color-border); background: var(--color-bg); } .related__inner { max-width: 1100px; margin: 0 auto; } .related__title { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 20px; } .related__list { list-style: none; padding: 0; margin: 0; column-count: 3; column-gap: 32px; } .related__list li { break-inside: avoid; margin-bottom: 7px; } .related__list a { color: rgba(255,255,255,0.4); font-family: 'DM Sans', sans-serif; font-size: 12.5px; text-decoration: none; transition: color .2s ease; } .related__list a:hover { color: var(--color-accent); } @media (max-width: 1024px) { .svc-cards { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .related__list { column-count: 2; } } @media (max-width: 640px) { .svc-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .related__list { column-count: 1; } } /* ============================================================ Fleet page — alternating vehicle blocks + Any Occasion CTA ============================================================ */ .vehfleet { padding: 72px 28px 24px; position: relative; } .vehfleet__inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 80px; } .veh-block { display: grid; grid-template-columns: 1fr; gap: 26px; } .veh-block__frame { border: 1px solid var(--color-border); border-radius: 20px; overflow: hidden; background: var(--color-bg-raised); } .veh-block__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .veh-block__detail { display: flex; flex-direction: column; align-items: flex-start; } .veh-block__name { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.04; letter-spacing: 0.01em; color: #fff; margin: 0 0 20px; } .veh-block__specs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; } .spec-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid rgba(var(--accent-rgb), 0.4); border-radius: 999px; color: var(--color-accent); font-family: 'DM Sans', sans-serif; font-size: 12.5px; letter-spacing: 0.01em; } .spec-chip svg { flex-shrink: 0; } .veh-block__desc { color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.72; margin: 0 0 26px; } @media (min-width: 900px) { .veh-block { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } .veh-block:nth-of-type(even) .veh-block__media { order: 2; } } .anyocc { padding: 76px 28px 92px; position: relative; text-align: center; overflow: hidden; } .anyocc__inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; } .anyocc .label-bracket { display: inline-flex; margin-bottom: 20px; } .anyocc__text { color: rgba(255,255,255,0.8); font-size: 17px; line-height: 1.7; margin: 0 0 32px; } /* ============================================================ About Us page — sleek, calm, editorial (generous whitespace, restrained gold, minimal borders) ============================================================ */ .ab-hero { padding: 122px 28px 54px; text-align: center; } .ab-hero__inner { max-width: 760px; margin: 0 auto; } .ab-hero__title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(58px, 9vw, 108px); line-height: 0.94; letter-spacing: 0.02em; color: #fff; margin: 0; } .ab-rule { display: block; width: 54px; height: 2px; margin: 26px auto 28px; background: var(--gold-gradient-soft); border-radius: 2px; } .ab-hero__sub { color: rgba(255,255,255,0.6); font-size: 18px; line-height: 1.7; margin: 0; } .ab-stats { padding: 6px 28px 66px; } .ab-stats__inner { max-width: 940px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 22px 42px; } .ab-stat { font-family: 'DM Sans', sans-serif; font-size: 15px; color: rgba(255,255,255,0.58); letter-spacing: 0.02em; } .ab-stat .g { color: var(--color-accent); font-weight: 600; } .ab-stats__div { width: 1px; height: 24px; background: rgba(255,255,255,0.14); } .ab-intro { padding: 58px 28px; } .ab-intro__inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: center; } .ab-intro__media img { width: 100%; aspect-ratio: 4 / 3; padding: 12px; background: #0a0a0c; object-fit: contain; object-position: center; border-radius: 18px; display: block; } .ab-intro__text p { color: rgba(255,255,255,0.74); font-size: 17px; line-height: 1.8; margin: 0 0 20px; } .ab-intro__text p:last-child { margin-bottom: 0; } .ab-highlights { padding: 50px 28px; } .ab-highlights__inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px; } .ab-hl { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .ab-hl__icon { color: var(--color-accent); display: grid; place-items: center; width: 52px; height: 52px; } .ab-hl__label { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .ab-fleet { padding: 58px 28px; text-align: center; } .ab-fleet__inner { max-width: 820px; margin: 0 auto; } .ab-eyebrow { display: inline-block; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 16px; } .ab-fleet__text { color: rgba(255,255,255,0.64); font-size: 17px; line-height: 1.85; margin: 0; } .ab-gallery { padding: 50px 28px 76px; } .ab-gallery__inner { max-width: 1040px; margin: 0 auto; } .ab-gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .ab-gallery__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; display: block; } .ab-cta { padding: 86px 28px; text-align: center; background: var(--color-dark); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .ab-cta__inner { max-width: 720px; margin: 0 auto; } .ab-cta__lead { color: rgba(255,255,255,0.52); font-size: 15px; line-height: 1.7; margin: 0 0 16px; } .ab-cta__line { font-family: 'Bebas Neue', sans-serif; font-size: clamp(26px, 4vw, 42px); line-height: 1.1; letter-spacing: 0.01em; color: #fff; margin: 0 0 30px; } @media (max-width: 900px) { .ab-intro__inner { grid-template-columns: 1fr; gap: 30px; } .ab-highlights__inner { grid-template-columns: repeat(2, 1fr); gap: 34px; } } @media (max-width: 560px) { .ab-hero { padding: 84px 22px 40px; } .ab-gallery__grid { grid-template-columns: 1fr; } } /* ===== Services pages: Why Choose / Vehicle Showcase / How It Works ===== */ .svc-why, .svc-steps { position: relative; padding: 84px 24px; background: var(--color-bg); border-top: 1px solid var(--color-border); } .svc-why__inner, .svc-steps__inner, .svc-show__inner { max-width: 1180px; margin: 0 auto; } .svc-why__head, .svc-steps__head, .svc-show__head { text-align: center; margin-bottom: 44px; } .svc-why__head .label-bracket, .svc-steps__head .label-bracket, .svc-show__head .label-bracket { justify-content: center; } .svc-why__heading, .svc-steps__heading, .svc-show__heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(30px, 5vw, 52px); line-height: 1; letter-spacing: .01em; color: #fff; margin: 14px 0 0; } .svc-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; } .svc-why__card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 18px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-bg-raised); transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s; } .svc-why__card:hover { transform: translateY(-5px); border-color: rgba(201,168,76,0.45); } .svc-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.12); color: var(--color-accent); flex: none; } .svc-why__label { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.25; } .svc-why__sub { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.3; } .svc-show { position: relative; padding: 84px 24px; background: var(--color-bg); border-top: 1px solid var(--color-border); overflow: hidden; } .svc-show__head { margin-bottom: 6px; } .svc-show__intro { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.6); max-width: 600px; margin: 14px auto 0; } .svc-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; } .svc-steps__card { position: relative; display: flex; flex-direction: column; padding: 32px 26px 30px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-bg-raised); overflow: hidden; transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s; } .svc-steps__card:hover { transform: translateY(-5px); border-color: rgba(201,168,76,0.45); } .svc-steps__card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold-gradient-soft); opacity: .5; } .svc-steps__num { font-family: 'Bebas Neue', sans-serif; font-size: 38px; line-height: 1; color: rgba(var(--accent-rgb), 0.55); } .svc-steps__icon { color: var(--color-accent); margin: 12px 0 14px; } .svc-steps__title { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .02em; color: #fff; margin-bottom: 8px; } .svc-steps__copy { font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.6); } @media (max-width: 768px) { .svc-why, .svc-steps, .svc-show { padding: 56px 20px; } .svc-why__head, .svc-steps__head, .svc-show__head { margin-bottom: 32px; } .svc-why__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .svc-why__card { padding: 24px 12px; } } /* ============================================================ Service mid-section: intro text block + photo gallery carousel (matches the [ LABEL ] + Bebas heading + intro pattern used by "Four steps…" / "What our clients say" and the fleet carousel) ============================================================ */ .svc-intro { position: relative; padding: 84px 24px 24px; background: var(--color-bg); border-top: 1px solid var(--color-border); } .svc-intro__inner { max-width: 780px; margin: 0 auto; text-align: center; } .svc-intro .label-bracket { justify-content: center; } .svc-intro__heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(30px, 5vw, 52px); line-height: 1; letter-spacing: .01em; color: #fff; margin: 14px 0 0; } .svc-intro__lead { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.72; color: rgba(255,255,255,0.64); max-width: 660px; margin: 20px auto 0; } /* Venue list — lead-in + two content-width columns. The wrapper shrink-wraps to its content and auto-centres, so the whole lead-in-plus-two-columns block centres on the page as one unit. */ /* Self-centring container (hugs the wider of the lead-in or the two-column row); two equal-width columns in a centred flex row with a fixed gap. */ .svc-intro__venues-wrap { width: -moz-max-content; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; margin-top: 30px; } .svc-intro__leadin { display: block; text-align: center; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,0.82); margin: 0 0 16px; } .svc-intro__venues { display: flex; justify-content: center; column-gap: 64px; } .svc-intro__venue-col { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; width: 16rem; } .svc-intro__venue-col li { display: flex; align-items: center; white-space: nowrap; font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,0.72); } .svc-intro__venue-col li::before { content: ''; flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--color-accent, #C9A84C); margin-right: 10px; } @media (max-width: 640px) { .svc-intro__venues { flex-direction: column; align-items: center; row-gap: 11px; } .svc-intro__venue-col { width: 100%; max-width: 16rem; } } /* Intro flows straight into the feature grid — drop the divider line + top gap */ .svc-intro + .svc-why { border-top: none; padding-top: 12px; } .svc-gallery { position: relative; padding: 84px 24px; background: var(--color-bg); border-top: 1px solid var(--color-border); overflow: hidden; } .svc-gallery__inner { max-width: 1180px; margin: 0 auto; } .svc-gallery__head { text-align: center; margin-bottom: 34px; } .svc-gallery__head .label-bracket { justify-content: center; } .svc-gallery__heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(30px, 5vw, 52px); line-height: 1; letter-spacing: .01em; color: #fff; margin: 14px 0 0; } .svc-gallery__intro { font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.6); max-width: 600px; margin: 14px auto 0; } .galcar { position: relative; margin-top: 8px; } .galcar__viewport { overflow: hidden; padding: 12px 2px; } .galcar__track { display: flex; gap: 20px; transition: transform .55s cubic-bezier(.2,.7,.2,1); will-change: transform; touch-action: pan-y; } .galcar__slide { flex: 0 0 calc((100% - 40px) / 3); margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-raised); aspect-ratio: 3 / 2; } .galcar__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: filter .4s cubic-bezier(.2,.7,.2,1); } .galcar__slide:hover img { filter: brightness(1.08); } .galcar__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(10,10,12,0.72); border: 1px solid var(--color-border); color: #fff; cursor: pointer; transition: background .3s, border-color .3s, color .3s; } .galcar__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #0a0a0c; } .galcar__btn--prev { left: 6px; } .galcar__btn--next { right: 6px; } @media (max-width: 1024px) { .galcar__slide { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 768px) { .svc-intro { padding: 56px 20px 18px; } .svc-gallery { padding: 56px 20px; } } @media (max-width: 640px) { .galcar__slide { flex-basis: 100%; } } /* ============================================================ Uniform soft, rounded image frames site-wide. Matches the Homepage occasion photo cards: consistent 18px corner radius + overflow:hidden + a subtle soft drop shadow, with images filling the frame edge-to-edge (object-fit:cover, no letterboxing). Appended last so it standardises every image-card variant regardless of earlier per-component rules. ============================================================ */ .occ-card__media, .fleet-card, .gallery-mason__item, .veh-block__frame, .feature__media, .card__media, .testi__media { border-radius: 18px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42); } /* Fixed-frame card images fill edge-to-edge (kills letterboxing) */ .fleet-card__img, .veh-block__img, .feature__media img, .card__img, .wedintro .testi__media img { object-fit: cover; padding: 0; } /* Responsive