/* ===== colors_and_type.css ===== */
/* =========================================================================
Famous Drive — Design Tokens
Editorial luxury · obsidian + champagne · Bodoni Moda + Jost
========================================================================= */
/* Guard: decorative hero glows must never cause horizontal scroll on any device.
`clip` (not `hidden`) avoids creating a scroll container, so the sticky nav still works. */
html, body { overflow-x: clip; }
/* Perf: kill the will-change "layer explosion" (was ~146 promoted GPU layers on
the homepage → constant recompositing = the scroll lag + flicker). will-change
is only a compositor HINT, so removing it is visually identical; animations
still run (the browser promotes actively-animating elements on its own). */
*, *::before, *::after { will-change: auto !important; }
/* A11y: ≥44px tap targets on phones/tablets for the primary CONTROLS — hamburger,
buttons, language switcher, and form fields. Intentionally NOT applied to text/
footer links (forcing those to 44px would bloat the layout) or the booking bar. */
@media (max-width: 900px) {
.nav-burger { min-width: 44px; min-height: 44px; }
.fd-lang__btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
.btn, a.btn, button.btn, .lux-btn, .ac-btn { min-height: 44px; }
.formcard input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.formcard select, .formcard textarea,
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea { min-height: 44px; }
}
/* Self-hosted brand fonts (was a Google Fonts @import — that's render-blocking,
network-dependent, and showed a fallback flash on slow/first loads, making the
site look different across machines). These load instantly from our own server. */
@font-face{font-family:'Cormorant';font-style:italic;font-weight:300;font-display:swap;src:url('assets/fonts/cormorant-300-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/cormorant-300.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/cormorant-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/cormorant-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/cormorant-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200;font-display:swap;src:url('assets/fonts/outfit-200.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('assets/fonts/outfit-300.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/outfit-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/outfit-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/outfit-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/outfit-700.woff2') format('woff2')}
:root {
/* ---------- Palette (raw) ---------- */
--obsidian: #0A0908; /* primary bg, warm-shifted black */
--charcoal: #14110F; /* elevated surface */
--smoke: #1F1B17; /* 2nd elevation */
--ash: #2A2520; /* hovers on dark surfaces */
--bone: #FFFFFF; /* primary fg on dark, "white" */
--ivory: #F4EFE6; /* light surface */
--parchment: #DCD3BE; /* muted fg on dark */
--champagne: #C8A86B; /* singular accent */
--champagne-soft: #B79363; /* hovers, secondary */
--antique-brass: #8C6E3D; /* deep tone, fg on bone */
--lead: #5C5650; /* disabled */
--verdigris: #5C7A6E; /* success */
--ember: #B0593B; /* alert */
/* ---------- Alphas of bone (workhorse on dark) ---------- */
--bone-04: rgba(234, 227, 210, 0.04);
--bone-08: rgba(234, 227, 210, 0.08);
--bone-10: rgba(234, 227, 210, 0.10);
--bone-16: rgba(234, 227, 210, 0.16);
--bone-24: rgba(234, 227, 210, 0.24);
--bone-40: rgba(234, 227, 210, 0.78);
--bone-60: rgba(234, 227, 210, 0.60);
--bone-72: rgba(234, 227, 210, 0.72);
--champagne-16: rgba(200, 168, 107, 0.16);
--champagne-40: rgba(200, 168, 107, 0.40);
/* ---------- Semantic colors ---------- */
--bg: var(--obsidian);
--bg-elevated: var(--charcoal);
--bg-overlay: rgba(10, 9, 8, 0.72);
--surface-glass: rgba(20, 17, 15, 0.60);
--surface-light: var(--ivory);
--fg: var(--bone);
--fg-muted: var(--bone-60);
--fg-subtle: var(--bone-40);
--fg-on-light: var(--obsidian);
--fg-on-light-muted: var(--antique-brass);
--accent: var(--champagne);
--accent-press: var(--champagne-soft);
--hairline: var(--bone-10);
--hairline-strong: var(--bone-24);
--hairline-light: rgba(140, 110, 61, 0.18);
--success: var(--verdigris);
--alert: var(--ember);
--disabled: var(--lead);
/* ---------- Type families ---------- */
/* Light serif headings (Cormorant) + light sans body (Outfit). */
--font-display: 'Cormorant', Georgia, serif;
--font-serif: 'Cormorant', Georgia, serif;
--font-sans: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-mono: 'Outfit', ui-monospace, SFMono-Regular, monospace;
/* aliases for the typography spec */
--serif: var(--font-serif);
--sans: var(--font-sans);
/* ---------- Type scale ---------- */
--fs-hero: 144px;
--fs-h1: 96px;
--fs-h2: 56px;
--fs-h3: 32px;
--fs-h4: 24px;
--fs-body-l: 20px;
--fs-body: 16px;
--fs-caption: 13px;
--fs-eyebrow: 12px;
--fs-micro: 10px;
--lh-display: 0.96; /* @kind font */
--lh-tight: 1.08; /* @kind font */
--lh-snug: 1.25; /* @kind font */
--lh-body: 1.55; /* @kind font */
--lh-loose: 1.7; /* @kind font */
--tracking-eyebrow: 0.18em; /* @kind font */
--tracking-nav: 0.14em; /* @kind font */
--tracking-tight: -0.02em; /* @kind font */
--tracking-display: -0.025em; /* @kind font */
/* ---------- Spacing (8px base) ---------- */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
--s-11: 192px;
--s-12: 256px;
/* ---------- Radii ---------- */
--r-sharp: 0px;
--r-soft: 2px;
--r-pill: 999px;
/* ---------- Shadows (light surfaces only) ---------- */
--shadow-light-1: 0 1px 2px rgba(20,17,15,0.04), 0 12px 32px rgba(20,17,15,0.06);
--shadow-light-2: 0 1px 2px rgba(20,17,15,0.06), 0 24px 64px rgba(20,17,15,0.10);
/* On dark, depth = hairlines, not shadow */
/* ---------- Motion ---------- */
--ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
--ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
--d-fast: 150ms; /* @kind other */
--d-base: 300ms; /* @kind other */
--d-slow: 700ms; /* @kind other */
--d-reveal: 1200ms; /* @kind other */
/* ---------- Grid ---------- */
--gutter-desktop: 96px; /* @kind spacing */
--gutter-tablet: 48px; /* @kind spacing */
--gutter-mobile: 24px; /* @kind spacing */
--edge-desktop: 64px; /* @kind spacing */
--edge-mobile: 24px; /* @kind spacing */
/* ---------- Glass ---------- */
--glass-blur: blur(8px) saturate(140%); /* @kind other */
--glass-bg: rgba(20, 17, 15, 0.60); /* @kind color */
--glass-border: 1px solid rgba(234, 227, 210, 0.08); /* @kind other */
}
/* =========================================================================
Base
========================================================================= */
html, body {
background: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'ss01', 'cv11', 'kern';
}
::selection { background: var(--champagne); color: var(--obsidian); }
/* A11y (WCAG 1.4.1 / link-in-text-block): inline prose links must be distinguishable
by more than colour — underline gold links that sit inside body text. */
p a[style*="gold"], li a[style*="gold"], .doc a[style*="gold"], .lede a[style*="gold"] {
text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px; text-decoration-color: rgba(217, 174, 116, 0.55);
}
/* =========================================================================
Semantic typography classes
========================================================================= */
.t-hero {
font-family: var(--font-display);
font-weight: 300;
font-size: var(--fs-hero);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.t-h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h1);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
text-wrap: balance;
}
.t-h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h2);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
text-wrap: balance;
}
.t-h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h3);
line-height: var(--lh-snug);
letter-spacing: var(--tracking-tight);
}
.t-h4 {
font-family: var(--font-display);
font-weight: 400;
font-size: var(--fs-h4);
line-height: var(--lh-snug);
letter-spacing: -0.01em;
}
.t-eyebrow {
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-eyebrow);
line-height: 1;
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--fg-muted);
}
.t-eyebrow--accent { color: var(--accent); }
.t-body-l {
font-family: var(--font-sans);
font-weight: 300;
font-size: var(--fs-body-l);
line-height: 1.5;
color: var(--fg-muted);
}
.t-body {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--fg);
}
.t-caption {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-caption);
line-height: 1.4;
color: var(--fg-muted);
}
.t-nav {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--fs-caption);
letter-spacing: var(--tracking-nav);
text-transform: uppercase;
color: var(--fg);
}
.t-wordmark {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
font-feature-settings: 'smcp';
}
.t-italic {
font-style: italic;
font-family: var(--font-display);
}
/* Tabular numerals (timetables, fares, plates) */
.t-tabular {
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum';
}
/* =========================================================================
Element defaults — opt-in via .prose
========================================================================= */
.prose h1 { @extend .t-h1; }
.prose h2 { @extend .t-h2; }
.prose h3 { @extend .t-h3; }
.prose p { @extend .t-body; max-width: 64ch; }
/* =========================================================================
Utility primitives
========================================================================= */
.hairline { border-bottom: 1px solid var(--hairline); }
.hairline-top { border-top: 1px solid var(--hairline); }
.glass {
background: var(--glass-bg);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: var(--glass-border);
}
/* Brand wordmark rendered as an IMAGE in the nav — pixel-identical across OS. Universal (homepage React nav doesn't load page-unify.css). */
.nav-mark__wm { height: 13px; width: auto; display: inline-block; vertical-align: middle; margin-left: 0.55em; }
.nav .mark::after, .nav-mark::after { content: none !important; }
/* ── Editorial interlude — full-bleed photographic pause (Jul 2026) ───────── */
.fd-interlude{position:relative;min-height:54vh;background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(250,241,221,.13);padding:0;overflow:hidden;}
.fd-interlude::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,30,18,.44),rgba(42,30,18,.18) 50%,rgba(42,30,18,.5));z-index:1;}
.fd-interlude__inner{position:relative;text-align:center;padding:72px 28px;z-index:2;}
.fd-interlude__inner .eyebrow{margin-bottom:14px;}
.fd-interlude__inner h2{font-family:'Cormorant',Georgia,serif;font-style:italic;font-weight:400;color:#FAF1DD;font-size:clamp(1.7rem,3.4vw,2.6rem);margin:0;}
@media(max-width:900px){.fd-interlude{background-attachment:scroll;min-height:40vh;}}
/* interlude v2 — JS-driven parallax drift + caption reveal (fd-interlude.js).
The script moves the image onto a .fd-interlude__bg layer so it can be
transformed; without JS the rules above stand as the full fallback. */
.fd-interlude.fdi-js{background-image:none !important;background-attachment:scroll;}
.fd-interlude__bg{position:absolute;left:0;right:0;top:-10%;bottom:-10%;background-size:cover;background-position:center;will-change:transform;z-index:0;}
.fd-interlude.fdi-js .fd-interlude__inner .eyebrow,
.fd-interlude.fdi-js .fd-interlude__inner h2{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1);}
.fd-interlude.fdi-js .fd-interlude__inner h2{transition-delay:.18s;}
.fd-interlude.fdi-in .fd-interlude__inner .eyebrow,
.fd-interlude.fdi-in .fd-interlude__inner h2{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
.fd-interlude.fdi-js .fd-interlude__inner .eyebrow,.fd-interlude.fdi-js .fd-interlude__inner h2{opacity:1;transform:none;transition:none;}
.fd-interlude__bg{transform:none !important;}
}
/* ── Image-led editorial duet (Jul 2026) — the Aman/Rolls pattern: the photo
is the sentence, the text is the footnote. Large sharp image + short copy. ── */
.fd-duet{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;margin-top:2.2rem;}
.fd-duet__fig{position:relative;margin:0;}
.fd-duet__fig img{width:100%;display:block;border-radius:4px;border:1px solid rgba(217,174,116,.28);box-shadow:0 24px 60px -28px rgba(0,0,0,.7);aspect-ratio:4/3;object-fit:cover;}
.fd-duet__fig figcaption{margin-top:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#D9AE74;opacity:.85;}
.fd-duet__copy p{max-width:34rem;}
.fd-duet__copy p+p{margin-top:.9em;}
@media(max-width:860px){.fd-duet{grid-template-columns:1fr;gap:20px;}.fd-duet__fig{order:-1;}}
/* ── Photo-backed section (Jul 2026) — the image IS the section background,
content floats on top. Owner: framed images read too small. ── */
.fd-photoback{position:relative;overflow:hidden;background-size:cover;background-position:center;padding:110px 0;}
.fd-photoback::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,21,13,.84),rgba(30,21,13,.58) 55%,rgba(30,21,13,.86));}
.fd-photoback>.wrap{position:relative;z-index:2;}
/* Airy statement lines — fewer, longer, never a text wall */
.fd-line{max-width:58rem;font-size:1.12rem;line-height:1.9;}
.fd-line+.fd-line{margin-top:1.1em;}
/* A11y: booking widget + language switcher tap targets (audit Jul 3) */
@media (max-width: 900px) {
.fdb-date-btn, .hbq-sel__btn, .hbq__bar-input, .fdb-input { min-height: 44px; }
.fd-lang__btn { min-width: 44px; min-height: 44px; }
}
/* ── Mobile image swap (AUTO-GENERATED — regenerate when adding band/hero images):
phones get the 760px -sm variant of every band/photoback/hero background.
!important beats the inline style; fd-interlude.js reads COMPUTED style so
its parallax layer inherits the swap. ── */
@media (max-width: 700px){
.fd-interlude[style*="/cabin-cashmere.webp"],
.fd-photoback[style*="/cabin-cashmere.webp"],
.hero-ph[style*="/cabin-cashmere.webp"],
.sp-hero__bg[style*="/cabin-cashmere.webp"],
.lux-hero__bg[style*="/cabin-cashmere.webp"]{background-image:url('assets/editorial/cabin-cashmere-sm.webp') !important;}
.fd-interlude[style*="/euro-boulevard.webp"],
.fd-photoback[style*="/euro-boulevard.webp"],
.hero-ph[style*="/euro-boulevard.webp"],
.sp-hero__bg[style*="/euro-boulevard.webp"],
.lux-hero__bg[style*="/euro-boulevard.webp"]{background-image:url('assets/editorial/euro-boulevard-sm.webp') !important;}
.fd-interlude[style*="/facade-dawn.webp"],
.fd-photoback[style*="/facade-dawn.webp"],
.hero-ph[style*="/facade-dawn.webp"],
.sp-hero__bg[style*="/facade-dawn.webp"],
.lux-hero__bg[style*="/facade-dawn.webp"]{background-image:url('assets/editorial/facade-dawn-sm.webp') !important;}
.fd-interlude[style*="/fifth-flatiron.webp"],
.fd-photoback[style*="/fifth-flatiron.webp"],
.hero-ph[style*="/fifth-flatiron.webp"],
.sp-hero__bg[style*="/fifth-flatiron.webp"],
.lux-hero__bg[style*="/fifth-flatiron.webp"]{background-image:url('assets/editorial/fifth-flatiron-sm.webp') !important;}
.fd-interlude[style*="/gloved-hands.webp"],
.fd-photoback[style*="/gloved-hands.webp"],
.hero-ph[style*="/gloved-hands.webp"],
.sp-hero__bg[style*="/gloved-hands.webp"],
.lux-hero__bg[style*="/gloved-hands.webp"]{background-image:url('assets/editorial/gloved-hands-sm.webp') !important;}
.fd-interlude[style*="/hamptons-dune.webp"],
.fd-photoback[style*="/hamptons-dune.webp"],
.hero-ph[style*="/hamptons-dune.webp"],
.sp-hero__bg[style*="/hamptons-dune.webp"],
.lux-hero__bg[style*="/hamptons-dune.webp"]{background-image:url('assets/editorial/hamptons-dune-sm.webp') !important;}
.fd-interlude[style*="/hotel-brass.webp"],
.fd-photoback[style*="/hotel-brass.webp"],
.hero-ph[style*="/hotel-brass.webp"],
.sp-hero__bg[style*="/hotel-brass.webp"],
.lux-hero__bg[style*="/hotel-brass.webp"]{background-image:url('assets/editorial/hotel-brass-sm.webp') !important;}
.fd-interlude[style*="/jet-dawn.webp"],
.fd-photoback[style*="/jet-dawn.webp"],
.hero-ph[style*="/jet-dawn.webp"],
.sp-hero__bg[style*="/jet-dawn.webp"],
.lux-hero__bg[style*="/jet-dawn.webp"]{background-image:url('assets/editorial/jet-dawn-sm.webp') !important;}
.fd-interlude[style*="/key-leather.webp"],
.fd-photoback[style*="/key-leather.webp"],
.hero-ph[style*="/key-leather.webp"],
.sp-hero__bg[style*="/key-leather.webp"],
.lux-hero__bg[style*="/key-leather.webp"]{background-image:url('assets/editorial/key-leather-sm.webp') !important;}
.fd-interlude[style*="/leather-sharp.webp"],
.fd-photoback[style*="/leather-sharp.webp"],
.hero-ph[style*="/leather-sharp.webp"],
.sp-hero__bg[style*="/leather-sharp.webp"],
.lux-hero__bg[style*="/leather-sharp.webp"]{background-image:url('assets/editorial/leather-sharp-sm.webp') !important;}
.fd-interlude[style*="/maybach-void.webp"],
.fd-photoback[style*="/maybach-void.webp"],
.hero-ph[style*="/maybach-void.webp"],
.sp-hero__bg[style*="/maybach-void.webp"],
.lux-hero__bg[style*="/maybach-void.webp"]{background-image:url('assets/editorial/maybach-void-sm.webp') !important;}
.fd-interlude[style*="/midtown-dusk.webp"],
.fd-photoback[style*="/midtown-dusk.webp"],
.hero-ph[style*="/midtown-dusk.webp"],
.sp-hero__bg[style*="/midtown-dusk.webp"],
.lux-hero__bg[style*="/midtown-dusk.webp"]{background-image:url('assets/editorial/midtown-dusk-sm.webp') !important;}
.fd-interlude[style*="/nyc-dusk.webp"],
.fd-photoback[style*="/nyc-dusk.webp"],
.hero-ph[style*="/nyc-dusk.webp"],
.sp-hero__bg[style*="/nyc-dusk.webp"],
.lux-hero__bg[style*="/nyc-dusk.webp"]{background-image:url('assets/editorial/nyc-dusk-sm.webp') !important;}
.fd-interlude[style*="/park-canyon.webp"],
.fd-photoback[style*="/park-canyon.webp"],
.hero-ph[style*="/park-canyon.webp"],
.sp-hero__bg[style*="/park-canyon.webp"],
.lux-hero__bg[style*="/park-canyon.webp"]{background-image:url('assets/editorial/park-canyon-sm.webp') !important;}
.fd-interlude[style*="/portico-dusk.webp"],
.fd-photoback[style*="/portico-dusk.webp"],
.hero-ph[style*="/portico-dusk.webp"],
.sp-hero__bg[style*="/portico-dusk.webp"],
.lux-hero__bg[style*="/portico-dusk.webp"]{background-image:url('assets/editorial/portico-dusk-sm.webp') !important;}
.fd-interlude[style*="/quilted-leather.webp"],
.fd-photoback[style*="/quilted-leather.webp"],
.hero-ph[style*="/quilted-leather.webp"],
.sp-hero__bg[style*="/quilted-leather.webp"],
.lux-hero__bg[style*="/quilted-leather.webp"]{background-image:url('assets/editorial/quilted-leather-sm.webp') !important;}
.fd-interlude[style*="/silhouette.webp"],
.fd-photoback[style*="/silhouette.webp"],
.hero-ph[style*="/silhouette.webp"],
.sp-hero__bg[style*="/silhouette.webp"],
.lux-hero__bg[style*="/silhouette.webp"]{background-image:url('assets/editorial/silhouette-sm.webp') !important;}
.fd-interlude[style*="/terminal-arrival.webp"],
.fd-photoback[style*="/terminal-arrival.webp"],
.hero-ph[style*="/terminal-arrival.webp"],
.sp-hero__bg[style*="/terminal-arrival.webp"],
.lux-hero__bg[style*="/terminal-arrival.webp"]{background-image:url('assets/editorial/terminal-arrival-sm.webp') !important;}
.fd-interlude[style*="/velvet-rope.webp"],
.fd-photoback[style*="/velvet-rope.webp"],
.hero-ph[style*="/velvet-rope.webp"],
.sp-hero__bg[style*="/velvet-rope.webp"],
.lux-hero__bg[style*="/velvet-rope.webp"]{background-image:url('assets/editorial/velvet-rope-sm.webp') !important;}
.fd-interlude[style*="/watch-wheel.webp"],
.fd-photoback[style*="/watch-wheel.webp"],
.hero-ph[style*="/watch-wheel.webp"],
.sp-hero__bg[style*="/watch-wheel.webp"],
.lux-hero__bg[style*="/watch-wheel.webp"]{background-image:url('assets/editorial/watch-wheel-sm.webp') !important;}
.fd-interlude[style*="/about-brownstone.webp"],
.fd-photoback[style*="/about-brownstone.webp"],
.hero-ph[style*="/about-brownstone.webp"],
.sp-hero__bg[style*="/about-brownstone.webp"],
.lux-hero__bg[style*="/about-brownstone.webp"]{background-image:url('assets/img/about-brownstone-sm.webp') !important;}
.fd-interlude[style*="/about-heritage.webp"],
.fd-photoback[style*="/about-heritage.webp"],
.hero-ph[style*="/about-heritage.webp"],
.sp-hero__bg[style*="/about-heritage.webp"],
.lux-hero__bg[style*="/about-heritage.webp"]{background-image:url('assets/img/about-heritage-sm.webp') !important;}
.fd-interlude[style*="/air-globe.webp"],
.fd-photoback[style*="/air-globe.webp"],
.hero-ph[style*="/air-globe.webp"],
.sp-hero__bg[style*="/air-globe.webp"],
.lux-hero__bg[style*="/air-globe.webp"]{background-image:url('assets/img/air-globe-sm.webp') !important;}
.fd-interlude[style*="/chauffeur-arrival.webp"],
.fd-photoback[style*="/chauffeur-arrival.webp"],
.hero-ph[style*="/chauffeur-arrival.webp"],
.sp-hero__bg[style*="/chauffeur-arrival.webp"],
.lux-hero__bg[style*="/chauffeur-arrival.webp"]{background-image:url('assets/img/chauffeur-arrival-sm.webp') !important;}
.fd-interlude[style*="/contact-desk.webp"],
.fd-photoback[style*="/contact-desk.webp"],
.hero-ph[style*="/contact-desk.webp"],
.sp-hero__bg[style*="/contact-desk.webp"],
.lux-hero__bg[style*="/contact-desk.webp"]{background-image:url('assets/img/contact-desk-sm.webp') !important;}
.fd-interlude[style*="/events-redcarpet.webp"],
.fd-photoback[style*="/events-redcarpet.webp"],
.hero-ph[style*="/events-redcarpet.webp"],
.sp-hero__bg[style*="/events-redcarpet.webp"],
.lux-hero__bg[style*="/events-redcarpet.webp"]{background-image:url('assets/img/events-redcarpet-sm.webp') !important;}
.fd-interlude[style*="/executive-aviation.webp"],
.fd-photoback[style*="/executive-aviation.webp"],
.hero-ph[style*="/executive-aviation.webp"],
.sp-hero__bg[style*="/executive-aviation.webp"],
.lux-hero__bg[style*="/executive-aviation.webp"]{background-image:url('assets/img/executive-aviation-sm.webp') !important;}
.fd-interlude[style*="/fleet-jet-sprinter.webp"],
.fd-photoback[style*="/fleet-jet-sprinter.webp"],
.hero-ph[style*="/fleet-jet-sprinter.webp"],
.sp-hero__bg[style*="/fleet-jet-sprinter.webp"],
.lux-hero__bg[style*="/fleet-jet-sprinter.webp"]{background-image:url('assets/img/fleet-jet-sprinter-sm.webp') !important;}
.fd-interlude[style*="/fleet-limo-sprinter.webp"],
.fd-photoback[style*="/fleet-limo-sprinter.webp"],
.hero-ph[style*="/fleet-limo-sprinter.webp"],
.sp-hero__bg[style*="/fleet-limo-sprinter.webp"],
.lux-hero__bg[style*="/fleet-limo-sprinter.webp"]{background-image:url('assets/img/fleet-limo-sprinter-sm.webp') !important;}
.fd-interlude[style*="/fleet-mini-coach.webp"],
.fd-photoback[style*="/fleet-mini-coach.webp"],
.hero-ph[style*="/fleet-mini-coach.webp"],
.sp-hero__bg[style*="/fleet-mini-coach.webp"],
.lux-hero__bg[style*="/fleet-mini-coach.webp"]{background-image:url('assets/img/fleet-mini-coach-sm.webp') !important;}
.fd-interlude[style*="/hero-airport-curb.webp"],
.fd-photoback[style*="/hero-airport-curb.webp"],
.hero-ph[style*="/hero-airport-curb.webp"],
.sp-hero__bg[style*="/hero-airport-curb.webp"],
.lux-hero__bg[style*="/hero-airport-curb.webp"]{background-image:url('assets/img/hero-airport-curb-sm.webp') !important;}
.fd-interlude[style*="/hero-cruise-pier.webp"],
.fd-photoback[style*="/hero-cruise-pier.webp"],
.hero-ph[style*="/hero-cruise-pier.webp"],
.sp-hero__bg[style*="/hero-cruise-pier.webp"],
.lux-hero__bg[style*="/hero-cruise-pier.webp"]{background-image:url('assets/img/hero-cruise-pier-sm.webp') !important;}
.fd-interlude[style*="/hero-desk-w223.webp"],
.fd-photoback[style*="/hero-desk-w223.webp"],
.hero-ph[style*="/hero-desk-w223.webp"],
.sp-hero__bg[style*="/hero-desk-w223.webp"],
.lux-hero__bg[style*="/hero-desk-w223.webp"]{background-image:url('assets/img/hero-desk-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-exec-w223.webp"],
.fd-photoback[style*="/hero-exec-w223.webp"],
.hero-ph[style*="/hero-exec-w223.webp"],
.sp-hero__bg[style*="/hero-exec-w223.webp"],
.lux-hero__bg[style*="/hero-exec-w223.webp"]{background-image:url('assets/img/hero-exec-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-fleet.webp"],
.fd-photoback[style*="/hero-fleet.webp"],
.hero-ph[style*="/hero-fleet.webp"],
.sp-hero__bg[style*="/hero-fleet.webp"],
.lux-hero__bg[style*="/hero-fleet.webp"]{background-image:url('assets/img/hero-fleet-sm.webp') !important;}
.fd-interlude[style*="/hero-hotel-w223.webp"],
.fd-photoback[style*="/hero-hotel-w223.webp"],
.hero-ph[style*="/hero-hotel-w223.webp"],
.sp-hero__bg[style*="/hero-hotel-w223.webp"],
.lux-hero__bg[style*="/hero-hotel-w223.webp"]{background-image:url('assets/img/hero-hotel-w223-sm.webp') !important;}
.fd-interlude[style*="/hero-lux-cullinan.webp"],
.fd-photoback[style*="/hero-lux-cullinan.webp"],
.hero-ph[style*="/hero-lux-cullinan.webp"],
.sp-hero__bg[style*="/hero-lux-cullinan.webp"],
.lux-hero__bg[style*="/hero-lux-cullinan.webp"]{background-image:url('assets/img/hero-lux-cullinan-sm.webp') !important;}
.fd-interlude[style*="/hero-nyc.webp"],
.fd-photoback[style*="/hero-nyc.webp"],
.hero-ph[style*="/hero-nyc.webp"],
.sp-hero__bg[style*="/hero-nyc.webp"],
.lux-hero__bg[style*="/hero-nyc.webp"]{background-image:url('assets/img/hero-nyc-sm.webp') !important;}
.fd-interlude[style*="/interior-exec.webp"],
.fd-photoback[style*="/interior-exec.webp"],
.hero-ph[style*="/interior-exec.webp"],
.sp-hero__bg[style*="/interior-exec.webp"],
.lux-hero__bg[style*="/interior-exec.webp"]{background-image:url('assets/img/interior-exec-sm.webp') !important;}
.fd-interlude[style*="/interior-limo.webp"],
.fd-photoback[style*="/interior-limo.webp"],
.hero-ph[style*="/interior-limo.webp"],
.sp-hero__bg[style*="/interior-limo.webp"],
.lux-hero__bg[style*="/interior-limo.webp"]{background-image:url('assets/img/interior-limo-sm.webp') !important;}
.fd-interlude[style*="/lux-cullinan-void.webp"],
.fd-photoback[style*="/lux-cullinan-void.webp"],
.hero-ph[style*="/lux-cullinan-void.webp"],
.sp-hero__bg[style*="/lux-cullinan-void.webp"],
.lux-hero__bg[style*="/lux-cullinan-void.webp"]{background-image:url('assets/img/lux-cullinan-void-sm.webp') !important;}
.fd-interlude[style*="/lux-exotic.webp"],
.fd-photoback[style*="/lux-exotic.webp"],
.hero-ph[style*="/lux-exotic.webp"],
.sp-hero__bg[style*="/lux-exotic.webp"],
.lux-hero__bg[style*="/lux-exotic.webp"]{background-image:url('assets/img/lux-exotic-sm.webp') !important;}
.fd-interlude[style*="/moment-airport.webp"],
.fd-photoback[style*="/moment-airport.webp"],
.hero-ph[style*="/moment-airport.webp"],
.sp-hero__bg[style*="/moment-airport.webp"],
.lux-hero__bg[style*="/moment-airport.webp"]{background-image:url('assets/img/moment-airport-sm.webp') !important;}
.fd-interlude[style*="/moment-charters.webp"],
.fd-photoback[style*="/moment-charters.webp"],
.hero-ph[style*="/moment-charters.webp"],
.sp-hero__bg[style*="/moment-charters.webp"],
.lux-hero__bg[style*="/moment-charters.webp"]{background-image:url('assets/img/moment-charters-sm.webp') !important;}
.fd-interlude[style*="/moment-events.webp"],
.fd-photoback[style*="/moment-events.webp"],
.hero-ph[style*="/moment-events.webp"],
.sp-hero__bg[style*="/moment-events.webp"],
.lux-hero__bg[style*="/moment-events.webp"]{background-image:url('assets/img/moment-events-sm.webp') !important;}
.fd-interlude[style*="/real-bmw-7.webp"],
.fd-photoback[style*="/real-bmw-7.webp"],
.hero-ph[style*="/real-bmw-7.webp"],
.sp-hero__bg[style*="/real-bmw-7.webp"],
.lux-hero__bg[style*="/real-bmw-7.webp"]{background-image:url('assets/img/real-bmw-7-sm.webp') !important;}
.fd-interlude[style*="/real-coach.webp"],
.fd-photoback[style*="/real-coach.webp"],
.hero-ph[style*="/real-coach.webp"],
.sp-hero__bg[style*="/real-coach.webp"],
.lux-hero__bg[style*="/real-coach.webp"]{background-image:url('assets/img/real-coach-sm.webp') !important;}
.fd-interlude[style*="/real-escalade.webp"],
.fd-photoback[style*="/real-escalade.webp"],
.hero-ph[style*="/real-escalade.webp"],
.sp-hero__bg[style*="/real-escalade.webp"],
.lux-hero__bg[style*="/real-escalade.webp"]{background-image:url('assets/img/real-escalade-sm.webp') !important;}
.fd-interlude[style*="/real-rolls.webp"],
.fd-photoback[style*="/real-rolls.webp"],
.hero-ph[style*="/real-rolls.webp"],
.sp-hero__bg[style*="/real-rolls.webp"],
.lux-hero__bg[style*="/real-rolls.webp"]{background-image:url('assets/img/real-rolls-sm.webp') !important;}
.fd-interlude[style*="/real-s-class.webp"],
.fd-photoback[style*="/real-s-class.webp"],
.hero-ph[style*="/real-s-class.webp"],
.sp-hero__bg[style*="/real-s-class.webp"],
.lux-hero__bg[style*="/real-s-class.webp"]{background-image:url('assets/img/real-s-class-sm.webp') !important;}
.fd-interlude[style*="/real-sprinter.webp"],
.fd-photoback[style*="/real-sprinter.webp"],
.hero-ph[style*="/real-sprinter.webp"],
.sp-hero__bg[style*="/real-sprinter.webp"],
.lux-hero__bg[style*="/real-sprinter.webp"]{background-image:url('assets/img/real-sprinter-sm.webp') !important;}
.fd-interlude[style*="/real-suburban.webp"],
.fd-photoback[style*="/real-suburban.webp"],
.hero-ph[style*="/real-suburban.webp"],
.sp-hero__bg[style*="/real-suburban.webp"],
.lux-hero__bg[style*="/real-suburban.webp"]{background-image:url('assets/img/real-suburban-sm.webp') !important;}
.fd-interlude[style*="/real-tesla.webp"],
.fd-photoback[style*="/real-tesla.webp"],
.hero-ph[style*="/real-tesla.webp"],
.sp-hero__bg[style*="/real-tesla.webp"],
.lux-hero__bg[style*="/real-tesla.webp"]{background-image:url('assets/img/real-tesla-sm.webp') !important;}
.fd-interlude[style*="/real-yukon.webp"],
.fd-photoback[style*="/real-yukon.webp"],
.hero-ph[style*="/real-yukon.webp"],
.sp-hero__bg[style*="/real-yukon.webp"],
.lux-hero__bg[style*="/real-yukon.webp"]{background-image:url('assets/img/real-yukon-sm.webp') !important;}
.fd-interlude[style*="/work-in-transit.webp"],
.fd-photoback[style*="/work-in-transit.webp"],
.hero-ph[style*="/work-in-transit.webp"],
.sp-hero__bg[style*="/work-in-transit.webp"],
.lux-hero__bg[style*="/work-in-transit.webp"]{background-image:url('assets/img/work-in-transit-sm.webp') !important;}
}
/* ===== booking-embed.css ===== */
/* Famous Drive — inline booking widget for static SEO pages. Self-contained. */
/* Match the homepage hero booking bar exactly (max-width 1240px, centered). */
.fdbk-card{ margin:1.6rem auto 0; max-width:1240px; width:100%; }
#book .wrap{ max-width:1296px; } /* let the 1240 booking bar reach full width in the #book section */
.fdbk{ background:rgba(26,19,13,.55); border:1px solid rgba(250,241,221,.14); border-radius:4px; padding:24px; }
.fdbk-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.fdbk-row--3{ grid-template-columns:1fr 1fr 1fr; }
@media(max-width:640px){ .fdbk-row,.fdbk-row--3{ grid-template-columns:1fr; } }
.fdbk label{ display:flex; flex-direction:column; gap:6px; font-family:'Outfit',system-ui,sans-serif;
font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#ECC58F; }
.fdbk input,.fdbk select{ font-family:'EB Garamond',Georgia,serif; font-size:1rem; color:#FFFFFF;
background:#2A1E12; border:1px solid rgba(250,241,221,.18); border-radius:2px; padding:11px 12px; }
.fdbk input::placeholder{ color:rgba(236,213,173,.45); }
.fdbk input:focus,.fdbk select:focus{ outline:none; border-color:#D9AE74; box-shadow:0 0 0 3px rgba(217,174,116,.15); }
.fdbk-btn{ font-family:'Outfit',system-ui,sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
background:#D9AE74; color:#2A1E12; border:0; border-radius:2px; padding:14px 22px; cursor:pointer; width:100%; transition:.2s; }
.fdbk-btn:hover{ filter:brightness(1.06); }
.fdbk-msg{ margin-top:14px; font-family:'EB Garamond',Georgia,serif; font-size:1rem; color:#FFFFFF;
background:rgba(217,174,116,.12); border:1px solid rgba(217,174,116,.32); border-radius:2px; padding:13px 15px; }
.fdbk-msg a{ color:#ECC58F; }
.fdbk-note{ margin-top:10px; font-family:'Outfit',system-ui,sans-serif; font-size:11px; letter-spacing:.04em; color:rgba(236,213,173,.7); }
/* ===== booking-modal.css ===== */
/* booking-modal.css — overlay + form styling for the reservation modal
(Booking.jsx). Self-contained: hardcoded espresso/gold/bone palette with
var() fallbacks so it renders correctly regardless of which global tokens
are present on the host page. */
.booking-scrim {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 5vh 20px 40px;
overflow-y: auto;
background: rgba(14, 11, 8, 0.72);
-webkit-backdrop-filter: blur(8px) saturate(120%);
backdrop-filter: blur(8px) saturate(120%);
animation: fd-bk-fade 0.25s ease;
}
@keyframes fd-bk-fade { from { opacity: 0; } to { opacity: 1; } }
.booking {
position: relative;
width: 100%;
max-width: 660px;
margin: auto 0;
padding: 40px 44px 34px;
border-radius: 20px;
color: var(--bone, #F3E7D2);
background:
radial-gradient(120% 80% at 50% -10%, rgba(217, 174, 116, 0.10), transparent 60%),
linear-gradient(180deg, #221A12 0%, #1B140E 100%);
border: 1px solid rgba(217, 174, 116, 0.22);
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
animation: fd-bk-rise 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fd-bk-rise { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.booking .close {
position: absolute;
top: 18px;
right: 18px;
padding: 8px 14px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #FFFFFF;
background: transparent;
border: 1px solid rgba(217, 174, 116, 0.18);
border-radius: 999px;
cursor: pointer;
transition: color 0.2s, border-color 0.2s;
}
.booking .close:hover { color: var(--gold, #D9AE74); border-color: rgba(217, 174, 116, 0.5); }
.booking .step {
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #FFFFFF;
}
.booking h2 {
margin: 8px 0 0;
font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(26px, 4vw, 34px);
font-weight: 500;
letter-spacing: -0.01em;
color: #FFFFFF;
}
.booking h2 em { font-style: italic; color: var(--gold, #D9AE74); }
/* form rows + fields */
.booking .row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.booking .field { display: flex; flex-direction: column; gap: 8px; }
.booking .field label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #FFFFFF;
}
.booking .field input, .booking .field select, .booking .field textarea {
width: 100%;
padding: 12px 14px;
font-size: 15px;
color: #FFFFFF;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(217, 174, 116, 0.18);
border-radius: 10px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.booking .field input::placeholder, .booking .field textarea::placeholder { color: rgba(255, 255, 255, 0.55); }
.booking .field input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.booking .field input[type=number]::-webkit-inner-spin-button,
.booking .field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.booking .field input:focus {
border-color: var(--gold, #D9AE74);
background: rgba(217, 174, 116, 0.06);
}
.booking .t-tabular { font-variant-numeric: tabular-nums; }
/* footer / actions */
.booking .booking-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid rgba(217, 174, 116, 0.14);
}
.booking .booking-foot .note {
font-size: 12px;
font-style: italic;
color: #FFFFFF;
max-width: 34ch;
line-height: 1.5;
}
.booking .booking-foot .btn { white-space: nowrap; }
@media (max-width: 560px) {
.booking { padding: 34px 22px 26px; border-radius: 16px; }
.booking .row { grid-template-columns: 1fr; }
.booking .booking-foot { flex-direction: column-reverse; align-items: stretch; }
.booking .booking-foot .btn { width: 100%; }
.booking .booking-foot .note { max-width: none; text-align: center; }
}
/* ===== booking-widget.css ===== */
/* booking-widget.css — Step 1 widget dynamics (autocomplete, route chip,
calendar, flight field). Layers on top of the cream .hbq--bar in booking.css.
Popovers use the same dark-saddle + bronze vocabulary as .hbq-sel__menu. */
.fdb .hbq__bar { position: relative; flex-wrap: wrap; }
/* Pickup/Drop-off place fields must never collapse — wrap to a new row instead
(keeps the in-modal planner readable even in a narrow container). */
.fdb .fdb-field { min-width: 220px; flex: 1 1 240px; }
.fdb .hbq__bar-field { position: relative; }
/* ── Place field: icon + input + clear ─────────────────────────────────── */
.fdb-input-row { display: flex; align-items: center; gap: 9px; }
.fdb-input-row .fdb-input { flex: 1 1 auto; min-width: 0; }
.fdb-type-icon {
flex: 0 0 auto;
width: 20px; height: 20px;
color: var(--gold-deep);
display: inline-flex; align-items: center; justify-content: center;
}
.fdb-type-icon svg { width: 18px; height: 18px; }
.fdb-clear {
flex: 0 0 auto;
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(121, 75, 30, 0.08);
border: 1px solid rgba(121, 75, 30, 0.22);
border-radius: 50%;
color: rgba(121, 75, 30, 0.7);
cursor: pointer; padding: 0;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.fdb-clear:hover { background: rgba(121, 75, 30, 0.16); color: #3A1F08; border-color: rgba(121, 75, 30, 0.4); }
/* ── Suggestion dropdown ───────────────────────────────────────────────── */
.fdb-suggest {
position: absolute;
top: calc(100% + 8px); left: -8px; right: -8px;
z-index: 60;
list-style: none; margin: 0; padding: 6px;
background: linear-gradient(180deg, rgba(45,32,22,0.99) 0%, rgba(31,22,15,0.99) 100%);
border: 1px solid rgba(217, 174, 116, 0.4);
border-radius: 12px;
box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 26px 54px -16px rgba(0,0,0,0.62), 0 8px 20px -8px rgba(0,0,0,0.45);
-webkit-backdrop-filter: blur(8px) saturate(150%); backdrop-filter: blur(8px) saturate(150%);
animation: fdb-pop 220ms var(--ease-standard) both;
}
.fdb-suggest::before {
content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent);
opacity: .8;
}
@keyframes fdb-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fdb-sug {
display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px;
padding: 11px 12px; border-radius: 8px; cursor: pointer;
transition: background .16s ease;
}
.fdb-sug + .fdb-sug { margin-top: 1px; }
.fdb-sug.is-hover, .fdb-sug:hover { background: rgba(217, 174, 116, 0.14); }
.fdb-sug__icon {
width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(217, 174, 116, 0.12); color: var(--gold-bright);
}
.fdb-sug__icon svg { width: 17px; height: 17px; }
.fdb-sug__icon--airport { background: rgba(120, 165, 220, 0.16); color: #bcd4f2; }
.fdb-sug__icon--hotel { background: rgba(217, 174, 116, 0.16); color: var(--gold-bright); }
.fdb-sug__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fdb-sug__name {
font-family: var(--font-display); font-size: 16px; letter-spacing: -0.01em; color: #FFFFFF;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fdb-sug__sub {
font-family: var(--font-sans); font-size: 11.5px; color: rgba(236, 213, 173, 0.6);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fdb-sug__code {
font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
color: var(--gold-bright); border: 1px solid rgba(217, 174, 116, 0.4);
border-radius: 4px; padding: 3px 7px;
}
/* Autocomplete polish: bold-match, "use my location", loading + empty states */
.fdb-sug__name strong { color: #FFFFFF; font-weight: 700; }
.fdb-sug--action { cursor: pointer; }
.fdb-sug--action .fdb-sug__name { color: var(--gold-bright); }
.fdb-sug__icon--loc { background: rgba(217, 174, 116, 0.18); color: var(--gold-bright); }
.fdb-sug__name--dim { color: rgba(236, 213, 173, 0.6); font-family: var(--font-sans); font-size: 13.5px; }
.fdb-sug--empty, .fdb-sug--loading { cursor: default; }
.fdb-sug--empty:hover, .fdb-sug--loading:hover { background: transparent; }
.fdb-sug__icon--ld { background: rgba(217, 174, 116, 0.10); }
.fdb-sug__icon--ld::after {
content: ""; width: 15px; height: 15px; border-radius: 50%;
border: 2px solid rgba(217, 174, 116, 0.28); border-top-color: var(--gold-bright);
animation: fdb-spin 0.7s linear infinite;
}
@keyframes fdb-spin { to { transform: rotate(360deg); } }
/* ── Route chip (collapsed pickup→dropoff) ─────────────────────────────── */
.fdb-routechip {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; gap: 9px;
padding: 4px 26px; text-align: left; cursor: pointer;
background: transparent; border: 0; appearance: none;
}
.fdb-routechip__line { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fdb-routechip__pt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fdb-routechip__pt .fdb-type-icon { width: 18px; height: 18px; }
.fdb-routechip__pt .fdb-type-icon svg { width: 16px; height: 16px; }
.fdb-routechip__name {
font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; color: #2A1B0E;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}
.fdb-routechip__arrow { color: var(--gold-deep); font-size: 17px; flex: 0 0 auto; }
.fdb-routechip__edit {
margin-left: 6px; flex: 0 0 auto;
font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold-deep); opacity: 0; transform: translateX(-4px);
transition: opacity .2s ease, transform .2s ease;
}
.fdb-routechip:hover .fdb-routechip__edit { opacity: 1; transform: none; }
/* ── Date button + calendar ────────────────────────────────────────────── */
.fdb-date-btn {
appearance: none; background: transparent; border: 0;
border-bottom: 1px solid rgba(121, 75, 30, 0.28);
font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; color: #2A1B0E;
padding: 5px 0 9px; cursor: pointer; text-align: left; width: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
transition: border-color .25s ease, box-shadow .25s ease;
}
.fdb-date-btn:hover { border-bottom-color: rgba(121, 75, 30, 0.5); }
.fdb-date-btn.is-filled { color: #2A1B0E; }
.fdb-date-ph { color: rgba(121, 75, 30, 0.5); font-style: italic; }
.fdb-clear--inline {
width: 18px; height: 18px; background: transparent; border: 0; color: rgba(121,75,30,0.5);
}
.fdb-clear--inline:hover { color: #3A1F08; background: transparent; }
.fdb-cal {
position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
z-index: 70; width: 286px; padding: 14px;
background: linear-gradient(180deg, rgba(45,32,22,0.99) 0%, rgba(31,22,15,0.99) 100%);
border: 1px solid rgba(217, 174, 116, 0.4); border-radius: 14px;
box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 26px 54px -16px rgba(0,0,0,0.62);
animation: fdb-pop 220ms var(--ease-standard) both;
}
.fdb-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fdb-cal__title { font-family: var(--font-display); font-size: 16px; color: #FFFFFF; letter-spacing: -0.01em; }
.fdb-cal__nav {
width: 30px; height: 30px; border-radius: 50%;
background: rgba(217,174,116,0.1); border: 1px solid rgba(217,174,116,0.28);
color: var(--gold-bright); font-size: 18px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s ease;
}
.fdb-cal__nav:hover:not(:disabled) { background: rgba(217,174,116,0.22); }
.fdb-cal__nav:disabled { opacity: 0.3; cursor: default; }
.fdb-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.fdb-cal__dow span {
text-align: center; font-family: var(--font-sans); font-size: 10px; font-weight: 600;
letter-spacing: 0.1em; color: rgba(236,213,173,0.5);
}
.fdb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fdb-cal__cell {
aspect-ratio: 1; border: 0; background: transparent; border-radius: 8px;
font-family: var(--font-sans); font-size: 13px; color: #F4EFE6; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s ease, color .15s ease;
}
.fdb-cal__cell.is-empty { background: none; cursor: default; }
.fdb-cal__cell:hover:not(:disabled):not(.is-sel) { background: rgba(217,174,116,0.16); color: #FFFFFF; }
.fdb-cal__cell.is-today { box-shadow: inset 0 0 0 1px rgba(217,174,116,0.45); }
.fdb-cal__cell.is-sel { background: var(--gold); color: #2A1B0E; font-weight: 600; }
.fdb-cal__cell.is-past { color: rgba(236,213,173,0.22); cursor: default; }
/* ── CTA ──────────────────────────────────────────────────────────────── */
.fdb-cta { display: inline-flex; align-items: center; gap: 10px; }
.fdb-cta__arrow { transition: transform .25s ease; }
.fdb-cta:hover .fdb-cta__arrow { transform: translateX(3px); }
.fdb-cta.is-waiting { filter: saturate(0.85) brightness(0.99); }
/* ── Flight field (slides open below the bar) ──────────────────────────── */
.fdb-flight-wrap {
width: 100%; max-width: 1240px;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height .42s var(--ease-standard), opacity .32s ease, margin-top .42s ease;
}
.fdb-flight-wrap.is-open { max-height: 130px; opacity: 1; margin-top: -8px; }
.fdb-flight {
display: flex; align-items: center; gap: 18px;
padding: 16px 26px; margin: 0 2px;
background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,246,243,0.96));
border: 1px solid rgba(121, 75, 30, 0.22); border-top: 0;
border-radius: 0 0 16px 16px;
box-shadow: 0 18px 36px -22px rgba(0,0,0,0.4);
}
.fdb-flight__icon {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
background: rgba(120, 165, 220, 0.14); color: #3f74b8;
display: inline-flex; align-items: center; justify-content: center;
}
.fdb-flight__icon svg { width: 19px; height: 19px; }
.fdb-flight__field { flex: 0 0 auto; min-width: 220px; display: flex; flex-direction: column; gap: 7px; }
.fdb-flight__field .fdb-input { font-size: 18px; }
.fdb-flight__note {
flex: 1 1 auto; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5;
color: rgba(121, 75, 30, 0.72); max-width: 46ch;
}
.fdb-opt {
text-transform: none; letter-spacing: 0; font-family: var(--font-display);
font-style: italic; font-size: 11px; color: rgba(121, 75, 30, 0.55); margin-left: 4px;
}
/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
.fdb-routechip { flex: 1 1 100%; padding: 10px 18px; }
.fdb-suggest { left: 0; right: 0; }
.fdb-flight { flex-wrap: wrap; gap: 12px; }
.fdb-flight__note { flex: 1 1 100%; max-width: none; }
.fdb-cal { left: 0; transform: none; }
}
@media (max-width: 560px) {
.fdb-flight__field { min-width: 0; flex: 1 1 100%; }
}
/* ════════════════════════════════════════════════════════════════════════
IVORY THEME — "printed reservation card" (chosen palette).
The Step-1 bar (.hbq--bar), its pill toggle and the flight panel render as
a warm IVORY card with charcoal serif text and gold accents — an elegant,
high-legibility contrast against the dark site sections it sits on. The
suggestion dropdown + calendar stay dark on purpose (a dark menu popping off
the ivory bar reads like a luxury form); the airport icon is gold, not blue.
WHY !important: the per-page CSS bundle order is auto-generated and NOT
consistent — on the homepage booking-widget.css loads after booking.css,
but on the embed landing pages booking.css loads LAST and would otherwise
win. This theme layer is declared authoritative so the look holds on every
page type. Palette: ivory #F7F0E2 · charcoal #2A1E12 · gold #D9AE74.
════════════════════════════════════════════════════════════════════════ */
/* Card + pill shells → ivory */
.hbq__bar {
background: linear-gradient(180deg, #FBF6EC 0%, #F1E9D7 100%) !important;
border: 1px solid rgba(121,75,30,0.22) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.10),
0 28px 56px -20px rgba(0,0,0,0.45) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Trip-type pill — house system (owner-approved Jul 2026): dark translucent
panel + hairline border, GOLD active chip with espresso text. On-brand on
the espresso hero, the booking modal, and the ivory widget bar alike. */
.hbq__pill {
background: rgba(26,19,13,0.55) !important;
border: 1px solid rgba(250,241,221,0.16) !important;
box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
}
.hbq__pill-btn { color: #E6DCCB !important; }
.hbq__pill-btn:hover { color: #FFFFFF !important; }
.hbq__pill-btn.is-active {
background: #D9AE74 !important;
color: #1B1812 !important;
box-shadow: 0 3px 12px -3px rgba(217,174,116,0.5) !important;
}
/* Filled buttons (toggle + "View options") use the palette's charcoal with cream
text — a gold fill muddied against the ivory card; charcoal gives crisp contrast. */
.hbq__bar-cta {
background: #2A1E12 !important;
color: #FFFFFF !important;
}
/* Field labels, inputs, dividers */
.hbq__bar-label { color: #9A6A2A !important; }
.hbq__bar-input,
.fdb-input { color: #2A1E12 !important; border-bottom-color: rgba(121,75,30,0.30) !important; }
.hbq__bar-input::placeholder,
.fdb-input::placeholder { color: rgba(121,75,30,0.55) !important; }
.hbq__bar-input:hover { border-bottom-color: rgba(121,75,30,0.50) !important; }
.hbq__bar-input:focus { border-bottom-color: var(--gold-deep) !important; box-shadow: 0 1px 0 0 var(--gold-deep) !important; }
.hbq__bar-div { background: rgba(121,75,30,0.20) !important; }
/* Time selector inside the bar → charcoal on ivory */
.hbq .hbq-sel__btn { color: #2A1E12 !important; border-bottom-color: rgba(121,75,30,0.30) !important; }
.hbq .hbq-sel__btn:hover { border-bottom-color: rgba(121,75,30,0.50) !important; }
/* Type icon + clear buttons */
.fdb-type-icon { color: var(--gold-deep) !important; }
.fdb-clear { background: rgba(121,75,30,0.08) !important; border-color: rgba(121,75,30,0.22) !important; color: rgba(121,75,30,0.70) !important; }
.fdb-clear:hover { background: rgba(121,75,30,0.16) !important; color: #3A1F08 !important; border-color: rgba(121,75,30,0.40) !important; }
.fdb-clear--inline { color: rgba(121,75,30,0.50) !important; }
.fdb-clear--inline:hover { color: #3A1F08 !important; }
/* Route chip + date button text → charcoal */
.fdb-routechip__name { color: #2A1E12 !important; }
.fdb-routechip__arrow,
.fdb-routechip__edit { color: var(--gold-deep) !important; }
.fdb-date-btn,
.fdb-date-btn.is-filled { color: #2A1E12 !important; border-bottom-color: rgba(121,75,30,0.30) !important; }
.fdb-date-btn:hover { border-bottom-color: rgba(121,75,30,0.50) !important; }
.fdb-date-ph { color: rgba(121,75,30,0.55) !important; }
/* Airport icon stays gold (not blue) — it lives in the dark dropdown */
.fdb-sug__icon--airport { background: rgba(217,174,116,0.16) !important; color: var(--gold-bright) !important; }
/* Flight panel → ivory (hangs off the bar, must match it) */
.fdb-flight {
background: linear-gradient(180deg, #FBF6EC 0%, #F1E9D7 100%) !important;
border-color: rgba(121,75,30,0.22) !important;
}
.fdb-flight__icon { background: rgba(217,174,116,0.18) !important; color: var(--gold-deep) !important; }
.fdb-flight__note { color: rgba(121,75,30,0.72) !important; }
.fdb-opt { color: rgba(121,75,30,0.55) !important; }
/* Round trip: break the CTA onto its own line and center it */
.is-rt .hbq__bar-div--precta { flex-basis: 100%; width: 0; height: 0; border: 0; margin: 0; }
.is-rt .fdb-cta, .is-rt .hbq__bar-cta { margin-left: auto; margin-right: auto; }
/* Required-field nudge: when the user hits "View options" with a missing date/time/route. */
.fdb.is-req .fdb-date-btn:not(.is-filled) { border-bottom-color: #C0392B; }
.fdb.is-req .fdb-date-ph { color: #C0392B; }
.fdb.is-req .fdb-field:not(.is-filled) .fdb-input::placeholder { color: #C0392B; opacity: 1; }
.fdb.is-req .hbq-sel__value.is-placeholder { color: #C0392B; }
/* + Add stop link between the route fields (Jul 2026) */
.fdb-addstop{align-self:center;flex:none;background:none;border:none;cursor:pointer;font-family:var(--font-sans,'Outfit',sans-serif);font-size:11.5px;letter-spacing:.08em;color:#D9AE74;padding:6px 10px;white-space:nowrap}
.fdb-addstop:hover{color:#ECC58F;text-decoration:underline}
/* Add return trip checkbox row under the bar */
.fdb-rt-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer;font-size:12px;letter-spacing:.06em;color:rgba(250,241,221,.75);user-select:none}
.fdb-rt-toggle input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid rgba(217,174,116,.5);border-radius:4px;background:rgba(0,0,0,.25);cursor:pointer;position:relative;margin:0}
.fdb-rt-toggle input:checked{background:#D9AE74;border-color:#D9AE74}
.fdb-rt-toggle input:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #241A10;border-width:0 2px 2px 0;transform:rotate(45deg)}
.fdb-rt-toggle input:focus-visible{outline:2px solid #D9AE74;outline-offset:2px}
.fdb-rt-toggle:hover span{color:#FAF1DD}
.fdb-stopnote{margin-top:10px;font-size:11.5px;letter-spacing:.04em;color:rgba(250,241,221,.65)}
/* ===== booking.css ===== */
/* === Compact Booking Bar ===
Single horizontal row: From · → · To · Date · Time · Reserve.
Replaces the prior multi-step inline booking. */
.hero-booking {
position: relative;
z-index: 5;
max-width: 1440px; /* match .container so section edges line up with the rest of the page */
margin: 40px auto 0;
padding: 0 56px;
}
@media (max-width: 720px) {
.hero-booking { padding: 0 24px; }
}
.hb-bar {
display: grid;
grid-template-columns: 1.25fr 14px 1.25fr 0.65fr 0.65fr 1fr auto;
align-items: stretch;
gap: 0;
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
box-shadow: var(--shadow-3);
position: relative;
}
.hb-bar--hourly {
/* No arrow cell in hourly mode — duration replaces the destination column */
grid-template-columns: 1.25fr 0.85fr 0.65fr 0.65fr 1fr auto;
}
/* === Trip-type tabs (mini, sit above the bar) === */
.hb-tabs-mini {
display: inline-flex; align-items: stretch; gap: 0;
margin: 0 0 -1px 0;
padding: 0;
position: relative;
z-index: 2;
}
.hb-tab-mini {
background: rgba(20,14,9,0.55);
border: 1px solid var(--hairline-ink);
border-bottom: 0;
cursor: pointer;
padding: 11px 22px 12px;
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: rgba(255,255,255,0.55);
position: relative;
transition: color 200ms, background 200ms;
margin-right: -1px; /* collapse adjacent borders */
}
.hb-tab-mini:hover { color: #FFFFFF; background: rgba(31,24,18,0.7); }
.hb-tab-mini.is-active {
color: #FFFFFF;
background: var(--bg-elev);
border-color: var(--hairline-ink);
z-index: 3;
}
.hb-tab-mini.is-active::before {
/* bronze top edge mirroring the bar's accent line */
content: ""; position: absolute; top: -1px; left: -1px; right: -1px; height: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
}
.hb-tab-mini.is-active::after {
/* paint over the bar's top hairline so the tab merges into the card */
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: var(--bg-elev);
}
/* When tabs are active the bar's own ::before accent line should retreat so the
active tab's bronze top edge is the only one visible at its position. The bar
keeps its accent across the rest of the top. */
.hb-bar { margin-top: 0; }
/* Inline select inside a bar cell — styled like the inputs, padded for the chevron */
.hb-select-inline {
background: transparent; border: 0; outline: none;
font-family: var(--font-display); font-weight: 400; font-size: 16px;
letter-spacing: -0.005em; color: #FFFFFF;
width: 100%; padding: 0 16px 0 0; cursor: pointer;
appearance: none; -webkit-appearance: none;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
background-image:
linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.65) 50%),
linear-gradient(135deg, rgba(255,255,255,0.65) 50%, transparent 50%);
background-position: right 5px center, right 1px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.hb-select-inline option {
background: #2A1B0E; color: #F0E4CC;
}
.hb-cell--vehicle { padding-right: 16px; min-width: 160px; }
.hb-bar::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
}
.hb-cell {
display: flex; flex-direction: column; gap: 6px;
padding: 18px 22px;
border-right: 1px solid var(--hairline-ink);
background: transparent;
transition: background 200ms;
min-width: 0;
}
.hb-cell:hover,
.hb-cell:focus-within { background: rgba(200,162,105,0.04); }
.hb-cell--narrow { padding-left: 18px; padding-right: 18px; }
.hb-cell-label {
font-family: var(--font-sans); font-size: 9px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: #FFFFFF; opacity: 0.85;
}
.hb-cell input {
background: transparent; border: 0; outline: none;
font-family: var(--font-display); font-weight: 400; font-size: 17px;
letter-spacing: -0.005em; color: #FFFFFF;
width: 100%; padding: 0;
}
.hb-cell input::placeholder { color: rgba(255,255,255,0.55); }
.hb-arrow {
display: flex; align-items: center; justify-content: center;
color: var(--gold-deep);
font-family: var(--font-display); font-size: 18px;
border-right: 1px solid var(--hairline-ink);
user-select: none;
}
.hb-cta-bar {
border: 0; cursor: pointer; padding: 0 32px;
background: var(--gold); color: var(--bg-deep);
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 12px;
transition: all 250ms;
box-shadow: inset 0 0 0 1px var(--gold);
}
.hb-cta-bar:hover { background: var(--gold-bright); }
.hb-bar-note {
margin-top: 14px;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--fg-ink-subtle);
text-align: center;
}
.hero-trustline { margin-top: 32px; }
/* Stats relocated under the booking bar — refined four-column ledger */
/* === HERO STATS — single-line value + caption with gilded sheen ===
Each stat is two rows: tracked label · single inline-baseline row of
value + italic caption (separated by a small bronze pip). A gilded sheen
sweeps across each cell in cascade once the row enters viewport, paired
with a brief gold glow on the figure. The column dividers do all the
visual separation work — no decorative underlines. */
.hero-stats--below {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0; padding: 0;
margin: 32px 0 0;
border-top: 1px solid var(--hairline-ink);
border-bottom: 1px solid var(--hairline-ink);
}
.hero-stats--below .hero-stat {
display: grid;
grid-template-rows: auto auto;
row-gap: 14px;
padding: 26px 32px;
border-right: 1px solid var(--hairline-ink);
align-items: start;
position: relative;
overflow: hidden;
}
.hero-stats--below .hero-stat:last-child { border-right: 0; }
/* Row 1 — tracked label, gold */
.hero-stats--below .hero-stat .k {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.85;
line-height: 1;
margin: 0;
}
/* Row 2 — value + caption on a SINGLE baseline */
.hero-stats--below .hero-stat .v {
display: inline-flex;
align-items: baseline;
gap: 12px;
margin: 0; padding: 0;
background: none; position: static;
font-family: var(--font-display);
font-weight: 400;
font-size: 36px;
letter-spacing: -0.024em;
color: var(--fg);
line-height: 1;
font-variant-numeric: tabular-nums oldstyle-nums;
}
.hero-stats--below .hero-stat .v > span:first-child,
.hero-stats--below .hero-stat .v > :not(small):first-child {
display: inline-block;
padding: 0;
position: static;
}
.hero-stats--below .hero-stat .v > span:first-child::after { content: none; }
/* Inline italic caption sharing the value's baseline.
A small bronze pip separates them like a colophon dot. */
.hero-stats--below .hero-stat .v small {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 14px;
letter-spacing: -0.003em;
line-height: 1;
color: var(--fg-muted);
text-transform: none;
margin: 0;
white-space: nowrap;
position: relative;
}
.hero-stats--below .hero-stat .v small::before {
content: none;
}
/* === Gilded sheen — cream + bronze diagonal sweeps across each cell on reveal === */
.hero-stats--below .hero-stat::before {
content: "";
position: absolute;
top: 0; bottom: 0;
left: -45%;
width: 45%;
background: linear-gradient(105deg,
transparent 0%,
rgba(217, 174, 116, 0.00) 30%,
rgba(236, 197, 143, 0.16) 50%,
rgba(217, 174, 116, 0.00) 70%,
transparent 100%);
transform: skewX(-18deg);
opacity: 0;
pointer-events: none;
z-index: 1;
}
.hero-stats--below.is-revealed .hero-stat::before,
.is-revealed.hero-stats--below .hero-stat::before {
animation: hero-stat-sheen 1400ms cubic-bezier(.4, 0, .2, 1) forwards;
}
.hero-stats--below.is-revealed .hero-stat:nth-child(1)::before,
.is-revealed.hero-stats--below .hero-stat:nth-child(1)::before { animation-delay: 600ms; }
.hero-stats--below.is-revealed .hero-stat:nth-child(2)::before,
.is-revealed.hero-stats--below .hero-stat:nth-child(2)::before { animation-delay: 780ms; }
.hero-stats--below.is-revealed .hero-stat:nth-child(3)::before,
.is-revealed.hero-stats--below .hero-stat:nth-child(3)::before { animation-delay: 960ms; }
.hero-stats--below.is-revealed .hero-stat:nth-child(4)::before,
.is-revealed.hero-stats--below .hero-stat:nth-child(4)::before { animation-delay: 1140ms; }
@keyframes hero-stat-sheen {
0% { left: -45%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 145%; opacity: 0; }
}
/* The figure glows briefly gold during the sweep, then settles back */
.hero-stats--below.is-revealed .hero-stat:nth-child(1) .v > span:first-child {
animation: hero-stat-glow 1600ms cubic-bezier(.4, 0, .2, 1) 700ms;
}
.hero-stats--below.is-revealed .hero-stat:nth-child(2) .v > span:first-child {
animation: hero-stat-glow 1600ms cubic-bezier(.4, 0, .2, 1) 880ms;
}
.hero-stats--below.is-revealed .hero-stat:nth-child(3) .v > span:first-child {
animation: hero-stat-glow 1600ms cubic-bezier(.4, 0, .2, 1) 1060ms;
}
.hero-stats--below.is-revealed .hero-stat:nth-child(4) .v > span:first-child {
animation: hero-stat-glow 1600ms cubic-bezier(.4, 0, .2, 1) 1240ms;
}
@keyframes hero-stat-glow {
0% { color: var(--fg); text-shadow: 0 0 0 rgba(236, 197, 143, 0); }
35% { color: var(--gold-bright); text-shadow: 0 0 18px rgba(236, 197, 143, 0.35); }
100% { color: var(--fg); text-shadow: 0 0 0 rgba(236, 197, 143, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-stats--below .hero-stat::before { animation: none !important; opacity: 0 !important; }
.hero-stats--below .hero-stat .v > span:first-child { animation: none !important; }
}
@media (max-width: 720px) {
.hero-stats--below { grid-template-columns: 1fr 1fr; }
.hero-stats--below .hero-stat:nth-child(2n) { border-right: 0; }
.hero-stats--below .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--hairline-ink); }
.hero-stats--below .hero-stat { padding: 22px 22px; }
.hero-stats--below .hero-stat .v { font-size: 28px; }
.hero-stats--below .hero-stat .v small { font-size: 12px; }
}
@media (max-width: 980px) {
.hb-bar, .hb-bar--hourly { grid-template-columns: 1fr 1fr; }
.hb-arrow { display: none; }
.hb-cell { border-right: 0; border-bottom: 1px solid var(--hairline-ink); }
.hb-cell:nth-child(odd) { border-right: 1px solid var(--hairline-ink); }
.hb-cta-bar { grid-column: 1 / -1; padding: 18px; justify-content: center; }
.hb-tabs-mini { flex-wrap: wrap; }
}
@media (max-width: 600px) {
.hero-booking { padding: 0 24px; }
.hb-bar, .hb-bar--hourly { grid-template-columns: 1fr; }
.hb-cell, .hb-cell:nth-child(odd) { border-right: 0; }
}
/* ===== Legacy multi-step booking styles (kept for any other consumers) ===== */
/* --- Trip type tabs --- */
.hb-tabs {
display: flex; align-items: stretch;
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-bottom: 0;
padding: 0 24px;
position: relative;
}
.hb-tabs::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep));
}
.hb-tab {
padding: 18px 24px;
background: transparent; border: 0;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--fg-ink-subtle);
cursor: pointer;
position: relative;
transition: color 200ms;
}
.hb-tab:hover { color: var(--gold-deep); }
.hb-tab.is-active { color: var(--fg-ink); }
.hb-tab.is-active::after {
content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px;
background: var(--gold-deep);
}
.hb-tab-spacer { flex: 1; }
.hb-tab-meta {
align-self: center;
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase;
color: var(--gold-deep);
}
/* --- Main form card (replaces previous grid form) --- */
.hero-booking-card {
display: flex;
flex-direction: column;
gap: 0;
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-top: 0;
padding: 28px 32px;
position: relative;
box-shadow: var(--shadow-3);
overflow: visible;
}
.hero-booking-card::before { display: none; }
.hb-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 12px 0;
border-bottom: 1px solid var(--hairline-ink);
}
.hb-row:last-child { border-bottom: 0; }
.hb-row--time { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
/* --- Fields (vertical label + control) --- */
.hb-field {
display: flex; flex-direction: column; gap: 8px;
border: 0; border-right: 0; padding: 6px 0;
background: transparent;
transition: background 200ms;
}
.hb-field:focus-within { background: transparent; }
.hb-field:hover { background: transparent; }
.hb-field > span {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-ink-subtle);
}
.hb-field input,
.hb-field select {
background: transparent;
border: 0;
border-bottom: 1px solid var(--hairline-ink-strong);
padding: 6px 0;
outline: none;
font-family: var(--font-display); font-weight: 400; font-size: 18px;
letter-spacing: -0.01em; color: var(--fg-ink);
appearance: none; -webkit-appearance: none; width: 100%;
transition: border-color 200ms;
}
.hb-field input:focus,
.hb-field select:focus { border-bottom-color: var(--gold-deep); }
.hb-field input::placeholder { color: var(--fg-ink-subtle); }
/* --- Route block: dot rail + stacked address fields --- */
.hb-route {
display: grid;
grid-template-columns: 28px 1fr;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid var(--hairline-ink);
}
.hb-route-rail {
display: flex; flex-direction: column; align-items: center;
padding-top: 26px; gap: 0;
position: relative;
}
.hb-route-rail::before {
content: ""; position: absolute; top: 32px; bottom: 24px; left: 50%;
width: 1px; background: var(--hairline-ink-strong);
transform: translateX(-50%);
}
.hb-route-rail .dot {
width: 10px; height: 10px; border-radius: 50%;
background: transparent;
border: 1px solid var(--gold-deep);
margin: 0; position: relative; z-index: 2;
display: block;
}
.hb-route-rail .dot--from { background: var(--gold-deep); }
.hb-route-rail .dot--to { background: var(--gold-deep);
width: 8px; height: 8px; border-radius: 0; transform: rotate(45deg); }
.hb-route-rail .dot--mid { width: 6px; height: 6px; }
.hb-route-rail .dot { margin-bottom: 56px; }
.hb-route-rail .dot:last-child { margin-bottom: 0; }
.hb-route-fields {
display: flex; flex-direction: column; gap: 8px;
}
.hb-field--addr { padding: 4px 0 8px; }
.hb-stop-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.hb-stop-row input { flex: 1; }
.hb-stop-remove {
flex: 0 0 auto;
width: 28px; height: 28px;
background: transparent; border: 1px solid var(--hairline-ink-strong);
color: var(--fg-ink-subtle);
font-size: 12px; cursor: pointer; padding: 0;
transition: all 200ms;
}
.hb-stop-remove:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.hb-add-stop {
align-self: flex-start; margin-top: 6px;
background: transparent; border: 1px dashed var(--hairline-ink-strong);
color: var(--gold-deep);
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
padding: 8px 14px; cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: all 200ms;
}
.hb-add-stop:hover { border-color: var(--gold-deep); border-style: solid; background: rgba(200,162,105,0.08); }
.hb-add-stop span { font-size: 14px; }
/* --- Vehicle class cards --- */
.hb-vehicles {
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-top: 0;
padding: 28px 32px 32px;
}
.hb-section-head {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 18px;
}
.hb-section-head .step {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep);
}
.hb-section-head h3 {
font-family: var(--font-display); font-weight: 400; font-size: 22px;
letter-spacing: -0.01em; color: var(--fg-ink); margin: 0;
}
.hb-vehicle-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.hb-vehicle {
background: transparent;
border: 1px solid var(--hairline-ink);
padding: 18px 16px 16px;
display: flex; flex-direction: column; gap: 8px;
text-align: left; cursor: pointer; position: relative;
transition: all 250ms var(--ease-cinematic);
}
.hb-vehicle:hover { border-color: var(--gold-deep); background: rgba(200,162,105,0.04); transform: translateY(-2px); }
.hb-vehicle.is-selected {
border-color: var(--gold-deep);
background: rgba(200,162,105,0.08);
box-shadow: inset 0 0 0 1px var(--gold-deep), var(--shadow-1);
}
.hb-vehicle.is-selected::before {
content: "✓"; position: absolute; top: 8px; right: 10px;
font-family: var(--font-sans); font-size: 11px; font-weight: 600;
color: var(--gold-deep);
}
.hb-vehicle-tag {
position: absolute; top: -1px; left: -1px;
background: var(--gold-deep); color: #fff;
font-family: var(--font-sans); font-size: 8px; font-weight: 500;
letter-spacing: 0.20em; text-transform: uppercase;
padding: 4px 8px;
}
.hb-vehicle-silhouette {
height: 32px; display: flex; align-items: center; color: var(--fg-ink-muted);
margin-bottom: 4px; margin-top: 8px;
}
.hb-vehicle-silhouette img { height: 100%; display: block; }
.hb-vehicle.is-selected .hb-vehicle-silhouette { color: var(--gold-deep); }
.hb-vehicle-name {
font-family: var(--font-display); font-weight: 400; font-size: 16px;
letter-spacing: -0.005em; color: var(--fg-ink);
line-height: 1.15;
}
.hb-vehicle-models {
font-family: var(--font-sans); font-size: 11px;
color: var(--fg-ink-muted); line-height: 1.4;
}
.hb-vehicle-meta {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--fg-ink-subtle);
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid var(--hairline-ink);
}
/* --- Notes (collapsible) --- */
.hb-notes {
background: var(--bg-elev);
border: 1px solid var(--hairline-ink);
border-top: 0;
padding: 16px 32px;
}
.hb-notes-toggle {
background: transparent; border: 0; cursor: pointer;
font-family: var(--font-sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.20em; text-transform: uppercase; color: var(--fg-ink-muted);
display: inline-flex; align-items: center; gap: 10px;
transition: color 200ms;
}
.hb-notes-toggle:hover { color: var(--gold-deep); }
.hb-notes-toggle span {
font-family: var(--font-display); font-size: 18px;
color: var(--gold-deep); line-height: 1;
}
.hb-notes-input {
display: block; width: 100%;
margin-top: 14px;
background: transparent;
border: 1px solid var(--hairline-ink-strong);
padding: 14px 16px;
font-family: var(--font-sans); font-size: 14px; color: var(--fg-ink);
resize: vertical; outline: none;
transition: border-color 200ms;
}
.hb-notes-input:focus { border-color: var(--gold-deep); }
.hb-notes-input::placeholder { color: var(--fg-ink-subtle); }
/* --- Confirm CTA strip --- */
.hb-confirm {
display: flex; justify-content: space-between; align-items: center; gap: 24px;
background: var(--bg-deep);
color: var(--fg-on-dark);
padding: 28px 32px;
border: 1px solid var(--bg-deep);
border-top: 0;
position: relative;
}
.hb-confirm-summary { display: flex; flex-direction: column; gap: 4px; }
.hb-confirm-step {
font-family: var(--font-sans); font-size: 10px; font-weight: 500;
letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-bright);
}
.hb-confirm-line {
font-family: var(--font-display); font-style: italic; font-size: 16px;
color: rgba(244,239,230,0.85);
}
.hb-cta--lg {
height: 56px; padding: 0 32px;
background: var(--gold); color: var(--bg-deep);
border: 0; cursor: pointer;
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 12px;
transition: all 250ms;
box-shadow: 0 12px 30px -8px rgba(200,162,105,0.45);
}
.hb-cta--lg:hover { background: var(--gold-bright); transform: translateY(-1px); }
.hero-trustline { margin-top: 32px; }
/* --- Responsive --- */
@media (max-width: 980px) {
.hb-vehicle-grid { grid-template-columns: repeat(3, 1fr); }
.hb-tabs { flex-wrap: wrap; padding: 0 16px; }
.hb-tab { padding: 14px 16px; }
}
@media (max-width: 720px) {
.hero-booking { padding: 0 24px; }
.hero-booking-card, .hb-vehicles, .hb-notes, .hb-confirm { padding-left: 20px; padding-right: 20px; }
.hb-row { grid-template-columns: 1fr; gap: 12px; }
.hb-vehicle-grid { grid-template-columns: 1fr 1fr; }
.hb-confirm { flex-direction: column; align-items: stretch; }
.hb-cta--lg { width: 100%; justify-content: center; }
.hb-tab-meta { display: none; }
}
/* ID-level override — guarantees #reserve sits 80px below the hero copy,
matching the hero's own bottom padding rhythm (120/80) so the booking
bar feels anchored to the hero rather than floating between sections.
z-index 10 keeps it above any transformed hero-stage chips that might
extend downward from the perspective stage. */
#reserve { margin-top: 80px; position: relative; z-index: 10; }
/* ============================================================
QUOTE CONVERSATION — stepped, one question at a time.
The form is a conversation, not a wall of fields. Five steps,
each shown as a single large question with one or two underlined
inputs beneath. No card around the whole thing — sits openly on
the saddle ground of the hero. Tab toggle and Roman progress
indicator at top; back/continue pager at the bottom.
============================================================ */
.hbq {
max-width: 920px;
margin: 0 auto 50px;
position: relative;
z-index: 10;
padding: 36px 44px 32px;
/* Cream parchment ground — theme's "white" inversion */
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(247, 246, 243, 0.98) 100%);
border: 1px solid rgba(121, 75, 30, 0.20);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.60),
inset 0 -1px 0 rgba(121, 75, 30, 0.08),
0 1px 2px rgba(0, 0, 0, 0.18),
0 28px 56px -20px rgba(0, 0, 0, 0.40),
0 8px 20px -8px rgba(0, 0, 0, 0.30);
overflow: hidden;
}
.hbq::before {
content: ""; position: absolute; top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--gold-deep) 20%,
var(--gold) 50%,
var(--gold-deep) 80%,
transparent 100%);
pointer-events: none;
opacity: 0.9;
}
/* Cream-ground overrides — flip text colors so type reads on parchment */
.hbq .hbq__label {
color: #3A1F08; /* deep saddle ink — fully legible on cream */
opacity: 1;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.20em;
}
.hbq .hbq__tab { color: rgba(121, 75, 30, 0.80); font-weight: 600; }
.hbq .hbq__tab:hover { color: var(--gold-deep); }
.hbq .hbq__tab.is-active { color: #3A1F08; font-weight: 700; }
.hbq .hbq__tab.is-active::after { background: var(--gold-deep); height: 2px; }
.hbq .hbq__tab::after { background: var(--gold-deep); }
.hbq .hbq__top { border-bottom-color: rgba(121, 75, 30, 0.18); }
.hbq .hbq__progress { color: var(--gold-deep); opacity: 1; }
.hbq .hbq__progress-now { color: var(--gold-deep); }
.hbq .hbq__progress-sep { color: rgba(121, 75, 30, 0.45); }
.hbq .hbq__progress-tot { color: rgba(121, 75, 30, 0.55); }
.hbq .hbq__q { color: #2A1B0E; }
.hbq .hbq__q em { color: var(--gold-deep); }
.hbq .hbq__label { color: var(--gold-deep); opacity: 1; }
.hbq .hbq__optional { color: rgba(121, 75, 30, 0.55); }
.hbq .hbq__input {
font-size: 22px;
padding: 6px 0 10px;
}
.hbq .hbq__input::placeholder {
color: rgba(121, 75, 30, 0.50);
font-family: var(--font-sans);
font-style: normal;
font-weight: 400;
font-size: 15px;
letter-spacing: 0;
}
.hbq .hbq__input:hover { border-bottom-color: rgba(121, 75, 30, 0.50); }
.hbq .hbq__input:focus {
border-bottom-color: var(--gold-deep);
box-shadow: 0 1px 0 0 var(--gold-deep);
}
/* Date/time native picker icons — re-tint for cream ground */
.hbq .hbq__input--date::-webkit-calendar-picker-indicator,
.hbq .hbq__input--time::-webkit-calendar-picker-indicator {
filter:
invert(28%) sepia(45%) saturate(680%) hue-rotate(2deg) brightness(82%) contrast(96%);
opacity: 0.7;
}
.hbq .hbq__input--date,
.hbq .hbq__input--time { color-scheme: light; }
.hbq .hbq__input--date::-webkit-datetime-edit-text,
.hbq .hbq__input--time::-webkit-datetime-edit-text {
color: var(--gold-deep);
}
.hbq .hbq__input--date::-webkit-datetime-edit-fields-wrapper,
.hbq .hbq__input--time::-webkit-datetime-edit-fields-wrapper {
color: #2A1B0E;
}
/* HbqSelect — cream variant */
.hbq .hbq-sel__btn {
color: #2A1B0E;
border-bottom-color: rgba(121, 75, 30, 0.28);
}
.hbq .hbq-sel__btn:hover { border-bottom-color: rgba(121, 75, 30, 0.50); }
.hbq .hbq-sel.is-open .hbq-sel__btn,
.hbq .hbq-sel__btn:focus {
border-bottom-color: var(--gold-deep);
box-shadow: 0 1px 0 0 var(--gold-deep);
}
.hbq .hbq-sel__caret { color: var(--gold-deep); }
.hbq .hbq-sel.is-open .hbq-sel__caret { color: var(--gold-deep); }
.hbq .hbq-sel__value.is-placeholder { color: rgba(121, 75, 30, 0.40); }
/* The dropdown menu itself stays on dark saddle for legibility against the
cream ground — that contrast is what makes it feel like a separate object. */
/* Time picker AM/PM segmented — cream variant */
.hbq .hbq-time__sep { color: var(--gold-deep); }
.hbq .hbq-time__period { border-color: rgba(121, 75, 30, 0.32); }
.hbq .hbq-time__pbtn {
color: rgba(121, 75, 30, 0.65);
}
.hbq .hbq-time__pbtn:hover { color: var(--gold-deep); }
.hbq .hbq-time__pbtn.is-active {
background: var(--gold-deep);
color: var(--fg);
}
.hbq .hbq-time__pbtn + .hbq-time__pbtn { border-left-color: rgba(121, 75, 30, 0.32); }
/* Pager — cream variant */
.hbq .hbq__nav {
border-top-color: rgba(121, 75, 30, 0.18);
}
.hbq .hbq__back {
color: rgba(121, 75, 30, 0.65);
}
.hbq .hbq__back:hover { color: var(--gold-deep); }
.hbq .hbq__pip { background: rgba(121, 75, 30, 0.20); }
.hbq .hbq__pip.is-done { background: rgba(121, 75, 30, 0.55); }
.hbq .hbq__pip.is-now { background: var(--gold-deep); }
.hbq .hbq__next {
border-color: var(--gold-deep);
color: var(--gold-deep);
}
.hbq .hbq__next:hover {
background: var(--gold-deep);
color: var(--fg);
border-color: var(--gold-deep);
}
/* ---- Top bar ---- */
.hbq__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(217, 174, 116, 0.18);
margin-bottom: 56px;
}
.hbq__tabs {
display: inline-flex;
gap: 0;
}
.hbq__tab {
appearance: none;
background: transparent;
border: 0;
cursor: pointer;
padding: 8px 0;
margin-right: 32px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
position: relative;
transition: color 280ms ease;
}
.hbq__tab:last-child { margin-right: 0; }
.hbq__tab:hover { color: var(--fg); }
.hbq__tab::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: var(--gold);
transform: scaleX(0); transform-origin: left center;
transition: transform 360ms cubic-bezier(.55, 0, .15, 1);
}
.hbq__tab.is-active {
color: var(--gold);
}
.hbq__tab.is-active::after { transform: scaleX(1); }
/* Roman progress — small, italic, top-right */
.hbq__progress {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
letter-spacing: 0.06em;
color: var(--gold);
display: inline-flex;
align-items: baseline;
gap: 6px;
opacity: 0.85;
}
.hbq__progress-now { font-size: 18px; color: var(--gold-bright); }
.hbq__progress-sep { opacity: 0.5; font-size: 11px; }
.hbq__progress-tot { opacity: 0.55; }
/* ---- Stage — only the active step is rendered; no stacking weirdness ---- */
.hbq__stage {
position: relative;
min-height: 220px;
display: flex;
flex-direction: column;
}
.hbq__step {
display: flex;
flex-direction: column;
flex: 1;
animation: hbq-step-in 520ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes hbq-step-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
/* ---- The question — large editorial serif ---- */
.hbq__q {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(24px, 2.6vw, 30px);
line-height: 1.15;
letter-spacing: -0.018em;
color: var(--fg);
margin: 0 0 36px;
text-wrap: balance;
max-width: 30ch;
}
.hbq__q em {
font-style: italic;
color: var(--gold);
font-weight: 400;
position: relative;
}
/* ---- Field rows ---- */
.hbq__fields {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
.hbq__fields--pair {
grid-template-columns: 1fr 1fr;
gap: 22px 48px;
}
.hbq__fields--stack {
grid-template-columns: 1fr;
gap: 26px;
}
.hbq__fields--stack .hbq__fields--pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px 48px;
}
.hbq__field {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
}
.hbq__label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--gold);
opacity: 1;
}
.hbq__optional {
text-transform: none;
letter-spacing: 0;
font-family: var(--font-display);
font-style: italic;
font-size: 11px;
color: var(--fg-subtle);
margin-left: 6px;
opacity: 0.7;
}
/* ---- Inputs — no box. Bronze underline below; focus thickens it. ---- */
.hbq__input {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(217, 174, 116, 0.32);
border-radius: 0;
color: var(--fg);
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
line-height: 1.3;
letter-spacing: -0.010em;
padding: 6px 0 10px;
width: 100%;
transition: border-color 280ms ease, box-shadow 280ms ease;
}
.hbq__input::placeholder {
font-style: italic;
color: rgba(236, 213, 173, 0.32);
letter-spacing: -0.005em;
}
.hbq__input:hover { border-bottom-color: rgba(217, 174, 116, 0.55); }
.hbq__input:focus {
outline: none;
border-bottom-color: var(--gold-bright);
box-shadow: 0 1px 0 0 var(--gold-bright);
}
/* Select variant — custom bronze chevron on the right */
.hbq__input--select {
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 14px 9px;
padding-right: 28px;
cursor: pointer;
}
.hbq__input--select option {
background: #1F1812;
color: var(--fg);
font-family: var(--font-sans);
font-size: 14px;
}
/* Date / Time native inputs — theme-match the picker glyph + display.
We can't fully style the OS picker overlay, but we can recolour the
calendar/clock icon to bronze, hide the spinner, and keep the display
type identical to the rest of the conversation. */
.hbq__input--date,
.hbq__input--time {
cursor: pointer;
padding-right: 36px;
font-feature-settings: "tnum";
color-scheme: dark; /* tells the OS picker to use a dark theme */
}
/* Bronze the calendar / clock icon glyph in Chromium-based browsers */
.hbq__input--date::-webkit-calendar-picker-indicator,
.hbq__input--time::-webkit-calendar-picker-indicator {
cursor: pointer;
/* Tint the default icon to bronze (#D9AE74) — filter recipe maps black → bronze */
filter:
invert(75%) sepia(43%) saturate(495%) hue-rotate(351deg) brightness(94%) contrast(89%);
opacity: 0.85;
margin-left: 12px;
transition: opacity 240ms ease;
}
.hbq__input--date:hover::-webkit-calendar-picker-indicator,
.hbq__input--time:hover::-webkit-calendar-picker-indicator {
opacity: 1;
}
/* Empty-state placeholder color for date/time when value is empty */
.hbq__input--date:not(:focus):invalid,
.hbq__input--time:not(:focus):invalid {
color: rgba(236, 213, 173, 0.42);
}
.hbq__input--date::-webkit-datetime-edit-text,
.hbq__input--time::-webkit-datetime-edit-text {
color: var(--gold);
padding: 0 4px;
}
.hbq__input--date::-webkit-datetime-edit-fields-wrapper,
.hbq__input--time::-webkit-datetime-edit-fields-wrapper {
color: var(--fg);
}
.hbq__input--date::-webkit-datetime-edit-month-field:focus,
.hbq__input--date::-webkit-datetime-edit-day-field:focus,
.hbq__input--date::-webkit-datetime-edit-year-field:focus,
.hbq__input--time::-webkit-datetime-edit-hour-field:focus,
.hbq__input--time::-webkit-datetime-edit-minute-field:focus,
.hbq__input--time::-webkit-datetime-edit-ampm-field:focus {
background: rgba(217, 174, 116, 0.16);
color: var(--gold-bright);
outline: none;
}
/* ============================================================
HbqTimePicker — Hour · Minute · AM/PM
============================================================ */
.hbq-time {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 4px 0 8px;
}
.hbq-time__sep {
font-family: var(--font-display);
font-size: 26px;
color: var(--gold);
font-weight: 400;
line-height: 1;
padding: 0 2px;
user-select: none;
}
.hbq-time__period {
display: inline-flex;
align-items: center;
margin-left: 8px;
border: 1px solid rgba(217, 174, 116, 0.32);
border-radius: var(--radius);
overflow: hidden;
height: 38px;
}
.hbq-time__pbtn {
appearance: none;
background: transparent;
border: 0;
padding: 0 14px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-muted);
height: 100%;
transition: color 240ms ease, background 240ms ease;
}
.hbq-time__pbtn + .hbq-time__pbtn {
border-left: 1px solid rgba(217, 174, 116, 0.32);
}
.hbq-time__pbtn:hover { color: var(--gold-bright); }
.hbq-time__pbtn.is-active {
background: var(--gold);
color: #2A1B0E;
}
/* ============================================================
HbqSelect — custom themed dropdown (replaces native