/* =============================================================
YACHT GENIUS AI — DESIGN SYSTEM (light, image-led)
Mediterranean afternoon light. Cream + ocean teal + brushed gold.
Photo-rich, calm, premium-but-bright.
============================================================= */
:root {
/* Palette */
--bg: #FBFAF6; /* cream paper */
--bg-cool: #ECF3F5; /* pale ocean mist */
--paper: #FFFFFF; /* cards */
--ink: #0E2B3D; /* deep ocean text */
--ink-soft: rgba(14, 43, 61, 0.72);
--ink-mute: rgba(14, 43, 61, 0.54);
--ocean: #1A7A95; /* mid teal-blue accent */
--ocean-deep: #0E5A75; /* hover */
--ocean-bright: #36A4C2; /* light teal */
--aegean: #0A4F6B; /* dark accent */
--brass: #C9A96E; /* warm gold accent */
--brass-bright: #E0C18A;
--coral: #E89B7B; /* sunset coral, used sparingly */
--line: rgba(14, 43, 61, 0.12);
--line-strong: rgba(14, 43, 61, 0.22);
--line-light: rgba(255, 255, 255, 0.18);
/* Backward-compat aliases (don't remove — referenced by inline styles in pages) */
--midnight: var(--aegean);
--mist: var(--bg-cool);
--charcoal: var(--ink);
--bone: var(--bg);
--shadow-card: 0 14px 40px -16px rgba(14, 43, 61, 0.18);
--shadow-deep: 0 30px 80px -20px rgba(14, 43, 61, 0.32);
/* Type */
--display: 'Cormorant Garamond', 'Times New Roman', serif;
--body: 'Geist', 'Geist Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 4rem;
--space-2xl: 7rem;
/* Layout */
--rail: clamp(1.25rem, 4vw, 3.5rem);
--max: 1380px;
--reading: 68ch;
/* Motion — strong custom curves, never default ease */
--ease: cubic-bezier(0.23, 1, 0.32, 1);
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
--dur: 420ms;
--dur-fast: 200ms;
}
/* ---------- Reset -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--body);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--ocean); }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); }
p { margin: 0 0 var(--space-sm); }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--ocean); color: white; }
/* ---------- Type utilities ----------------------------------- */
.eyebrow {
font-family: var(--body);
font-size: 0.68rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ocean);
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.8rem;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(26, 122, 149, 0.06);
}
.eyebrow::before {
content: '';
display: inline-block;
width: 5px; height: 5px;
background: var(--ocean);
border-radius: 50%;
}
.section--midnight .eyebrow,
.hero .eyebrow,
.page-hero--image .eyebrow {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: var(--brass-bright);
}
.section--midnight .eyebrow::before,
.hero .eyebrow::before,
.page-hero--image .eyebrow::before { background: var(--brass-bright); }
.display-1 {
font-size: clamp(2.75rem, 7vw, 5.5rem);
font-weight: 300;
letter-spacing: -0.035em;
line-height: 0.95;
text-wrap: balance;
}
.display-2 {
font-size: clamp(2rem, 4.5vw, 3.4rem);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.025em;
text-wrap: balance;
}
.display-3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.lead {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.55;
color: var(--ink-soft);
max-width: 56ch;
}
.italic { font-style: italic; }
.numeric { font-feature-settings: 'tnum'; }
/* ---------- Layout ------------------------------------------- */
.shell {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding-left: var(--rail);
padding-right: var(--rail);
}
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--bone, .section--bg { background: var(--bg); }
.section--cool { background: var(--bg-cool); }
.section--paper { background: var(--paper); }
.section--dark {
background: var(--ink);
color: white;
}
.section--ocean {
background: linear-gradient(180deg, var(--aegean) 0%, var(--ink) 100%);
color: white;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--ocean h1, .section--ocean h2, .section--ocean h3, .section--ocean h4 { color: white; }
.section--dark .lead, .section--ocean .lead { color: rgba(255, 255, 255, 0.78); }
.section--dark .eyebrow, .section--ocean .eyebrow { color: var(--brass); }
.section--dark .eyebrow::before, .section--ocean .eyebrow::before { background: var(--brass); }
/* ---------- Header / nav ------------------------------------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
padding: var(--space-sm) var(--rail);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
transition: background var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), padding var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 100%);
}
.site-header .brand,
.site-header .nav-list a { color: white; }
.site-header.is-scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: saturate(140%) blur(14px);
-webkit-backdrop-filter: saturate(140%) blur(14px);
padding-block: 0.55rem;
box-shadow: 0 1px 0 var(--line);
}
.site-header.is-scrolled .brand,
.site-header.is-scrolled .nav-list a { color: var(--ink); }
.site-header.is-scrolled .nav-toggle { color: var(--ink); border-color: var(--line); }
.brand {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-family: var(--display);
font-size: 1.35rem;
letter-spacing: 0.02em;
}
.brand-mark {
width: 32px; height: 32px;
border: 1px solid currentColor;
border-radius: 50%;
display: grid; place-items: center;
font-size: 0.95rem;
background: rgba(255, 255, 255, 0.05);
flex-shrink: 0;
}
.site-header.is-scrolled .brand-mark { background: rgba(14, 43, 61, 0.04); }
.brand-mark svg { width: 18px; height: 18px; }
.brand-em { color: var(--brass); font-style: normal; font-size: 0.7em; letter-spacing: 0.2em; margin-left: 0.3em; }
.nav-list {
display: none;
gap: clamp(1rem, 2.4vw, 2.2rem);
align-items: center;
}
.nav-list a {
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
position: relative;
padding-block: 0.4rem;
}
.nav-list a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--ocean);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur-fast) var(--ease);
}
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-actions { display: inline-flex; align-items: center; gap: 0.6rem; }
.nav-toggle {
width: 44px; height: 44px;
display: grid; place-items: center;
color: white;
border: 1px solid var(--line-light);
border-radius: 999px;
transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.nav-toggle svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
.nav-list { display: inline-flex; }
.nav-toggle { display: none; }
}
/* Mobile drawer */
.nav-drawer {
position: fixed;
inset: 0;
z-index: 60;
background: var(--paper);
color: var(--ink);
padding: 6rem var(--rail) var(--rail);
transform: translateY(-100%);
transition: transform var(--dur) var(--ease);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.nav-drawer.is-open { transform: translateY(0); }
.nav-drawer a {
display: block;
padding: 0.6rem 0;
font-family: var(--display);
font-size: 1.8rem;
border-bottom: 1px solid var(--line);
}
.nav-drawer .close {
position: absolute;
top: 1.2rem; right: var(--rail);
width: 44px; height: 44px;
display: grid; place-items: center;
border: 1px solid var(--line);
border-radius: 999px;
}
@media (min-width: 1024px) { .nav-drawer { display: none; } }
/* ---------- Buttons ------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 1rem 1.6rem;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 999px;
transition:
transform 200ms var(--ease),
background 200ms var(--ease),
color 200ms var(--ease),
border-color 200ms var(--ease),
box-shadow 200ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
background: var(--ocean);
color: white;
border: 1px solid var(--ocean);
}
.btn-primary:hover { background: var(--ocean-deep); border-color: var(--ocean-deep); transform: translateY(-1px); color: white; }
.btn-ghost {
background: transparent;
color: white;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn-ghost:hover { border-color: white; background: rgba(255, 255, 255, 0.1); color: white; }
.section--bone .btn-ghost, .section--cool .btn-ghost, .section--paper .btn-ghost {
color: var(--ink);
border-color: var(--line-strong);
}
.section--bone .btn-ghost:hover, .section--cool .btn-ghost:hover, .section--paper .btn-ghost:hover {
background: var(--ink);
color: white;
border-color: var(--ink);
}
.btn-dark {
background: var(--ink);
color: white;
border: 1px solid var(--ink);
}
.btn-dark:hover { background: var(--ocean); border-color: var(--ocean); color: white; }
.btn-link {
color: var(--ocean);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding-block: 0.6rem;
border-bottom: 1px solid transparent;
}
.btn-link::after { content: '→'; transition: transform var(--dur-fast) var(--ease); }
.btn-link:hover { color: var(--ocean-deep); border-bottom-color: var(--ocean-deep); }
.btn-link:hover::after { transform: translateX(4px); }
/* ---------- Hero --------------------------------------------- */
.hero {
position: relative;
min-height: 92vh;
min-height: 92dvh;
display: flex;
align-items: flex-end;
color: white;
overflow: hidden;
isolation: isolate;
}
.hero-media {
position: absolute;
inset: 0;
z-index: -2;
background: var(--aegean);
}
.hero-media img, .hero-media video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 50%;
animation: heroZoom 22s var(--ease) infinite alternate;
}
@keyframes heroZoom {
from { transform: scale(1.0); }
to { transform: scale(1.08); }
}
.hero-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14, 43, 61, 0.35) 0%, rgba(14, 43, 61, 0.2) 35%, rgba(14, 43, 61, 0.7) 100%);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
width: 100%;
padding-bottom: clamp(3rem, 8vw, 5rem);
padding-top: 9rem;
}
.hero-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 900px) {
.hero-grid { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.hero h1 { color: white; }
.hero h1 em { font-style: italic; color: var(--brass-bright); }
.hero .lead { color: rgba(255, 255, 255, 0.92); }
.hero .eyebrow { color: var(--brass-bright); }
.hero .eyebrow::before { background: var(--brass-bright); }
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid rgba(255, 255, 255, 0.18);
margin-top: var(--space-lg);
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.78);
}
.hero-meta strong {
display: block;
font-family: var(--display);
font-size: 1.4rem;
color: var(--brass-bright);
font-weight: 500;
margin-bottom: 0.1rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: var(--space-md);
}
/* Hero search bar (image-led layouts) */
.hero-search {
background: rgba(255, 255, 255, 0.96);
color: var(--ink);
backdrop-filter: blur(10px);
border-radius: 6px;
padding: var(--space-md);
margin-top: var(--space-lg);
box-shadow: var(--shadow-deep);
display: grid;
gap: var(--space-md);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.hero-search { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
}
.hero-search .field label { color: var(--ocean); }
.scroll-cue {
position: absolute;
bottom: 1.2rem;
left: 50%;
transform: translateX(-50%);
color: var(--brass-bright);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.3em;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0.7;
z-index: 2;
}
.scroll-cue .line {
width: 1px; height: 32px;
background: currentColor;
animation: cueDrop 2.5s var(--ease) infinite;
transform-origin: top;
}
@keyframes cueDrop {
0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
50% { transform: scaleY(1); opacity: 1; }
}
/* ---------- Marquee ------------------------------------------ */
.marquee {
background: var(--ink);
color: var(--brass-bright);
overflow: hidden;
padding-block: 1.2rem;
font-family: var(--display);
font-size: 1.3rem;
font-style: italic;
}
.marquee-track {
display: inline-flex;
gap: 4rem;
white-space: nowrap;
animation: scroll 38s linear infinite;
padding-left: 4rem;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 4rem; }
.marquee-track span::after {
content: '✦';
color: white;
opacity: 0.4;
font-size: 0.7em;
}
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- Section heads ------------------------------------ */
.section-head {
display: grid;
gap: var(--space-md);
align-items: end;
margin-bottom: var(--space-xl);
}
@media (min-width: 800px) {
.section-head { grid-template-columns: 1fr auto; }
.section-head .actions { justify-self: end; }
}
.section-head h2 { max-width: 18ch; }
/* ---------- Yacht / fleet cards ------------------------------ */
.fleet-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(2, 1fr); /* Kim: 2-up */
}
.fleet-grid > .kim-yacht--hero { grid-column: 1 / -1; } /* hero spans full row */
@media (max-width: 700px) { .fleet-grid { grid-template-columns: 1fr; } }
/* ==================== Yacht result cards (Kim's hero + 3-up) ==================== */
.kim-yacht {
background: white;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
display: flex;
flex-direction: column;
}
.kim-yacht:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.18); }
/* Hero card — image LEFT (50%), body RIGHT */
.kim-yacht--hero { flex-direction: row; }
.kim-yacht--hero .kim-yacht-img { flex: 1 1 50%; aspect-ratio: auto; min-height: 380px; }
.kim-yacht--hero .kim-yacht-body { flex: 1 1 50%; padding: 2rem 2.4rem; }
.kim-yacht--hero .kim-yacht-name { font-size: 1.9rem; }
.kim-yacht--hero .kim-yacht-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* Standard card — image top, body below */
.kim-yacht-img {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg-cool);
}
.kim-yacht-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kim-yacht-photos {
position: absolute;
bottom: 0.7rem;
left: 0.7rem;
background: rgba(0, 0, 0, 0.6);
color: white;
font-size: 0.7rem;
padding: 0.3rem 0.55rem;
border-radius: 4px;
backdrop-filter: blur(4px);
}
.kim-yacht-body {
padding: 1.1rem 1.3rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
flex-grow: 1;
}
.kim-yacht-badges {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.kim-yacht-badge {
font-size: 0.65rem;
padding: 0.25rem 0.55rem;
border: 1px solid var(--line-strong);
color: var(--ink-soft);
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
}
.kim-yacht-name {
font-family: var(--sans);
font-size: 1.3rem;
font-weight: 700;
color: var(--ink);
margin: 0.2rem 0 0;
letter-spacing: 0.02em;
}
.kim-yacht-locs {
font-style: italic;
color: var(--ink-mute);
font-size: 0.8rem;
margin: 0;
}
.kim-yacht-meta {
font-size: 0.85rem;
color: var(--ink-soft);
margin: 0;
font-weight: 500;
}
.kim-yacht-desc {
font-size: 0.82rem;
color: var(--ink-soft);
line-height: 1.55;
margin: 0.3rem 0 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kim-yacht-price {
font-size: 1.1rem;
font-weight: 700;
color: var(--ink);
margin: 0.4rem 0 0;
}
.kim-yacht-foot { margin-top: auto; padding-top: 0.6rem; }
/* ==================== Special offers grid ==================== */
.kim-offers-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .kim-offers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kim-offers-grid { grid-template-columns: 1fr; } }
.kim-offer {
background: white;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
text-decoration: none;
color: var(--ink);
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
display: flex;
flex-direction: column;
}
.kim-offer:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.18); }
.kim-offer-body { padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; }
.kim-offer-tag {
align-self: flex-start;
background: var(--brass);
color: var(--midnight);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.16em;
padding: 0.3rem 0.55rem;
border-radius: 3px;
font-weight: 700;
}
.kim-offer h3 {
font-family: var(--display);
font-size: 1.2rem;
font-weight: 400;
color: var(--ink);
margin: 0.2rem 0 0;
line-height: 1.3;
}
.kim-offer-region {
font-size: 0.78rem;
color: var(--ocean-deep);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
.kim-offer-dates { font-size: 0.82rem; color: var(--ink-mute); margin: 0; font-style: italic; }
.kim-offer .kim-featured-btn { margin-top: auto; }
/* ==================== Itineraries list (full-page) ==================== */
.kim-itin-list {
display: grid;
gap: 1.2rem;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .kim-itin-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kim-itin-list { grid-template-columns: 1fr; } }
.kim-itin-card {
background: white;
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.1);
transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
display: flex;
flex-direction: column;
}
.kim-itin-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.2); }
.kim-itin-card-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: var(--bg-cool); }
.kim-itin-card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; flex-grow: 1; }
.kim-itin-card-body h3 { font-family: var(--display); font-size: 1.15rem; font-weight: 400; color: var(--ink); margin: 0; line-height: 1.3; }
.kim-itin-excerpt { font-size: 0.82rem; color: var(--ink-soft); margin: 0; line-height: 1.5; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kim-itin-card .btn-link { margin-top: auto; padding-top: 0.5rem; font-size: 0.78rem; }
/* ==================== Kim parallax hero (home) ==================== */
.kim-hero-parallax {
min-height: 580px;
background-image: var(--bg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
display: flex;
align-items: center;
position: relative;
padding-top: 6rem;
padding-bottom: 4rem;
}
.kim-hero-parallax--short { min-height: 400px; padding-top: 5rem; padding-bottom: 4rem; }
.kim-hero-parallax-content { width: 100%; }
.kim-hero-h1 {
font-family: var(--sans);
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2.2rem);
color: white;
margin: 0;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.kim-hero-sub {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(1.5rem, 3.4vw, 2.4rem);
color: var(--ink);
margin: 1rem 0 2rem;
line-height: 1.15;
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}
.kim-hero-actions { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 700px) {
.kim-hero-parallax { background-attachment: scroll; min-height: 460px; }
.kim-hero-parallax--short { min-height: 300px; }
.kim-hero-h1 { font-size: 1.4rem; }
.kim-hero-sub { font-size: 1.6rem; }
.kim-hero-parallax-content > .shell > div { text-align: center !important; }
.kim-hero-actions { justify-content: center; }
}
/* Meet Gizmo split */
.kim-meet-gizmo .eyebrow { color: var(--brass); }
@media (max-width: 800px) {
.kim-meet-gizmo { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
/* Guest reviews */
.kim-reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 800px) { .kim-reviews { grid-template-columns: 1fr; } }
.kim-review {
background: white;
border: 1px solid var(--line);
border-radius: 10px;
padding: 1.6rem 1.7rem;
box-shadow: 0 4px 12px -4px rgba(14, 43, 61, 0.1);
}
.kim-review-stars { color: var(--brass); font-size: 1.1rem; letter-spacing: 0.1em; margin-bottom: 0.7rem; }
.kim-review p { font-style: italic; color: var(--ink); margin: 0 0 1rem; line-height: 1.55; font-size: 0.95rem; }
.kim-review footer { font-size: 0.78rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.12em; }
/* Bento destinations grid — title + 7 cards in irregular sizes */
.kim-dest-bento {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: 240px;
grid-template-areas:
"intro intro bah bah"
"med med bvi win"
"med med gre gre"
"usvi lee gre gre";
gap: 6px; /* tight gutters, "stitched" feel */
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
}
.kim-dest-bento .kim-dest {
border-radius: 0;
box-shadow: inset 0 -80px 120px rgba(0,0,0,0.35);
overflow: hidden;
}
.kim-dest-bento .kim-dest:hover {
transform: none;
}
.kim-dest-bento .kim-dest .kim-dest-img,
.kim-dest-bento .kim-dest::after {
border-radius: 0;
}
/* Cinematic image grading + layered gradient overlay */
.kim-dest-bento .kim-dest-img {
filter: brightness(0.85) contrast(1.05) saturate(0.88);
transition: filter 600ms ease, transform 1.2s ease;
}
.kim-dest-bento .kim-dest:hover .kim-dest-img {
filter: brightness(0.95) contrast(1.05) saturate(0.95);
transform: scale(1.03);
}
.kim-dest-bento .kim-dest::after {
background: linear-gradient(
to top,
rgba(0,0,0,0.78) 0%,
rgba(0,0,0,0.35) 45%,
rgba(0,0,0,0.05) 100%
);
}
/* Card content — bottom-left, tighter, editorial */
.kim-dest-bento .kim-dest-body {
padding: 0 0 18px 18px !important;
}
.kim-dest-bento .kim-dest-body {
padding: 0 18px 18px 18px !important;
text-align: left;
}
.kim-dest-bento .kim-dest h3 {
font-family: var(--display);
font-size: 1.55rem;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.05;
margin: 0 0 0.25rem;
color: #fff;
}
.kim-dest-bento .kim-dest--tall h3 { font-size: 2rem; }
.kim-dest-bento .kim-dest--wide h3 { font-size: 1.8rem; }
.kim-dest-bento .kim-dest-meta {
font-size: 0.7rem;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.85);
text-transform: none;
margin: 0 0 0.4rem;
font-weight: 500;
}
.kim-dest-bento .kim-dest-desc {
font-size: 0.78rem;
line-height: 1.4;
color: rgba(255,255,255,0.85);
margin: 0;
font-weight: 400;
max-width: 95%;
}
.kim-dest-bento-intro {
grid-area: intro;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0.5rem 1.5rem 0.5rem 0;
overflow: visible;
}
.kim-bento-title {
font-family: var(--display);
font-size: clamp(1.6rem, 2.5vw, 2.15rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.5px;
margin: 0;
color: var(--ink);
}
.kim-bento-sub {
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-soft, #555);
margin: 0.7rem 0 0;
max-width: 95%;
}
.kim-bento-actions {
display: flex;
flex-direction: row;
gap: 0.6rem;
flex-wrap: wrap;
margin-top: 1rem;
align-items: center;
}
.kim-btn {
display: inline-block;
padding: 0.6rem 1.05rem;
font-size: 0.8rem;
font-weight: 600;
border-radius: 6px;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
line-height: 1.2;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
font-family: inherit;
white-space: nowrap;
}
.kim-btn-outline {
background: #fff;
color: var(--ink);
border-color: rgba(0,0,0,0.18);
}
.kim-btn-outline:hover {
border-color: var(--ink);
}
.kim-btn-dark {
background: var(--ink, #0e1726);
color: #fff;
border-color: var(--ink, #0e1726);
}
.kim-btn-dark:hover {
background: #1c2840;
border-color: #1c2840;
}
.kim-dest-bento .kim-dest { aspect-ratio: auto; }
.kim-dest-bento .kim-dest--wide { aspect-ratio: auto; }
@media (max-width: 900px) {
.kim-dest-bento {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"intro intro"
"bah bah"
"med med"
"bvi win"
"usvi lee"
"gre gre";
}
.kim-dest-bento-intro { text-align: center; padding: 0; align-items: center; }
.kim-dest-bento-intro > div { justify-content: center; }
.kim-dest-bento .kim-dest--wide { aspect-ratio: 16 / 10; }
}
@media (max-width: 540px) {
.kim-dest-bento { grid-template-columns: 1fr; grid-template-areas: "intro" "bah" "med" "bvi" "win" "usvi" "lee" "gre"; }
}
/* ============ Section title — bold geometric sans (replace serif h2) ============ */
.kim-section-title {
font-family: var(--body);
font-size: clamp(1.7rem, 2.6vw, 2.3rem);
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.15;
color: var(--ink);
margin: 0;
}
/* ============ Themes — pastel head, drop shadow, centered bold title, flush image ============ */
.kim-themes {
grid-template-columns: repeat(4, 1fr);
gap: 22px;
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
}
.kim-themes .theme {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.04);
border-radius: 6px;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
color: var(--ink);
text-decoration: none;
overflow: hidden;
box-shadow: 0 14px 36px -14px rgba(20, 30, 50, 0.22), 0 4px 10px -6px rgba(20, 30, 50, 0.10);
transition: transform 280ms ease, box-shadow 280ms ease;
}
.kim-themes .theme:hover {
transform: translateY(-3px);
box-shadow: 0 22px 50px -16px rgba(20, 30, 50, 0.28), 0 6px 14px -8px rgba(20, 30, 50, 0.14);
color: var(--ink);
}
.kim-themes .kim-theme-head {
padding: 32px 18px 26px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
}
.kim-themes .kim-theme-icon {
width: 44px;
height: 44px;
color: rgba(20, 30, 50, 0.78);
display: block;
margin: 0 auto;
}
.kim-themes .theme h3 {
font-family: var(--body);
font-size: 1.05rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.2px;
text-align: center;
color: var(--ink);
margin: 0;
}
/* Per-theme pastel head tints */
.kim-themes .theme--gray .kim-theme-head { background: #ececec; }
.kim-themes .theme--green .kim-theme-head { background: #d8e6cf; }
.kim-themes .theme--blue .kim-theme-head { background: #cfe0ec; }
.kim-themes .theme--pink .kim-theme-head { background: #ead2dc; }
.kim-themes .theme-img {
aspect-ratio: 1 / 1;
border-radius: 0;
overflow: hidden;
background: var(--bg-cool);
margin: 0;
width: 100%;
}
.kim-themes .theme-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kim-themes .theme--pink .theme-img img {
object-position: center 30%;
transform: scale(1.08);
transform-origin: center;
}
.kim-themes .theme-body {
font-family: var(--body);
font-size: 0.88rem;
font-weight: 400;
line-height: 1.55;
color: #1f1f1f;
text-align: left;
gap: 0.7rem;
padding: 22px 22px 26px;
}
.kim-themes .theme-body p { margin: 0; }
@media (max-width: 1100px) {
.kim-themes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.kim-themes { grid-template-columns: 1fr; padding: 0 16px; }
}
/* ============ Meet Gizmo — text left, image right, narrower container ============ */
.kim-meet-gizmo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
max-width: 1080px;
margin: 0 auto;
padding: 0 28px;
}
.kim-meet-gizmo .kim-gizmo-text { order: 1; }
.kim-meet-gizmo .kim-gizmo-img { order: 2; }
.kim-meet-gizmo .kim-gizmo-img img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.kim-meet-gizmo .kim-section-title {
font-size: clamp(1.8rem, 2.8vw, 2.4rem);
margin-bottom: 1.1rem;
}
.kim-gizmo-lead {
font-family: var(--body);
font-size: 1.05rem;
font-weight: 500;
color: var(--ink);
margin: 0 0 1.1rem;
line-height: 1.45;
}
.kim-meet-gizmo p {
font-family: var(--body);
font-size: 0.95rem;
line-height: 1.6;
color: #4a4a4a;
margin: 0 0 0.85rem;
}
.kim-gizmo-cta { margin-top: 1.4rem; }
.kim-btn-gizmo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 1.2rem;
font-size: 0.9rem;
font-weight: 600;
}
.kim-btn-gizmo .kim-gizmo-dot {
width: 22px;
height: 22px;
border-radius: 50%;
background: #2fb6a0;
display: inline-block;
flex-shrink: 0;
}
@media (max-width: 800px) {
.kim-meet-gizmo {
grid-template-columns: 1fr;
gap: 2rem;
}
.kim-meet-gizmo .kim-gizmo-text { order: 1; }
.kim-meet-gizmo .kim-gizmo-img { order: 2; }
}
@media (max-width: 800px) {
.kim-yacht--hero { flex-direction: column; }
.kim-yacht--hero .kim-yacht-img { min-height: 0; aspect-ratio: 4/3; }
.kim-yacht--hero .kim-yacht-body { padding: 1.2rem 1.4rem 1.4rem; }
.kim-yacht--hero .kim-yacht-name { font-size: 1.4rem; }
}
/* ============ CTA — solid dark navy block ============ */
.kim-cta-dark {
background: #0e1726 !important;
color: #fff;
padding: 4.5rem 1.5rem;
text-align: center;
}
.kim-cta-dark .kim-cta-title {
font-family: var(--body);
font-size: clamp(2rem, 3.4vw, 2.8rem);
font-weight: 800;
letter-spacing: -0.6px;
line-height: 1.1;
color: #fff !important;
margin: 0 0 1rem;
}
.kim-cta-dark .kim-cta-sub {
font-family: var(--body);
font-size: 1.05rem;
font-weight: 400;
color: #fff !important;
margin: 0 0 2rem;
opacity: 0.92;
font-style: normal;
}
.kim-cta-dark .kim-cta-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.kim-cta-dark .kim-cta-btn {
display: inline-block;
background: #1a7a95;
color: #fff !important;
text-decoration: none;
font-family: var(--body);
font-size: 0.95rem;
font-weight: 600;
padding: 0.9rem 2rem;
border-radius: 4px;
transition: background 200ms ease;
border: 2px solid #1a7a95;
}
.kim-cta-dark .kim-cta-btn:hover { background: #166983; color: #fff !important; border-color: #166983; }
.kim-cta-dark .kim-cta-btn--outline {
background: transparent;
border: 2px solid #fff;
color: #fff !important;
}
.kim-cta-dark .kim-cta-btn--outline:hover { background: #fff; color: #0e1726 !important; }
/* ============ Gizmo concierge page — hero + card ============ */
.kim-gizmo-hero {
position: relative;
min-height: 720px;
padding: 8rem 1.5rem 3rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.kim-gizmo-hero-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
filter: brightness(0.85) saturate(0.95);
}
.kim-gizmo-hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(14,23,38,0.55) 0%, rgba(14,23,38,0.35) 50%, rgba(14,23,38,0.65) 100%);
}
.kim-gizmo-card {
position: relative;
z-index: 2;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(8px);
border-radius: 8px;
padding: 3rem 2.5rem 2.5rem;
max-width: 560px;
width: 100%;
text-align: center;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45), 0 8px 20px -10px rgba(0,0,0,0.25);
}
.kim-gizmo-card-icon {
width: 84px; height: 84px;
margin: 0 auto 1.4rem;
display: flex;
align-items: center;
justify-content: center;
}
.kim-gizmo-card-icon img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.kim-gizmo-card-title {
font-family: var(--body);
font-size: clamp(2rem, 3.4vw, 2.8rem);
font-weight: 800;
letter-spacing: -0.6px;
line-height: 1.1;
color: var(--ink);
margin: 0 0 0.4rem;
}
.kim-gizmo-token {
display: inline-block;
padding: 0 0.4rem;
border-left: 2px solid var(--ink);
border-right: 2px solid var(--ink);
margin: 0 0.15rem;
letter-spacing: 0.02em;
}
.kim-gizmo-card-sub {
font-family: var(--body);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #1a7a95;
margin: 0 0 1.4rem;
font-weight: 500;
}
.kim-gizmo-card-desc {
font-family: var(--body);
font-size: 0.98rem;
line-height: 1.55;
color: #2a2a2a;
margin: 0 0 2rem;
max-width: 92%;
margin-left: auto;
margin-right: auto;
}
.kim-gizmo-card-btn {
display: inline-block;
background: transparent;
color: var(--ink);
border: 1px solid var(--ink);
border-radius: 4px;
font-family: var(--body);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.75rem 2rem;
cursor: pointer;
transition: background 200ms ease, color 200ms ease;
}
.kim-gizmo-card-btn:hover { background: var(--ink); color: #fff; }
.kim-gizmo-hero-foot {
position: relative;
z-index: 2;
margin-top: 2.5rem;
text-align: center;
color: #fff;
}
.kim-gizmo-hero-q {
font-family: var(--body);
font-size: 1.1rem;
font-weight: 500;
margin: 0 0 1.2rem;
color: #fff;
}
.kim-gizmo-hero-actions {
display: flex;
justify-content: center;
gap: 0.7rem;
flex-wrap: wrap;
}
.kim-gizmo-hero-actions .kim-btn { font-size: 0.82rem; }
/* ============ Gizmo intro/form modals ============ */
.kim-modal {
position: fixed; inset: 0;
background: rgba(14, 23, 38, 0.55);
backdrop-filter: blur(4px);
z-index: 90;
display: none;
align-items: flex-start;
justify-content: center;
padding: 4rem 1rem 2rem;
overflow-y: auto;
}
.kim-modal.is-open { display: flex; }
.kim-modal-card {
position: relative;
background: #fff;
border-radius: 8px;
padding: 1.6rem 1.6rem 1.4rem;
width: 100%;
max-width: 460px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4);
margin: auto;
}
.kim-modal-card--wide { max-width: 560px; }
.kim-modal-close {
position: absolute; top: 12px; right: 12px;
width: 30px; height: 30px;
background: transparent; border: none; cursor: pointer;
color: rgba(0,0,0,0.5);
border-radius: 50%;
display: grid; place-items: center;
transition: background 160ms ease, color 160ms ease;
}
.kim-modal-close:hover { background: rgba(0,0,0,0.06); color: var(--ink); }
.kim-modal-title {
font-family: var(--body);
font-size: 1.1rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 0.9rem;
padding-right: 30px;
display: flex;
align-items: center;
gap: 0.55rem;
line-height: 1.25;
}
.kim-modal-icon { width: 22px; height: 22px; flex-shrink: 0; }
.kim-modal-desc {
font-family: var(--body);
font-size: 0.88rem;
line-height: 1.5;
color: #3a3a3a;
margin: 0 0 0.9rem;
}
.kim-modal-desc-sm {
font-family: var(--body);
font-size: 0.78rem;
color: #777;
margin: 0 0 1.1rem;
}
.kim-modal-sub {
font-family: var(--body);
font-size: 0.85rem;
color: var(--ink);
margin: 0 0 0.4rem;
}
.kim-modal-list {
margin: 0 0 1.2rem;
padding-left: 1.1rem;
font-family: var(--body);
font-size: 0.85rem;
line-height: 1.55;
color: #3a3a3a;
}
.kim-modal-list li { margin-bottom: 0.2rem; }
.kim-modal-actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
margin-top: 1rem;
}
.kim-modal-actions .kim-btn { padding: 0.55rem 1rem; font-size: 0.82rem; }
/* Form */
.kim-gz-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem 1rem;
}
.kim-gz-grid label,
.kim-gz-check {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-family: var(--body);
font-size: 0.78rem;
font-weight: 500;
color: var(--ink);
}
.kim-gz-grid input,
.kim-gz-grid select {
font-family: var(--body);
font-size: 0.88rem;
padding: 0.55rem 0.7rem;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
background: #fff;
color: var(--ink);
width: 100%;
}
.kim-gz-grid input:focus,
.kim-gz-grid select:focus {
outline: none;
border-color: #1a7a95;
box-shadow: 0 0 0 3px rgba(26,122,149,0.15);
}
.kim-gz-check {
flex-direction: row;
gap: 0.5rem;
align-items: flex-start;
margin-top: 1rem;
font-size: 0.76rem;
line-height: 1.45;
color: #555;
font-weight: 400;
}
.kim-gz-check input { margin-top: 0.15rem; flex-shrink: 0; }
@media (max-width: 540px) {
.kim-gz-grid { grid-template-columns: 1fr; }
.kim-modal { padding-top: 2rem; }
.kim-modal-actions { flex-direction: column-reverse; }
.kim-modal-actions .kim-btn { width: 100%; text-align: center; }
}
/* ============ Gizmo Q&A list ============ */
.kim-gizmo-qa { display: flex; flex-direction: column; gap: 1.6rem; }
.kim-gizmo-qa-item {
background: #fff;
border-radius: 6px;
padding: 1.6rem 1.8rem;
box-shadow: 0 6px 18px -10px rgba(20,30,50,0.15);
border: 1px solid rgba(0,0,0,0.05);
}
.kim-gizmo-qa-q {
font-family: var(--body);
font-size: 1.05rem;
font-weight: 600;
line-height: 1.45;
color: var(--ink);
margin: 0 0 0.8rem;
}
.kim-gizmo-qa-a {
font-family: var(--body);
font-size: 0.95rem;
line-height: 1.6;
color: #4a4a4a;
margin: 0;
}
@media (max-width: 600px) {
.kim-gizmo-hero { padding: 6rem 1rem 2rem; min-height: 0; }
.kim-gizmo-card { padding: 2rem 1.4rem 1.8rem; }
.kim-gizmo-card-title { font-size: 1.7rem; }
.kim-gizmo-qa-item { padding: 1.2rem 1.3rem; }
}
/* ============ Destinations page ============ */
.kim-dest-page { padding-top: 0; }
/* Parallax hero with fixed-attachment image (matches Kim's bcai-hero-parallax) */
.kim-dest-hero-parallax {
position: relative;
min-height: 70vh;
background-image: var(--bg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding-top: 70px; /* clear sticky header */
}
.kim-dest-hero-parallax::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.10) 50%, rgba(0,0,0,0.30) 100%);
}
.kim-dest-hero-content {
position: relative;
z-index: 1;
text-align: center;
padding: 2rem 1.5rem;
max-width: 1100px;
width: 100%;
}
.kim-dest-hero-title {
font-family: var(--body);
font-size: clamp(2.5rem, 5.5vw, 4.4rem);
font-weight: 300;
letter-spacing: -0.5px;
line-height: 1.1;
color: #1a2332;
margin: 0;
text-shadow: 0 1px 14px rgba(255,255,255,0.25);
}
@media (max-width: 768px) {
.kim-dest-hero-parallax {
background-attachment: scroll;
background-image: var(--bg-mobile, var(--bg));
min-height: 50vh;
}
}
/* Intro section below hero */
.kim-dest-intro {
background: #ffffff;
padding: 3.5rem 1.5rem 2rem;
}
.kim-dest-h1 {
font-family: var(--body);
font-size: clamp(2.2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.8px;
line-height: 1.1;
color: var(--ink);
margin: 0 0 1rem;
}
.kim-dest-subtitle {
font-family: var(--body);
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
font-weight: 500;
color: #1a7a95;
margin: 0 0 2rem;
}
.kim-dest-lead {
font-family: var(--body);
font-size: 1rem;
line-height: 1.6;
color: #3a3a3a;
margin: 0 auto 1rem;
max-width: 70ch;
}
.kim-dest-lead a { color: #1a7a95; }
/* Region grid — 3-col, Mediterranean spans 2 cols */
.kim-region-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
}
.kim-region-card {
background: #fff;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 14px 36px -16px rgba(20,30,50,0.18), 0 4px 10px -6px rgba(20,30,50,0.08);
transition: transform 280ms ease, box-shadow 280ms ease;
display: flex;
flex-direction: column;
}
.kim-region-card:hover {
transform: translateY(-3px);
box-shadow: 0 22px 50px -16px rgba(20,30,50,0.26), 0 6px 14px -8px rgba(20,30,50,0.12);
color: var(--ink);
}
.kim-region-card--feature { grid-column: span 2; grid-row: span 1; }
.kim-region-card--feature .kim-region-img { aspect-ratio: 16/9; }
.kim-region-img {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
}
.kim-region-body {
padding: 1.4rem 1.4rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
flex: 1;
}
.kim-region-body h3 {
font-family: var(--body);
font-size: 1.25rem;
font-weight: 700;
color: var(--ink);
margin: 0;
letter-spacing: -0.3px;
}
.kim-region-card--feature .kim-region-body h3 { font-size: 1.6rem; }
.kim-region-meta {
font-family: var(--body);
font-size: 0.78rem;
font-weight: 500;
color: #1a7a95;
margin: 0;
}
.kim-region-desc {
font-family: var(--body);
font-size: 0.88rem;
line-height: 1.55;
color: #4a4a4a;
margin: 0;
flex: 1;
}
.kim-region-cta {
font-family: var(--body);
font-size: 0.82rem;
font-weight: 600;
color: var(--ink);
margin-top: 0.4rem;
transition: color 160ms ease;
}
.kim-region-card:hover .kim-region-cta { color: #1a7a95; }
@media (max-width: 1000px) {
.kim-region-grid { grid-template-columns: repeat(2, 1fr); }
.kim-region-card--feature { grid-column: span 2; }
}
@media (max-width: 600px) {
.kim-region-grid { grid-template-columns: 1fr; padding: 0 16px; }
.kim-region-card--feature { grid-column: span 1; }
}
/* ============ Home page: top 3 special offers ============ */
.kim-home-offers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
}
.kim-home-offer {
background: #fff;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 12px 30px -14px rgba(20,30,50,0.18);
transition: transform 220ms ease, box-shadow 220ms ease;
display: flex;
flex-direction: column;
}
.kim-home-offer:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px -14px rgba(20,30,50,0.26);
color: var(--ink);
}
.kim-home-offer-img {
position: relative;
aspect-ratio: 16/10;
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
}
.kim-home-offer-body { padding: 1.1rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.kim-home-offer-body h3 {
font-family: var(--body);
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
margin: 0;
letter-spacing: -0.2px;
}
.kim-home-offer-body p {
font-family: var(--body);
font-size: 0.85rem;
line-height: 1.5;
color: #1a7a95;
margin: 0;
}
.kim-home-offer-meta {
color: #777 !important;
font-size: 0.75rem !important;
margin-top: 0.4rem !important;
}
@media (max-width: 1000px) { .kim-home-offers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kim-home-offers { grid-template-columns: 1fr; padding: 0 16px; } }
/* ============ Special Offers page ============ */
.kim-offers-hero {
position: relative;
min-height: 100vh;
background-image: var(--bg);
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 6rem 1.5rem 4rem;
}
.kim-offers-hero::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8,18,30,0.55) 0%, rgba(8,18,30,0.45) 50%, rgba(8,18,30,0.65) 100%);
}
.kim-offers-hero-content {
position: relative; z-index: 1;
text-align: center;
max-width: 1200px;
width: 100%;
}
.kim-offers-hero-eyebrow {
font-family: var(--body);
font-size: 1.05rem;
font-weight: 500;
color: #fff;
margin: 0 0 1rem;
}
.kim-offers-hero-title {
font-family: var(--body);
font-size: clamp(2rem, 4.4vw, 3.6rem);
font-weight: 700;
letter-spacing: -0.6px;
line-height: 1.05;
color: #fff;
margin: 0 0 2.4rem;
}
.kim-offers-pills {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
justify-content: center;
margin-bottom: 0.8rem;
}
.kim-offers-pills--types { margin-top: 0.5rem; }
.kim-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #ff7a5a;
color: #fff;
font-family: var(--body);
font-size: 0.85rem;
font-weight: 600;
padding: 0.55rem 1.1rem;
border-radius: 999px;
border: none;
cursor: pointer;
transition: background 200ms ease, transform 160ms ease;
}
.kim-pill:hover { background: #f06342; transform: translateY(-1px); }
.kim-pill.is-active { background: #d04a2a; box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
.kim-pill span {
background: rgba(255,255,255,0.95);
color: #1a1a1a;
border-radius: 999px;
padding: 0.05rem 0.5rem;
font-size: 0.74rem;
font-weight: 700;
min-width: 24px;
text-align: center;
}
.kim-pill--type {
background: #f88f74;
font-size: 0.78rem;
padding: 0.45rem 0.95rem;
}
/* Tailored offers intro */
.kim-offers-eyebrow {
font-family: var(--body);
font-size: 1rem;
font-weight: 500;
color: #555;
margin: 0 0 0.8rem;
}
.kim-offers-counter {
font-family: var(--body);
font-size: 1.4rem;
margin: 1.6rem 0 1.2rem;
color: var(--ink);
}
.kim-offers-counter span {
color: #ff7a5a;
font-weight: 700;
font-size: 1.6rem;
margin-right: 0.4rem;
}
.kim-offers-refine {
display: inline-flex;
align-items: center;
gap: 0.55rem;
background: #ff7a5a;
color: #fff;
border: none;
padding: 0.85rem 1.6rem;
border-radius: 999px;
font-family: var(--body);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: background 200ms ease, transform 160ms ease;
}
.kim-offers-refine:hover { background: #f06342; transform: translateY(-1px); }
/* Offer cards grid (2-col like Kim) */
.kim-offers-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
}
.kim-offer-card {
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 12px 30px -14px rgba(20,30,50,0.18);
display: flex;
flex-direction: column;
}
.kim-offer-img {
position: relative;
aspect-ratio: 16/9;
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
}
.kim-offer-save {
position: absolute;
top: 12px;
right: 12px;
background: #ff5a3c;
color: #fff;
font-family: var(--body);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 0.35rem 0.7rem;
border-radius: 3px;
}
.kim-offer-yacht-overlay {
position: absolute;
bottom: 12px;
left: 16px;
color: #fff;
text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.kim-offer-yacht-overlay h4 {
font-family: var(--body);
font-size: 1.15rem;
font-weight: 700;
margin: 0;
letter-spacing: 0.02em;
}
.kim-offer-yacht-overlay p {
font-family: var(--body);
font-size: 0.78rem;
margin: 0.2rem 0 0;
color: rgba(255,255,255,0.92);
}
.kim-offer-body {
padding: 1.4rem 1.6rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.kim-offer-eyebrow {
font-family: var(--body);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.16em;
color: #1a7a95;
margin: 0;
}
.kim-offer-title {
font-family: var(--body);
font-size: 1.3rem;
font-weight: 700;
color: var(--ink);
margin: 0.2rem 0 0.5rem;
letter-spacing: -0.3px;
line-height: 1.25;
}
.kim-offer-desc {
font-family: var(--body);
font-size: 0.92rem;
line-height: 1.5;
color: #1a7a95;
margin: 0 0 0.6rem;
}
.kim-offer-meta {
font-family: var(--body);
font-size: 0.82rem;
color: #4a4a4a;
margin: 0;
}
.kim-offer-price {
margin-top: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.kim-offer-was {
font-family: var(--body);
font-size: 1rem;
color: #999;
text-decoration: line-through;
}
.kim-offer-now {
font-family: var(--body);
font-size: 1.4rem;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.4px;
}
.kim-offer-btn {
display: block;
background: #ff7a5a;
color: #fff !important;
font-family: var(--body);
font-size: 0.95rem;
font-weight: 600;
text-align: center;
padding: 1rem;
border-radius: 4px;
margin-top: 1.2rem;
text-decoration: none;
transition: background 200ms ease;
}
.kim-offer-btn:hover { background: #f06342; }
@media (max-width: 800px) {
.kim-offers-grid { grid-template-columns: 1fr; }
.kim-offers-hero { min-height: 80vh; padding: 4rem 1rem 3rem; }
}
/* ============ Itineraries page ============ */
.kim-itin-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
}
.kim-itin-card {
background: #fff;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 12px 30px -14px rgba(20,30,50,0.18), 0 3px 8px -4px rgba(20,30,50,0.08);
transition: transform 250ms ease, box-shadow 250ms ease;
display: flex;
flex-direction: column;
}
.kim-itin-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px -14px rgba(20,30,50,0.26);
color: var(--ink);
}
.kim-itin-card-img {
aspect-ratio: 16/9;
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
}
.kim-itin-card-body {
padding: 1.1rem 1.2rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
flex: 1;
}
.kim-itin-card-eyebrow {
font-family: var(--body);
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #1a7a95;
}
.kim-itin-card-body h3 {
font-family: var(--body);
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
margin: 0;
letter-spacing: -0.3px;
}
.kim-itin-card-body p {
font-family: var(--body);
font-size: 0.85rem;
line-height: 1.5;
color: #4a4a4a;
margin: 0;
}
@media (max-width: 1100px) { .kim-itin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kim-itin-grid { grid-template-columns: 1fr; padding: 0 16px; } }
/* Featured itinerary card (50/50 split) */
.kim-itin-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: #fff;
border-radius: 6px;
overflow: hidden;
max-width: 1180px;
margin: 0 auto 22px;
text-decoration: none;
color: var(--ink);
box-shadow: 0 12px 30px -14px rgba(20,30,50,0.18);
transition: transform 250ms ease, box-shadow 250ms ease;
}
.kim-itin-feature:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(20,30,50,0.24); color: var(--ink); }
.kim-itin-feature-img {
position: relative;
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
min-height: 280px;
}
.kim-itin-feature-body {
padding: 2rem 2rem 1.8rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.kim-itin-feature-body h3 {
font-family: var(--body);
font-size: 1.3rem;
font-weight: 600;
line-height: 1.35;
color: #0d4a6b;
margin: 0 0 1rem;
}
@media (max-width: 800px) {
.kim-itin-feature { grid-template-columns: 1fr; }
}
/* Itinerary badge (region pill on top-left of image) */
.kim-itin-badge {
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.55);
color: #fff;
font-family: var(--body);
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 0.4rem 0.8rem;
}
/* Itin meta (nights / days) */
.kim-itin-meta {
font-family: var(--body);
font-size: 0.78rem;
font-weight: 500;
color: #555;
margin: 0.4rem 0 0.9rem;
}
/* Olive/sage Explore Itinerary button (matches Kim) */
.kim-itin-btn {
display: inline-block;
background: #6e7050;
color: #fff !important;
font-family: var(--body);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
padding: 0.55rem 1rem;
border-radius: 3px;
align-self: flex-start;
transition: background 200ms ease;
}
.kim-itin-card:hover .kim-itin-btn,
.kim-itin-feature:hover .kim-itin-btn { background: #585a40; }
/* Styled itin card (3-col grid with badge + Explore button) */
.kim-itin-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .kim-itin-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kim-itin-grid--3 { grid-template-columns: 1fr; } }
.kim-itin-card--styled .kim-itin-card-img { position: relative; }
.kim-itin-card--styled .kim-itin-card-body h3 {
font-family: var(--body);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
color: var(--ink);
margin: 0 0 0.5rem;
}
/* Inline Ask GIZMO bar (between FAQ and region sections) */
.kim-itin-askbar {
background: #ececec;
padding: 1.6rem 1rem;
}
.kim-itin-askbtn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: #0e1726;
color: #fff !important;
font-family: var(--body);
font-size: 0.85rem;
font-weight: 600;
padding: 0.6rem 1.4rem;
border-radius: 999px;
text-decoration: none;
transition: background 200ms ease;
}
.kim-itin-askbtn:hover { background: #1c2840; }
/* Region itinerary section header */
.kim-itin-region { padding-block: 4rem 3rem; }
.kim-itin-region-eyebrow {
font-family: var(--body);
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: #b89060;
margin: 0 0 0.5rem;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
padding: 0 28px;
}
.kim-itin-region-title {
font-family: var(--body);
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
font-weight: 800;
letter-spacing: -0.5px;
color: var(--ink);
margin: 0 auto 2rem;
max-width: 1180px;
padding: 0 28px;
}
/* Discover Curated split — image left, text right */
.kim-itin-discover {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 3rem;
align-items: center;
}
.kim-itin-discover-img {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
border-radius: 6px;
background-color: var(--bg-cool);
}
@media (max-width: 800px) {
.kim-itin-discover { grid-template-columns: 1fr; gap: 1.8rem; }
.kim-itin-discover-body { text-align: center; }
}
/* Two-column expertise + planning */
.kim-itin-twocol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
@media (max-width: 800px) {
.kim-itin-twocol { grid-template-columns: 1fr; gap: 2rem; }
}
/* Hero eyebrow & tag (used on itineraries page) */
.kim-dest-hero-eyebrow {
font-family: var(--body);
font-size: 0.78rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.22em;
color: rgba(26,35,50,0.7);
margin: 0.8rem 0 0;
}
.kim-dest-hero-tag {
font-family: var(--body);
font-size: 1.2rem;
font-weight: 400;
color: rgba(26,35,50,0.85);
margin: 0.5rem 0 0;
font-style: italic;
}
/* Bullets + prose */
.kim-dest-bullets {
margin: 1.5rem 0;
padding-left: 1.4rem;
font-family: var(--body);
font-size: 0.96rem;
line-height: 1.7;
color: #1f1f1f;
}
.kim-dest-bullets li { margin-bottom: 0.4rem; }
.kim-dest-prose {
font-family: var(--body);
font-size: 0.98rem;
line-height: 1.65;
color: #2a2a2a;
margin: 0 0 1.2rem;
}
.kim-dest-prose a { color: #1a7a95; }
.kim-dest-h3 {
font-family: var(--body);
font-size: 1.4rem;
font-weight: 700;
color: var(--ink);
margin: 2.5rem 0 1rem;
letter-spacing: -0.3px;
}
/* ============ Kim-style yacht results layout (filter, hero, 3-col grid, pager) ============ */
.kim-yacht-filter {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
justify-content: center;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 6px;
padding: 0.6rem 0.9rem;
max-width: 1180px;
margin: 0 auto 1.8rem;
font-family: var(--body);
font-size: 0.78rem;
}
.kim-yacht-refine {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #fff;
border: 1px solid rgba(0,0,0,0.18);
border-radius: 999px;
padding: 0.4rem 0.85rem;
font-size: 0.78rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
}
.kim-yacht-refine-count {
background: var(--ink);
color: #fff;
border-radius: 999px;
padding: 0.05rem 0.45rem;
font-size: 0.7rem;
font-weight: 700;
}
.kim-yacht-currency, .kim-yacht-view {
display: inline-flex;
border: 1px solid rgba(0,0,0,0.18);
border-radius: 4px;
overflow: hidden;
}
.kim-yacht-currency button, .kim-yacht-view button {
background: #fff;
border: none;
padding: 0.4rem 0.7rem;
font-family: var(--body);
font-size: 0.75rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
border-right: 1px solid rgba(0,0,0,0.1);
display: inline-flex;
align-items: center;
justify-content: center;
}
.kim-yacht-currency button:last-child, .kim-yacht-view button:last-child { border-right: none; }
.kim-yacht-currency button.is-active, .kim-yacht-view button.is-active {
background: var(--ink);
color: #fff;
}
.kim-yacht-sort select {
background: #fff;
border: 1px solid rgba(0,0,0,0.18);
border-radius: 4px;
padding: 0.4rem 0.7rem;
font-family: var(--body);
font-size: 0.78rem;
color: var(--ink);
cursor: pointer;
}
.kim-yacht-count {
margin: 0 0 0 auto;
font-size: 0.75rem;
color: #666;
}
.kim-yacht-count strong { color: var(--ink); }
/* Hero yacht card (large, 2-col split) */
.kim-yacht-hero {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 0;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 6px;
overflow: hidden;
max-width: 1180px;
margin: 0 auto 1.5rem;
box-shadow: 0 12px 30px -14px rgba(20,30,50,0.18);
text-decoration: none;
color: var(--ink);
transition: box-shadow 250ms ease, transform 250ms ease;
}
.kim-yacht-hero:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -14px rgba(20,30,50,0.26); color: var(--ink); }
.kim-yacht-hero-img {
position: relative;
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
min-height: 360px;
}
.kim-yacht-photos {
position: absolute;
bottom: 12px;
left: 12px;
background: rgba(0,0,0,0.7);
color: #fff;
padding: 0.3rem 0.7rem;
font-size: 0.72rem;
border-radius: 3px;
font-family: var(--body);
}
.kim-yacht-hero-body { padding: 1.6rem 1.8rem 1.8rem; display: flex; flex-direction: column; gap: 0.55rem; }
.kim-yacht-hero-body h3 {
font-family: var(--body);
font-size: 1.65rem;
font-weight: 700;
color: var(--ink);
margin: 0;
letter-spacing: -0.4px;
}
.kim-yacht-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0; }
.kim-yacht-tag {
font-family: var(--body);
font-size: 0.66rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #1a7a95;
border: 1px solid #1a7a95;
padding: 0.2rem 0.55rem;
border-radius: 3px;
background: rgba(26,122,149,0.05);
}
.kim-yacht-meta {
font-family: var(--body);
font-size: 0.85rem;
color: #4a4a4a;
margin: 0;
font-weight: 500;
}
.kim-yacht-loc {
font-family: var(--body);
font-size: 0.78rem;
color: #1a7a95;
margin: 0;
font-weight: 500;
}
.kim-yacht-price {
font-family: var(--body);
font-size: 0.95rem;
color: var(--ink);
margin: 0;
}
.kim-yacht-price strong { font-weight: 700; }
.kim-yacht-price span { color: #777; font-size: 0.8rem; }
.kim-yacht-desc {
font-family: var(--body);
font-size: 0.85rem;
line-height: 1.5;
color: #4a4a4a;
margin: 0.4rem 0 0;
}
.kim-yacht-view-btn {
display: block;
background: var(--ink);
color: #fff !important;
font-family: var(--body);
font-size: 0.85rem;
font-weight: 600;
text-align: center;
padding: 0.85rem;
border-radius: 4px;
margin-top: 1rem;
transition: background 200ms ease;
}
.kim-yacht-view-btn::before {
content: '👁';
margin-right: 0.4rem;
opacity: 0.8;
}
.kim-yacht-hero:hover .kim-yacht-view-btn,
.kim-yacht-card:hover .kim-yacht-view-btn { background: #1c2840; }
/* 3-column grid */
.kim-yacht-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
max-width: 1180px;
margin: 0 auto;
}
.kim-yacht-card {
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 8px 20px -10px rgba(20,30,50,0.14);
transition: transform 220ms ease, box-shadow 220ms ease;
display: flex;
flex-direction: column;
}
.kim-yacht-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px -14px rgba(20,30,50,0.22);
color: var(--ink);
}
.kim-yacht-card-img {
position: relative;
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
}
.kim-yacht-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.kim-yacht-card-body h3 {
font-family: var(--body);
font-size: 1.15rem;
font-weight: 700;
color: var(--ink);
margin: 0;
letter-spacing: -0.3px;
}
/* Pagination */
.kim-yacht-pager {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
margin: 2.4rem 0 0;
}
.kim-yacht-pager button, .kim-yacht-pager span {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(0,0,0,0.15);
background: #fff;
border-radius: 50%;
font-family: var(--body);
font-size: 0.85rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: background 200ms ease, color 200ms ease;
}
.kim-yacht-pager span { border: none; }
.kim-yacht-pager button.is-active { background: #1a7a95; color: #fff; border-color: #1a7a95; }
.kim-yacht-pager button:hover:not(.is-active) { border-color: var(--ink); }
@media (max-width: 1100px) { .kim-yacht-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
.kim-yacht-hero { grid-template-columns: 1fr; }
.kim-yacht-hero-img { min-height: 240px; }
.kim-yacht-grid { grid-template-columns: 1fr; }
.kim-yacht-filter { flex-direction: column; align-items: stretch; }
.kim-yacht-count { margin: 0; text-align: center; }
}
/* Featured yachts grid */
.kim-feat-yachts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
max-width: 1180px;
margin: 0 auto;
padding: 0 28px;
}
.kim-feat-yacht {
background: #fff;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 12px 30px -14px rgba(20,30,50,0.18), 0 3px 8px -4px rgba(20,30,50,0.08);
transition: transform 250ms ease, box-shadow 250ms ease;
display: flex;
flex-direction: column;
}
.kim-feat-yacht:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px -14px rgba(20,30,50,0.26);
color: var(--ink);
}
.kim-feat-yacht-img {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
}
.kim-feat-yacht-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.25rem; }
.kim-feat-yacht-body h3 {
font-family: var(--body);
font-size: 1rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 0.3rem;
letter-spacing: -0.2px;
}
.kim-feat-yacht-meta {
font-family: var(--body);
font-size: 0.78rem;
color: #5a5a5a;
margin: 0;
line-height: 1.4;
}
.kim-feat-yacht-loc {
font-family: var(--body);
font-size: 0.78rem;
font-weight: 500;
color: #1a7a95;
margin: 0.2rem 0 0;
}
.kim-feat-yacht-price {
font-family: var(--body);
font-size: 0.85rem;
font-weight: 600;
color: var(--ink);
margin: 0.5rem 0 0;
}
@media (max-width: 1100px) { .kim-feat-yachts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .kim-feat-yachts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .kim-feat-yachts { grid-template-columns: 1fr; } }
/* Builders eyebrow (replaces .eyebrow inside light section) */
.kim-builders-eyebrow {
font-family: var(--body);
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #888;
margin: 0;
}
/* FAQ accordion */
.kim-dest-faq { display: flex; flex-direction: column; gap: 0.8rem; }
.kim-faq-item {
background: #fff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 6px;
padding: 0;
box-shadow: 0 4px 14px -8px rgba(20,30,50,0.1);
}
.kim-faq-item summary {
font-family: var(--body);
font-size: 1rem;
font-weight: 600;
color: var(--ink);
padding: 1.1rem 1.4rem;
cursor: pointer;
list-style: none;
position: relative;
}
.kim-faq-item summary::-webkit-details-marker { display: none; }
.kim-faq-item summary::after {
content: '+';
position: absolute;
right: 1.4rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.4rem;
color: #1a7a95;
font-weight: 400;
transition: transform 200ms ease;
}
.kim-faq-item[open] summary::after { content: '−'; }
.kim-faq-item p {
font-family: var(--body);
font-size: 0.92rem;
line-height: 1.6;
color: #4a4a4a;
margin: 0;
padding: 0 1.4rem 1.2rem;
}
/* ============ Kim-style footer with animated wave ============ */
.kim-footer {
position: relative;
background: #f5f3ee; /* cream — visible above the wave only */
color: #1a2332;
padding: 0;
overflow: hidden;
margin-top: 0;
min-height: 520px;
}
/* Animated wave SVG — full-width, anchored to bottom, stretches edge to edge.
The SVG is filled blue below its curve so it doubles as the bottom-half background.
Two layers: --back (darker, slightly higher) + --front (lighter sky blue, lower). */
.kim-footer-wave {
position: absolute;
left: 0; right: 0;
width: 100%;
z-index: 0;
pointer-events: none;
}
.kim-footer-wave img {
width: 100%;
height: 100%;
display: block;
}
.kim-footer-wave--back {
bottom: 28px; /* peeks only ~28px above front — thinner band */
height: 72%;
z-index: 0;
filter: brightness(0.38) saturate(1.5) hue-rotate(-10deg);
opacity: 1;
left: -8%;
right: -8%;
width: 116%;
}
.kim-footer-wave--back img {
/* Same 8s period as front but INVERTED motion — always opposite direction */
animation: kim-wave-bob-back 8s ease-in-out infinite;
}
.kim-footer-wave--front {
bottom: 0;
height: 75%;
z-index: 1;
left: -6%;
right: -6%;
width: 112%;
}
.kim-footer-wave--front img {
animation: kim-wave-bob-front 8s ease-in-out infinite;
}
/* Always-opposing motion: when front goes UP+LEFT, back goes DOWN+RIGHT, and vice versa.
Both 8s period, mirrored at every keyframe → never moving same direction at same time. */
@keyframes kim-wave-bob-front {
0% { transform: translate(0, 0) scaleY(1); }
25% { transform: translate(-1.4%, -10px) scaleY(1.03); } /* up + left */
50% { transform: translate(0, 0) scaleY(1); }
75% { transform: translate(1.4%, 6px) scaleY(0.98); } /* down + right */
100% { transform: translate(0, 0) scaleY(1); }
}
@keyframes kim-wave-bob-back {
0% { transform: translate(0, 0) scaleY(1); }
25% { transform: translate(1.8%, 8px) scaleY(0.97); } /* down + right (opposite of front) */
50% { transform: translate(0, 0) scaleY(1); }
75% { transform: translate(-1.8%, -14px) scaleY(1.05); } /* up + left (opposite of front) */
100% { transform: translate(0, 0) scaleY(1); }
}
.kim-footer-inner {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
padding: 4rem 1.5rem 1.5rem;
}
.kim-footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 3rem;
}
.kim-footer-col h4 {
font-family: var(--body);
font-size: 0.95rem;
font-weight: 700;
color: #1a2332;
margin: 0 0 1rem;
letter-spacing: 0.02em;
}
.kim-footer-col a {
display: block;
font-family: var(--body);
font-size: 0.85rem;
color: #1a2332;
text-decoration: none;
margin-bottom: 0.55rem;
transition: color 160ms ease;
line-height: 1.4;
}
.kim-footer-col a:hover { color: #0d4a6b; text-decoration: underline; }
.kim-footer-brand {
font-family: var(--body);
font-size: 0.9rem;
font-weight: 700;
color: #1a2332;
margin: 0 0 0.6rem;
}
.kim-footer-addr {
font-family: var(--body);
font-size: 0.82rem;
color: #1a2332;
margin: 0 0 0.8rem;
line-height: 1.5;
}
.kim-footer-link {
display: block;
font-family: var(--body);
font-size: 0.82rem;
color: #0d4a6b !important;
text-decoration: underline;
margin-bottom: 0.35rem;
}
.kim-footer-social {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}
.kim-footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
background: #1a2332;
color: #ffffff;
border-radius: 4px;
margin: 0;
transition: background 200ms ease;
}
.kim-footer-social a svg { width: 16px; height: 16px; }
.kim-footer-social a:hover { background: #0d4a6b; }
.kim-footer-copy {
text-align: center;
padding-top: 1.5rem;
margin-top: 1rem;
border-top: 1px solid rgba(26,35,50,0.18);
}
.kim-footer-copy p {
font-family: var(--body);
font-size: 0.78rem;
color: #1a2332;
margin: 0;
letter-spacing: 0.04em;
}
.kim-footer-copy strong { font-weight: 700; }
@media (max-width: 900px) {
.kim-footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.kim-footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
.kim-footer-inner { padding: 4rem 1.2rem 1.5rem; }
}
/* ============ Header — minimal: logo + hamburger only ============ */
/* ============ Nav-utility (search/wallet/phone + Login|Register) ============ */
.kim-nav-util {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-right: 0.6rem;
}
.kim-nav-util-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
color: var(--ink);
cursor: pointer;
border-radius: 50%;
transition: background 160ms ease, color 160ms ease;
text-decoration: none;
}
.kim-nav-util-icon:hover { background: rgba(0,0,0,0.06); color: #1a7a95; }
.kim-nav-util-text {
font-family: var(--body);
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink);
text-decoration: none;
margin-left: 0.4rem;
white-space: nowrap;
}
.kim-nav-util-text span { color: rgba(0,0,0,0.3); margin: 0 0.3rem; }
.kim-nav-util-text:hover { color: #1a7a95; }
@media (max-width: 1280px) {
.kim-nav-util-text { display: none; }
}
@media (max-width: 1180px) {
.kim-nav-util { display: none; }
}
/* ============ Floating action buttons (WhatsApp + TTS) ============ */
.kim-fab-stack {
position: fixed;
right: 18px;
bottom: 18px;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 70;
}
.kim-fab {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
border: none;
cursor: pointer;
box-shadow: 0 8px 22px -6px rgba(0,0,0,0.35);
transition: transform 200ms ease, box-shadow 200ms ease, background 160ms ease;
color: #fff;
text-decoration: none;
}
.kim-fab:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 14px 32px -8px rgba(0,0,0,0.45);
}
.kim-fab--wa {
background: #25d366;
}
.kim-fab--wa:hover { background: #1da851; color: #fff; }
/* StitcherNX Click-to-Talk button (separate from kim-fab stack — bottom-LEFT) */
.ctt-btn {
position: fixed;
bottom: 18px;
left: 18px;
z-index: 70;
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid rgba(26,122,149,0.4);
background: rgba(14,23,38,0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: #cfe7f9;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.ctt-btn:hover { border-color: #1a7a95; color: #fff; transform: scale(1.08); }
.ctt-btn.active { border-color: #1a7a95; color: #fff; box-shadow: 0 0 20px rgba(26,122,149,0.4); }
.ctt-btn.speaking { animation: ctt-pulse 1.5s ease-in-out infinite; }
@keyframes ctt-pulse {
0%, 100% { box-shadow: 0 0 10px rgba(26,122,149,0.25); }
50% { box-shadow: 0 0 26px rgba(26,122,149,0.55); }
}
.ctt-toast {
position: fixed;
bottom: 76px;
left: 18px;
z-index: 70;
background: rgba(14,23,38,0.94);
backdrop-filter: blur(12px);
color: #cfe7f9;
padding: 8px 16px;
border-radius: 6px;
font-family: var(--body);
font-size: 0.78rem;
border: 1px solid rgba(26,122,149,0.35);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
max-width: 260px;
}
.ctt-toast.visible { opacity: 1; transform: translateY(0); }
.ctt-reading {
outline: 2px solid rgba(26,122,149,0.6) !important;
outline-offset: 3px;
background: rgba(26,122,149,0.06) !important;
transition: outline 0.2s, background 0.2s;
}
.ctt-hover {
outline: 1px dashed rgba(26,122,149,0.4) !important;
outline-offset: 2px;
cursor: pointer !important;
}
.ctt-sentence-highlight {
background: rgba(26,122,149,0.16) !important;
border-radius: 2px;
transition: background 0.15s;
}
@media (max-width: 540px) {
.kim-fab-stack { right: 12px; bottom: 12px; }
.kim-fab { width: 46px; height: 46px; }
}
/* ============ Kim-style FULL header ============ */
.site-header.kim-header-full {
position: fixed;
top: 0; left: 0; right: 0;
background: #ffffff !important;
background-image: none !important;
color: var(--ink);
border-bottom: 1px solid rgba(0,0,0,0.06);
padding: 0.7rem 1.5rem;
display: flex;
align-items: center;
gap: 1.2rem;
box-shadow: none;
z-index: 50;
}
.kim-header-full .brand {
color: var(--ink) !important;
font-family: var(--body) !important;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
}
.kim-header-full .brand-logo { height: 32px; width: auto; filter: none !important; }
.kim-header-full .brand-text {
font-family: var(--body);
font-size: 0.92rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--ink);
}
.kim-header-full .kim-nav {
display: inline-flex !important;
flex-wrap: nowrap;
gap: 0.15rem;
align-items: center;
margin-left: auto;
margin-right: 0;
}
.kim-header-full .kim-nav a {
font-family: var(--body) !important;
font-size: 0.8rem;
font-weight: 500;
color: var(--ink) !important;
text-decoration: none;
padding: 0.45rem 0.6rem;
border-radius: 4px;
text-transform: none !important;
letter-spacing: 0 !important;
border: none;
transition: color 160ms ease;
white-space: nowrap;
}
.kim-header-full .kim-nav a::after { display: none !important; }
.kim-header-full .kim-nav a:hover { color: #1a7a95 !important; }
.kim-header-full .kim-nav a[aria-current="page"]:not(.kim-nav-gizmo) {
color: #1a7a95 !important;
font-weight: 600;
border-bottom: 2px solid #1a7a95;
border-radius: 0;
}
/* "Ask Gizmo" pill */
.kim-header-full .kim-nav-gizmo,
.kim-header-full .kim-nav-gizmo:visited,
.kim-header-full .kim-nav-gizmo:link {
background: #0e1726 !important;
color: #ffffff !important;
border-radius: 999px !important;
padding: 0.55rem 1.15rem !important;
display: inline-flex !important;
align-items: center;
gap: 0.55rem;
font-size: 0.85rem !important;
font-weight: 600 !important;
border-bottom: none !important;
text-shadow: none;
}
.kim-header-full .kim-nav-gizmo * { color: #ffffff !important; }
.kim-header-full .kim-nav-gizmo:hover { background: #1c2840 !important; color: #ffffff !important; }
.kim-nav-gizmo-dot {
width: 11px; height: 11px;
border-radius: 50%;
background: #2fb6a0 !important;
display: inline-block;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
/* Hide hamburger on desktop, show on mobile */
.kim-header-full .nav-toggle { display: none; color: var(--ink); border-color: rgba(0,0,0,0.15); }
/* Hide floating Ask Gizmo button — covered by nav pill + in-page CTAs */
.concierge-trigger { display: none !important; }
@media (max-width: 1180px) {
.kim-header-full .kim-nav { display: none !important; }
.kim-header-full .nav-toggle { display: grid !important; }
.kim-header-full .brand-text { display: none; }
}
.yacht-card {
background: var(--paper);
border-radius: 14px;
overflow: hidden;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
display: flex;
flex-direction: column;
border: 1px solid var(--line);
color: var(--ink);
box-shadow: 0 1px 0 rgba(14, 43, 61, 0.02);
}
.section--dark .yacht-card, .section--ocean .yacht-card {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
color: white;
}
.yacht-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--ocean); }
.yacht-card-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg-cool);
}
.yacht-card-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease);
}
.yacht-card:hover .yacht-card-media img { transform: scale(1.06); }
.yacht-card-tag {
position: absolute;
top: 1rem; left: 1rem;
background: rgba(255, 255, 255, 0.92);
color: var(--ocean);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.2em;
padding: 0.4rem 0.7rem;
border-radius: 999px;
backdrop-filter: blur(6px);
font-weight: 600;
}
.yacht-card-body { padding: var(--space-md); flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }
.yacht-card-body h3 {
font-size: 1.45rem;
font-weight: 500;
color: var(--ink);
}
.section--dark .yacht-card-body h3, .section--ocean .yacht-card-body h3 { color: white; }
.yacht-meta {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
font-size: 0.74rem;
color: var(--ink-mute);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.section--dark .yacht-meta, .section--ocean .yacht-meta { color: rgba(255, 255, 255, 0.62); }
.yacht-meta span + span::before {
content: '·';
margin-right: 0.6rem;
opacity: 0.4;
}
.yacht-card-tagline {
font-size: 0.92rem;
color: var(--ink-soft);
line-height: 1.55;
}
.section--dark .yacht-card-tagline, .section--ocean .yacht-card-tagline { color: rgba(255, 255, 255, 0.7); }
.yacht-card-foot {
margin-top: auto;
padding-top: var(--space-sm);
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
}
.section--dark .yacht-card-foot, .section--ocean .yacht-card-foot { border-top-color: rgba(255, 255, 255, 0.12); }
/* ---------- Destination grid (image-led) --------------------- */
.destination-grid {
display: grid;
gap: var(--space-md);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
/* 3D flip card */
.dest-card {
position: relative;
aspect-ratio: 3 / 4;
perspective: 1400px;
cursor: pointer;
color: white;
border: 0;
background: transparent;
isolation: isolate;
}
.dest-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 720ms cubic-bezier(0.7, 0, 0.3, 1);
transform-style: preserve-3d;
border-radius: 18px;
box-shadow: 0 18px 36px -22px rgba(14, 43, 61, 0.45);
}
/* Hover-flip on devices with a real pointer (desktop) */
@media (hover: hover) and (pointer: fine) {
.dest-card:hover .dest-card-inner,
.dest-card:focus-within .dest-card-inner {
transform: rotateY(180deg) translateY(-4px);
box-shadow: 0 28px 48px -22px rgba(14, 43, 61, 0.55);
}
}
/* Touch / no-hover fallback — tap toggles .is-flipped */
.dest-card.is-flipped .dest-card-inner {
transform: rotateY(180deg) translateY(-4px);
box-shadow: 0 28px 48px -22px rgba(14, 43, 61, 0.55);
}
.dest-card-face {
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 18px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.dest-card-face--front {
background: var(--aegean) center/cover no-repeat;
color: white;
}
.dest-card-face--front::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,43,61,0.05) 0%, rgba(14,43,61,0.78) 70%, rgba(14,43,61,0.92) 100%);
z-index: 0;
}
.dest-card-front-overlay {
position: relative;
z-index: 1;
margin-top: auto;
padding: var(--space-md);
display: flex;
flex-direction: column;
}
.dest-card-flip-hint {
margin-top: 0.6rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
align-self: flex-start;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.25);
padding: 0.4rem 0.7rem;
border-radius: 999px;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: white;
transition: background 240ms var(--ease), border-color 240ms var(--ease);
}
.dest-card:hover .dest-card-flip-hint { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); }
.dest-card-face--back {
transform: rotateY(180deg);
background: var(--midnight);
color: white;
padding: var(--space-md);
justify-content: space-between;
}
.dest-card-face--back .dest-card-meta { color: var(--brass-bright); margin-bottom: 0.5rem; }
.dest-card-face--back h3 {
font-family: var(--display);
font-size: 1.7rem;
font-weight: 400;
margin: 0 0 0.7rem;
color: white;
}
.dest-card-summary {
font-size: 0.85rem;
line-height: 1.55;
opacity: 0.9;
margin: 0 0 0.8rem;
flex-grow: 0;
}
.dest-card-highlights {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.dest-card-highlights li {
font-size: 0.78rem;
color: rgba(255,255,255,0.78);
padding-left: 0.9rem;
position: relative;
}
.dest-card-highlights li::before {
content: '';
position: absolute;
left: 0; top: 0.5em;
width: 4px; height: 4px;
border-radius: 50%;
background: var(--brass-bright);
}
.dest-card-cta {
margin-top: auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.1rem;
background: var(--brass);
color: var(--midnight);
border-radius: 999px;
font: 500 0.78rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.14em;
text-decoration: none;
transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.dest-card-cta:hover { background: var(--brass-bright); transform: translateX(2px); }
.dest-card-cta span { font-size: 0.95rem; }
.dest-card h3 {
font-family: var(--display);
font-size: 1.9rem;
font-weight: 400;
margin: 0 0 0.4rem;
color: white;
line-height: 1.05;
}
.dest-card-meta {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--brass-bright);
margin-bottom: 0.5rem;
z-index: 2;
}
/* Legacy variants kept for compatibility */
.dest-card--wide { aspect-ratio: 16 / 9; }
.dest-card--tall { aspect-ratio: 3 / 5; }
@media (max-width: 700px) {
.dest-card-face--back h3 { font-size: 1.4rem; }
.dest-card-summary { font-size: 0.8rem; }
.dest-card-highlights li { font-size: 0.72rem; }
}
@media (prefers-reduced-motion: reduce) {
.dest-card-inner { transition: none; }
.dest-card.is-flipped .dest-card-inner { transform: rotateY(180deg); }
}
/* ==================== Browse-by-type — exact match to her existing site ==================== */
.type-browse {
padding: var(--space-2xl) 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
color: white;
}
.type-browse-head {
text-align: center;
max-width: 760px;
margin: 0 auto var(--space-xl);
}
.type-browse-head h2 { color: white; }
.type-browse-head p { color: white; }
.type-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
}
.type-card {
appearance: none;
background: white;
color: var(--ink);
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 8px;
padding: 0;
text-align: center;
cursor: pointer;
overflow: hidden;
box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
width: calc(25% - 1.125rem); /* 4-up on desktop */
min-width: 240px;
max-width: 270px;
}
.type-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.type-card-img {
height: 220px;
overflow: hidden;
background: var(--bg-cool);
flex-shrink: 0;
}
.type-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.type-card-body {
padding: 1.5rem;
min-height: 250px; /* her exact value — equalizes all cards */
display: flex;
flex-direction: column;
align-items: center;
}
.type-card-body h3 {
font-family: var(--sans);
font-size: 1.25rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 1rem;
text-transform: uppercase;
letter-spacing: 0.04em;
min-height: 3rem;
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
}
.type-card-body p {
font-size: 0.875rem;
line-height: 1.55;
color: var(--ink-mute);
margin: 0;
}
@media (max-width: 768px) {
.type-card-body {
min-height: initial;
padding: 1rem;
}
.type-card-body h3 {
font-size: 1rem;
min-height: initial;
margin-bottom: 0.7rem;
}
}
/* ==================== Kim hero blocks ==================== */
.kim-hero {
min-height: 580px;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
position: relative;
margin-top: 0;
}
.kim-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.3) 100%);
pointer-events: none;
}
.kim-hero-inner {
position: relative;
z-index: 1;
width: 100%;
padding-top: 6rem;
}
.kim-hero-title {
font-family: var(--sans);
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2rem);
color: white;
margin: 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.kim-hero-subline {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(2rem, 5vw, 3rem);
color: var(--ink);
margin: 1rem 0 0;
line-height: 1.1;
}
.kim-search-hero {
min-height: 400px;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: flex;
align-items: center;
padding: 4rem 0;
}
.kim-search-inner { width: 100%; }
.kim-search-prompt {
font-size: clamp(1.25rem, 2vw, 1.6rem);
color: var(--ink);
margin: 0 0 var(--space-md);
text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}
.kim-cta-row {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.kim-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
}
.kim-btn-gizmo {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: 1rem;
padding: 0.85rem 1.6rem;
}
.kim-gizmo-dot {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brass);
color: var(--midnight);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
}
.kim-btn-outline {
background: transparent;
color: var(--ink);
border: 2px solid var(--ink);
padding: 0.8rem 1.6rem;
border-radius: 999px;
font-weight: 500;
}
.kim-btn-outline:hover { background: var(--ink); color: white; }
.kim-cta .kim-cta-sub {
font-size: 0.78rem;
color: var(--ink-mute);
font-style: italic;
}
@media (max-width: 700px) {
.kim-hero, .kim-search-hero { background-attachment: scroll; }
.kim-hero { min-height: 420px; }
}
/* ==================== Features (round-image cards) ==================== */
.kim-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
max-width: 1180px;
margin: 0 auto;
}
.kim-feature {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.kim-feature-img {
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 1.2rem;
border: 4px solid white;
box-shadow: 0 8px 24px -10px rgba(14,43,61,0.3);
}
.kim-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kim-feature h3 {
font-family: var(--sans);
font-size: 1.1rem;
font-weight: 600;
color: var(--ink);
margin: 0 0 0.4rem;
}
.kim-feature p {
font-size: 0.85rem;
color: var(--ink-mute);
margin: 0;
}
/* ==================== Group-size cards ==================== */
.kim-groups {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
}
.kim-group {
background: white;
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 6px 18px -8px rgba(14,43,61,0.2);
transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
display: flex;
flex-direction: column;
border: 1px solid var(--line);
}
.kim-group:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -10px rgba(14,43,61,0.3); }
.kim-group-img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg-cool);
}
.kim-group-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.kim-group:hover .kim-group-img img { transform: scale(1.05); }
.kim-group-body {
padding: 1.4rem 1.4rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
flex-grow: 1;
}
.kim-group-body h3 {
font-family: var(--display);
font-size: 1.5rem;
font-weight: 400;
color: var(--ink);
margin: 0;
}
.kim-group-meta {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--brass);
margin: 0;
font-weight: 500;
}
.kim-group-body p { font-size: 0.88rem; color: var(--ink-soft); margin: 0.3rem 0 0.8rem; line-height: 1.5; }
.kim-group .btn-link { margin-top: auto; font-size: 0.78rem; }
/* ==================== Destination grid (4-up large cards) ==================== */
.kim-dest-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
}
.kim-dest {
position: relative;
aspect-ratio: 16 / 11;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: white;
box-shadow: 0 10px 24px -10px rgba(14,43,61,0.3);
transition: transform 240ms var(--ease);
display: flex;
flex-direction: column;
justify-content: flex-end;
isolation: isolate;
}
.kim-dest:hover { transform: translateY(-3px); }
.kim-dest-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: -2;
transition: transform 1.4s var(--ease);
}
.kim-dest:hover .kim-dest-img { transform: scale(1.06); }
.kim-dest::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14,43,61,0.0) 30%, rgba(14,43,61,0.92) 100%);
z-index: -1;
}
.kim-dest-body { padding: 1.4rem 1.5rem; }
.kim-dest-body h3 {
font-family: var(--display);
font-size: 1.7rem;
font-weight: 400;
color: white;
margin: 0 0 0.3rem;
}
.kim-dest-meta {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--brass-bright);
margin: 0 0 0.5rem;
}
.kim-dest-body p {
font-size: 0.82rem;
color: rgba(255,255,255,0.9);
margin: 0;
line-height: 1.5;
}
/* ==================== Builder logos marquee ==================== */
.kim-builders { padding: 3rem 0 4rem; background: var(--bg-cool); overflow: hidden; }
.kim-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, white 5%, white 95%, transparent); }
.kim-marquee-track {
display: flex;
gap: 3rem;
align-items: center;
animation: kim-scroll 50s linear infinite;
width: max-content;
}
.kim-marquee-track img {
height: 50px;
width: auto;
object-fit: contain;
opacity: 0.7;
transition: opacity 240ms var(--ease);
flex-shrink: 0;
}
.kim-marquee-track img:hover { opacity: 1; }
/* Builder marquee on light/white sections — keep full size, slight muted */
.kim-builders .kim-marquee-track img {
height: 50px;
opacity: 0.85;
filter: grayscale(100%);
}
.kim-builders .kim-marquee-track img:hover {
opacity: 1;
filter: grayscale(0%);
}
@keyframes kim-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ==================== FAQ accordion ==================== */
.kim-faq details {
background: white;
border: 1px solid var(--line);
border-radius: 8px;
margin-bottom: 0.7rem;
overflow: hidden;
}
.kim-faq summary {
cursor: pointer;
list-style: none;
padding: 1.2rem 1.4rem;
font-family: var(--sans);
font-weight: 500;
font-size: 1.05rem;
color: var(--ink);
position: relative;
padding-right: 3rem;
}
.kim-faq summary::-webkit-details-marker { display: none; }
.kim-faq summary::after {
content: '+';
position: absolute;
right: 1.4rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: 300;
color: var(--ocean);
transition: transform 240ms var(--ease);
}
.kim-faq details[open] summary::after { content: '–'; transform: translateY(-50%) rotate(0deg); }
.kim-faq details[open] summary { background: var(--bg-cool); }
.kim-faq details p { padding: 0 1.4rem 1.3rem; margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: 0.92rem; }
.kim-faq details p a.btn-link { color: var(--ocean); }
/* Flat split image — no card framing, no shadow, no fixed aspect.
Use in Kim-style sections where the image just sits on the page. */
.kim-flat-img {
position: relative;
background: transparent;
border-radius: 0;
overflow: visible;
box-shadow: none;
aspect-ratio: auto;
text-align: center;
}
.kim-flat-img img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: 0;
}
/* ==================== Featured & Popular yacht cards (match Kim's structure) ==================== */
.kim-featured-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
max-width: 1180px;
margin: 0 auto;
}
.kim-featured {
background: white;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.08);
transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
display: flex;
flex-direction: column;
}
.kim-featured:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.18); }
.kim-featured-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-cool); }
.kim-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kim-featured-body {
padding: 1.1rem 1.2rem 1.3rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
flex-grow: 1;
}
.kim-featured-body h3 {
font-family: var(--sans);
font-size: 1.25rem;
font-weight: 700;
color: var(--ink);
margin: 0 0 0.4rem;
letter-spacing: 0.02em;
}
.kim-featured-spec { font-size: 0.72rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; margin: 0; }
.kim-featured-meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.kim-featured-price {
font-family: var(--sans);
font-size: 1.05rem;
font-weight: 700;
color: var(--ink);
margin: 0.3rem 0 0;
}
.kim-featured-loc {
font-size: 0.78rem;
color: var(--ink-soft);
margin: 0 0 0.6rem;
}
.kim-featured-btn {
display: block;
margin-top: auto;
padding: 0.65rem 1rem;
background: var(--midnight);
color: white;
border-radius: 4px;
text-align: center;
font: 500 0.78rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.12em;
transition: background 200ms var(--ease);
}
.kim-featured:hover .kim-featured-btn { background: var(--ocean-deep); }
@media (max-width: 980px) {
.kim-featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.kim-featured-grid { grid-template-columns: 1fr; }
}
/* ==================== Itinerary selection grid ==================== */
.kim-itin-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
gap: 1.2rem;
max-width: 1180px;
margin: 0 auto;
}
.kim-itin {
background: white;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 6px 16px -8px rgba(14,43,61,0.15);
transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
display: flex;
flex-direction: column;
}
.kim-itin:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(14,43,61,0.28); }
.kim-itin--feature { grid-column: span 2; grid-row: span 2; }
.kim-itin-img {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
position: relative;
}
.kim-itin--feature .kim-itin-img { aspect-ratio: 16 / 11; }
.kim-itin-tag {
position: absolute;
top: 0.8rem;
left: 0.8rem;
background: var(--brass);
color: var(--midnight);
font-size: 0.65rem;
font-weight: 700;
padding: 0.3rem 0.6rem;
border-radius: 4px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.kim-itin-body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; flex-grow: 1; }
.kim-itin-region { font-size: 0.7rem; color: var(--brass); text-transform: uppercase; letter-spacing: 0.16em; margin: 0; font-weight: 500; }
.kim-itin-body h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 400; color: var(--ink); margin: 0; line-height: 1.3; }
.kim-itin--feature .kim-itin-body h3 { font-size: 1.5rem; }
.kim-itin-meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.kim-itin-days { font-size: 0.78rem; color: var(--ink-mute); margin: 0; font-weight: 500; }
.kim-itin .btn-link { margin-top: auto; font-size: 0.75rem; padding-top: 0.5rem; }
@media (max-width: 980px) {
.kim-itin-grid { grid-template-columns: repeat(2, 1fr); }
.kim-itin--feature { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
.kim-itin-grid { grid-template-columns: 1fr; }
.kim-itin--feature { grid-column: auto; }
}
/* ==================== Themed yacht selection (Adult Water Ski) ==================== */
.kim-themed-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.2rem;
max-width: 1180px;
margin: 0 auto;
}
.kim-themed {
background: white;
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: var(--ink);
box-shadow: 0 6px 16px -8px rgba(14,43,61,0.15);
transition: transform 240ms var(--ease);
display: flex;
flex-direction: column;
}
.kim-themed:hover { transform: translateY(-3px); }
.kim-themed--feature { grid-column: span 2; grid-row: span 2; }
.kim-themed-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; position: relative; }
.kim-themed--feature .kim-themed-img { aspect-ratio: 16 / 10; }
.kim-themed-body { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; flex-grow: 1; }
.kim-themed-body h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 400; color: var(--ink); margin: 0; }
.kim-themed--feature .kim-themed-body h3 { font-size: 1.6rem; }
.kim-themed-body p { font-size: 0.82rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.kim-themed .btn-link { margin-top: auto; font-size: 0.75rem; padding-top: 0.5rem; }
@media (max-width: 980px) {
.kim-themed-grid { grid-template-columns: repeat(2, 1fr); }
.kim-themed--feature { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 560px) {
.kim-themed-grid { grid-template-columns: 1fr; }
.kim-themed--feature { grid-column: auto; }
}
/* ==================== Menu marquee (chef food shots) ==================== */
.kim-menu-marquee {
background: #ffffff;
padding: 3.5rem 0;
overflow: hidden;
}
.kim-menu-track {
display: flex;
gap: 14px;
animation: kim-scroll 60s linear infinite;
animation-direction: reverse;
width: max-content;
align-items: center;
}
.kim-menu-track figure {
margin: 0;
flex-shrink: 0;
}
/* Porthole frame — figure::before is a satin-brass plate sitting behind the
image with 4 rivets at the cardinal points. The image itself carries only
the curved-glass inner shadow, which keeps the brass crisp instead of
stacking eight box-shadow rings. */
.kim-menu-track figure {
position: relative;
margin: 0;
flex-shrink: 0;
padding: 7px; /* the gap = brass ring width */
border-radius: 9999px;
background:
radial-gradient(circle 2px at 50% 3.5px, #2a1c04 0 1.4px, transparent 2px), /* N rivet */
radial-gradient(circle 2px at 50% calc(100% - 3.5px), #2a1c04 0 1.4px, transparent 2px), /* S rivet */
radial-gradient(circle 2px at 3.5px 50%, #2a1c04 0 1.4px, transparent 2px), /* W rivet */
radial-gradient(circle 2px at calc(100% - 3.5px) 50%, #2a1c04 0 1.4px, transparent 2px), /* E rivet */
/* Satin brass — three subtle bands so it reads as turned metal, not flat colour */
linear-gradient(135deg,
#b8902a 0%,
#e9c668 18%,
#c79900 38%,
#8b6914 60%,
#d4a82c 82%,
#a07a18 100%);
box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.35), /* dark line where brass meets glass */
0 6px 16px -6px rgba(14,43,61,0.45); /* lift */
}
.kim-menu-track img {
object-fit: cover;
border-radius: 9999px;
display: block;
position: relative;
z-index: 1;
box-shadow:
inset 0 0 0 1.5px rgba(0,0,0,0.45), /* glass-side dark rim */
inset 0 5px 12px rgba(0,0,0,0.32), /* curved-glass top shadow */
inset 0 -3px 8px rgba(255,255,255,0.08); /* faint bottom highlight */
transition: transform 300ms ease, filter 300ms ease;
}
.kim-menu-track figure:hover img { filter: brightness(1.04); }
.kim-menu-track figure:hover { transform: translateY(-3px); transition: transform 300ms ease; }
.kim-menu-track { gap: 18px; }
.kim-menu-portrait img { width: 150px; height: 220px; }
.kim-menu-land img { width: 240px; height: 150px; }
.kim-menu-square img { width: 190px; height: 190px; }
.kim-menu-track figcaption { display: none; }
@media (max-width: 768px) {
.kim-menu-track figure { padding: 5px; }
.kim-menu-track { gap: 14px; }
}
@media (max-width: 980px) {
.type-card { width: calc(50% - 0.75rem); }
}
@media (max-width: 576px) {
.type-browse { padding: var(--space-xl) 0; }
.type-card { width: 100%; max-width: 360px; }
}
/* Featured destination — bigger, photo-led */
.destination-feature-grid {
display: grid;
gap: var(--space-md);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.destination-feature-grid {
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 320px 320px;
}
.destination-feature-grid > :nth-child(1) { grid-row: span 2; aspect-ratio: auto; }
}
/* ---------- Editorial split ---------------------------------- */
.split {
display: grid;
gap: var(--space-xl);
align-items: center;
}
@media (min-width: 900px) {
.split { grid-template-columns: 1fr 1fr; }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
}
.split-figure {
position: relative;
aspect-ratio: 4 / 5;
background: var(--bg-cool);
border-radius: 6px;
overflow: hidden;
box-shadow: var(--shadow-deep);
}
.split-figure img { width: 100%; height: 100%; object-fit: cover; }
.split-figure .caption {
position: absolute;
bottom: 1rem; left: 1rem;
background: rgba(255, 255, 255, 0.92);
color: var(--ocean);
padding: 0.45rem 0.8rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 4px;
backdrop-filter: blur(6px);
font-weight: 600;
}
/* ---------- Process — vertical timeline with offset indent rhythm --- */
.process {
counter-reset: step;
max-width: 880px;
display: flex;
flex-direction: column;
gap: 0;
}
.process-step {
counter-increment: step;
display: grid;
grid-template-columns: 80px 1fr;
gap: var(--space-md);
padding: var(--space-lg) 0;
border-top: 1px solid var(--line);
align-items: start;
}
.process-step:first-child { border-top: 0; padding-top: 0; }
.process-step:last-child { padding-bottom: 0; }
@media (min-width: 800px) {
/* Asymmetric indent rhythm: 0, 80, 40, 120 — breaks the equal-step monotony */
.process-step:nth-child(2) { padding-left: 80px; }
.process-step:nth-child(3) { padding-left: 40px; }
.process-step:nth-child(4) { padding-left: 120px; }
}
.process-step::before {
content: counter(step, decimal-leading-zero);
font-family: var(--display);
font-size: 2.4rem;
color: var(--ocean);
letter-spacing: -0.02em;
line-height: 1;
font-weight: 400;
align-self: start;
}
.process-step h3 {
font-size: clamp(1.4rem, 2vw, 1.8rem);
margin: 0 0 0.5rem;
line-height: 1.15;
letter-spacing: -0.01em;
font-weight: 500;
grid-column: 2;
}
.process-step p {
color: var(--ink-soft);
margin: 0;
max-width: 56ch;
grid-column: 2;
}
.process-step::before { grid-column: 1; grid-row: 1 / span 2; }
/* ---------- FAQ ---------------------------------------------- */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
border-bottom: 1px solid var(--line);
padding-block: var(--space-md);
}
.section--dark .faq-item, .section--ocean .faq-item { border-bottom-color: rgba(255, 255, 255, 0.18); }
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
font-family: var(--display);
font-size: clamp(1.2rem, 2vw, 1.5rem);
font-weight: 500;
transition: color var(--dur-fast) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
flex-shrink: 0;
width: 36px; height: 36px;
display: grid; place-items: center;
border: 1px solid var(--ocean);
border-radius: 50%;
color: var(--ocean);
font-family: var(--body);
font-size: 1rem;
transition: transform var(--dur-fast) var(--ease);
}
.faq-item[open] summary::after { content: '−'; transform: rotate(180deg); }
.faq-item summary:hover { color: var(--ocean); }
.faq-item-body {
padding-top: var(--space-sm);
max-width: var(--reading);
color: var(--ink-soft);
}
/* ---------- Forms -------------------------------------------- */
.form { display: grid; gap: var(--space-md); }
.form-row { display: grid; gap: var(--space-md); }
@media (min-width: 720px) {
.form-row--2 { grid-template-columns: 1fr 1fr; }
.form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-mute);
}
.section--dark .field label, .section--ocean .field label { color: rgba(255, 255, 255, 0.72); }
.field input, .field textarea, .field select {
background: transparent;
border: 0;
border-bottom: 1px solid var(--line-strong);
padding: 0.7rem 0;
font-size: 1.05rem;
color: var(--ink);
transition: border-color var(--dur-fast) var(--ease);
}
.section--dark .field input, .section--ocean .field input,
.section--dark .field textarea, .section--ocean .field textarea,
.section--dark .field select, .section--ocean .field select {
border-bottom-color: rgba(255, 255, 255, 0.32);
color: white;
}
.field input:focus, .field textarea:focus, .field select:focus {
outline: 0;
border-bottom-color: var(--ocean);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-meta { font-size: 0.78rem; color: var(--ink-mute); }
.section--dark .form-meta, .section--ocean .form-meta { color: rgba(255, 255, 255, 0.6); }
/* ---------- Search bar (yachts) ------------------------------ */
.search-bar {
background: var(--paper);
color: var(--ink);
padding: var(--space-md);
border-radius: 6px;
box-shadow: var(--shadow-card);
border: 1px solid var(--line);
display: grid;
gap: var(--space-md);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.search-bar { grid-template-columns: repeat(4, 1fr) auto; align-items: end; }
}
.search-bar .field label { color: var(--ocean); }
/* ---------- Page hero ---------------------------------------- */
.page-hero {
position: relative;
background: var(--bg-cool);
color: var(--ink);
padding-top: 9rem;
padding-bottom: var(--space-xl);
border-bottom: 1px solid var(--line);
overflow: hidden;
}
.page-hero h1 { margin: 1rem 0; max-width: 18ch; }
/* Page hero with photo backdrop */
.page-hero--image {
color: white;
}
.page-hero--image::before {
content: '';
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-image: var(--hero-image, none);
z-index: 0;
}
.page-hero--image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14, 43, 61, 0.4) 0%, rgba(14, 43, 61, 0.75) 100%);
z-index: 0;
}
.page-hero--image .shell { position: relative; z-index: 1; }
.page-hero--image h1, .page-hero--image .lead { color: white; }
.page-hero--image .lead { color: rgba(255, 255, 255, 0.85); }
.page-hero--image .eyebrow { color: var(--brass-bright); }
.page-hero--image .eyebrow::before { background: var(--brass-bright); }
/* ---------- Stat row — hierarchy: hero stat + supporting --------- */
.stat-row {
display: grid;
gap: var(--space-md);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.stat-row {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--space-lg);
align-items: end;
}
.stat-row > :first-child .stat-num { font-size: clamp(3.5rem, 7vw, 6.5rem); }
.stat-row > :first-child { padding-top: var(--space-md); }
}
.stat {
border-top: 1px solid var(--line);
padding-top: var(--space-sm);
}
.section--dark .stat, .section--ocean .stat { border-top-color: rgba(255, 255, 255, 0.18); }
.stat-num {
font-family: var(--display);
font-size: clamp(2.2rem, 4vw, 3.2rem);
color: var(--ocean);
font-weight: 400;
line-height: 1;
display: block;
margin-bottom: 0.4rem;
}
.section--dark .stat-num, .section--ocean .stat-num { color: var(--brass-bright); }
.stat-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--ink-mute);
}
.section--dark .stat-label, .section--ocean .stat-label { color: rgba(255, 255, 255, 0.72); }
/* ---------- Tagline strip ------------------------------------ */
.tagline-strip {
background: var(--paper);
border-block: 1px solid var(--line);
text-align: center;
padding-block: var(--space-md);
font-family: var(--display);
font-size: clamp(1.2rem, 2vw, 1.6rem);
font-style: italic;
color: var(--ink);
}
.tagline-strip em { color: var(--ocean); font-style: italic; }
/* ---------- Reveal — fade + lift + blur (Emil's blur-mask trick) -------- */
.reveal {
opacity: 0;
transform: translateY(24px);
filter: blur(6px);
transition:
opacity 900ms var(--ease-out),
transform 900ms var(--ease-out),
filter 700ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 60ms);
}
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* Image-specific reveal — scale + blur, no Y-translate (jarring on photos) */
.reveal-img {
opacity: 0;
transform: scale(1.04);
filter: blur(8px);
transition:
opacity 1200ms var(--ease-out),
transform 1400ms var(--ease-out),
filter 900ms var(--ease-out);
}
.reveal-img.in { opacity: 1; transform: scale(1); filter: blur(0); }
/* ---------- Stagger helper — set --i on each child ----------- */
[data-stagger] > * { --i: 0; }
[data-stagger] > *:nth-child(1) { --i: 0; }
[data-stagger] > *:nth-child(2) { --i: 1; }
[data-stagger] > *:nth-child(3) { --i: 2; }
[data-stagger] > *:nth-child(4) { --i: 3; }
[data-stagger] > *:nth-child(5) { --i: 4; }
[data-stagger] > *:nth-child(6) { --i: 5; }
[data-stagger] > *:nth-child(7) { --i: 6; }
[data-stagger] > *:nth-child(8) { --i: 7; }
[data-stagger] > *:nth-child(9) { --i: 8; }
[data-stagger] > *:nth-child(10) { --i: 9; }
[data-stagger] > *:nth-child(11) { --i: 10; }
[data-stagger] > *:nth-child(12) { --i: 11; }
/* ---------- Magnetic button hover (Emil + high-end-visual-design) -------- */
@media (hover: hover) and (pointer: fine) {
.btn {
will-change: transform;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:hover svg { transform: translateX(2px); transition: transform 200ms var(--ease-out); }
.yacht-card {
will-change: transform;
}
/* Card lift becomes more dramatic on hover with the photo zoom */
.yacht-card:hover .yacht-card-media img,
.dest-card:hover .dest-card-media,
.theme-card:hover .theme-card-media,
.onboard-card:hover .onboard-card-media {
transform: scale(1.08);
}
}
/* ---------- Count-up stat numbers ---------------------------- */
.stat-num[data-target] {
display: inline-block;
transition: opacity 600ms var(--ease-out);
}
.stat-num[data-target]:not(.in) { opacity: 0.55; }
/* ---------- Scroll progress bar (subtle, top of page) -------- */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
background: linear-gradient(90deg, var(--ocean), var(--brass));
transform-origin: left;
transform: scaleX(0);
z-index: 90;
pointer-events: none;
transition: transform 80ms linear;
}
/* ---------- Hero parallax ----------------------------------- */
.hero-media {
will-change: transform;
}
/* ---------- Concierge: trigger entrance / hover lift -------- */
.concierge-trigger {
animation: triggerEntry 700ms var(--ease-out) 1.2s both;
}
@keyframes triggerEntry {
from { opacity: 0; transform: translateY(20px) scale(0.92); }
to { opacity: 1; transform: none; }
}
/* ---------- Marquee: more lively gradient fade edges -------- */
.marquee {
position: relative;
}
.marquee::before,
.marquee::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 80px;
pointer-events: none;
z-index: 1;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
/* ---------- Section transitions --------------------------- */
.section + .section { position: relative; }
/* ---------- Reveal disabled when reduced motion ------------- */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-img { opacity: 1 !important; transform: none !important; filter: none !important; }
.stat-num[data-target]:not(.in) { opacity: 1; }
.hero-media img { animation: none !important; }
}
/* ---------- Footer ------------------------------------------- */
.site-footer {
background: var(--ink);
color: white;
padding-block: clamp(4rem, 8vw, 6rem) 2rem;
}
.footer-top {
display: grid;
gap: var(--space-xl);
margin-bottom: var(--space-xl);
grid-template-columns: 1fr;
}
@media (min-width: 800px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-col h4 {
font-family: var(--body);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--brass-bright);
margin-bottom: var(--space-sm);
}
.footer-col li { padding-block: 0.35rem; }
.footer-col a { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.footer-col a:hover { color: var(--brass-bright); }
.footer-brand-blurb {
font-family: var(--display);
font-size: 1.4rem;
font-weight: 400;
line-height: 1.3;
color: white;
max-width: 30ch;
margin-bottom: var(--space-md);
font-style: italic;
}
.footer-contact {
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.85);
}
.footer-contact a:hover { color: var(--brass-bright); }
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.18);
padding-top: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
justify-content: space-between;
align-items: center;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
@media (min-width: 720px) { .footer-bottom { flex-direction: row; text-align: left; } }
.footer-legal-links { display: inline-flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-legal-links a { color: rgba(255, 255, 255, 0.6); }
.footer-legal-links a:hover { color: var(--brass-bright); }
.socials { display: inline-flex; gap: 0.6rem; }
.socials a {
width: 36px; height: 36px;
display: grid; place-items: center;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.socials a:hover { border-color: var(--brass-bright); color: var(--brass-bright); }
.socials svg { width: 16px; height: 16px; }
/* ---------- Concierge ---------------------------------------- */
.concierge-trigger {
position: fixed;
bottom: 1.4rem;
right: 1.4rem;
z-index: 70;
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.85rem 1.2rem 0.85rem 0.85rem;
background: var(--ocean);
color: white;
border-radius: 999px;
box-shadow: var(--shadow-deep);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.concierge-trigger:hover { transform: translateY(-2px); background: var(--ocean-deep); color: white; }
.concierge-trigger .dot {
width: 30px; height: 30px;
border-radius: 50%;
background: white;
color: var(--ocean);
display: grid; place-items: center;
font-family: var(--display);
font-size: 1.05rem;
font-style: italic;
font-weight: 500;
position: relative;
}
.concierge-trigger .dot::before {
content: '';
position: absolute;
width: 38px; height: 38px;
border-radius: 50%;
background: white;
opacity: 0.3;
animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.4; }
100% { transform: scale(1.6); opacity: 0; }
}
/* ============ Concierge — centered modal (was right slide-in) ============ */
.concierge-backdrop {
position: fixed;
inset: 0;
background: rgba(14, 23, 38, 0.55);
backdrop-filter: blur(4px);
z-index: 78;
opacity: 0;
visibility: hidden;
transition: opacity 240ms ease, visibility 240ms ease;
}
.concierge-backdrop.is-open {
opacity: 1;
visibility: visible;
}
/* INTRO modal — Meet GIZMO welcome popup */
.concierge-intro {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
background: rgba(255,255,255,0.97);
border-radius: 8px;
padding: 3rem 2.5rem 2.5rem;
width: calc(100% - 2rem);
max-width: 540px;
text-align: center;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45), 0 8px 20px -10px rgba(0,0,0,0.25);
opacity: 0;
visibility: hidden;
transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.9,.3,1.2), visibility 240ms ease;
z-index: 82;
}
.concierge-intro.is-open {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.concierge-intro-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: rgba(0,0,0,0.45);
border-radius: 50%;
cursor: pointer;
display: grid;
place-items: center;
transition: background 160ms ease, color 160ms ease;
}
.concierge-intro-close:hover {
background: rgba(0,0,0,0.06);
color: var(--ink);
}
.concierge-intro-icon {
width: 80px; height: 80px;
margin: 0 auto 1.4rem;
}
.concierge-intro-icon img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.concierge-intro-title {
font-family: var(--body);
font-size: clamp(1.9rem, 3.2vw, 2.5rem);
font-weight: 800;
letter-spacing: -0.6px;
line-height: 1.1;
color: var(--ink);
margin: 0 0 0.45rem;
}
.concierge-intro-token {
display: inline-block;
padding: 0 0.4rem;
border-left: 2px solid var(--ink);
border-right: 2px solid var(--ink);
margin: 0 0.15rem;
}
.concierge-intro-sub {
font-family: var(--body);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: #1a7a95;
margin: 0 0 1.3rem;
font-weight: 500;
}
.concierge-intro-desc {
font-family: var(--body);
font-size: 0.96rem;
line-height: 1.55;
color: #2a2a2a;
margin: 0 auto 1.8rem;
max-width: 90%;
}
.concierge-intro-btn {
display: inline-block;
background: transparent;
color: var(--ink);
border: 1px solid var(--ink);
border-radius: 4px;
font-family: var(--body);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 0.75rem 2rem;
cursor: pointer;
transition: background 200ms ease, color 200ms ease;
}
.concierge-intro-btn:hover { background: var(--ink); color: #fff; }
/* CHAT panel — now centered modal (was right slide-in) */
.concierge {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
width: calc(100% - 2rem);
max-width: 520px;
height: min(85vh, 720px);
background: var(--paper);
color: var(--ink);
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45);
border-radius: 10px;
opacity: 0;
visibility: hidden;
transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.9,.3,1.2), visibility 240ms ease;
z-index: 82;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Yacht-detail side-dock mode — Gizmo lives at the right edge so the brochure
stays readable. No backdrop, body keeps its native scroll. */
.concierge.concierge--docked {
top: 0;
left: auto;
right: 0;
transform: translate(100%, 0);
width: 380px;
max-width: 100vw;
height: 100vh;
border-radius: 0;
box-shadow: -16px 0 40px -12px rgba(0,0,0,0.25);
}
.concierge.concierge--docked.is-open {
transform: translate(0, 0);
}
/* Reflow the page so brochure content doesn't slide UNDER the docked panel. */
html.concierge-docked-open body { padding-right: 380px; transition: padding-right 240ms cubic-bezier(.2,.9,.3,1.2); }
/* Floating "Ask Gizmo" trigger button shifts left so it's not under the panel. */
html.concierge-docked-open .concierge-trigger { right: calc(380px + 1rem); }
/* Mobile / narrow viewport — fall back to full-width overlay since a 380px
side panel would leave no room for the brochure. */
@media (max-width: 880px) {
.concierge.concierge--docked { width: 100%; }
html.concierge-docked-open body { padding-right: 0; }
html.concierge-docked-open .concierge-trigger { right: 1rem; display: none; }
}
.concierge.is-open {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.concierge-head {
padding: 1.5rem var(--space-md);
display: flex;
align-items: center;
gap: 0.8rem;
border-bottom: 1px solid var(--line);
background: var(--bg-cool);
}
.concierge-head .dot {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--ocean);
color: white;
display: grid; place-items: center;
font-family: var(--display);
font-size: 1.3rem;
font-style: italic;
font-weight: 500;
}
.concierge-head h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.2; color: var(--ink); }
.concierge-head .sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ocean); }
/* Mode toggle in the chat header — compact pill */
.gizmo-mode-toggle {
display: inline-flex;
background: rgba(0,0,0,0.04);
border: 1px solid var(--line);
border-radius: 999px;
padding: 1px;
margin-left: auto;
margin-right: 0.4rem;
}
.gizmo-mode-toggle .gmt-btn {
background: transparent;
border: 0;
padding: 0.18rem 0.55rem;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 500;
color: var(--ink-mute);
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: background 120ms ease, color 120ms ease;
line-height: 1.4;
}
.gizmo-mode-toggle .gmt-btn:hover { color: var(--ink); }
.gizmo-mode-toggle .gmt-btn.is-active { background: var(--ocean); color: white; }
/* Industry-mode visual treatment for the chat panel */
.concierge[data-mode="industry"] .concierge-head { background: linear-gradient(180deg, #15334d, #0a1f30); }
.concierge[data-mode="industry"] .concierge-head h3,
.concierge[data-mode="industry"] .concierge-head .sub { color: white; }
.concierge[data-mode="industry"] .concierge-head .sub { color: rgba(255,255,255,0.65); }
.concierge[data-mode="industry"] .concierge-head .dot { background: #c79900; color: #1a1a1a; }
.concierge[data-mode="industry"] .gizmo-mode-toggle { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.concierge[data-mode="industry"] .gizmo-mode-toggle .gmt-btn { color: rgba(255,255,255,0.7); }
.concierge[data-mode="industry"] .gizmo-mode-toggle .gmt-btn.is-active { background: #c79900; color: #1a1a1a; }
.concierge[data-mode="industry"] .concierge-close {
color: white;
background: transparent;
border-color: rgba(255,255,255,0.35);
}
.concierge[data-mode="industry"] .concierge-close:hover {
background: rgba(255,255,255,0.12);
border-color: white;
color: white;
}
/* Filter button — hidden in consumer mode, shown in industry mode */
.gizmo-filter-btn {
display: none;
align-items: center; gap: 0.3rem;
background: transparent; border: 1px solid var(--line);
color: var(--ink-soft);
padding: 0.28rem 0.65rem;
border-radius: 999px;
font-size: 0.62rem; font-weight: 500;
cursor: pointer;
text-transform: uppercase; letter-spacing: 0.05em;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
margin-right: 0.3rem;
}
.concierge[data-mode="industry"] .gizmo-filter-btn {
display: inline-flex;
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.3);
color: white;
}
.concierge[data-mode="industry"] .gizmo-filter-btn:hover {
background: #c79900; border-color: #c79900; color: #1a1a1a;
}
/* Broker filter panel — slides down between header and chat body.
Action buttons (Reset / Search) are pinned to the bottom so the visitor
never has to scroll to find them. Inner form scrolls if the form is
taller than the available height.
2026-05-11: bumped to 85vh and switched to flex column with sticky
actions after Kim reported the bottom fields were obscured. */
.gizmo-filter-panel {
background: white;
border-bottom: 2px solid #c79900;
/* Constrained to ~60% of viewport so the chat input + recent messages
still remain visible underneath. The inner .gfp-section scrolls and
the .gfp-actions footer is sticky so Search/Reset are always reachable. */
max-height: 60vh;
display: flex;
flex-direction: column;
animation: gfp-slide 200ms ease-out;
}
@keyframes gfp-slide { from { max-height: 0; opacity: 0; } to { max-height: 60vh; opacity: 1; } }
.gfp-section {
padding: 0.9rem 1.1rem 0.4rem;
overflow-y: auto;
flex: 1 1 auto;
min-height: 0;
/* Scroll hint — soft fade at the bottom edge so users see there's more below. */
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.gfp-row { margin-bottom: 0.55rem; }
.gfp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.gizmo-filter-panel label {
display: block;
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-mute);
font-weight: 500;
margin-bottom: 0;
}
.gizmo-filter-panel input,
.gizmo-filter-panel select {
display: block; width: 100%;
margin-top: 0.18rem;
padding: 0.42rem 0.55rem;
border: 1px solid var(--line);
border-radius: 6px;
font-family: var(--body);
font-size: 0.85rem;
color: var(--ink);
background: white;
}
.gizmo-filter-panel input:focus,
.gizmo-filter-panel select:focus {
outline: none; border-color: #c79900;
box-shadow: 0 0 0 3px rgba(199,153,0,0.18);
}
.gfp-actions {
display: flex; gap: 0.5rem;
padding: 0.7rem 1.1rem 0.85rem;
border-top: 1px solid var(--line);
background: white;
/* Pinned to the bottom of the panel — Reset + Search always visible. */
flex: 0 0 auto;
position: sticky;
bottom: 0;
}
.gfp-actions button {
flex: 1; padding: 0.6rem 0.9rem; border-radius: 6px;
font-size: 0.82rem; font-weight: 500; cursor: pointer;
transition: background 120ms ease, color 120ms ease;
font-family: var(--body);
}
.gfp-reset { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.gfp-reset:hover { background: #f3f3f3; color: var(--ink); }
.gfp-search { background: #c79900; border: 1px solid #c79900; color: #1a1a1a; }
.gfp-search:hover { background: #b08600; border-color: #b08600; }
/* In-chat banner so the user can never confuse which mode is active */
.gizmo-mode-banner {
background: linear-gradient(90deg, #c79900, #ffd47a);
color: #1a1a1a;
font-size: 0.78rem;
padding: 0.45rem 0.9rem;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.1);
letter-spacing: 0.02em;
}
.msg-mode-switch {
background: rgba(199,153,0,0.08) !important;
border: 1px solid rgba(199,153,0,0.3) !important;
font-size: 0.85rem !important;
}
/* Industry stats card rendered alongside Gizmo's prose answer */
.gizmo-stats-card {
background: var(--bg-cool);
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.9rem 1rem;
margin-top: 0.7rem;
font-size: 0.85rem;
}
.gizmo-stats-card .stats-headline {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 0.6rem;
}
.gizmo-stats-card .stats-total {
font-family: var(--display); font-size: 1.6rem; color: var(--ink);
}
.gizmo-stats-card .stats-total small { font-size: 0.78rem; color: var(--ink-mute); font-family: var(--body); }
.gizmo-stats-card .stats-price { color: var(--ocean); font-weight: 500; }
.gizmo-stats-card .stats-section { margin-top: 0.6rem; }
.gizmo-stats-card .stats-label {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--ink-mute); margin-bottom: 0.25rem;
}
.gizmo-stats-card .stats-row {
display: flex; justify-content: space-between; padding: 0.18rem 0;
border-bottom: 1px solid var(--line);
font-variant-numeric: tabular-nums;
}
.gizmo-stats-card .stats-row:last-child { border-bottom: 0; }
.gizmo-stats-card .stats-row .stat-key { color: var(--ink); }
.gizmo-stats-card .stats-row .stat-count { font-weight: 600; color: var(--ink); }
.gizmo-stats-card .stats-tail {
font-size: 0.78rem; color: var(--ink-mute); padding: 0.3rem 0; font-style: italic;
}
.gizmo-stats-card details { margin-top: 0.6rem; }
.gizmo-stats-card summary { cursor: pointer; font-size: 0.78rem; color: var(--ocean); }
.concierge-close {
margin-left: auto;
width: 36px; height: 36px;
color: var(--ink);
border: 1px solid var(--line);
border-radius: 50%;
display: grid; place-items: center;
transition: border-color var(--dur-fast) var(--ease);
background: white;
}
.concierge-close:hover { border-color: var(--ocean); color: var(--ocean); }
.concierge-body {
flex: 1;
overflow-y: auto;
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: 1rem;
scroll-behavior: smooth;
background: var(--bg);
}
.msg {
padding: 0.8rem 1rem;
border-radius: 12px;
font-size: 0.95rem;
line-height: 1.55;
max-width: 88%;
animation: msgIn 0.4s var(--ease-out);
}
@keyframes msgIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.msg-bot { background: var(--paper); border: 1px solid var(--line); align-self: flex-start; color: var(--ink); }
.msg-user { background: var(--ocean); color: white; align-self: flex-end; }
.msg-cards { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
/* Yacht citation card — vertical layout with large hero image (click-to-enlarge)
and a spec sheet underneath. Replaces the old 56×56-thumbnail card so visitors
can actually see the yacht. */
.msg-card {
display: flex;
flex-direction: column;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 14px;
padding: 0;
overflow: hidden;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
color: var(--ink);
width: 100%;
box-shadow: 0 2px 6px -2px rgba(0,0,0,0.05);
}
.msg-card:hover { border-color: var(--ocean); box-shadow: 0 8px 24px -10px rgba(26,122,149,0.25); }
.msg-card-img {
appearance: none; border: 0; padding: 0; margin: 0;
width: 100%; aspect-ratio: 4/3; background: var(--bg-cool); display: block;
position: relative; overflow: hidden;
text-decoration: none; color: inherit; cursor: pointer;
}
.msg-card-img--empty { cursor: default; }
.msg-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 280ms var(--ease); }
.msg-card-img:hover img { transform: scale(1.04); }
/* Enlarge button — separate from the click-through anchor so the primary
click navigates to the yacht page and this button opens the lightbox. */
.msg-card-enlarge {
appearance: none; border: 0; cursor: zoom-in;
position: absolute; top: 0.6rem; right: 0.6rem;
background: rgba(0,0,0,0.55); color: #fff;
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 0.95rem; opacity: 0; transition: opacity 160ms var(--ease), background 160ms var(--ease);
z-index: 2;
}
.msg-card-img:hover .msg-card-enlarge { opacity: 1; }
.msg-card-enlarge:hover { background: rgba(0,0,0,0.8); }
.msg-card-img--empty .msg-card-enlarge { display: none; }
.msg-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem 0.95rem; min-width: 0; }
.msg-card-title-link { text-decoration: none; color: inherit; }
.msg-card-title-link:hover .msg-card-name { color: var(--ocean); }
.msg-card-name { font-family: var(--display); font-size: 1.2rem; color: var(--ink); margin: 0; line-height: 1.25; }
.msg-card-meta { font-size: 0.72rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.14em; }
.msg-card-specs { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.7rem; font-size: 0.82rem; }
.msg-card-specs dt { color: var(--ink-mute); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; line-height: 1.6; }
.msg-card-specs dd { color: var(--ink); margin: 0; line-height: 1.6; }
.msg-card-cta {
margin-top: 0.25rem; align-self: flex-start;
font-size: 0.82rem; font-weight: 500; color: var(--ocean);
text-decoration: none; border-bottom: 1px solid transparent;
transition: border-color 160ms var(--ease);
}
.msg-card-cta:hover { border-bottom-color: var(--ocean); }
/* Itinerary day-by-day formatting — Gizmo emits headings +
bodies.
These rules make the chat bubble breathe instead of running as one block. */
.msg-bot h4 {
font-family: var(--display);
font-size: 1rem;
color: var(--ocean);
margin: 0.85rem 0 0.2rem;
line-height: 1.3;
font-weight: 500;
}
.msg-bot h4:first-child { margin-top: 0.2rem; }
.msg-bot p { margin: 0 0 0.55rem; line-height: 1.55; }
.msg-bot p:last-child { margin-bottom: 0; }
.msg-bot ul, .msg-bot ol { margin: 0.4rem 0 0.7rem 1.2rem; padding: 0; }
.msg-bot li { margin-bottom: 0.25rem; line-height: 1.5; }
/* Itinerary hero strip rendered ABOVE the bot's day-by-day text */
.msg-itin-hero {
display: grid;
grid-template-columns: minmax(100px, 130px) 1fr;
gap: 0.7rem;
margin: 0 0 0.7rem;
padding: 0.6rem;
background: var(--bg-cool);
border: 1px solid var(--line);
border-radius: 10px;
}
.msg-itin-hero-img {
aspect-ratio: 4/3; overflow: hidden; border-radius: 6px;
background: var(--midnight);
}
.msg-itin-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-itin-hero-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.msg-itin-hero-eyebrow {
font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
color: var(--ink-mute); font-weight: 500;
}
.msg-itin-hero-title {
font-family: var(--display); font-size: 1.05rem;
color: var(--ink); margin: 0; line-height: 1.25;
}
.msg-itin-hero-summary {
font-size: 0.82rem; color: var(--ink-soft);
line-height: 1.5; margin: 0.15rem 0 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
/* Curated itinerary cards rendered BELOW the bot's text */
.msg-itin-curated { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed var(--line); }
.msg-itin-curated-head {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--ink-mute); margin-bottom: 0.55rem; font-weight: 500;
}
.msg-itin-curated-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.55rem;
}
.msg-itin-curated-card {
display: flex; flex-direction: column;
background: var(--paper); border: 1px solid var(--line);
border-radius: 8px; overflow: hidden; text-decoration: none;
color: inherit; transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.msg-itin-curated-card:hover { border-color: var(--ocean); transform: translateY(-2px); }
.msg-itin-curated-img { aspect-ratio: 4/3; background: var(--bg-cool); overflow: hidden; }
.msg-itin-curated-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-itin-curated-body { padding: 0.45rem 0.55rem 0.55rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.msg-itin-curated-title {
font-family: var(--display); font-size: 0.82rem; color: var(--ink);
line-height: 1.25;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.msg-itin-curated-meta { font-size: 0.66rem; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.1em; }
/* History divider — subtle hairline between restored prior conversation and
the current session. Includes an inline "clear" link so visitors who
actually wanted a fresh start can wipe it with one click. */
.msg-history-divider {
display: flex; align-items: center; justify-content: center;
margin: 0.6rem 0 0.8rem; padding: 0.35rem 0;
text-align: center; font-size: 0.7rem; color: var(--ink-mute);
text-transform: uppercase; letter-spacing: 0.12em;
border-top: 1px dashed var(--line);
border-bottom: 1px dashed var(--line);
}
.msg-history-divider .msg-history-clear {
appearance: none; background: none; border: 0; padding: 0 0 0 0.3rem;
color: var(--ocean); cursor: pointer; font: inherit;
text-transform: uppercase; letter-spacing: 0.12em;
text-decoration: underline;
}
.msg-history-divider .msg-history-clear:hover { color: var(--ink); }
/* Header Clear button (sits next to Filter and the close X) */
.gizmo-clear-btn {
appearance: none; cursor: pointer;
/* Consumer mode (default): the chat header is a light off-white, so the
button needs dark text. Industry mode overrides below to white-on-navy. */
background: transparent;
border: 1px solid var(--line);
color: var(--ink);
padding: 0.35rem 0.7rem;
border-radius: 999px;
font: 500 0.74rem var(--sans);
display: inline-flex; align-items: center; gap: 0.35rem;
transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease);
}
.gizmo-clear-btn:hover { background: rgba(0,0,0,0.05); color: var(--ink); border-color: var(--ocean); }
.gizmo-clear-btn svg { stroke: currentColor; }
/* Industry mode flips to white-on-dark to match the navy header treatment. */
.concierge[data-mode="industry"] .gizmo-clear-btn {
color: rgba(255,255,255,0.85);
border-color: rgba(255,255,255,0.28);
}
.concierge[data-mode="industry"] .gizmo-clear-btn:hover {
background: rgba(255,255,255,0.12);
color: #fff;
border-color: rgba(255,255,255,0.5);
}
/* Lightbox gallery — opened when a visitor clicks a yacht card's enlarge
button. Supports a gallery of images + an optional video frame. Keyboard
← →, click outside to close, swipe on touch. */
.yg-lightbox {
position: fixed; inset: 0; background: rgba(8,18,28,0.94);
display: none; align-items: center; justify-content: center;
z-index: 10000; padding: 2rem; flex-direction: column;
}
.yg-lightbox.is-open { display: flex; }
.yg-lightbox-figure { max-width: min(94vw, 1400px); max-height: 88vh; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; position: relative; }
.yg-lightbox-media {
display: flex; align-items: center; justify-content: center;
max-width: 100%; max-height: 78vh;
width: 100%;
}
.yg-lightbox-media img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 64px -16px rgba(0,0,0,0.6); }
.yg-lightbox-media video { max-width: 100%; max-height: 78vh; border-radius: 8px; background: #000; box-shadow: 0 24px 64px -16px rgba(0,0,0,0.6); }
.yg-lightbox-media iframe { width: min(94vw, 1280px); aspect-ratio: 16/9; border: 0; border-radius: 8px; background: #000; box-shadow: 0 24px 64px -16px rgba(0,0,0,0.6); }
.yg-lightbox-caption { color: rgba(255,255,255,0.85); font: 500 0.95rem var(--sans); text-align: center; letter-spacing: 0.05em; }
.yg-lightbox-counter { color: rgba(255,255,255,0.55); font: 500 0.78rem var(--sans); letter-spacing: 0.18em; text-transform: uppercase; }
.yg-lightbox-close,
.yg-lightbox-nav {
position: absolute; border: 0; cursor: pointer;
background: rgba(255,255,255,0.12); color: #fff;
display: flex; align-items: center; justify-content: center;
transition: background 160ms var(--ease);
backdrop-filter: blur(4px);
}
.yg-lightbox-close {
top: 1.2rem; right: 1.2rem;
width: 44px; height: 44px; border-radius: 50%;
font-size: 1.6rem; line-height: 1;
}
.yg-lightbox-close:hover { background: rgba(255,255,255,0.28); }
.yg-lightbox-nav {
top: 50%; transform: translateY(-50%);
width: 56px; height: 56px; border-radius: 50%;
font-size: 2rem; line-height: 1;
}
.yg-lightbox-prev { left: 1.5rem; }
.yg-lightbox-next { right: 1.5rem; }
.yg-lightbox-nav:hover { background: rgba(255,255,255,0.28); }
@media (max-width: 640px) {
.yg-lightbox-nav { width: 44px; height: 44px; font-size: 1.5rem; }
.yg-lightbox-prev { left: 0.4rem; }
.yg-lightbox-next { right: 0.4rem; }
}
.msg-shortcuts {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin: 0.4rem 0 0.6rem;
padding: 0;
align-self: flex-start;
}
.msg-shortcut {
appearance: none;
border: 1px solid var(--line-strong);
background: var(--paper);
color: var(--ink);
font: 500 0.78rem/1 var(--sans);
padding: 0.55rem 0.9rem;
border-radius: 999px;
cursor: pointer;
transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.msg-shortcut:hover { border-color: var(--ocean); color: var(--ocean); transform: translateY(-1px); }
.msg-shortcut--success { border-color: var(--brass); color: var(--ink); background: rgba(201,169,110,0.12); }
.msg-shortcut--success:hover { background: var(--brass); color: white; border-color: var(--brass); }
.msg-shortcut--warning { border-color: #d97706; color: #92400e; }
.msg-shortcut--danger { border-color: #b91c1c; color: #b91c1c; }
.msg-card-wrap { display: flex; flex-direction: column; gap: 0.35rem; }
.msg-card-actions {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
padding-left: 0.4rem;
}
.msg-card-action {
appearance: none;
border: 1px solid var(--line);
background: transparent;
color: var(--ink-mute);
font: 500 0.7rem/1 var(--sans);
padding: 0.4rem 0.7rem;
border-radius: 999px;
cursor: pointer;
transition: border-color 160ms var(--ease), color 160ms var(--ease), background 160ms var(--ease);
}
.msg-card-action:hover { border-color: var(--ocean); color: var(--ocean); background: rgba(26,122,149,0.06); }
.msg-breadcrumb {
display: none;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
padding: 0.65rem 1rem;
border-top: 1px solid var(--line);
background: var(--paper);
}
.msg-breadcrumb-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-mute);
margin-right: 0.2rem;
}
.msg-breadcrumb-chip {
appearance: none;
border: 1px solid var(--ocean);
background: rgba(26,122,149,0.08);
color: var(--ocean);
font: 500 0.75rem/1 var(--sans);
padding: 0.45rem 0.55rem 0.45rem 0.75rem;
border-radius: 999px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: background 160ms var(--ease);
}
.msg-breadcrumb-chip span { font-size: 1rem; line-height: 1; opacity: 0.7; }
.msg-breadcrumb-chip:hover { background: rgba(26,122,149,0.16); }
/* ==================== Insights (Industry Mode) ==================== */
.insights-main { padding-top: 6rem; }
.insights-hero {
padding: 3rem 0 2rem;
background: var(--bg-cool);
border-bottom: 1px solid var(--line);
}
.insights-search {
display: flex;
gap: 0.6rem;
margin-top: var(--space-lg);
max-width: 720px;
}
.insights-search input {
flex: 1;
background: white;
border: 1px solid var(--line-strong);
border-radius: 8px;
padding: 0.95rem 1.1rem;
font: 400 1rem/1.4 var(--sans);
color: var(--ink);
}
.insights-search input:focus { outline: 0; border-color: var(--ocean); }
.insights-search button {
appearance: none;
background: var(--ocean);
color: white;
border: 0;
border-radius: 8px;
padding: 0 1.6rem;
font: 500 0.95rem/1 var(--sans);
cursor: pointer;
transition: background 160ms var(--ease);
}
.insights-search button:hover { background: var(--ocean-deep); }
.insights-presets {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.insights-presets button {
appearance: none;
background: white;
border: 1px solid var(--line);
color: var(--ink-mute);
font: 500 0.78rem/1 var(--sans);
padding: 0.55rem 0.9rem;
border-radius: 999px;
cursor: pointer;
transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.insights-presets button:hover { border-color: var(--ocean); color: var(--ocean); }
.insights-result { padding: 3rem 0; min-height: 50vh; }
.insights-empty { color: var(--ink-mute); font-style: italic; }
.insights-card {
background: white;
border: 1px solid var(--line);
border-radius: 12px;
padding: 2rem 2.2rem;
box-shadow: 0 1px 3px rgba(14,43,61,0.04);
}
.insights-title { font-family: var(--display); font-size: 1.7rem; color: var(--ink); margin: 0 0 0.5rem; }
.insights-headline {
font-size: 1.05rem;
color: var(--ocean-deep);
margin: 0 0 1.5rem;
padding: 0.75rem 1rem;
background: rgba(26,122,149,0.06);
border-left: 3px solid var(--ocean);
border-radius: 0 6px 6px 0;
}
.insights-subtitle {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--ink-mute);
margin: 1.6rem 0 0.8rem;
font-weight: 500;
}
.insights-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1rem;
margin: 1rem 0;
}
.insights-kpi {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1rem 1.1rem;
background: var(--bg-cool);
border-radius: 8px;
border: 1px solid var(--line);
}
.insights-kpi-value { font-family: var(--display); font-size: 2rem; color: var(--ink); line-height: 1; }
.insights-kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-mute); }
.insights-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.insights-bar-row {
display: grid;
grid-template-columns: 200px 1fr 60px;
gap: 0.8rem;
align-items: center;
}
.insights-bar-label { font-size: 0.85rem; color: var(--ink); }
.insights-bar-track {
background: var(--bg-cool);
border-radius: 4px;
height: 28px;
position: relative;
overflow: hidden;
}
.insights-bar-fill {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--ocean), var(--ocean-deep));
border-radius: 4px;
transition: width 600ms var(--ease);
}
.insights-bar-value {
text-align: right;
font: 500 0.95rem/1 var(--sans);
color: var(--ink);
}
.insights-grid-wrap { overflow-x: auto; margin-top: 0.5rem; }
.insights-grid {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.insights-grid th, .insights-grid td {
padding: 0.6rem 0.8rem;
text-align: center;
border: 1px solid var(--line);
color: var(--ink);
}
.insights-grid thead th {
background: var(--bg-cool);
font-weight: 500;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--ink-mute);
}
.insights-grid tbody th {
background: var(--bg-cool);
text-align: left;
font-weight: 500;
color: var(--ink);
}
.insights-grid td { font-variant-numeric: tabular-nums; }
.insights-note { padding: 2rem 0 4rem; }
@media (max-width: 700px) {
.insights-bar-row { grid-template-columns: 110px 1fr 40px; gap: 0.5rem; }
.insights-card { padding: 1.5rem 1.2rem; }
.insights-search { flex-direction: column; }
.insights-kpi-value { font-size: 1.5rem; }
}
/* ==================== Admin Secrets Panel ==================== */
.admin-main { padding-top: 6rem; }
.admin-hero { padding: 3rem 0 1.5rem; background: var(--bg-cool); border-bottom: 1px solid var(--line); }
.admin-body { padding: 2.5rem 0 5rem; }
.admin-card {
background: white;
border: 1px solid var(--line);
border-radius: 12px;
padding: 1.6rem 1.8rem;
box-shadow: 0 1px 3px rgba(14,43,61,0.04);
}
.admin-card-title { font-family: var(--display); font-size: 1.5rem; color: var(--ink); margin: 0 0 0.5rem; }
.admin-error { color: #b91c1c; font-size: 0.9rem; margin: 0.6rem 0 0; min-height: 1.2em; }
.admin-warning { color: #92400e !important; }
.admin-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.4rem;
background: white;
border: 1px solid var(--line);
border-radius: 10px;
margin-bottom: 1.5rem;
}
.admin-toolbar p { color: var(--ink); }
.btn-ghost {
background: transparent;
color: var(--ink-mute);
border: 1px solid var(--line);
padding: 0.55rem 1rem;
border-radius: 999px;
font: 500 0.85rem/1 var(--sans);
cursor: pointer;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
#login-form input,
.admin-secret-form input,
.admin-secret-form select,
.admin-custom input {
width: 100%;
background: white;
border: 1px solid var(--line-strong);
border-radius: 8px;
padding: 0.85rem 1rem;
font: 400 0.95rem/1.4 var(--sans);
color: var(--ink);
box-sizing: border-box;
}
.admin-secret-form select { flex: 1; min-width: 200px; cursor: pointer; }
#login-form input:focus,
.admin-secret-form input:focus,
.admin-secret-form select:focus,
.admin-custom input:focus { outline: 0; border-color: var(--ocean); }
.admin-secret-card {
background: white;
border: 1px solid var(--line);
border-radius: 10px;
padding: 1.4rem 1.5rem;
margin-bottom: 1rem;
}
.admin-secret-card.is-required { border-left: 3px solid var(--brass); }
.admin-secret-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.admin-secret-head h3 {
margin: 0 0 0.3rem;
font-family: var(--sans);
font-size: 1rem;
font-weight: 600;
color: var(--ink);
display: flex;
gap: 0.5rem;
align-items: center;
}
.admin-key {
font: 500 0.72rem/1 var(--mono, ui-monospace, monospace);
color: var(--ink-mute);
text-transform: none;
letter-spacing: 0;
}
.admin-secret-status {
display: flex;
align-items: center;
gap: 0.6rem;
}
.admin-tag {
display: inline-block;
padding: 0.25rem 0.55rem;
border-radius: 4px;
font: 500 0.65rem/1 var(--sans);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.admin-tag--ok { background: rgba(26,122,149,0.15); color: var(--ocean-deep); }
.admin-tag--missing { background: rgba(185,28,28,0.1); color: #b91c1c; }
.admin-tag--default { background: rgba(199,153,0,0.15); color: #856200; cursor: help; }
.admin-tag--req { background: rgba(201,169,110,0.18); color: #6b4f1f; }
.admin-preview {
font: 500 0.75rem/1 var(--mono, ui-monospace, monospace);
color: var(--ink);
background: var(--bg-cool);
padding: 0.3rem 0.5rem;
border-radius: 4px;
}
.admin-secret-desc { color: var(--ink); font-size: 0.88rem; margin: 0.6rem 0 0.2rem; }
.admin-secret-help { color: var(--ink-mute); font-size: 0.8rem; margin: 0.2rem 0 0; }
.admin-secret-form {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.admin-secret-form input { flex: 1; min-width: 200px; }
.admin-secret-form .btn { padding: 0.85rem 1.3rem; }
.admin-del { color: #b91c1c !important; border-color: rgba(185,28,28,0.3) !important; }
.admin-del:hover { border-color: #b91c1c !important; }
.admin-secret-msg { font-size: 0.85rem; margin: 0.6rem 0 0; min-height: 1.2em; color: var(--ink-mute); }
.admin-secret-msg--ok { color: var(--ocean-deep); }
.admin-secret-msg--err { color: #b91c1c; }
/* Quick-link chips beside the input — open the relevant external service in a new tab */
.admin-secret-links {
display: inline-flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
margin-left: auto; /* push to the right of the input + Set button */
}
.admin-link-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: var(--bg-cool, #f3f6f8);
color: var(--ocean, #1a7a95);
border: 1px solid var(--line, #e2e6e9);
border-radius: 999px;
padding: 0.45rem 0.85rem;
font-size: 0.78rem;
font-weight: 500;
text-decoration: none;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
white-space: nowrap;
}
.admin-link-chip:hover {
background: var(--ocean, #1a7a95);
border-color: var(--ocean, #1a7a95);
color: white;
}
.admin-link-chip span { font-size: 0.72rem; opacity: 0.7; }
@media (max-width: 600px) {
.admin-secret-links { margin-left: 0; width: 100%; }
}
/* API usage strip — sits under the form on each card.
Daily stacked-bar (success green stacked under errors red) for last 14d. */
.admin-usage {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1rem;
margin-top: 0.85rem;
padding: 0.7rem 0.9rem;
background: var(--bg-cool, #f3f6f8);
border-radius: 8px;
border: 1px solid var(--line, #e2e6e9);
}
.admin-usage-stats {
display: flex;
align-items: baseline;
gap: 0.35rem;
flex-wrap: wrap;
}
.admin-usage-num { font-family: var(--display, 'Cormorant Garamond', serif); font-size: 1.4rem; color: var(--ink, #1a1a1a); line-height: 1; }
.admin-usage-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute, #999); margin-right: 0.4rem; }
.admin-usage-sep { color: var(--ink-mute, #ccc); font-size: 1rem; margin: 0 0.1rem; }
.admin-usage-err { color: #b91c1c; }
.admin-usage-chart { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
.usage-bar { display: flex; flex-direction: column; justify-content: flex-end; width: 6px; height: 32px; border-radius: 2px; overflow: hidden; background: rgba(0,0,0,0.04); }
.usage-bar-ok { background: linear-gradient(180deg, #1a7a95, #0e5972); border-radius: 2px 2px 0 0; }
.usage-bar-err { background: #b91c1c; border-radius: 2px 2px 0 0; }
.usage-bar:has(.usage-bar-err) .usage-bar-ok { border-radius: 0; }
@media (max-width: 600px) {
.admin-usage { flex-direction: column; align-items: stretch; gap: 0.6rem; }
.admin-usage-chart { justify-content: flex-start; }
}
.admin-custom summary {
cursor: pointer;
font: 500 0.95rem/1 var(--sans);
color: var(--ink);
padding: 0.4rem 0;
}
.admin-custom[open] summary { margin-bottom: 0.8rem; }
.msg-typing {
display: inline-flex;
gap: 4px;
padding: 0.6rem 1rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
align-self: flex-start;
}
.msg-typing span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ocean);
animation: typing 1.2s var(--ease) infinite;
}
.msg-typing span:nth-child(2) { animation-delay: 0.18s; }
.msg-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing {
0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.concierge-suggestions {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0 var(--space-md);
padding-bottom: 0.8rem;
background: var(--bg);
}
.concierge-suggestions button {
font-size: 0.72rem;
color: var(--ink);
border: 1px solid var(--line);
background: var(--paper);
border-radius: 999px;
padding: 0.5rem 0.9rem;
transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.concierge-suggestions button:hover { border-color: var(--ocean); color: var(--ocean); }
.concierge-foot {
padding: var(--space-sm) var(--space-md);
border-top: 1px solid var(--line);
background: var(--paper);
}
.concierge-input {
display: flex;
gap: 0.5rem;
align-items: center;
background: var(--bg-cool);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.4rem 0.5rem 0.4rem 1rem;
transition: border-color var(--dur-fast) var(--ease);
}
.concierge-input:focus-within { border-color: var(--ocean); }
.concierge-input input {
flex: 1;
background: transparent;
border: 0;
color: var(--ink);
padding-block: 0.55rem;
font-size: 0.95rem;
}
.concierge-input input:focus { outline: 0; }
.concierge-input button {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--ocean);
color: white;
display: grid; place-items: center;
transition: background var(--dur-fast) var(--ease);
}
.concierge-input button:hover { background: var(--ocean-deep); }
.concierge-input button:disabled { opacity: 0.5; cursor: not-allowed; }
.concierge-disclaimer {
font-size: 0.68rem;
text-align: center;
color: var(--ink-mute);
margin-top: 0.5rem;
letter-spacing: 0.05em;
}
/* ---------- Cookie banner ------------------------------------ */
.cookie-banner {
position: fixed;
bottom: 1rem;
left: 1rem;
right: 1rem;
z-index: 65;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 6px;
padding: 1rem var(--space-md);
display: none;
flex-direction: column;
gap: 0.6rem;
box-shadow: var(--shadow-deep);
}
@media (min-width: 720px) {
.cookie-banner { flex-direction: row; align-items: center; max-width: 760px; left: auto; right: 1rem; }
.cookie-banner p { flex: 1; margin: 0; }
}
.cookie-banner.is-shown { display: flex; }
.cookie-banner p { font-size: 0.85rem; margin: 0; color: var(--ink-soft); }
/* ---------- Misc --------------------------------------------- */
.skip-link {
position: absolute;
top: -100px; left: 0;
background: var(--ocean);
color: white;
padding: 0.6rem 1rem;
font-size: 0.8rem;
z-index: 100;
}
.skip-link:focus { top: 0; }
/* Photo collage (home + about pages) */
.photo-collage {
display: grid;
gap: 8px;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: 1fr 1fr;
aspect-ratio: 5 / 4;
border-radius: 6px;
overflow: hidden;
}
.photo-collage > * {
background-size: cover;
background-position: center;
background-color: var(--bg-cool);
transition: transform 1s var(--ease);
}
.photo-collage > :nth-child(1) { grid-row: span 2; }
.photo-collage:hover > * { transform: scale(1.02); }
/* ---------- Logo image treatment ---------------------------- */
.brand-logo {
height: 28px;
width: auto;
display: block;
transition: filter var(--dur) var(--ease);
}
/* over the hero (dark image), invert the black wordmark to white */
.site-header:not(.is-scrolled) .brand-logo { filter: brightness(0) invert(1); }
.site-header.is-scrolled .brand-logo { filter: none; }
/* footer logo always inverted (footer is dark) */
.site-footer .brand-logo { filter: brightness(0) invert(1); }
/* ---------- .section--midnight — light with mesh-gradient atmosphere -- */
.section--midnight {
background: var(--bg-cool);
color: var(--ink);
position: relative;
overflow: hidden;
}
.section--midnight::before {
content: '';
position: absolute;
inset: -10%;
background-image:
radial-gradient(ellipse 60% 40% at 18% 12%, rgba(26, 122, 149, 0.12) 0%, transparent 65%),
radial-gradient(ellipse 40% 50% at 82% 88%, rgba(201, 169, 110, 0.10) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 88% 18%, rgba(54, 164, 194, 0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
animation: meshDrift 18s var(--ease-in-out) infinite alternate;
filter: blur(0.5px);
}
@keyframes meshDrift {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(2%, -2%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
.section--midnight::before { animation: none; }
}
.section--midnight > * { position: relative; z-index: 1; }
.section--midnight h1, .section--midnight h2, .section--midnight h3, .section--midnight h4 { color: var(--ink); }
.section--midnight .lead { color: var(--ink-soft); }
.section--midnight .eyebrow { color: var(--ocean); }
.section--midnight .eyebrow::before { background: var(--ocean); }
.section--midnight .stat { border-top-color: var(--line); }
.section--midnight .stat-num { color: var(--ocean); }
.section--midnight .stat-label { color: var(--ink-mute); }
.section--midnight .yacht-card { background: var(--paper); border-color: var(--line); color: var(--ink); }
.section--midnight .yacht-card-body h3 { color: var(--ink); }
.section--midnight .yacht-meta { color: var(--ink-mute); }
.section--midnight .yacht-card-tagline { color: var(--ink-soft); }
.section--midnight .yacht-card-foot { border-top-color: var(--line); }
.section--midnight .process-step { border-top-color: var(--line); }
.section--midnight .process-step::before { color: var(--ocean); }
.section--midnight .faq-item { border-bottom-color: var(--line); }
.section--midnight .field label { color: var(--ink-mute); }
.section--midnight .field input,
.section--midnight .field textarea,
.section--midnight .field select { border-bottom-color: var(--line-strong); color: var(--ink); }
.section--midnight .form-meta { color: var(--ink-mute); }
.section--midnight a:not(.btn):not(.btn-link) { color: var(--ocean); }
.section--midnight a:not(.btn):not(.btn-link):hover { color: var(--ocean-deep); }
/* ---------- .section--ocean — also light variant (no dark section breaks) ---- */
.section--ocean {
background: linear-gradient(180deg, var(--paper) 0%, var(--bg-cool) 100%);
color: var(--ink);
}
.section--ocean h1, .section--ocean h2, .section--ocean h3, .section--ocean h4 { color: var(--ink); }
.section--ocean .lead { color: var(--ink-soft); }
.section--ocean .eyebrow { color: var(--ocean); }
.section--ocean .eyebrow::before { background: var(--ocean); }
.section--ocean .btn-ghost { color: var(--ink); border-color: var(--line-strong); }
.section--ocean .btn-ghost:hover { background: var(--ink); color: white; border-color: var(--ink); }
.section--ocean .stat { border-top-color: var(--line); }
.section--ocean .stat-num { color: var(--ocean); }
.section--ocean .stat-label { color: var(--ink-mute); }
/* ---------- Onboard — editorial split (large image + stacked features) -------- */
.onboard {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.onboard {
grid-template-columns: 1.15fr 1fr;
gap: var(--space-2xl);
align-items: stretch;
}
}
.onboard-figure {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 22px;
overflow: hidden;
background: var(--bg-cool);
box-shadow: 0 30px 60px -28px rgba(14, 43, 61, 0.35);
}
.onboard-figure img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease);
}
.onboard-figure:hover img { transform: scale(1.04); }
.onboard-figure .caption {
position: absolute;
bottom: 1rem; left: 1rem;
background: rgba(255, 255, 255, 0.95);
color: var(--ocean);
padding: 0.45rem 0.8rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 4px;
backdrop-filter: blur(6px);
font-weight: 600;
}
.onboard-features {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.onboard-feature {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--space-md);
padding: var(--space-md) 0;
border-top: 1px solid var(--line);
align-items: start;
}
.onboard-feature:first-child { border-top: 0; padding-top: 0; }
.onboard-feature-num {
font-family: var(--display);
font-size: 1.4rem;
color: var(--ocean);
font-weight: 400;
letter-spacing: 0.05em;
}
.onboard-feature h3 { font-size: 1.5rem; font-weight: 500; margin-bottom: 0.4rem; }
.onboard-feature p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; margin: 0 0 0.4rem; }
.onboard-feature ul {
display: inline-flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.4rem;
}
.onboard-feature li {
background: var(--bg-cool);
border: 1px solid var(--line);
color: var(--ink-soft);
padding: 0.3rem 0.6rem;
border-radius: 999px;
font-size: 0.78rem;
}
/* Old onboard-grid kept as a fallback for any external page that still uses it */
.onboard-grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@media (min-width: 700px) { .onboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .onboard-grid { grid-template-columns: repeat(4, 1fr); } }
.onboard-card {
background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
overflow: hidden; display: flex; flex-direction: column;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.onboard-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--ocean); }
.onboard-card-media { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--bg-cool); }
.onboard-card-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.5rem; }
.onboard-card h3 { font-size: 1.3rem; font-weight: 500; }
.onboard-card ul { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.4rem; }
.onboard-card li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--ink-soft); }
.onboard-card li::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ocean); flex-shrink: 0; }
/* ---------- Themes — bento (1 hero + 3 smaller) ------------
Simple version: hero card is taller (3/4), smalls are wider (4/3). All cards keep their aspect-ratio so absolute-positioned body content has height to occupy. */
.themes-grid {
display: grid;
gap: var(--space-md);
grid-template-columns: 1fr;
}
@media (min-width: 800px) {
.themes-grid {
grid-template-columns: 1.4fr 1fr;
gap: var(--space-md);
}
.themes-grid > :nth-child(1) {
grid-row: span 3;
aspect-ratio: 4 / 5;
}
.themes-grid > :nth-child(1) h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.themes-grid > :nth-child(1) p { font-size: 1rem; max-width: 38ch; }
.themes-grid > :not(:nth-child(1)) {
aspect-ratio: 16 / 9;
}
}
.theme-card {
position: relative;
aspect-ratio: 4 / 3;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
color: white;
background: var(--aegean);
display: block;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
box-shadow: 0 22px 44px -22px rgba(14, 43, 61, 0.4);
}
.theme-card:hover { transform: translateY(-3px); color: white; }
.theme-card-media {
position: absolute; inset: 0; z-index: -1;
background-size: cover;
background-position: center;
transition: transform 1.4s var(--ease);
}
.theme-card::after {
content: '';
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(14, 43, 61, 0.05) 0%, rgba(14, 43, 61, 0.85) 100%);
}
.theme-card:hover .theme-card-media { transform: scale(1.06); }
.theme-card-body {
position: absolute;
inset: 0;
padding: var(--space-md);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.theme-card-icon {
width: 36px; height: 36px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 50%;
display: grid; place-items: center;
margin-bottom: var(--space-sm);
}
.theme-card h3 { font-size: 1.6rem; color: white; margin-bottom: 0.3rem; }
.theme-card p { font-size: 0.85rem; opacity: 0.9; line-height: 1.5; margin: 0; }
/* ---------- Yacht carousel ---------------------------------- */
.carousel {
position: relative;
overflow: hidden;
margin-top: var(--space-md);
}
.carousel-track {
display: flex;
gap: var(--space-md);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: var(--rail);
padding: 0.4rem var(--rail) 1.6rem;
margin: 0 calc(-1 * var(--rail));
scrollbar-width: thin;
scrollbar-color: var(--ocean) transparent;
}
.carousel-track::-webkit-scrollbar { height: 6px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--ocean); border-radius: 4px; }
.carousel-track > * {
scroll-snap-align: start;
flex: 0 0 280px;
max-width: 320px;
}
@media (min-width: 800px) {
.carousel-track > * { flex: 0 0 320px; }
}
/* ---------- Builder logos strip ----------------------------- */
.builders {
background: var(--bg-cool);
padding-block: var(--space-xl);
overflow: hidden;
border-block: 1px solid var(--line);
}
.builders-head {
text-align: center;
margin-bottom: var(--space-lg);
}
.builders-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem 2rem;
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--rail);
}
.builders-list span {
font-family: var(--display);
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
font-style: italic;
color: var(--ink-soft);
letter-spacing: 0.02em;
transition: color var(--dur-fast) var(--ease);
}
.builders-list span:hover { color: var(--ocean); }
/* ---------- Newsletter (footer) ----------------------------- */
.newsletter {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin-top: var(--space-md);
}
.newsletter input {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: white;
padding: 0.7rem 1rem;
border-radius: 999px;
font-size: 0.9rem;
transition: border-color var(--dur-fast) var(--ease);
}
.newsletter input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter input:focus { outline: 0; border-color: var(--brass-bright); }
.newsletter button {
background: var(--brass);
color: var(--ink);
padding: 0.7rem 1.2rem;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
transition: background var(--dur-fast) var(--ease);
}
.newsletter button:hover { background: var(--brass-bright); }
/* ---------- Long-form — multi-column editorial with pull-quote ------ */
.longform {
display: grid;
gap: var(--space-xl) var(--space-2xl);
grid-template-columns: 1fr;
max-width: 1180px;
margin: 0 auto;
}
@media (min-width: 900px) {
.longform {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
align-items: start;
}
.longform > .longform-intro { grid-column: 1 / -1; }
.longform > .longform-pull { grid-column: 1 / -1; }
}
.longform-intro h2 { max-width: 18ch; }
.longform-intro .lead { max-width: 60ch; }
.longform h3 {
font-size: 1.5rem;
font-weight: 500;
margin-top: 0;
margin-bottom: 0.6rem;
color: var(--ink);
position: relative;
padding-top: 1.4rem;
border-top: 1px solid var(--line-strong);
}
.longform h3::before {
content: counter(longform-h, decimal-leading-zero);
counter-increment: longform-h;
position: absolute;
top: 1.4rem;
right: 0;
font-family: var(--body);
font-size: 0.7rem;
color: var(--ocean);
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
}
.longform { counter-reset: longform-h; }
.longform ul { margin: 0 0 var(--space-md); padding-left: 0; list-style: none; color: var(--ink-soft); }
.longform ul li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--line);
display: flex;
align-items: baseline;
gap: 0.6rem;
}
.longform ul li::before {
content: '→';
color: var(--ocean);
font-weight: 600;
flex-shrink: 0;
}
.longform p { color: var(--ink-soft); line-height: 1.7; }
.longform a { color: var(--ocean); border-bottom: 1px solid currentColor; }
.longform-pull {
padding: var(--space-xl) 0;
border-block: 1px solid var(--line-strong);
text-align: center;
font-family: var(--display);
font-style: italic;
font-size: clamp(1.6rem, 3vw, 2.6rem);
line-height: 1.25;
color: var(--ink);
max-width: 28ch;
margin: 0 auto;
}
.longform-pull::before { content: '"'; color: var(--ocean); margin-right: 0.2em; }
.longform-pull::after { content: '"'; color: var(--ocean); margin-left: 0.1em; }
.longform-pull .attr {
display: block;
margin-top: var(--space-md);
font-style: normal;
font-family: var(--body);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--ink-mute);
}
/* ---------- Section rhythm — break monotone padding -------- */
.section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.section--airy { padding-block: clamp(6rem, 11vw, 9rem); }
/* ---------- Builders — vary the brand wordmark sizes ------- */
.builders-list span:nth-child(3n) { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.builders-list span:nth-child(5n) { font-size: clamp(0.9rem, 1.2vw, 1.05rem); color: var(--ink-mute); }
.builders-list span:nth-child(7n+1) { font-style: normal; letter-spacing: 0.05em; font-family: var(--body); font-weight: 500; }
/* Print + reduced motion */
@media print {
.site-header, .concierge, .concierge-trigger, .cookie-banner, .marquee { display: none !important; }
body { background: white; color: black; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ---------- Photo wall — masonry-ish gallery moment -------- */
.photo-wall {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.photo-wall {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 140px;
}
.photo-wall > :nth-child(1) { grid-column: span 3; grid-row: span 2; }
.photo-wall > :nth-child(2) { grid-column: span 2; grid-row: span 1; }
.photo-wall > :nth-child(3) { grid-column: span 1; grid-row: span 2; }
.photo-wall > :nth-child(4) { grid-column: span 2; grid-row: span 1; }
.photo-wall > :nth-child(5) { grid-column: span 2; grid-row: span 2; }
.photo-wall > :nth-child(6) { grid-column: span 2; grid-row: span 1; }
.photo-wall > :nth-child(7) { grid-column: span 2; grid-row: span 2; }
.photo-wall > :nth-child(8) { grid-column: span 4; grid-row: span 1; }
}
.photo-wall > * {
background-size: cover;
background-position: center;
border-radius: 14px;
transition: transform 1s var(--ease);
background-color: var(--bg-cool);
aspect-ratio: 4 / 3;
}
@media (min-width: 700px) {
.photo-wall > * { aspect-ratio: auto; }
}
.photo-wall > *:hover { transform: scale(1.02); }
/* ---------- Themes — 4-card icon-led layout (matches her live site) -- */
.themes {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .themes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .themes { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } }
.theme {
display: flex;
flex-direction: column;
gap: var(--space-md);
color: var(--ink);
}
.theme:hover { color: var(--ink); }
.theme-icon {
width: 56px; height: 56px;
border: 1px solid var(--ocean);
border-radius: 50%;
display: grid; place-items: center;
color: var(--ocean);
margin: 0 auto;
transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
flex-shrink: 0;
}
.theme:hover .theme-icon { background: var(--ocean); color: white; }
.theme-icon svg { width: 24px; height: 24px; }
.theme h3 {
font-size: clamp(1.2rem, 1.6vw, 1.4rem);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
text-align: center;
margin: 0;
}
.theme-img {
aspect-ratio: 5 / 4;
border-radius: 14px;
overflow: hidden;
background: var(--bg-cool);
}
.theme-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1s var(--ease);
}
.theme:hover .theme-img img { transform: scale(1.04); }
.theme-body {
display: flex;
flex-direction: column;
gap: 0.8rem;
color: var(--ink-soft);
font-size: 0.92rem;
line-height: 1.6;
}
.theme-body p { margin: 0; }
/* ---------- Builders — actual logo images (matches her live site) -- */
.builders-logos {
display: grid;
gap: 1rem 2rem;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--rail);
}
.builders-logos img {
width: 100%;
max-height: 56px;
height: auto;
object-fit: contain;
filter: grayscale(100%) opacity(0.55);
transition: filter 240ms var(--ease);
mix-blend-mode: multiply;
}
.builders-logos img:hover { filter: grayscale(0) opacity(1); }
/* ---------- Builders — horizontal scrolling marquee (like her site) -- */
.builders-marquee {
overflow: hidden;
width: 100%;
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
padding-block: var(--space-md);
}
.builders-marquee-track {
display: inline-flex;
gap: clamp(2.5rem, 5vw, 4.5rem);
align-items: center;
animation: buildersScroll 50s linear infinite;
width: max-content;
will-change: transform;
}
.builders-marquee:hover .builders-marquee-track { animation-play-state: paused; }
.builders-marquee-track img {
/* Fixed bounding box gives each logo equal optical weight regardless of native aspect ratio */
width: 150px;
height: 60px;
flex-shrink: 0;
object-fit: contain;
object-position: center;
filter: grayscale(100%) opacity(0.55);
transition: filter 240ms var(--ease);
mix-blend-mode: multiply;
}
.builders-marquee-track img:hover { filter: grayscale(0) opacity(1); }
@keyframes buildersScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.builders-marquee-track { animation: none; }
}
/* ---------- Mini "Ready to Explore" CTA bar ---------------- */
.ready-strip {
background: var(--ink);
color: white;
text-align: center;
padding: clamp(2.5rem, 6vw, 4rem) var(--rail);
}
.ready-strip h2 {
font-size: clamp(2rem, 4vw, 3rem);
color: white;
margin-bottom: 0.6rem;
font-weight: 400;
letter-spacing: -0.02em;
}
.ready-strip p {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.22em;
color: rgba(255, 255, 255, 0.72);
margin-bottom: var(--space-md);
}
/* ---------- Cuisine circles → cabin portholes ----------------
Layered box-shadows build the polished-brass ring:
outer dark housing → bright brass → inner shadow → brass inner →
dark glass rim → glass top shadow → glass bottom highlight → drop shadow
border-radius:50% keeps everything circular through the layers. */
.cuisine-circles {
display: flex;
gap: clamp(1rem, 2.5vw, 2rem);
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding-block: var(--space-xl);
}
.cuisine-circles img {
width: clamp(120px, 14vw, 200px);
aspect-ratio: 1 / 1;
height: auto;
border-radius: 50%;
object-fit: cover;
border: 0;
box-shadow:
0 0 0 2px #4a3408, /* outer dark housing line */
0 0 0 4px #c79900, /* brass outer ring */
0 0 0 6px #8b6914, /* dark seam */
0 0 0 10px #d4a82c, /* main brass band */
0 0 0 12px #6b4f10, /* inner dark seam */
inset 0 0 0 2px rgba(0,0,0,0.55), /* glass-side inner rim */
inset 0 8px 18px rgba(0,0,0,0.40), /* glass top shadow (curved-glass illusion) */
inset 0 -4px 12px rgba(255,255,255,0.12), /* subtle bottom highlight */
0 14px 32px -10px rgba(14, 43, 61, 0.55); /* drop shadow under porthole */
transition: transform 600ms var(--ease), filter 300ms ease;
flex-shrink: 0;
}
.cuisine-circles img:hover {
transform: scale(1.06) translateY(-3px);
filter: brightness(1.04);
}
/* Stagger heights — like real portholes along a hull line */
.cuisine-circles img:nth-child(2) { transform: translateY(-12px); }
.cuisine-circles img:nth-child(2):hover { transform: scale(1.06) translateY(-15px); }
.cuisine-circles img:nth-child(4) { transform: translateY(-8px); }
.cuisine-circles img:nth-child(4):hover { transform: scale(1.06) translateY(-11px); }
.cuisine-circles img:nth-child(6) { transform: translateY(-10px); }
.cuisine-circles img:nth-child(6):hover { transform: scale(1.06) translateY(-13px); }
.cuisine-circles img:nth-child(8) { transform: translateY(-6px); }
.cuisine-circles img:nth-child(8):hover { transform: scale(1.06) translateY(-9px); }
/* ---------- Interactive regions — list + linked preview image -- */
.regions {
display: grid;
gap: var(--space-xl);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 900px) {
.regions {
grid-template-columns: 1fr 1.2fr;
gap: var(--space-2xl);
}
}
.regions-list { list-style: none; margin: 0; padding: 0; }
.regions-list li {
border-top: 1px solid var(--line);
transition: padding 320ms var(--ease);
}
.regions-list li:last-child { border-bottom: 1px solid var(--line); }
.regions-list a {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
gap: 1rem;
padding: 1.4rem 0;
color: var(--ink);
transition: padding 320ms var(--ease), color 240ms var(--ease);
position: relative;
}
.regions-list a::before {
content: '→';
position: absolute;
left: -1.5rem;
top: 1.6rem;
color: var(--ocean);
opacity: 0;
transform: translateX(-8px);
transition: opacity 240ms var(--ease), transform 320ms var(--ease);
}
.regions-list a strong {
font-family: var(--display);
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.1;
transition: color 240ms var(--ease);
}
.regions-list a span {
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--ink-mute);
white-space: nowrap;
}
.regions-list a p {
grid-column: 1 / -1;
color: var(--ink-soft);
margin: 0.4rem 0 0;
font-size: 0.95rem;
max-height: 0;
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
transition: max-height 320ms var(--ease), opacity 240ms var(--ease), transform 320ms var(--ease);
}
.regions-list li:hover,
.regions-list li.is-active {
padding-left: 1.5rem;
}
.regions-list li:hover a strong,
.regions-list li.is-active a strong { color: var(--ocean); }
.regions-list li:hover a::before,
.regions-list li.is-active a::before { opacity: 1; transform: translateX(0); }
.regions-list li:hover a p,
.regions-list li.is-active a p {
max-height: 80px;
opacity: 1;
transform: translateY(0);
}
.regions-preview {
position: sticky;
top: 6rem;
aspect-ratio: 4 / 5;
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow-deep);
background: var(--bg-cool);
}
.regions-preview img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.04);
transition: opacity 600ms var(--ease), transform 1200ms var(--ease);
will-change: opacity, transform;
}
.regions-preview img.is-active {
opacity: 1;
transform: scale(1);
}
.regions-preview .caption {
position: absolute;
bottom: 1rem; left: 1rem;
background: rgba(255, 255, 255, 0.95);
color: var(--ocean);
padding: 0.5rem 0.9rem;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.2em;
border-radius: 4px;
backdrop-filter: blur(6px);
font-weight: 600;
z-index: 2;
}
/* =============================================================
MOBILE RESPONSIVE FIXES — clean up cramped/overflowing sections
============================================================= */
@media (max-width: 700px) {
/* Hero — tighter, smaller display type */
.hero { min-height: 80vh; min-height: 80dvh; }
.display-1 { font-size: clamp(2.1rem, 9vw, 3rem); letter-spacing: -0.025em; }
.display-2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
.hero-content { padding-top: 7rem; padding-bottom: 3rem; }
/* Header — smaller logo, tighter spacing */
.site-header { padding: 0.6rem 1rem; }
.brand-logo { height: 22px; }
.nav-toggle { width: 38px; height: 38px; }
/* Section rhythm — much less padding on mobile */
.section { padding-block: clamp(2.2rem, 7vw, 3rem); }
.section--airy { padding-block: clamp(2.8rem, 9vw, 4rem); }
.section--tight { padding-block: clamp(1.8rem, 5vw, 2.2rem); }
/* Section heads — collapse the actions row */
.section-head { gap: var(--space-sm); }
/* Eyebrow — smaller pill */
.eyebrow { font-size: 0.62rem; padding: 0.35rem 0.7rem; }
/* Themes — smaller card aspect ratio so 4 cards aren't enormous */
.themes { gap: var(--space-md); }
.theme-img { aspect-ratio: 16 / 10; border-radius: 12px; }
.theme h3 { font-size: 1.15rem; }
.theme-icon { width: 44px; height: 44px; }
.theme-icon svg { width: 18px; height: 18px; }
.theme-body { font-size: 0.88rem; }
/* Destinations grid — single column */
.destination-grid { gap: var(--space-sm); }
.dest-card { aspect-ratio: 16 / 10; border-radius: 14px; }
.dest-card h3 { font-size: 1.5rem; }
/* Yacht cards */
.yacht-card { border-radius: 12px; }
.yacht-card-body { padding: var(--space-sm); }
.yacht-card-body h3 { font-size: 1.2rem; }
/* Onboard editorial split — tighten */
.onboard { gap: var(--space-md); }
.onboard-figure { aspect-ratio: 4 / 3; border-radius: 14px; }
.onboard-feature { grid-template-columns: 44px 1fr; gap: var(--space-sm); padding: var(--space-md) 0; }
.onboard-feature-num { font-size: 1.3rem; }
.onboard-feature h3 { font-size: 1.2rem; }
.onboard-feature p { font-size: 0.88rem; }
/* Photo wall — single column, simpler grid */
.photo-wall {
grid-template-columns: 1fr 1fr;
grid-auto-rows: 110px;
gap: 6px;
}
.photo-wall > * { aspect-ratio: auto; border-radius: 10px; }
.photo-wall > :nth-child(1),
.photo-wall > :nth-child(2),
.photo-wall > :nth-child(3),
.photo-wall > :nth-child(4),
.photo-wall > :nth-child(5),
.photo-wall > :nth-child(6),
.photo-wall > :nth-child(7),
.photo-wall > :nth-child(8) {
grid-column: span 1; grid-row: span 1;
}
.photo-wall > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.photo-wall > :nth-child(8) { grid-column: span 2; }
/* Portholes — smaller + thinner brass on mobile, no stagger (gets messy) */
.cuisine-circles { gap: 1rem; padding-block: var(--space-lg); }
.cuisine-circles img {
width: 92px;
box-shadow:
0 0 0 1.5px #4a3408,
0 0 0 3px #c79900,
0 0 0 4.5px #8b6914,
0 0 0 7px #d4a82c,
0 0 0 8.5px #6b4f10,
inset 0 0 0 1.5px rgba(0,0,0,0.55),
inset 0 5px 12px rgba(0,0,0,0.40),
inset 0 -3px 8px rgba(255,255,255,0.12),
0 10px 24px -8px rgba(14, 43, 61, 0.55);
}
.cuisine-circles img:nth-child(2),
.cuisine-circles img:nth-child(4),
.cuisine-circles img:nth-child(6),
.cuisine-circles img:nth-child(8) { transform: none; }
.cuisine-circles img:nth-child(2):hover,
.cuisine-circles img:nth-child(4):hover,
.cuisine-circles img:nth-child(6):hover,
.cuisine-circles img:nth-child(8):hover { transform: scale(1.04); }
/* Stats — single column, but first one stays slightly larger */
.stat-row { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.stat-row > :first-child { grid-column: span 2; }
.stat-num { font-size: 2.2rem !important; }
.stat-row > :first-child .stat-num { font-size: 3.2rem !important; }
/* Builders marquee — smaller logos, tighter */
.builders-marquee-track { gap: 2.2rem; }
.builders-marquee-track img { width: 110px; height: 44px; }
.builders-marquee {
-webkit-mask-image: linear-gradient(90deg, transparent 0, black 30px, black calc(100% - 30px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, black 30px, black calc(100% - 30px), transparent 100%);
}
/* Process timeline — no asymmetric indents on mobile (everything stacks anyway) */
.process-step:nth-child(2),
.process-step:nth-child(3),
.process-step:nth-child(4) { padding-left: 0 !important; }
.process-step { grid-template-columns: 56px 1fr; padding: var(--space-md) 0; }
.process-step::before { font-size: 1.8rem; }
.process-step h3 { font-size: 1.2rem; }
/* Long-form — tighter typography */
.longform { gap: var(--space-lg); }
.longform h3 { font-size: 1.25rem; padding-top: 1rem; }
.longform-pull { font-size: 1.3rem; padding: var(--space-lg) 0; line-height: 1.3; }
/* Interactive regions — collapse to text-list on mobile, no sticky preview */
.regions { gap: var(--space-md); }
.regions-preview {
position: static;
aspect-ratio: 16 / 10;
border-radius: 14px;
order: -1; /* show preview first as a hero teaser */
}
.regions-list a { padding: 1rem 0; }
.regions-list a strong { font-size: 1.3rem; }
.regions-list a span { font-size: 0.7rem; }
.regions-list li:hover, .regions-list li.is-active { padding-left: 0; }
.regions-list a::before { display: none; }
/* Always show region descriptions inline (no hover on touch) */
.regions-list a p { max-height: none; opacity: 1; transform: none; margin-top: 0.4rem; font-size: 0.88rem; }
/* Page hero — less top padding on mobile */
.page-hero { padding-top: 6.5rem !important; padding-bottom: 3rem !important; }
.page-hero h1 { margin: 0.6rem 0; }
/* Yacht detail page — single column hero */
.yacht-hero { gap: var(--space-md); }
.yacht-hero-img { aspect-ratio: 4 / 3; border-radius: 14px; }
.yacht-spec-grid { grid-template-columns: 1fr 1fr; gap: var(--space-sm) var(--space-md); }
.yacht-spec dd { font-size: 1.3rem; }
/* Inquire form */
.form-row--2, .form-row--3 { grid-template-columns: 1fr; }
/* Search bar (yachts page) */
.search-bar { grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-sm); }
.search-bar .field { gap: 0.2rem; }
/* Marquee — smaller font */
.marquee { font-size: 1.1rem; }
.marquee-track { gap: 2.5rem; padding-left: 2.5rem; }
/* Tagline strip */
.tagline-strip { font-size: 1.1rem; padding-block: var(--space-sm); }
/* Concierge — full width on small */
.concierge { max-width: 100%; }
.concierge-trigger { right: 1rem; bottom: 1rem; padding: 0.7rem 1rem 0.7rem 0.7rem; font-size: 0.7rem; }
.concierge-trigger .dot { width: 26px; height: 26px; font-size: 0.95rem; }
/* Footer — single column */
.footer-top { gap: var(--space-lg); }
.footer-brand-blurb { font-size: 1.15rem; }
/* Ready strip */
.ready-strip { padding: var(--space-lg) 1rem; }
.ready-strip h2 { font-size: 1.7rem; }
.ready-strip p { font-size: 0.7rem; letter-spacing: 0.18em; }
/* Split sections — tighter gap */
.split { gap: var(--space-lg); }
.split-figure { aspect-ratio: 4 / 3; border-radius: 14px; }
/* Buttons — slightly smaller on mobile */
.btn { padding: 0.85rem 1.2rem; font-size: 0.7rem; }
/* Disable parallax-like motion that costs frames on mobile */
.hero-media img { animation-duration: 30s; }
}
/* Very small phones (<= 380px) */
@media (max-width: 380px) {
.photo-wall { grid-template-columns: 1fr; grid-auto-rows: auto; }
.photo-wall > * { aspect-ratio: 16 / 10 !important; grid-column: span 1 !important; grid-row: span 1 !important; }
.stat-row { grid-template-columns: 1fr; }
.stat-row > :first-child { grid-column: span 1; }
.cuisine-circles img { width: 78px; }
}
/* Home globe section — stack on tablet/mobile */
@media (max-width: 900px) {
.kim-globe-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
.kim-globe-grid > div:last-child { margin-left: auto; margin-right: auto; }
}