/* =========================================================
Luna Executive Chauffeurs — Website (DS v1.1 Personnalité)
Canonical: ./LUNA_DS.md (source of truth for all 4 surfaces)
Light is the default. Dark (Personnalité signature) is the alt theme.
========================================================= */
:root {
/* --- Light (day luxury — ivory + royal navy + Personnalité gold) --- */
/* Surfaces */
--surface-page: #F5F1E8; /* ivory */
--surface-card: #FFFFFF;
--surface-elevated: #FDFAF2;
--surface-overlay: rgba(245,241,232,0.92);
/* Text — Personnalité royal navy ink */
--text-primary: #012B5B;
--text-secondary: rgba(1,43,91,0.72);
--text-muted: rgba(1,43,91,0.50);
--text-on-gold: #001C44;
--text-on-dark: #F5F1E8;
/* Borders */
--border-default: rgba(1,43,91,0.16);
--border-subtle: rgba(1,43,91,0.08);
--border-strong: rgba(1,43,91,0.26);
--border-focus: #CDA65B;
/* Accent — Personnalité gold (warmer than champagne, ≤3% on light) */
--accent-gold: #CDA65B;
--accent-gold-deep: #A88547;
--accent-gold-light: #DDB876;
--accent-gold-glow: rgba(205,166,91,0.20);
--gold: var(--accent-gold);
--gold-deep: var(--accent-gold-deep);
--gold-glow: var(--accent-gold-glow);
/* Accent — royal navy */
--navy-default: #012B5B;
--navy-deep: #001C44;
--navy-light: #003D7A;
--navy-glow: rgba(1,43,91,0.18);
/* Actions (light: primary is royal navy fill) */
--action-primary-bg: #012B5B;
--action-primary-text: #F5F1E8;
--action-primary-press: #001C44;
--action-secondary-bg: transparent;
--action-secondary-text: #012B5B;
--action-secondary-border: rgba(1,43,91,0.26);
--action-destructive-bg: #A25149;
--action-destructive-text: #F5F1E8;
/* Status (hospitality-tuned, muted — kept from V3) */
--status-success: #5E8E60;
--status-warning: #B8894A;
--status-error: #A25149;
--status-info: #5E7E9A;
/* Radius — Rolex-sharp */
--r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-full: 9999px;
/* Shadows — navy-tinted, paper-soft */
--shadow-sm: 0 1px 2px rgba(1,43,91,0.04);
--shadow-md: 0 4px 16px rgba(1,43,91,0.08);
--shadow-lg: 0 16px 60px rgba(1,43,91,0.12);
--shadow-gold: 0 8px 20px rgba(205,166,91,0.18);
/* Motion */
--dur-fast: 120ms;
--dur-normal: 240ms;
--dur-slow: 400ms;
--ease: cubic-bezier(0.2, 0, 0.2, 1);
/* Fonts — Playfair Display + Inter + IBM Plex Mono */
--font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--font-serif: 'Playfair Display', Georgia, serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Layout */
--max-w: 1200px;
--gutter: clamp(20px, 4vw, 48px);
--nav-h: 72px;
}
/* --- Dark (mid-deep navy + gold-fill primary — Personnalité as ACCENT only) ---
Page surfaces desaturated from full Personnalité royal navy so #012B5B
doesn't dominate full-screen real estate. Royal navy stays as accent in
kickers, brand splash, gold-band partner. Page bg is navy-grey. */
[data-theme="dark"] {
--surface-page: #0A1530; /* mid-deep navy — controlled, not over-blue */
--surface-card: #11203D; /* slightly lifted, navy with charcoal */
--surface-elevated: #182A4A; /* modals, sheets, hover */
--surface-overlay: rgba(10,21,48,0.92);
--surface-gradient-end: #020510; /* almost-black navy — drama terminus */
--text-primary: #F5F1E8;
--text-secondary: rgba(245,241,232,0.70);
--text-muted: rgba(245,241,232,0.45);
--text-on-gold: #001C44;
--text-on-dark: #F5F1E8;
--border-default: rgba(245,241,232,0.12);
--border-subtle: rgba(245,241,232,0.06);
--border-strong: rgba(245,241,232,0.22);
--border-focus: #CDA65B;
--accent-gold: #CDA65B;
--accent-gold-deep: #A88547;
--accent-gold-light: #DDB876;
--accent-gold-glow: rgba(205,166,91,0.22);
--navy-default: #012B5B;
--navy-deep: #001C44;
--navy-light: #003D7A;
--navy-glow: rgba(1,43,91,0.40);
/* Actions (dark: primary is GOLD-fill — Personnalité signature) */
--action-primary-bg: #CDA65B;
--action-primary-text: #001C44;
--action-primary-press: #A88547;
--action-secondary-bg: transparent;
--action-secondary-text: #F5F1E8;
--action-secondary-border: rgba(245,241,232,0.22);
--action-destructive-bg: #A25149;
--action-destructive-text: #F5F1E8;
--status-success: #7BAE7F;
--status-warning: #D4A76A;
--status-error: #C46B5F;
--status-info: #8AA7C7;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
--shadow-md: 0 4px 16px rgba(0,0,0,0.40);
--shadow-lg: 0 20px 60px rgba(0,0,0,0.55);
--shadow-gold: 0 8px 20px rgba(205,166,91,0.22);
}
/* Smooth theme transition */
body, .nav, .card, .btn {
transition: background var(--dur-normal) var(--ease),
color var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
color-scheme: light;
/* Lock horizontal pan site-wide — mobile Safari/Chrome will discard
any horizontal swipe gesture at the input layer before it reaches
the layout, so nothing pans sideways even transiently. Elements
that legitimately need horizontal scroll (e.g. .fleet-table-wrap,
.rate-table-wrap) opt back in with touch-action: pan-x pan-y. */
overflow-x: hidden;
overscroll-behavior-x: none;
touch-action: pan-y;
}
[data-theme="dark"] { color-scheme: dark; }
body {
margin: 0;
min-height: 100vh;
background: var(--surface-page);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
touch-action: pan-y;
}
/* Dark mode — Personnalité vertical gradient (royal navy → navy-black).
Anchored on the viewport so it doesn't tile under tall pages, and kept
on `body` (not html) so theme transitions still cross-fade. */
[data-theme="dark"] body {
background:
linear-gradient(180deg, var(--surface-page) 0%, var(--surface-gradient-end) 100%)
var(--surface-gradient-end) fixed;
}
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--gold); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; color: var(--text-primary); }
p { margin: 0; color: var(--text-secondary); }
/* ---------- Utilities ---------- */
.kicker {
margin: 0 0 14px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-gold);
}
/* Brand-signature kicker (matches RN apps' text.brandKicker) —
reserved for "LUNA EXECUTIVE CHAUFFEUR" appearances. */
.brand-kicker {
margin: 0 0 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--accent-gold);
}
.kicker-mono { font-family: var(--font-mono); color: var(--accent-gold); letter-spacing: 0.14em; }
/* Gold corner accent — Luna signature for hero/feature cards only.
Matches cardChrome.cornerAccent pattern from driver/client apps. */
.corner-accents {
position: relative;
overflow: visible;
}
.corner-accents::before,
.corner-accents::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border: 1px solid var(--accent-gold);
pointer-events: none;
opacity: 0.7;
}
.corner-accents::before {
top: -1px;
left: -1px;
border-right: none;
border-bottom: none;
border-top-left-radius: var(--r-lg);
}
.corner-accents::after {
bottom: -1px;
right: -1px;
border-left: none;
border-top: none;
border-bottom-right-radius: var(--r-lg);
}
.mono { font-family: var(--font-mono); color: var(--text-primary); }
.text-link {
color: var(--text-primary);
border-bottom: 1px solid var(--border-strong);
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.text-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* ---------- Starfield (dark mode only) ---------- */
.starfield {
position: fixed; inset: 0;
pointer-events: none;
z-index: 0;
opacity: 0; /* default light = no stars (ivory background) */
transition: opacity var(--dur-normal) var(--ease);
}
[data-theme="dark"] .starfield { opacity: 1; }
.starfield .star {
position: absolute;
left: var(--x); top: var(--y);
width: 2px; height: 2px;
background: var(--gold);
border-radius: 50%;
animation: twinkle 4s ease-in-out infinite;
animation-delay: var(--d);
}
/* Beefier twinkle: wider opacity swing (0.08 → 1.0), bigger scale
bloom (1× → 1.9×), and a co-animated box-shadow so each peak
reads as a small flash of light rather than a faint dot that
brightens a bit. The halo layers (close + distant glow) expand
together for a cleaner bloom. */
@keyframes twinkle {
0%, 100% {
opacity: 0.08;
transform: scale(1);
box-shadow: 0 0 3px rgba(205,166,91, 0.25);
}
50% {
opacity: 1;
transform: scale(1.9);
box-shadow:
0 0 8px var(--gold),
0 0 18px var(--gold-glow);
}
}
/* ---------- Nav ---------- */
/* Glassmorphism — translucent + blur + saturation boost (Apple/Four Seasons feel).
Background stays semi-transparent at all scroll states so the content behind
remains visible, softened by blur. Border is subtle at top, becomes clearer
once scrolled so the nav feels "anchored" to the page. */
.nav {
position: sticky; top: 0; z-index: 50;
height: var(--nav-h);
display: flex; align-items: center; gap: 32px;
padding: 0 var(--gutter);
background: rgba(245,241,232,0.55);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border-bottom: 1px solid transparent;
transition:
background var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease),
box-shadow var(--dur-normal) var(--ease);
}
[data-theme="dark"] .nav {
background: rgba(1,28,68,0.48);
}
.nav[data-scrolled="true"] {
background: rgba(245,241,232,0.72);
border-bottom-color: rgba(1,43,91,0.08);
box-shadow: 0 1px 0 rgba(1,43,91,0.04), 0 8px 24px rgba(1,43,91,0.04);
}
[data-theme="dark"] .nav[data-scrolled="true"] {
background: rgba(1,28,68,0.68);
border-bottom-color: rgba(245,241,232,0.08);
box-shadow: 0 1px 0 rgba(245,241,232,0.04), 0 8px 24px rgba(0,0,0,0.24);
}
.nav-brand { display: flex; align-items: center; }
.nav-logo { height: 52px; width: auto; display: block; }
.nav-logo-dark { display: none; }
[data-theme="dark"] .nav-logo-light { display: none; }
[data-theme="dark"] .nav-logo-dark { display: block; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a {
font-size: 14px;
color: var(--text-secondary);
transition: color var(--dur-fast) var(--ease);
position: relative;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a::after {
content: '';
position: absolute; left: 0; right: 0; bottom: -6px;
height: 1px; background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-normal) var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
/* Theme toggle button */
.theme-toggle {
width: 40px; height: 40px;
border-radius: var(--r-full);
border: 1px solid var(--border-strong);
background: transparent;
color: var(--text-primary);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
padding: 0;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.theme-toggle:hover { background: rgba(1,43,91,0.04); border-color: var(--accent-gold); color: var(--accent-gold); }
[data-theme="dark"] .theme-toggle:hover { background: rgba(245,241,232,0.06); }
.theme-icon { width: 18px; height: 18px; }
/* Icon shows the TARGET theme (click to switch to it) */
.theme-icon-moon { display: block; } /* default (light) shows moon → click to go dark */
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
.nav-burger {
display: none;
background: none;
border: 1px solid var(--border-default);
border-radius: var(--r-sm);
width: 40px; height: 40px;
padding: 0;
cursor: pointer;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
}
.nav-burger span {
width: 16px; height: 1.5px; background: var(--text-primary); display: block;
transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
padding: 11px 20px;
border-radius: var(--r-md);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
text-decoration: none;
white-space: nowrap;
}
.btn:active { transform: scale(0.985); }
/* ============================================================
Luminous button — ambient sheen loop + interactive spotlight
============================================================
Applied to every meaningful CTA on the site via the compound
selector below. Two layered pseudo-elements:
::before A faint diagonal sheen that travels across the
button every 6s. Runs forever, low enough in
contrast that it reads as life, not noise.
::after A radial spotlight (~200px) whose center tracks
the pointer via the --lumo-mx / --lumo-my CSS
vars (updated by a single global pointermove
handler in app.js). Fades in only on hover.
Both pseudos are pointer-events: none so they never block
clicks or hover-intent on the real button content. The
button's actual label/icon gets position:relative + z-index
to sit above the pseudos via the `.btn > *` rule.
Skip list: utility icon buttons (theme toggle, burger,
password eye, delete trash) never get this treatment —
they're too small for the spotlight to read clearly, and
the ambient sheen would flicker behind a 16-20px SVG.
============================================================ */
.btn,
.signin-btn,
.signin-google,
.signin-nav-primary,
.signin-nav-ghost,
.signin-input-submit,
.signup-submit,
.signup-google,
.auth-oauth-btn,
.auth-signout-btn,
.profile-danger-btn,
.dash-new-ride-btn,
.dash-rate-submit,
.dash-ride-cancel {
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn > *,
.signin-btn > *,
.signin-google > *,
.signin-nav-primary > *,
.signin-nav-ghost > *,
.signin-input-submit > *,
.signup-submit > *,
.signup-google > *,
.auth-oauth-btn > *,
.auth-signout-btn > *,
.profile-danger-btn > *,
.dash-new-ride-btn > *,
.dash-rate-submit > *,
.dash-ride-cancel > * {
position: relative;
z-index: 2;
}
.btn::before,
.signin-btn::before,
.signin-google::before,
.signin-nav-primary::before,
.signin-nav-ghost::before,
.signin-input-submit::before,
.signup-submit::before,
.signup-google::before,
.auth-oauth-btn::before,
.auth-signout-btn::before,
.profile-danger-btn::before,
.dash-new-ride-btn::before,
.dash-rate-submit::before,
.dash-ride-cancel::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background: linear-gradient(
135deg,
transparent 35%,
rgba(255, 255, 255, 0.08) 46%,
rgba(255, 255, 255, 0.22) 50%,
rgba(255, 255, 255, 0.08) 54%,
transparent 65%
);
background-size: 220% 220%;
background-repeat: no-repeat;
animation: btn-lumo-sheen 6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
mix-blend-mode: screen;
opacity: 0.55;
}
.btn::after,
.signin-btn::after,
.signin-google::after,
.signin-nav-primary::after,
.signin-nav-ghost::after,
.signin-input-submit::after,
.signup-submit::after,
.signup-google::after,
.auth-oauth-btn::after,
.auth-signout-btn::after,
.profile-danger-btn::after,
.dash-new-ride-btn::after,
.dash-rate-submit::after,
.dash-ride-cancel::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background: radial-gradient(
220px circle at var(--lumo-mx, 50%) var(--lumo-my, 50%),
rgba(255, 255, 255, 0.18),
rgba(255, 255, 255, 0.06) 32%,
transparent 62%
);
opacity: 0;
transition: opacity 260ms cubic-bezier(0.2, 0, 0.2, 1);
mix-blend-mode: screen;
}
.btn:hover::after,
.signin-btn:hover::after,
.signin-google:hover::after,
.signin-nav-primary:hover::after,
.signin-nav-ghost:hover::after,
.signin-input-submit:hover::after,
.signup-submit:hover::after,
.signup-google:hover::after,
.auth-oauth-btn:hover::after,
.auth-signout-btn:hover::after,
.profile-danger-btn:hover::after,
.dash-new-ride-btn:hover::after,
.dash-rate-submit:hover::after,
.dash-ride-cancel:hover::after {
opacity: 1;
}
@keyframes btn-lumo-sheen {
0% { background-position: -120% -120%; opacity: 0; }
8% { opacity: 0.55; }
45% { background-position: 220% 220%; opacity: 0.55; }
55% { background-position: 220% 220%; opacity: 0; }
100% { background-position: 220% 220%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn::before,
.signin-btn::before,
.signin-google::before,
.signin-nav-primary::before,
.signin-nav-ghost::before,
.signin-input-submit::before,
.signup-submit::before,
.signup-google::before,
.auth-oauth-btn::before,
.auth-signout-btn::before,
.profile-danger-btn::before,
.dash-new-ride-btn::before,
.dash-rate-submit::before,
.dash-ride-cancel::before { animation: none; opacity: 0; }
}
.btn-primary {
background: var(--action-primary-bg);
color: var(--action-primary-text);
box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--action-primary-press); }
.btn-ghost {
background: transparent;
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn-ghost:hover { background: rgba(1,43,91,0.04); border-color: var(--accent-gold); color: var(--accent-gold); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(245,241,232,0.06); }
.btn-lg { padding: 15px 28px; font-size: 15px; }
/* ==========================================================
.hero-editorial — shared Four Seasons magazine-cover pattern
Applied to every full-bleed hero on the site.
Always dark-toned regardless of the global light/dark theme:
overlay is hardcoded dark, copy is hardcoded cream + gold.
The global theme only affects sections AFTER the hero.
========================================================== */
/* Base container */
.hero-editorial {
position: relative;
min-height: 88svh;
min-height: 88vh;
display: flex;
align-items: flex-end; /* copy anchored bottom-left — magazine feel */
padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) var(--gutter) clamp(56px, 8vw, 100px);
overflow: hidden;
isolation: isolate;
/* Always dark — hardcoded, never inherits global theme */
color: #F5F1E8;
--_he-cream: #F5F1E8;
--_he-cream-dim: rgba(245,241,232,0.82);
--_he-cream-muted: rgba(245,241,232,0.50);
--_he-gold: #CDA65B;
--_he-border: rgba(245,241,232,0.08);
/* Override design-token vars so btn-primary/ghost render correctly inside hero */
--text-primary: #F5F1E8;
--text-secondary: rgba(245,241,232,0.64);
--text-muted: rgba(245,241,232,0.40);
--border-subtle: rgba(245,241,232,0.06);
--accent-gold: #CDA65B;
--gold: #CDA65B;
--action-primary-bg: #F5F1E8;
--action-primary-text: #012B5B;
--action-primary-press: #A88547;
--action-secondary-text: #F5F1E8;
--action-secondary-border: rgba(245,241,232,0.28);
}
/* Modifier: copy centered (e.g. miami location hero) */
.hero-editorial--center {
align-items: center;
justify-content: center;
}
/* Modifier: taller hero (home — 92vh cinematic) */
.hero-editorial--tall {
min-height: clamp(560px, 92vh, 860px);
padding-top: clamp(60px, 10vw, 140px);
padding-bottom: clamp(80px, 12vw, 160px);
}
/* Modifier: full viewport height (miami) */
.hero-editorial--full {
min-height: 100svh;
min-height: 100vh;
}
/* Background media — video or img */
.hero-editorial-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
/* Overlay: horizontal gradient (strong left → fades right) +
vertical (darkens top and bottom for nav and fold legibility).
--overlay-h controls horizontal left opacity (default 0.85).
--overlay-mid controls horizontal midpoint (default 0.28). */
.hero-editorial-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
--overlay-h: 0.85;
--overlay-mid: 0.28;
background:
linear-gradient(100deg,
rgba(1,43,91, var(--overlay-h)) 0%,
rgba(1,43,91,0.62) 40%,
rgba(1,43,91, var(--overlay-mid)) 70%,
rgba(1,43,91,0.40) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.50) 0%,
rgba(1,43,91,0.15) 38%,
rgba(1,43,91,0.70) 100%);
}
/* Modifier: stronger overlay for static images (poster frames) */
.hero-editorial-overlay--strong {
--overlay-h: 0.92;
--overlay-mid: 0.45;
}
/* Modifier: centered overlay (symmetric, no left-bias) */
.hero-editorial-overlay--center {
background:
radial-gradient(ellipse at 30% 40%,
transparent 0%,
rgba(1,43,91,0.30) 50%,
rgba(1,43,91,0.72) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.45) 0%,
rgba(1,43,91,0.22) 38%,
rgba(1,43,91,0.85) 100%);
}
/* Inner copy container */
.hero-editorial-inner {
position: relative;
z-index: 2;
max-width: 560px;
}
/* Modifier: wider inner for home (has proof list) */
.hero-editorial-inner--wide {
max-width: var(--max-w);
width: 100%;
margin: 0 auto;
}
/* Kicker — mono caps gold */
.hero-editorial-kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--_he-gold);
margin: 0 0 18px;
display: block;
}
/* H2 visual — Playfair, large, italic em in gold */
.hero-editorial-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(48px, 7vw, 96px);
letter-spacing: -0.03em;
line-height: 0.97;
color: var(--_he-cream);
margin: 0 0 28px;
}
.hero-editorial-title em {
font-style: italic;
color: var(--_he-gold);
}
/* Modifier: home scale (slightly tighter, wider width) */
.hero-editorial-title--home {
font-size: clamp(42px, 7vw, 88px);
line-height: 1.03;
letter-spacing: -0.02em;
margin-bottom: 24px;
}
/* Modifier: location scale (oversized — city name as display type) */
.hero-editorial-title--location {
font-size: clamp(52px, 9vw, 120px);
line-height: 0.95;
letter-spacing: -0.03em;
}
/* Body copy */
.hero-editorial-p {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.65;
color: var(--_he-cream-dim);
margin: 0 0 18px;
}
.hero-editorial-p:last-child { margin-bottom: 0; }
/* Wider sub (home / miami) */
.hero-editorial-sub {
max-width: 560px;
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.55;
color: rgba(245,241,232,0.72);
margin-bottom: 32px;
}
/* CTA row */
.hero-editorial-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* Ghost button override inside editorial hero */
.hero-editorial .btn-ghost {
color: #F5F1E8;
border-color: rgba(245,241,232,0.35);
}
.hero-editorial .btn-ghost:hover {
background: rgba(245,241,232,0.08);
border-color: #F5F1E8;
}
/* Proof list (home only) */
.hero-editorial-proof {
display: flex;
gap: 48px;
flex-wrap: wrap;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--_he-border);
max-width: 620px;
list-style: none;
padding-left: 0;
}
.hero-editorial-proof li {
display: flex;
flex-direction: column;
gap: 4px;
}
.hero-editorial-proof .mono {
font-size: 22px;
font-weight: 500;
color: var(--_he-gold);
letter-spacing: -0.01em;
}
.hero-editorial-proof li span:last-child {
font-size: 12px;
color: var(--_he-cream-muted);
text-transform: uppercase;
letter-spacing: 0.14em;
}
/* Scroll indicator — shared across all editorial heroes */
.hero-editorial-scroll {
position: absolute;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-size: 10px;
letter-spacing: 0.3em;
color: rgba(245,241,232,0.5);
font-family: var(--font-mono);
}
.hero-editorial-scroll-line {
width: 1px;
height: 52px;
background: linear-gradient(180deg,
rgba(245,241,232,0.55) 0%,
rgba(245,241,232,0) 100%);
animation: he-scroll-pulse 2.2s var(--ease) infinite;
transform-origin: top;
}
@keyframes he-scroll-pulse {
0%, 100% { transform: scaleY(0.45); opacity: 0.3; }
50% { transform: scaleY(1); opacity: 1; }
}
@media (max-width: 560px) {
.hero-editorial-scroll { display: none; }
}
/* prefers-reduced-motion — freeze scroll animation */
@media (prefers-reduced-motion: reduce) {
.hero-editorial-scroll-line { animation: none; opacity: 0.4; }
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-editorial {
padding-bottom: clamp(80px, 12vw, 120px);
}
.hero-editorial-inner { max-width: 100%; }
.hero-editorial-proof { gap: 28px; margin-top: 40px; }
}
@media (max-width: 480px) {
.hero-editorial-title { font-size: clamp(38px, 11vw, 60px); }
.hero-editorial-title--location { font-size: clamp(44px, 13vw, 72px); }
}
/* ---------- Hero (index.html) ---------- */
.hero {
position: relative;
min-height: clamp(560px, 92vh, 860px);
padding: clamp(60px, 10vw, 140px) var(--gutter) clamp(80px, 12vw, 160px);
display: flex;
align-items: flex-end;
overflow: hidden;
isolation: isolate;
z-index: 1;
/* Always dark — hardcoded, never inherits global theme */
color: #F5F1E8;
--text-primary: #F5F1E8;
--text-secondary: rgba(245,241,232,0.64);
--text-muted: rgba(245,241,232,0.40);
--border-subtle: rgba(245,241,232,0.06);
--accent-gold: #CDA65B;
--gold: #CDA65B;
--action-primary-bg: #F5F1E8;
--action-primary-text: #012B5B;
--action-primary-press: #A88547;
--action-secondary-text: #F5F1E8;
--action-secondary-border: rgba(245,241,232,0.28);
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(100deg,
rgba(1,43,91,0.85) 0%,
rgba(1,43,91,0.62) 40%,
rgba(1,43,91,0.28) 70%,
rgba(1,43,91,0.40) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.55) 0%,
rgba(1,43,91,0.25) 45%,
rgba(1,43,91,0.85) 100%);
}
.hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
}
.hero-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(40px, 6vw, 84px);
letter-spacing: -0.025em;
line-height: 1.02;
color: #F5F1E8;
margin: 12px 0 24px;
max-width: 18ch;
}
.hero-title em { font-style: italic; color: #CDA65B; font-weight: 400; }
.hero-sub {
max-width: 620px;
font-size: clamp(15px, 1.35vw, 17px);
line-height: 1.6;
color: rgba(245,241,232,0.82);
margin-bottom: 32px;
}
.hero-sub em { color: #F5F1E8; font-style: normal; font-weight: 500; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero .btn-ghost {
color: #F5F1E8;
border-color: rgba(245,241,232,0.35);
}
/* Primary dominance — solid cream pill carries weight; ghost reads as
the courtesy alternative. Slight scale + extra letter-spacing on the
primary keeps it the obvious first action without making the
secondary feel demoted to a link.
Hover motion: 1px lift on primary + soft gold halo growing on top
of the existing drop-shadow + the always-on luminous sheen and
pointer spotlight already wired into .btn::before / ::after. The
secondary picks up a warm gold border tint and a contained gold
halo so it reads "lit but not loud". Both ride a ~280ms transition
so the response feels considered, not snappy. */
.hero .hero-cta-primary {
font-weight: 600;
letter-spacing: 0.02em;
box-shadow: 0 14px 40px -12px rgba(0,0,0,0.55);
transition: transform var(--dur-fast) var(--ease),
box-shadow var(--dur-normal) var(--ease),
background var(--dur-fast) var(--ease);
}
.hero .hero-cta-primary:hover {
transform: translateY(-1px);
box-shadow:
0 22px 56px -14px rgba(0,0,0,0.62),
0 0 56px -10px rgba(205,166,91,0.38);
}
.hero .hero-cta-primary:active {
transform: translateY(0) scale(0.985);
box-shadow: 0 10px 26px -10px rgba(0,0,0,0.55);
}
.hero .hero-cta-secondary {
font-weight: 500;
background: rgba(245,241,232,0.04);
transition: transform var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease),
box-shadow var(--dur-normal) var(--ease);
}
.hero .hero-cta-secondary:hover {
transform: translateY(-1px);
border-color: rgba(205,166,91,0.65);
background: rgba(205,166,91,0.08);
box-shadow: 0 0 36px -10px rgba(205,166,91,0.30);
}
.hero .hero-cta-secondary:active {
transform: translateY(0) scale(0.985);
}
.hero-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 36px 0 0;
padding: 22px 0 0;
border-top: 1px solid rgba(245,241,232,0.10);
max-width: 760px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,241,232,0.62);
row-gap: 8px;
}
.hero-trust li { padding: 0; white-space: nowrap; }
.hero-trust li:not(:last-child)::after {
content: '·';
color: #CDA65B;
margin: 0 14px;
font-weight: 700;
letter-spacing: 0;
}
/* ---------- Hero ambient layer ----------
Sits between .hero-overlay (z-1) and .hero-inner (z-2) — DOM order
places it z-1 too, source-order on top of the navy gradient. Two
soft drifting orbs (gold + ivory) provide the "private jet lounge"
warmth requested for premium motion, plus a faint diagonal route
trail that hints at "city lights through tinted glass". All effects
are CSS-only, animate transform/opacity exclusively (compositor
work, no layout thrash), and live below 0.25 opacity per the brief.
Orbs use radial-gradient backgrounds with no filter:blur — the
gradient itself does the soft falloff and runs cheaper than a true
blur on top of an autoplay video. Movement is 8-18s loops, low
amplitude, ease-in-out so direction reversals never feel mechanical.
Disabled entirely under prefers-reduced-motion (block at file end). */
.hero-ambient {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.hero-orb {
position: absolute;
display: block;
border-radius: 50%;
pointer-events: none;
will-change: transform, opacity;
mix-blend-mode: screen;
}
.hero-orb--gold {
width: clamp(420px, 55vw, 720px);
height: clamp(420px, 55vw, 720px);
top: 8%;
left: -10%;
background: radial-gradient(circle,
rgba(205,166,91,0.28) 0%,
rgba(205,166,91,0.10) 35%,
transparent 65%);
opacity: 0.22;
animation: hero-orb-gold 16s ease-in-out infinite alternate;
}
.hero-orb--ivory {
width: clamp(360px, 48vw, 560px);
height: clamp(360px, 48vw, 560px);
bottom: -12%;
right: -8%;
background: radial-gradient(circle,
rgba(245,241,232,0.20) 0%,
rgba(245,241,232,0.07) 35%,
transparent 65%);
opacity: 0.18;
animation: hero-orb-ivory 13s ease-in-out infinite alternate;
}
@keyframes hero-orb-gold {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.18; }
100% { transform: translate3d(36px, -28px, 0) scale(1.10); opacity: 0.24; }
}
@keyframes hero-orb-ivory {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.14; }
100% { transform: translate3d(-32px, 22px, 0) scale(1.08); opacity: 0.20; }
}
/* Faint diagonal route trail — single thin line that drifts across
the hero like distant headlights. Gradient masked to a slim band so
it reads as a streak, not a stripe. */
.hero-route-trail {
position: absolute;
top: 38%;
left: -20%;
width: 140%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(205,166,91,0.30) 45%,
rgba(245,241,232,0.20) 55%,
transparent 100%);
transform: rotate(-8deg);
opacity: 0;
animation: hero-route-trail 18s ease-in-out infinite;
pointer-events: none;
}
@keyframes hero-route-trail {
0%, 100% { opacity: 0; transform: rotate(-8deg) translateX(-8%); }
35% { opacity: 0.22; transform: rotate(-8deg) translateX(0%); }
65% { opacity: 0.22; transform: rotate(-8deg) translateX(0%); }
}
/* ---------- Concierge route strip ----------
Bridge between hero and Why-Luna trust band. 4 stops in a row, gold
dots tied by a thin gold line, with a bright gold pulse traveling
left-to-right every 14s. Designed to read as concierge coordination,
not a software progress bar — labels are mono uppercase, dots are
small (12px), no checkmarks, no "completed" state semantics. */
.route-strip-band {
position: relative;
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(36px, 5vw, 56px) var(--gutter) clamp(8px, 2vw, 16px);
}
.route-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
position: relative;
margin: 0;
padding: 0;
align-items: start;
}
/* Static base line connecting all four dots */
.route-strip::before {
content: '';
position: absolute;
top: 5px;
left: 12.5%;
right: 12.5%;
height: 1px;
background: linear-gradient(90deg,
rgba(205,166,91,0.10),
rgba(205,166,91,0.32) 25%,
rgba(205,166,91,0.32) 75%,
rgba(205,166,91,0.10));
pointer-events: none;
}
/* Traveling glow that moves across the same span */
.route-strip::after {
content: '';
position: absolute;
top: 4px;
left: 12.5%;
right: 12.5%;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
rgba(205,166,91,0.0) 35%,
rgba(205,166,91,0.95) 50%,
rgba(205,166,91,0.0) 65%,
transparent 100%);
background-size: 28% 100%;
background-repeat: no-repeat;
background-position: -28% 0;
filter: blur(1.5px);
pointer-events: none;
animation: route-strip-glow 14s linear infinite;
}
@keyframes route-strip-glow {
0% { background-position: -28% 0; }
100% { background-position: 128% 0; }
}
.route-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
position: relative;
}
.route-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--accent-gold);
box-shadow: 0 0 0 1px rgba(205,166,91,0.35),
0 0 12px rgba(205,166,91,0.30);
position: relative;
z-index: 1;
}
.route-label {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.4;
max-width: 18ch;
}
@media (max-width: 720px) {
.route-strip-band { padding: 28px 16px 4px; }
.route-strip { grid-template-columns: repeat(4, 1fr); }
.route-strip::before { left: 12.5%; right: 12.5%; }
.route-strip::after { left: 12.5%; right: 12.5%; }
.route-label {
font-size: 9px;
letter-spacing: 0.12em;
}
}
/* ---------- Trust card icon micro-animation ----------
On card hover, the gold-bordered icon container scales up 6% and
the inner SVG gains a touch of saturation. Subtle; reads as the
card "warming" rather than the icon "popping". */
.trust-card .trust-ico {
transition:
transform var(--dur-normal) var(--ease),
background var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease),
box-shadow var(--dur-normal) var(--ease);
}
.trust-card:hover .trust-ico {
transform: scale(1.06);
background: rgba(205,166,91,0.14);
border-color: var(--accent-gold-light);
box-shadow: 0 0 24px -6px rgba(205,166,91,0.30);
}
/* ---------- Reduced-motion guard for hero ambient + route strip ----------
Brief: with prefers-reduced-motion enabled, disable the floating
background and the route line movement; keep static fades only.
The orbs collapse to a quieter static glow, the route trail hides,
the route strip glow stops moving (the static base line stays so
the band still reads as a structured cue, not a void). Trust card
icon hover keeps its scale — it's a hover response, not ambient
motion, and the brief allows it. */
@media (prefers-reduced-motion: reduce) {
.hero-orb { animation: none !important; }
.hero-orb--gold { opacity: 0.16; transform: none; }
.hero-orb--ivory { opacity: 0.12; transform: none; }
.hero-route-trail { display: none; }
.route-strip::after { animation: none; opacity: 0; }
}
/* ---------- Expanding video (pinned scroll-scrub) ----------
Section runway sized tight: 125vh desktop / 115vh mobile, leaving
25vh and 15vh respectively for the scrub. Past iterations used 150vh
which left a noticeable navy tail after the frame fully expanded —
shortening the runway eliminates that wasted scroll while keeping
the cinematic pin smooth. Frame also starts larger (70vh instead of
58vh) so the surface reads "almost full" from the first scroll
pixel; the expansion is shorter but more dramatic.
Background: ported from the 21st.dev "Dark Basic Grid" pattern,
adapted to Luna's gold/navy palette. Layers: gold spotlight from
top-center → fine 48×48 gold grid (4% opacity) → bottom vignette.
CSS-only, zero GPU cost — safe to coexist with the autoplay video
per feedback_aurora_video_perf.md (no WebGL shader on this surface). */
.expand-section {
position: relative;
/* 175vh gives 75vh of pin runway. Frame finishes expanding inside
the first ~22% (~16vh of scroll); the remaining ~59vh keeps the
frame locked at full size so the user has actual time to watch
the brand-film loop without fighting the scroll. */
height: 175vh;
z-index: 2;
background-color: #012B5B;
background-image:
radial-gradient(ellipse 80% 60% at 50% 0%,
rgba(205,166,91,0.12) 0%,
transparent 70%),
radial-gradient(ellipse 110% 70% at 50% 100%,
rgba(0,0,0,0.32) 0%,
transparent 60%),
linear-gradient(to right,
rgba(205,166,91,0.045) 1px,
transparent 1px),
linear-gradient(to bottom,
rgba(205,166,91,0.045) 1px,
transparent 1px);
background-size: auto, auto, 48px 48px, 48px 48px;
overflow: hidden;
}
.expand-stage {
position: sticky;
top: 0;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.expand-frame {
--p: 0;
position: relative;
/* Start at 66vh × 68vw, expand to 84vh × 88vw. Frame stays visibly
framed by the section's grid+spotlight on all sides — even at
full expansion there is ~8vh of navy breathing room above and
below, ~6vw left and right. Combined with the cosine-eased scrub
(app.js), this places the perceived expansion "moment" in the
middle of the section scroll, with the frame seated like a
theater screen inside the bloco rather than pasted edge-to-edge. */
width: calc(68vw + 20vw * var(--p));
height: calc(66vh + 18vh * var(--p));
max-width: 88vw;
max-height: 84vh;
border-radius: calc(var(--r-xl) - 10px * var(--p) + 10px);
overflow: hidden;
/* Drop shadow stays consistent; gold halo grows as the frame opens —
blur 0→80px, never enough to bloom over the surrounding grid but
enough to set the frame apart at full expansion. */
box-shadow:
0 30px 80px rgba(0,0,0, calc(0.55 - 0.25 * var(--p))),
0 0 calc(80px * var(--p)) -10px rgba(205,166,91, calc(0.22 * var(--p)));
/* Border tint shifts cream → gold as p grows — subtle "the frame
lights up when it's finally showing properly" effect. */
border: 1px solid rgba(205,166,91, calc(0.12 + 0.18 * var(--p)));
will-change: width, height, border-radius;
}
.expand-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
/* Subtle contrast/saturation lift hides upscale wash-out on lower-res source */
filter: contrast(1.06) saturate(1.08);
}
/* Soft vignette that grows as frame expands — masks edge pixelation */
.expand-frame::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(
ellipse at center,
transparent 55%,
rgba(1,43,91, calc(0.18 * var(--p))) 100%
);
}
.expand-caption {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: clamp(24px, 4vw, 56px);
pointer-events: none;
background: linear-gradient(180deg,
rgba(1,43,91,0) 40%,
rgba(1,43,91,0.55) 100%);
color: #F5F1E8;
}
.expand-caption .kicker { color: #CDA65B; }
.expand-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 1.1;
letter-spacing: -0.015em;
color: #F5F1E8;
max-width: 640px;
/* Caption fades in as video expands */
opacity: calc(0.2 + 0.8 * var(--p, 0));
transition: opacity var(--dur-normal) var(--ease);
}
@media (max-width: 720px) {
.expand-section {
height: 150vh;
/* Tighter grid on mobile so the pattern doesn't dominate the smaller
viewport. Spotlight + vignette use percentages so they reflow. */
background-size: auto, auto, 32px 32px, 32px 32px;
}
.expand-frame { width: calc(82vw + 12vw * var(--p)); max-width: 94vw; }
}
@media (prefers-reduced-motion: reduce) {
.expand-section { height: auto; background-image: none; }
.expand-stage { position: relative; height: auto; padding: clamp(48px, 8vw, 96px) 0; }
.expand-frame { width: min(92vw, 1100px); height: auto; aspect-ratio: 16/9; --p: 1; }
}
/* ---------- Sections ---------- */
.section {
position: relative;
z-index: 1;
padding: clamp(70px, 10vw, 120px) var(--gutter);
max-width: var(--max-w);
margin: 0 auto;
}
.section-head { max-width: 680px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.section-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(32px, 4.6vw, 52px);
letter-spacing: -0.015em;
line-height: 1.1;
margin-bottom: 16px;
}
.section-sub { font-size: 16px; color: var(--text-secondary); }
/* ---------- Grid ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* ---------- Card ---------- */
.card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
padding: 28px;
transition: border-color var(--dur-normal) var(--ease),
transform var(--dur-normal) var(--ease);
}
.card:hover { border-color: var(--border-default); }
/* ---------- Services section background ----------
Subtle ambient layer behind the 6 service cards — soft gold
spotlight from top-center + fine 48×48 gold grid (4% opacity).
Renders below the cards (z-index -1 inside an isolated stacking
context) so it never interferes with hover / shadow layering on
the .card surfaces above. Full-bleed via the classic
"left: 50%; margin-left: -50vw; width: 100vw" trick so the bg
reaches viewport edges even though .section is capped at
--max-w. Uses gold rgba so it reads warm in both light (over
cream) and dark (over navy) themes — no theme-specific overrides
needed. */
.section-services { position: relative; isolation: isolate; }
.section-services::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin-left: -50vw;
width: 100vw;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient(ellipse 70% 50% at 50% 0%,
rgba(205,166,91, 0.08) 0%,
transparent 65%),
radial-gradient(ellipse 90% 60% at 50% 100%,
rgba(205,166,91, 0.05) 0%,
transparent 70%),
linear-gradient(to right,
rgba(205,166,91, 0.04) 1px,
transparent 1px),
linear-gradient(to bottom,
rgba(205,166,91, 0.04) 1px,
transparent 1px);
background-size: auto, auto, 48px 48px, 48px 48px;
}
/* Slightly stronger spotlight in dark theme — over navy the same gold
alpha reads ~30% dimmer than over cream, so we lift it a touch. */
[data-theme="dark"] .section-services::before {
background-image:
radial-gradient(ellipse 70% 50% at 50% 0%,
rgba(205,166,91, 0.12) 0%,
transparent 65%),
radial-gradient(ellipse 90% 60% at 50% 100%,
rgba(205,166,91, 0.07) 0%,
transparent 70%),
linear-gradient(to right,
rgba(205,166,91, 0.055) 1px,
transparent 1px),
linear-gradient(to bottom,
rgba(205,166,91, 0.055) 1px,
transparent 1px);
background-size: auto, auto, 48px 48px, 48px 48px;
}
@media (max-width: 720px) {
.section-services::before { background-size: auto, auto, 32px 32px, 32px 32px; }
}
/* ---------- Service card ----------
Conversion-oriented refresh: each card now carries icon, title,
short description, four micro-bullets and a CTA link that pushes
to the booking modal (or the corporate page where the journey
warrants its own intake). Card surface uses the .card base so
dual-theme tokens carry through; service-ico container preserved
for visual consistency with the Trust band cards above. Inline
SVG icons replace the emoji glyphs to avoid OS-level font fallback
inconsistencies (✈ vs ◷ vs ♡ rendered very differently across
iOS / Windows / Android — the SVG path is identical everywhere). */
.service-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px 28px 24px;
position: relative;
transition:
transform var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease),
box-shadow var(--dur-normal) var(--ease);
}
.service-card:hover {
transform: translateY(-3px);
border-color: var(--accent-gold);
box-shadow: 0 18px 40px -16px rgba(0,0,0,0.18),
0 0 32px -8px rgba(205,166,91,0.18);
}
.service-ico {
width: 44px; height: 44px;
border-radius: var(--r-md);
border: 1px solid var(--gold);
color: var(--gold);
display: flex; align-items: center; justify-content: center;
background: var(--gold-glow);
flex-shrink: 0;
transition:
transform var(--dur-normal) var(--ease),
background var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease);
}
.service-ico svg { width: 22px; height: 22px; }
.service-card:hover .service-ico {
transform: scale(1.06);
background: rgba(205,166,91, 0.14);
border-color: var(--accent-gold-light);
}
.service-card-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 21px;
letter-spacing: -0.005em;
line-height: 1.2;
color: var(--text-primary);
margin: 0;
}
.service-card-desc {
font-size: 14.5px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.service-card-bullets {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.service-card-bullets li {
position: relative;
padding-left: 18px;
font-size: 13.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.service-card-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 1px;
background: var(--accent-gold);
}
/* CTA — text-link style with arrow that nudges right on hover. Sits
at the bottom of the card via margin-top:auto so the row of cards
keeps a uniform CTA baseline regardless of description length. */
.service-card-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(205,166,91, 0.18);
font-family: var(--font-sans);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent-gold);
text-decoration: none;
transition:
color var(--dur-fast) var(--ease),
gap var(--dur-normal) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.service-card-cta-ico {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform var(--dur-normal) var(--ease);
}
.service-card:hover .service-card-cta {
color: var(--accent-gold-light);
gap: 12px;
border-top-color: rgba(205,166,91, 0.42);
}
.service-card:hover .service-card-cta-ico {
transform: translateX(3px);
}
/* Tablet break — 3 cols feels cramped between 720 and 1020px with
the new richer card content. Drop to 2 cols there. */
@media (max-width: 1020px) {
.services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.services-grid { grid-template-columns: 1fr !important; }
.service-card { padding: 28px 24px 22px; }
}
/* ---------- Services CTA strip ----------
Sits directly below the 6 service cards. For visitors who can't
self-categorize their trip, the strip pushes them either to a
human (Call) or to the booking modal (Reserve). Layout is split:
copy on the left, two CTAs on the right, stacking under 720px. */
.services-cta-strip {
margin-top: clamp(40px, 5vw, 64px);
padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 48px);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
position: relative;
}
.services-cta-strip::before {
content: '';
position: absolute;
top: 0;
left: 32px;
right: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
opacity: 0.5;
}
.services-cta-strip-copy {
flex: 1 1 360px;
min-width: 0;
}
.services-cta-strip-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(20px, 2.4vw, 26px);
letter-spacing: -0.005em;
line-height: 1.25;
color: var(--text-primary);
margin: 0 0 6px;
}
.services-cta-strip-sub {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
max-width: 540px;
margin: 0;
}
.services-cta-strip-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
flex-shrink: 0;
}
@media (max-width: 720px) {
.services-cta-strip {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.services-cta-strip-actions {
width: 100%;
}
.services-cta-strip-actions .btn {
flex: 1 1 auto;
min-width: 0;
}
}
/* ---------- Airport Transfers section (between Services and Fleet) ----------
High-intent service line for premium South Florida private chauffeur
clients. Surface keeps the .section base and inherits all dual-theme
tokens; the only section-specific styling is the lede block, the
airport-card variant, the protocol strip and the CTA strip below
the cards. SEO keywords (Miami airport chauffeur / FLL airport
transfer / etc) live in the lede prose, never as labels. */
.section-airport { position: relative; }
.airport-lede {
max-width: 760px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.airport-lede p {
font-size: clamp(15px, 1.25vw, 17px);
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 16px;
}
.airport-lede p:last-child { margin-bottom: 0; }
.airport-lede-coverage {
font-family: var(--font-mono);
font-size: 12.5px !important;
letter-spacing: 0.04em;
color: var(--text-muted) !important;
line-height: 1.65 !important;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
}
/* Airport card — same visual rhythm as service-card / trust-card so
the home page feels like one design system. Icon container, Playfair
title, body description, gold-dash bullets. No per-card CTA — the
section CTA below carries conversion intent. */
.airport-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px 28px 28px;
position: relative;
transition:
transform var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease),
box-shadow var(--dur-normal) var(--ease);
}
.airport-card:hover {
transform: translateY(-3px);
border-color: var(--accent-gold);
box-shadow:
0 18px 40px -16px rgba(0, 0, 0, 0.18),
0 0 32px -8px rgba(205, 166, 91, 0.18);
}
.airport-card-ico {
width: 44px;
height: 44px;
border-radius: var(--r-md);
border: 1px solid var(--gold);
color: var(--gold);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gold-glow);
flex-shrink: 0;
transition:
transform var(--dur-normal) var(--ease),
background var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease);
}
.airport-card-ico svg { width: 22px; height: 22px; }
.airport-card:hover .airport-card-ico {
transform: scale(1.06);
background: rgba(205, 166, 91, 0.14);
border-color: var(--accent-gold-light);
}
.airport-card-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 21px;
letter-spacing: -0.005em;
line-height: 1.2;
color: var(--text-primary);
margin: 0;
}
.airport-card-desc {
font-size: 14.5px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.airport-card-bullets {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.airport-card-bullets li {
position: relative;
padding-left: 18px;
font-size: 13.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.airport-card-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 1px;
background: var(--accent-gold);
}
@media (max-width: 1020px) {
.airport-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
.airport-grid { grid-template-columns: 1fr !important; }
.airport-card { padding: 28px 24px 26px; }
}
/* Protocol strip — 5 steps in a row on desktop, vertical stack on
mobile. Faint gold line connects the dots; numbers in mono, labels
in sans. Reads as concierge handoff, not SaaS onboarding. */
.airport-process {
margin-top: clamp(48px, 6vw, 72px);
padding: clamp(28px, 3.5vw, 40px) 0 clamp(20px, 3vw, 32px);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.airport-process-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
text-align: center;
margin: 0 0 28px;
}
.airport-process-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative;
align-items: start;
}
.airport-process-steps::before {
content: '';
position: absolute;
top: 16px;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg,
rgba(205, 166, 91, 0.10),
rgba(205, 166, 91, 0.32) 50%,
rgba(205, 166, 91, 0.10));
pointer-events: none;
}
.airport-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
position: relative;
padding: 0 8px;
}
.airport-step-num {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--accent-gold);
background: var(--surface-card);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--accent-gold);
position: relative;
z-index: 1;
}
.airport-step-label {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.45;
max-width: 14ch;
}
@media (max-width: 720px) {
.airport-process { padding: 28px 0 16px; }
.airport-process-steps {
grid-template-columns: 1fr;
gap: 14px;
}
.airport-process-steps::before { display: none; }
.airport-step {
flex-direction: row;
align-items: center;
gap: 16px;
text-align: left;
padding: 0;
}
.airport-step-label { max-width: none; font-size: 13.5px; }
}
/* CTA area — primary + ghost stacked under support line. Mirrors the
services-cta-strip layout pattern but lighter (no card surface),
so it reads as the section's closing beat, not another panel. */
.airport-cta {
margin-top: clamp(36px, 4.5vw, 56px);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.airport-cta-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.airport-cta-support {
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
max-width: 540px;
margin: 0;
}
@media (max-width: 480px) {
.airport-cta-actions {
flex-direction: column;
width: 100%;
max-width: 360px;
}
.airport-cta-actions .btn {
width: 100%;
}
}
/* ---------- Corporate & Executive Accounts section ----------
Sits between Fleet showroom and the Why Luna 4-stats. Recurring
client conversion surface — assistants, companies, hotels, family
offices. 4 client-type cards (2x2 grid), benefits strip (4x2 grid
collapsing to 2 / 1 col), and CTA strip pushing to corporate.html
intake. Mirrors the Airport Transfers visual language so the home
page reads as one editorial system, but uses .grid-2 (richer cards
need more width) instead of .grid-3. */
.section-corporate { position: relative; }
.corporate-lede {
max-width: 760px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.corporate-lede p {
font-size: clamp(15px, 1.25vw, 17px);
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 16px;
}
.corporate-lede p:last-child { margin-bottom: 0; }
.corporate-lede-coverage {
font-family: var(--font-mono);
font-size: 12.5px !important;
letter-spacing: 0.04em;
color: var(--text-muted) !important;
line-height: 1.65 !important;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
}
/* Corporate card — same icon container + title + desc + bullets
pattern as the airport-card / service-card / trust-card. 2x2 grid
on desktop, stacks 1-col on mobile. */
.corporate-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px 28px 28px;
position: relative;
transition:
transform var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease),
box-shadow var(--dur-normal) var(--ease);
}
.corporate-card:hover {
transform: translateY(-3px);
border-color: var(--accent-gold);
box-shadow:
0 18px 40px -16px rgba(0, 0, 0, 0.18),
0 0 32px -8px rgba(205, 166, 91, 0.18);
}
.corporate-card-ico {
width: 44px;
height: 44px;
border-radius: var(--r-md);
border: 1px solid var(--gold);
color: var(--gold);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--gold-glow);
flex-shrink: 0;
transition:
transform var(--dur-normal) var(--ease),
background var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease);
}
.corporate-card-ico svg { width: 22px; height: 22px; }
.corporate-card:hover .corporate-card-ico {
transform: scale(1.06);
background: rgba(205, 166, 91, 0.14);
border-color: var(--accent-gold-light);
}
.corporate-card-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 21px;
letter-spacing: -0.005em;
line-height: 1.2;
color: var(--text-primary);
margin: 0;
}
.corporate-card-desc {
font-size: 14.5px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.corporate-card-bullets {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.corporate-card-bullets li {
position: relative;
padding-left: 18px;
font-size: 13.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.corporate-card-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 1px;
background: var(--accent-gold);
}
@media (max-width: 720px) {
.corporate-grid { grid-template-columns: 1fr !important; }
.corporate-card { padding: 28px 24px 26px; }
}
/* Account Benefits strip — 8 capabilities, 4x2 desktop grid with
slim gold checkmarks. Collapses to 2-col tablet, 1-col mobile.
Same border-top/bottom framing as the airport-process strip so
the rhythm matches across sections. */
.corporate-benefits {
margin-top: clamp(48px, 6vw, 72px);
padding: clamp(28px, 3.5vw, 40px) 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.corporate-benefits-title {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
text-align: center;
margin: 0 0 28px;
}
.corporate-benefits-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 24px;
row-gap: 16px;
}
.corporate-benefit {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.corporate-benefit-ico {
width: 16px;
height: 16px;
color: var(--accent-gold);
flex-shrink: 0;
margin-top: 2px;
}
@media (max-width: 1020px) {
.corporate-benefits-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.corporate-benefits-list { grid-template-columns: 1fr; row-gap: 12px; }
}
/* CTA area — primary "Request Corporate Account" + ghost call,
support line below. Mirrors .airport-cta layout. */
.corporate-cta {
margin-top: clamp(36px, 4.5vw, 56px);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
text-align: center;
}
.corporate-cta-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.corporate-cta-support {
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
max-width: 540px;
margin: 0;
}
@media (max-width: 480px) {
.corporate-cta-actions {
flex-direction: column;
width: 100%;
max-width: 360px;
}
.corporate-cta-actions .btn { width: 100%; }
}
/* ---------- Trust band (sits directly below hero on /index) ----------
Conversion-oriented section. 4 cards distinguishing Luna from
rideshare / random car services / cheap limo. Uses the existing .card
base so dual-theme tokens (surface-card, border-subtle, text-primary,
text-secondary, accent-gold) carry through automatically. The icon
container mirrors .service-ico (44×44 gold-bordered) so the visual
rhythm matches the Services grid that comes later down the page. */
.section-trust { padding-top: clamp(72px, 9vw, 110px); padding-bottom: clamp(72px, 9vw, 110px); }
.section-trust .grid-4 { gap: 18px; }
.trust-card {
display: flex;
flex-direction: column;
gap: 14px;
padding: 32px 28px 28px;
position: relative;
}
.trust-card::before {
content: '';
position: absolute;
top: 0; left: 24px; right: 24px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
opacity: 0;
transition: opacity var(--dur-normal) var(--ease);
}
.trust-card:hover {
transform: translateY(-2px);
border-color: var(--accent-gold);
}
.trust-card:hover::before { opacity: 0.6; }
.trust-ico {
width: 44px; height: 44px;
border-radius: var(--r-md);
border: 1px solid var(--accent-gold);
color: var(--accent-gold);
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent-gold-glow);
flex-shrink: 0;
}
.trust-ico svg { width: 22px; height: 22px; }
.trust-card-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 19px;
letter-spacing: -0.005em;
line-height: 1.25;
color: var(--text-primary);
margin: 0;
}
.trust-card-copy {
font-size: 14.5px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.trust-cta {
text-align: center;
margin-top: clamp(40px, 5vw, 64px);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.trust-cta-sub {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
@media (max-width: 1020px) {
.section-trust .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
.section-trust .grid-4 { grid-template-columns: 1fr; gap: 14px; }
.trust-card { padding: 28px 24px 26px; }
.trust-card-title { font-size: 18px; }
.trust-cta-sub { letter-spacing: 0.14em; font-size: 10.5px; }
}
/* ---------- Fleet card ---------- */
.fleet-card { display: flex; flex-direction: column; gap: 14px; padding: 0; overflow: hidden; }
.fleet-media {
background: var(--surface-elevated);
padding: 24px;
display: flex; align-items: center; justify-content: center;
aspect-ratio: 16 / 9;
border-bottom: 1px solid var(--border-subtle);
}
[data-theme="dark"] .fleet-media {
background: linear-gradient(180deg, #012B5B 0%, #03366E 100%);
}
.fleet-media img { max-height: 160px; width: auto; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5)); }
.fleet-card h3 { padding: 0 24px; font-size: 20px; }
.fleet-card p { padding: 0 24px; font-size: 14px; color: var(--text-secondary); }
.fleet-meta .mono { color: var(--gold); font-size: 13px; }
.fleet-card > p:last-child { padding-bottom: 28px; }
/* ---------- Why ---------- */
.why-item { padding: 4px 0; }
.why-num { color: var(--gold); font-size: 13px; letter-spacing: 0.2em; margin-bottom: 12px; }
.why-item h3 { font-size: 17px; margin-bottom: 8px; }
.why-item p { font-size: 14.5px; color: var(--text-secondary); }
/* ---------- Testimonials ---------- */
.testimonial-card {
position: relative;
display: flex; flex-direction: column; gap: 16px;
padding: 36px 28px 28px;
overflow: hidden;
}
.testimonial-card:hover { transform: translateY(-2px); }
.testimonial-quote {
position: absolute;
top: -28px;
right: 20px;
font-family: var(--font-serif);
font-size: 160px;
line-height: 1;
color: var(--gold);
opacity: 0.18;
pointer-events: none;
user-select: none;
}
.testimonial-stars { display: flex; gap: 4px; }
.testimonial-stars span {
width: 14px; height: 14px;
background: var(--gold);
-webkit-mask: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.testimonial-text {
font-family: var(--font-serif);
font-size: 17px;
line-height: 1.5;
color: var(--text-primary);
font-style: italic;
margin: 0;
position: relative;
z-index: 1;
}
.testimonial-who {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
}
.testimonial-name {
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
margin-bottom: 4px;
}
.testimonial-role {
font-size: 11px;
letter-spacing: 0.16em;
color: var(--gold);
}
.testimonial-aggregate {
max-width: 520px;
margin: clamp(40px, 6vw, 64px) auto 0;
text-align: center;
padding-top: clamp(24px, 4vw, 40px);
border-top: 1px solid var(--border-subtle);
}
.testimonial-aggregate-score {
display: inline-flex;
align-items: baseline;
gap: 14px;
margin-bottom: 10px;
}
.testimonial-aggregate-score .mono {
font-size: 40px;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1;
}
.testimonial-aggregate-stars {
font-size: 20px;
color: var(--gold);
letter-spacing: 0.12em;
}
.testimonial-aggregate-note {
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
}
/* ---------- Area / split ---------- */
.section-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split-copy .section-title { text-align: left; }
.split-copy p { margin-bottom: 24px; font-size: 16px; }
.area-list {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
margin-top: 8px;
}
.area-list li {
font-size: 14px;
color: var(--text-secondary);
padding-left: 18px;
position: relative;
}
.area-list li::before {
content: '';
position: absolute; left: 0; top: 0.7em;
width: 6px; height: 1px; background: var(--gold);
}
.area-card { padding: 36px; }
.area-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 20px 0 28px; }
.area-stats > div { text-align: left; }
.area-stat { font-size: 36px; color: var(--gold); font-weight: 500; margin-bottom: 6px; letter-spacing: -0.01em; }
.area-stats p:last-child { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.area-note { font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border-subtle); padding-top: 20px; line-height: 1.5; }
/* ---------- Featured location band ---------- */
.featured-location {
position: relative;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(80px, 10vw, 140px) var(--gutter);
overflow: hidden;
color: #F5F1E8;
margin: clamp(60px, 8vw, 100px) 0;
}
.featured-location-video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.featured-location-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse at 50% 50%,
rgba(1,43,91,0.40) 0%,
rgba(1,43,91,0.70) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.60) 0%,
rgba(1,43,91,0.35) 40%,
rgba(1,43,91,0.80) 100%);
}
.featured-location-inner {
position: relative;
z-index: 2;
text-align: center;
max-width: 760px;
}
.featured-location-kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--accent-gold);
margin: 0 0 20px;
}
.featured-location-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(72px, 12vw, 180px);
letter-spacing: -0.03em;
line-height: 0.95;
color: #F5F1E8;
margin: 0 0 28px;
}
.featured-location-title em {
font-style: italic;
color: var(--accent-gold);
}
.featured-location-sub {
font-size: clamp(15px, 1.6vw, 18px);
line-height: 1.6;
color: rgba(245,241,232,0.85);
max-width: 620px;
margin: 0 auto 36px;
}
.featured-location-cta {
position: relative;
}
.featured-location-cta::after {
content: '→';
display: inline-block;
margin-left: 10px;
transition: transform var(--dur-fast) var(--ease);
}
.featured-location-cta:hover::after { transform: translateX(4px); }
@media (max-width: 720px) {
.featured-location { min-height: 60vh; margin: clamp(40px, 6vw, 72px) 0; }
}
/* ---------- FAQ ---------- */
.section-faq { max-width: 860px; }
.faq-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--border-subtle);
}
.faq-item {
border-bottom: 1px solid var(--border-subtle);
transition: background var(--dur-fast) var(--ease);
}
.faq-item[open] {
background: linear-gradient(180deg, transparent 0%, var(--gold-glow) 100%);
}
.faq-q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 4px;
cursor: pointer;
list-style: none;
font-family: var(--font-serif);
font-size: clamp(18px, 2vw, 22px);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--text-primary);
transition: color var(--dur-fast) var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--gold); }
.faq-item[open] .faq-q { color: var(--gold); }
.faq-ico {
flex: 0 0 28px;
width: 28px; height: 28px;
position: relative;
border: 1px solid var(--gold);
border-radius: var(--r-full);
transition: transform var(--dur-normal) var(--ease),
background var(--dur-fast) var(--ease);
}
.faq-ico::before,
.faq-ico::after {
content: '';
position: absolute;
inset: 0;
margin: auto;
background: var(--gold);
transition: transform var(--dur-normal) var(--ease),
background var(--dur-fast) var(--ease);
}
.faq-ico::before { width: 11px; height: 1px; }
.faq-ico::after { width: 1px; height: 11px; }
.faq-item[open] .faq-ico { transform: rotate(45deg); background: var(--gold); }
.faq-item[open] .faq-ico::before,
.faq-item[open] .faq-ico::after { background: var(--text-on-gold); }
.faq-a {
padding: 0 4px 24px;
max-width: 720px;
}
.faq-a p {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.65;
margin: 0;
}
/* ---------- How it works ---------- */
.how-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.how-steps::before {
content: '';
position: absolute;
top: 22px;
left: 12%;
right: 12%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--gold) 20%,
var(--gold) 80%,
transparent 100%);
opacity: 0.5;
pointer-events: none;
}
.how-step {
position: relative;
padding: 0 18px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.how-num {
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--gold);
border-radius: var(--r-full);
background: var(--surface-page);
color: var(--gold);
font-size: 13px;
letter-spacing: 0.1em;
position: relative;
z-index: 1;
transition: background var(--dur-normal) var(--ease),
color var(--dur-normal) var(--ease);
}
.how-step:hover .how-num {
background: var(--gold);
color: var(--text-on-gold);
}
.how-title {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0;
}
.how-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
max-width: 220px;
}
/* ---------- Conditional service groups (booking form) ---------- */
.conditional-block {
display: grid;
gap: 18px;
padding: 22px 22px 24px;
border: 1px solid var(--border-subtle);
border-left: 2px solid var(--gold);
border-radius: var(--r-md);
background: var(--surface-elevated);
animation: cond-slide-in var(--dur-normal) var(--ease);
}
.conditional-block[hidden] { display: none; }
@keyframes cond-slide-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.conditional-kicker {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
margin: 0 0 4px;
}
/* Alert callout — parking pass explanation */
.alert-callout {
padding: 20px 22px;
border: 1px solid var(--gold);
border-radius: var(--r-md);
background: var(--gold-glow);
}
.alert-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: 17px;
color: var(--text-primary);
margin: 0 0 10px;
letter-spacing: -0.01em;
}
.alert-callout > p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0 0 12px;
}
.alert-note {
font-size: 13px !important;
color: var(--text-muted) !important;
padding-top: 10px;
border-top: 1px solid var(--border-subtle);
margin-top: 14px !important;
margin-bottom: 0 !important;
}
.alert-compare {
display: grid;
gap: 12px;
margin: 0 0 12px;
}
.alert-compare li {
font-size: 13.5px;
color: var(--text-secondary);
line-height: 1.55;
padding-left: 0;
}
.alert-compare-label {
display: inline-block;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--r-xs);
margin-right: 10px;
vertical-align: 2px;
}
.alert-compare-yes {
background: var(--gold);
color: var(--text-on-gold);
}
.alert-compare-no {
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border-strong);
}
/* ---------- Booking form ---------- */
.section-book { max-width: 840px; }
.book-form { padding: 36px; display: grid; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
}
.field > span em { color: var(--text-muted); font-style: normal; font-weight: 400; }
.field input, .field select, .field textarea {
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-primary);
background: var(--surface-page);
border: 1px solid var(--border-default);
border-radius: var(--r-md);
padding: 13px 14px;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--gold);
background: var(--surface-elevated);
}
.field select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
linear-gradient(135deg, var(--gold) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 36px;
}
/* iOS Safari gives and an
intrinsic min-width based on their native format (mm/dd/yyyy or
hh:mm AM/PM) and renders the picker chrome outside the container.
That's what causes them to "explode out" of a narrow column —
the input ignores width: 100% and width-shrinks only down to its
format width. Killing -webkit-appearance forces them to behave
like plain text inputs and respect the container bounds. */
.field input[type="date"],
.field input[type="time"] {
-webkit-appearance: none;
appearance: none;
min-width: 0;
cursor: pointer;
}
/* Empty-state value text (placeholder equivalent for date/time) */
.field input[type="date"]::-webkit-datetime-edit,
.field input[type="time"]::-webkit-datetime-edit {
color: var(--text-primary);
line-height: 1.2;
}
.field input[type="date"]:invalid::-webkit-datetime-edit,
.field input[type="time"]:invalid::-webkit-datetime-edit {
color: var(--text-muted);
}
/* Tint the native date/time picker icons gold (both themes) */
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0.85;
filter: invert(62%) sepia(58%) saturate(437%) hue-rotate(5deg) brightness(92%) contrast(85%);
transition: opacity var(--dur-fast) var(--ease);
}
.field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.field input[type="time"]::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
.field-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
/* On narrow viewports, stack every .field-row child in a single column.
auto-fit with minmax(160px, 1fr) packs 2 fields side-by-side at
~168px each on iPhone — too cramped to read, and rows of three
(date/time/pax) were compressing the date and time inputs into a
single visual smear. Collapsing to one column gives each field its
own breathing room. */
@media (max-width: 640px) {
.field-row {
grid-template-columns: 1fr;
gap: 14px;
}
}
.form-cta {
margin-top: 8px;
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
}
.form-note { font-size: 13px; color: var(--text-muted); }
.form-success {
padding: 16px;
border: 1px solid var(--gold);
background: var(--gold-glow);
color: var(--text-primary);
border-radius: var(--r-md);
font-size: 14.5px;
}
.form-error {
padding: 14px 16px;
border: 1px solid rgba(180, 40, 40, 0.55);
background: rgba(180, 40, 40, 0.08);
color: var(--text-primary);
border-radius: var(--r-md);
font-size: 14px;
line-height: 1.5;
margin-top: 8px;
}
[data-theme="dark"] .form-error {
border-color: rgba(220, 90, 90, 0.55);
background: rgba(220, 90, 90, 0.10);
}
/* ---------- Subpage hero ---------- */
.page-subpage { background: var(--surface-page); }
/* page-hero — full-bleed editorial (rates, corporate, contact) */
.page-hero {
position: relative;
min-height: 52svh;
min-height: 52vh;
display: flex;
align-items: flex-end;
padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) var(--gutter) clamp(48px, 7vw, 88px);
overflow: hidden;
isolation: isolate;
/* Always dark — hardcoded regardless of global theme */
color: #F5F1E8;
--text-primary: #F5F1E8;
--text-secondary: rgba(245,241,232,0.64);
--text-muted: rgba(245,241,232,0.40);
--border-subtle: rgba(245,241,232,0.06);
--accent-gold: #CDA65B;
--gold: #CDA65B;
--action-primary-bg: #F5F1E8;
--action-primary-text: #012B5B;
--action-primary-press: #A88547;
--action-secondary-text: #F5F1E8;
--action-secondary-border: rgba(245,241,232,0.28);
}
/* Background image/video element for page heroes */
.page-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
/* Overlay — stronger than about (static images need more opacity) */
.page-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(100deg,
rgba(1,43,91,0.92) 0%,
rgba(1,43,91,0.72) 40%,
rgba(1,43,91,0.45) 70%,
rgba(1,43,91,0.55) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.60) 0%,
rgba(1,43,91,0.20) 40%,
rgba(1,43,91,0.75) 100%);
}
.page-hero-inner {
position: relative;
z-index: 2;
max-width: 620px;
}
.page-hero-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(48px, 7vw, 96px);
letter-spacing: -0.03em;
line-height: 0.97;
color: #F5F1E8;
margin: 14px 0 28px;
}
.page-hero-title em { font-style: italic; color: #CDA65B; }
.page-hero-sub {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.65;
color: rgba(245,241,232,0.82);
max-width: 560px;
margin: 0;
}
/* CTA row (corporate page) */
.page-hero .hero-cta {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 32px;
}
.page-hero .btn-ghost {
color: #F5F1E8;
border-color: rgba(245,241,232,0.35);
}
.page-hero .btn-ghost:hover {
background: rgba(245,241,232,0.08);
border-color: #F5F1E8;
}
/* Split variant — affiliate page (copy left, image right) */
.page-hero-split {
min-height: 60svh;
min-height: 60vh;
align-items: center;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 64px);
}
.page-hero-split .page-hero-inner { max-width: none; }
.page-hero-media {
position: relative;
z-index: 2;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 4 / 5;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(245,241,232,0.08);
}
.page-hero-media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform var(--dur-slow) var(--ease);
}
.page-hero-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 50%,
rgba(1,43,91,0.30) 100%);
pointer-events: none;
}
/* Responsive */
@media (max-width: 860px) {
.page-hero-split {
grid-template-columns: 1fr;
min-height: auto;
display: flex;
flex-direction: column;
}
.page-hero-media { display: none; } /* hide on mobile — copy carries alone */
}
/* ---------- Affiliate form ---------- */
.section-affiliate {
padding-top: clamp(24px, 4vw, 48px);
padding-bottom: clamp(70px, 10vw, 120px);
}
.affiliate-form { display: grid; gap: clamp(20px, 3vw, 32px); }
.form-block { padding: 0; }
.form-block-legend {
display: flex;
gap: 20px;
align-items: center;
padding: 28px 32px;
border-bottom: 1px solid var(--border-subtle);
width: 100%;
}
.form-block-num {
flex: 0 0 44px;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--gold);
border-radius: var(--r-full);
color: var(--gold);
font-size: 13px;
letter-spacing: 0.1em;
}
.form-block-legend .kicker { margin-bottom: 4px; }
.form-block-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(20px, 2.4vw, 26px);
letter-spacing: -0.01em;
line-height: 1.15;
margin: 0;
color: var(--text-primary);
}
.form-block-body {
padding: 28px 32px 32px;
display: grid;
gap: 18px;
}
.form-block-note {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.55;
padding: 14px 16px;
border-left: 2px solid var(--gold);
background: var(--gold-glow);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
/* Checkbox field variant */
.field-check {
flex-direction: row;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--border-default);
border-radius: var(--r-md);
background: var(--surface-page);
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
cursor: pointer;
}
.field-check:hover { border-color: var(--gold); }
.field-check input[type="checkbox"] {
appearance: none;
width: 18px; height: 18px;
border: 1px solid var(--border-strong);
border-radius: var(--r-xs);
background: var(--surface-card);
cursor: pointer;
position: relative;
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
margin: 0;
flex: 0 0 18px;
}
.field-check input[type="checkbox"]:checked {
background: var(--gold);
border-color: var(--gold);
}
.field-check input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 5px; top: 1px;
width: 5px; height: 10px;
border: solid var(--text-on-gold);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.field-check > span {
font-size: 14px;
color: var(--text-primary);
text-transform: none;
letter-spacing: 0;
}
/* Fleet table */
.fleet-table-wrap {
overflow-x: auto;
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
touch-action: pan-x pan-y;
}
.fleet-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
font-size: 13px;
}
.fleet-table thead th {
text-align: left;
padding: 12px 10px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
border-bottom: 1px solid var(--border-default);
background: var(--surface-elevated);
white-space: nowrap;
}
.fleet-table tbody td {
padding: 8px;
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
}
.fleet-table tbody tr:last-child td { border-bottom: none; }
.fleet-table .fleet-col-num {
width: 44px;
text-align: center;
color: var(--gold);
font-size: 12px;
letter-spacing: 0.08em;
}
.fleet-table input,
.fleet-table select {
width: 100%;
padding: 8px 10px;
font-size: 13px;
font-family: var(--font-sans);
color: var(--text-primary);
background: var(--surface-page);
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.fleet-table input:focus,
.fleet-table select:focus {
outline: none;
border-color: var(--gold);
background: var(--surface-elevated);
}
.fleet-table select {
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
linear-gradient(135deg, var(--gold) 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
padding-right: 26px;
}
.form-submit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding: 28px 32px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
background: var(--surface-card);
}
@media (max-width: 720px) {
.form-block-legend { padding: 20px 20px; gap: 14px; }
.form-block-body { padding: 20px 20px 24px; }
.form-submit { padding: 20px; }
}
/* ---------- Location page ---------- */
.page-location { background: var(--surface-page); }
/* Nav needs to sit on top of the video hero without changing its sticky behavior.
Fully transparent while over hero, then glass-blur once it sticks. */
.nav-over-hero {
position: absolute;
top: 0; left: 0; right: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid rgba(245,241,232,0.08);
box-shadow: none;
}
.nav-over-hero[data-scrolled="true"] {
position: sticky;
background: rgba(245,241,232,0.72);
backdrop-filter: blur(22px) saturate(180%);
-webkit-backdrop-filter: blur(22px) saturate(180%);
border-bottom-color: rgba(1,43,91,0.08);
box-shadow: 0 1px 0 rgba(1,43,91,0.04), 0 8px 24px rgba(1,43,91,0.04);
}
[data-theme="dark"] .nav-over-hero[data-scrolled="true"] {
background: rgba(1,28,68,0.68);
border-bottom-color: rgba(245,241,232,0.08);
box-shadow: 0 1px 0 rgba(245,241,232,0.04), 0 8px 24px rgba(0,0,0,0.24);
}
/* Force nav text light while over hero video */
.nav-over-hero:not([data-scrolled="true"]) { color: #F5F1E8; }
.nav-over-hero:not([data-scrolled="true"]) .nav-links a { color: rgba(245,241,232,0.78); }
.nav-over-hero:not([data-scrolled="true"]) .nav-links a:hover { color: #F5F1E8; }
.nav-over-hero:not([data-scrolled="true"]) .nav-logo-light { display: none; }
.nav-over-hero:not([data-scrolled="true"]) .nav-logo-dark { display: block; }
.nav-over-hero:not([data-scrolled="true"]) .theme-toggle {
color: #F5F1E8;
border-color: rgba(245,241,232,0.3);
}
.nav-over-hero:not([data-scrolled="true"]) .btn-ghost {
color: #F5F1E8;
border-color: rgba(245,241,232,0.3);
}
/* location-hero now built on .hero-editorial base — see HTML */
.location-hero {
position: relative;
min-height: 100svh;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--nav-h) + clamp(40px, 8vw, 96px)) var(--gutter) clamp(60px, 10vw, 120px);
overflow: hidden;
isolation: isolate;
/* Always dark — hardcoded, never inherits global theme */
color: #F5F1E8;
--text-primary: #F5F1E8;
--text-secondary: rgba(245,241,232,0.64);
--text-muted: rgba(245,241,232,0.40);
--border-subtle: rgba(245,241,232,0.06);
--accent-gold: #CDA65B;
--gold: #CDA65B;
--action-primary-bg: #F5F1E8;
--action-primary-text: #012B5B;
--action-primary-press: #A88547;
--action-secondary-text: #F5F1E8;
--action-secondary-border: rgba(245,241,232,0.28);
}
.location-hero-video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.location-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(100deg,
rgba(1,43,91,0.85) 0%,
rgba(1,43,91,0.62) 40%,
rgba(1,43,91,0.28) 70%,
rgba(1,43,91,0.40) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.50) 0%,
rgba(1,43,91,0.15) 38%,
rgba(1,43,91,0.70) 100%);
}
.location-hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
}
.location-hero-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(52px, 9vw, 120px);
letter-spacing: -0.03em;
line-height: 0.95;
margin: 14px 0 28px;
color: #F5F1E8;
}
.location-hero-title em {
font-style: italic;
color: #CDA65B;
}
.location-hero-sub {
max-width: 560px;
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.65;
color: rgba(245,241,232,0.82);
margin-bottom: 36px;
}
.location-hero .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.location-hero .btn-ghost {
color: #F5F1E8;
border-color: rgba(245,241,232,0.35);
}
.location-hero .btn-ghost:hover {
background: rgba(245,241,232,0.08);
border-color: #F5F1E8;
}
.location-hero-scroll {
position: absolute;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
font-size: 10px;
letter-spacing: 0.3em;
color: rgba(245,241,232,0.6);
font-family: var(--font-mono);
}
.location-hero-scroll-line {
width: 1px;
height: 56px;
background: linear-gradient(180deg,
rgba(245,241,232,0.6) 0%,
rgba(245,241,232,0) 100%);
animation: he-scroll-pulse 2.4s var(--ease) infinite;
transform-origin: top;
}
@media (max-width: 560px) { .location-hero-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .location-hero-scroll-line { animation: none; opacity: 0.4; } }
/* Intro pillar */
.section-intro-pillar { padding-top: clamp(80px, 10vw, 120px); }
.intro-pillar-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
.intro-pillar-copy .kicker { margin-bottom: 12px; }
.intro-pillar-copy .section-title { text-align: left; margin-bottom: 20px; }
.intro-pillar-copy p {
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.7;
color: var(--text-secondary);
}
.intro-pillar-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 28px;
padding-left: clamp(20px, 3vw, 40px);
border-left: 1px solid var(--border-subtle);
}
.intro-pillar-stat {
font-size: clamp(32px, 4vw, 44px);
font-weight: 500;
color: var(--gold);
letter-spacing: -0.02em;
margin: 0 0 8px;
line-height: 1;
}
.intro-pillar-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
/* Neighborhoods */
.neighborhoods-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--border-subtle);
border-left: 1px solid var(--border-subtle);
}
.neighborhood {
padding: 28px 24px;
border-right: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
transition: background var(--dur-normal) var(--ease);
}
.neighborhood:hover { background: var(--gold-glow); }
.neighborhood-num {
color: var(--gold);
font-size: 12px;
letter-spacing: 0.22em;
margin: 0 0 10px;
}
.neighborhood h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 20px;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--text-primary);
margin: 0 0 10px;
}
.neighborhood p {
font-size: 13.5px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
/* Airports */
.airports-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.airport-card { padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; }
.airport-code {
display: inline-block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.24em;
color: var(--gold);
padding: 4px 10px;
border: 1px solid var(--gold);
border-radius: var(--r-sm);
margin: 0;
align-self: flex-start;
}
.airport-card h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 4px 0 0;
}
.airport-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.airport-meta {
font-size: 12px !important;
color: var(--text-muted) !important;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
margin-top: 4px !important;
}
.airport-meta .mono { color: var(--gold); font-weight: 500; }
.airports-note {
text-align: center;
margin-top: 24px;
font-size: 14px;
color: var(--text-muted);
}
/* Popular routes CTA row */
.section-routes { max-width: 980px; }
.routes-cta-row {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 32px;
}
/* Scenarios */
.scenario-card { display: flex; flex-direction: column; gap: 14px; }
.scenario-card:hover { transform: translateY(-2px); }
.scenario-card h3 { font-size: 19px; margin: 2px 0 0; }
.scenario-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
/* Local CTA */
.section-local-cta { max-width: var(--max-w); }
.local-cta {
padding: clamp(32px, 5vw, 56px);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
border-top: 2px solid var(--gold);
}
.local-cta .section-title { text-align: left; margin: 10px 0 12px; }
.local-cta-sub {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.local-cta-actions {
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
}
@media (max-width: 960px) {
.intro-pillar-grid { grid-template-columns: 1fr; }
.intro-pillar-stats { border-left: none; padding-left: 0; padding-top: 24px; border-top: 1px solid var(--border-subtle); }
.neighborhoods-grid { grid-template-columns: repeat(2, 1fr); }
.airports-grid { grid-template-columns: 1fr; }
.local-cta { grid-template-columns: 1fr; }
.local-cta-actions { flex-direction: row; }
.local-cta-actions .btn { flex: 1; }
}
@media (max-width: 560px) {
.neighborhoods-grid { grid-template-columns: 1fr; }
.intro-pillar-stats { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
}
/* ---------- Corporate ---------- */
.page-hero-corporate .hero-cta { margin-top: 32px; }
.corp-trust {
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
background: var(--surface-elevated);
padding: 28px var(--gutter);
}
.corp-trust-inner {
max-width: var(--max-w);
margin: 0 auto;
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.corp-trust-title {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
flex: 0 0 auto;
}
.corp-trust-list {
display: flex;
gap: 24px 32px;
flex-wrap: wrap;
margin: 0;
}
.corp-trust-list li {
font-family: var(--font-serif);
font-size: 16px;
color: var(--text-secondary);
font-style: italic;
letter-spacing: 0.01em;
}
.corp-card { display: flex; flex-direction: column; gap: 12px; }
.corp-card:hover { transform: translateY(-2px); }
.corp-card h3 { font-size: 18px; margin: 4px 0 0; }
.corp-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
/* Use cases */
.use-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px 24px;
}
.use-card {
padding-top: 24px;
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color var(--dur-normal) var(--ease);
}
.use-card:hover { border-top-color: var(--gold); }
.use-num {
color: var(--gold);
font-size: 12px;
letter-spacing: 0.22em;
margin: 0;
}
.use-card h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--text-primary);
margin: 0;
}
.use-card p {
font-size: 14.5px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
/* Corporate form extras */
.field-group-label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
margin: 0 0 10px;
}
.field-group-label em {
color: var(--text-muted);
font-style: normal;
font-weight: 400;
letter-spacing: 0.05em;
text-transform: none;
}
.field-checks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
@media (max-width: 960px) {
.use-grid { grid-template-columns: repeat(2, 1fr); }
.field-checks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.use-grid { grid-template-columns: 1fr; }
.field-checks { grid-template-columns: 1fr; }
}
/* ---------- Rate card ---------- */
.section-rates {
padding-top: clamp(24px, 4vw, 48px);
padding-bottom: clamp(70px, 10vw, 120px);
display: grid;
gap: clamp(48px, 7vw, 88px);
}
.rate-block { display: grid; gap: 24px; }
.rate-head { max-width: 680px; }
.rate-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(26px, 3.2vw, 36px);
letter-spacing: -0.015em;
line-height: 1.15;
margin: 10px 0 8px;
color: var(--text-primary);
}
.rate-sub {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.rate-table-wrap {
overflow-x: auto;
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: var(--surface-card);
touch-action: pan-x pan-y;
}
.rate-table {
width: 100%;
border-collapse: collapse;
min-width: 640px;
font-size: 14.5px;
}
.rate-table thead th {
text-align: left;
padding: 14px 20px;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 500;
border-bottom: 1px solid var(--border-default);
background: var(--surface-elevated);
white-space: nowrap;
}
.rate-table thead th.rate-col-price { text-align: right; width: 110px; }
.rate-table tbody td {
padding: 14px 20px;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-primary);
vertical-align: top;
}
.rate-table tbody tr:last-child td { border-bottom: none; }
.rate-table tbody tr:hover td { background: var(--gold-glow); }
.rate-table tbody td.mono {
text-align: right;
color: var(--gold);
font-size: 15px;
font-weight: 500;
letter-spacing: -0.01em;
white-space: nowrap;
}
.rate-table tbody tr.rate-group td {
background: var(--surface-elevated);
padding: 10px 20px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid var(--border-default);
font-weight: 500;
}
.rate-table tbody tr.rate-group td .mono {
color: var(--gold);
margin-right: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
}
.rate-table tbody tr.rate-group:hover td { background: var(--surface-elevated); }
.rate-table .rate-meta {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
font-weight: 400;
}
.rate-table .rate-note {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.rate-table tbody td strong { font-weight: 500; }
/* Included / Extras grid */
.rate-incl-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.rate-incl, .rate-extra { padding: 32px; }
.rate-incl { border-top: 2px solid var(--gold); }
.rate-extra { border-top: 2px solid var(--border-strong); }
.rate-list {
display: grid;
gap: 10px;
margin-top: 16px;
}
.rate-list li {
font-size: 14px;
color: var(--text-secondary);
padding-left: 20px;
position: relative;
line-height: 1.55;
}
.rate-list li::before {
content: '';
position: absolute;
left: 0; top: 0.7em;
width: 8px; height: 1px;
background: var(--gold);
}
.rate-list .rate-meta {
color: var(--text-muted);
font-size: 12px;
}
/* Custom quote callout */
.rate-callout {
padding: clamp(28px, 4vw, 44px);
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
border-top: 2px solid var(--gold);
}
.rate-callout-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(22px, 2.6vw, 30px);
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--text-primary);
margin: 10px 0 12px;
}
.rate-callout-sub {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.rate-callout-cta {
display: flex;
flex-direction: column;
gap: 10px;
align-items: stretch;
}
.rate-disclaimer {
font-size: 12px;
color: var(--text-muted);
line-height: 1.6;
max-width: 720px;
margin: 0;
padding-top: 16px;
border-top: 1px solid var(--border-subtle);
}
@media (max-width: 720px) {
.rate-incl-grid { grid-template-columns: 1fr; }
.rate-callout { grid-template-columns: 1fr; }
.rate-callout-cta { flex-direction: row; }
.rate-callout-cta .btn { flex: 1; }
}
/* ---------- Contact page ---------- */
.section-contact .grid .card,
.section-executive .grid .card {
display: flex;
flex-direction: column;
gap: 6px;
}
.contact-h {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(20px, 2.2vw, 26px);
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--text-primary);
margin: 8px 0 4px;
}
.contact-desc {
font-size: 14.5px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 12px;
}
.contact-line {
font-size: 14.5px;
color: var(--text-primary);
margin: 0;
line-height: 1.6;
word-break: break-word;
}
.contact-line .text-link { border-bottom-color: transparent; }
.contact-line .text-link:hover { border-bottom-color: var(--gold); }
.contact-meta {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--border-subtle);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
/* ---------- Footer ---------- */
.footer {
position: relative;
z-index: 1;
border-top: 1px solid var(--border-subtle);
padding: clamp(48px, 6vw, 72px) var(--gutter) 32px;
margin-top: clamp(40px, 6vw, 80px);
}
/* Editorial band above footer grid — cinematic parting shot */
.footer-band {
position: relative;
width: calc(100% + var(--gutter) * 2);
margin-left: calc(-1 * var(--gutter));
margin-right: calc(-1 * var(--gutter));
margin-top: calc(-1 * clamp(48px, 6vw, 72px));
margin-bottom: clamp(48px, 6vw, 72px);
aspect-ratio: 16 / 5;
max-height: 320px;
min-height: 180px;
overflow: hidden;
isolation: isolate;
display: flex;
align-items: center;
justify-content: center;
}
.footer-band-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
}
.footer-band-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(1,43,91,0.72) 0%,
rgba(1,43,91,0.42) 50%,
rgba(1,43,91,0.72) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.30) 0%,
rgba(1,43,91,0.55) 100%);
}
.footer-band-caption {
position: relative;
z-index: 2;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(20px, 3vw, 36px);
line-height: 1.3;
letter-spacing: -0.01em;
color: #F5F1E8;
text-align: center;
max-width: 720px;
padding: 0 var(--gutter);
margin: 0;
}
.footer-band-caption em {
font-style: italic;
color: #CDA65B;
}
@media (max-width: 560px) {
.footer-band { aspect-ratio: 4 / 3; max-height: 260px; }
.footer-band-caption { font-size: clamp(18px, 5.5vw, 24px); }
}
.footer-grid {
max-width: var(--max-w); margin: 0 auto;
display: grid; gap: 40px;
grid-template-columns: 1.3fr repeat(3, 1fr);
}
.footer .kicker { margin-bottom: 12px; }
.footer p { margin-bottom: 6px; font-size: 14px; color: var(--text-secondary); }
.footer-logo { height: 64px; width: auto; margin-bottom: 14px; display: block; }
.footer-logo-dark { display: none; }
[data-theme="dark"] .footer-logo-light { display: none; }
[data-theme="dark"] .footer-logo-dark { display: block; }
.footer-tag { font-family: var(--font-serif); font-size: 16px; color: var(--text-secondary); font-style: italic; max-width: 280px; }
.footer-list li { margin-bottom: 6px; }
.footer-list a { font-size: 14px; color: var(--text-secondary); transition: color var(--dur-fast) var(--ease); }
.footer-list a:hover { color: var(--gold); }
.footer-base {
max-width: var(--max-w); margin: 48px auto 0;
padding-top: 20px;
border-top: 1px solid var(--border-subtle);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
}
.footer-base p { font-size: 12px; color: var(--text-muted); margin: 0; letter-spacing: 0.04em; }
.footer-base .mono { letter-spacing: 0.18em; font-size: 11px; }
.footer-base .built-by { width: 100%; text-align: center; margin-top: 10px; font-size: 11px; letter-spacing: 0.08em; opacity: 0.7; }
.footer-base .built-by a { color: var(--gold); border-bottom: 1px solid transparent; transition: border-color var(--dur-fast) var(--ease); }
.footer-base .built-by a:hover { border-bottom-color: var(--gold); }
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.section-split { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.how-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
.how-steps::before { display: none; }
.nav-links, .nav-cta { display: none; }
.nav-burger { display: inline-flex; margin-left: auto; }
.nav[data-open="true"] .nav-links {
display: flex; flex-direction: column;
position: absolute; top: var(--nav-h); left: 0; right: 0;
background: var(--surface-overlay);
backdrop-filter: blur(14px);
padding: 20px var(--gutter) 28px;
gap: 18px;
border-bottom: 1px solid var(--border-subtle);
}
.nav[data-open="true"] .nav-cta {
display: flex; flex-direction: column; gap: 10px;
position: absolute; top: calc(var(--nav-h) + 180px); left: 0; right: 0;
padding: 0 var(--gutter) 24px;
background: var(--surface-overlay);
backdrop-filter: blur(14px);
}
.nav[data-open="true"] .nav-cta .btn { width: 100%; }
.hero-trust { font-size: 10.5px; letter-spacing: 0.16em; }
.hero-trust li:not(:last-child)::after { margin: 0 10px; }
}
@media (max-width: 560px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }
.hero { padding-top: 40px; padding-bottom: 88px; }
.hero-title { font-size: clamp(34px, 9vw, 44px); margin-bottom: 18px; }
.hero-sub { font-size: 14.5px; line-height: 1.55; margin-bottom: 24px; }
.hero-cta { gap: 10px; flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
.hero-cta .btn { width: 100%; justify-content: center; }
.hero-trust {
margin-top: 26px;
padding-top: 18px;
font-size: 10px;
letter-spacing: 0.14em;
row-gap: 6px;
}
.hero-trust li:not(:last-child)::after { margin: 0 8px; }
.area-list { grid-template-columns: 1fr; }
.book-form { padding: 24px; }
.how-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
html { scroll-behavior: auto; }
video[autoplay] { display: none; }
}
/* ---------- Hero entrance animation ---------- */
@media (prefers-reduced-motion: no-preference) {
.hero-entrance > * {
opacity: 0;
transform: translateY(14px);
animation: hero-rise var(--dur-slow) var(--ease) forwards;
}
/* Cascade: each child delayed by 160ms */
.hero-entrance > *:nth-child(1) { animation-delay: 80ms; }
.hero-entrance > *:nth-child(2) { animation-delay: 240ms; }
.hero-entrance > *:nth-child(3) { animation-delay: 400ms; }
.hero-entrance > *:nth-child(4) { animation-delay: 560ms; }
.hero-entrance > *:nth-child(5) { animation-delay: 720ms; }
.hero-entrance > *:nth-child(6) { animation-delay: 880ms; }
}
@keyframes hero-rise {
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Hero scroll indicator ---------- */
.hero-scroll-indicator {
position: absolute;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-size: 10px;
letter-spacing: 0.3em;
color: rgba(245,241,232,0.5);
}
.hero-scroll-label { font-family: var(--font-mono); }
.hero-scroll-line {
width: 1px;
height: 48px;
background: linear-gradient(180deg,
rgba(245,241,232,0.55) 0%,
rgba(245,241,232,0) 100%);
animation: hero-scroll-pulse 2.2s var(--ease) infinite;
transform-origin: top;
}
@keyframes hero-scroll-pulse {
0%, 100% { transform: scaleY(0.45); opacity: 0.3; }
50% { transform: scaleY(1); opacity: 1; }
}
@media (max-width: 560px) {
.hero-scroll-indicator { display: none; }
}
/* ---------- Fleet card hover depth ---------- */
.fleet-card .fleet-media img {
transition: transform var(--dur-slow) var(--ease);
}
.fleet-card:hover .fleet-media img {
transform: scale(1.03);
}
/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
[data-reveal] {
opacity: 0;
transform: translateY(22px);
transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
}
/* When JS is absent or motion is reduced, show everything */
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* ---------- Signature moment — opening door ---------- */
.signature-moment {
position: relative;
min-height: clamp(400px, 55vh, 640px);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(60px, 8vw, 120px) var(--gutter);
overflow: hidden;
color: #F5F1E8;
margin: clamp(60px, 8vw, 100px) 0 0;
}
.signature-video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
.signature-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(90deg,
rgba(1,43,91,0.88) 0%,
rgba(1,43,91,0.65) 45%,
rgba(1,43,91,0.50) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.55) 0%,
rgba(1,43,91,0.20) 50%,
rgba(1,43,91,0.75) 100%);
}
.signature-inner {
position: relative;
z-index: 2;
text-align: center;
max-width: 680px;
--accent-gold: #CDA65B;
--gold: #CDA65B;
}
.signature-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(32px, 5vw, 64px);
letter-spacing: -0.02em;
line-height: 1.1;
color: #F5F1E8;
margin: 16px 0 32px;
}
/* Inherit hero btn overrides since it's a dark section */
.signature-inner .btn-primary {
background: #F5F1E8;
color: #012B5B;
}
.signature-inner .btn-primary:hover { background: #A88547; }
/* ---------- Fleet signature ---------- */
/* Outer section — full-bleed container, dark canvas */
.fleet-sig {
position: relative;
background: var(--surface-page);
padding: clamp(70px, 10vw, 120px) 0 clamp(70px, 10vw, 120px);
/* no overflow:hidden — needed for sticky nav */
}
/* Subtle ambient texture behind the whole section — no glow, just depth */
.fleet-sig::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(1,43,91,0.03) 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(1,43,91,0.03) 0%, transparent 70%);
z-index: 0;
}
[data-theme="dark"] .fleet-sig::before {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(205,166,91,0.04) 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(205,166,91,0.03) 0%, transparent 70%);
}
/* Section header */
.fleet-sig-head {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0 auto clamp(56px, 8vw, 96px);
padding: 0 var(--gutter);
text-align: center;
}
/* Vertical dots nav — fixed right edge, visible only while fleet section is in view */
.fleet-sig-nav {
position: fixed;
top: 50vh;
right: clamp(16px, 3vw, 48px);
z-index: 20;
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-slow) var(--ease);
}
/* Visible when fleet section is in viewport (class toggled by JS) */
.fleet-sig-nav.is-in-view {
opacity: 1;
pointer-events: auto;
}
.fleet-sig-dot {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--border-default);
border-radius: var(--r-full);
background: transparent;
cursor: pointer;
transition:
border-color var(--dur-normal) var(--ease),
background var(--dur-normal) var(--ease),
color var(--dur-normal) var(--ease);
}
.fleet-sig-dot-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.04em;
color: var(--text-muted);
transition: color var(--dur-normal) var(--ease);
line-height: 1;
}
.fleet-sig-dot--active,
.fleet-sig-dot:hover {
border-color: var(--accent-gold);
background: var(--accent-gold-glow);
}
.fleet-sig-dot--active .fleet-sig-dot-label,
.fleet-sig-dot:hover .fleet-sig-dot-label {
color: var(--accent-gold);
}
/* Divider rule between panels */
.fleet-sig-rule {
position: relative;
z-index: 1;
width: min(var(--max-w), 100%);
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
height: 1px;
}
.fleet-sig-rule::after {
content: '';
display: block;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--border-subtle) 15%,
var(--border-default) 50%,
var(--border-subtle) 85%,
transparent 100%
);
}
/* Panel — full-width cinematic block */
.fleet-panel {
position: relative;
z-index: 1;
padding: clamp(60px, 9vw, 110px) var(--gutter);
}
.fleet-panel-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 6vw, 96px);
align-items: center;
max-width: var(--max-w);
margin: 0 auto;
}
/* Alt layout flips copy/car order via CSS — no JS needed */
.fleet-panel--alt .fleet-panel-inner {
/* car is first child in HTML on .fleet-panel--alt, copy is second — natural DOM order */
}
/* Copy column */
.fleet-panel-copy {
display: flex;
flex-direction: column;
gap: 0;
}
.fleet-panel-kicker {
font-size: 11px;
letter-spacing: 0.18em;
color: var(--accent-gold);
margin-bottom: 20px;
display: block;
}
.fleet-panel-hook {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(26px, 3.4vw, 42px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--text-primary);
margin-bottom: 22px;
}
.fleet-panel-hook em {
font-style: italic;
color: var(--text-primary);
}
.fleet-panel-desc {
font-size: clamp(14px, 1.1vw, 16px);
color: var(--text-secondary);
line-height: 1.65;
margin-bottom: 16px;
}
.fleet-panel-occasion {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 32px;
font-style: italic;
}
/* Specs trio */
.fleet-panel-specs {
list-style: none;
padding: 0;
margin: 0 0 36px;
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.fleet-panel-specs li {
display: flex;
flex-direction: column;
gap: 3px;
}
.fleet-spec-num {
font-family: var(--font-mono);
font-size: 22px;
font-weight: 500;
color: var(--text-primary);
line-height: 1;
}
.fleet-spec-lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--text-muted);
text-transform: uppercase;
}
.fleet-spec-tag {
font-size: 11px;
letter-spacing: 0.08em;
color: var(--accent-gold);
border: 1px solid var(--border-default);
border-radius: var(--r-full);
padding: 4px 12px;
display: inline-block;
line-height: 1.4;
align-self: flex-end;
}
/* CTA */
.fleet-panel-cta {
align-self: flex-start;
}
/* Car stage column */
.fleet-panel-stage {
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* Subtle ambient gradient behind the car — dark base, keeps contrast */
padding: clamp(24px, 4vw, 60px);
}
/* Ghost gradient plate — surface beneath each car PNG */
.fleet-panel-stage::before {
content: '';
position: absolute;
inset: 0;
border-radius: var(--r-xl);
background: radial-gradient(
ellipse 80% 60% at 50% 60%,
var(--surface-elevated) 0%,
transparent 75%
);
pointer-events: none;
}
[data-theme="dark"] .fleet-panel-stage::before {
background: radial-gradient(
ellipse 80% 60% at 50% 60%,
rgba(18,27,48,0.9) 0%,
transparent 75%
);
}
/* Tilt wrapper — JS sets --rx / --ry */
.fleet-panel-car-wrap {
position: relative;
will-change: transform;
transform-style: preserve-3d;
transform:
perspective(900px)
rotateX(calc(var(--rx, 0) * 1deg))
rotateY(calc(var(--ry, 0) * 1deg));
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fleet-panel-car {
display: block;
width: 100%;
max-width: 540px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 24px 48px rgba(0,0,0,0.32));
transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
[data-theme="dark"] .fleet-panel-car {
filter: drop-shadow(0 24px 60px rgba(0,0,0,0.70));
}
/* Hover: car breathes, shadow deepens */
.fleet-panel-stage:hover .fleet-panel-car {
transform: scale(1.02);
filter: drop-shadow(0 32px 56px rgba(0,0,0,0.42));
}
[data-theme="dark"] .fleet-panel-stage:hover .fleet-panel-car {
filter: drop-shadow(0 32px 72px rgba(0,0,0,0.80));
}
/* Staggered reveal for copy children */
@media (prefers-reduced-motion: no-preference) {
.fleet-panel[data-reveal].is-visible .fleet-panel-kicker { animation: fleet-rise 560ms 0ms both cubic-bezier(0.2, 0, 0.2, 1); }
.fleet-panel[data-reveal].is-visible .fleet-panel-hook { animation: fleet-rise 560ms 90ms both cubic-bezier(0.2, 0, 0.2, 1); }
.fleet-panel[data-reveal].is-visible .fleet-panel-desc { animation: fleet-rise 560ms 170ms both cubic-bezier(0.2, 0, 0.2, 1); }
.fleet-panel[data-reveal].is-visible .fleet-panel-occasion { animation: fleet-rise 560ms 240ms both cubic-bezier(0.2, 0, 0.2, 1); }
.fleet-panel[data-reveal].is-visible .fleet-panel-specs { animation: fleet-rise 560ms 310ms both cubic-bezier(0.2, 0, 0.2, 1); }
.fleet-panel[data-reveal].is-visible .fleet-panel-cta { animation: fleet-rise 560ms 390ms both cubic-bezier(0.2, 0, 0.2, 1); }
.fleet-panel[data-reveal].is-visible .fleet-panel-stage { animation: fleet-car-enter 700ms 120ms both cubic-bezier(0.2, 0, 0.2, 1); }
@keyframes fleet-rise {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fleet-car-enter {
from { opacity: 0; transform: translateX(32px) scale(0.96); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
/* Alt panels: car slides in from left */
.fleet-panel--alt[data-reveal].is-visible .fleet-panel-stage {
animation: fleet-car-enter-left 700ms 120ms both cubic-bezier(0.2, 0, 0.2, 1);
}
@keyframes fleet-car-enter-left {
from { opacity: 0; transform: translateX(-32px) scale(0.96); }
to { opacity: 1; transform: translateX(0) scale(1); }
}
}
/* Mobile: stack vertically, car above copy */
@media (max-width: 767px) {
.fleet-panel-inner {
grid-template-columns: 1fr;
gap: clamp(28px, 6vw, 44px);
}
/* Always: car first, copy second on mobile */
.fleet-panel-inner { grid-template-areas: "stage" "copy"; }
.fleet-panel-stage { grid-area: stage; }
.fleet-panel-copy { grid-area: copy; }
.fleet-panel--alt .fleet-panel-inner { grid-template-areas: "stage" "copy"; }
.fleet-panel-car {
max-width: 90vw;
}
.fleet-panel-hook {
font-size: clamp(22px, 6vw, 32px);
}
/* Dots nav: static horizontal bar at bottom of section on mobile */
.fleet-sig-nav {
position: static;
top: auto;
right: auto;
transform: none;
flex-direction: row;
justify-content: center;
margin: clamp(24px, 4vw, 40px) auto 0;
padding: 0 var(--gutter);
opacity: 1 !important; /* always visible on mobile */
pointer-events: auto !important;
}
}
/* Hide dots nav on very small screens if needed */
@media (max-width: 360px) {
.fleet-sig-nav { display: none; }
}
/* fleet-sig::after previously used for float clearfix — no longer needed */
/* Reduced motion overrides — static, no animation */
@media (prefers-reduced-motion: reduce) {
.fleet-panel-car-wrap { transition: none; }
.fleet-panel-car { transition: none; }
.fleet-panel-stage:hover .fleet-panel-car { transform: none; }
}
/* ---------- A11y utilities ---------- */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: -100px;
left: 12px;
z-index: 9999;
padding: 12px 18px;
background: var(--surface-page);
color: var(--text-primary);
border: 1px solid var(--border-strong, currentColor);
border-radius: 6px;
font-weight: 600;
text-decoration: none;
font-size: 14px;
transition: top 0.16s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
top: 12px;
outline: 2px solid var(--accent-gold, #CDA65B);
outline-offset: 2px;
}
:focus-visible {
outline: 2px solid var(--accent-gold, #CDA65B);
outline-offset: 3px;
border-radius: 3px;
}
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-brand:focus-visible,
.theme-toggle:focus-visible,
.nav-burger:focus-visible {
outline-offset: 4px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline-offset: 1px;
}
[aria-current="page"] {
color: var(--text-primary) !important;
font-weight: 600;
}
/* ==========================================================
Fleet Showroom — car.com-inspired tab layout
========================================================== */
.fleet-showroom {
position: relative;
background: var(--surface-page);
padding: clamp(70px, 10vw, 120px) 0 clamp(70px, 10vw, 120px);
}
/* Subtle ambient texture (same as original fleet-sig) */
.fleet-showroom::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(1,43,91,0.03) 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(1,43,91,0.03) 0%, transparent 70%);
z-index: 0;
}
[data-theme="dark"] .fleet-showroom::before {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(205,166,91,0.04) 0%, transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(205,166,91,0.03) 0%, transparent 70%);
}
.fleet-showroom-head {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0 auto clamp(36px, 5vw, 56px);
padding: 0 var(--gutter);
text-align: center;
}
/* Small badge below the studio box */
.fleet-studio-badge {
display: inline-block;
align-self: flex-start;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
padding: 5px 10px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-full);
background: var(--surface-elevated);
}
/* ==========================================================
About Us page
========================================================== */
.page-about { background: var(--surface-page); }
/* ---------- About hero — full-bleed video ---------- */
.about-hero {
position: relative;
min-height: 88svh;
min-height: 88vh;
display: flex;
align-items: flex-end; /* copy sits in lower-left, very magazine */
padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) var(--gutter) clamp(56px, 8vw, 100px);
overflow: hidden;
color: #F5F1E8;
isolation: isolate;
}
.about-hero-video {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
}
/* Overlay: strong on left (legibility), fades right (shows video) */
.about-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(100deg,
rgba(1,43,91,0.85) 0%,
rgba(1,43,91,0.62) 40%,
rgba(1,43,91,0.28) 70%,
rgba(1,43,91,0.40) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.50) 0%,
rgba(1,43,91,0.15) 38%,
rgba(1,43,91,0.70) 100%);
}
.about-hero-inner {
position: relative;
z-index: 2;
max-width: 560px; /* intentionally narrower — left-aligned editorial */
}
.about-hero-kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #CDA65B;
margin: 0 0 18px;
display: block;
}
.about-hero-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(48px, 7vw, 96px);
letter-spacing: -0.03em;
line-height: 0.97;
color: #F5F1E8;
margin: 0 0 32px;
}
.about-hero-title em {
font-style: italic;
color: #CDA65B;
}
.about-hero-body {
display: flex;
flex-direction: column;
gap: 18px;
}
.about-hero-p {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.65;
color: rgba(245,241,232,0.82);
margin: 0;
}
/* ---------- Stats row ---------- */
.about-stats {
background: var(--surface-elevated);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
padding: clamp(40px, 6vw, 64px) var(--gutter);
}
.about-stats-inner {
max-width: var(--max-w);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 4vw, 48px);
}
.about-stat-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: clamp(16px, 3vw, 28px) 0;
}
.about-stat-icon {
width: 48px;
height: 48px;
color: var(--accent-gold);
flex-shrink: 0;
}
.about-stat-val {
font-family: var(--font-mono);
font-size: clamp(28px, 3.6vw, 40px);
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
}
.about-stat-lbl {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.45;
margin: 0;
}
/* ---------- Differentiators section ---------- */
.about-diff {
padding: clamp(70px, 10vw, 120px) var(--gutter);
max-width: var(--max-w);
margin: 0 auto;
}
.about-diff-head {
max-width: 560px;
margin: 0 auto clamp(40px, 6vw, 64px);
text-align: center;
}
.about-diff-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 32px);
}
.about-diff-card {
padding: clamp(24px, 3.5vw, 36px);
border: 1px solid var(--border-subtle);
border-top: 2px solid var(--accent-gold);
border-radius: 0 0 var(--r-lg) var(--r-lg);
background: var(--surface-card);
display: flex;
flex-direction: column;
gap: 14px;
transition: border-top-color var(--dur-normal) var(--ease),
transform var(--dur-normal) var(--ease);
}
.about-diff-card:hover {
transform: translateY(-3px);
}
.about-diff-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--accent-gold);
margin: 0;
}
.about-diff-card h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(18px, 2vw, 22px);
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--text-primary);
margin: 0;
}
.about-diff-card p {
font-size: 14.5px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
/* ---------- About CTA section ---------- */
.about-cta-section {
padding: clamp(60px, 8vw, 100px) var(--gutter);
max-width: var(--max-w);
margin: 0 auto;
text-align: center;
}
.about-cta-section .section-title { margin-bottom: 18px; }
.about-cta-section p {
max-width: 520px;
margin: 0 auto 36px;
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
}
.about-cta-row {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* ---------- About page responsive ---------- */
@media (max-width: 860px) {
.about-stats-inner {
grid-template-columns: repeat(2, 1fr);
}
.about-diff-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.about-hero {
align-items: flex-start;
padding-bottom: clamp(40px, 8vw, 72px);
}
.about-hero-inner { max-width: 100%; }
.about-stats-inner { grid-template-columns: repeat(2, 1fr); }
.about-stat-item { padding: 16px 8px; }
}
@media (max-width: 360px) {
.about-stats-inner { grid-template-columns: 1fr; }
}
/* ----------------------------------------------------------
Home fleet feature grid — 3-up showcase (S-Class · Escalade
· Sprinter Jet). Each card stacks: studio image on top,
compact body below (kicker · name · hook · price/specs · CTA).
Full fleet page (fleet.html) handles the exhaustive catalog.
Border effect: animated conic gradient (Luna-gold tones) that
rotates slowly by default and accelerates on hover. Uses the
background-clip trick — linear-gradient fills the card surface
via padding-box, conic-gradient paints the border-box. The
--gradient-angle custom property is registered via @property
so it can animate; on browsers without @property support
(pre-Chrome 85) the border stays a static gold gradient —
acceptable degradation.
---------------------------------------------------------- */
@property --gradient-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes fleet-feature-gradient-rotate {
from { --gradient-angle: 0deg; }
to { --gradient-angle: 360deg; }
}
.fleet-feature-grid {
position: relative;
z-index: 1;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
/* Stacked editorial layout — each vehicle gets one full-width row,
stage on the side, body opposite. Cards alternate sides for an
editorial zigzag rhythm (see :nth-child(even) below). Replaces
the previous 3-up cramped grid that buried the new info block. */
grid-template-columns: 1fr;
gap: clamp(28px, 3.5vw, 48px);
align-items: stretch;
}
.fleet-feature-card {
display: flex;
flex-direction: row;
overflow: hidden;
position: relative;
/* Border is transparent — the conic-gradient paints it via border-box.
Color stops and ordering mirror the reference BorderRotate component
verbatim: the 37% → 30% → 33% sequence is intentional. Out-of-order
stops get clamped up to the running maximum, so the three secondary/
accent/secondary entries all collapse at 37%, producing a razor-thin
accent flash instead of a smooth bloom. The 77/80/83 triplet then
renders a wider accent "lens" on the opposite arc — two distinct
highlight shapes per rotation, which is the signature look. */
border: 2px solid transparent;
border-radius: 20px;
background-image:
linear-gradient(var(--surface-card), var(--surface-card)),
conic-gradient(
from var(--gradient-angle, 0deg),
#584827 0%,
#c7a03c 37%,
#f9de90 30%,
#c7a03c 33%,
#584827 40%,
#584827 50%,
#c7a03c 77%,
#f9de90 80%,
#c7a03c 83%,
#584827 90%
);
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
/* Rotation is paused by default so the conic gradient does not
trigger a full card re-rasterize on every frame (~60 repaints/s
per card × 3 cards = jank while scrolling). Plays only while
the card is hovered — same visual intent, zero idle cost. */
animation: fleet-feature-gradient-rotate 5s linear infinite;
animation-play-state: paused;
transition: transform var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.fleet-feature-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
.fleet-feature-card,
.fleet-feature-card:hover { animation: none; }
}
/* Ambient variant — PNG carries its own environmental backdrop
(scenery / floor / lighting), so the studio plate + drop-shadow
would fight it. Full-bleed cover, no gradient, no contact shadow. */
.fleet-feature-card--ambient .fleet-feature-stage {
padding: 0;
background: none;
border-bottom: none;
}
[data-theme="dark"] .fleet-feature-card--ambient .fleet-feature-stage { background: none; }
.fleet-feature-card--ambient .fleet-feature-car {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
filter: none;
}
[data-theme="dark"] .fleet-feature-card--ambient .fleet-feature-car { filter: none; }
.fleet-feature-card--ambient:hover .fleet-feature-car {
transform: scale(1.03);
filter: none;
}
[data-theme="dark"] .fleet-feature-card--ambient:hover .fleet-feature-car { filter: none; }
/* Studio stage — radial gradient plate, car centered, soft floor shadow.
In the side-by-side layout the stage takes 48% of the card width
and pairs with the body opposite. Mobile drops back to stacked
column via the @media break further down. */
.fleet-feature-stage {
position: relative;
flex: 0 0 48%;
aspect-ratio: 5 / 3;
padding: clamp(20px, 3.2vw, 36px) clamp(18px, 2.8vw, 32px) clamp(14px, 2.4vw, 24px);
background: radial-gradient(
ellipse 88% 72% at 50% 52%,
var(--surface-elevated) 0%,
var(--surface-page) 100%
);
border-bottom: none;
border-right: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Editorial zigzag — even cards put the stage on the right (body on
the left), creating a visual rhythm down the column. Border swaps
sides accordingly. */
.fleet-feature-card:nth-child(even) { flex-direction: row-reverse; }
.fleet-feature-card:nth-child(even) .fleet-feature-stage {
border-right: none;
border-left: 1px solid var(--border-subtle);
}
[data-theme="dark"] .fleet-feature-stage {
background: radial-gradient(
ellipse 88% 72% at 50% 52%,
#03366E 0%,
#012B5B 100%
);
border-bottom-color: rgba(245,241,232,0.06);
}
/* Single-layer drop-shadow follows the car PNG's alpha channel so the
shadow lands right under the tyres on every image — no ellipse,
no per-image tuning. Kept to one layer intentionally: compound
filters re-composite per frame and tanked scroll perf with 10+
cars on the fleet page. */
.fleet-feature-car {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 6px 4px rgba(0,0,0,0.35));
transition: transform var(--dur-slow) var(--ease),
filter var(--dur-slow) var(--ease);
}
[data-theme="dark"] .fleet-feature-car {
filter: drop-shadow(0 6px 4px rgba(0,0,0,0.60));
}
.fleet-feature-card:hover .fleet-feature-car {
transform: scale(1.03) translateY(-3px);
filter: drop-shadow(0 8px 5px rgba(0,0,0,0.40));
}
[data-theme="dark"] .fleet-feature-card:hover .fleet-feature-car {
filter: drop-shadow(0 8px 5px rgba(0,0,0,0.70));
}
/* The separate ellipse is no longer used — contact shadow now lives
on the car's own drop-shadow filter and tracks the tyre line per
image. Kept in the DOM as an aria-hidden empty div for markup
parity across past/future vehicles; it renders nothing. */
.fleet-feature-shadow { display: none; }
/* Body — info stack */
.fleet-feature-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 28px);
}
.fleet-feature-kicker {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
margin: 0;
}
.fleet-feature-name {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(26px, 2.4vw, 32px);
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--text-primary);
margin: 0;
}
.fleet-feature-hook {
font-family: var(--font-serif);
font-size: clamp(14px, 1.15vw, 16px);
font-style: italic;
font-weight: 400;
line-height: 1.45;
color: var(--text-secondary);
margin: 0;
}
.fleet-feature-hook em {
font-style: normal;
color: var(--text-primary);
}
/* ---------- Vehicle tagline (replaces .fleet-feature-hook in the
home showroom). Italic serif subtitle that sits between the
vehicle name and the info block — sells the role, not the spec. */
.fleet-feature-tagline {
font-family: var(--font-serif);
font-size: clamp(14px, 1.15vw, 16px);
font-style: italic;
font-weight: 400;
line-height: 1.45;
color: var(--text-secondary);
margin: 0;
}
/* ---------- Info block: "Best for / capacity / experience" stack
that replaces the single-line specs. Three rows each carrying a
different visual cue:
row 1 — labeled "Best for" (gold mono kicker) + use cases prose
row 2 — passenger icon + capacity line in primary text colour
row 3 — experience descriptors in mono uppercase, muted */
.fleet-feature-info {
display: flex;
flex-direction: column;
gap: 8px;
margin: 4px 0 2px;
}
.fleet-feature-info-row {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.fleet-feature-info-label {
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
flex-shrink: 0;
padding-top: 3px;
white-space: nowrap;
}
.fleet-feature-info-text {
flex: 1 1 200px;
min-width: 0;
}
.fleet-feature-info-capacity {
align-items: center;
font-size: 13.5px;
color: var(--text-primary);
font-weight: 500;
}
.fleet-feature-info-ico {
width: 16px;
height: 16px;
color: var(--accent-gold);
flex-shrink: 0;
}
.fleet-feature-experience {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
line-height: 1.65;
margin: 0;
}
/* ---------- "Most Booked" badge (Card 2 only) ----------
Top-right pill, gold-bordered, semi-transparent navy fill in dark
theme / cream fill in light theme so it reads against any bg
colour the ambient PNG carries. backdrop-filter for the glass feel.
pointer-events: none so it never blocks the card click chain. */
.fleet-feature-badge {
position: absolute;
top: 16px;
right: 16px;
z-index: 3;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
background: rgba(1, 43, 91, 0.78);
border: 1px solid rgba(205, 166, 91, 0.5);
border-radius: 999px;
padding: 6px 12px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
pointer-events: none;
}
[data-theme="light"] .fleet-feature-badge,
:root:not([data-theme="dark"]) .fleet-feature-badge {
background: rgba(245, 241, 232, 0.92);
color: var(--accent-gold-deep);
border-color: rgba(205, 166, 91, 0.55);
}
/* ---------- Fleet guidance strip ----------
Sits between the 3 cards and the "See full fleet" link. Mirrors
the services-cta-strip pattern (split copy left, dual CTAs right,
stack under 720px). For visitors who can't self-categorize between
sedan / SUV / sprinter, this is the human escape hatch. */
.fleet-guidance-strip {
position: relative;
z-index: 1;
max-width: var(--max-w);
margin: clamp(40px, 5vw, 64px) auto 0;
padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 48px);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.fleet-guidance-strip::before {
content: '';
position: absolute;
top: 0;
left: 32px;
right: 32px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
opacity: 0.5;
}
.fleet-guidance-copy { flex: 1 1 360px; min-width: 0; }
.fleet-guidance-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(20px, 2.4vw, 26px);
letter-spacing: -0.005em;
line-height: 1.25;
color: var(--text-primary);
margin: 0 0 6px;
}
.fleet-guidance-sub {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
max-width: 540px;
margin: 0;
}
.fleet-guidance-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
flex-shrink: 0;
}
@media (max-width: 720px) {
.fleet-guidance-strip {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.fleet-guidance-actions { width: 100%; }
.fleet-guidance-actions .btn { flex: 1 1 auto; min-width: 0; }
}
.fleet-feature-rule {
border: 0;
height: 1px;
background: var(--border-subtle);
margin: 6px 0 2px;
}
.fleet-feature-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin: 0;
}
.fleet-feature-price {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(22px, 1.9vw, 28px);
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0;
}
.fleet-feature-price-unit {
font-family: var(--font-sans);
font-weight: 400;
font-size: 13px;
color: var(--text-muted);
margin-left: 2px;
}
.fleet-feature-specs {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
.fleet-feature-ctas {
margin-top: auto;
padding-top: 8px;
display: flex;
gap: 8px;
}
.fleet-feature-ctas .btn {
flex: 1;
justify-content: center;
font-size: 13px;
padding: 11px 16px;
}
.fleet-feature-all {
position: relative;
z-index: 1;
text-align: center;
margin-top: clamp(24px, 3.5vw, 40px);
}
/* Staggered reveal — each card rises sequentially when the grid
becomes visible. The gradient-rotate animation runs in parallel
(second entry in the comma-separated animation list) so the
border keeps turning through and past the reveal. */
@media (prefers-reduced-motion: no-preference) {
.fleet-feature-grid[data-reveal].is-visible .fleet-feature-card:nth-child(1) {
animation:
fleet-rise 620ms 0ms both cubic-bezier(0.2,0,0.2,1),
fleet-feature-gradient-rotate 5s linear infinite;
}
.fleet-feature-grid[data-reveal].is-visible .fleet-feature-card:nth-child(2) {
animation:
fleet-rise 620ms 120ms both cubic-bezier(0.2,0,0.2,1),
fleet-feature-gradient-rotate 5s linear infinite;
}
.fleet-feature-grid[data-reveal].is-visible .fleet-feature-card:nth-child(3) {
animation:
fleet-rise 620ms 240ms both cubic-bezier(0.2,0,0.2,1),
fleet-feature-gradient-rotate 5s linear infinite;
}
}
/* Below 960px the side-by-side layout becomes uncomfortable — body
text wraps awkwardly into 4-5 line bullets and the stage shrinks
below 320px. Revert to stacked column: stage on top (16:9 to read
well at narrower viewports), body underneath, no zigzag. */
@media (max-width: 960px) {
.fleet-feature-grid { gap: 24px; }
.fleet-feature-card,
.fleet-feature-card:nth-child(even) { flex-direction: column; }
.fleet-feature-stage,
.fleet-feature-card:nth-child(even) .fleet-feature-stage {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 9;
border-right: none;
border-left: none;
border-bottom: 1px solid var(--border-subtle);
}
}
@media (max-width: 720px) {
.fleet-feature-badge {
top: 12px;
right: 12px;
font-size: 9px;
letter-spacing: 0.18em;
padding: 5px 10px;
}
.fleet-feature-info-row { font-size: 13px; }
.fleet-feature-info-capacity { font-size: 13px; }
}
@media (max-width: 480px) {
/* Stack CTAs vertically on narrow phones — two side-by-side btn-lg
get squeezed below ~150px each, and "Reserve the Sprinter Jet"
wraps awkwardly. Stacked, each is full-width and tappable. */
.fleet-feature-ctas { flex-direction: column; }
.fleet-feature-ctas .btn { width: 100%; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
.fleet-feature-card,
.fleet-feature-car { transition: none; }
.fleet-feature-card:hover { transform: none; box-shadow: none; }
.fleet-feature-card:hover .fleet-feature-car { transform: none; filter: inherit; }
}
/* "See the full fleet" link below home showroom */
.fleet-showroom-see-all {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-default);
padding-bottom: 2px;
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fleet-showroom-see-all:hover {
color: var(--accent-gold);
border-bottom-color: var(--accent-gold);
}
/* ==========================================================
Fleet vitrine — fleet.html full catalogue
Stacked editorial pattern: tier sections → vehicle panels
Always respects light/dark theme (except hero, always dark)
========================================================== */
.page-fleet { background: var(--surface-page); }
/* ----------------------------------------------------------
Fleet Hero — always-dark, photo bg, bottom-left copy
---------------------------------------------------------- */
.fleet-hero {
position: relative;
min-height: 88svh;
min-height: 88vh;
display: flex;
align-items: flex-end;
padding: calc(var(--nav-h) + clamp(40px, 6vw, 80px)) var(--gutter) clamp(56px, 8vw, 100px);
overflow: hidden;
isolation: isolate;
/* Always dark — hardcoded, same convention as all editorial heroes */
color: #F5F1E8;
--text-primary: #F5F1E8;
--text-secondary: rgba(245,241,232,0.64);
--text-muted: rgba(245,241,232,0.40);
--border-subtle: rgba(245,241,232,0.06);
--accent-gold: #CDA65B;
--gold: #CDA65B;
--action-primary-bg: #F5F1E8;
--action-primary-text: #012B5B;
--action-primary-press: #A88547;
--action-secondary-text: #F5F1E8;
--action-secondary-border: rgba(245,241,232,0.28);
}
.fleet-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
z-index: 0;
pointer-events: none;
}
.fleet-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(100deg,
rgba(1,43,91,0.88) 0%,
rgba(1,43,91,0.65) 40%,
rgba(1,43,91,0.32) 70%,
rgba(1,43,91,0.45) 100%),
linear-gradient(180deg,
rgba(1,43,91,0.55) 0%,
rgba(1,43,91,0.18) 40%,
rgba(1,43,91,0.78) 100%);
}
.fleet-hero-inner {
position: relative;
z-index: 2;
max-width: 640px;
}
.fleet-hero-kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #CDA65B;
margin: 0 0 20px;
display: block;
}
.fleet-hero-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(48px, 7vw, 96px);
letter-spacing: -0.03em;
line-height: 0.97;
color: #F5F1E8;
margin: 0 0 28px;
}
.fleet-hero-title em {
font-style: italic;
color: #CDA65B;
}
.fleet-hero-sub {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.65;
color: rgba(245,241,232,0.82);
margin-bottom: 40px;
max-width: 520px;
}
/* Tier jump links */
.fleet-hero-tiers {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.fleet-hero-tier-link {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,241,232,0.60);
border-bottom: 1px solid rgba(245,241,232,0.20);
padding-bottom: 2px;
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fleet-hero-tier-link:hover {
color: #CDA65B;
border-bottom-color: #CDA65B;
}
.fleet-hero-tier-sep {
color: rgba(245,241,232,0.25);
font-size: 12px;
}
/* Scroll indicator */
.fleet-hero-scroll {
position: absolute;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
font-size: 10px;
letter-spacing: 0.3em;
color: rgba(245,241,232,0.50);
font-family: var(--font-mono);
}
.fleet-hero-scroll-label { display: block; }
.fleet-hero-scroll-line {
width: 1px;
height: 52px;
background: linear-gradient(180deg,
rgba(245,241,232,0.55) 0%,
rgba(245,241,232,0) 100%);
animation: he-scroll-pulse 2.2s var(--ease) infinite;
transform-origin: top;
}
@media (max-width: 560px) { .fleet-hero-scroll { display: none; } }
/* ----------------------------------------------------------
Tier sections — each contains a header + vehicle panels
---------------------------------------------------------- */
.fleet-tier {
position: relative;
padding: clamp(80px, 11vw, 140px) 0 clamp(60px, 8vw, 100px);
}
/* Alternate background for tiers 2 and 4 — subtle contrast, both themes */
.fleet-tier--alt-bg {
background: var(--surface-elevated);
}
[data-theme="dark"] .fleet-tier--alt-bg {
background: var(--surface-card);
}
/* Tier header */
.fleet-tier-head {
max-width: 720px;
margin: 0 auto clamp(56px, 8vw, 96px);
padding: 0 var(--gutter);
text-align: center;
}
.fleet-tier-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(32px, 4.8vw, 56px);
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--text-primary);
margin: 8px 0 18px;
}
.fleet-tier-title em {
font-style: italic;
color: var(--accent-gold);
}
.fleet-tier-sub {
font-size: clamp(14px, 1.2vw, 16px);
color: var(--text-secondary);
line-height: 1.65;
max-width: 560px;
margin: 0 auto;
}
/* Gold hairline between tiers */
.fleet-tier + .fleet-tier::before,
.fleet-lifestyle-band + .fleet-tier::before {
content: none; /* handled by lifestyle bands */
}
/* ----------------------------------------------------------
Vehicle panel — the core display unit
Two columns: car stage left, copy right (alternates with --alt)
---------------------------------------------------------- */
.fleet-vitrine-panel {
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(40px, 6vw, 80px) var(--gutter);
}
.fleet-vitrine-inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(28px, 5vw, 80px);
align-items: center;
}
/* Alt variant: copy column comes first in HTML but renders right via order */
.fleet-vitrine-panel--alt .fleet-vitrine-inner {
grid-template-columns: 1fr 1.15fr;
}
/* ----------------------------------------------------------
Car stage — the studio area (transparent PNG on soft bg)
---------------------------------------------------------- */
.fleet-vitrine-stage {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
/* Ghost gradient plate behind each car — same pattern as fleet-showroom.
Layered:
1) radial gradient (instant paint + graceful fallback if jpg fails)
2) studio plate JPEG (editorial horizon hairline, soft spotlight, grain)
The plate is design-system-faithful: navy-anchor, ivory variant, single
gold horizon whisper (<3% of the frame). No glow, no gold gradient. */
.fleet-vitrine-car-wrap {
position: relative;
width: 100%;
background-color: var(--surface-page);
background-image:
url("assets/bg/vitrine-stage-light.jpg"),
radial-gradient(
ellipse 88% 72% at 50% 52%,
var(--surface-elevated) 0%,
var(--surface-page) 100%
);
background-size: cover, auto;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-blend-mode: normal;
border-radius: var(--r-xl);
border: 1px solid var(--border-subtle);
padding: clamp(24px, 4vw, 52px) clamp(16px, 3.5vw, 44px) clamp(12px, 2.5vw, 28px);
overflow: hidden;
/* will-change only while hovered — promoting 10 vitrine cards to
their own GPU layer permanently was taking a bite out of desktop
scroll smoothness. The hover-only promotion still gets the tilt
interaction painted off-main-thread. */
transform-style: preserve-3d;
transform:
perspective(900px)
rotateX(calc(var(--rx, 0) * 1deg))
rotateY(calc(var(--ry, 0) * 1deg));
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fleet-vitrine-car-wrap:hover { will-change: transform; }
[data-theme="dark"] .fleet-vitrine-car-wrap {
background-color: #012B5B;
background-image:
url("assets/bg/vitrine-stage-dark.jpg"),
radial-gradient(
ellipse 88% 72% at 50% 52%,
#03366E 0%,
#012B5B 100%
);
background-size: cover, auto;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
border-color: rgba(245,241,232,0.06);
}
/* Alt panels mirror the studio plate so the horizon fade doesn't repeat
the same direction of light on every row. */
[data-theme="dark"] .fleet-vitrine-panel--alt .fleet-vitrine-car-wrap {
background-image:
url("assets/bg/vitrine-stage-alt-dark.jpg"),
radial-gradient(
ellipse 88% 72% at 50% 52%,
#03366E 0%,
#012B5B 100%
);
}
/* Single-layer alpha-aware shadow — tight, grounded, and cheap.
Keeping this on one filter entry is important: compound
drop-shadows across 10 vehicle panels re-composited per scroll
frame was freezing the page. */
.fleet-vitrine-car {
display: block;
width: 100%;
max-height: 320px;
object-fit: contain;
position: relative;
z-index: 1;
filter: drop-shadow(0 7px 4px rgba(0,0,0,0.36));
transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
[data-theme="dark"] .fleet-vitrine-car {
filter: drop-shadow(0 7px 4px rgba(0,0,0,0.62));
}
.fleet-vitrine-car-wrap:hover .fleet-vitrine-car {
transform: scale(1.025) translateY(-4px);
filter: drop-shadow(0 9px 5px rgba(0,0,0,0.44));
}
[data-theme="dark"] .fleet-vitrine-car-wrap:hover .fleet-vitrine-car {
filter: drop-shadow(0 9px 5px rgba(0,0,0,0.76));
}
/* Standalone ellipse retired — drop-shadow on the car handles
the contact patch now. Kept as a no-op to avoid touching markup. */
.fleet-vitrine-shadow { display: none; }
/* ----------------------------------------------------------
Ambient variant — PNG already carries its environment
(navy backdrop, scenery, baked-in shadow). Drop the studio
plate and the drop-shadow so nothing fights the image.
Preserves tilt perspective + card chrome (border, radius).
---------------------------------------------------------- */
.fleet-vitrine-panel--ambient .fleet-vitrine-car-wrap {
background: none;
border-color: transparent;
padding: 0;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 16 / 10;
}
[data-theme="dark"] .fleet-vitrine-panel--ambient .fleet-vitrine-car-wrap {
background: none;
}
.fleet-vitrine-panel--ambient .fleet-vitrine-car {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
filter: none;
}
[data-theme="dark"] .fleet-vitrine-panel--ambient .fleet-vitrine-car {
filter: none;
}
.fleet-vitrine-panel--ambient .fleet-vitrine-car-wrap:hover .fleet-vitrine-car {
transform: scale(1.025);
filter: none;
}
[data-theme="dark"] .fleet-vitrine-panel--ambient .fleet-vitrine-car-wrap:hover .fleet-vitrine-car {
filter: none;
}
/* Placeholder badge for vehicles without a real photo yet */
.fleet-vitrine-photo-badge {
display: inline-block;
align-self: flex-start;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-gold);
padding: 5px 12px;
border: 1px solid var(--border-default);
border-radius: var(--r-full);
background: var(--gold-glow);
}
/* Photo frame stage — Sprinter Jet cinematic real photo */
.fleet-vitrine-stage--photo .fleet-vitrine-photo-frame {
width: 100%;
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--border-subtle);
aspect-ratio: 4 / 3;
box-shadow: var(--shadow-lg);
}
.fleet-vitrine-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--dur-slow) var(--ease);
}
.fleet-vitrine-stage--photo:hover .fleet-vitrine-photo {
transform: scale(1.03);
}
/* ----------------------------------------------------------
Copy column
---------------------------------------------------------- */
.fleet-vitrine-copy {
display: flex;
flex-direction: column;
}
.fleet-vitrine-kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
margin: 0 0 14px;
display: block;
}
.fleet-vitrine-name {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 44px);
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--text-primary);
margin: 0 0 16px;
}
.fleet-vitrine-hook {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.45;
color: var(--text-primary);
font-family: var(--font-serif);
font-weight: 400;
font-style: normal;
letter-spacing: -0.01em;
margin: 0 0 20px;
}
.fleet-vitrine-hook em {
font-style: italic;
color: var(--text-primary);
}
.fleet-vitrine-desc {
font-size: clamp(14px, 1.1vw, 16px);
color: var(--text-secondary);
line-height: 1.7;
margin: 0 0 12px;
max-width: 52ch;
}
.fleet-vitrine-occasion {
font-size: 13.5px;
color: var(--text-muted);
font-style: italic;
line-height: 1.6;
margin: 0 0 32px;
max-width: 52ch;
}
/* Specs trio */
.fleet-vitrine-specs {
list-style: none;
padding: 0;
margin: 0 0 36px;
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
padding-top: 24px;
border-top: 1px solid var(--border-subtle);
}
.fleet-vitrine-specs li {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Reuse existing .fleet-spec-* tokens */
/* CTA row */
.fleet-vitrine-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* ----------------------------------------------------------
Intra-tier gold divider — between vehicles in same tier
---------------------------------------------------------- */
.fleet-intra-rule {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
height: 1px;
position: relative;
}
.fleet-intra-rule::after {
content: '';
display: block;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--border-subtle) 10%,
var(--border-default) 50%,
var(--border-subtle) 90%,
transparent 100%
);
}
/* ----------------------------------------------------------
Lifestyle interstitial bands — editorial pause between tiers
---------------------------------------------------------- */
.fleet-lifestyle-band {
position: relative;
height: clamp(220px, 35vh, 440px);
overflow: hidden;
margin: 0;
}
.fleet-lifestyle-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
display: block;
}
.fleet-lifestyle-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg,
rgba(1,43,91,0.55) 0%,
rgba(1,43,91,0.25) 50%,
rgba(1,43,91,0.65) 100%);
z-index: 1;
}
.fleet-lifestyle-caption {
position: absolute;
bottom: clamp(20px, 3vw, 36px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
font-family: var(--font-serif);
font-weight: 400;
font-style: italic;
font-size: clamp(18px, 2.2vw, 28px);
letter-spacing: -0.01em;
color: rgba(245,241,232,0.85);
white-space: nowrap;
text-align: center;
margin: 0;
}
/* ----------------------------------------------------------
Interior gallery — 4 cabin shots per vehicle.
Sits below the vitrine-inner, full panel width. Each card
renders a placeholder that the real ![]()
stacks over when
it loads; if the asset is missing, `onerror` removes the
img and the placeholder stays visible. Drop files at
`assets/interior/-<1..4>.jpg` to populate.
---------------------------------------------------------- */
.fleet-interior {
max-width: var(--max-w);
margin: clamp(32px, 5vw, 56px) auto 0;
padding: 0;
}
.fleet-interior-kicker {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 16px;
display: block;
}
.fleet-interior-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(10px, 1.2vw, 16px);
list-style: none;
padding: 0;
margin: 0;
}
.fleet-interior-card {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--r-md);
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--surface-card);
isolation: isolate;
transition: border-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.fleet-interior-card:hover {
border-color: var(--border-default);
transform: translateY(-1px);
}
/* Placeholder — subtle gradient + gold hairline frame + label. */
.fleet-interior-placeholder {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px;
text-align: center;
background: linear-gradient(155deg,
var(--surface-card) 0%,
var(--surface-elevated) 100%);
}
.fleet-interior-placeholder::after {
content: '';
position: absolute;
inset: 10px;
border: 1px solid var(--accent-gold);
opacity: 0.16;
border-radius: calc(var(--r-md) - 4px);
pointer-events: none;
}
.fleet-interior-placeholder-icon {
width: 20px;
height: 20px;
color: var(--accent-gold);
opacity: 0.6;
}
.fleet-interior-placeholder-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Image — when it loads, fully occludes the placeholder. */
.fleet-interior-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
transition: transform var(--dur-slow) var(--ease);
}
.fleet-interior-card:hover .fleet-interior-img {
transform: scale(1.03);
}
@media (max-width: 900px) {
.fleet-interior-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.fleet-interior-img,
.fleet-interior-card { transition: none; }
.fleet-interior-card:hover .fleet-interior-img { transform: none; }
.fleet-interior-card:hover { transform: none; }
}
/* ----------------------------------------------------------
Fleet close CTA section
---------------------------------------------------------- */
.fleet-close-cta {
text-align: center;
max-width: 860px;
}
.fleet-close-inner { }
.fleet-close-sub {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.6;
max-width: 520px;
margin: 0 auto 36px;
}
.fleet-close-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 16px;
}
.fleet-close-note {
font-size: 13px;
color: var(--text-muted);
}
/* ----------------------------------------------------------
Staggered reveal animations for vehicle panels
---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.fleet-vitrine-panel[data-reveal].is-visible .fleet-vitrine-kicker { animation: fleet-rise 560ms 0ms both cubic-bezier(0.2,0,0.2,1); }
.fleet-vitrine-panel[data-reveal].is-visible .fleet-vitrine-name { animation: fleet-rise 560ms 80ms both cubic-bezier(0.2,0,0.2,1); }
.fleet-vitrine-panel[data-reveal].is-visible .fleet-vitrine-hook { animation: fleet-rise 560ms 150ms both cubic-bezier(0.2,0,0.2,1); }
.fleet-vitrine-panel[data-reveal].is-visible .fleet-vitrine-desc { animation: fleet-rise 560ms 220ms both cubic-bezier(0.2,0,0.2,1); }
.fleet-vitrine-panel[data-reveal].is-visible .fleet-vitrine-occasion { animation: fleet-rise 560ms 280ms both cubic-bezier(0.2,0,0.2,1); }
.fleet-vitrine-panel[data-reveal].is-visible .fleet-vitrine-specs { animation: fleet-rise 560ms 350ms both cubic-bezier(0.2,0,0.2,1); }
.fleet-vitrine-panel[data-reveal].is-visible .fleet-vitrine-cta { animation: fleet-rise 560ms 420ms both cubic-bezier(0.2,0,0.2,1); }
/* Stage: car slides in from right on normal panels */
.fleet-vitrine-panel[data-reveal].is-visible .fleet-vitrine-stage { animation: fleet-car-enter 700ms 100ms both cubic-bezier(0.2,0,0.2,1); }
/* Alt panels: car slides in from left */
.fleet-vitrine-panel--alt[data-reveal].is-visible .fleet-vitrine-stage { animation: fleet-car-enter-left 700ms 100ms both cubic-bezier(0.2,0,0.2,1); }
}
/* ----------------------------------------------------------
Responsive
---------------------------------------------------------- */
@media (max-width: 960px) {
.fleet-vitrine-inner,
.fleet-vitrine-panel--alt .fleet-vitrine-inner {
grid-template-columns: 1fr;
gap: clamp(24px, 5vw, 40px);
}
/* Always: stage (car) first on mobile, copy below */
.fleet-vitrine-panel .fleet-vitrine-inner { grid-template-areas: "stage" "copy"; }
.fleet-vitrine-panel .fleet-vitrine-stage { grid-area: stage; }
.fleet-vitrine-panel .fleet-vitrine-copy { grid-area: copy; }
.fleet-vitrine-panel--alt .fleet-vitrine-inner { grid-template-areas: "stage" "copy"; }
/* Alt: copy is DOM-first; push stage to top on mobile */
.fleet-vitrine-panel--alt .fleet-vitrine-copy { order: 2; }
.fleet-vitrine-panel--alt .fleet-vitrine-stage { order: 1; }
.fleet-vitrine-car { max-height: 260px; }
.fleet-vitrine-cta { flex-direction: column; }
.fleet-vitrine-cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
.fleet-tier { padding: clamp(60px, 10vw, 100px) 0 clamp(40px, 6vw, 72px); }
.fleet-vitrine-panel { padding: clamp(28px, 5vw, 44px) var(--gutter); }
.fleet-tier-title { font-size: clamp(28px, 8vw, 44px); }
.fleet-vitrine-name { font-size: clamp(24px, 7vw, 36px); }
.fleet-lifestyle-band { height: clamp(160px, 28vw, 280px); }
.fleet-lifestyle-caption { font-size: clamp(15px, 4.5vw, 22px); white-space: normal; padding: 0 var(--gutter); }
.fleet-hero-tiers { gap: 10px 8px; }
.fleet-hero-tier-sep { display: none; }
.fleet-hero-tier-link { font-size: 10px; }
.fleet-close-actions { flex-direction: column; }
.fleet-close-actions .btn { width: 100%; }
}
/* iPhone SE (375px) — tighten further */
@media (max-width: 390px) {
.fleet-hero-title { font-size: clamp(38px, 10.5vw, 52px); }
.fleet-vitrine-specs { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.fleet-vitrine-car-wrap { transition: none; }
.fleet-vitrine-car { transition: none; }
.fleet-vitrine-car-wrap:hover .fleet-vitrine-car { transform: none; }
.fleet-vitrine-photo { transition: none; }
.fleet-vitrine-stage--photo:hover .fleet-vitrine-photo { transform: none; }
.fleet-hero-scroll-line { animation: none; opacity: 0.4; }
}
/* ========================================================
Auth & Account — login · signup · forgot · dashboard · profile
Tokens: DS V3 canonical (LUNA_DS.md). No new colours introduced.
Mobile-first. Dual-theme automatic via CSS custom properties.
======================================================== */
/* -------------------------------------------------------
Shared auth layout — body, background, topbar
------------------------------------------------------- */
.auth-body {
min-height: 100svh;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--surface-page);
color: var(--text-primary);
overflow-x: hidden;
}
/* Full-bleed ambient background image */
.auth-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
}
.auth-bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
}
/* Aurora WebGL shader canvas — stacks above the static poster image.
Hidden entirely under prefers-reduced-motion (aurora-bg.js handles it);
in that case the poster image shows through. */
.auth-bg-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
display: block;
}
/* Hero aurora — painted over every hero that previously relied on a
video or poster image. Sits between the media (z:0) and the overlay
(z:1+), so the media still acts as a fallback under reduced motion. */
.hero-aurora {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
z-index: 1;
pointer-events: none;
}
/* Overlay: softer so the aurora shader reads through, but still keeps
the card legible. In reduced-motion (canvas hidden) the overlay still
works against the static poster. */
.auth-bg-overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(180deg,
rgba(245, 241, 232, 0.55) 0%,
rgba(245, 241, 232, 0.72) 100%);
transition: background var(--dur-normal) var(--ease);
}
[data-theme="dark"] .auth-bg-overlay {
background: linear-gradient(180deg,
rgba(1,28,68, 0.55) 0%,
rgba(1,28,68, 0.78) 100%);
}
/* Minimal top bar — logo left, actions right */
.auth-topbar {
position: relative;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--nav-h);
padding: 0 var(--gutter);
background: transparent;
}
.auth-topbar-brand { display: flex; align-items: center; }
.auth-topbar-actions {
display: flex;
align-items: center;
gap: 16px;
}
/* "Back to site" link in topbar */
.auth-back-link {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
border-bottom: 1px solid transparent;
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.auth-back-link:hover {
color: var(--accent-gold);
border-bottom-color: var(--accent-gold);
}
/* Main centering wrapper */
.auth-main {
position: relative;
z-index: 10;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(24px, 4vw, 56px) var(--gutter);
}
/* -------------------------------------------------------
Auth card — the floating form container
------------------------------------------------------- */
.auth-card {
position: relative;
z-index: 3;
width: 100%;
max-width: 440px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--border-subtle);
border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 48px);
box-shadow: var(--shadow-lg);
}
[data-theme="dark"] .auth-card {
background: rgba(18, 27, 48, 0.70);
}
/* Narrower variant for forgot password (simpler form) */
.auth-card--narrow { max-width: 400px; }
/* -------------------------------------------------------
Card typography
------------------------------------------------------- */
.auth-kicker { margin-bottom: 12px; }
.auth-h1 {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(26px, 4vw, 34px);
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--text-primary);
margin: 0 0 10px;
}
.auth-sub {
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0 0 28px;
}
/* -------------------------------------------------------
Error banner (inline, above form)
------------------------------------------------------- */
.auth-error-banner {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px 14px;
background: rgba(162, 81, 73, 0.08);
border: 1px solid rgba(162, 81, 73, 0.22);
border-radius: var(--r-md);
color: var(--status-error);
font-size: 14px;
line-height: 1.4;
margin-bottom: 20px;
}
.auth-error-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 1px;
}
/* -------------------------------------------------------
Form fields
------------------------------------------------------- */
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
}
.auth-label-hint {
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
margin-left: 6px;
}
/* Label row — label left, forgot-link right */
.auth-label-row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.auth-label-link {
font-size: 12px;
color: var(--text-muted);
border-bottom: 1px solid transparent;
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.auth-label-link:hover { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
/* Input wrapper — for password show/hide button */
.auth-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.auth-input-wrap .auth-input { flex: 1; }
/* Base input style — matches DS component pattern */
.auth-input {
width: 100%;
height: 48px;
padding: 0 14px;
background: var(--surface-page);
border: 1px solid var(--border-default);
border-radius: var(--r-md);
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-primary);
transition: border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
-webkit-appearance: none;
appearance: none;
}
.auth-input:focus {
outline: none;
border-color: var(--border-focus);
background: var(--surface-elevated);
box-shadow: 0 0 0 3px var(--accent-gold-glow);
}
.auth-input::placeholder { color: var(--text-muted); }
.auth-input[readonly] {
opacity: 0.6;
cursor: not-allowed;
background: var(--surface-page);
}
/* Textarea variant (not used in auth but provided for future forms) */
textarea.auth-input {
height: auto;
padding-top: 12px;
padding-bottom: 12px;
resize: vertical;
}
/* Select */
.auth-select {
padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23070C18' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
}
[data-theme="dark"] .auth-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5F1E8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Password visibility toggle button */
.auth-toggle-pw {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 44px;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
transition: color var(--dur-fast) var(--ease);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.auth-toggle-pw:hover { color: var(--text-primary); }
.auth-eye { width: 18px; height: 18px; }
/* Inline field error */
.auth-field-err {
font-size: 12px;
color: var(--status-error);
line-height: 1.3;
}
/* Inline field hint */
.auth-field-hint {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
/* -------------------------------------------------------
Password strength meter
------------------------------------------------------- */
.auth-pw-strength {
display: flex;
gap: 4px;
height: 3px;
margin-top: 2px;
}
.auth-pw-bar {
flex: 1;
border-radius: 2px;
background: var(--border-default);
transition: background var(--dur-fast) var(--ease);
}
.auth-pw-bar.auth-pw-weak { background: var(--status-error); }
.auth-pw-bar.auth-pw-fair { background: var(--status-warning); }
.auth-pw-bar.auth-pw-good { background: var(--status-info); }
.auth-pw-bar.auth-pw-strong { background: var(--status-success); }
/* -------------------------------------------------------
Checkbox field (T&Cs)
------------------------------------------------------- */
.auth-check-field {
display: flex;
align-items: flex-start;
gap: 10px;
}
.auth-checkbox {
width: 18px;
height: 18px;
min-width: 18px;
border: 1px solid var(--border-default);
border-radius: var(--r-xs);
background: var(--surface-page);
accent-color: var(--accent-gold);
cursor: pointer;
margin-top: 1px;
transition: border-color var(--dur-fast) var(--ease);
}
.auth-checkbox:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
.auth-check-label {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
cursor: pointer;
}
/* -------------------------------------------------------
Submit button + spinner
------------------------------------------------------- */
.auth-submit {
width: 100%;
margin-top: 4px;
position: relative;
}
.auth-submit-spinner {
display: flex;
align-items: center;
justify-content: center;
}
/* `display:flex` outranks the user-agent `[hidden]{display:none}`
rule on specificity, which would otherwise leave a phantom
spinner visible next to "Request ride" while the form is idle. */
.auth-submit-spinner[hidden] { display: none; }
.auth-spinner-icon {
width: 20px;
height: 20px;
animation: auth-spin 0.7s linear infinite;
}
@keyframes auth-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.auth-spinner-icon { animation: none; }
}
/* -------------------------------------------------------
Divider "or"
------------------------------------------------------- */
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 20px 0;
color: var(--text-muted);
font-size: 12px;
letter-spacing: 0.1em;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border-default);
}
/* -------------------------------------------------------
Google OAuth button
------------------------------------------------------- */
.auth-oauth-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 48px;
padding: 0 20px;
background: var(--surface-card);
border: 1px solid var(--border-default);
border-radius: var(--r-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.auth-oauth-btn:hover {
background: var(--surface-elevated);
border-color: var(--border-strong);
}
.auth-oauth-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.auth-google-icon { width: 20px; height: 20px; }
/* -------------------------------------------------------
Switch link ("Already have an account?")
------------------------------------------------------- */
.auth-switch {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: var(--text-secondary);
}
/* -------------------------------------------------------
Success state (signup sent)
------------------------------------------------------- */
.auth-success {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 12px 0 4px;
gap: 14px;
}
.auth-success-icon {
width: 40px;
height: 40px;
color: var(--status-success);
}
.auth-success-text {
font-size: 15px;
color: var(--text-secondary);
}
/* -------------------------------------------------------
Sent state (forgot password)
------------------------------------------------------- */
.auth-sent-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 8px 0;
}
.auth-sent-icon {
width: 48px;
height: 48px;
border-radius: var(--r-full);
background: var(--accent-gold-glow);
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-gold);
}
.auth-sent-icon svg { width: 22px; height: 22px; }
.auth-sent-title {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 500;
color: var(--text-primary);
margin: 0;
}
.auth-sent-body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
}
.auth-sent-body strong { color: var(--text-primary); }
.auth-sent-cta { width: 100%; text-align: center; }
.auth-sent-resend {
font-size: 13px;
color: var(--text-muted);
}
/* Plain text button (for resend, cancel, etc.) */
.auth-text-btn {
background: none;
border: none;
padding: 0;
font-family: var(--font-sans);
font-size: inherit;
color: var(--text-secondary);
cursor: pointer;
border-bottom: 1px solid var(--border-strong);
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.auth-text-btn:hover { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
/* -------------------------------------------------------
Auth footer strip
------------------------------------------------------- */
.auth-foot {
position: relative;
z-index: 10;
padding: 20px var(--gutter);
text-align: center;
font-size: 13px;
color: var(--text-muted);
border-top: 1px solid var(--border-subtle);
background: var(--surface-page);
}
/* -------------------------------------------------------
Dashboard hero — editorial greeting strip
------------------------------------------------------- */
.dash-hero {
background: var(--action-primary-bg);
color: var(--action-primary-text);
padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(40px, 5vw, 64px);
/* Override token vars so buttons inside render correctly in navy bg */
--text-primary: #F5F1E8;
--text-secondary: rgba(245,241,232,0.64);
--accent-gold: #CDA65B;
--gold: #CDA65B;
--border-strong: rgba(245,241,232,0.22);
--action-primary-bg: #F5F1E8;
--action-primary-text: #012B5B;
--action-primary-press: #A88547;
--action-secondary-text: #F5F1E8;
--action-secondary-border: rgba(245,241,232,0.28);
}
[data-theme="dark"] .dash-hero {
background: var(--surface-card);
border-bottom: 1px solid var(--border-subtle);
--text-primary: #F5F1E8;
--text-secondary: rgba(245,241,232,0.64);
}
.dash-hero-inner {
max-width: var(--max-w);
margin: 0 auto;
}
.dash-hero-kicker { color: var(--accent-gold); margin-bottom: 12px; }
.dash-hero-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(28px, 4vw, 44px);
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--action-primary-text);
margin: 0 0 10px;
}
/* Light theme: text is ivory since hero bg is navy */
.dash-hero-title { color: #F5F1E8; }
[data-theme="dark"] .dash-hero-title { color: var(--text-primary); }
.dash-hero-sub {
font-size: 16px;
color: rgba(245, 241, 232, 0.66);
margin: 0 0 24px;
}
[data-theme="dark"] .dash-hero-sub { color: var(--text-secondary); }
.dash-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
/* -------------------------------------------------------
Dashboard layout — 2-column desktop, stacked mobile
------------------------------------------------------- */
.dash-layout {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
max-width: var(--max-w);
margin: 0 auto;
padding-top: 40px;
padding-bottom: 64px;
}
@media (min-width: 900px) {
.dash-layout {
grid-template-columns: minmax(0, 1fr) 280px;
gap: 48px;
}
}
/* -------------------------------------------------------
Dashboard section — title
------------------------------------------------------- */
.dash-section { margin-bottom: 40px; }
.dash-section:last-child { margin-bottom: 0; }
.dash-section-title {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.01em;
margin: 0 0 20px;
display: flex;
align-items: center;
gap: 8px;
}
.dash-section-icon { width: 18px; height: 18px; color: var(--accent-gold); }
/* Header row: section title on the left, primary CTA on the right */
.dash-section-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 20px;
}
.dash-section-bar .dash-section-title { margin-bottom: 0; }
.dash-new-ride-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
padding: 9px 16px;
}
.dash-new-ride-btn svg { width: 14px; height: 14px; }
/* -------------------------------------------------------
Reservation cards
------------------------------------------------------- */
.dash-rides-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.dash-ride-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
transition: transform var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.dash-ride-card:hover {
transform: translateY(-1px);
border-color: var(--border-default);
}
.dash-ride-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
/* Status badge */
.dash-ride-badge {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: var(--r-full);
}
/* PENDING_REVIEW — website/app booking awaiting dispatcher quote.
* Gold tone signals "human confirms next" without implying the
* reservation is already locked. Matches the chip in the dispatch
* command center (luna-dispatch/core/dispatch-styles.css). */
.dash-ride-badge[data-status="PENDING_REVIEW"],
.dash-ride-badge[data-status="pending_review"],
.dash-ride-badge[data-status="pending"] {
color: var(--status-warning);
background: rgba(184, 137, 74, 0.10);
border: 1px solid rgba(184, 137, 74, 0.24);
}
/* "new" — dispatcher-created draft; "confirmed" — quote accepted. */
.dash-ride-badge[data-status="new"],
.dash-ride-badge[data-status="confirmed"] {
color: var(--status-success);
background: rgba(94, 142, 96, 0.10);
border: 1px solid rgba(94, 142, 96, 0.24);
}
/* Operational in-flight states — chauffeur picked the ride up in
* their app and is moving it through the flow. Mirrors the labels
* in luna-dispatch/core/dispatch-utils.js. */
.dash-ride-badge[data-status="assigned"],
.dash-ride-badge[data-status="onway"],
.dash-ride-badge[data-status="arrived"],
.dash-ride-badge[data-status="pob"],
.dash-ride-badge[data-status="droppedoff"],
.dash-ride-badge[data-status="en_route"],
.dash-ride-badge[data-status="in_progress"] {
color: var(--status-info);
background: rgba(94, 126, 154, 0.10);
border: 1px solid rgba(94, 126, 154, 0.24);
}
.dash-ride-badge[data-status="done"],
.dash-ride-badge[data-status="completed"] {
color: var(--text-muted);
background: transparent;
border: 1px solid var(--border-default);
}
.dash-ride-badge[data-status="cancelled"],
.dash-ride-badge[data-status="rejected"] {
color: var(--status-error);
background: rgba(162, 81, 73, 0.08);
border: 1px solid rgba(162, 81, 73, 0.18);
}
.dash-ride-date {
font-size: 13px;
color: var(--text-secondary);
}
.dash-ride-route {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--text-primary);
flex-wrap: wrap;
}
.dash-ride-arrow-icon { width: 14px; height: 14px; color: var(--accent-gold); }
.dash-ride-vehicle {
font-size: 13px;
color: var(--text-muted);
margin: 0;
}
.dash-ride-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.dash-ride-actions .btn { font-size: 13px; padding: 8px 14px; }
/* Cancel button — secondary destructive (matches profile-danger-btn tone) */
.dash-ride-cancel {
background: transparent;
border: 1px solid rgba(162, 81, 73, 0.32);
color: var(--status-error);
font-family: var(--font-sans);
font-weight: 500;
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
margin-left: auto;
}
.dash-ride-cancel:hover {
background: var(--action-destructive-bg);
border-color: var(--action-destructive-bg);
color: var(--action-destructive-text);
}
.dash-ride-cancel:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* Details expand — appears between card body and action row */
.dash-ride-details {
border-top: 1px solid var(--border-subtle);
margin-top: 4px;
padding-top: 16px;
display: flex;
flex-direction: column;
gap: 14px;
animation: dash-details-in var(--dur-fast) var(--ease);
}
@keyframes dash-details-in {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.dash-ride-details { animation: none; }
}
.dash-ride-details-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 24px;
margin: 0;
}
.dash-ride-details-row dt {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 2px;
}
.dash-ride-details-row dd {
font-size: 13px;
color: var(--text-primary);
margin: 0;
}
.dash-ride-details-notes .kicker { margin-bottom: 6px; }
.dash-ride-details-notes-body {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0;
white-space: pre-wrap;
}
.dash-ride-details-link {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.dash-ride-details-link svg { width: 12px; height: 12px; }
.dash-ride-details-link:hover {
color: var(--accent-gold);
border-color: var(--accent-gold);
}
/* -------------------------------------------------------
Sidebar help widget — dispatch + support + report-issue
------------------------------------------------------- */
.dash-help-widget {
padding: 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
.dash-help-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
margin: 0 -12px;
border-radius: var(--r-md);
border: 1px solid transparent;
background: transparent;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
width: calc(100% + 24px);
}
.dash-help-row:hover {
background: var(--surface-page);
border-color: var(--border-subtle);
}
.dash-help-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--accent-gold);
}
.dash-help-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.dash-help-label {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.dash-help-sub {
font-size: 11px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-help-report {
color: inherit;
}
/* -------------------------------------------------------
Rate-your-ride — inline star picker + comment on
completed ride cards
------------------------------------------------------- */
.dash-ride-rate {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 16px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: var(--surface-page);
}
.dash-ride-rate .kicker { margin: 0 0 2px; }
.dash-rate-stars {
display: flex;
gap: 4px;
}
.dash-rate-star {
background: none;
border: none;
padding: 4px;
cursor: pointer;
color: var(--border-default);
transition: color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.dash-rate-star svg { width: 22px; height: 22px; display: block; }
.dash-rate-star:hover { transform: scale(1.08); }
.dash-rate-star.is-active { color: var(--accent-gold); }
.dash-rate-comment {
font-size: 13px;
min-height: 60px;
resize: vertical;
}
.dash-rate-actions {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.dash-rate-submit { font-size: 12px; padding: 7px 14px; }
.dash-rate-saved-msg {
font-size: 12px;
color: var(--status-success);
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
/* Muted past rides */
.dash-rides-list--past .dash-ride-card {
opacity: 0.75;
}
.dash-rides-list--past .dash-ride-card:hover {
opacity: 1;
}
/* -------------------------------------------------------
Loading skeleton
------------------------------------------------------- */
.dash-loading { display: flex; flex-direction: column; gap: 16px; }
.dash-skeleton-card {
height: 120px;
background: linear-gradient(
90deg,
var(--surface-card) 0%,
var(--surface-elevated) 50%,
var(--surface-card) 100%
);
background-size: 200% 100%;
border-radius: var(--r-lg);
border: 1px solid var(--border-subtle);
animation: dash-shimmer 1.4s ease-in-out infinite;
}
@keyframes dash-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.dash-skeleton-card { animation: none; }
}
/* -------------------------------------------------------
Dashboard empty state
------------------------------------------------------- */
.dash-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 40px 24px;
gap: 12px;
border: 1px dashed var(--border-default);
border-radius: var(--r-lg);
}
.dash-empty-icon {
width: 36px;
height: 36px;
color: var(--accent-gold);
opacity: 0.6;
}
.dash-empty-title {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 400;
color: var(--text-primary);
margin: 0;
}
.dash-empty-body {
font-size: 14px;
color: var(--text-muted);
margin: 0 0 4px;
}
/* Empty-state subtle text link — replaces the large gold button
that used to live in the empty state and duplicate the hero
Request a Ride. Reads as guidance, not as a third primary CTA. */
.dash-empty-link {
display: inline-block;
margin-top: 10px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--accent-gold);
text-decoration: none;
border-bottom: 1px solid rgba(212, 184, 120, 0.45);
padding-bottom: 1px;
transition: color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.dash-empty-link:hover {
color: #E5CC95;
border-bottom-color: #E5CC95;
}
/* -------------------------------------------------------
Dashboard sidebar widgets
------------------------------------------------------- */
.dash-sidebar {
display: flex;
flex-direction: column;
gap: 16px;
/* On mobile, sidebar renders below feed */
}
.dash-profile-widget {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px 20px 20px;
gap: 6px;
}
.dash-avatar {
width: 52px;
height: 52px;
border-radius: var(--r-full);
background: var(--accent-gold-glow);
border: 1px solid var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-weight: 600;
font-size: 18px;
color: var(--accent-gold);
margin-bottom: 6px;
}
.dash-profile-name {
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
margin: 0;
}
.dash-profile-email {
font-size: 13px;
color: var(--text-muted);
margin: 0;
/* Long single-token emails (no spaces) overflowed the card on
narrow sidebars — same break behaviour we apply on the login
email echo. */
width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.dash-profile-link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 10px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-default);
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.dash-profile-link:hover { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.dash-profile-arrow { width: 14px; height: 14px; }
.dash-prefs-widget { padding: 20px; }
.dash-prefs-list {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 16px;
margin-bottom: 14px;
}
.dash-prefs-list dt {
font-size: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
align-self: center;
}
.dash-prefs-list dd {
font-size: 13px;
color: var(--text-primary);
margin: 0;
}
/* Sign out button */
.auth-signout-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 12px 16px;
background: none;
border: 1px solid var(--border-default);
border-radius: var(--r-md);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.auth-signout-btn svg { width: 16px; height: 16px; }
.auth-signout-btn:hover {
background: rgba(162, 81, 73, 0.06);
border-color: rgba(162, 81, 73, 0.24);
color: var(--status-error);
}
/* -------------------------------------------------------
Profile page — hero
------------------------------------------------------- */
.profile-hero {
background: var(--surface-elevated);
border-bottom: 1px solid var(--border-subtle);
padding: clamp(40px, 5vw, 64px) var(--gutter) clamp(32px, 4vw, 48px);
}
.profile-hero-inner {
max-width: var(--max-w);
margin: 0 auto;
}
.profile-hero-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(28px, 4vw, 42px);
letter-spacing: -0.02em;
line-height: 1.08;
color: var(--text-primary);
margin: 8px 0 8px;
}
.profile-hero-sub {
font-size: 15px;
color: var(--text-muted);
margin: 0;
}
/* -------------------------------------------------------
Profile layout + cards
------------------------------------------------------- */
.profile-layout {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 680px;
padding-top: 36px;
padding-bottom: 80px; /* room for sticky save bar */
}
.profile-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.profile-card {
padding: clamp(20px, 3vw, 32px);
display: flex;
flex-direction: column;
gap: 18px;
}
.profile-card-title {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
/* Read-only email field tag */
.profile-readonly-tag {
position: absolute;
right: 12px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
pointer-events: none;
}
.profile-coming-soon {
display: inline-block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-gold);
background: var(--accent-gold-glow);
border: 1px solid rgba(205,166,91, 0.22);
border-radius: var(--r-full);
padding: 2px 8px;
margin-left: 8px;
}
/* -------------------------------------------------------
Notification toggles — iOS-style switch
------------------------------------------------------- */
.profile-toggles {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.profile-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.profile-toggle-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.profile-toggle-label {
font-size: 14px;
font-weight: 500;
color: var(--text-primary);
}
.profile-toggle-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
}
/* The switch track + thumb */
.profile-toggle-switch {
position: relative;
display: inline-block;
width: 44px;
height: 26px;
flex-shrink: 0;
cursor: pointer;
}
.profile-toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.profile-toggle-thumb {
position: absolute;
inset: 0;
background: var(--border-default);
border-radius: var(--r-full);
transition: background var(--dur-fast) var(--ease);
}
.profile-toggle-thumb::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: var(--r-full);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-fast) var(--ease);
}
.profile-toggle-switch input:checked + .profile-toggle-thumb {
background: var(--status-success);
}
.profile-toggle-switch input:checked + .profile-toggle-thumb::after {
transform: translateX(18px);
}
.profile-toggle-switch input:focus-visible + .profile-toggle-thumb {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
/* -------------------------------------------------------
Sticky save bar
------------------------------------------------------- */
.profile-save-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px clamp(16px, 4vw, 48px);
background: var(--surface-card);
border-top: 1px solid var(--border-default);
box-shadow: 0 -8px 24px rgba(1,43,91, 0.08);
animation: save-bar-in var(--dur-fast) var(--ease);
}
[data-theme="dark"] .profile-save-bar {
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.32);
}
@keyframes save-bar-in {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.profile-save-bar { animation: none; }
}
.profile-save-bar-msg {
font-size: 14px;
color: var(--text-secondary);
margin: 0;
}
.profile-save-bar-actions {
display: flex;
gap: 10px;
align-items: center;
}
/* -------------------------------------------------------
Toast notifications (save success, error)
------------------------------------------------------- */
.profile-toast {
position: fixed;
top: calc(var(--nav-h) + 12px);
right: 20px;
z-index: 40;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: var(--surface-card);
border: 1px solid rgba(94, 142, 96, 0.30);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
font-size: 14px;
color: var(--status-success);
animation: toast-in var(--dur-normal) var(--ease);
max-width: calc(100vw - 40px);
}
.profile-toast[hidden] { display: none; }
.profile-toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.profile-toast--error {
color: var(--status-error);
border-color: rgba(162, 81, 73, 0.30);
}
@keyframes toast-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.profile-toast { animation: none; }
}
/* -------------------------------------------------------
Security card — password reset
------------------------------------------------------- */
.profile-security-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0 0 16px;
}
.profile-security-hint {
font-size: 13px;
color: var(--status-success);
margin: 12px 0 0;
padding: 10px 14px;
background: rgba(94, 142, 96, 0.08);
border: 1px solid rgba(94, 142, 96, 0.22);
border-radius: var(--r-md);
}
/* -------------------------------------------------------
Saved addresses card
------------------------------------------------------- */
.profile-places-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0 0 18px;
}
.profile-places-list {
list-style: none;
padding: 0;
margin: 0 0 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-places-empty {
font-size: 13px;
color: var(--text-muted);
text-align: center;
padding: 18px;
border: 1px dashed var(--border-default);
border-radius: var(--r-md);
margin: 0 0 18px;
}
.profile-place-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: var(--surface-page);
transition: border-color var(--dur-fast) var(--ease);
}
.profile-place-row:hover {
border-color: var(--border-default);
}
.profile-place-body {
flex: 1;
min-width: 0;
}
.profile-place-label {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 2px;
}
.profile-place-address {
font-size: 12px;
color: var(--text-muted);
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile-place-delete {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--r-md);
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.profile-place-delete svg { width: 16px; height: 16px; }
.profile-place-delete:hover {
color: var(--status-error);
background: rgba(162, 81, 73, 0.08);
border-color: rgba(162, 81, 73, 0.22);
}
.profile-place-delete:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.profile-place-form {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--border-subtle);
}
.profile-place-form .auth-field { gap: 4px; }
.profile-place-add {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
}
@media (max-width: 480px) {
.profile-place-add { width: 100%; justify-content: center; }
}
/* -------------------------------------------------------
Favourite chauffeurs list (profile.html)
Mirrors the saved-places list rhythm but with a gold
star glyph so the row reads as a "favourites" register
rather than another address book.
------------------------------------------------------- */
.profile-favs-desc {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0 0 18px;
}
.profile-favs-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.profile-favs-list[hidden] { display: none; }
.profile-favs-empty,
.profile-favs-loading {
font-size: 13px;
color: var(--text-muted);
text-align: center;
padding: 18px;
border: 1px dashed var(--border-default);
border-radius: var(--r-md);
margin: 0;
line-height: 1.5;
}
.profile-favs-empty[hidden],
.profile-favs-loading[hidden] { display: none; }
.profile-fav-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: var(--surface-page);
transition: border-color var(--dur-fast) var(--ease);
}
.profile-fav-row:hover {
border-color: rgba(212, 184, 120, 0.32);
}
.profile-fav-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(212, 184, 120, 0.12);
color: var(--accent-gold, #D4B878);
}
.profile-fav-icon svg { width: 16px; height: 16px; }
.profile-fav-body {
flex: 1;
min-width: 0;
}
.profile-fav-name {
font-family: var(--font-serif);
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 2px;
}
.profile-fav-since {
font-size: 12px;
color: var(--text-muted);
margin: 0;
}
.profile-fav-remove {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: var(--r-md);
border: 1px solid transparent;
background: transparent;
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.profile-fav-remove svg { width: 14px; height: 14px; }
.profile-fav-remove:hover {
color: var(--status-error);
background: rgba(162, 81, 73, 0.08);
border-color: rgba(162, 81, 73, 0.22);
}
.profile-fav-remove:disabled { opacity: 0.5; cursor: not-allowed; }
/* -------------------------------------------------------
Danger zone card
------------------------------------------------------- */
.profile-danger-card {
border-color: rgba(162, 81, 73, 0.18);
padding: clamp(20px, 3vw, 28px);
}
.profile-danger-title {
color: var(--status-error);
}
.profile-danger-desc {
font-size: 14px;
color: var(--text-secondary);
margin: 0 0 20px;
line-height: 1.6;
}
.profile-danger-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
padding: 10px 18px;
border-radius: var(--r-md);
cursor: pointer;
background: transparent;
border: 1px solid rgba(162, 81, 73, 0.40);
color: var(--status-error);
transition: background var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.profile-danger-btn:hover {
background: var(--action-destructive-bg);
border-color: var(--action-destructive-bg);
color: var(--action-destructive-text);
}
/* -------------------------------------------------------
Confirmation modal
------------------------------------------------------- */
.profile-modal-backdrop {
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--surface-overlay);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
animation: modal-in var(--dur-normal) var(--ease);
}
.profile-modal-backdrop[hidden] { display: none; }
@keyframes modal-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.profile-modal-backdrop { animation: none; }
}
.profile-modal {
background: var(--surface-card);
border: 1px solid var(--border-default);
border-radius: var(--r-xl);
padding: clamp(24px, 4vw, 36px);
max-width: 400px;
width: 100%;
box-shadow: var(--shadow-lg);
animation: modal-card-in var(--dur-normal) var(--ease);
}
/* Saved-place chips — quick-fill for pickup/dropoff in create-ride modal */
.dash-places-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.dash-places-chips[hidden] { display: none; }
.dash-place-chip {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-full);
padding: 6px 12px;
cursor: pointer;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
}
.dash-place-chip:hover {
color: var(--accent-gold);
border-color: var(--accent-gold);
background: var(--accent-gold-glow);
}
/* Wide variant — used by the create-ride form (more fields) */
.profile-modal--wide {
max-width: 520px;
max-height: calc(100vh - 48px);
overflow-y: auto;
}
/* -------------------------------------------------------
Booking modal — premium polish (compact pass)
------------------------------------------------------------
Goal of this pass: shorter modal, action row visible without
scrolling on a 720p / 13" laptop. Widened slightly (480→540)
and tightened vertically (padding, gaps, textarea height,
trust strip, confirm line). If content still exceeds the
viewport on a small screen, an internal scroll engages but
the action row is sticky to the bottom of the sheet so the
primary CTA never falls below the fold.
------------------------------------------------------------ */
.profile-modal--booking {
position: relative;
max-width: 540px;
width: 100%;
max-height: min(88vh, 760px);
border-radius: 20px;
padding: 22px clamp(20px, 3vw, 28px) 0; /* zero bottom — action row owns it */
box-shadow:
0 30px 80px -20px rgba(0, 0, 0, 0.55),
0 0 0 1px var(--border-default);
overflow: hidden; /* clip the gradient accent + ensure inner scroll wins */
display: flex;
flex-direction: column;
}
.profile-modal--booking::before {
content: "";
position: absolute;
inset: 0 24px auto 24px;
height: 2px;
border-radius: 2px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(212, 184, 120, 0.55) 30%,
rgba(212, 184, 120, 0.95) 50%,
rgba(212, 184, 120, 0.55) 70%,
transparent 100%
);
opacity: 0.9;
pointer-events: none;
z-index: 2;
}
/* Form is the only thing that scrolls; the action row sits on top
of the scroll container as a sibling, so the primary CTA never
leaves the viewport on a short screen. */
.profile-modal--booking .auth-form {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
margin: 0 calc(-1 * clamp(20px, 3vw, 28px)); /* let the scrollbar live at the sheet edge */
padding: 0 clamp(20px, 3vw, 28px) 14px;
gap: 12px; /* tighter than the default 18px */
scrollbar-width: thin;
scrollbar-color: rgba(212, 184, 120, 0.35) transparent;
}
.profile-modal--booking .auth-form::-webkit-scrollbar { width: 6px; }
.profile-modal--booking .auth-form::-webkit-scrollbar-thumb {
background: rgba(212, 184, 120, 0.35);
border-radius: 3px;
}
.profile-modal--booking .auth-form::-webkit-scrollbar-track { background: transparent; }
.profile-modal-title--booking {
font-family: var(--font-serif);
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.01em;
margin: 4px 0 6px;
}
.profile-modal--booking .profile-modal-body {
margin: 0 0 8px;
font-size: 13.5px;
line-height: 1.5;
}
/* Compact trust line — mixed case, no caps, no mono. Reads as
a thin reassurance subline, not a kicker. */
.profile-modal-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 12px;
padding: 0;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: 0.005em;
text-transform: none;
color: rgba(212, 184, 120, 0.85);
}
.profile-modal-trust-sep {
color: rgba(212, 184, 120, 0.45);
}
/* Reassurance line right above the actions — muted, italic, small.
Lives inside the form so it scrolls with the last field; the
action row stays sticky regardless. */
.profile-modal-confirm {
margin: 4px 0 0;
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
font-style: italic;
text-align: left;
}
/* Sticky action row at the bottom of the sheet. */
.profile-modal-actions--booking {
flex: 0 0 auto;
margin: 0 calc(-1 * clamp(20px, 3vw, 28px));
padding: 14px clamp(20px, 3vw, 28px);
border-top: 1px solid var(--border-subtle);
background: var(--surface-card);
gap: 10px;
align-items: center;
border-radius: 0 0 20px 20px;
}
.profile-modal-actions--booking .btn-ghost {
min-width: 96px;
}
.profile-modal-actions--booking .btn-primary {
min-width: 168px;
flex: 1 1 auto;
font-weight: 600;
letter-spacing: 0.01em;
}
.profile-modal-actions--booking .btn-primary .auth-submit-label { display: inline-block; }
/* `:not([hidden])` keeps the [hidden] HTML attribute authoritative.
Without it, this 3-class selector outranks `.auth-submit-spinner[hidden]`
and leaves the spinner visible (looping) even on an idle button. */
.profile-modal-actions--booking .btn-primary .auth-submit-spinner:not([hidden]) {
display: inline-flex;
align-items: center;
margin-left: 8px;
}
.profile-modal-actions--booking .btn-primary[disabled] {
opacity: 1;
cursor: progress;
}
/* Notes textarea sized to two compact lines so the modal stays
short. Still expandable via the textarea's drag handle for
users who actually want to write a paragraph. */
.auth-input--notes {
min-height: 68px;
line-height: 1.5;
padding-top: 10px;
padding-bottom: 10px;
}
/* datetime-local — keep the native picker, tone its calendar chip
so it doesn't read as foreign chrome. */
.auth-input-wrap--datetime { position: relative; }
.auth-input-wrap--datetime input[type="datetime-local"] {
color-scheme: dark;
padding-right: 14px;
}
.auth-input-wrap--datetime input[type="datetime-local"]::-webkit-calendar-picker-indicator {
filter: invert(0.78) sepia(0.4) saturate(0.6) hue-rotate(2deg);
opacity: 0.65;
cursor: pointer;
transition: opacity 150ms ease;
}
.auth-input-wrap--datetime input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.auth-input-wrap--datetime input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
opacity: 1;
}
@media (max-width: 480px) {
.profile-modal--booking {
max-width: 94vw;
max-height: 92vh;
padding: 18px 18px 0;
border-radius: 18px;
}
.profile-modal--booking::before { inset: 0 16px auto 16px; }
.profile-modal--booking .auth-form {
margin: 0 -18px;
padding: 0 18px 10px;
gap: 10px;
}
.profile-modal-title--booking { font-size: 20px; }
.profile-modal-trust { font-size: 11px; gap: 5px; }
.profile-modal-actions--booking {
flex-direction: column-reverse;
align-items: stretch;
margin: 0 -18px;
padding: 12px 18px;
border-radius: 0 0 18px 18px;
}
.profile-modal-actions--booking .btn { width: 100%; min-width: 0; justify-content: center; }
}
/* Two-column form row (pax + bags) */
.dash-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@keyframes modal-card-in {
from { transform: translateY(12px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.profile-modal { animation: none; }
}
.profile-modal-title {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 12px;
}
.profile-modal-body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 24px;
}
.profile-modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
flex-wrap: wrap;
}
/* -------------------------------------------------------
Responsive overrides — auth pages
------------------------------------------------------- */
@media (max-width: 480px) {
/* iPhone SE: card edge-to-edge with reduced padding */
.auth-card {
max-width: 100%;
border-radius: var(--r-lg);
padding: 24px 20px;
}
.auth-main { padding: 16px 12px; }
.auth-topbar { padding: 0 16px; }
.auth-back-link { display: none; } /* space too tight on SE */
}
@media (max-width: 640px) {
.dash-hero-cta { flex-direction: column; }
.dash-hero-cta .btn { width: 100%; justify-content: center; }
.profile-save-bar { flex-direction: column; align-items: stretch; }
.profile-save-bar-actions { justify-content: flex-end; }
.profile-modal-actions { flex-direction: column-reverse; }
.profile-modal-actions .btn { width: 100%; justify-content: center; }
/* Section title drops the primary CTA onto its own row */
.dash-section-bar {
flex-direction: column;
align-items: flex-start;
}
.dash-new-ride-btn { width: 100%; justify-content: center; }
/* Reservation card action row stacks vertically — cancel goes last */
.dash-ride-actions { flex-direction: column; align-items: stretch; }
.dash-ride-actions .btn { width: 100%; justify-content: center; }
.dash-ride-cancel { margin-left: 0; }
/* Details grid → single column */
.dash-ride-details-grid { grid-template-columns: 1fr; gap: 8px; }
/* Create-ride modal pax/bags remain side-by-side (compact) */
.dash-form-row { gap: 10px; }
}
/* ============================================================
Booking modal — "Request your ride" form as an overlay
============================================================
Replaces the old section-book landing block. The form is hidden
by default; any href="#book" / href="index.html#book" link
across the site triggers the modal via the delegated click /
hashchange handler in app.js. Dismiss on backdrop click, close
button, or Esc.
Layout: full-viewport backdrop with soft blur, a vertically
scrolling sheet centered horizontally (capped at 720px). The
sheet itself is scroll-contained — the form is long and always
fits without pushing the backdrop around.
Dark-theme friendly via the usual --surface-page / --border
tokens. Mobile drops the side padding and rounds only the top
corners so the sheet reads as a bottom-anchored drawer on
narrow screens.
============================================================ */
.booking-modal {
position: fixed;
inset: 0;
z-index: 80;
display: flex;
align-items: flex-start;
justify-content: center;
padding: clamp(20px, 4vw, 60px) 16px;
overflow-y: auto;
overscroll-behavior: contain;
}
.booking-modal[hidden] { display: none; }
/* Backdrop — fades in while ramping the blur so the page behind
goes from sharp to soft-focus, not just "suddenly blurred". */
.booking-modal-backdrop {
position: fixed;
inset: 0;
z-index: -1;
background: rgba(1,43,91, 0.68);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
animation: booking-backdrop-in 420ms cubic-bezier(0.2, 0, 0.2, 1) both;
}
[data-theme="dark"] .booking-modal-backdrop {
background: rgba(0, 0, 0, 0.72);
}
/* Sheet — the wow moment. Comes in blurred + offset + scaled down,
lands sharp. A gold glow halo blooms underneath as it settles,
then fades. */
.booking-modal-sheet {
position: relative;
width: 100%;
max-width: 1120px;
margin: auto;
padding: clamp(28px, 4vw, 48px) clamp(22px, 3.5vw, 48px) clamp(28px, 4vw, 48px);
background: var(--surface-page);
border: 1px solid var(--border-subtle);
border-radius: var(--r-xl);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
animation: booking-sheet-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
transform-origin: 50% 40%;
}
/* Gold glow halo that blooms under the sheet as it lands */
.booking-modal-sheet::before {
content: '';
position: absolute;
inset: -40px;
z-index: -1;
border-radius: calc(var(--r-xl) + 40px);
background: radial-gradient(ellipse 70% 60% at 50% 50%,
var(--accent-gold-glow) 0%,
transparent 70%);
opacity: 0;
animation: booking-halo-bloom 1400ms 200ms cubic-bezier(0.2, 0, 0.2, 1) both;
pointer-events: none;
}
/* Gold hairline shimmer that traces the top edge on entry — a
single pass, not a loop, so it reads as a seal-of-approval
rather than a continuous effect. */
.booking-modal-sheet::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
transparent 20%,
var(--accent-gold) 50%,
transparent 80%,
transparent 100%);
transform: translateX(-100%);
animation: booking-hairline-sweep 900ms 320ms cubic-bezier(0.25, 1, 0.5, 1) both;
pointer-events: none;
opacity: 0.9;
border-radius: var(--r-xl) var(--r-xl) 0 0;
}
/* Trust strip below the head copy — mirrors the account create-modal
trust strip (24/7 Dispatch · Fixed confirmation · Chauffeur service)
so both booking surfaces speak with the same voice. Gold mono caps,
tight letter-spacing, slightly muted opacity. */
.booking-modal-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 14px 0 0;
padding: 0;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-gold, #D4B878);
opacity: 0.78;
animation: booking-item-up 620ms 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.booking-modal-trust-sep { color: rgba(212, 184, 120, 0.55); }
/* Reassurance line right above the action row — muted italic, tells
the user what happens after they hit Request Ride. */
.booking-modal-confirm {
margin: 8px 0 14px;
padding: 0 4px;
font-size: 12.5px;
line-height: 1.5;
color: var(--text-muted);
font-style: italic;
text-align: center;
}
/* Premium booking-modal footer — hairline top separator, slightly
tighter rhythm, primary CTA dominant. */
.booking-modal-footer--premium {
border-top: 1px solid var(--border-subtle);
padding-top: 16px;
}
.booking-modal-footer--premium .booking-modal-footer-cta .btn-ghost {
min-width: 96px;
}
.booking-modal-footer--premium .booking-modal-footer-cta .btn-primary {
min-width: 184px;
font-weight: 600;
letter-spacing: 0.01em;
}
.booking-modal-footer--premium .auth-submit-label { display: inline-block; }
/* `:not([hidden])` keeps the [hidden] HTML attribute authoritative.
Without it, this 2-class selector outranks `.auth-submit-spinner[hidden]`
and leaves the spinner visible (looping) even on an idle button. */
.booking-modal-footer--premium .auth-submit-spinner:not([hidden]) {
display: inline-flex;
align-items: center;
margin-left: 8px;
}
.booking-modal-footer--premium .btn-primary[disabled],
.booking-modal-footer--premium .btn-primary[data-busy="true"] {
opacity: 1;
cursor: progress;
}
@media (max-width: 480px) {
.booking-modal-trust { font-size: 10px; gap: 6px; margin-top: 10px; }
.booking-modal-confirm { font-size: 12px; }
.booking-modal-footer--premium .booking-modal-footer-cta { flex-direction: column-reverse; }
.booking-modal-footer--premium .booking-modal-footer-cta .btn { width: 100%; min-width: 0; justify-content: center; }
}
/* Head + form items fade up in a stagger — each direct child of the
sheet picks up a delay based on its position, giving the content
a reveal that feels composed rather than dropped. */
.booking-modal-head {
animation: booking-item-up 620ms 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.booking-modal-form {
animation: booking-item-up 700ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* Close button rotates into place — a tiny flourish at the corner. */
.booking-modal-close {
animation: booking-close-in 520ms 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.booking-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 40px;
height: 40px;
border-radius: var(--r-full);
background: transparent;
border: 1px solid var(--border-subtle);
color: var(--text-muted);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease);
z-index: 1;
}
.booking-modal-close svg { width: 18px; height: 18px; }
.booking-modal-close:hover {
color: var(--text-primary);
border-color: var(--accent-gold);
background: var(--accent-gold-glow);
}
.booking-modal-head {
margin-bottom: clamp(20px, 3vw, 32px);
text-align: left;
max-width: none;
}
.booking-modal-head .section-title { margin-top: 6px; }
/* The form loses the old card chrome — the sheet IS the card. */
.booking-modal-form {
border: none !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Body scroll lock when the modal is open */
body.booking-modal-open {
overflow: hidden;
}
@keyframes booking-backdrop-in {
from {
opacity: 0;
backdrop-filter: blur(0) saturate(100%);
-webkit-backdrop-filter: blur(0) saturate(100%);
}
to {
opacity: 1;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
}
}
@keyframes booking-sheet-in {
0% {
opacity: 0;
transform: translateY(60px) scale(0.90);
filter: blur(10px);
}
55% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes booking-halo-bloom {
0% { opacity: 0; transform: scale(0.92); }
40% { opacity: 1; transform: scale(1.04); }
100% { opacity: 0; transform: scale(1.10); }
}
@keyframes booking-hairline-sweep {
0% { transform: translateX(-100%); opacity: 0; }
30% { opacity: 0.95; }
100% { transform: translateX(100%); opacity: 0; }
}
@keyframes booking-item-up {
0% { opacity: 0; transform: translateY(18px); filter: blur(2px); }
60% { opacity: 1; filter: blur(0); }
100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes booking-close-in {
0% { opacity: 0; transform: rotate(-90deg) scale(0.6); }
60% { opacity: 1; }
100% { opacity: 1; transform: rotate(0) scale(1); }
}
/* Exit choreography — backdrop fades + deblurs, sheet drops a hair
and softens back into blur. Kept short (~340ms) so the dismissal
feels responsive instead of lingering. */
.booking-modal.is-closing .booking-modal-backdrop {
animation: booking-backdrop-out 300ms cubic-bezier(0.4, 0, 1, 1) both;
}
.booking-modal.is-closing .booking-modal-sheet {
animation: booking-sheet-out 340ms cubic-bezier(0.4, 0, 1, 1) both;
}
/* Halo + hairline are entry-only flourishes — suppress on exit so
they don't flash back in as the sheet retreats. */
.booking-modal.is-closing .booking-modal-sheet::before,
.booking-modal.is-closing .booking-modal-sheet::after { display: none; }
@keyframes booking-backdrop-out {
from {
opacity: 1;
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
}
to {
opacity: 0;
backdrop-filter: blur(0) saturate(100%);
-webkit-backdrop-filter: blur(0) saturate(100%);
}
}
@keyframes booking-sheet-out {
0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
100% { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(6px); }
}
@media (prefers-reduced-motion: reduce) {
.booking-modal,
.booking-modal-backdrop,
.booking-modal-sheet,
.booking-modal-sheet::before,
.booking-modal-sheet::after,
.booking-modal-head,
.booking-modal-form,
.booking-modal-close { animation: none !important; }
.booking-modal.is-closing .booking-modal-backdrop,
.booking-modal.is-closing .booking-modal-sheet { animation: none !important; }
.booking-modal-sheet::before,
.booking-modal-sheet::after { display: none; }
}
@media (max-width: 560px) {
/* Mobile fix: the outer modal used to be the scroll container with
align-items: flex-end. That combination is a well-known mobile
Safari bug — when the sheet is taller than the viewport, touch
scroll freezes. Solution: the *sheet itself* becomes the scroll
container at 100dvh, and the close button is pinned to the
viewport via position: fixed so it never scrolls out of reach. */
.booking-modal {
padding: 0;
align-items: stretch;
overflow: hidden;
}
.booking-modal-sheet {
margin: 0;
width: 100%;
max-width: 100%;
min-height: 0;
height: 100vh; /* fallback for older iOS */
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
padding: 56px 18px 32px;
overflow-x: hidden; /* spec quirk: overflow-y: auto implicitly
makes overflow-x: auto unless we override.
Without this, any element slightly wider
than the sheet enabled horizontal scroll
even with touch-action: pan-y. */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
}
.booking-modal-close {
position: fixed;
top: 12px;
right: 12px;
z-index: 2;
}
}
/* ============================================================
Booking modal — 2-column layout + vehicle-row plan cards
============================================================
Layout mirrors the shadcn Workspace form: left column holds
the form fields (contact / ride / vehicle plan rows / notes),
right column holds an assurance "Why Luna" card. Each vehicle
tier is a full-width plan-card row with radio dot, thumb,
features list and a border-t footer (learn-more + price).
FormData submits the canonical vehicle name (matches client app
useVehicles.js): "Mercedes S-Class" / "Mercedes Maybach" /
"Cadillac Escalade" / "Jet Sprinter 7-Seat" / "Sprinter 11-Seat" /
"Sprinter 14-Seat" / "Luxury Bus" / "Charter Coach".
============================================================ */
/* Two-column grid inside the modal form */
.booking-modal-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin-top: 8px;
}
@media (min-width: 960px) {
.booking-modal-grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 40px;
}
}
.booking-modal-col { min-width: 0; }
.booking-modal-col--main > .booking-form-section + .booking-form-section {
margin-top: 28px;
}
/* Sticky side card on desktop */
@media (min-width: 960px) {
.booking-modal-col--side {
position: sticky;
top: 20px;
align-self: start;
}
}
/* Form section label + hint */
.booking-form-section-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-gold);
margin: 0 0 12px 0;
}
.req-mark {
color: var(--accent-gold);
margin-left: 3px;
}
.booking-form-section-hint {
font-size: 13px;
line-height: 1.55;
color: var(--text-muted);
margin: -4px 0 14px 0;
}
.booking-form-section-hint a { color: var(--accent-gold); }
.booking-form-section > * + * {
margin-top: 12px;
}
.booking-form-section .conditional-block {
margin-top: 12px;
}
/* ----- Booking modal — Stripe payment block (featured) -----
Card-on-file is the conversion-critical step. The legacy block
was too quiet — visitors missed it entirely. This version frames
the section as a distinct, premium card with a clear header,
prominent amount, brand badges, and trust strip. Section is
revealed by app.js (hidden=false) when window.LunaStripe.enabled
resolves true. */
.booking-payment {
position: relative;
}
.booking-payment--featured {
background: linear-gradient(180deg,
rgba(205,166,91,0.06) 0%,
rgba(205,166,91,0.02) 100%);
border: 1px solid rgba(205,166,91,0.32);
border-radius: var(--r-lg, 14px);
padding: 22px 22px 20px;
margin-top: 28px !important;
box-shadow: 0 1px 0 rgba(205,166,91,0.10) inset,
0 8px 24px -16px rgba(205,166,91,0.30);
}
.booking-payment--featured::before {
content: "";
position: absolute;
top: -1px; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-gold) 50%,
transparent 100%);
border-radius: var(--r-lg, 14px) var(--r-lg, 14px) 0 0;
}
.booking-payment-head {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 18px;
}
.booking-payment-step {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
background: rgba(205,166,91,0.12);
border: 1px solid rgba(205,166,91,0.28);
padding: 6px 10px;
border-radius: 999px;
flex-shrink: 0;
margin-top: 2px;
}
.booking-payment-head-main { flex: 1; min-width: 0; }
.booking-payment-title {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(17px, 2vw, 19px);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0 0 4px;
}
.booking-payment-subtitle {
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
.booking-payment-lock {
width: 36px; height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(205,166,91,0.10);
border: 1px solid rgba(205,166,91,0.25);
color: var(--accent-gold);
flex-shrink: 0;
}
.booking-payment-lock svg { width: 18px; height: 18px; }
.booking-payment-estimate {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
padding: 14px 16px;
}
.booking-payment-estimate--prominent {
padding: 16px 18px;
}
.booking-payment-estimate-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.booking-payment-estimate-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
margin: 0 0 4px;
}
.booking-payment-estimate-sub {
font-size: 12px;
line-height: 1.45;
color: var(--text-muted);
margin: 0;
}
.booking-payment-estimate-amount {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(26px, 3.5vw, 32px);
letter-spacing: -0.015em;
color: var(--text-primary);
white-space: nowrap;
}
.booking-payment-estimate-note {
font-size: 12px;
line-height: 1.5;
color: var(--text-muted);
margin-top: 8px;
}
/* Card field wrapper — explicit "Card details" header + brand
badges row makes it impossible to miss. */
.booking-payment-card-wrap {
margin-top: 14px;
}
.booking-payment-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
padding: 0 2px;
}
.booking-payment-card-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-secondary, var(--text-primary));
opacity: 0.85;
}
.booking-payment-card-brands {
display: inline-flex;
gap: 6px;
align-items: center;
}
.booking-payment-card-brands svg {
width: 32px;
height: 20px;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
/* The container Stripe's Card Element mounts into. Stripe injects
an iframe so we don't style internal contents — only the wrapper.
Padding gives the iframe room to render its own field paddings;
the focus + invalid borders come from data-attributes Stripe
adds (StripeElement--focus, --invalid). */
.booking-payment-card-field {
margin: 0;
}
.booking-payment-card {
background: var(--surface-card);
border: 1.5px solid rgba(205,166,91,0.35);
border-radius: var(--r-md);
padding: 16px 16px;
transition: border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.booking-payment-card.StripeElement--focus {
border-color: var(--accent-gold);
box-shadow: 0 0 0 4px rgba(205,166,91,0.20),
0 1px 0 rgba(255,255,255,0.04) inset;
}
.booking-payment-card.StripeElement--invalid {
border-color: #B85C5C;
box-shadow: 0 0 0 3px rgba(184,92,92,0.18);
}
.booking-payment-error {
font-size: 13px;
color: #B85C5C;
margin-top: 6px;
}
.booking-payment-trust-list {
list-style: none;
margin: 16px 0 0;
padding: 0;
display: grid;
gap: 10px;
}
.booking-payment-trust-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 12.5px;
line-height: 1.55;
color: var(--text-muted);
}
.booking-payment-trust-list strong {
color: var(--text-primary);
font-weight: 500;
}
.booking-payment-trust-list svg {
width: 16px;
height: 16px;
color: var(--accent-gold);
flex-shrink: 0;
margin-top: 2px;
}
@media (max-width: 640px) {
.booking-payment--featured { padding: 18px 16px 16px; }
.booking-payment-head { gap: 10px; }
.booking-payment-lock { width: 32px; height: 32px; }
.booking-payment-lock svg { width: 16px; height: 16px; }
.booking-payment-estimate-row { flex-wrap: wrap; }
.booking-payment-card-brands svg { width: 28px; height: 18px; }
}
/* Submit button disabled state while Stripe is processing */
[data-busy="true"] {
opacity: 0.6;
cursor: progress;
}
/* ----- Right column — assurance card ----- */
.booking-side-card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
padding: clamp(22px, 3vw, 28px);
position: relative;
overflow: hidden;
}
.booking-side-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--accent-gold) 50%,
transparent 100%);
opacity: 0.45;
}
.booking-side-kicker {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-gold);
margin: 0 0 10px 0;
}
.booking-side-title {
font-family: var(--font-serif);
font-size: clamp(20px, 2.2vw, 24px);
font-weight: 500;
line-height: 1.2;
margin: 0 0 12px 0;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.booking-side-lead {
font-size: 14px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 20px 0;
}
.booking-side-list {
list-style: none;
padding: 0;
margin: 0 0 22px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.booking-side-list li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 14px;
line-height: 1.5;
color: var(--text-primary);
}
.booking-side-ico {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--accent-gold);
margin-top: 1px;
}
.booking-side-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13.5px;
font-weight: 500;
color: var(--accent-gold);
text-decoration: none;
transition: gap var(--dur-fast) var(--ease);
}
.booking-side-link svg {
width: 14px;
height: 14px;
transition: transform var(--dur-fast) var(--ease);
}
.booking-side-link:hover { gap: 9px; }
.booking-side-link:hover svg { transform: translateX(2px); }
/* ----- Vehicle picker rows — plan-card pattern ----- */
.vehicle-picker-rows {
display: flex;
flex-direction: column;
gap: 10px;
}
.vehicle-row-card {
position: relative;
display: block;
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
cursor: pointer;
overflow: hidden;
transition:
border-color var(--dur-normal) var(--ease),
box-shadow var(--dur-normal) var(--ease);
}
.vehicle-row-card input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.vehicle-row-card:hover {
border-color: var(--accent-gold);
}
.vehicle-row-card:has(input[type="radio"]:focus-visible) {
outline: 2px solid var(--accent-gold);
outline-offset: 2px;
}
.vehicle-row-card:has(input[type="radio"]:checked) {
border-color: var(--accent-gold);
box-shadow:
0 0 0 1px var(--accent-gold),
0 8px 24px rgba(205,166,91, 0.16);
}
[data-theme="dark"] .vehicle-row-card:has(input[type="radio"]:checked) {
box-shadow:
0 0 0 1px var(--accent-gold),
0 8px 24px rgba(205,166,91, 0.14);
}
.vehicle-row-top {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 20px;
}
/* Radio dot — mimics shadcn RadioGroupItem look */
.vehicle-row-radio {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-top: 4px;
border: 1.5px solid var(--text-muted);
border-radius: var(--r-full);
position: relative;
transition: border-color var(--dur-fast) var(--ease);
}
.vehicle-row-radio::after {
content: "";
position: absolute;
inset: 2.5px;
background: var(--accent-gold);
border-radius: var(--r-full);
transform: scale(0);
transition: transform var(--dur-normal) cubic-bezier(0.16, 1, 0.3, 1);
}
.vehicle-row-card:has(input[type="radio"]:checked) .vehicle-row-radio {
border-color: var(--accent-gold);
}
.vehicle-row-card:has(input[type="radio"]:checked) .vehicle-row-radio::after {
transform: scale(1);
}
/* Car thumb */
.vehicle-row-thumb {
flex-shrink: 0;
width: 96px;
height: 60px;
position: relative;
}
.vehicle-row-thumb img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
filter: drop-shadow(0 3px 6px rgba(1,43,91, 0.22));
transition: transform var(--dur-normal) var(--ease);
}
[data-theme="dark"] .vehicle-row-thumb img {
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.vehicle-row-card:hover .vehicle-row-thumb img,
.vehicle-row-card:has(input[type="radio"]:checked) .vehicle-row-thumb img {
transform: scale(1.04);
}
/* Glyph variant — used for Bus + Coach until proper imagery ships.
Same footprint as the photo thumb so the row alignment matches. */
.vehicle-row-thumb--glyph {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, rgba(196, 162, 100, 0.10), rgba(196, 162, 100, 0.02));
border: 1px solid rgba(196, 162, 100, 0.22);
border-radius: 6px;
}
[data-theme="dark"] .vehicle-row-thumb--glyph {
background: linear-gradient(180deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.04));
border-color: rgba(212, 175, 55, 0.28);
}
.vehicle-row-glyph {
font-family: var(--font-mono, "IBM Plex Mono", monospace);
font-size: 30px;
line-height: 1;
color: var(--gold, #c4a264);
transition: transform var(--dur-normal) var(--ease);
}
.vehicle-row-card:hover .vehicle-row-glyph,
.vehicle-row-card:has(input[type="radio"]:checked) .vehicle-row-glyph {
transform: scale(1.08);
}
/* Body */
.vehicle-row-body {
flex: 1 1 auto;
min-width: 0;
}
.vehicle-row-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 8px 0;
line-height: 1.25;
}
.vehicle-row-tier {
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-gold);
}
.vehicle-row-name {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 500;
color: var(--text-primary);
letter-spacing: -0.005em;
}
.vehicle-row-badge {
display: inline-block;
padding: 2px 8px;
background: var(--accent-gold-glow);
color: var(--accent-gold);
border: 1px solid var(--accent-gold);
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: var(--r-sm);
white-space: nowrap;
}
.vehicle-row-features {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.vehicle-row-features li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
line-height: 1.45;
color: var(--text-primary);
}
.vehicle-row-ico {
flex-shrink: 0;
width: 14px;
height: 14px;
color: var(--text-muted);
}
/* Bottom border-t strip — learn more | price */
.vehicle-row-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-top: 1px solid var(--border-subtle);
background: rgba(1,43,91, 0.025);
}
[data-theme="dark"] .vehicle-row-foot {
background: rgba(245, 241, 232, 0.03);
}
.vehicle-row-learn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: var(--accent-gold);
text-decoration: none;
transition: text-decoration-color var(--dur-fast) var(--ease);
}
.vehicle-row-learn:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.vehicle-row-learn svg {
width: 12px;
height: 12px;
}
.vehicle-row-price {
margin: 0;
font-family: var(--font-mono);
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
letter-spacing: 0.01em;
}
.vehicle-row-price em {
font-style: normal;
font-weight: 400;
color: var(--text-muted);
font-size: 12px;
margin-left: 1px;
}
/* Modal footer — separator + right-aligned CTAs */
.booking-modal-separator {
border: 0;
border-top: 1px solid var(--border-subtle);
margin: 32px 0 20px;
}
.booking-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.booking-modal-footer-note {
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
margin: 0;
}
.booking-modal-footer-note strong {
font-weight: 500;
color: var(--text-primary);
}
.booking-modal-footer-cta {
display: flex;
gap: 10px;
margin-left: auto;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.vehicle-row-card,
.vehicle-row-radio,
.vehicle-row-radio::after,
.vehicle-row-thumb img,
.booking-side-link,
.booking-side-link svg { transition: none !important; }
.vehicle-row-card:hover .vehicle-row-thumb img,
.vehicle-row-card:has(input[type="radio"]:checked) .vehicle-row-thumb img {
transform: none;
}
}
/* Mobile — tighter rows, CTAs stack on their own row */
@media (max-width: 640px) {
.vehicle-row-top {
padding: 14px;
gap: 12px;
}
.vehicle-row-thumb {
width: 72px;
height: 48px;
}
.vehicle-row-name {
font-size: 17px;
}
.vehicle-row-foot {
padding: 10px 14px;
}
.vehicle-row-features li {
font-size: 12.5px;
}
.booking-modal-footer-note {
width: 100%;
order: 2;
}
.booking-modal-footer-cta {
order: 1;
width: 100%;
justify-content: flex-end;
}
}
/* ============================================================
Luna loader — multi-ring editorial spinner
============================================================
Full-section loader used wherever the old skeleton block used
to live (dashboard reservations, receipt page, etc). Layered
rings spin at different speeds around a pulsing core, with a
mono-caps caption that cycles through Luna-voice phrases via
the text rotator in app.js (attaches to every
[data-luna-loader-text] element on page load).
Usage:
============================================================ */
.luna-loader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
min-height: 200px;
padding: 32px 16px;
}
.luna-loader-ring {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.luna-loader-ring > * {
position: absolute;
display: block;
}
/* Base soft glow — tonal gold halo behind the rings */
.luna-loader-glow {
inset: 0;
border-radius: 50%;
background: var(--accent-gold-glow);
filter: blur(16px);
animation: luna-loader-pulse 2s ease-in-out infinite;
}
/* Outer dashed ring — slowest rotation (10s) */
.luna-loader-dashed {
inset: 0;
border-radius: 50%;
border: 1px dashed rgba(205,166,91, 0.40);
animation: luna-loader-spin 10s linear infinite;
}
[data-theme="dark"] .luna-loader-dashed {
border-color: rgba(205,166,91, 0.32);
}
/* Main arc — gold top stroke, 2s rotation with glow */
.luna-loader-arc-main {
inset: 4px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: var(--accent-gold);
box-shadow: 0 0 8px rgba(205,166,91, 0.45);
animation: luna-loader-spin 2s linear infinite;
}
[data-theme="dark"] .luna-loader-arc-main {
box-shadow: 0 0 10px rgba(205,166,91, 0.45);
}
/* Reverse arc — deeper gold bottom stroke, 3s counter-rotation */
.luna-loader-arc-reverse {
inset: 12px;
border-radius: 50%;
border: 2px solid transparent;
border-bottom-color: var(--accent-gold-deep);
box-shadow: 0 0 8px rgba(158, 127, 74, 0.40);
animation: luna-loader-spin 3s linear infinite reverse;
}
[data-theme="dark"] .luna-loader-arc-reverse {
box-shadow: 0 0 10px rgba(205,166,91, 0.42);
}
/* Inner fast ring — single-side stroke, 1s */
.luna-loader-arc-inner {
inset: 20px;
border-radius: 50%;
border: 1px solid transparent;
border-left-color: rgba(158, 127, 74, 0.72);
animation: luna-loader-spin 1s ease-in-out infinite;
}
[data-theme="dark"] .luna-loader-arc-inner {
border-left-color: rgba(245, 241, 232, 0.50);
}
/* Orbital dot — sits at the top of a rotating container */
.luna-loader-orbital {
inset: 0;
animation: luna-loader-spin 4s linear infinite;
}
.luna-loader-orbital::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent-gold);
box-shadow: 0 0 5px rgba(205,166,91, 0.90);
}
[data-theme="dark"] .luna-loader-orbital::before {
box-shadow: 0 0 7px rgba(205,166,91, 0.88);
}
/* Center core — pulsing dot */
.luna-loader-core {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-gold-deep);
box-shadow: 0 0 8px rgba(205,166,91, 0.60);
animation: luna-loader-pulse 1.6s ease-in-out infinite;
}
[data-theme="dark"] .luna-loader-core {
background: var(--cream, #F5F1E8);
box-shadow: 0 0 10px rgba(245, 241, 232, 0.70);
}
/* Rotating caption below the ring */
.luna-loader-text {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.30em;
text-transform: uppercase;
color: var(--accent-gold-deep);
min-height: 14px;
display: inline-flex;
align-items: center;
animation: luna-loader-text-in 500ms cubic-bezier(0.2, 0, 0.2, 1);
}
[data-theme="dark"] .luna-loader-text { color: var(--accent-gold); }
@keyframes luna-loader-spin {
to { transform: rotate(360deg); }
}
@keyframes luna-loader-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@keyframes luna-loader-text-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Reduced motion — freeze everything; the loader just reads as a
static gold ring. Still accurate as a "we're working on it" cue. */
@media (prefers-reduced-motion: reduce) {
.luna-loader-glow,
.luna-loader-dashed,
.luna-loader-arc-main,
.luna-loader-arc-reverse,
.luna-loader-arc-inner,
.luna-loader-orbital,
.luna-loader-core,
.luna-loader-text { animation: none !important; }
}
/* ============================================================
Ride Receipt — /account/ride.html
Editorial layout optimized for both screen viewing and
print-to-PDF via the browser's native dialog (Cmd/Ctrl + P
or the "Print / Save PDF" button).
============================================================ */
.receipt-main {
max-width: 860px;
margin: 0 auto;
padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 32px) clamp(48px, 6vw, 80px);
}
.receipt-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: clamp(18px, 2.5vw, 28px);
}
.receipt-loading { padding: 0; }
.receipt-error {
padding: clamp(32px, 5vw, 48px);
text-align: center;
}
.receipt-error-title {
font-family: var(--font-serif);
font-size: clamp(24px, 3vw, 32px);
font-weight: 400;
color: var(--text-primary);
margin: 0 0 12px;
letter-spacing: -0.01em;
}
.receipt-error-body {
font-size: 15px;
color: var(--text-secondary);
line-height: 1.55;
margin: 0 0 24px;
max-width: 48ch;
margin-left: auto;
margin-right: auto;
}
.receipt {
padding: clamp(28px, 4vw, 48px);
display: flex;
flex-direction: column;
gap: clamp(20px, 3vw, 32px);
}
/* Pending-review banner — surfaced above the receipt card while the
* dispatcher hasn't confirmed the quote yet. The card is still shown
* (so the client sees what they submitted) but this banner sets the
* expectation that the reservation isn't locked in. */
.receipt-pending-banner {
margin: 0 0 clamp(16px, 2vw, 24px);
padding: clamp(16px, 2.5vw, 22px) clamp(20px, 3vw, 28px);
border: 1px solid rgba(184, 137, 74, 0.32);
background: rgba(184, 137, 74, 0.07);
border-radius: var(--r-md);
display: flex;
gap: 14px;
align-items: flex-start;
}
[data-theme="dark"] .receipt-pending-banner {
border-color: rgba(213, 170, 96, 0.38);
background: rgba(213, 170, 96, 0.08);
}
.receipt-pending-banner-icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
color: var(--status-warning);
margin-top: 2px;
}
.receipt-pending-banner-body {
flex: 1 1 auto;
}
.receipt-pending-banner-title {
font-family: var(--font-serif);
font-size: clamp(17px, 2vw, 20px);
font-weight: 500;
color: var(--text-primary);
margin: 0 0 6px;
letter-spacing: -0.005em;
}
.receipt-pending-banner-text {
font-size: 14.5px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
}
.receipt-pending-banner-text a { color: inherit; }
@media print {
.receipt-pending-banner { display: none !important; }
}
.receipt-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
padding-bottom: clamp(18px, 2.5vw, 28px);
border-bottom: 1px solid var(--border-subtle);
flex-wrap: wrap;
}
.receipt-brand {
display: flex;
flex-direction: column;
gap: 6px;
}
.receipt-logo {
height: 42px;
width: auto;
display: block;
}
.receipt-logo-light { display: block; }
.receipt-logo-dark { display: none; }
[data-theme="dark"] .receipt-logo-light { display: none; }
[data-theme="dark"] .receipt-logo-dark { display: block; }
.receipt-brand-sub {
font-size: 12px;
color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: 0.06em;
margin: 0;
}
.receipt-meta {
text-align: right;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-end;
}
.receipt-ref {
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
margin: 0;
letter-spacing: 0.05em;
}
.receipt-status {
margin: 4px 0 0;
}
.receipt-title {
font-family: var(--font-serif);
font-size: clamp(30px, 4vw, 44px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0;
}
.receipt-section {
display: flex;
flex-direction: column;
gap: 14px;
}
.receipt-section-h {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0;
}
/* Itinerary route — two legs with gold arrow between */
.receipt-route {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: clamp(16px, 3vw, 28px);
align-items: center;
}
.receipt-route-leg {
min-width: 0;
}
.receipt-route-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--accent-gold);
font-family: var(--font-mono);
margin: 0 0 6px;
}
.receipt-route-address {
font-size: 15px;
color: var(--text-primary);
margin: 0 0 4px;
word-break: break-word;
}
.receipt-route-time {
font-size: 13px;
color: var(--text-secondary);
margin: 0;
}
.receipt-route-arrow {
color: var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
}
.receipt-route-arrow svg { width: 26px; height: 26px; }
/* Key/value grid for vehicle & timeline */
.receipt-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px 24px;
margin: 0;
}
.receipt-grid-row dt {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 4px;
font-family: var(--font-mono);
}
.receipt-grid-row dd {
font-size: 14px;
color: var(--text-primary);
margin: 0;
}
.receipt-notes {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
padding: 14px 18px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: var(--surface-page);
white-space: pre-wrap;
}
.receipt-foot {
padding-top: clamp(20px, 3vw, 28px);
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 14px;
}
.receipt-foot-contact {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.55;
}
.receipt-foot-contact p { margin: 0 0 4px; }
.receipt-foot-fine {
font-size: 12px;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
font-style: italic;
}
@media (max-width: 640px) {
.receipt-route { grid-template-columns: 1fr; text-align: left; }
.receipt-route-arrow { transform: rotate(90deg); justify-self: start; }
.receipt-grid { grid-template-columns: 1fr; gap: 10px; }
.receipt-head { flex-direction: column; }
.receipt-meta { text-align: left; align-items: flex-start; }
}
/* ---------- Print overrides ---------- */
@media print {
@page { margin: 14mm; }
body {
background: #fff !important;
color: #000 !important;
}
html[data-theme="dark"] { --surface-page: #fff; }
/* Hide anything flagged as non-printable — nav, footer, CTAs */
.no-print,
.nav,
.footer,
.skip-link { display: none !important; }
/* Collapse card chrome — we want a document, not a floating card */
.receipt-main { padding: 0; max-width: none; }
.receipt {
border: none !important;
box-shadow: none !important;
background: #fff !important;
padding: 0;
}
/* Force receipt logo to light variant even under dark theme */
.receipt-logo-light { display: block !important; }
.receipt-logo-dark { display: none !important; }
/* Ink-saving tweaks for muted text */
.receipt-brand-sub,
.receipt-route-time,
.receipt-foot-contact,
.receipt-foot-fine,
.receipt-grid-row dt,
.receipt-section-h,
.receipt-route-label { color: #444 !important; }
.receipt-head,
.receipt-foot { border-color: #ccc !important; }
.receipt-notes {
background: #fafafa !important;
border-color: #ddd !important;
color: #000 !important;
}
.dash-ride-badge { border: 1px solid #888 !important; color: #222 !important; }
a { color: inherit !important; text-decoration: none !important; }
}
/* =========================================================
Fleet catalog (dynamic) — fleet-data.js renders into #fleetGrid
v1.1 Personnalité grid: photo-led card, serif name, mono meta.
========================================================= */
.fleet-catalog-loading {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
}
.fleet-catalog-empty {
font-family: var(--font-sans);
font-size: 15px;
text-align: center;
padding: 80px var(--gutter);
color: var(--text-secondary);
}
/* Tier wrapper — re-uses .fleet-tier from the legacy markup so the
hero's anchor links (#tier-sedan etc) still scroll into view. */
.fleet-tier {
padding: 96px var(--gutter) 80px;
position: relative;
}
.fleet-tier-head {
max-width: 760px;
margin: 0 auto 64px;
text-align: center;
}
.fleet-tier-title {
font-family: var(--font-serif);
font-size: clamp(32px, 5vw, 52px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
margin-top: 12px;
color: var(--text-primary);
}
.fleet-tier-title em {
font-style: italic;
font-weight: 400;
color: var(--accent-gold);
}
/* Grid — auto-flow, 2 columns desktop, 1 on tablet/mobile. */
.fleet-catalog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
gap: 32px;
max-width: var(--max-w);
margin: 0 auto;
}
@media (max-width: 720px) {
.fleet-catalog-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.fleet-tier { padding: 64px var(--gutter) 48px; }
}
/* Card — photo-led, hairline border, paper-soft shadow. */
.fleet-v-card {
background: var(--surface-card);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
transition:
border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.fleet-v-card:hover {
border-color: var(--border-default);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* Photo frame — fixed 16:10 ratio so missing photos don't shift the grid. */
.fleet-v-frame {
width: 100%;
aspect-ratio: 16 / 10;
background: var(--surface-elevated);
border-bottom: 1px solid var(--border-subtle);
overflow: hidden;
display: block;
}
.fleet-v-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fleet-v-photo--empty {
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-family: var(--font-serif);
font-size: 64px;
color: var(--accent-gold);
opacity: 0.55;
background: var(--surface-elevated);
}
.fleet-v-body {
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
gap: 14px;
}
/* Mono meta line above the name — Luna receipt voice. */
.fleet-v-meta {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-gold);
margin: 0;
}
.fleet-v-pax { color: var(--text-muted); }
/* Name — serif drama. */
.fleet-v-name {
font-family: var(--font-serif);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.15;
color: var(--text-primary);
margin: 0;
}
/* Tagline — italic Playfair, signature treatment. */
.fleet-v-tagline {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
line-height: 1.45;
color: var(--text-secondary);
margin: 0;
}
/* Features list — minimal hairline rows, mono bullets. */
.fleet-v-features {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: grid;
gap: 8px;
}
.fleet-v-features li {
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.45;
color: var(--text-secondary);
padding-left: 18px;
position: relative;
}
.fleet-v-features li::before {
content: "·";
position: absolute;
left: 4px;
top: -2px;
font-family: var(--font-mono);
font-size: 18px;
color: var(--accent-gold);
line-height: 1;
}
/* Reserve CTA — inline link, hospitality convention. */
.fleet-v-cta {
align-self: flex-start;
margin-top: 8px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--text-primary);
border-bottom: 1px solid var(--border-strong);
padding-bottom: 3px;
transition:
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.fleet-v-cta:hover {
color: var(--accent-gold);
border-color: var(--accent-gold);
}
/* ============================================================
Section teaser blocks — used on the home where the full
section was moved to a dedicated subpage on 2026-05-13.
Three patterns:
- .section-teaser (header + small grid + bottom CTA)
- .section-teaser-banner (single editorial banner with
bullet points and dual CTA — used for Airport, Corporate)
============================================================ */
.section-teaser {
/* Inherits base .section spacing; teasers are visually lighter
than full sections, so don't repeat the heavy padding. */
}
.section-teaser-grid {
/* Trimmed version of .services-grid — same 3-col rhythm but
shorter cards (no bullet list, single-line desc, no CTA copy
mass). The .service-card itself does most of the work. */
}
.section-teaser-cta {
margin-top: 28px;
text-align: center;
}
/* Editorial banner variant — for Airport / Corporate teasers
where a full grid wouldn't add value (the detail lives on the
dedicated page). Two-side layout collapses to a single column
on small screens. */
.section-teaser-banner {
padding-top: clamp(36px, 4vw, 56px);
padding-bottom: clamp(36px, 4vw, 56px);
}
.section-teaser-banner-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 28px clamp(20px, 3vw, 36px);
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--r-xl, 20px);
position: relative;
overflow: hidden;
}
/* Gold hairline at the top edge — matches the booking modal's
premium signature. */
.section-teaser-banner-inner::before {
content: '';
position: absolute;
top: 0;
left: clamp(20px, 4vw, 48px);
right: clamp(20px, 4vw, 48px);
height: 1px;
background: linear-gradient(90deg,
rgba(212, 184, 120, 0) 0%,
rgba(212, 184, 120, 0.55) 50%,
rgba(212, 184, 120, 0) 100%);
pointer-events: none;
}
.section-teaser-banner-copy {
max-width: 64ch;
}
.section-teaser-banner-copy .kicker { margin: 0 0 8px; }
.section-teaser-banner-copy .section-title { margin: 0 0 14px; }
.section-teaser-banner-copy .section-sub { margin: 0 0 18px; }
.section-teaser-banner-points {
list-style: none;
margin: 0 0 24px;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 22px;
}
.section-teaser-banner-points li {
position: relative;
padding-left: 18px;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
}
.section-teaser-banner-points li::before {
content: '';
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-gold, #D4B878);
opacity: 0.85;
}
.section-teaser-banner-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 640px) {
.section-teaser-banner-points { grid-template-columns: 1fr; gap: 6px; }
.section-teaser-banner-cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* Compact service card variant — used in the home services teaser
where the prompt asks for "6 cards compactos". Drops the bullet
list and CTA, leaves icon + title + one-line description. */
.service-card--compact {
text-align: center;
padding: clamp(20px, 2.4vw, 28px);
}
.service-card--compact .service-ico {
margin-left: auto;
margin-right: auto;
}
.service-card--compact .service-card-title {
font-size: clamp(17px, 1.7vw, 19px);
margin-bottom: 6px;
}
.service-card--compact .service-card-desc {
font-size: 13.5px;
line-height: 1.45;
color: var(--text-secondary);
margin: 0;
}
/* Fleet preview cards — three flagship vehicles on the home
(S-Class / Escalade / Sprinter Jet) before the visitor jumps to
/fleet.html for the full catalog. Each card carries the vehicle
image, tier kicker and name + one-line descriptor. */
.fleet-preview-grid { margin-top: 8px; }
.fleet-preview-card {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.fleet-preview-thumb {
width: 100%;
aspect-ratio: 16 / 10;
background:
radial-gradient(ellipse 70% 60% at 50% 60%, rgba(212, 184, 120, 0.10) 0%, transparent 70%),
var(--surface-page);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.fleet-preview-thumb img {
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(1.05);
transition: transform var(--dur-normal) var(--ease);
}
.fleet-preview-card:hover .fleet-preview-thumb img {
transform: scale(1.08);
}
.fleet-preview-kicker {
margin: 14px 18px 4px;
font-size: 11px;
}
.fleet-preview-name {
margin: 0 18px 4px;
font-family: var(--font-serif);
font-size: 17px;
font-weight: 500;
color: var(--text-primary);
}
.fleet-preview-desc {
margin: 0 18px 18px;
font-size: 13.5px;
color: var(--text-muted);
}
/* Final CTA — closing section on the home with dual primary/ghost
action. Editorial frame matches the teaser-banner pattern so the
close reads as continuation, not pivot. */
.final-cta {
text-align: center;
padding-top: clamp(36px, 4vw, 56px);
padding-bottom: clamp(56px, 6vw, 88px);
}
.final-cta-inner {
max-width: 720px;
margin: 0 auto;
}
.final-cta-inner .kicker { margin: 0 0 12px; }
.final-cta-inner .section-title { margin: 0 0 14px; }
.final-cta-inner .section-sub { margin: 0 0 28px; }
.final-cta-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 480px) {
.final-cta-actions .btn { width: 100%; justify-content: center; }
}
/* ============================================================
Fleet page — premium chauffeur catalog redesign (2026-05-13)
Sections: hero trust line + dual CTA, vehicle finder strip,
spec-rich vehicle cards, comparison table, occasion picker,
one Luna standard grid, fleet FAQ, final CTA.
============================================================ */
/* Hero — new trust line + dual CTA below the existing title/sub */
.fleet-hero-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 18px 0 22px;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(212, 184, 120, 0.85);
}
.fleet-hero-trust-sep { color: rgba(212, 184, 120, 0.45); }
.fleet-hero-cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 8px;
}
.fleet-hero-helper {
margin: 18px auto 0;
max-width: 56ch;
font-size: 13px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.62);
font-style: italic;
}
@media (max-width: 480px) {
.fleet-hero-cta .btn { width: 100%; justify-content: center; }
.fleet-hero-trust { font-size: 10px; gap: 6px; }
}
/* Vehicle Finder strip — 4 quick-decision cards */
.fleet-finder { padding-top: clamp(56px, 6vw, 88px); }
.fleet-finder-grid { margin-top: 28px; }
.fleet-finder-card {
display: flex;
flex-direction: column;
padding: clamp(20px, 2.4vw, 28px);
transition: border-color var(--dur-fast) var(--ease),
transform var(--dur-normal) var(--ease);
}
.fleet-finder-card:hover {
border-color: rgba(212, 184, 120, 0.45);
transform: translateY(-2px);
}
.fleet-finder-tier {
font-size: 11px;
letter-spacing: 0.16em;
color: var(--accent-gold, #D4B878);
margin: 0 0 8px;
}
.fleet-finder-name {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 12px;
}
.fleet-finder-meta {
list-style: none;
margin: 0 0 18px;
padding: 0;
font-size: 13px;
line-height: 1.55;
color: var(--text-secondary);
}
.fleet-finder-meta li { margin-bottom: 4px; }
.fleet-finder-meta strong { color: var(--text-primary); font-weight: 600; }
.fleet-finder-cta {
margin-top: auto;
font-size: 13px;
font-weight: 500;
color: var(--accent-gold, #D4B878);
text-decoration: none;
border-bottom: 1px solid rgba(212, 184, 120, 0.4);
padding-bottom: 1px;
align-self: flex-start;
transition: color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.fleet-finder-cta:hover {
color: #E5CC95;
border-bottom-color: #E5CC95;
}
/* ============================================================
Global navigation — Services mega menu + sticky mobile CTA
------------------------------------------------------------
Both injected by luna-nav.js. Mega menu lives in the existing
.nav-links row on desktop; sticky CTA docks at the bottom of
the viewport on mobile only.
============================================================ */
/* Mega menu anchor — wraps the existing "Services" link */
.luna-megamenu-anchor {
position: relative;
display: inline-flex;
align-items: center;
}
.luna-megamenu-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.luna-megamenu-chev {
width: 10px;
height: 6px;
flex-shrink: 0;
transition: transform 220ms ease;
}
.luna-megamenu-anchor[data-open="true"] .luna-megamenu-chev {
transform: rotate(180deg);
}
/* The dropdown panel itself */
.luna-megamenu {
position: absolute;
top: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
z-index: 1000;
width: clamp(720px, 60vw, 900px);
max-width: 92vw;
opacity: 0;
visibility: hidden;
pointer-events: none;
background: rgba(13, 21, 40, 0.96);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(212, 184, 120, 0.20);
border-radius: 16px;
box-shadow:
0 30px 80px -20px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.02) inset;
transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0, 0.2, 1), visibility 0s linear 220ms;
}
.luna-megamenu::before {
content: "";
position: absolute;
top: 0;
left: 24px;
right: 24px;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 184, 120, 0.55) 50%,
transparent 100%);
pointer-events: none;
}
.luna-megamenu-anchor[data-open="true"] .luna-megamenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0, 0.2, 1);
}
.luna-megamenu-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
padding: 24px 28px 22px;
}
.luna-megamenu-col-title {
margin: 0 0 12px;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(212, 184, 120, 0.9);
}
.luna-megamenu-list {
list-style: none;
margin: 0;
padding: 0;
}
.luna-megamenu-list li + li { margin-top: 4px; }
.luna-megamenu-link {
display: block;
padding: 8px 10px;
margin: 0 -10px;
border-radius: 10px;
text-decoration: none;
transition: background 180ms ease;
}
.luna-megamenu-link:hover,
.luna-megamenu-link:focus-visible {
background: rgba(212, 184, 120, 0.08);
outline: none;
}
.luna-megamenu-link-name {
display: block;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: #fff;
line-height: 1.25;
}
.luna-megamenu-link-desc {
display: block;
margin-top: 2px;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.55);
line-height: 1.4;
}
.luna-megamenu-foot {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 0 0;
margin-top: 4px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.luna-megamenu-foot-copy {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.55);
max-width: 38ch;
}
.luna-megamenu-foot-cta {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.luna-megamenu-foot-cta .btn { font-size: 13px; padding: 8px 14px; }
/* Below 1024px the desktop nav-links is typically hidden by the
site's existing burger pattern, so the mega menu just hides
with it. We force-hide here as a belt-and-braces. */
@media (max-width: 1023px) {
.luna-megamenu { display: none; }
.luna-megamenu-chev { display: none; }
}
/* Sticky mobile conversion bar */
.luna-sticky-cta {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
z-index: 90;
display: none;
gap: 10px;
padding: 10px;
background: rgba(13, 21, 40, 0.88);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(212, 184, 120, 0.22);
border-radius: 9999px;
box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.55);
transition: opacity 280ms ease, transform 300ms cubic-bezier(0.2, 0, 0.2, 1);
}
@media (max-width: 720px) {
.luna-sticky-cta { display: flex; }
}
.luna-sticky-cta.is-hidden {
opacity: 0;
transform: translateY(20px);
pointer-events: none;
}
.luna-sticky-cta-btn {
flex: 1 1 50%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 14px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
border-radius: 9999px;
transition: background 180ms ease, color 180ms ease;
}
.luna-sticky-cta-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.luna-sticky-cta-btn--ghost {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.luna-sticky-cta-btn--ghost:hover {
background: rgba(255, 255, 255, 0.08);
}
.luna-sticky-cta-btn--primary {
background: var(--accent-gold, #D4B878);
color: #0D1528;
border: 1px solid var(--accent-gold, #D4B878);
}
.luna-sticky-cta-btn--primary:hover {
background: #E5CC95;
}
/* Make sure the bar doesn't cover the last bit of footer content
on pages with short main areas. The footer's own bottom padding
already accounts for the bar height + 12px gap. */
@media (max-width: 720px) {
.footer-base { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* Google Places autocomplete dropdown — force above every Luna
overlay (mobile drawer 9999, mega menu 1000, sticky CTA 90).
Without this the predictions would render under the drawer
on iOS Safari (default pac-container z-index ~1000). */
.pac-container {
z-index: 11000 !important;
background: rgba(13, 21, 40, 0.96) !important;
border: 1px solid rgba(212, 184, 120, 0.22) !important;
border-radius: 12px !important;
margin-top: 6px !important;
box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6) !important;
font-family: var(--font-sans) !important;
backdrop-filter: blur(14px) saturate(140%) !important;
-webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}
.pac-container .pac-item {
padding: 10px 14px !important;
color: rgba(255, 255, 255, 0.85) !important;
border-top-color: rgba(255, 255, 255, 0.06) !important;
font-size: 13.5px !important;
}
.pac-container .pac-item:hover,
.pac-container .pac-item-selected {
background: rgba(212, 184, 120, 0.10) !important;
}
.pac-container .pac-item-query,
.pac-container .pac-matched {
color: var(--accent-gold, #D4B878) !important;
}
.pac-container .pac-icon {
filter: invert(0.7) sepia(0.4) saturate(0.6) hue-rotate(2deg) !important;
}
/* ============================================================
Auto-hide-on-scroll header (luna-nav.js)
------------------------------------------------------------
Header slides up out of view when the user scrolls down past
80px; snaps back the instant they scroll up. Applied to every
page with a [data-nav] header. The translate is GPU-accelerated
(transform, not top), and the existing sticky positioning +
data-scrolled tinting are preserved.
============================================================ */
.nav[data-nav] {
transition:
transform 320ms cubic-bezier(0.2, 0, 0.2, 1),
background var(--dur-normal) var(--ease),
border-color var(--dur-normal) var(--ease),
box-shadow var(--dur-normal) var(--ease);
will-change: transform;
}
.nav.luna-nav-hidden {
transform: translateY(-105%); /* 105 hides the bottom border shadow too */
}
@media (prefers-reduced-motion: reduce) {
.nav[data-nav] { transition: background var(--dur-normal) var(--ease); }
.nav.luna-nav-hidden { transform: none; visibility: hidden; }
}
/* ============================================================
Mobile drawer — full-screen overlay (luna-nav.js)
============================================================
Wakes up on every page that has a [data-burger] button. The
drawer is a true dialog: fixed, full-viewport, body-scroll-locked,
above sticky CTA and any inline header dropdowns. The original
burger handler is intercepted in capture-phase so the legacy
inline-nav-dropdown never appears alongside it.
============================================================ */
/* Body scroll lock + hide sticky CTA when drawer is open */
body.luna-menu-open {
overflow: hidden;
/* Prevent iOS Safari rubber-band from leaking through the drawer */
touch-action: none;
}
body.luna-menu-open .luna-sticky-cta {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.luna-drawer {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: stretch;
justify-content: stretch;
pointer-events: none;
}
.luna-drawer[hidden] { display: none; }
/* Backdrop aura — dark navy gradient + warm gold corner glow.
The radial in the top-right reads as Miami night reflection. */
.luna-drawer-aura {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
background:
radial-gradient(ellipse 60% 50% at 88% 14%, rgba(212, 184, 120, 0.12) 0%, transparent 60%),
radial-gradient(ellipse 70% 60% at 8% 90%, rgba(64, 96, 168, 0.16) 0%, transparent 70%),
linear-gradient(180deg, #0D1528 0%, #08101F 100%);
transition: opacity 320ms ease;
}
.luna-drawer.is-open .luna-drawer-aura { opacity: 1; }
/* Panel — the scrollable content surface */
.luna-drawer-panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 520px;
margin: 0 auto;
height: 100dvh;
min-height: 100vh;
overflow-y: auto;
overscroll-behavior: contain;
padding:
calc(20px + env(safe-area-inset-top, 0px))
clamp(20px, 5vw, 32px)
calc(28px + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
gap: 22px;
opacity: 0;
transform: translateY(8px);
transition: opacity 320ms ease, transform 360ms cubic-bezier(0.2, 0, 0.2, 1);
pointer-events: auto;
}
.luna-drawer.is-open .luna-drawer-panel {
opacity: 1;
transform: translateY(0);
}
/* Head — sticky inside the panel so logo + close stay accessible */
.luna-drawer-head {
position: sticky;
top: calc(-1 * (env(safe-area-inset-top, 0px) + 20px));
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0 16px;
margin: 0 -4px;
background: linear-gradient(180deg, rgba(13,21,40,0.96) 70%, rgba(13,21,40,0));
}
.luna-drawer-logo {
display: inline-flex;
align-items: center;
height: 28px;
text-decoration: none;
}
.luna-drawer-logo img {
height: 100%;
width: auto;
display: block;
}
.luna-drawer-close {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.92);
border-radius: 9999px;
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease;
}
.luna-drawer-close:hover,
.luna-drawer-close:focus-visible {
background: rgba(212, 184, 120, 0.10);
border-color: rgba(212, 184, 120, 0.45);
outline: none;
}
.luna-drawer-close svg { width: 18px; height: 18px; }
/* CTA block — Reserve gold + Call ghost, both full-width */
.luna-drawer-cta {
display: flex;
flex-direction: column;
gap: 10px;
}
.luna-drawer-cta-primary,
.luna-drawer-cta-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 18px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
border-radius: 9999px;
height: 50px;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.luna-drawer-cta-primary {
background: var(--accent-gold, #D4B878);
color: #0D1528;
border: 1px solid var(--accent-gold, #D4B878);
}
.luna-drawer-cta-primary:hover { background: #E5CC95; }
.luna-drawer-cta-primary svg { width: 16px; height: 16px; }
.luna-drawer-cta-ghost {
background: rgba(255, 255, 255, 0.04);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.14);
}
.luna-drawer-cta-ghost:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(212, 184, 120, 0.35);
}
.luna-drawer-cta-ghost svg { width: 16px; height: 16px; }
/* Navigation list */
.luna-drawer-nav { margin: 0; }
.luna-drawer-nav-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.luna-drawer-nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.luna-drawer-link,
.luna-drawer-link--acc {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 14px 4px;
font-family: var(--font-serif);
font-size: 19px;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
transition: color 180ms ease;
cursor: pointer;
}
.luna-drawer-link:hover,
.luna-drawer-link--acc:hover { color: var(--accent-gold, #D4B878); }
/* Accordion — uses native / */
.luna-drawer-acc { padding: 0; }
.luna-drawer-acc > summary {
list-style: none;
}
.luna-drawer-acc > summary::-webkit-details-marker { display: none; }
.luna-drawer-acc-chev {
width: 12px;
height: 7px;
flex-shrink: 0;
transition: transform 240ms ease;
color: rgba(255, 255, 255, 0.55);
}
.luna-drawer-acc[open] .luna-drawer-acc-chev {
transform: rotate(180deg);
color: var(--accent-gold, #D4B878);
}
.luna-drawer-sublist {
list-style: none;
margin: 0;
padding: 0 0 12px 4px;
}
.luna-drawer-sublink {
display: block;
padding: 9px 0 9px 20px;
font-family: var(--font-sans);
font-size: 14.5px;
color: rgba(255, 255, 255, 0.70);
text-decoration: none;
border-left: 1px solid rgba(212, 184, 120, 0.18);
transition: color 180ms ease, border-color 180ms ease;
}
.luna-drawer-sublink:hover {
color: var(--accent-gold, #D4B878);
border-left-color: var(--accent-gold, #D4B878);
}
/* Account row — Sign In · Create Account */
.luna-drawer-account {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 4px 0;
font-family: var(--font-sans);
font-size: 13.5px;
color: rgba(255, 255, 255, 0.55);
}
.luna-drawer-account-link {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
padding-bottom: 1px;
transition: color 180ms ease, border-color 180ms ease;
}
.luna-drawer-account-link:hover {
color: var(--accent-gold, #D4B878);
border-bottom-color: var(--accent-gold, #D4B878);
}
.luna-drawer-account-sep { color: rgba(255, 255, 255, 0.30); }
/* Foot trust + phone */
.luna-drawer-foot {
margin-top: auto;
padding: 18px 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
text-align: center;
}
.luna-drawer-foot-trust {
margin: 0 0 6px;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(212, 184, 120, 0.78);
}
.luna-drawer-foot-phone {
display: inline-block;
font-size: 15px;
color: rgba(255, 255, 255, 0.92);
text-decoration: none;
letter-spacing: 0.02em;
}
.luna-drawer-foot-phone:hover { color: var(--accent-gold, #D4B878); }
/* Reduced motion — kill the slide-in transform, keep the fade */
@media (prefers-reduced-motion: reduce) {
.luna-drawer-panel,
.luna-drawer.is-open .luna-drawer-panel {
transition: opacity 220ms ease !important;
transform: none !important;
}
}
/* ============================================================
Miami local landing — conversion-focused redesign (2026-05-13)
============================================================ */
/* Static-position variant of the .expand-section — keeps the
looping brand-film video but kills the 175vh pin runway and
locks the frame at its final expanded dimensions. The 75vh
of dead navy below the frame in the original sticky version
is gone; section height collapses to the frame + padding. */
.expand-section--static {
height: auto;
padding: clamp(40px, 5vw, 72px) 0;
position: relative;
overflow: hidden;
}
/* Background video bleed — same source as the framed video, full
section width, low opacity + blur. Sits below the gradient
overlay so the foreground frame still owns the focal point. */
.expand-section--static .expand-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.18;
filter: blur(18px) saturate(1.15);
transform: scale(1.05); /* hide blur edge bleed */
z-index: 0;
pointer-events: none;
}
.expand-section--static .expand-bg-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse 70% 60% at 50% 50%, rgba(1, 43, 91, 0.55) 0%, rgba(1, 43, 91, 0.92) 90%),
radial-gradient(ellipse 90% 60% at 50% 100%, rgba(0, 0, 0, 0.35) 0%, transparent 70%);
}
.expand-section--static .expand-stage {
position: relative;
z-index: 2; /* foreground frame above the bleed */
}
@media (prefers-reduced-motion: reduce) {
.expand-section--static .expand-bg-video { display: none; }
}
.expand-section--static .expand-stage {
position: relative;
top: auto;
height: auto;
padding: 0 clamp(16px, 4vw, 48px);
}
.expand-section--static .expand-frame {
--p: 1; /* lock the scroll-driven progress at full */
width: 100%;
max-width: 1200px;
height: auto;
aspect-ratio: 16 / 7;
max-height: 70vh;
border-radius: var(--r-xl);
will-change: auto;
}
@media (max-width: 720px) {
.expand-section--static .expand-frame { aspect-ratio: 4 / 3; max-height: none; }
}
/* Hero — trust line under CTAs */
.location-hero-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 18px 0 0;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(212, 184, 120, 0.85);
}
.location-hero-trust-sep { color: rgba(212, 184, 120, 0.45); }
@media (max-width: 540px) {
.location-hero-trust { font-size: 10px; gap: 6px; }
}
/* The Luna Standard in Miami — 4 cards + compact stat strip */
.miami-standard-grid { margin-top: 28px; }
.miami-standard-card {
padding: clamp(20px, 2.2vw, 26px);
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color var(--dur-fast) var(--ease),
transform var(--dur-normal) var(--ease);
}
.miami-standard-card:hover {
border-color: rgba(212, 184, 120, 0.32);
transform: translateY(-2px);
}
.miami-standard-ico {
width: 24px;
height: 24px;
color: var(--accent-gold, #D4B878);
opacity: 0.9;
}
.miami-standard-h {
margin: 0;
font-family: var(--font-serif);
font-size: 17px;
font-weight: 500;
line-height: 1.2;
color: var(--text-primary);
}
.miami-standard-c {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--text-secondary);
}
.miami-standard-stats {
list-style: none;
margin: 36px 0 0;
padding: 18px clamp(20px, 3vw, 32px);
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md, 12px);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 24px;
text-align: center;
}
@media (min-width: 720px) {
.miami-standard-stats { grid-template-columns: repeat(4, 1fr); }
}
.miami-standard-stats li {
display: flex;
flex-direction: column;
gap: 4px;
}
.miami-standard-stats .mono {
font-size: 20px;
letter-spacing: 0.02em;
color: var(--accent-gold, #D4B878);
margin: 0;
}
.miami-standard-stats span {
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
/* Miami coverage CTA */
.miami-coverage-cta {
margin-top: 36px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
@media (max-width: 540px) {
.miami-coverage-cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* Airport card CTA + foot */
.airport-card-cta {
margin-top: 16px;
align-self: flex-start;
}
.airport-card { display: flex; flex-direction: column; }
@media (max-width: 540px) {
.airport-card-cta { width: 100%; justify-content: center; }
}
.airports-foot {
margin: 28px auto 0;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.airports-foot .airports-note {
margin: 0;
font-size: 13px;
color: var(--text-muted);
}
/* Rate row featured highlight + mobile stacked cards */
.rate-row--featured {
background: rgba(212, 184, 120, 0.04);
}
.rate-row--featured td:first-child {
position: relative;
}
.rate-row--featured td:first-child::before {
content: "★";
position: absolute;
left: -2px;
top: 50%;
transform: translateY(-50%);
color: var(--accent-gold, #D4B878);
font-size: 9px;
opacity: 0.7;
}
@media (max-width: 720px) {
.rate-table-wrap { border: 0; }
.rate-table thead { display: none; }
.rate-table,
.rate-table tbody,
.rate-table tr { display: block; }
.rate-table tr {
margin-bottom: 12px;
padding: 14px 16px;
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md, 12px);
}
.rate-table tr.rate-row--featured {
border-color: rgba(212, 184, 120, 0.32);
}
.rate-table td {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
border: none;
}
.rate-table td:first-child {
padding: 0 0 8px;
margin-bottom: 6px;
border-bottom: 1px dashed var(--border-subtle);
font-family: var(--font-serif);
font-size: 15px;
color: var(--text-primary);
}
.rate-table td:not(:first-child)::before {
content: attr(data-label);
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-gold, #D4B878);
}
}
/* Scenarios — CTA below grid */
.scenarios-cta {
margin: 36px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
@media (max-width: 540px) {
.scenarios-cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* Why Miami Clients Book Luna — compact trust strip */
.why-miami-list {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 720px) {
.why-miami-list { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
.why-miami-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md, 12px);
font-size: 14px;
color: var(--text-primary);
}
.why-miami-dot {
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-gold, #D4B878);
box-shadow: 0 0 8px rgba(212, 184, 120, 0.6);
}
/* Final CTA — foot line */
.local-cta-foot {
margin: 12px 0 0;
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
text-align: center;
width: 100%;
}
/* ============================================================
About page — premium trust-building redesign (2026-05-13)
============================================================ */
/* Hero — shorter copy, dual CTA, trust line */
.about-hero-lede {
margin: 14px 0 12px;
font-family: var(--font-serif);
font-size: clamp(18px, 2vw, 22px);
line-height: 1.4;
color: rgba(255, 255, 255, 0.92);
max-width: 620px;
font-style: italic;
}
.about-hero-body-line {
margin: 0 0 22px;
font-size: 15px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.7);
max-width: 560px;
}
.about-hero-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 22px;
}
.about-hero-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(212, 184, 120, 0.85);
}
.about-hero-trust-sep { color: rgba(212, 184, 120, 0.45); }
@media (max-width: 540px) {
.about-hero-cta .btn { flex: 1 1 auto; justify-content: center; }
.about-hero-trust { font-size: 10px; gap: 6px; }
}
/* The Luna Standard — 4 trust cards */
.about-standard-grid { margin-top: 28px; }
.about-standard-card {
padding: clamp(22px, 2.4vw, 28px);
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color var(--dur-fast) var(--ease),
transform var(--dur-normal) var(--ease);
}
.about-standard-card:hover {
border-color: rgba(212, 184, 120, 0.32);
transform: translateY(-2px);
}
.about-standard-ico {
width: 26px;
height: 26px;
color: var(--accent-gold, #D4B878);
opacity: 0.9;
}
.about-standard-h {
margin: 0;
font-family: var(--font-serif);
font-size: 18px;
font-weight: 500;
line-height: 1.2;
color: var(--text-primary);
}
.about-standard-c {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
}
/* Why Luna Exists — editorial brand story block */
.about-why {
padding-top: clamp(56px, 6vw, 88px);
padding-bottom: clamp(56px, 6vw, 88px);
}
.about-why-inner {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.about-why-inner .kicker { margin: 0 0 12px; }
.about-why-inner .section-title { margin: 0 0 22px; }
.about-why-copy {
margin: 0 0 16px;
font-size: 16px;
line-height: 1.65;
color: var(--text-secondary);
}
.about-why-copy:last-of-type { margin-bottom: 24px; }
.about-why-cta {
display: inline-block;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--accent-gold, #D4B878);
text-decoration: none;
border-bottom: 1px solid rgba(212, 184, 120, 0.45);
padding-bottom: 1px;
transition: color 200ms ease, border-color 200ms ease;
}
.about-why-cta:hover {
color: #E5CC95;
border-bottom-color: #E5CC95;
}
/* How Luna Operates — 5-step timeline */
.about-operate-steps {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 18px;
position: relative;
}
@media (min-width: 900px) {
.about-operate-steps {
grid-template-columns: repeat(5, 1fr);
gap: 12px;
position: relative;
}
.about-operate-steps::before {
content: '';
position: absolute;
top: 26px;
left: 8%;
right: 8%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(212, 184, 120, 0.35) 12%,
rgba(212, 184, 120, 0.35) 88%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
}
.about-operate-step {
position: relative;
z-index: 1;
padding: 18px clamp(18px, 1.8vw, 22px);
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md, 12px);
text-align: center;
}
.about-operate-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0 auto 12px;
font-size: 13px;
letter-spacing: 0.04em;
color: var(--accent-gold, #D4B878);
background: rgba(13, 21, 40, 1);
border: 1px solid rgba(212, 184, 120, 0.32);
border-radius: 50%;
}
.about-operate-h {
margin: 0 0 6px;
font-family: var(--font-serif);
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
}
.about-operate-c {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-muted);
}
/* Split sections — Chauffeur + Dispatch (copy left, bullets right) */
.about-split {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
}
@media (min-width: 900px) {
.about-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.about-split--reverse .about-split-copy { order: 2; }
.about-split--reverse .about-bullets { order: 1; }
}
.about-split-copy .kicker { margin: 0 0 12px; }
.about-split-copy .section-title { margin: 0 0 16px; }
.about-split-lede {
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 22px;
max-width: 46ch;
}
.about-split-cta { margin-top: 4px; }
@media (max-width: 540px) {
.about-split-cta { width: 100%; justify-content: center; }
}
.about-bullets {
list-style: none;
margin: 0;
padding: 24px clamp(20px, 2.4vw, 28px);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg, 16px);
display: flex;
flex-direction: column;
gap: 12px;
}
.about-bullets li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14.5px;
line-height: 1.5;
color: var(--text-primary);
}
.about-bullet-dot {
flex-shrink: 0;
width: 6px;
height: 6px;
margin-top: 8px;
border-radius: 50%;
background: var(--accent-gold, #D4B878);
box-shadow: 0 0 10px rgba(212, 184, 120, 0.55);
}
/* Coverage section — home market + affiliate chips */
.about-coverage-block {
margin: 28px auto 0;
max-width: 720px;
text-align: center;
}
.about-coverage-label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-gold, #D4B878);
margin: 0 0 12px;
}
.about-coverage-chips {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.about-coverage-chips li {
display: inline-flex;
align-items: center;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(212, 184, 120, 0.28);
border-radius: 9999px;
font-size: 13px;
color: var(--text-primary);
}
.about-coverage-chips--muted li {
border-color: rgba(255, 255, 255, 0.12);
color: var(--text-secondary);
}
.about-coverage-cta {
margin: 32px auto 0;
text-align: center;
}
/* Final CTA */
.about-final-cta {
text-align: center;
padding-top: clamp(56px, 6vw, 88px);
padding-bottom: clamp(72px, 8vw, 112px);
}
.about-final-cta-inner {
max-width: 720px;
margin: 0 auto;
}
.about-final-cta-inner .kicker { margin: 0 0 12px; }
.about-final-cta-inner .section-title { margin: 0 0 18px; }
.about-final-cta-copy {
font-size: 16px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0 0 28px;
max-width: 56ch;
margin-left: auto;
margin-right: auto;
}
.about-final-cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 22px;
}
.about-final-cta-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(212, 184, 120, 0.85);
}
.about-final-cta-trust-sep { color: rgba(212, 184, 120, 0.45); }
@media (max-width: 540px) {
.about-final-cta-actions .btn { width: 100%; justify-content: center; }
}
/* ============================================================
Luna Fleet Showroom — interactive premium vehicle display
============================================================ */
.fleet-showroom { padding-top: clamp(56px, 6vw, 88px); }
.fleet-showroom-head .section-title { margin-bottom: 14px; }
.fleet-showroom-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
margin: 14px 0 0;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(212, 184, 120, 0.85);
}
.fleet-showroom-trust-sep { color: rgba(212, 184, 120, 0.45); }
/* Category filters */
.fleet-showroom-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin: 28px 0 32px;
}
.fleet-showroom-filters-loading {
color: var(--text-muted);
font-size: 13px;
text-align: center;
width: 100%;
}
.fleet-showroom-filter {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 9999px;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.fleet-showroom-filter:hover {
color: var(--text-primary);
border-color: rgba(212, 184, 120, 0.35);
}
.fleet-showroom-filter:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(212, 184, 120, 0.45);
}
.fleet-showroom-filter.is-active {
background: rgba(212, 184, 120, 0.14);
border-color: var(--accent-gold, #D4B878);
color: var(--accent-gold, #D4B878);
}
.fleet-showroom-filter-count {
display: inline-block;
min-width: 18px;
padding: 1px 6px;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--text-muted);
background: rgba(255, 255, 255, 0.05);
border-radius: 9999px;
text-align: center;
}
.fleet-showroom-filter.is-active .fleet-showroom-filter-count {
color: var(--accent-gold, #D4B878);
background: rgba(212, 184, 120, 0.18);
}
/* Stage — large image (left) + info panel (right) */
.fleet-showroom-stage {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 32px;
}
@media (min-width: 900px) {
.fleet-showroom-stage {
grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
gap: 48px;
align-items: center;
}
}
/* Image side — large vehicle photo on a dark gradient stage */
.fleet-showroom-image {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
background:
radial-gradient(ellipse 70% 50% at 50% 70%, rgba(212, 184, 120, 0.10) 0%, transparent 70%),
radial-gradient(ellipse 100% 100% at 50% 0%, rgba(64, 96, 168, 0.10) 0%, transparent 70%),
var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg, 16px);
overflow: hidden;
}
.fleet-showroom-image-placeholder { display: block; width: 100%; height: 100%; }
/* Soft gold aura behind the vehicle — pulses subtly without
stealing attention. */
.fleet-showroom-image-aura {
position: absolute;
inset: 20% 10% 30% 10%;
background: radial-gradient(ellipse, rgba(212, 184, 120, 0.18) 0%, transparent 70%);
filter: blur(28px);
pointer-events: none;
opacity: 0.85;
animation: fleet-aura-breathe 8s ease-in-out infinite;
}
@keyframes fleet-aura-breathe {
0%, 100% { opacity: 0.85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
.fleet-showroom-image-frame {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(20px, 4%, 48px);
opacity: 1;
transform: scale(1);
transition: opacity 420ms cubic-bezier(0.2, 0, 0.2, 1),
transform 520ms cubic-bezier(0.2, 0, 0.2, 1);
}
.fleet-showroom-image-frame.is-entering {
opacity: 0;
transform: scale(0.98);
}
.fleet-showroom-image-photo {
position: relative;
z-index: 1;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.4));
}
.fleet-showroom-image-glyph {
position: relative;
z-index: 1;
font-family: var(--font-serif);
font-size: clamp(64px, 12vw, 120px);
color: rgba(212, 184, 120, 0.55);
opacity: 0.7;
}
.fleet-showroom-image-floor {
position: absolute;
left: 12%;
right: 12%;
bottom: 8%;
height: 14px;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
filter: blur(8px);
pointer-events: none;
}
.fleet-showroom-image-badge {
position: absolute;
top: 18px;
left: 18px;
z-index: 2;
padding: 4px 12px;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0D1528;
background: var(--accent-gold, #D4B878);
border-radius: 9999px;
}
/* Info panel — vehicle name, tagline, chips, specs, dual CTA */
.fleet-showroom-info-inner {
opacity: 0;
transform: translateY(8px);
transition: opacity 420ms cubic-bezier(0.2, 0, 0.2, 1) 60ms,
transform 480ms cubic-bezier(0.2, 0, 0.2, 1) 60ms;
}
.fleet-showroom-info-inner.is-entered {
opacity: 1;
transform: translateY(0);
}
.fleet-showroom-info-tier {
font-size: 11px;
letter-spacing: 0.16em;
color: var(--accent-gold, #D4B878);
margin: 0 0 8px;
}
.fleet-showroom-info-name {
font-family: var(--font-serif);
font-size: clamp(26px, 3vw, 34px);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.01em;
color: var(--text-primary);
margin: 0 0 10px;
}
.fleet-showroom-info-tagline {
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0 0 18px;
max-width: 42ch;
}
/* Chips — small rounded pills with "best for" use cases */
.fleet-showroom-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 22px;
}
.fleet-showroom-chip {
display: inline-flex;
align-items: center;
padding: 4px 11px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(212, 184, 120, 0.22);
border-radius: 9999px;
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
}
/* Spec rows — icon + label + value, vertical stack */
.fleet-showroom-specs {
list-style: none;
margin: 0 0 24px;
padding: 18px 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.fleet-showroom-spec {
display: grid;
grid-template-columns: 22px max-content 1fr;
column-gap: 14px;
align-items: center;
padding: 8px 0;
}
.fleet-showroom-spec + .fleet-showroom-spec {
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.fleet-showroom-spec-ico {
width: 18px;
height: 18px;
color: var(--accent-gold, #D4B878);
opacity: 0.85;
justify-self: center;
}
.fleet-showroom-spec-label {
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
}
.fleet-showroom-spec-value {
font-size: 14px;
color: var(--text-primary);
text-align: right;
}
.fleet-showroom-info-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.fleet-showroom-info-cta .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 540px) {
.fleet-showroom-info-cta .btn { width: 100%; }
}
/* Thumbnail rail — horizontal scroll on small screens, full row
on desktop. Active thumb gets a gold border + lifted state. */
.fleet-showroom-rail-wrap {
position: relative;
margin: 0 calc(-1 * var(--gutter));
padding: 0 var(--gutter);
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: rgba(212, 184, 120, 0.35) transparent;
-webkit-overflow-scrolling: touch;
}
.fleet-showroom-rail-wrap::-webkit-scrollbar { height: 4px; }
.fleet-showroom-rail-wrap::-webkit-scrollbar-thumb {
background: rgba(212, 184, 120, 0.35);
border-radius: 2px;
}
.fleet-showroom-rail {
display: flex;
gap: 12px;
padding: 4px 2px 14px;
min-width: min-content;
}
.fleet-showroom-thumb {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: stretch;
width: 156px;
padding: 0;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md, 12px);
cursor: pointer;
overflow: hidden;
transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.fleet-showroom-thumb:hover {
border-color: rgba(212, 184, 120, 0.45);
transform: translateY(-2px);
}
.fleet-showroom-thumb:focus-visible {
outline: none;
box-shadow: 0 0 0 2px rgba(212, 184, 120, 0.55);
}
.fleet-showroom-thumb.is-active {
border-color: var(--accent-gold, #D4B878);
background: rgba(212, 184, 120, 0.06);
box-shadow: 0 0 0 1px var(--accent-gold, #D4B878);
}
.fleet-showroom-thumb-frame {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 86px;
background:
radial-gradient(ellipse 70% 60% at 50% 70%, rgba(212, 184, 120, 0.10) 0%, transparent 70%),
var(--surface-page);
overflow: hidden;
}
.fleet-showroom-thumb-img {
max-width: 86%;
max-height: 86%;
object-fit: contain;
}
.fleet-showroom-thumb-glyph {
font-family: var(--font-serif);
font-size: 32px;
color: rgba(212, 184, 120, 0.55);
}
.fleet-showroom-thumb-meta {
display: block;
padding: 10px 12px 12px;
text-align: left;
}
.fleet-showroom-thumb-name {
display: block;
font-family: var(--font-serif);
font-size: 13.5px;
font-weight: 500;
color: var(--text-primary);
line-height: 1.2;
}
.fleet-showroom-thumb-class {
display: block;
margin-top: 2px;
font-size: 11.5px;
color: var(--text-muted);
}
/* Concierge panel below the rail */
.fleet-showroom-concierge {
margin-top: 36px;
padding: clamp(20px, 2.4vw, 28px);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg, 16px);
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 720px) {
.fleet-showroom-concierge {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
.fleet-showroom-concierge-copy { flex: 1 1 auto; }
.fleet-showroom-concierge-h {
margin: 0 0 4px;
font-family: var(--font-serif);
font-size: 17px;
font-weight: 500;
color: var(--text-primary);
}
.fleet-showroom-concierge-desc {
margin: 0;
font-size: 13.5px;
line-height: 1.55;
color: var(--text-muted);
max-width: 60ch;
}
.fleet-showroom-concierge-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
flex-shrink: 0;
}
@media (max-width: 540px) {
.fleet-showroom-concierge-cta .btn { width: 100%; justify-content: center; }
}
.fleet-showroom-empty {
padding: 36px 24px;
color: var(--text-muted);
font-size: 14px;
text-align: center;
}
/* Reduced-motion: kill the aura breathe + cross-fade transforms */
@media (prefers-reduced-motion: reduce) {
.fleet-showroom-image-aura { animation: none; }
.fleet-showroom-image-frame,
.fleet-showroom-image-frame.is-entering,
.fleet-showroom-info-inner,
.fleet-showroom-info-inner.is-entered {
transition: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* Vehicle cards — richer specs + dual CTA, used inside #fleetGrid
alongside the existing .fleet-tier / .fleet-catalog-grid layout. */
.fleet-v-card { position: relative; }
.fleet-v-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
padding: 4px 10px;
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0D1528;
background: var(--accent-gold, #D4B878);
border-radius: 9999px;
}
.fleet-v-specs {
margin: 14px 0 18px;
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 14px;
row-gap: 6px;
font-size: 13.5px;
line-height: 1.4;
}
.fleet-v-specs dt {
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
padding-top: 2px;
}
.fleet-v-specs dd {
margin: 0;
color: var(--text-primary);
}
.fleet-v-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.fleet-v-cta-primary,
.fleet-v-cta-secondary {
flex: 1 1 auto;
justify-content: center;
font-size: 13.5px;
}
@media (max-width: 540px) {
.fleet-v-actions .btn { width: 100%; }
}
/* Compare the Fleet — desktop table, mobile stacked cards */
.fleet-compare-table-wrap {
overflow-x: auto;
margin-top: 28px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg, 16px);
background: var(--surface-elevated);
}
.fleet-compare-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: var(--text-primary);
}
.fleet-compare-table th,
.fleet-compare-table td {
padding: 14px 18px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--border-subtle);
}
.fleet-compare-table thead th {
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-gold, #D4B878);
background: rgba(255, 255, 255, 0.02);
font-weight: 500;
}
.fleet-compare-table tbody tr:last-child th,
.fleet-compare-table tbody tr:last-child td { border-bottom: none; }
.fleet-compare-table tbody th {
font-weight: 500;
white-space: nowrap;
}
.fleet-compare-vehicle {
display: block;
font-family: var(--font-serif);
font-size: 15px;
color: var(--text-primary);
margin-bottom: 2px;
}
.fleet-compare-class {
display: block;
font-size: 12px;
color: var(--text-muted);
}
@media (max-width: 800px) {
.fleet-compare-table thead { display: none; }
.fleet-compare-table,
.fleet-compare-table tbody,
.fleet-compare-table tr { display: block; }
.fleet-compare-table tr {
padding: 14px 18px;
border-bottom: 1px solid var(--border-subtle);
}
.fleet-compare-table tr:last-child { border-bottom: none; }
.fleet-compare-table th[scope="row"] {
display: block;
padding: 0 0 8px;
border-bottom: 1px dashed var(--border-subtle);
margin-bottom: 8px;
}
.fleet-compare-table td {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 4px 0;
border-bottom: none;
font-size: 13px;
}
.fleet-compare-table td::before {
content: attr(data-label);
font-family: var(--font-mono, 'IBM Plex Mono', monospace);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-gold, #D4B878);
flex-shrink: 0;
}
}
/* Best Vehicle by Occasion — 5 cards + 1 CTA card */
.fleet-occasion-grid { margin-top: 28px; }
.fleet-occasion-card {
display: flex;
flex-direction: column;
padding: clamp(20px, 2.4vw, 28px);
}
.fleet-occasion-h {
font-family: var(--font-serif);
font-size: 19px;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 8px;
}
.fleet-occasion-rec {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 8px;
line-height: 1.5;
}
.fleet-occasion-rec .mono {
display: inline-block;
margin-right: 6px;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-gold, #D4B878);
}
.fleet-occasion-desc {
font-size: 13.5px;
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
flex: 1 1 auto;
}
.fleet-occasion-card--cta {
background: rgba(212, 184, 120, 0.04);
border-color: rgba(212, 184, 120, 0.28);
}
.fleet-occasion-cta {
margin-top: 14px;
align-self: flex-start;
}
@media (max-width: 540px) {
.fleet-occasion-cta { width: 100%; justify-content: center; }
}
/* Every Vehicle — One Luna Standard */
.fleet-standard-list {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.fleet-standard-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 18px;
background: var(--surface-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md, 12px);
}
.fleet-standard-ico {
flex-shrink: 0;
width: 22px;
height: 22px;
color: var(--accent-gold, #D4B878);
}
.fleet-standard-h {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: var(--text-primary);
}
/* Fleet FAQ — reuses the .faq-list pattern */
.fleet-faq .faq-list { margin-top: 28px; }
.fleet-faq-foot {
margin: 28px 0 0;
text-align: center;
font-size: 13.5px;
color: var(--text-muted);
font-style: italic;
}
/* ============================================================
Luna dropdown — shared custom listbox over a native