/* ============================================================
FORUM YACHTING — Production CSS
Built from 8 approved widget designs
============================================================ */
:root {
--bg: #ffffff;
--bg-surface: #eef2f6;
--bg-dark: #0d2840;
--bg-dark-elev: #1e4a73;
--ink: #0d2840;
--ink-muted: #6b7d92;
--ink-light: #8a9ab0;
--ink-faint: #c7d1de;
--ink-inv: #ffffff;
--ink-inv-muted: rgba(255,255,255,0.75);
--ink-inv-faint: rgba(255,255,255,0.45);
--line: rgba(13,40,64,0.1);
--line-strong: rgba(13,40,64,0.18);
--line-inv: rgba(255,255,255,0.14);
--accent: #b8965a;
--accent-dark: #8a6e3a;
--accent-light: #d4b780;
/* Legacy aliases — keep old pages (about, charter-info, privacy, etc.) working */
--cream: #f9f7f2;
--cream-dark: #f4ede0;
--teal: #0d2840;
--teal-dark: #0a1e30;
--muted: #6b7d92;
--gold: #b8965a;
--bg-grey: #fafbfc;
--font: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
--s9: 96px; --s10: 120px; --s11: 160px;
--container: 100%;
--container-narrow: 1100px;
--container-text: 760px;
--ease: cubic-bezier(.22,1,.36,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
}
/* ─── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
body {
font-family: var(--font);
font-weight: 400;
line-height: 1.5;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
/* iOS zooms in when a tapped input has font-size < 16px. Force 16px on
touch-sized screens so the page never jumps on focus. Desktop unaffected. */
@media (max-width: 768px) {
input, select, textarea { font-size: 16px !important; }
}
ul, ol { list-style: none; }
/* ─── TYPE ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
}
h1 { font-size: clamp(48px, 7vw, 110px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
h2 { font-size: clamp(34px, 5vw, 72px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
h3 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; letter-spacing: -0.02em; }
h4 { font-size: clamp(16px, 1.4vw, 20px); font-weight: 600; }
p { line-height: 1.6; }
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 600;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: var(--s5);
}
.lead {
font-size: clamp(16px, 1.4vw, 20px);
font-weight: 400;
line-height: 1.55;
color: var(--ink-muted);
max-width: 640px;
}
/* ─── NAV ──────────────────────────────────────────────────── */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
padding: 16px 5vw;
display: flex; align-items: center; justify-content: space-between;
transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.nav::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
transition: opacity .35s var(--ease);
}
.nav.scrolled {
background: rgba(255,255,255,0.78);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
padding: 8px 5vw;
box-shadow: 0 0.5px 0 var(--line);
}
.nav.scrolled .logo { height: 72px; }
.nav.scrolled .logo img { height: 66px; }
.nav.scrolled::before { opacity: 0; }
.logo { display: flex; align-items: center; height: 128px; }
.logo img { height: 124px; width: auto; transition: opacity .25s; }
.logo .logo-navy { display: none; }
.nav.scrolled .logo .logo-white { display: none; }
.nav.scrolled .logo .logo-navy { display: block; }
.nav-menu { display: flex; gap: 32px; }
.nav-menu a {
font-size: 13px; font-weight: 500; color: #fff;
letter-spacing: -0.01em; padding: 6px 0;
transition: opacity .2s;
}
.nav.scrolled .nav-menu a { color: var(--ink); }
.nav-menu a:hover { opacity: 0.6; }
.nav-cta { display: flex; align-items: center; gap: var(--s4); }
.btn-enquire {
background: transparent; color: #fff;
padding: 0 0 3px 0; border-radius: 0;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 19px;
font-weight: 500;
letter-spacing: 0;
border-bottom: 1px solid var(--accent);
display: inline-flex;
align-items: center;
gap: 4px;
transition: opacity .2s, color .2s;
}
.btn-enquire::after {
content: '→';
color: var(--accent);
font-style: normal;
font-family: var(--font);
font-weight: 600;
margin-left: 4px;
font-size: 16px;
}
.nav.scrolled .btn-enquire { background: transparent; color: var(--ink); }
.btn-enquire:hover { opacity: 0.75; }
.btn-enquire:active { opacity: 0.6; }
.menu-toggle {
display: none; color: #fff; font-size: 24px;
width: 40px; height: 40px;
align-items: center; justify-content: center;
}
.nav.scrolled .menu-toggle { color: var(--ink); }
/* ─── BUTTONS ──────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-dark {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 32px; border-radius: 980px;
font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
transition: opacity .2s, background .25s, color .25s, transform .15s;
border: 1px solid transparent; white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--accent-light); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--bg-dark-elev); }
.btn-primary:active, .btn-ghost:active, .btn-dark:active { transform: scale(0.97); }
.btn-light-ghost {
display: inline-flex; align-items: center; gap: 8px;
padding: 16px 32px; border-radius: 980px;
background: transparent; color: var(--ink);
border: 1px solid var(--line-strong);
font-size: 14px; font-weight: 600;
transition: background .25s, color .25s, border-color .25s, transform .15s;
}
.btn-light-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-light-ghost:active { transform: scale(0.97); }
.link-arrow {
display: inline-flex; align-items: center; gap: 4px;
font-size: 15px; font-weight: 600; color: var(--ink);
transition: color .2s;
}
.link-arrow::after { content: '→'; transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--accent-dark); }
.link-arrow:hover::after { transform: translateX(4px); }
/* ─── HERO ─────────────────────────────────────────────────── */
.hero {
position: relative; min-height: 110vh;
display: flex; align-items: flex-end;
padding: 0 5vw 80px;
color: #fff; overflow: hidden;
background: var(--bg-dark);
}
.hero-media {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; z-index: 0;
}
.hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
background-color: var(--bg-dark);
background-image: url('data:image/webp;base64,UklGRsAAAABXRUJQVlA4ILQAAADQBACdASogABEAPu1kqU2ppaOiMAgBMB2JYgCsM2h+AB6ikCZMu6yOJJZvEAk2AAD+gTWLit1Z1OA8ABlWlzpUrDI8ENYrut5QAzoiF48AJbCHyvSj94QBnkklcseS3m16bqcs9Ua1f+qZ5FwJ1Ik4MpLhdmw7dE8AARBepOjH0ASwDYAyaCAU48JJjg2ducjnxh/NsUJGXhA1jn4UrwyRiG/OHeKdtZRDnHA/cX8AAQkAAAA=');
z-index: 0;
}
.hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 85%, rgba(0,0,0,0.92) 100%);
z-index: 1;
}
.hero-content {
position: relative; z-index: 2;
max-width: 760px;
}
.hero-eyebrow {
display: block;
font-size: 11px; font-weight: 600;
letter-spacing: 2.5px; text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--s4);
}
.hero h1 {
color: #fff; margin-bottom: var(--s4);
font-size: clamp(28px, 3.6vw, 56px);
letter-spacing: -0.03em;
line-height: 1.05;
font-weight: 800;
}
.hero h1 .heavy { font-weight: 800; }
.hero h1 .light { font-weight: 300; color: rgba(255,255,255,0.92); }
.hero-desc {
font-size: clamp(14px, 1vw, 16px);
font-weight: 400;
color: rgba(255,255,255,0.85);
line-height: 1.55;
max-width: 560px;
margin-bottom: var(--s4);
}
.hero-partner {
font-size: 12px; font-weight: 500;
color: rgba(255,255,255,0.55);
line-height: 1.4;
max-width: 620px;
margin-bottom: var(--s7);
}
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.scroll-hint {
position: absolute; bottom: 24px; left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.55);
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
z-index: 2;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-hint::after {
content: '';
width: 1px; height: 32px;
background: rgba(255,255,255,0.4);
animation: scroll-pulse 2s var(--ease) infinite;
}
@keyframes scroll-pulse {
0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
50% { transform: scaleY(1); opacity: 1; }
}
/* ─── SECTIONS ─────────────────────────────────────────────── */
section { padding: var(--s10) 0; }
.container { max-width: var(--container); margin: 0 auto; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }
.bg-dark { background: var(--bg-dark); color: var(--ink-inv); }
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: var(--ink-inv); }
.bg-dark .lead, .bg-dark p { color: var(--ink-inv-muted); }
.bg-dark .eyebrow { color: var(--accent); }
.bg-surface { background: var(--bg-surface); }
.section-head { margin-bottom: var(--s9); }
.section-head.centered { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.section-head.between { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--s4); }
/* ─── SERVICES (3 cards) ───────────────────────────────────── */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s5);
max-width: var(--container);
margin: 0 auto;
}
.service-card {
background: var(--bg);
border-radius: 18px;
overflow: hidden;
border: 0.5px solid var(--line);
text-decoration: none;
color: inherit;
display: block;
transition: transform .35s var(--ease);
}
.service-card:hover { transform: translateY(-4px); }
.service-card-photo {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
}
.service-card-body { padding: var(--s5) var(--s5) var(--s6); }
.service-card-body h3 { margin-bottom: var(--s2); font-size: clamp(20px, 1.8vw, 26px); }
.service-card-body p { font-size: 14px; color: var(--ink-muted); margin-bottom: var(--s4); line-height: 1.55; }
.service-card-arrow {
font-size: 13px; font-weight: 600; color: var(--ink);
display: inline-flex; align-items: center; gap: 4px;
}
.service-card-arrow::after { content: '→'; transition: transform .25s var(--ease); }
.service-card:hover .service-card-arrow::after { transform: translateX(4px); }
/* ─── YACHT GRID & CARDS (Charter + Sales fleet) ──────────── */
.yacht-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s6);
max-width: var(--container);
margin: 0 auto;
}
.yacht-card {
display: block;
text-decoration: none;
color: inherit;
transition: transform .35s var(--ease);
}
.yacht-card:hover { transform: translateY(-4px); }
.yacht-card-img {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 16px;
background: var(--bg-surface);
margin-bottom: var(--s5);
}
.yacht-card-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease);
}
.yacht-card:hover .yacht-card-img img { transform: scale(1.06); }
.yacht-compare {
position: absolute;
top: 12px;
right: 12px;
background: rgba(255,255,255,0.96);
border: 0;
color: var(--ink, #0d2840);
padding: 0;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
transition: all .15s;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}
.yacht-compare:hover {
background: var(--accent, #b8965a);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(184,150,90,0.4);
}
.yacht-compare.active {
background: var(--accent, #b8965a);
color: #fff;
}
/* Card footer with View yacht (legacy) */
.yacht-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}
.yacht-card-foot .yacht-view {
font-size: 13px;
font-weight: 600;
color: var(--ink, #0d2840);
margin: 0;
display: inline-block;
}
.yacht-name {
font-size: clamp(20px, 1.6vw, 26px);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.yacht-specs {
font-size: 13px;
color: var(--ink-muted);
margin-bottom: var(--s3);
line-height: 1.45;
}
.yacht-price {
font-size: 15px;
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.yacht-vat {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.5px;
color: var(--ink-muted);
text-transform: uppercase;
margin-bottom: var(--s3);
}
.yacht-view {
font-size: 13px;
font-weight: 600;
color: var(--ink);
display: inline-flex; align-items: center; gap: 4px;
}
.yacht-view::after { content: '→'; transition: transform .25s var(--ease); }
.yacht-card:hover .yacht-view::after { transform: translateX(4px); }
/* tag (for cases where tags are needed in other contexts, not home) */
.yacht-tag {
position: absolute; top: 14px; left: 14px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(10px);
color: var(--ink);
font-size: 10px; font-weight: 600;
letter-spacing: 1px; text-transform: uppercase;
padding: 6px 11px;
border-radius: 980px;
z-index: 2;
}
.yacht-tag-reduction { background: #ff8c42; color: #fff; }
/* On dark sections (if any yacht cards there) */
.bg-dark .yacht-card-img { background: var(--bg-dark-elev); }
.bg-dark .yacht-name { color: #fff; }
.bg-dark .yacht-specs { color: rgba(255,255,255,0.55); }
.bg-dark .yacht-price { color: #fff; }
.bg-dark .yacht-view { color: #fff; }
/* ─── DESTINATIONS GRID (4 portrait cards) ────────────────── */
.dest-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s4);
max-width: var(--container);
margin: 0 auto;
}
.dest-card {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
border-radius: 18px;
display: block;
text-decoration: none;
background: #1a1a1a;
}
.dest-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.4s var(--ease);
}
.dest-card:hover img { transform: scale(1.06); }
.dest-card::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 100%);
}
.dest-info {
position: absolute; bottom: 0;
padding: var(--s5);
color: #fff;
z-index: 2;
}
.dest-info h3 {
color: #fff;
font-size: clamp(22px, 1.8vw, 30px);
margin-bottom: 4px;
font-weight: 700;
}
.dest-info p {
font-size: 11px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
}
/* ─── WHY FORUM (split with stats) ────────────────────────── */
.why-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s9);
align-items: center;
max-width: var(--container);
margin: 0 auto;
}
.why-img {
aspect-ratio: 4/5;
overflow: hidden;
border-radius: 22px;
}
.why-img img { width: 100%; height: 100%; object-fit: cover; }
.why-content h2 { margin-bottom: var(--s5); }
.why-content .lead { margin-bottom: var(--s7); max-width: 460px; }
.why-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--s5);
max-width: 460px;
margin-bottom: var(--s7);
}
.why-stat-num {
font-size: clamp(36px, 3.8vw, 56px);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ink);
line-height: 1;
margin-bottom: 6px;
}
.why-stat-lbl {
font-size: 13px;
color: var(--ink-muted);
font-weight: 500;
}
/* ─── CONTACT (split with form + social) ───────────────────── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s9);
align-items: stretch;
max-width: var(--container-narrow);
margin: 0 auto;
}
.contact-left h2 {
font-family: var(--serif, 'Cormorant Garamond', serif) !important;
font-style: italic !important;
font-weight: 400 !important;
font-size: clamp(40px, 5vw, 64px) !important;
letter-spacing: -1px !important;
line-height: 1.02 !important;
margin-bottom: 0 !important;
}
.contact-left .eyebrow {
display: inline-block;
margin-bottom: var(--s3);
}
.contact-left .lead {
color: rgba(255,255,255,0.78);
margin: var(--s5) 0 var(--s8);
font-size: 15px;
line-height: 1.7;
max-width: 420px;
}
.contact-left::before {
content: '';
display: block;
width: 40px;
height: 1px;
background: var(--accent, #b8965a);
margin: var(--s3) 0 var(--s5);
}
.contact-info {
display: flex; flex-direction: column; gap: var(--s5);
margin-bottom: var(--s7);
}
.contact-info-lbl {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent, #b8965a);
margin-bottom: 6px;
}
.contact-info-val { font-size: 15px; font-weight: 500; color: #fff; line-height: 1.5; }
.contact-info-val a { color: #fff; transition: opacity .2s; }
.contact-info-val a:hover { opacity: 0.75; color: var(--accent, #b8965a); }
.social-icons { display: flex; gap: var(--s2); }
.social-icons a {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 50%;
color: rgba(255,255,255,0.92);
transition: all .2s;
}
.social-icons a:hover { background: var(--accent, #b8965a); border-color: var(--accent, #b8965a); color: #fff; transform: translateY(-2px); }
.social-icons svg { width: 17px; height: 17px; }
.contact-form {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
padding: 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s5);
}
.contact-form .field-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; }
.field label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent, #b8965a);
margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
background: transparent;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.18);
color: #fff;
font-size: 15px;
padding: 12px 0;
font-weight: 400;
transition: border-color .25s;
appearance: none;
-webkit-appearance: none;
font-family: var(--font, 'Manrope', sans-serif);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-bottom-color: var(--accent, #b8965a);
}
.field input::placeholder,
.field textarea::placeholder {
color: rgba(255,255,255,0.32);
font-style: italic;
}
.field textarea { min-height: 90px; resize: vertical; font-family: var(--font, 'Manrope', sans-serif); }
.field option { background: var(--bg-dark, #0d2840); color: #fff; }
.contact-form .btn-submit {
grid-column: 1 / -1;
justify-self: start;
margin-top: var(--s5);
background: transparent;
border: 0;
color: #fff;
padding: 0;
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-weight: 400;
font-size: 24px;
cursor: pointer;
letter-spacing: 0;
transition: opacity .2s;
}
.contact-form .btn-submit::after {
content: ' ›';
color: var(--accent, #b8965a);
font-weight: 300;
}
.contact-form .btn-submit:hover { opacity: 0.85; }
.contact-form .btn-submit:active { transform: translateX(2px); }
@media (max-width: 768px) {
.contact-grid { grid-template-columns: 1fr; gap: var(--s7); }
.contact-form { padding: 22px; grid-template-columns: 1fr; }
}
/* ─── FOOTER ───────────────────────────────────────────────── */
footer {
background: var(--bg-dark);
color: rgba(255,255,255,0.65);
padding: var(--s8) 3vw var(--s5);
font-size: 14px;
}
.footer-grid {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
gap: var(--s6);
padding-bottom: var(--s7);
border-bottom: 0.5px solid rgba(255,255,255,0.12);
}
.footer-brand img { height: 56px; margin-bottom: var(--s4); filter: brightness(0) invert(1); }
.footer-brand p {
font-size: 13px; line-height: 1.55;
color: rgba(255,255,255,0.55);
max-width: 280px;
margin-bottom: var(--s4);
}
.footer-brand .social-icons a {
width: 34px; height: 34px;
background: rgba(255,255,255,0.07);
}
.footer-brand .social-icons svg { width: 15px; height: 15px; }
.footer-col h4 {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #fff;
margin-bottom: var(--s4);
}
.footer-col li { margin-bottom: 11px; }
.footer-col a { font-size: 14px; transition: color .2s; color: rgba(255,255,255,0.65); }
.footer-col a:hover { color: #fff; }
.footer-col .contact-line { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.footer-bottom {
max-width: var(--container);
margin: 0 auto;
padding-top: var(--s5);
display: flex; justify-content: space-between;
flex-wrap: wrap; gap: var(--s3);
font-size: 12px;
color: rgba(255,255,255,0.4);
}
.footer-bottom a { transition: color .2s; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; gap: var(--s5); }
/* ─── REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 1s var(--ease), transform 1s var(--ease);
}
/* Safety net: if JS is slow, blocked, or fails, content still appears */
.no-js .reveal,
html:not(.js-ready) .reveal {
opacity: 1;
transform: none;
}
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: 0.06s; }
.reveal-2 { transition-delay: 0.12s; }
.reveal-3 { transition-delay: 0.18s; }
.reveal-4 { transition-delay: 0.24s; }
/* ─── MOBILE NAV ──────────────────────────────────────────── */
.mobile-nav {
position: fixed; inset: 0;
background: #fff;
z-index: 250;
padding: 96px 24px 100px;
display: none;
flex-direction: column;
overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 30px;
font-weight: 400;
letter-spacing: -0.5px;
padding: 18px 0;
color: var(--ink, #0d2840);
border-bottom: 1px solid rgba(13,40,64,0.08);
display: block;
transition: color .15s, padding-left .15s;
}
.mobile-nav a:hover, .mobile-nav a:active { color: var(--accent, #b8965a); padding-left: 8px; }
.mobile-nav a:last-child { border-bottom: 0; }
/* ─── COOKIE BANNER ───────────────────────────────────────── */
.cookie-banner {
position: fixed;
bottom: var(--s4); left: var(--s4); right: var(--s4);
background: rgba(13,40,64,0.95);
backdrop-filter: blur(20px);
color: #fff;
padding: var(--s4) var(--s5);
border-radius: 18px;
z-index: 200;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: var(--s4);
font-size: 14px;
max-width: 600px;
margin: 0 auto;
}
.cookie-banner button {
background: var(--accent); color: var(--ink);
padding: 8px 16px; border-radius: 980px;
font-size: 13px; font-weight: 600;
}
/* ─── WHATSAPP FAB (injected) ─────────────────────────────── */
.whatsapp-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
background: #25D366;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 20px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.15);
z-index: 90;
transition: transform .25s var(--ease-spring), box-shadow .25s;
text-decoration: none;
}
.whatsapp-fab:hover {
transform: scale(1.08);
box-shadow: 0 8px 24px rgba(37,211,102,0.5), 0 4px 12px rgba(0,0,0,0.2);
}
.whatsapp-fab svg {
width: 30px;
height: 30px;
fill: #fff;
}
/* ─── COMPARE BAR (injected) ──────────────────────────────── */
/* ════════════════════ RECENTLY VIEWED ════════════════════ */
.rv-section {
background: var(--bg-surface, #f5f7f9);
padding: 56px 24px;
border-top: 1px solid var(--line, #e8ecf0);
}
.rv-inner {
max-width: 1200px;
margin: 0 auto;
}
.rv-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 24px;
}
.rv-eye {
font-size: 11px;
letter-spacing: 3px;
color: var(--accent, #b8965a);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 6px;
}
.rv-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: clamp(24px, 3vw, 32px);
font-weight: 400;
color: var(--ink, #0d2840);
margin: 0;
line-height: 1;
}
.rv-clear {
font-size: 10px;
letter-spacing: 2px;
color: var(--ink-muted, #6b7d92);
text-transform: uppercase;
font-weight: 600;
background: transparent;
border: 1px solid var(--line, #e8ecf0);
padding: 8px 14px;
border-radius: 50px;
cursor: pointer;
transition: background .15s;
}
.rv-clear:hover { background: var(--line, #e8ecf0); }
.rv-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.rv-card {
background: #fff;
border: 1px solid var(--line, #e8ecf0);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform .2s, box-shadow .2s;
display: block;
min-width: 0;
}
.rv-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(13,40,64,0.08);
}
.rv-card-img {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: #eef2f6;
}
.rv-card-body { padding: 12px 14px; }
.rv-card-name {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 17px;
color: var(--ink, #0d2840);
line-height: 1.1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rv-card-specs {
font-size: 10px;
letter-spacing: 0.5px;
color: var(--ink-muted, #6b7d92);
margin-top: 4px;
text-transform: uppercase;
font-weight: 600;
}
.rv-card-price {
font-size: 13px;
font-weight: 700;
color: var(--ink, #0d2840);
margin-top: 6px;
letter-spacing: -0.2px;
}
@media (max-width: 1024px) {
.rv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.rv-section { padding: 36px 16px; }
.rv-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.rv-card-name { font-size: 15px; }
.rv-card-specs { font-size: 9px; }
.rv-card-price { font-size: 12px; }
}
/* ════════════════════ END RECENTLY VIEWED ════════════════════ */
@keyframes ys-shimmer {
0% { background-position: -468px 0; }
100% { background-position: 468px 0; }
}
.yacht-skel {
background: #fff;
border: 1px solid var(--line, #e8ecf0);
border-radius: 10px;
overflow: hidden;
}
.ys-img, .ys-line {
background: linear-gradient(90deg, #f0f3f6 0%, #f8fafb 50%, #f0f3f6 100%);
background-size: 800px 100%;
animation: ys-shimmer 1.4s linear infinite;
}
.ys-img {
width: 100%;
aspect-ratio: 4 / 3;
}
.ys-body {
padding: 14px 16px;
}
.ys-line {
height: 12px;
border-radius: 4px;
margin-bottom: 8px;
}
.ys-line-1 { width: 70%; height: 16px; }
.ys-line-2 { width: 50%; }
.ys-line-3 { width: 35%; margin-top: 14px; }
/* ════════════════════ END LOADING SKELETONS ════════════════════ */
.yacht-card-S {
display: block;
position: relative;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
background: #fff;
border: 1px solid var(--line, #e8ecf0);
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.yacht-card-S:hover {
transform: translateY(-3px);
box-shadow: 0 18px 50px rgba(13,40,64,0.16);
}
.yc-photo {
position: relative;
aspect-ratio: 4 / 3;
width: 100%;
background: #0d2840;
overflow: hidden;
}
.yc-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 1.4s var(--ease);
}
.yacht-card-S:hover .yc-photo img { transform: scale(1.04); }
.yc-photo-tag {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
}
.yc-info {
padding: 16px 18px 16px;
}
.yc-eye {
font-size: 10px;
letter-spacing: 2px;
color: var(--accent, #b8965a);
font-weight: 600;
margin-bottom: 4px;
text-transform: uppercase;
}
.yc-name {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: clamp(21px, 2.2vw, 26px);
font-weight: 400;
line-height: 1.04;
margin: 0 0 4px;
color: var(--ink, #0d2840);
}
.yc-spec {
font-size: 11px;
color: var(--ink-muted, #6b7d92);
letter-spacing: 0.3px;
margin-bottom: 9px;
}
.yc-rule {
width: 22px;
height: 2px;
background: var(--accent, #b8965a);
margin-bottom: 11px;
}
.yc-bot-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.yc-price {
font-family: var(--font, 'Manrope', sans-serif);
display: flex;
flex-direction: column;
gap: 1px;
}
.yc-price-line {
font-size: 14px;
color: var(--ink, #0d2840);
font-weight: 700;
letter-spacing: -0.2px;
white-space: nowrap;
line-height: 1.35;
}
.yc-price-line em {
font-style: normal;
font-weight: 600;
font-size: 11.5px;
color: var(--ink-muted, #6b7d92);
}
/* Compare button — light style on white card */
.yacht-card-S .yacht-compare {
position: static;
width: 32px;
height: 32px;
background: var(--bg-surface, #f5f7f9);
border: 1px solid var(--line, #e8ecf0);
color: var(--ink-muted, #6b7d92);
box-shadow: none;
flex-shrink: 0;
}
.yacht-card-S .yacht-compare svg { width: 14px; height: 14px; }
.yacht-card-S .yacht-compare:hover {
background: var(--accent, #b8965a);
border-color: var(--accent, #b8965a);
color: #fff;
transform: none;
}
.yacht-card-S .yacht-compare.active {
background: var(--accent, #b8965a);
border-color: var(--accent, #b8965a);
color: #fff;
}
/* Tag on the photo (top-left) */
.yacht-card-S .yacht-tag {
background: rgba(184,150,90,0.96);
color: #fff;
padding: 5px 11px;
border-radius: 50px;
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
}
.yacht-card-S .yacht-tag-reduction {
background: rgba(195,57,40,0.96);
}
@media (max-width: 700px) {
.yacht-card-S { border-radius: 10px; }
.yc-photo { aspect-ratio: 4 / 3; }
.yc-info { padding: 12px 13px 13px; }
.yc-eye {
font-size: 8px;
letter-spacing: 1.5px;
margin-bottom: 3px;
}
.yc-name {
font-size: 18px;
line-height: 1.05;
margin-bottom: 3px;
}
.yc-spec {
font-size: 10px;
letter-spacing: 0;
margin-bottom: 7px;
}
.yc-rule {
width: 18px;
margin-bottom: 9px;
}
.yc-price-line {
font-size: 13px;
font-weight: 700;
letter-spacing: -0.1px;
}
.yc-price-line em { font-size: 11px; }
.yacht-card-S .yacht-compare {
width: 30px;
height: 30px;
}
.yacht-card-S .yacht-compare svg { width: 12px; height: 12px; }
.yacht-card-S .yacht-tag {
font-size: 8px;
padding: 4px 8px;
letter-spacing: 1px;
}
}
/* ════════════════════ END YACHT CARD OPTION S ════════════════════ */
/* ════════════════════ YACHT HERO PHOTO NAV · DOTS ════════════════════ */
.yd-hero-dots {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
align-items: center;
padding: 10px 16px;
background: rgba(13, 40, 64, 0.35);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 50px;
z-index: 6;
}
.yd-hero-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
cursor: pointer;
transition: width .25s, background .25s;
}
.yd-hero-dot.active {
background: #fff;
width: 28px;
border-radius: 50px;
}
.yd-hero-dot:hover { background: rgba(255, 255, 255, 0.85); }
@media (max-width: 700px) {
.yd-hero-dots { bottom: 18px; padding: 8px 14px; gap: 6px; }
.yd-hero-dot { width: 6px; height: 6px; }
.yd-hero-dot.active { width: 22px; }
}
/* ════════════════════ END YACHT HERO PHOTO NAV ════════════════════ */
.compare-page-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 120px 24px 80px;
}
.compare-page-head {
text-align: center;
margin-bottom: 48px;
padding-bottom: 28px;
border-bottom: 1px solid var(--line, #e8ecf0);
}
.compare-page-eyebrow {
font-size: 11px;
letter-spacing: 3px;
color: var(--accent, #b8965a);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 12px;
}
.compare-page-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
line-height: 1.05;
color: var(--ink, #0d2840);
margin-bottom: 14px;
}
.compare-page-rule {
width: 40px;
height: 1px;
background: var(--accent, #b8965a);
margin: 18px auto 0;
}
.compare-empty {
text-align: center;
padding: 80px 20px;
background: #fff;
border-radius: 12px;
border: 1px solid var(--line, #e8ecf0);
}
.compare-table {
background: #fff;
border: 1px solid var(--line, #e8ecf0);
border-radius: 10px;
overflow: hidden;
}
.compare-row {
display: grid;
grid-template-columns: 200px repeat(var(--cols, 2), minmax(0, 1fr));
border-bottom: 1px solid var(--line, #e8ecf0);
}
.compare-row:last-child { border-bottom: 0; }
.compare-row.head {
background: var(--ink, #0d2840);
color: #fff;
padding: 28px 16px;
}
.compare-row.head > div {
padding: 0 14px;
position: relative;
text-align: center;
}
.compare-row.head > div:first-child {
border-right: 1px solid rgba(255,255,255,0.12);
}
.compare-yacht-img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: 6px;
margin-bottom: 12px;
}
.compare-yacht-name {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 22px;
font-weight: 400;
margin-bottom: 4px;
line-height: 1.1;
}
.compare-remove {
position: absolute;
top: -4px;
right: 6px;
width: 28px;
height: 28px;
background: rgba(255,255,255,0.15);
border: 0;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 18px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.compare-remove:hover { background: rgba(255,255,255,0.3); }
.compare-cell {
padding: 16px 18px;
font-size: 14px;
color: var(--ink, #0d2840);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border-right: 1px solid var(--line, #e8ecf0);
min-height: 56px;
}
.compare-cell:last-child { border-right: 0; }
.compare-cell.label {
background: #fafbfc;
font-size: 11px;
letter-spacing: 2px;
color: var(--ink-muted, #6b7d92);
text-transform: uppercase;
font-weight: 700;
justify-content: flex-start;
text-align: left;
}
.compare-row:nth-child(even) .compare-cell:not(.label) { background: #fafbfc; }
.compare-cell .btn-detail {
background: var(--accent, #b8965a);
color: #fff;
padding: 10px 20px;
border-radius: 50px;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
text-decoration: none;
transition: opacity .15s;
}
.compare-cell .btn-detail:hover { opacity: 0.85; }
@media (max-width: 768px) {
.compare-page-wrap { padding: 80px 12px 40px; }
.compare-row { grid-template-columns: 110px repeat(var(--cols, 2), minmax(0, 1fr)); }
.compare-row.head { padding: 18px 8px; }
.compare-row.head > div { padding: 0 8px; }
.compare-yacht-img { height: 80px; margin-bottom: 8px; }
.compare-yacht-name { font-size: 15px; }
.compare-cell { padding: 12px 8px; font-size: 12px; min-height: 44px; }
.compare-cell.label { font-size: 9px; padding: 12px 8px; }
}
/* ════════════════════ END COMPARE PAGE ════════════════════ */
.compare-bar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(120px);
background: var(--ink);
color: #fff;
padding: 12px 16px 12px 12px;
border-radius: 980px;
display: inline-flex;
align-items: center;
gap: 12px;
font-size: 13px;
font-weight: 500;
z-index: 95;
box-shadow: 0 8px 28px rgba(0,0,0,0.22);
transition: transform .35s var(--ease-spring), opacity .25s;
opacity: 0;
pointer-events: none;
}
.compare-bar.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.compare-bar .count-badge {
background: var(--accent);
color: var(--ink);
border-radius: 50%;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
}
.compare-bar a {
color: #fff;
font-weight: 600;
text-decoration: none;
transition: color .2s;
}
.compare-bar a:hover { color: var(--accent-light); }
.compare-bar .clear-x {
background: rgba(255,255,255,0.15);
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 14px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 4px;
border: none;
cursor: pointer;
padding: 0;
transition: background .2s;
}
.compare-bar .clear-x:hover { background: rgba(255,255,255,0.25); }
/* Skeleton loader styles */
.yacht-skeleton {
border-radius: 16px;
overflow: hidden;
}
.skeleton-img {
aspect-ratio: 4/3;
background: linear-gradient(90deg, var(--bg-surface) 25%, #f7f9fb 50%, var(--bg-surface) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: 16px;
margin-bottom: var(--s4);
}
.skeleton-body { padding: 0; }
.skeleton-line {
height: 14px;
background: linear-gradient(90deg, var(--bg-surface) 25%, #f7f9fb 50%, var(--bg-surface) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.4s ease-in-out infinite;
border-radius: 6px;
margin-bottom: 8px;
}
.skeleton-line.wide { width: 65%; }
.skeleton-line.short { width: 40%; }
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.loading-state {
grid-column: 1 / -1;
text-align: center;
padding: var(--s8);
color: var(--ink-muted);
font-size: 14px;
}
/* ─── MOBILE STICKY CTA (mobile only) ─────────────────────── */
.mobile-cta {
display: none !important;
position: fixed;
bottom: 12px; left: 12px; right: 12px;
z-index: 88;
gap: 6px;
padding: 0;
background: transparent;
pointer-events: none;
}
.mobile-cta-btn {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: rgba(13,40,64,0.92);
backdrop-filter: blur(20px);
color: #fff;
padding: 12px 8px;
border-radius: 980px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
pointer-events: auto;
}
.mobile-cta-btn svg { flex-shrink: 0; }
.mobile-cta-btn span { line-height: 1; }
.mobile-cta-btn.whatsapp { background: #25D366; color: #fff; }
.mobile-cta-btn.primary { background: var(--accent); color: var(--ink); }
@media (max-width: 700px) {
.mobile-cta { display: none !important; }
/* Keep WhatsApp FAB clear of the .m-bottom-bar */
.whatsapp-fab { bottom: 84px; }
}
/* ─── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1000px) {
.services-grid { grid-template-columns: 1fr 1fr; }
.yacht-grid { grid-template-columns: 1fr 1fr; }
.dest-grid { grid-template-columns: 1fr 1fr; }
.why-grid { grid-template-columns: 1fr; gap: var(--s7); }
.contact-grid { grid-template-columns: 1fr; gap: var(--s7); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
.nav-menu { display: none; }
/* Logo is 124px on desktop — far too tall for a phone nav */
.logo { height: 64px; }
.logo img { height: 58px; }
.nav { padding: 10px 5vw; }
/* Hide cluttered nav-cta buttons on mobile — bottom bar handles them */
.btn-enquire { display: none !important; }
.nav-search-btn { display: none !important; }
.whatsapp-fab { display: none !important; }
.menu-toggle { display: flex !important; width: 44px; height: 44px; }
section { padding: var(--s9) 3vw; }
.services-grid { grid-template-columns: 1fr; }
/* D5: 2-col yacht grid on mobile (better browsing) */
.yacht-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.yacht-name { font-size: 16px !important; }
.yacht-specs { font-size: 11px !important; }
.yacht-price { font-size: 13px !important; }
.yacht-compare { font-size: 10px !important; padding: 6px 10px !important; }
.dest-grid { grid-template-columns: 1fr 1fr; }
.contact-form { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
.why-stats { grid-template-columns: 1fr 1fr; }
.hero { padding-bottom: 18vh; }
/* B5: Newsletter form must fit small phones */
.fnews-form { min-width: 0 !important; }
}
/* ─── PAGE HERO (inner pages mini hero) ──────────────────── */
.page-hero {
background: var(--bg-dark);
color: var(--ink-inv);
min-height: 55vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 180px 4vw 60px;
position: relative;
}
.page-hero .container {
max-width: var(--container);
margin: 0 auto;
width: 100%;
}
.page-hero .eyebrow {
color: var(--accent);
display: inline-block;
margin-bottom: var(--s4);
}
.page-hero h1 {
color: #fff;
font-size: clamp(30px, 4.2vw, 60px);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.05;
margin-bottom: var(--s5);
}
.page-hero h1 .light { font-weight: 300; color: rgba(255,255,255,0.85); }
.page-hero .lead {
color: rgba(255,255,255,0.72);
max-width: 540px;
}
/* ─── FILTERS BAR ─────────────────────────────────────────── */
.filters-bar {
background: var(--bg-surface);
padding: var(--s4) 4vw;
border-bottom: 1px solid var(--line);
position: sticky; top: 72px;
z-index: 10;
backdrop-filter: blur(20px);
}
.filters-wrap {
max-width: var(--container);
margin: 0 auto;
}
.filters-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s3);
align-items: end;
}
.filters-more {
margin-top: var(--s4);
animation: filters-slide-down .3s var(--ease);
}
/* Force hidden attribute to win over display:grid */
[hidden] { display: none !important; }
@keyframes filters-slide-down {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.filter-field-empty { display: block; }
.filters-actions {
display: flex;
justify-content: flex-start;
gap: var(--s3);
margin-top: var(--s4);
}
.filter-toggle {
font-size: 12px;
font-weight: 600;
color: var(--ink);
background: transparent;
border: 1px solid var(--line-strong);
padding: 9px 16px;
border-radius: 980px;
cursor: pointer;
font-family: var(--font);
transition: background .2s, color .2s, border-color .2s;
}
.filter-toggle:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.filter-toggle.active { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field label {
font-size: 10px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--ink-muted);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.filter-field label .range-value {
font-size: 11px; font-weight: 600;
color: var(--ink); letter-spacing: 0;
text-transform: none;
}
.filter-field select,
.filter-field input {
background: transparent;
border: 0;
border-bottom: 2px solid var(--bg-surface);
border-radius: 0;
padding: 6px 24px 8px 0;
font-size: 13px;
font-weight: 500;
color: var(--ink);
font-family: var(--font);
appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 2px center;
cursor: pointer;
transition: border-bottom-color .2s;
}
.filter-field select:hover,
.filter-field input:hover { border-bottom-color: var(--ink-light); }
.filter-field select:focus,
.filter-field input:focus {
outline: none; border-bottom-color: var(--ink);
}
.filter-reset {
font-size: 12px;
font-weight: 600;
color: var(--accent-dark);
cursor: pointer;
padding: 9px 16px;
background: transparent;
border: 1px solid transparent;
border-radius: 980px;
white-space: nowrap;
font-family: var(--font);
transition: color .2s, background .2s;
}
.filter-reset:hover { background: rgba(184,150,90,0.08); color: var(--ink); }
/* Dual-range slider — N4: 2px track + 8px navy dot */
.dual-range {
position: relative;
height: 22px;
padding: 9px 0;
background: transparent;
border: none;
}
.dual-range-track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
margin-top: -1px;
background: var(--bg-surface);
border-radius: 2px;
}
.dual-range-fill {
position: absolute;
top: 50%;
height: 2px;
margin-top: -1px;
background: var(--ink);
border-radius: 2px;
}
.dual-range input[type="range"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: transparent;
border: none;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
z-index: 2;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 22px;
height: 22px;
border: 0;
border-radius: 50%;
background: transparent;
background-image: radial-gradient(circle at center, var(--ink) 4.5px, transparent 4.5px);
cursor: grab;
margin-top: 0;
box-shadow: none;
}
.dual-range input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; background-image: radial-gradient(circle at center, var(--ink) 5px, transparent 5px); }
.dual-range input[type="range"]::-moz-range-thumb {
pointer-events: auto;
width: 22px;
height: 22px;
border: 0;
border-radius: 50%;
background: transparent;
background-image: radial-gradient(circle at center, var(--ink) 4.5px, transparent 4.5px);
cursor: grab;
}
.dual-range input[type="range"]::-webkit-slider-runnable-track {
background: transparent; height: 22px; border: none;
}
.dual-range input[type="range"]::-moz-range-track {
background: transparent; height: 22px; border: none;
}
.dual-range input[type="range"]:focus { outline: none; }
.results-bar {
max-width: var(--container);
margin: var(--s8) auto var(--s5);
padding: 0 4vw;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: var(--s3);
}
.results-count { font-size: 14px; color: var(--ink-muted); }
.results-count b { color: var(--ink); font-weight: 600; }
.results-sort {
font-size: 13px;
color: var(--ink-muted);
display: inline-flex; align-items: center; gap: 6px;
}
.results-sort select {
font-size: 13px; font-weight: 600; color: var(--ink);
background: transparent; border: none;
padding: 4px 16px 4px 0; cursor: pointer;
appearance: none; -webkit-appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right center;
font-family: var(--font);
}
.results-sort select:focus { outline: none; }
.yacht-grid-section { padding: 0 4vw var(--s10); }
@media (max-width: 900px) {
.filters-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.filters-grid { grid-template-columns: 1fr; }
.filters-bar { position: relative; top: 0; }
}
/* ─── INNER PAGE CONTENT ──────────────────────────────────── */
.content-block { max-width: 760px; margin: 0 auto; }
.content-block p {
margin-bottom: var(--s5);
font-size: 17px; line-height: 1.7;
color: var(--ink-muted);
}
.content-block h3 { margin: var(--s7) 0 var(--s4); }
/* FAQ */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-list details {
border-bottom: 1px solid var(--line);
padding: var(--s5) 0;
}
.faq-list summary {
font-size: 20px; font-weight: 600;
letter-spacing: -0.01em;
cursor: pointer; position: relative;
padding-right: 40px;
list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
content: '+';
position: absolute; right: 0; top: -4px;
font-size: 28px; font-weight: 300;
color: var(--ink-muted);
transition: transform .25s var(--ease);
}
.faq-list details[open] summary::after { content: '−'; }
.faq-list .faq-body {
padding-top: var(--s4);
font-size: 15px; line-height: 1.6;
color: var(--ink-muted);
}
/* Cost cards */
.cost-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s4);
max-width: var(--container);
margin: 0 auto;
}
.cost-card {
padding: var(--s7) var(--s5);
background: var(--bg-surface);
border-radius: 18px;
}
.cost-card .cost-pct {
font-size: 56px; font-weight: 800;
letter-spacing: -0.04em; line-height: 1;
margin-bottom: var(--s4);
}
.cost-card h3 { margin-bottom: var(--s3); }
.cost-card p { font-size: 14px; color: var(--ink-muted); }
/* Itinerary cards */
.itinerary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s4);
max-width: var(--container);
margin: 0 auto;
}
.itinerary-card {
background: var(--bg);
border: 1px solid var(--line);
border-radius: 18px;
padding: var(--s6);
transition: transform .3s var(--ease), border-color .25s;
}
.itinerary-card:hover {
transform: translateY(-4px);
border-color: var(--ink);
}
.itinerary-days {
font-size: 48px;
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
}
.itinerary-days small {
display: block;
font-size: 11px; font-weight: 600;
letter-spacing: 1.5px; text-transform: uppercase;
color: var(--ink-muted);
margin-top: var(--s2);
}
.itinerary-card h3 { margin: var(--s5) 0 var(--s3); }
.itinerary-card p {
font-size: 14px; color: var(--ink-muted);
margin-bottom: var(--s5);
}
/* ═══════════════════════════════════════════════════════════
YACHT DETAIL PAGE
═══════════════════════════════════════════════════════════ */
.yacht-detail {
padding: 140px 24px 80px;
max-width: 1400px;
margin: 0 auto;
box-sizing: border-box;
overflow-x: hidden;
}
@media (max-width: 820px) {
.yacht-detail {
padding: 100px 16px 60px;
}
}
.yacht-loading { padding: 120px 24px; text-align: center; color: var(--ink-muted); }
/* Hero */
.yd-hero { position: relative; width: 100%; height: 76vh; max-height: 900px; min-height: 480px; overflow: hidden; background: var(--bg-dark); }
.yd-hero img { width: 100%; height: 100%; object-fit: cover; }
.yd-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,40,64,0.35) 0%, transparent 30%, rgba(13,40,64,0.75) 100%); }
.yd-back { position: absolute; top: 86px; left: 32px; z-index: 3; background: rgba(255,255,255,0.95); color: var(--ink); padding: 9px 16px 9px 12px; border-radius: 980px; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(8px); transition: all .25s var(--ease); }
.yd-back:hover { background: var(--ink); color: #fff; }
.yd-status { position: absolute; top: 86px; right: 32px; z-index: 3; background: var(--accent); color: var(--ink); padding: 7px 16px; border-radius: 980px; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.yd-hero-content { position: absolute; left: 32px; right: 32px; bottom: 38px; z-index: 3; color: #fff; }
.yd-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px; }
.yd-name { font-size: clamp(28px, 4vw, 52px); font-weight: 800; letter-spacing: -3px; line-height: 1.05; margin: 0; color: #fff; }
/* Sticky bar */
.yd-sticky { background: #fff; padding: 16px 4vw; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 30; flex-wrap: wrap; }
.yd-sb-name { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.5px; line-height: 1.1; }
.yd-sb-specs { font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.yd-sb-ctas { display: flex; gap: 8px; align-items: center; }
.yd-ico-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: transform .2s var(--ease); border: 0; text-decoration: none; }
.yd-ico-btn:hover { transform: scale(1.07); }
.yd-ico-btn svg { width: 18px; height: 18px; fill: #fff; }
.yd-ico-wa { background: #25D366; }
.yd-ico-em { background: var(--ink); }
.yd-pill-cal { background: var(--accent); color: var(--ink); padding: 10px 16px; border-radius: 980px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; border: 0; text-decoration: none; transition: background .2s var(--ease); text-align: center; }
.yd-pill-cal:hover { background: var(--accent-dark); }
.yd-pill-cal svg { width: 14px; height: 14px; fill: var(--ink); }
.yd-pill-out { background: transparent; color: var(--ink); padding: 9px 16px; border-radius: 980px; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--ink); cursor: pointer; text-decoration: none; transition: all .2s var(--ease); }
.yd-pill-out:hover { background: var(--ink); color: #fff; }
.yd-pill-out svg { width: 12px; height: 12px; fill: currentColor; }
/* Body */
.yd-body { max-width: 100%; margin: 0 auto; padding: 48px 4vw 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
.yd-eye-block { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 12px; }
.yd-quote { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.7px; line-height: 1.25; margin: 0 0 6px; }
.yd-quote-by { font-size: 12px; color: var(--ink-muted); font-style: italic; margin-bottom: 24px; }
.yd-desc p { font-size: 15px; color: var(--ink-muted); line-height: 1.7; margin: 0 0 12px; }
/* Rates panel (charter) */
.yd-rates { background: var(--bg-surface); border-radius: 14px; padding: 24px; }
.yd-rates-h { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin: 0 0 16px; display: block; }
.yd-rates-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(13,40,64,0.08); }
.yd-rates-row:last-of-type { border: 0; }
.yd-rates-row .lbl { font-size: 11px; color: var(--ink-muted); letter-spacing: 1.3px; text-transform: uppercase; font-weight: 600; }
.yd-rates-row .val { font-size: 17px; color: var(--ink); font-weight: 800; }
.yd-rates-tags { padding-top: 16px; margin-top: 8px; border-top: 1px solid rgba(13,40,64,0.08); }
.yd-rates-tag { display: inline-block; background: #fff; color: var(--ink); padding: 5px 12px; border-radius: 980px; font-weight: 700; margin-right: 6px; font-size: 11px; }
/* Price panel (sales) */
.yd-price { background: var(--bg-surface); border-radius: 14px; padding: 32px 24px; }
.yd-price-h { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin: 0 0 6px; display: block; }
.yd-price-status { font-size: 10px; color: var(--ink-muted); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.yd-price-status::before { content: '●'; color: #25D366; margin-right: 5px; }
.yd-price-amount { font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -1.6px; line-height: 1; margin-bottom: 4px; }
.yd-price-curr { font-size: 12px; color: var(--ink-muted); font-weight: 600; margin-bottom: 16px; }
.yd-price-rows { padding: 16px 0; border-top: 1px solid rgba(13,40,64,0.08); border-bottom: 1px solid rgba(13,40,64,0.08); margin-bottom: 16px; }
.yd-price-row { display: flex; justify-content: space-between; padding: 6px 0; align-items: center; }
.yd-price-row .l { color: var(--ink-muted); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; font-size: 11px; }
.yd-price-row .v { color: var(--ink); font-weight: 700; font-size: 13px; }
.yd-vat-paid { background: var(--accent); color: var(--ink); padding: 3px 12px; border-radius: 980px; font-weight: 800; font-size: 11px; }
.yd-vat-notpaid { background: #fff; color: var(--ink); padding: 2px 11px; border-radius: 980px; font-weight: 800; font-size: 11px; border: 1.5px solid var(--ink); }
.yd-price-note { font-size: 11px; color: var(--ink-muted); line-height: 1.5; }
/* Gallery */
.yd-gallery { max-width: 100%; margin: 0 auto; padding: 0 32px 48px; }
.yd-gallery-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.yd-dl-link { font-size: 12px; color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: transparent; border: 0; padding: 0; font-family: var(--font); }
.yd-dl-link:hover { color: var(--accent-dark); }
.yd-dl-link svg { width: 14px; height: 14px; fill: currentColor; }
.yd-gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; grid-template-rows: 260px 130px; }
.yd-gallery-grid > * { background-size: cover; background-position: center; border-radius: 10px; cursor: pointer; transition: transform .3s var(--ease); position: relative; overflow: hidden; }
.yd-gallery-grid > *:hover { transform: scale(1.01); }
.yd-gg-main { grid-row: 1 / 3; }
.yd-gg-more { display: flex; align-items: center; justify-content: center; background: var(--ink) !important; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
/* Specs unified */
.yd-specs { background: var(--bg-grey); padding: 64px 3vw; }
.yd-specs-inner { max-width: 100%; margin: 0 auto; }
.yd-specs-head { margin-bottom: 32px; }
.yd-specs-title { font-size: 36px; font-weight: 800; color: var(--ink); letter-spacing: -1.4px; line-height: 1; margin: 0; }
.yd-specs-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.yd-specs-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(184,150,90,0.3); }
.yd-specs-col .row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 13.5px; border-bottom: 1px solid rgba(13,40,64,0.05); gap: 12px; }
.yd-specs-col .row:last-child { border: 0; }
.yd-specs-col .row .lbl { color: var(--ink-muted); font-weight: 500; }
.yd-specs-col .row .val { color: var(--ink); font-weight: 700; text-align: right; }
/* Info box */
.yd-info-box { max-width: 100%; margin: 0 auto 40px; padding: 24px 32px; background: linear-gradient(135deg, #f9f7f2 0%, #f4ede0 100%); border-radius: 14px; border-left: 4px solid var(--accent); }
.yd-info-box h4 { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.yd-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.yd-info-grid > div { font-size: 13px; color: var(--ink); line-height: 1.6; }
.yd-info-grid > div b { font-weight: 800; display: block; margin-bottom: 4px; font-size: 14px; }
/* Destinations (charter) */
.yd-dest { max-width: 100%; margin: 0 auto; padding: 48px 3vw 40px; }
.yd-dest-head { margin-bottom: 24px; }
.yd-dest-title { font-size: 42px; font-weight: 800; color: var(--ink); letter-spacing: -1.8px; margin: 0 0 8px; line-height: 1; }
.yd-dest-sub { font-size: 14px; color: var(--ink-muted); margin: 0; }
.yd-dest-tabs { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.yd-dest-tab { font-size: 12px; padding: 8px 16px; border-radius: 980px; font-weight: 600; cursor: pointer; transition: all .25s var(--ease); border: 0; font-family: var(--font); background: var(--bg-surface); color: var(--ink-muted); }
.yd-dest-tab.active { background: var(--ink); color: #fff; }
.yd-dest-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.yd-dest-card { aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: 12px; position: relative; overflow: hidden; cursor: pointer; transition: transform .3s var(--ease); }
.yd-dest-card:hover { transform: translateY(-4px); }
.yd-dest-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85) 100%); }
.yd-dest-card .lbl { position: absolute; bottom: 18px; left: 18px; right: 18px; z-index: 2; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.15; }
.yd-dest-card .meta { position: absolute; bottom: 48px; left: 18px; z-index: 2; color: var(--accent); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; }
.yd-dest-card .desc { position: absolute; bottom: 4px; left: 18px; right: 18px; z-index: 2; color: rgba(255,255,255,0.85); font-size: 10px; line-height: 1.4; opacity: 0; transition: opacity .3s var(--ease); }
.yd-dest-card:hover .desc { opacity: 1; }
/* Highlights (sales) */
.yd-highlights { max-width: 100%; margin: 0 auto; padding: 48px 3vw 40px; }
.yd-highlights-head { margin-bottom: 24px; }
.yd-highlights-title { font-size: 42px; font-weight: 800; color: var(--ink); letter-spacing: -1.8px; margin: 0 0 8px; line-height: 1; }
.yd-highlights-sub { font-size: 14px; color: var(--ink-muted); margin: 0; }
.yd-highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.yd-h-card { padding: 32px 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.yd-h-card .num { width: 40px; height: 40px; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; margin-bottom: 16px; }
.yd-h-card h4 { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.2px; margin: 0 0 8px; }
.yd-h-card p { font-size: 12.5px; color: var(--ink-muted); line-height: 1.55; margin: 0; }
/* Similar yachts (sales) */
.yd-similar { background: var(--bg-grey); padding: 64px 3vw; }
.yd-similar-inner { max-width: 100%; margin: 0 auto; }
.yd-similar-head { margin-bottom: 24px; }
.yd-similar-title { font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -1.3px; margin: 0 0 6px; line-height: 1; }
.yd-similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.yd-s-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; transition: transform .3s var(--ease); text-decoration: none; color: inherit; display: block; }
.yd-s-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.07); }
.yd-s-img { aspect-ratio: 16/10; background-size: cover; background-position: center; position: relative; }
.yd-s-tag { position: absolute; top: 12px; left: 12px; background: rgba(13,40,64,0.85); color: #fff; padding: 4px 11px; border-radius: 980px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.yd-s-body { padding: 16px 16px; }
.yd-s-name { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.4px; margin: 0 0 4px; line-height: 1.1; }
.yd-s-meta { font-size: 11px; color: var(--ink-muted); margin-bottom: 12px; }
.yd-s-price-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); }
.yd-s-price { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
.yd-s-vat { font-size: 10px; color: var(--accent); font-weight: 700; letter-spacing: 1px; }
.yd-s-arrow { font-size: 12px; color: var(--accent); font-weight: 700; }
/* CTA section */
.yd-cta { background: var(--bg-dark); padding: 80px 3vw; text-align: center; color: #fff; }
.yd-cta-inner { max-width: 760px; margin: 0 auto; }
.yd-cta-eye { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; display: block; }
.yd-cta-h { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -2px; margin: 0 0 16px; line-height: 1; color: #fff; }
.yd-cta-p { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0 auto 32px; max-width: 480px; line-height: 1.6; }
.yd-cta-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; align-items: center; }
.yd-cta-btns .yd-pill-out { color: #fff; border-color: rgba(255,255,255,0.4); }
.yd-cta-btns .yd-pill-out:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Floating bottom bar */
.yd-float-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 10px 16px; border-radius: 16px; box-shadow: 0 10px 36px rgba(0,0,0,0.18); display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,0.5); z-index: 60; max-width: 880px; margin: 0 auto; transition: transform .35s var(--ease), opacity .35s var(--ease); }
.yd-float-bar.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
.yd-float-name { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.yd-float-meta { font-size: 11px; color: var(--ink-muted); }
.yd-float-ctas { display: flex; gap: 6px; }
.yd-float-ctas .yd-ico-btn { width: 36px; height: 36px; }
.yd-float-ctas .yd-ico-btn svg { width: 15px; height: 15px; }
.yd-float-ctas .yd-pill-cal { padding: 8px 16px; font-size: 11px; }
/* Modal */
.yacht-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.yacht-modal-backdrop { position: absolute; inset: 0; background: rgba(13,40,64,0.65); backdrop-filter: blur(4px); }
.yacht-modal-card { position: relative; background: #fff; border-radius: 16px; padding: 32px; max-width: 540px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.3); }
.ym-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; background: var(--bg-surface); border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.ym-eye { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 8px; }
.ym-title { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.8px; margin: 0 0 8px; }
.ym-sub { font-size: 13px; color: var(--ink-muted); margin: 0 0 24px; line-height: 1.5; }
.ym-field { display: block; margin-bottom: 16px; }
.ym-field label { display: block; font-size: 10px; color: var(--ink-muted); letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.ym-field input, .ym-field textarea { width: 100%; background: transparent; border: 0; border-bottom: 2px solid var(--bg-surface); padding: 8px 0; font-size: 14px; color: var(--ink); font-family: var(--font); transition: border-color .2s; }
.ym-field input:focus, .ym-field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.ym-field textarea { resize: vertical; min-height: 60px; }
.ym-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ym-submit { background: var(--ink); color: #fff; width: 100%; padding: 13px 0; border-radius: 980px; font-size: 13px; font-weight: 700; border: 0; cursor: pointer; font-family: var(--font); margin-top: 8px; transition: background .2s var(--ease); }
.ym-submit:hover { background: var(--accent); color: var(--ink); }
.ym-success { background: linear-gradient(135deg, #f9f7f2 0%, #f4ede0 100%); padding: 32px 24px; border-radius: 12px; text-align: center; border-left: 4px solid var(--accent); }
.ym-success h4 { font-size: 18px; font-weight: 800; color: var(--ink); margin: 0 0 8px; letter-spacing: -0.4px; }
.ym-success p { font-size: 13px; color: var(--ink-muted); margin: 0; line-height: 1.5; }
/* Responsive */
@media (max-width: 880px) {
.yd-body { grid-template-columns: 1fr; padding: 36px 20px; gap: 32px; }
.yd-gallery { padding: 0 20px 32px; }
.yd-gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 120px 120px; }
.yd-gg-main { grid-column: 1 / 3; grid-row: 1; }
.yd-gg-more { grid-row: 3; }
.yd-specs { padding: 48px 20px; }
.yd-specs-grid { grid-template-columns: 1fr; gap: 32px; }
.yd-info-box { margin: 0 20px 32px; }
.yd-info-grid { grid-template-columns: 1fr; }
.yd-dest, .yd-highlights { padding: 40px 20px; }
.yd-dest-row, .yd-highlights-grid, .yd-similar-grid { grid-template-columns: 1fr; }
.yd-similar { padding: 48px 20px; }
.yd-cta { padding: 48px 20px; }
.yd-back { top: 76px; left: 18px; }
.yd-status { top: 76px; right: 18px; }
.yd-hero-content { left: 20px; right: 20px; bottom: 24px; }
/* Mobile: hide the sticky top bar — the bottom float bar does the same job */
.yd-sticky { display: none !important; }
.yd-sb-ctas .yd-pill-cal { padding: 8px 12px; font-size: 11px; }
/* Float bar on mobile - keep prominent CTAs */
.yd-float-bar {
padding: 10px 12px;
gap: 8px;
bottom: 12px;
left: 12px;
right: 12px;
}
.yd-float-name { font-size: 13px; }
.yd-float-meta {
font-size: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.yd-float-ctas { gap: 8px; }
.yd-float-ctas .yd-ico-btn {
width: 40px;
height: 40px;
}
.yd-float-ctas .yd-ico-btn svg {
width: 18px;
height: 18px;
}
/* WhatsApp icon stays prominent on mobile - green stays */
.yd-float-ctas .yd-ico-wa {
background: #25D366;
box-shadow: 0 2px 8px rgba(37,211,102,0.4);
}
.yd-float-ctas .yd-pill-cal {
padding: 9px 14px;
font-size: 11px;
}
}
/* ═══════════════════════════════════════════════════════════
DESTINATIONS — INDEX + DETAIL
═══════════════════════════════════════════════════════════ */
/* HERO (shared) */
.dx-hero { position: relative; width: 100%; height: 70vh; max-height: 840px; min-height: 440px; overflow: hidden; background: var(--bg-dark); }
.dx-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.dx-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,40,64,0.4) 0%, transparent 35%, rgba(13,40,64,0.7) 100%); }
.dx-hero-content { position: absolute; right: 5vw; bottom: 64px; z-index: 2; color: #fff; text-align: right; padding: 0 24px 0 0; max-width: 720px; width: auto; border-right: 2px solid var(--accent); }
.dx-hero-content .h-eye { display: block; margin-bottom: 16px; }
.dx-hero-content .h-title { text-align: right; }
.dx-hero .h-eye { font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; display: block; }
.dx-hero .h-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(40px, 8vw, 88px); letter-spacing: -2px; line-height: 1.05; margin: 0 0 22px; color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,0.4); }
.dx-hero .h-sub { font-size: 15px; color: rgba(255,255,255,0.85); margin: 0 auto 30px; max-width: 540px; line-height: 1.6; font-weight: 300; }
.dx-hero .h-data { display: inline-flex; align-items: center; gap: 0; border-top: 1px solid rgba(255,255,255,0.25); padding-top: 22px; margin-top: 4px; }
.dx-hero .h-data .item { padding: 0 22px; border-right: 1px solid rgba(255,255,255,0.2); }
.dx-hero .h-data .item:last-child { border-right: 0; }
.dx-hero .h-data .item .n { font-size: 22px; font-weight: 800; color: var(--accent); display: block; line-height: 1; }
.dx-hero .h-data .item .l { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-top: 6px; display: block; }
@media (max-width: 720px) {
.dx-hero .h-data { flex-wrap: wrap; gap: 12px; padding-top: 18px; }
.dx-hero .h-data .item { padding: 4px 14px; }
.dx-hero .h-data .item .n { font-size: 18px; }
}
.dx-intro { padding: 48px 24px; text-align: center; max-width: 640px; margin: 0 auto; }
.dx-intro p { font-size: 15px; color: var(--ink-muted); line-height: 1.7; margin: 0; }
/* M2 LAYOUT — Wide hero card top + 5 equal below */
.dx-regions { padding: 16px 3vw 64px; max-width: 100%; margin: 0 auto; }
.dx-regions-head { margin-bottom: 24px; text-align: center; }
.dx-eye { font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 10px; }
.dx-h2 { font-size: clamp(32px, 4.5vw, 48px); font-weight: 800; color: var(--ink); letter-spacing: -1.8px; margin: 0; line-height: 1; }
.dx-sub { font-size: 14px; color: var(--ink-muted); margin: 10px auto 0; max-width: 480px; line-height: 1.6; }
.dx-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dx-card { background-size: cover; background-position: center; border-radius: 14px; position: relative; overflow: hidden; cursor: pointer; transition: transform .4s var(--ease); text-decoration: none; color: inherit; display: block; }
.dx-card:hover { transform: translateY(-4px); }
.dx-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.85) 100%); transition: background .3s var(--ease); }
.dx-card:hover::after { background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,0.9) 100%); }
.dx-card .meta { position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 2; color: #fff; }
.dx-card .name { font-size: 22px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; margin: 0; }
.dx-card .sub { font-size: 11px; color: rgba(255,255,255,0.8); margin: 6px 0 0; line-height: 1.5; }
.dx-card .count { position: absolute; top: 16px; right: 16px; z-index: 2; background: rgba(255,255,255,0.94); color: var(--ink); padding: 4px 11px; border-radius: 980px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; }
.dx-card .arrow { font-size: 11px; color: var(--accent); font-weight: 700; margin-top: 8px; letter-spacing: 0.8px; display: inline-block; }
.dx-card.featured { grid-column: 1 / -1; aspect-ratio: 24/8; }
.dx-card.featured .name { font-size: clamp(32px, 4vw, 44px); letter-spacing: -1.5px; }
.dx-card.featured .sub { font-size: 13px; margin-top: 10px; }
.dx-card.featured .meta { bottom: 30px; left: 30px; right: 30px; }
.dx-card.featured .count { top: 22px; right: 22px; padding: 5px 13px; font-size: 11px; }
.dx-card.std { aspect-ratio: 4/5; }
/* ROUTES SECTION */
.dx-routes { padding: 72px 3vw; background: var(--bg-grey); }
.dx-routes-inner { max-width: 100%; margin: 0 auto; }
.dx-routes-head { margin-bottom: 8px; text-align: center; }
.dx-routes-tabs { display: flex; gap: 10px; justify-content: center; margin: 32px 0 28px; }
.dx-routes-tab { font-size: 13px; padding: 9px 24px; border-radius: 980px; font-weight: 600; cursor: pointer; background: #fff; color: var(--ink-muted); border: 1px solid var(--line); transition: all .25s var(--ease); font-family: var(--font); }
.dx-routes-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.dx-routes-tab:hover:not(.active) { color: var(--ink); }
.dx-routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dx-r-card { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; transition: transform .3s var(--ease); display: block; text-decoration: none; color: inherit; }
.dx-r-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,0.07); }
.dx-r-card .img { aspect-ratio: 16/10; background-size: cover; background-position: center; position: relative; }
.dx-r-card .tag { position: absolute; top: 14px; left: 14px; background: rgba(13,40,64,0.9); color: #fff; padding: 4px 12px; border-radius: 980px; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.dx-r-card .reg-tag { position: absolute; top: 14px; right: 14px; background: rgba(184,150,90,0.94); color: var(--ink); padding: 4px 12px; border-radius: 980px; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.dx-r-card .body { padding: 16px 20px; }
.dx-r-card h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 6px; letter-spacing: -0.3px; }
.dx-r-card .stops { font-size: 12px; color: var(--ink-muted); line-height: 1.55; margin: 0 0 16px; }
.dx-r-card .from { padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; }
.dx-r-card .from .l { font-size: 10px; color: var(--ink-muted); letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600; }
.dx-r-card .from .v { font-size: 12px; color: var(--ink); font-weight: 700; }
/* CTA */
.dx-cta { background: var(--bg-dark); padding: 80px 4vw; text-align: center; color: #fff; }
.dx-cta-inner { max-width: 720px; margin: 0 auto; }
.dx-cta-eye { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; display: block; }
.dx-cta-h { font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -2px; margin: 0 0 16px; line-height: 1; color: #fff; }
.dx-cta-p { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0 auto 32px; max-width: 460px; line-height: 1.6; }
.dx-cta-btn { background: var(--accent); color: var(--ink); padding: 13px 32px; border-radius: 980px; font-size: 13px; font-weight: 700; display: inline-block; text-decoration: none; transition: background .25s var(--ease); }
.dx-cta-btn:hover { background: var(--accent-dark); }
/* ─── DETAIL PAGE ─── */
.dd-back-2 { position: absolute; bottom: 64px; left: 5vw; z-index: 3; background: rgba(255,255,255,0.95); color: var(--ink); padding: 10px 18px 10px 14px; border-radius: 980px; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; backdrop-filter: blur(8px); transition: all .25s var(--ease); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.dd-back-2:hover { background: var(--ink); color: #fff; transform: translateX(-3px); }
.dd-back-2:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.dx-body { max-width: 100%; margin: 0 auto; padding: 64px 3vw 40px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.dx-quote { font-size: 26px; font-weight: 600; color: var(--ink); letter-spacing: -0.7px; line-height: 1.25; margin: 0 0 24px; }
.dx-desc p { font-size: 15px; color: var(--ink-muted); line-height: 1.7; margin: 0 0 16px; }
.dx-desc p b { color: var(--ink); font-weight: 700; }
.dx-facts { background: var(--bg-surface); border-radius: 14px; padding: 32px; }
.dx-facts-h { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin: 0 0 16px; display: block; }
.dx-fact-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(13,40,64,0.07); font-size: 12px; }
.dx-fact-row:last-child { border: 0; }
.dx-fact-row .lbl { color: var(--ink-muted); }
.dx-fact-row .val { color: var(--ink); font-weight: 700; text-align: right; }
/* Islands grid */
.dx-islands { padding: 48px 3vw; background: var(--bg-grey); }
.dx-islands-inner { max-width: 100%; margin: 0 auto; }
.dx-islands-head { margin-bottom: 32px; }
.dx-islands-head h3 { font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -1.3px; margin: 0 0 6px; }
.dx-islands-head p { font-size: 13px; color: var(--ink-muted); margin: 0; }
.dx-i-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.dx-i-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); cursor: pointer; transition: transform .25s var(--ease); text-decoration: none; color: inherit; display: block; }
.dx-i-card:hover { transform: translateY(-3px); }
.dx-i-card .img { aspect-ratio: 1/1; background-size: cover; background-position: center; }
.dx-i-card .body { padding: 12px 16px; }
.dx-i-card h4 { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 2px; letter-spacing: -0.2px; }
.dx-i-card p { font-size: 10.5px; color: var(--ink-muted); margin: 0; line-height: 1.4; }
/* Yachts based here */
.dx-yachts { padding: 48px 3vw 72px; }
.dx-yachts-inner { max-width: 100%; margin: 0 auto; }
.dx-yachts-head { margin-bottom: 24px; }
.dx-yachts-head h3 { font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -1.3px; margin: 0 0 6px; }
.dx-yachts-head p { font-size: 13px; color: var(--ink-muted); margin: 0; }
.dx-yachts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* RESPONSIVE */
@media (max-width: 980px) {
.dx-grid { grid-template-columns: repeat(2, 1fr); }
.dx-card.featured { grid-column: 1 / -1; aspect-ratio: 21/9; }
.dx-card.std { aspect-ratio: 4/3; }
.dx-routes-grid { grid-template-columns: 1fr; }
.dx-i-grid { grid-template-columns: repeat(3, 1fr); }
.dx-yachts-grid { grid-template-columns: 1fr; }
.dx-body { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; }
.dx-islands, .dx-yachts, .dx-routes { padding: 48px 24px; }
.dd-back-2 { bottom: 36px; left: 4vw; padding: 8px 14px 8px 11px; font-size: 11px; }
}
@media (max-width: 580px) {
.dx-grid { grid-template-columns: 1fr; }
.dx-card.featured, .dx-card.std { aspect-ratio: 4/3; }
.dx-i-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════════════════════════════════════════════════════════
ABOUT PAGE — K1 layout (horizontal flow + stacked analysis)
═══════════════════════════════════════════════════════════ */
/* Hero */
.ab-hero { position: relative; width: 100%; height: 76vh; max-height: 900px; min-height: 480px; overflow: hidden; background: var(--bg-dark); }
.ab-hero img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.ab-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,40,64,0.5) 0%, transparent 40%, rgba(13,40,64,0.65) 100%); }
.ab-hero-content { position: absolute; left: 5vw; bottom: 60px; z-index: 2; color: #fff; text-align: left; max-width: 720px; padding: 0; width: auto; }
.ab-eyebrow { font-size: 11px; letter-spacing: 3px; color: var(--accent, #b8965a); text-transform: uppercase; font-weight: 700; margin-bottom: 14px; display: inline-block; }
.ab-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 400; font-size: clamp(38px, 5.5vw, 72px); letter-spacing: -1px; line-height: 1.1; margin: 0; color: #fff; }
.ab-sub { font-size: clamp(15px, 1.4vw, 18px); color: rgba(255,255,255,0.85); margin: 22px 0 0; max-width: 600px; line-height: 1.5; }
/* About hero on mobile — the eyebrow used to fall on the bright yacht
and became unreadable. Strengthen the bottom scrim so the whole
text block (eyebrow + title + sub) sits on a dark base. */
@media (max-width: 768px) {
.ab-hero {
height: auto;
min-height: 0 !important;
max-height: none;
display: flex;
flex-direction: column;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.ab-hero img {
width: 100%;
height: 56vh;
min-height: 320px;
opacity: 1;
object-fit: cover;
display: block;
}
.ab-hero::after { display: none; } /* old gradient not needed */
.ab-hero-content {
position: static;
left: auto; bottom: auto;
background: var(--bg-dark, #0d2840);
padding: 28px 6vw 32px;
width: 100%;
max-width: 100%;
}
.ab-eyebrow { margin-bottom: 12px; }
.ab-title { font-size: clamp(30px, 8vw, 42px); }
.ab-sub { margin-top: 16px; }
}
/* ════ NEW ABOUT SECTIONS ════ */
.ab-eyebrow-2 { font-size: 10px; letter-spacing: 3px; color: var(--accent, #b8965a); text-transform: uppercase; font-weight: 700; margin-bottom: 12px; display: inline-block; }
.ab-h2 { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 400; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.5px; line-height: 1.02; color: var(--ink, #0d2840); margin: 0 0 18px; }
.ab-rule { width: 36px; height: 1px; background: var(--accent, #b8965a); margin: 0 0 32px; }
/* Quote section */
.ab-quote-section { background: var(--ink, #0d2840); color: #fff; padding: 100px 24px; text-align: center; }
.ab-quote-inner { max-width: 800px; margin: 0 auto; position: relative; }
.ab-quote-mark { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 120px; color: var(--accent, #b8965a); line-height: 0.6; opacity: 0.5; margin-bottom: -20px; }
.ab-quote { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.15; color: #fff; margin: 0 0 24px; }
.ab-quote-by { font-size: 11px; letter-spacing: 3px; color: var(--accent, #b8965a); text-transform: uppercase; font-weight: 700; }
/* Intro */
.ab-intro { padding: 100px 24px; background: #fff; }
.ab-intro-inner { max-width: 760px; margin: 0 auto; }
.ab-lede { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--ink, #0d2840); margin: 0 0 28px; }
.ab-body { font-size: 16px; line-height: 1.65; color: var(--ink-2, #3a4a5c); margin: 0 0 18px; }
/* Services */
.ab-services { padding: 100px 24px; background: var(--bg-surface, #f5f7f9); }
.ab-services-inner { max-width: 1100px; margin: 0 auto; }
.ab-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; }
.ab-svc { background: #fff; padding: 36px 32px; border-radius: 10px; border: 1px solid var(--line, #e8ecf0); transition: transform .25s, box-shadow .25s; }
.ab-svc:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(13,40,64,0.10); }
.ab-svc-num { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; color: var(--accent, #b8965a); font-size: 22px; margin-bottom: 8px; display: inline-block; }
.ab-svc h3 { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 400; font-size: 28px; color: var(--ink, #0d2840); margin: 0 0 14px; line-height: 1; }
.ab-svc p { font-size: 14px; line-height: 1.6; color: var(--ink-2, #3a4a5c); margin: 0 0 18px; }
.ab-svc-link { font-size: 11px; letter-spacing: 2px; color: var(--ink, #0d2840); text-transform: uppercase; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--accent, #b8965a); padding-bottom: 3px; transition: color .15s; }
.ab-svc-link:hover { color: var(--accent, #b8965a); }
/* Why us */
.ab-why { padding: 100px 24px; background: var(--ink, #0d2840); color: #fff; }
.ab-why-inner { max-width: 1100px; margin: 0 auto; }
.ab-why .ab-h2 { color: #fff; }
.ab-services .ab-h2 { color: var(--ink, #0d2840); }
.ab-why .ab-eyebrow-2 { color: var(--accent, #b8965a); }
.ab-why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 28px; }
.ab-why-card { padding: 28px 18px 22px; text-align: center; border-top: 1px solid rgba(184,150,90,0.3); }
.ab-why-num { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; color: var(--accent, #b8965a); font-size: 22px; margin-bottom: 10px; }
.ab-why-card h4 { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-weight: 400; font-size: 24px; color: #fff; margin: 0 0 10px; line-height: 1; }
.ab-why-card p { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; }
/* Founder */
/* The Forum way — offset card over photo */
.ab-forum-way { position: relative; padding: 90px 24px; overflow: hidden; }
.ab-fw-photo {
position: absolute;
inset: 0;
background-image: url('/yacht-photos/yacht-aerial-anchored.webp');
background-size: cover;
background-position: center;
}
.ab-fw-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, rgba(13,40,64,0.55) 0%, rgba(13,40,64,0.25) 55%, rgba(13,40,64,0.15) 100%);
}
.ab-fw-inner {
position: relative;
max-width: 1100px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
.ab-fw-card {
background: #fff;
border-radius: 8px;
padding: 48px 50px;
width: 58%;
box-shadow: 0 24px 60px rgba(13,40,64,0.30);
}
.ab-fw-card p { font-size: 16px; line-height: 1.65; color: var(--ink-2, #3a4a5c); margin: 0 0 16px; }
.ab-fw-contact {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid var(--line, #e8ecf0);
}
.ab-fw-contact-item {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
padding: 14px 16px;
background: var(--bg-surface, #f5f7f9);
border: 1px solid var(--line, #e8ecf0);
border-radius: 8px;
text-decoration: none;
transition: background .18s, border-color .18s, transform .18s;
}
.ab-fw-contact-item:hover {
background: #fff;
border-color: var(--accent, #b8965a);
transform: translateY(-2px);
}
.ab-fw-ci-icon {
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: 50%;
background: var(--ink, #0d2840);
color: var(--accent, #b8965a);
display: flex;
align-items: center;
justify-content: center;
}
.ab-fw-ci-icon svg { width: 17px; height: 17px; }
.ab-fw-ci-text { display: flex; flex-direction: column; min-width: 0; }
.ab-fw-ci-lbl {
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
color: var(--accent, #b8965a);
margin-bottom: 2px;
}
.ab-fw-ci-val {
font-size: 13.5px;
font-weight: 600;
color: var(--ink, #0d2840);
word-break: break-word;
line-height: 1.3;
}
@media (max-width: 560px) {
.ab-fw-contact { flex-direction: column; gap: 10px; }
}
.ab-founder-cta a { color: var(--ink, #0d2840); border-bottom: 1px solid var(--accent, #b8965a); text-decoration: none; padding-bottom: 1px; font-weight: 600; }
.ab-founder-cta a:hover { color: var(--accent, #b8965a); }
@media (max-width: 1024px) {
.ab-svc-grid { grid-template-columns: 1fr 1fr; }
.ab-why-grid { grid-template-columns: repeat(3, 1fr); }
.ab-fw-card { width: 78%; padding: 40px 38px; }
}
@media (max-width: 700px) {
.ab-intro, .ab-services, .ab-why { padding: 60px 20px; }
.ab-forum-way { padding: 50px 16px; }
.ab-fw-inner { justify-content: center; }
.ab-fw-card { width: 100%; padding: 32px 24px; }
.ab-quote-section { padding: 16px 24px 56px; }
.ab-svc-grid { grid-template-columns: 1fr; }
.ab-why-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.ab-why-card { padding: 20px 12px 16px; }
.ab-svc { padding: 26px 22px; }
.ab-quote-mark { font-size: 80px; }
}
/* ════ END NEW ABOUT ════ */
.ab-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 16px; }
.ab-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: clamp(30px, 4vw, 56px); font-weight: 400; letter-spacing: -1px; line-height: 1.1; margin: 0; color: #fff; }
.ab-sub { font-size: 14px; color: rgba(255,255,255,0.85); margin: 16px auto 0; max-width: 520px; line-height: 1.6; }
/* Horizontal step flow */
.ab-flow { background: var(--bg-grey); border-bottom: 1px solid var(--line); padding: 36px 24px; position: sticky; top: 64px; z-index: 20; }
.ab-flow-inner { max-width: 960px; margin: 0 auto; }
.ab-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: start; position: relative; }
.ab-steps::before { content: ''; position: absolute; top: 20px; left: 60px; right: 60px; height: 2px; background: var(--line); z-index: 0; }
.ab-step { text-align: center; position: relative; z-index: 1; padding: 0 6px; }
.ab-step .dot { width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; transition: all .25s var(--ease); }
.ab-step:hover .dot { background: var(--accent); color: var(--ink); transform: scale(1.05); }
.ab-step h5 { font-size: 12px; font-weight: 800; color: var(--ink); margin: 0 0 2px; letter-spacing: -0.2px; }
.ab-step p { font-size: 10px; color: var(--ink-muted); margin: 0; }
/* Analysis blocks */
.ab-analysis { padding: 72px 24px 32px; max-width: 880px; margin: 0 auto; }
.ab-block { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--line); }
.ab-block:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.ab-marker { font-size: 64px; font-weight: 800; color: var(--accent); letter-spacing: -3px; line-height: 1; }
.ab-content h2 { font-size: 32px; font-weight: 800; color: var(--ink); letter-spacing: -1.2px; margin: 0 0 16px; line-height: 1.05; }
.ab-lead { font-size: 17px; color: var(--ink); font-weight: 500; line-height: 1.45; margin: 0 0 16px; }
.ab-content > p { font-size: 14px; color: var(--ink-muted); line-height: 1.7; margin: 0 0 16px; }
.ab-includes { margin-top: 24px; padding: 20px 24px; background: linear-gradient(135deg, #f9f7f2 0%, #f4ede0 100%); border-radius: 12px; border-left: 4px solid var(--accent); }
.ab-includes-h { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.ab-check { font-size: 13px; color: var(--ink); padding: 5px 0 5px 24px; position: relative; line-height: 1.5; }
.ab-check::before { content: '✓'; position: absolute; left: 0; color: #25D366; font-weight: 800; font-size: 14px; }
/* Services section */
.ab-services { background: var(--bg-surface, #f5f7f9); color: var(--ink, #0d2840); padding: 80px 24px; }
.ab-services-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.ab-eyebrow-light { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 16px; }
.ab-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ab-svc { padding: 32px 24px; background: #fff; border: 1px solid var(--line, #e8ecf0); border-radius: 14px; text-align: left; transition: all .3s var(--ease); text-decoration: none; color: var(--ink, #0d2840); display: block; }
.ab-svc:hover { background: #fff; transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 44px rgba(13,40,64,0.10); }
.ab-svc-num { font-size: 11px; color: var(--accent); font-weight: 800; letter-spacing: 2px; margin-bottom: 16px; }
.ab-svc h3 { font-size: 22px; font-weight: 800; color: var(--ink, #0d2840); letter-spacing: -0.6px; margin: 0 0 10px; }
.ab-svc p { font-size: 13px; color: var(--ink-2, #3a4a5c); line-height: 1.6; margin: 0 0 16px; }
.ab-svc-arrow { font-size: 12px; color: var(--accent); font-weight: 700; letter-spacing: 0.5px; }
/* CTA */
/* ABOUT PARTNERS / COLLABORATIONS */
.ab-partners { padding: 80px 24px; background: var(--bg-surface, #fafbfc); }
.ab-partners-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.ab-partners-eye { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: var(--accent, #b8965a); text-transform: uppercase; display: block; margin-bottom: 12px; }
.ab-partners-h { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: clamp(28px, 3.5vw, 42px); color: var(--ink, #0d2840); margin: 0 0 14px; font-weight: 400; line-height: 1.05; }
.ab-partners-lead { font-size: 14px; color: var(--ink-muted, #6b7d92); max-width: 560px; margin: 0 auto 48px; line-height: 1.7; font-style: italic; }
.ab-partners-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
text-align: left;
}
/* ════ SPLIT PANEL PARTNERS ════ */
.ab-pt-split {
display: flex;
gap: 20px;
text-align: left;
margin-top: 8px;
align-items: stretch;
}
.ab-pt-swipe-hint { display: none; }
.ab-pt-list {
width: 280px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.ab-pt-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 16px 18px;
background: transparent;
border: 0;
border-bottom: 1px solid var(--line, #e8ecf0);
cursor: pointer;
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 19px;
color: var(--ink-muted, #6b7d92);
text-align: left;
transition: color .18s, padding-left .18s;
}
.ab-pt-item:hover { color: var(--ink, #0d2840); padding-left: 24px; }
.ab-pt-item-ar {
font-size: 20px;
opacity: 0;
transition: opacity .18s;
color: var(--accent, #b8965a);
}
.ab-pt-item:hover .ab-pt-item-ar { opacity: 1; }
.ab-pt-item.on {
color: var(--ink, #0d2840);
padding-left: 24px;
}
.ab-pt-item.on .ab-pt-item-ar { opacity: 1; }
.ab-pt-item.on .ab-pt-item-n {
border-bottom: 2px solid var(--accent, #b8965a);
padding-bottom: 2px;
}
.ab-pt-panel {
flex: 1;
min-width: 0;
background: #fff;
border: 1px solid var(--line, #e8ecf0);
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
}
.ab-pt-photo {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: #eef2f6;
}
.ab-pt-body { padding: 26px 30px 30px; }
.ab-pt-name {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-weight: 400;
font-size: 28px;
color: var(--ink, #0d2840);
margin: 0;
line-height: 1;
}
.ab-pt-rule {
width: 32px;
height: 2px;
background: var(--accent, #b8965a);
margin: 14px 0 16px;
}
.ab-pt-text {
font-size: 15px;
line-height: 1.7;
color: var(--ink-2, #3a4a5c);
margin: 0;
}
.ab-pt-text strong { color: var(--ink, #0d2840); font-weight: 600; }
@media (max-width: 860px) {
.ab-pt-split { flex-direction: column; gap: 14px; }
.ab-pt-list {
width: 100%;
flex-direction: row;
overflow-x: auto;
gap: 6px;
padding-bottom: 6px;
-webkit-overflow-scrolling: touch;
/* right-edge fade signals there is more to scroll */
-webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%);
mask-image: linear-gradient(to right, #000 86%, transparent 100%);
scrollbar-width: none;
}
.ab-pt-list::-webkit-scrollbar { display: none; }
.ab-pt-list.scrolled-end {
-webkit-mask-image: none;
mask-image: none;
}
/* swipe hint */
.ab-pt-swipe-hint {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent, #b8965a);
font-weight: 600;
margin-top: 8px;
transition: opacity .25s;
}
.ab-pt-swipe-hint .ab-pt-swipe-arrow {
display: inline-block;
animation: ab-pt-nudge 1.3s ease-in-out infinite;
}
@keyframes ab-pt-nudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
.ab-pt-item {
flex-shrink: 0;
border-bottom: 0;
border: 1px solid var(--line, #e8ecf0);
border-radius: 50px;
padding: 10px 16px;
font-size: 15px;
white-space: nowrap;
}
.ab-pt-item:hover, .ab-pt-item.on { padding-left: 16px; }
.ab-pt-item-ar { display: none; }
.ab-pt-item.on {
background: var(--ink, #0d2840);
color: #fff;
}
.ab-pt-item.on .ab-pt-item-n { border-bottom: 0; }
.ab-pt-body { padding: 20px 22px 24px; }
.ab-pt-name { font-size: 24px; }
.ab-pt-text { font-size: 14px; }
}
/* ════ END SPLIT PANEL ════ */
.ab-partner-card {
background: #fff;
border: 1px solid var(--line, #e8ecf0);
border-left: 3px solid var(--accent, #b8965a);
border-radius: 0 6px 6px 0;
padding: 22px 24px;
transition: transform .2s, box-shadow .2s;
cursor: pointer;
}
.ab-partner-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.ab-partner-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.ab-partner-card h3 {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 19px;
margin: 0 0 8px;
color: var(--ink, #0d2840);
font-weight: 400;
}
.ab-partner-toggle {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--accent, #b8965a);
color: var(--accent, #b8965a);
font-size: 15px;
line-height: 20px;
text-align: center;
font-weight: 400;
transition: transform .25s, background .2s, color .2s;
}
.ab-partner-card.open .ab-partner-toggle {
transform: rotate(45deg);
background: var(--accent, #b8965a);
color: #fff;
}
.ab-partner-card p {
font-size: 13px;
color: var(--ink-muted, #6b7d92);
line-height: 1.65;
margin: 0;
}
.ab-partner-more {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .4s ease, opacity .25s ease, margin-top .25s ease;
margin-top: 0;
}
.ab-partner-card.open .ab-partner-more {
max-height: 520px;
opacity: 1;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line, #e8ecf0);
}
.ab-partner-photo {
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: #eef2f6;
border-radius: 6px;
margin-bottom: 12px;
}
.ab-partner-text {
font-size: 13px;
color: var(--ink-2, #3a4a5c);
line-height: 1.7;
}
.ab-partner-more strong {
color: var(--ink, #0d2840);
font-weight: 600;
}
@media (max-width: 768px) {
.ab-partners-grid { grid-template-columns: 1fr; }
.ab-partners { padding: 56px 16px; }
}
/* END ABOUT PARTNERS */
.ab-cta { padding: 96px 24px; text-align: center; background: linear-gradient(135deg, #f9f7f2 0%, #f4ede0 100%); }
.ab-cta-inner { max-width: 640px; margin: 0 auto; }
.ab-cta-eye { font-size: 12px; font-weight: 700; letter-spacing: 2.2px; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 16px; }
.ab-cta-h { font-size: clamp(36px, 5vw, 56px); font-weight: 800; color: var(--ink); letter-spacing: -2px; line-height: 1; margin: 0 0 16px; }
.ab-cta-p { font-size: 15px; color: var(--ink-muted); margin: 0 auto 32px; max-width: 460px; line-height: 1.65; }
.ab-cta-btn { background: var(--ink); color: #fff; padding: 16px 30px; border-radius: 980px; font-size: 13px; font-weight: 700; display: inline-block; text-decoration: none; transition: all .25s var(--ease); }
.ab-cta-btn:hover { background: var(--accent); color: var(--ink); }
/* Footer */
.footer { background: var(--bg-dark); color: rgba(255,255,255,0.7); padding: 48px 24px 24px; }
.footer-inner { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-col h5 { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; color: var(--accent); text-transform: uppercase; margin: 0 0 16px; }
.footer-col p { font-size: 13px; line-height: 1.7; margin: 0; color: rgba(255,255,255,0.65); }
.footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,0.7); text-decoration: none; padding: 4px 0; transition: color .2s; }
.footer-col a:hover { color: var(--accent); }
.footer-brand { font-size: 14px; font-weight: 800; letter-spacing: 1.8px; color: #fff; margin-bottom: 10px; }
.footer-bottom { max-width: 100%; margin: 24px auto 0; display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.5); }
.footer-bottom a { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-bottom a:hover { color: var(--accent); }
/* Responsive */
@media (max-width: 880px) {
.ab-flow { padding: 24px 16px; }
.ab-steps { gap: 4px; }
.ab-steps::before { left: 30px; right: 30px; top: 16px; }
.ab-step .dot { width: 34px; height: 34px; font-size: 10px; }
.ab-step h5 { font-size: 10px; }
.ab-step p { font-size: 8.5px; }
.ab-analysis { padding: 48px 20px 24px; }
.ab-block { grid-template-columns: 1fr; gap: 16px; padding-bottom: 40px; margin-bottom: 40px; }
.ab-marker { font-size: 44px; }
.ab-content h2 { font-size: 26px; }
.ab-lead { font-size: 15px; }
.ab-services { padding: 48px 20px; }
.ab-svc-grid { grid-template-columns: 1fr; }
.ab-cta { padding: 64px 20px; }
.footer-inner { grid-template-columns: 1fr; gap: 32px; padding-bottom: 24px; }
.footer-bottom { padding: 16px 0 0; flex-direction: column; gap: 6px; align-items: flex-start; }
}
/* ═══════════════════════════════════════════════════════════
HEADING COLOR FIX — override global h1-h6 color: var(--ink)
on all dark backgrounds / overlays where white text is expected
═══════════════════════════════════════════════════════════ */
.dx-hero h1, .dx-hero h2, .dx-hero h3,
.dx-hero-content h1, .dx-hero-content h2, .dx-hero-content h3,
.yd-hero h1, .yd-hero h2, .yd-hero h3,
.yd-hero-content h1, .yd-hero-content h2,
.yd-cta h1, .yd-cta h2, .yd-cta h3,
.yd-cta-inner h2,
.yd-float-bar h1, .yd-float-bar h2,
.dx-cta h1, .dx-cta h2, .dx-cta h3,
.dx-cta-inner h2,
.ab-hero h1, .ab-hero h2, .ab-hero h3,
.ab-hero-content h1, .ab-hero-content h2,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
.dd-hero h1, .dd-hero h2,
.dd-hero-content h1, .dd-hero-content h2 {
color: #fff;
}
/* Hero icon-button SVGs that may inherit dark colors */
.yd-cta .yd-ico-em svg,
.dx-cta .yd-ico-em svg { fill: #fff; }
/* ═══════════════════════════════════════════════════════════
SITE IMPROVEMENTS — Tier 1 + bonus
═══════════════════════════════════════════════════════════ */
/* ─── 05. Skeleton shimmer ─── */
@keyframes fy-shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
}
.fy-skeleton {
background: linear-gradient(90deg, #eef2f6 0%, #f5f8fb 50%, #eef2f6 100%);
background-size: 1000px 100%;
animation: fy-shimmer 1.8s infinite linear;
border-radius: 6px;
display: block;
}
.fy-skel-row { display: flex; gap: 12px; margin-bottom: 12px; }
.fy-skel-yacht-card {
padding: 0;
border-radius: 14px;
overflow: hidden;
background: #fff;
border: 1px solid #eef2f6;
}
.fy-skel-img { width: 100%; aspect-ratio: 4/3; }
.fy-skel-pad { padding: 16px 20px; }
.fy-skel-title { height: 20px; width: 60%; margin-bottom: 12px; }
.fy-skel-meta { height: 14px; width: 80%; margin-bottom: 10px; }
.fy-skel-price { height: 18px; width: 40%; }
.fy-skel-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
max-width: 100%;
margin: 32px auto;
padding: 0 24px;
}
.fy-skel-hero { width: 100%; height: 70vh; max-height: 800px; min-height: 460px; }
.fy-skel-block { padding: 24px; max-width: 100%; margin: 0 auto; }
.fy-skel-block .fy-skel-title { height: 32px; width: 50%; }
/* ─── Toast notifications ─── */
.fy-toast {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #0d2840;
color: #fff;
padding: 12px 24px;
border-radius: 980px;
font-size: 13px;
font-weight: 600;
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: all 0.3s var(--ease, cubic-bezier(.4,0,.2,1));
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.fy-toast.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ─── 07. Cookie banner ─── */
.fy-cookie-banner {
position: fixed;
bottom: 24px;
left: 24px;
max-width: 420px;
background: #fff;
border: 1px solid rgba(13,40,64,0.1);
border-radius: 14px;
padding: 20px 24px;
box-shadow: 0 16px 40px rgba(0,0,0,0.12);
z-index: 100;
transform: translateY(120%);
opacity: 0;
transition: all 0.4s var(--ease, cubic-bezier(.4,0,.2,1));
}
.fy-cookie-banner.visible { transform: translateY(0); opacity: 1; }
.fy-cookie-banner.hide { transform: translateY(120%); opacity: 0; }
.fy-cookie-text strong { font-size: 13px; font-weight: 700; color: #0d2840; display: block; margin-bottom: 4px; }
.fy-cookie-text p { font-size: 12px; color: #6b7d92; line-height: 1.55; margin: 0 0 16px; }
.fy-cookie-text a { color: #b8965a; text-decoration: none; font-weight: 600; }
.fy-cookie-text a:hover { text-decoration: underline; }
.fy-cookie-actions { display: flex; gap: 8px; justify-content: flex-end; }
.fy-cookie-btn {
padding: 8px 16px;
border-radius: 980px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
border: 1px solid transparent;
font-family: inherit;
transition: all 0.22s;
}
.fy-cookie-btn.decline {
background: transparent;
color: #6b7d92;
border-color: rgba(13,40,64,0.15);
}
.fy-cookie-btn.decline:hover { color: #0d2840; border-color: rgba(13,40,64,0.3); }
.fy-cookie-btn.accept { background: #0d2840; color: #fff; }
.fy-cookie-btn.accept:hover { background: #b8965a; color: #0d2840; }
@media (max-width: 600px) {
.fy-cookie-banner { left: 12px; right: 12px; max-width: none; bottom: 12px; padding: 16px; }
}
/* ─── 06. Newsletter form ─── */
.fy-newsletter {
grid-column: 1 / -1;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 14px;
padding: 24px 24px;
margin-bottom: 36px;
}
.fy-newsletter h5 {
font-size: 11px !important;
font-weight: 700;
letter-spacing: 1.8px !important;
color: #b8965a !important;
text-transform: uppercase;
margin: 0 0 6px !important;
}
.fy-newsletter p { font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1.6; margin: 0 0 16px; max-width: 480px; }
.fy-newsletter-form {
display: flex;
gap: 8px;
max-width: 480px;
}
.fy-newsletter-form input {
flex: 1;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
padding: 12px 16px;
border-radius: 980px;
font-size: 13px;
font-family: inherit;
outline: none;
transition: border-color 0.2s;
}
.fy-newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.fy-newsletter-form input:focus { border-color: #b8965a; }
.fy-newsletter-form button {
background: #b8965a;
color: #0d2840;
border: 0;
padding: 12px 24px;
border-radius: 980px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
white-space: nowrap;
transition: all 0.22s;
}
.fy-newsletter-form button:hover { background: #fff; color: #0d2840; }
.fy-newsletter-success {
display: none;
background: rgba(37,211,102,0.12);
border: 1px solid rgba(37,211,102,0.3);
color: #5ce085;
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
}
.fy-newsletter-success.visible { display: block; }
@media (max-width: 540px) {
.fy-newsletter-form { flex-direction: column; }
.fy-newsletter-form button { width: 100%; }
}
/* ─── 14. Quote calculator widget ─── */
.qc-widget {
background: linear-gradient(135deg, #f9f7f2 0%, #f4ede0 100%);
border-radius: 16px;
padding: 36px 4vw;
max-width: 720px;
margin: 48px auto;
}
.qc-head { text-align: center; margin-bottom: 32px; }
.qc-eye { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #b8965a; text-transform: uppercase; display: block; margin-bottom: 8px; }
.qc-title { font-size: 28px; font-weight: 800; color: #0d2840; letter-spacing: -0.6px; margin: 0 0 8px; }
.qc-sub { font-size: 13px; color: #6b7d92; margin: 0; }
.qc-controls { display: flex; flex-direction: column; gap: 24px; margin-bottom: 32px; }
.qc-field label { display: block; font-size: 11px; font-weight: 700; color: #b8965a; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.qc-slider-row { display: flex; align-items: center; gap: 16px; }
.qc-slider-row input[type=range] {
flex: 1;
-webkit-appearance: none;
height: 6px;
border-radius: 3px;
background: #e4e0d6;
outline: none;
}
.qc-slider-row input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px; height: 20px;
border-radius: 50%;
background: #0d2840;
cursor: grab;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.qc-slider-row input[type=range]::-moz-range-thumb {
width: 20px; height: 20px;
border-radius: 50%;
background: #0d2840;
cursor: grab;
border: 0;
}
.qc-val { font-size: 15px; font-weight: 800; color: #0d2840; min-width: 80px; text-align: right; }
.qc-segments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qc-seg {
padding: 10px 8px;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(13,40,64,0.1);
border-radius: 980px;
font-size: 11px;
font-weight: 700;
color: #6b7d92;
cursor: pointer;
transition: all 0.2s;
font-family: inherit;
}
.qc-seg:hover { color: #0d2840; }
.qc-seg.active { background: #0d2840; color: #fff; border-color: #0d2840; }
.qc-result { text-align: center; padding: 24px; background: rgba(255,255,255,0.5); border-radius: 12px; margin-bottom: 24px; }
.qc-result-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #b8965a; text-transform: uppercase; margin-bottom: 8px; }
.qc-result-amount { font-size: 32px; font-weight: 800; color: #0d2840; letter-spacing: -1px; margin-bottom: 8px; line-height: 1; }
.qc-result-note { font-size: 11px; color: #6b7d92; line-height: 1.55; }
.qc-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.qc-btn-primary, .qc-btn-outline {
display: inline-block;
padding: 13px 24px;
border-radius: 980px;
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition: all 0.22s;
letter-spacing: 0.3px;
}
.qc-btn-primary { background: #0d2840; color: #fff; }
.qc-btn-primary:hover { background: #b8965a; color: #0d2840; }
.qc-btn-outline { background: transparent; color: #0d2840; border: 1px solid rgba(13,40,64,0.2); }
.qc-btn-outline:hover { border-color: #0d2840; }
@media (max-width: 540px) {
.qc-widget { padding: 24px 16px; margin: 24px 12px; }
.qc-title { font-size: 22px; }
.qc-result-amount { font-size: 24px; }
}
/* ─── Video tour embed ─── */
.yacht-video {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: 14px;
overflow: hidden;
background: #000;
margin-bottom: 32px;
}
.yacht-video iframe {
width: 100%; height: 100%;
border: 0;
}
/* ─── FULL-BLEED SAFETY — prevent any constraint on root containers ─── */
html, body { width: 100%; max-width: 100vw; margin: 0; }
main { display: block; width: 100%; max-width: 100%; }
section { width: 100%; max-width: 100%; }
.dx-hero, .yd-hero, .ab-hero { width: 100%; max-width: 100%; }
.dx-hero img, .yd-hero img, .ab-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ═══════════════════════════════════════════════════════════
UNIFORM SPACING — final pass for consistent visual rhythm
═══════════════════════════════════════════════════════════ */
/* All major heroes — same height, consistent */
.hero, .page-hero, .dx-hero, .yd-hero, .ab-hero, .dd-hero {
width: 100%;
min-height: 480px;
}
/* All content sections — same vertical rhythm */
.dx-body, .yd-body, .ab-analysis, .dx-regions, .dx-routes, .dx-islands, .dx-yachts,
.yd-gallery, .yd-specs, .yd-dest, .yd-highlights, .yd-similar, .yd-cta, .yd-info-box,
.ab-services, .ab-cta {
padding-top: 64px;
padding-bottom: 64px;
}
/* Override for full-bleed sections — keep their own internal padding */
.dx-hero, .yd-hero, .ab-hero, .hero, .page-hero, .dd-hero {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Consistent section H2 margin-bottom */
.dx-h2, .ab-h2, .yd-cta-h, .dx-cta-h, .ab-cta-h {
margin-bottom: 16px;
}
/* Consistent eyebrow margins */
.ab-eyebrow, .dx-eye, .h-eye, .ab-cta-eye, .yd-cta-eye, .dx-cta-eye {
margin-bottom: 12px;
}
/* All grids — consistent gap */
.yacht-grid, .dx-grid, .dx-islands-grid {
gap: 24px;
}
.dx-routes-grid {
gap: 16px;
}
/* All CTA buttons — consistent padding */
.btn-primary, .btn-enquire, .ab-cta-btn, .dx-cta-btn, .yd-cta-btn,
.qc-btn-primary, .qc-btn-outline {
padding: 12px 24px;
}
/* Card internal padding — consistent */
.yacht-card, .dx-card .meta, .ab-svc {
padding-bottom: 16px;
}
/* Footer — consistent padding */
.footer { padding: 64px 4vw 24px; }
.footer-inner { padding-bottom: 32px; gap: 32px; }
.footer-bottom { padding-top: 16px; }
/* Mobile — scale down spacing */
@media (max-width: 768px) {
.dx-body, .yd-body, .ab-analysis, .dx-regions, .dx-routes, .dx-islands, .dx-yachts,
.yd-gallery, .yd-specs, .yd-dest, .yd-highlights, .yd-similar, .yd-cta, .yd-info-box,
.ab-services, .ab-cta {
padding-top: 48px;
padding-bottom: 48px;
}
.yacht-grid, .dx-grid, .dx-islands-grid { gap: 16px; }
.footer { padding: 48px 4vw 16px; }
}
/* ═══════════════════════════════════════════════════════════
HOME PAGE only — small side gap (4vw) for visual breathing
Other pages remain full-bleed
═══════════════════════════════════════════════════════════ */
body.home section {
padding-left: 4vw;
padding-right: 4vw;
}
body.home .hero:not(.hero-l40) {
padding: 0 4vw 12vh;
}
body.home .container {
padding-left: 0;
padding-right: 0;
}
/* ═══════════════════════════════════════════════════════════
Phase 2 — Lightbox, tags, scroll reveal, transfer field
═══════════════════════════════════════════════════════════ */
/* ─── 23. Lightbox ─── */
.fy-lightbox {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.94);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
}
.fy-lightbox.visible { opacity: 1; pointer-events: auto; }
body.lb-open { overflow: hidden; }
.fy-lb-stage {
width: 96vw; height: 96vh;
display: flex; align-items: center; justify-content: center;
padding: 32px;
}
.fy-lb-img {
max-width: 100%; max-height: 100%;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 16px 64px rgba(0,0,0,0.6);
animation: lb-fade-in 0.35s ease;
}
@keyframes lb-fade-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.fy-lb-close, .fy-lb-prev, .fy-lb-next {
position: absolute;
background: rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 50%;
cursor: pointer;
font-size: 24px;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
z-index: 2;
}
.fy-lb-close:hover, .fy-lb-prev:hover, .fy-lb-next:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.08);
}
.fy-lb-close {
top: 24px; right: 24px;
width: 44px; height: 44px;
font-size: 28px;
}
.fy-lb-prev, .fy-lb-next {
top: 50%; transform: translateY(-50%);
width: 52px; height: 52px;
font-size: 32px;
line-height: 1;
}
.fy-lb-prev:hover, .fy-lb-next:hover { transform: translateY(-50%) scale(1.08); }
.fy-lb-prev { left: 24px; }
.fy-lb-next { right: 24px; }
.fy-lb-counter {
position: absolute;
bottom: 24px; left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,0.8);
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
background: rgba(0,0,0,0.4);
padding: 8px 16px;
border-radius: 980px;
z-index: 2;
}
/* Cursor pointer on gallery images */
.yd-gallery img, .yd-gallery-grid img {
cursor: zoom-in;
transition: opacity 0.2s;
}
.yd-gallery img:hover, .yd-gallery-grid img:hover { opacity: 0.92; }
@media (max-width: 700px) {
.fy-lb-close, .fy-lb-prev, .fy-lb-next { width: 40px; height: 40px; font-size: 22px; }
.fy-lb-close { top: 12px; right: 12px; }
.fy-lb-prev { left: 8px; }
.fy-lb-next { right: 8px; }
.fy-lb-stage { padding: 8px; }
}
/* ─── 28. Yacht tag badges ─── */
.yacht-tags {
display: flex; flex-wrap: wrap; gap: 5px;
margin: 8px 0 4px;
}
.yacht-tag-badge {
display: inline-block;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #b8965a;
background: rgba(184,150,90,0.1);
border: 1px solid rgba(184,150,90,0.22);
padding: 3px 8px;
border-radius: 980px;
line-height: 1.4;
}
/* ─── 34. Transfer option in enquiry modal ─── */
.ym-field-toggle {
margin-top: 4px;
padding: 12px 14px;
background: #fafbfc;
border-radius: 8px;
border: 1px solid #eef2f6;
}
.ym-checkbox-wrap {
display: flex; align-items: center; gap: 10px;
cursor: pointer;
user-select: none;
}
.ym-checkbox-wrap input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #b8965a;
cursor: pointer;
}
.ym-checkbox-wrap span {
font-size: 13px;
font-weight: 600;
color: #0d2840;
}
/* ─── 45. Scroll-triggered animations ─── */
.reveal-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-on-scroll.in-view {
opacity: 1;
transform: translateY(0);
}
.reveal-on-scroll.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-on-scroll.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-on-scroll.reveal-delay-3 { transition-delay: 0.3s; }
/* Charter mode similar yachts — same card design */
.yd-s-tag { background: var(--accent); color: var(--ink); }
.yd-s-card[href*="mode=charter"] .yd-s-tag { background: var(--bg-dark); color: #fff; }
/* ═══════════════════════════════════════════════════════════
L40 — Home hero — content absolutely positioned in lower half
═══════════════════════════════════════════════════════════ */
.hero-l40 {
position: relative !important;
min-height: 100vh !important;
display: block !important;
padding: 0 !important;
overflow: hidden !important;
}
.hero-l40 .hero-overlay {
background: linear-gradient(180deg, rgba(13,40,64,0.5) 0%, rgba(13,40,64,0.15) 30%, rgba(13,40,64,0.2) 55%, rgba(13,40,64,0.7) 100%);
}
.hero-l40 .hero-top {
position: absolute !important;
bottom: 220px;
left: 4vw;
right: 4vw;
max-width: 700px;
z-index: 2;
}
.hero-l40 .hero-top h1 {
color: #fff;
font-size: clamp(32px, 4.5vw, 64px);
letter-spacing: -0.035em;
line-height: 1.0;
font-weight: 800;
margin: var(--s4) 0;
}
.hero-l40 .hero-desc {
font-size: clamp(14px, 1vw, 16px);
color: rgba(255,255,255,0.85);
line-height: 1.55;
max-width: 560px;
margin: 0;
}
.hero-l40 .hero-tiles {
position: absolute !important;
bottom: 60px;
left: 4vw;
right: 4vw;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.hero-tile {
position: relative;
display: block;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px;
padding: 20px 24px;
color: #fff;
text-decoration: none;
transition: transform .3s var(--ease), background .3s var(--ease), border .3s var(--ease);
overflow: hidden;
min-height: 100px;
}
.hero-tile:hover {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.32);
transform: translateY(-3px);
}
.hero-tile.hero-tile-gold {
background: rgba(184,150,90,0.18);
border: 1px solid rgba(184,150,90,0.45);
}
.hero-tile.hero-tile-gold:hover {
background: rgba(184,150,90,0.28);
border-color: rgba(184,150,90,0.7);
}
.hero-tile h3 {
font-size: clamp(18px, 1.8vw, 24px);
font-weight: 800;
color: #fff;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 6px;
}
.hero-tile p {
font-size: 13px;
color: rgba(255,255,255,0.75);
line-height: 1.45;
margin: 0;
max-width: 90%;
}
.hero-tile-arr {
position: absolute;
top: 18px; right: 22px;
font-size: 18px;
color: var(--accent);
transition: transform .3s var(--ease);
}
.hero-tile:hover .hero-tile-arr {
transform: translateX(6px);
}
/* Mobile — photo on top (yacht fully visible), content below on navy */
@media (max-width: 768px) {
.hero-l40 {
padding: 0;
min-height: 0 !important;
height: auto !important;
display: flex !important;
flex-direction: column;
position: relative;
background: #0d2840;
}
/* Photo block — fixed height, top of stack, no text over it */
.hero-l40 .hero-bg {
position: relative;
inset: auto;
width: 100%;
height: calc(50vh + 3rem);
flex-shrink: 0;
background-position: 72% center;
}
/* Soft fade from photo into the navy content area */
.hero-l40 .hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
height: calc(50vh + 3rem);
background: linear-gradient(to bottom, transparent 62%, #0d2840 100%);
z-index: 2;
}
/* Text — below the photo, on navy */
.hero-l40 .hero-top {
position: relative !important;
inset: auto;
margin: 0;
padding: 14px 6vw 0;
max-width: 100%;
z-index: 3;
}
.hero-l40 .hero-eyebrow { font-size: 10px; letter-spacing: 2px; color: #b8965a; }
.hero-l40 .hero-top h1 {
font-size: clamp(25px, 7.4vw, 33px);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 9px 0 0;
color: #fff;
overflow-wrap: break-word;
}
.hero-l40 .hero-top h1 .heavy,
.hero-l40 .hero-top h1 .light { color: #fff; }
.hero-l40 .hero-desc { display: none; }
/* ── Mobile hero buttons — compact B2 style, side by side ──
Two pills next to each other; gold side-accent bar marks
the primary action (Charter). */
.hero-l40 .hero-tiles {
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 12px 3vw 22px; /* narrower side gap — tiles sit more central */
display: grid;
grid-template-columns: 1fr 1fr; /* side by side */
gap: 8px;
z-index: 3;
}
.hero-tile {
display: flex;
flex-direction: row;
align-items: center;
gap: 9px;
min-height: 0;
padding: 13px 12px;
border-radius: 13px;
}
.hero-tile h3 {
flex: 1;
font-size: 12.5px;
line-height: 1.2;
margin: 0;
letter-spacing: -0.01em;
}
.hero-tile p { display: none; } /* no subtitle on mobile — keeps it small */
/* the gold side-accent bar (left of the title) */
.hero-tile::before {
content: "";
width: 3px;
align-self: stretch;
min-height: 20px;
border-radius: 3px;
background: rgba(255,255,255,0.2);
flex-shrink: 0;
}
.hero-tile.hero-tile-gold::before { background: #b8965a; }
.hero-tile-arr {
position: static;
font-size: 13px;
flex-shrink: 0;
}
/* Tile colours — both frosted glass, equal weight (B2) */
.hero-l40 .hero-tile {
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.15);
}
.hero-l40 .hero-tile h3 { color: #fff; }
.hero-l40 .hero-tile .hero-tile-arr { color: rgba(255,255,255,0.6); }
.hero-l40 .hero-tile.hero-tile-gold {
background: rgba(255,255,255,0.09);
border: 1px solid rgba(255,255,255,0.15);
}
.hero-l40 .hero-tile.hero-tile-gold h3 { color: #fff; }
.hero-l40 .hero-tile.hero-tile-gold .hero-tile-arr { color: #d4b780; }
/* gap below the buttons is on the hero (.hero-tiles padding-bottom) */
.hero-l40 + section { padding-top: 1.05rem; }
/* Footer gap on mobile */
footer { padding-top: 1.75rem; }
}
/* ═══════════════════════════════════════════════════════════
CL19 — Editorial photo hero with 4 corner labels
For charter.html, sales.html
═══════════════════════════════════════════════════════════ */
.page-hero.page-hero-cl19 {
position: relative;
background-image: var(--hero-img);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 70vh;
padding: 140px 4vw 60px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.page-hero-cl19 .ph-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(13,40,64,0.85) 0%, rgba(13,40,64,0.3) 45%, rgba(13,40,64,0.5) 100%);
z-index: 1;
}
.page-hero-cl19 .ph-label {
position: absolute;
color: rgba(255,255,255,0.85);
font-size: 11px;
font-weight: 800;
letter-spacing: 2.5px;
text-transform: uppercase;
z-index: 3;
}
.page-hero-cl19 .ph-label-tl {
top: 210px;
left: 4vw;
border-left: 2px solid var(--accent);
padding-left: 10px;
}
.page-hero-cl19 .ph-label-tr {
top: 210px;
right: 4vw;
color: rgba(255,255,255,0.7);
}
.page-hero-cl19 .ph-label-bl {
bottom: 44px;
left: 4vw;
color: rgba(255,255,255,0.7);
font-size: 10px;
}
.page-hero-cl19 .ph-label-br {
bottom: 44px;
right: 4vw;
color: var(--accent);
font-size: 10px;
}
.page-hero-cl19 .ph-center {
position: relative;
z-index: 2;
text-align: left;
max-width: 100%;
width: 100%;
padding-left: 4vw;
}
.page-hero-cl19 .ph-mega {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(56px, 9vw, 130px);
font-weight: 300;
font-style: italic;
color: #fff;
line-height: 1.05;
letter-spacing: -0.04em;
margin: 0;
max-width: 70%;
}
.page-hero-cl19 .ph-mega b {
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-style: normal;
letter-spacing: -0.035em;
}
/* Override base .page-hero for CL19 — remove flex-end alignment */
.page-hero.page-hero-cl19 {
flex-direction: row;
justify-content: flex-start;
}
/* Mobile */
@media (max-width: 768px) {
/* Full-photo hero — the image fills the whole hero; text sits on top
with a gradient scrim so both the yacht and the text stay readable.
Editorial style: smaller title, thin gold rule, small eyebrow. */
.page-hero.page-hero-cl19 {
min-height: 64vh;
padding: 0 0 34px;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
background-image: var(--hero-img);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #0d2840;
overflow: hidden;
}
/* gradient scrim — clear at the top (yacht visible), dark at the
bottom (title readable) */
.page-hero-cl19 .ph-overlay {
display: block;
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(13,40,64,0.30) 0%,
rgba(13,40,64,0.05) 32%,
rgba(13,40,64,0.05) 50%,
rgba(13,40,64,0.62) 78%,
rgba(13,40,64,0.92) 100%);
z-index: 1;
}
/* title block — bottom-left, on the photo */
.page-hero-cl19 .ph-center {
position: relative;
z-index: 2;
padding: 0 6vw;
width: 100%;
}
.page-hero-cl19 .ph-mega {
font-size: clamp(30px, 8vw, 44px);
line-height: 1.12;
max-width: 100%;
padding-bottom: 6px;
text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
/* top corner labels overlap the logo / nav — hide on mobile */
.page-hero-cl19 .ph-label-tl,
.page-hero-cl19 .ph-label-tr {
display: none;
}
/* the eyebrow caption (ph-label-bl) — flex order puts it ABOVE the
title block; a thin gold rule sits above it */
.page-hero-cl19 .ph-label-bl {
position: static;
order: 1;
display: block;
font-size: 8.5px;
letter-spacing: 2px;
color: rgba(255,255,255,0.85);
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
padding: 0 6vw;
margin: 0 0 8px;
z-index: 2;
}
.page-hero-cl19 .ph-label-bl::before {
content: "";
display: block;
width: 30px;
height: 2px;
background: var(--accent);
margin-bottom: 12px;
}
.page-hero-cl19 .ph-center { order: 2; }
.page-hero-cl19 .ph-overlay { order: 0; }
/* the decorative accent word (ph-label-br "SAIL."/"OWN.") is purely
ornamental — hide it on mobile to avoid collisions with the title */
.page-hero-cl19 .ph-label-br {
display: none;
}
}
/* ═══════════════════════════════════════════════════════════
F28 — Segmented pill control (charter mode toggle)
═══════════════════════════════════════════════════════════ */
.charter-mode-bar {
display: flex;
justify-content: center;
padding: 16px 4vw 8px;
background: #fff;
}
.charter-mode-seg {
display: inline-flex;
background: #e8ecf0;
padding: 5px;
border-radius: 980px;
gap: 2px;
}
.cm-opt {
padding: 10px 22px;
font-size: 13px;
font-weight: 700;
color: #6b7d92;
cursor: pointer;
border-radius: 980px;
border: 0;
background: transparent;
font-family: inherit;
letter-spacing: 0.3px;
transition: all 0.25s var(--ease, cubic-bezier(.22,1,.36,1));
white-space: nowrap;
}
.cm-opt:hover {
color: #0d2840;
}
.cm-opt.on {
background: #fff;
color: #0d2840;
font-weight: 800;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
@media (max-width: 600px) {
.charter-mode-bar { padding: 12px 4vw 6px; }
.cm-opt { padding: 8px 16px; font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════
YACHT DETAIL — Updated rates/price/specs designs
═══════════════════════════════════════════════════════════ */
/* R5 pill rates (charter) — stacked vertically with B1 italic gray VAT/APA below */
.yd-rates-pill { display: flex; flex-direction: column; gap: 10px; }
.yd-rates-pill .yd-rates-h {
font-size: 11px; color: var(--accent);
font-weight: 800; letter-spacing: 2.5px;
text-transform: uppercase; margin-bottom: 14px;
padding-bottom: 10px; border-bottom: 1px solid #eef2f6;
display: block;
}
.yd-pill-card {
background: #fff;
border: 1px solid #eef2f6;
border-radius: 18px;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
transition: all 0.2s ease;
}
.yd-pill-card:hover {
border-color: var(--accent);
box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.yd-pill-card .yd-pc-left .yd-pc-name {
font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px;
}
.yd-pill-card .yd-pc-left .yd-pc-months {
font-size: 10px; color: var(--ink-muted, #6b7d92);
margin-top: 3px; font-weight: 600;
}
.yd-pill-card .yd-pc-right {
display: flex; gap: 18px;
}
.yd-pill-card .yd-pc-r {
text-align: right;
}
.yd-pill-card .yd-pc-l {
font-size: 8px; color: var(--ink-muted, #6b7d92);
font-weight: 700; letter-spacing: 0.8px;
text-transform: uppercase;
}
.yd-pill-card .yd-pc-v {
font-size: 14px; color: var(--ink);
font-weight: 800; margin-top: 2px;
white-space: nowrap;
}
.yd-pill-card .yd-pc-ex {
font-size: 8px;
color: var(--ink-muted, #6b7d92);
font-weight: 500;
font-style: italic;
margin-top: 2px;
white-space: nowrap;
}
@media (max-width: 560px) {
.yd-pill-card { flex-direction: column; align-items: flex-start; border-radius: 14px; }
.yd-pill-card .yd-pc-right { width: 100%; justify-content: space-between; }
}
/* P2 gold gradient asking price card (sales) */
.yd-asking-card {
background: linear-gradient(135deg, rgba(184,150,90,0.08) 0%, transparent 100%);
border: 1.5px solid rgba(184,150,90,0.3);
border-radius: 14px;
padding: 28px 30px;
margin-top: 14px;
}
.yd-asking-card .yd-asking-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
gap: 10px;
flex-wrap: wrap;
}
.yd-asking-card .yd-asking-l {
font-size: 10px; color: var(--accent);
font-weight: 800; letter-spacing: 1.5px;
text-transform: uppercase;
}
.yd-asking-card .yd-asking-vat {
background: rgba(40,167,69,0.12);
color: #1e7e34;
padding: 6px 14px;
border-radius: 60px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
}
.yd-asking-card .yd-asking-vat.notpaid {
background: rgba(108,125,146,0.12);
color: #6b7d92;
}
.yd-asking-card .yd-asking-v {
font-size: 38px;
color: var(--ink);
font-weight: 900;
letter-spacing: -1.2px;
line-height: 1;
}
@media (max-width: 560px) {
.yd-asking-card { padding: 22px 20px; }
.yd-asking-card .yd-asking-v { font-size: 30px; }
}
/* S2 two-column spec list (sales) */
.yd-spec-list {
background: #fff;
border: 1px solid #eef2f6;
border-radius: 12px;
padding: 8px 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
.yd-spec-list .yd-sr {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 14px 24px;
border-bottom: 1px solid #f5f7f9;
gap: 12px;
}
.yd-spec-list .yd-sr:nth-child(odd) {
border-right: 1px solid #f5f7f9;
}
.yd-spec-list .yd-sr:last-child,
.yd-spec-list .yd-sr:nth-last-child(2):nth-child(odd) {
border-bottom: 0;
}
.yd-spec-list .yd-sr .lbl {
font-size: 11px;
color: var(--ink-muted, #6b7d92);
font-weight: 600;
}
.yd-spec-list .yd-sr .val {
font-size: 12px;
color: var(--ink);
font-weight: 800;
text-align: right;
}
@media (max-width: 720px) {
.yd-spec-list { grid-template-columns: 1fr; }
.yd-spec-list .yd-sr:nth-child(odd) { border-right: 0; }
}
/* ═══════════════════════════════════════════════════════════
YACHT DETAIL v2 — Complete redesign (D1 gallery + sidebar)
═══════════════════════════════════════════════════════════ */
/* Breadcrumb */
.yd2-breadcrumb {
max-width: 1280px; margin: 0 auto; padding: 16px 4vw 4px;
display: flex; justify-content: space-between; align-items: center;
font-size: 12px;
}
.yd2-crumb { color: var(--ink-muted, #6b7d92); }
.yd2-crumb a { color: var(--ink-muted, #6b7d92); text-decoration: none; }
.yd2-crumb a:hover { color: var(--accent); }
.yd2-crumb b { color: var(--ink); font-weight: 700; }
.yd2-back { color: var(--accent); font-weight: 700; text-decoration: none; font-size: 12px; }
.yd2-back:hover { opacity: 0.8; }
/* D1 Hero Gallery */
.yd2-hero-gallery {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 2fr 1fr; gap: 6px;
height: 420px; padding: 14px 4vw 0;
}
.yd2-hero-main {
background-size: cover; background-position: center;
border-radius: 12px; cursor: pointer; transition: transform 0.3s ease;
}
.yd2-hero-main:hover { transform: scale(1.005); }
.yd2-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 6px; }
.yd2-hero-thumb {
background-size: cover; background-position: center;
border-radius: 12px; position: relative; cursor: pointer;
transition: transform 0.3s ease;
}
.yd2-hero-thumb:hover { transform: scale(1.01); }
.yd2-show-all {
position: absolute; bottom: 12px; right: 12px;
background: rgba(255,255,255,0.95);
padding: 9px 16px; border-radius: 60px;
font-size: 11px; font-weight: 800; color: var(--ink);
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
cursor: pointer;
transition: all 0.2s ease;
}
.yd2-show-all:hover { background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
@media (max-width: 768px) {
.yd2-hero-gallery { grid-template-columns: 1fr; grid-template-rows: 240px 120px; height: auto; gap: 4px; }
.yd2-hero-side { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; gap: 4px; }
}
/* Body grid */
.yd2-body {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 2fr 1fr;
gap: 50px;
padding: 36px 4vw 60px;
}
@media (max-width: 980px) {
.yd2-body { grid-template-columns: 1fr; gap: 30px; }
}
/* Main column */
.yd2-name {
font-size: 42px; font-weight: 900; color: var(--ink);
letter-spacing: -1.4px; line-height: 1; margin: 0;
}
.yd2-builder-line {
font-size: 12px; color: var(--accent);
font-weight: 800; letter-spacing: 1.8px;
text-transform: uppercase; margin-top: 8px;
}
.yd2-meta-row {
display: flex; gap: 10px; margin-top: 14px;
font-size: 12px; color: var(--ink-muted, #6b7d92);
align-items: center; flex-wrap: wrap;
}
.yd2-badge {
padding: 4px 11px; border-radius: 60px;
font-weight: 800; font-size: 10px; letter-spacing: 0.5px;
}
.yd2-badge.feat { background: rgba(184,150,90,0.12); color: var(--accent); }
.yd2-badge.vat { background: rgba(40,167,69,0.12); color: #1e7e34; }
.yd2-badge.vat-no { background: rgba(108,125,146,0.12); color: #6b7d92; }
/* Specs row */
.yd2-specs-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 16px;
margin: 28px 0;
padding: 20px 0;
border-top: 1px solid #eef2f6;
border-bottom: 1px solid #eef2f6;
}
.yd2-spec .l {
font-size: 9px; color: var(--ink-muted, #6b7d92);
letter-spacing: 0.8px; font-weight: 700;
text-transform: uppercase;
}
.yd2-spec .v {
font-size: 18px; color: var(--ink);
font-weight: 800; margin-top: 5px;
}
/* Sections */
.yd2-section { margin-top: 40px; }
.yd2-section .yd2-h {
font-size: 11px; color: var(--accent);
font-weight: 800; letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 18px; padding-bottom: 10px;
border-bottom: 1px solid #eef2f6;
}
.yd2-text { font-size: 14px; color: var(--ink-muted, #4a5a72); line-height: 1.75; }
.yd2-text p + p { margin-top: 12px; }
/* R5 Pill cards rates */
.yd2-pill-row { display: flex; flex-direction: column; gap: 12px; }
.yd2-pill-card {
background: #fff;
border: 1px solid #eef2f6;
border-radius: 18px;
padding: 20px 26px;
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
transition: all 0.2s ease;
}
.yd2-pill-card:hover {
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.yd2-pc-left .yd2-pc-name {
font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px;
}
.yd2-pc-left .yd2-pc-months {
font-size: 10px; color: var(--ink-muted, #6b7d92);
margin-top: 4px; font-weight: 600;
}
.yd2-pc-right { display: flex; gap: 22px; }
.yd2-pc-r { text-align: right; }
.yd2-pc-l {
font-size: 8px; color: var(--ink-muted, #6b7d92);
font-weight: 700; letter-spacing: 0.8px;
text-transform: uppercase;
}
.yd2-pc-v {
font-size: 15px; color: var(--ink);
font-weight: 800; margin-top: 3px;
white-space: nowrap;
}
.yd2-pc-ex {
font-size: 8px;
color: var(--ink-muted, #6b7d92);
font-weight: 500;
font-style: italic;
margin-top: 2px;
white-space: nowrap;
}
@media (max-width: 560px) {
.yd2-pill-card { flex-direction: column; align-items: flex-start; }
.yd2-pc-right { width: 100%; justify-content: space-between; }
}
/* P2 Asking price card (sales) */
.yd2-asking-card {
background: linear-gradient(135deg, rgba(184,150,90,0.08) 0%, transparent 100%);
border: 1.5px solid rgba(184,150,90,0.3);
border-radius: 14px;
padding: 28px 30px;
}
.yd2-asking-top {
display: flex; justify-content: space-between;
align-items: baseline; margin-bottom: 8px;
gap: 10px; flex-wrap: wrap;
}
.yd2-asking-l {
font-size: 10px; color: var(--accent);
font-weight: 800; letter-spacing: 1.5px;
text-transform: uppercase;
}
.yd2-asking-vat {
background: rgba(40,167,69,0.12); color: #1e7e34;
padding: 6px 14px; border-radius: 60px;
font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
}
.yd2-asking-vat.notpaid { background: rgba(108,125,146,0.12); color: #6b7d92; }
.yd2-asking-v {
font-size: 42px; color: var(--ink);
font-weight: 900; letter-spacing: -1.3px; line-height: 1;
}
@media (max-width: 560px) {
.yd2-asking-card { padding: 22px 20px; }
.yd2-asking-v { font-size: 32px; }
}
/* S2 Spec list (two-column) */
.yd2-spec-list {
background: #fff;
border: 1px solid #eef2f6;
border-radius: 12px;
padding: 4px 0;
display: grid;
grid-template-columns: 1fr 1fr;
}
.yd2-sr {
display: flex; justify-content: space-between; align-items: baseline;
padding: 14px 22px;
border-bottom: 1px solid #f5f7f9;
gap: 12px;
}
.yd2-sr:nth-child(odd) { border-right: 1px solid #f5f7f9; }
.yd2-sr .lbl { font-size: 11px; color: var(--ink-muted, #6b7d92); font-weight: 600; }
.yd2-sr .val { font-size: 12px; color: var(--ink); font-weight: 800; text-align: right; }
@media (max-width: 720px) {
.yd2-spec-list { grid-template-columns: 1fr; }
.yd2-sr:nth-child(odd) { border-right: 0; }
}
/* Cruising destinations */
.yd2-dest-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.yd2-dest {
aspect-ratio: 1; background-size: cover; background-position: center;
border-radius: 10px; position: relative; cursor: pointer; overflow: hidden;
}
.yd2-dest::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(13,40,64,0.85) 100%);
}
.yd2-dest .nm {
position: absolute; bottom: 10px; left: 12px;
color: #fff; font-size: 13px; font-weight: 800;
letter-spacing: 0.3px; z-index: 2;
}
.yd2-dest .cnt {
position: absolute; top: 10px; right: 10px;
color: rgba(255,255,255,0.9); font-size: 8px;
font-weight: 700; letter-spacing: 1px; z-index: 2;
background: rgba(13,40,64,0.5);
padding: 4px 9px; border-radius: 60px;
backdrop-filter: blur(6px);
}
/* Features grid */
.yd2-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
}
.yd2-feature {
padding: 12px 14px;
background: #fafbfc;
border-radius: 10px;
font-size: 12px; color: var(--ink);
display: flex; align-items: center; gap: 10px;
}
.yd2-feature::before {
content: '✓'; color: var(--accent); font-weight: 800;
}
/* Location card (sales) */
.yd2-location-card {
background: #fafbfc;
border-radius: 12px;
padding: 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
align-items: center;
}
.yd2-loc-left .l { font-size: 9px; color: var(--ink-muted, #6b7d92); letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }
.yd2-loc-left .v { font-size: 18px; color: var(--ink); font-weight: 800; margin-top: 6px; }
.yd2-loc-left .sub { font-size: 11px; color: var(--ink-muted, #6b7d92); margin-top: 8px; line-height: 1.7; }
.yd2-loc-map {
background: linear-gradient(135deg, #c8d4e0 0%, #a8b8c8 100%);
border-radius: 10px; min-height: 140px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
}
@media (max-width: 720px) {
.yd2-location-card { grid-template-columns: 1fr; }
}
/* Sidebar */
.yd2-sidebar {
background: #fff;
border: 1px solid #e0e4e9;
border-radius: 14px;
padding: 24px;
height: fit-content;
position: sticky;
top: 102px;
box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.yd2-sb-price-l { font-size: 10px; color: var(--ink-muted, #6b7d92); letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }
.yd2-sb-price { font-size: 30px; color: var(--ink); font-weight: 900; margin-top: 4px; letter-spacing: -0.8px; }
.yd2-sb-price-sub { font-size: 11px; color: var(--ink-muted, #6b7d92); margin-top: 6px; line-height: 1.4; }
.yd2-sb-vat-pill {
display: inline-block;
background: rgba(40,167,69,0.12); color: #1e7e34;
padding: 5px 11px; border-radius: 60px;
font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
margin-top: 10px;
}
.yd2-sb-vat-pill.notpaid { background: rgba(108,125,146,0.12); color: #6b7d92; }
.yd2-sb-ff { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.yd2-sb-field {
padding: 10px 14px;
background: #fafbfc;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.yd2-sb-field:hover { background: #f0f2f5; }
.yd2-sb-field .l { font-size: 8px; color: var(--ink-muted, #6b7d92); letter-spacing: 1px; font-weight: 700; text-transform: uppercase; }
.yd2-sb-field .v { font-size: 11px; color: var(--ink); font-weight: 700; margin-top: 3px; }
/* M3 Enquire CTA */
.yd2-enquire-cta {
display: block;
padding: 14px 0;
font-size: 16px;
color: var(--accent);
font-weight: 800;
letter-spacing: 0.3px;
text-align: center;
border-bottom: 2px solid var(--accent);
text-decoration: none;
cursor: pointer;
transition: all 0.2s;
}
.yd2-enquire-cta::after { content: ' →'; transition: transform 0.2s; display: inline-block; }
.yd2-enquire-cta:hover { color: #c9a572; }
.yd2-enquire-cta:hover::after { transform: translateX(4px); }
.yd2-brochure-link {
display: block; text-align: center;
margin-top: 12px;
font-size: 11px;
color: var(--ink-muted, #6b7d92);
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.yd2-brochure-link::before { content: '↓ '; color: var(--accent); }
.yd2-brochure-link:hover { color: var(--ink); }
/* OR divider */
.yd2-divider-or { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; }
.yd2-divider-or::before, .yd2-divider-or::after { content: ''; flex: 1; height: 1px; background: #e0e4e9; }
.yd2-divider-or span { font-size: 9px; color: var(--ink-muted, #6b7d92); font-weight: 700; letter-spacing: 1.5px; }
/* Quick actions */
.yd2-actions { display: flex; flex-direction: column; gap: 8px; }
.yd2-action {
display: flex; align-items: center; gap: 12px;
padding: 11px 14px;
background: #fafbfc;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: all 0.2s;
border: 1px solid transparent;
}
.yd2-action:hover {
background: #fff;
border-color: #e0e4e9;
transform: translateX(2px);
}
.yd2-ic {
width: 38px; height: 38px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.yd2-ic svg { width: 18px; height: 18px; }
.yd2-ic.cal { background: rgba(184,150,90,0.15); color: var(--accent); }
.yd2-ic.cal svg { fill: var(--accent); }
.yd2-ic.wa { background: #25d366; color: #fff; }
.yd2-ic.wa svg { fill: #fff; }
.yd2-ic.em { background: rgba(13,40,64,0.08); color: var(--ink); }
.yd2-ic.em svg { fill: var(--ink); }
.yd2-act-lbl .top { font-size: 11px; color: var(--ink); font-weight: 800; }
.yd2-act-lbl .bot { font-size: 9px; color: var(--ink-muted, #6b7d92); margin-top: 2px; }
/* Override old yd- styles that might conflict */
.yd-hero, .yd-sticky, .yd-body { display: none !important; }
/* ═══════════════════════════════════════════════════════════
FB · Pill-based filter bar (charter + sales)
═══════════════════════════════════════════════════════════ */
.fb-wrap {
position: relative;
max-width: 1280px;
margin: 18px auto 0;
}
/* Mobile filter trigger (D1 hairline) — hidden on desktop */
.fb-mtrigger { display: none; }
.fb-bar {
background: #fff;
border-radius: 60px;
padding: 6px 6px 6px 6px;
display: flex;
align-items: stretch;
gap: 2px;
box-shadow: 0 4px 18px rgba(0,0,0,0.05);
border: 1px solid #eef2f6;
position: relative;
}
.fb-pill {
flex: 1;
min-width: 0;
padding: 11px 16px;
border-radius: 60px;
cursor: pointer;
transition: background 0.2s;
user-select: none;
text-align: left;
}
.fb-pill:hover {
background: #fafbfc;
}
.fb-pill.active {
background: #fafbfc;
box-shadow: inset 0 0 0 1px #eef2f6;
}
.fb-pill .fb-l {
font-size: 9px;
color: #6b7d92;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
pointer-events: none;
}
.fb-pill .fb-v {
font-size: 12px;
color: #0d2840;
font-weight: 700;
margin-top: 3px;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fb-pill .fb-v.placeholder { color: #adb5bd; font-weight: 600; }
.fb-divider {
width: 1px;
background: #eef2f6;
margin: 8px 0;
flex-shrink: 0;
}
.fb-reset-btn {
width: 46px;
height: 46px;
border-radius: 50%;
background: transparent;
color: #0d2840;
border: 0;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
font-weight: 700;
margin-left: 4px;
align-self: center;
transition: all 0.2s;
flex-shrink: 0;
}
.fb-reset-btn:hover {
background: rgba(13,40,64,0.06);
}
/* Dropdowns */
.fb-dd {
position: absolute;
top: calc(100% + 10px);
background: #fff;
border-radius: 16px;
padding: 20px 22px;
box-shadow: 0 10px 36px rgba(0,0,0,0.12);
border: 1px solid #eef2f6;
z-index: 50;
min-width: 300px;
max-width: 460px;
}
.fb-dd-done { display: none; }
.fb-dd[hidden] { display: none; }
.fb-dd::before {
content: '';
position: absolute;
top: -8px;
left: var(--fb-arrow-left, 50%);
width: 14px; height: 14px;
background: #fff;
transform: rotate(45deg);
border-top: 1px solid #eef2f6;
border-left: 1px solid #eef2f6;
}
.fb-dd h4 {
font-size: 10px;
color: #b8965a;
letter-spacing: 1.5px;
font-weight: 800;
text-transform: uppercase;
margin: 0 0 14px;
}
/* Region grid */
.fb-region-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.fb-rc {
padding: 10px 14px;
border-radius: 10px;
background: #fafbfc;
font-size: 12px;
font-weight: 700;
color: #0d2840;
cursor: pointer;
text-align: center;
border: 0;
font-family: inherit;
transition: all 0.15s ease;
}
.fb-rc:hover { background: #f0f2f5; }
.fb-rc.on { background: #0d2840; color: #fff; }
/* Builder list (vertical) */
.fb-builder-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 280px;
overflow-y: auto;
}
.fb-builder-list .fb-rc {
text-align: left;
padding: 9px 14px;
}
/* Chips */
.fb-chip-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.fb-chip {
padding: 8px 16px;
border-radius: 60px;
background: #fafbfc;
font-size: 11px;
font-weight: 700;
color: #0d2840;
cursor: pointer;
border: 0;
font-family: inherit;
transition: all 0.15s ease;
}
.fb-chip:hover { background: #f0f2f5; }
.fb-chip.on { background: #b8965a; color: #0d2840; }
/* Counter */
.fb-counter {
display: flex;
align-items: center;
justify-content: space-between;
background: #fafbfc;
padding: 14px 18px;
border-radius: 10px;
}
.fb-c-lbl { font-size: 12px; color: #0d2840; font-weight: 700; }
.fb-c-controls { display: flex; align-items: center; gap: 14px; }
.fb-c-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: #0d2840;
color: #fff;
border: 0;
cursor: pointer;
font-size: 16px;
font-weight: 800;
font-family: inherit;
transition: all 0.15s ease;
}
.fb-c-btn:hover { background: #1a3a5c; }
.fb-c-num { font-size: 15px; font-weight: 800; color: #0d2840; min-width: 36px; text-align: center; }
/* Hide old filter UI */
.filters-grid.filters-primary,
.filters-grid.filters-more,
.filters-actions {
display: none !important;
}
/* Mobile responsive */
@media (max-width: 820px) {
/* D1 hairline trigger — shown on mobile */
.fb-mtrigger {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
background: transparent;
border: 1px solid #dde3ea;
border-radius: 10px;
padding: 10px 14px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.3px;
color: #5b6b77;
font-family: inherit;
cursor: pointer;
}
.fb-mtrigger svg { width: 14px; height: 14px; flex-shrink: 0; }
.fb-mtrigger-l { flex: 1; text-align: left; }
.fb-mtrigger-c { font-size: 10px; color: #aab4c0; }
/* Filter bar collapsed by default on mobile; shown when .fb-open */
.fb-wrap .fb-bar { display: none; }
.fb-wrap.fb-open .fb-bar { display: flex; margin-top: 8px; }
.fb-bar { flex-direction: column; gap: 0; border-radius: 18px; padding: 4px; }
.fb-divider { width: 100%; height: 1px; margin: 0; }
.fb-pill { width: 100%; padding: 12px 18px; }
.fb-reset-btn { width: 100%; height: 44px; border-radius: 12px; margin: 6px 0 2px; }
.fb-dd {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
min-width: 0;
max-width: 100%;
max-height: 78vh;
overflow-y: auto;
border-radius: 20px 20px 0 0;
padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px));
z-index: 250;
box-shadow: 0 -12px 44px rgba(13,40,64,0.28);
animation: fb-sheet-up .26s cubic-bezier(.22,1,.36,1);
}
.fb-dd::before { display: none; }
/* grab handle on the sheet */
.fb-dd::after {
content: '';
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 38px;
height: 4px;
background: #d9e0e6;
border-radius: 4px;
}
.fb-dd h4 { margin-top: 8px; }
.fb-dd-done {
display: block;
width: 100%;
margin-top: 18px;
padding: 14px;
background: var(--ink, #0d2840);
color: #fff;
border: 0;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: inherit;
cursor: pointer;
}
@keyframes fb-sheet-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* dark backdrop behind the sheet */
.fb-backdrop {
position: fixed;
inset: 0;
background: rgba(13,40,64,0.45);
z-index: 240;
animation: fb-fade-in .2s ease;
}
@keyframes fb-fade-in { from { opacity: 0; } to { opacity: 1; } }
}
/* ═══════════════════════════════════════════════════════════
ABOUT — Lifestyle story band (split layout)
═══════════════════════════════════════════════════════════ */
.ab-story-band {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
margin: 60px 0;
}
.ab-story-band img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ab-story-content {
padding: 60px 60px;
display: flex;
flex-direction: column;
justify-content: center;
background: #fafbfc;
}
.ab-story-eye {
font-size: 11px;
color: var(--accent);
letter-spacing: 2.5px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 14px;
}
.ab-story-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-weight: 500;
font-size: 48px;
line-height: 1.05;
color: var(--ink);
letter-spacing: -1px;
margin: 0 0 18px;
}
.ab-story-band p {
font-size: 15px;
color: var(--ink-muted, #6b7d92);
line-height: 1.8;
max-width: 480px;
margin: 0;
}
@media (max-width: 820px) {
.ab-story-band { grid-template-columns: 1fr; min-height: 0; }
.ab-story-band img { aspect-ratio: 16/10; height: auto; }
.ab-story-content { padding: 40px 28px; }
.ab-story-h { font-size: 36px; }
}
/* ═══════════════════════════════════════════════════════════
FB — Range slider (dual-thumb) inside dropdowns
═══════════════════════════════════════════════════════════ */
.fb-slider-wrap {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #eef2f6;
}
.fb-slider-lbl {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.fb-slider-lbl .lb {
font-size: 9px;
color: #6b7d92;
letter-spacing: 1.2px;
font-weight: 700;
text-transform: uppercase;
}
.fb-slider-lbl .vl {
font-size: 11px;
color: #0d2840;
font-weight: 800;
}
.fb-range {
position: relative;
height: 28px;
width: 100%;
}
.fb-range-track {
position: absolute;
left: 0; right: 0;
top: 12px;
height: 4px;
background: #eef2f6;
border-radius: 4px;
}
.fb-range-fill {
position: absolute;
top: 12px;
height: 4px;
background: #b8965a;
border-radius: 4px;
pointer-events: none;
}
.fb-range input[type="range"] {
position: absolute;
width: 100%;
height: 28px;
top: 0;
background: transparent;
-webkit-appearance: none;
appearance: none;
pointer-events: none;
outline: none;
}
.fb-range input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 2px solid #0d2840;
pointer-events: auto;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
margin-top: 0;
}
.fb-range input[type="range"]::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
border: 2px solid #0d2840;
pointer-events: auto;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* ═══════════════════════════════════════════════════════════
REGION DETAIL — Tabs layout (rg-*)
═══════════════════════════════════════════════════════════ */
.rg-section {
background: var(--surface, #eef2f6);
padding: 60px 5vw 80px;
}
.rg-inner { max-width: 1280px; margin: 0 auto; }
.rg-head {
text-align: center;
margin-bottom: 32px;
}
.rg-eye {
font-size: 11px;
color: var(--accent);
letter-spacing: 2.5px;
font-weight: 800;
text-transform: uppercase;
display: block;
margin-bottom: 10px;
}
.rg-h2 {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(36px, 5vw, 56px);
color: var(--ink);
letter-spacing: -1.5px;
line-height: 1;
margin: 0;
}
.rg-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: center;
padding: 12px;
background: #fff;
border-radius: 60px;
margin-bottom: 24px;
box-shadow: 0 4px 18px rgba(0,0,0,0.04);
max-width: 100%;
}
.rg-tab {
padding: 11px 22px;
border-radius: 60px;
font-size: 12px;
font-weight: 700;
color: var(--ink);
background: transparent;
cursor: pointer;
border: 0;
font-family: inherit;
transition: all 0.2s;
white-space: nowrap;
}
.rg-tab:hover { background: #fafbfc; }
.rg-tab.on { background: var(--ink); color: #fff; }
.rg-panels { position: relative; }
.rg-panel { display: none; }
.rg-panel.on {
display: block;
animation: rg-fade 0.3s ease-out;
}
@keyframes rg-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.rg-panel-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 32px;
background: #fff;
border-radius: 16px;
padding: 36px;
margin-bottom: 18px;
}
.rg-photo {
aspect-ratio: 4/5;
background-size: cover;
background-position: center;
border-radius: 12px;
position: relative;
display: flex;
align-items: flex-end;
padding: 16px;
overflow: hidden;
}
.rg-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(13,40,64,0.55));
border-radius: 12px;
}
.rg-photo-cap {
position: relative;
z-index: 2;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.rg-content { display: flex; flex-direction: column; gap: 18px; }
.rg-island-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 56px;
color: var(--ink);
line-height: 1.05;
letter-spacing: -1.5px;
margin: 0;
}
.rg-tags-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rg-tag {
padding: 6px 14px;
background: #fafbfc;
border: 1px solid #eef2f6;
color: var(--ink);
border-radius: 60px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.3px;
}
.rg-tag.gold {
background: var(--accent);
color: var(--ink);
border-color: var(--accent);
}
.rg-desc {
font-size: 15px;
line-height: 1.7;
color: var(--ink-muted, #4a5a72);
margin: 0;
}
.rg-seedo { border-top: 1px solid #eef2f6; padding-top: 18px; }
.rg-seedo-h {
font-size: 10px;
color: var(--accent);
letter-spacing: 1.5px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 12px;
}
.rg-seedo ul { list-style: none; padding: 0; margin: 0; }
.rg-seedo li {
padding: 10px 0;
border-bottom: 1px solid #f0f2f5;
display: grid;
grid-template-columns: 160px 1fr;
gap: 14px;
align-items: start;
}
.rg-seedo li:last-child { border-bottom: 0; }
.rg-seedo li .nm {
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.rg-seedo li .desc {
font-size: 12px;
color: var(--ink-muted, #6b7d92);
line-height: 1.5;
}
.rg-map {
margin-top: 4px;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 5/2;
background: #d5e3ed;
position: relative;
}
.rg-map iframe { display: block; }
.rg-yachts {
background: #fff;
border-radius: 16px;
padding: 24px 36px 30px;
}
.rg-yachts-loading {
text-align: center;
color: var(--ink-muted, #6b7d92);
padding: 20px;
font-size: 12px;
}
.rg-yachts-h {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
}
.rg-yachts-h .lbl {
font-size: 10px;
color: var(--accent);
letter-spacing: 1.5px;
font-weight: 800;
text-transform: uppercase;
}
.rg-yachts-h .ttl {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--ink);
}
.rg-yachts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.rg-yc {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
border-radius: 10px;
position: relative;
display: flex;
align-items: flex-end;
padding: 14px;
color: #fff;
text-decoration: none;
overflow: hidden;
}
.rg-yc::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(13,40,64,0.75));
border-radius: 10px;
}
.rg-yc:hover::after { background: linear-gradient(180deg, rgba(13,40,64,0.2) 0%, rgba(13,40,64,0.85) 100%); }
.rg-yc-info { position: relative; z-index: 2; }
.rg-yc .nm {
font-size: 14px;
font-weight: 800;
margin-bottom: 2px;
}
.rg-yc .price {
font-size: 10px;
color: rgba(255,255,255,0.85);
letter-spacing: 0.5px;
}
.rg-no-yachts {
padding: 18px;
background: var(--surface, #fafbfc);
border-radius: 8px;
font-size: 12px;
color: var(--ink-muted, #6b7d92);
text-align: center;
font-style: italic;
}
@media (max-width: 820px) {
.rg-section { padding: 40px 4vw 60px; }
.rg-tabs {
padding: 6px;
gap: 4px;
border-radius: 16px;
overflow-x: auto;
justify-content: flex-start;
flex-wrap: nowrap;
-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
mask-image: linear-gradient(to right, #000 88%, transparent 100%);
scrollbar-width: none;
}
.rg-tabs::-webkit-scrollbar { display: none; }
.rg-tab { padding: 9px 16px; font-size: 11px; flex-shrink: 0; }
.rg-panel-grid { grid-template-columns: 1fr; padding: 20px; gap: 20px; }
.rg-island-name { font-size: 40px; }
.rg-seedo li { grid-template-columns: 1fr; gap: 2px; }
.rg-yachts { padding: 18px 20px 24px; }
.rg-yachts-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════
R1 · Region cards Grid 4×2 (8 equal cards)
═══════════════════════════════════════════════════════════ */
.dx-grid-r1 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
max-width: 1280px;
margin: 0 auto;
}
.dx-r1-card {
position: relative;
aspect-ratio: 4/5;
border-radius: 12px;
overflow: hidden;
background-size: cover;
background-position: center;
text-decoration: none;
color: #fff;
display: block;
transition: transform 0.4s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow 0.4s;
cursor: pointer;
}
.dx-r1-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(13,40,64,0.85) 100%);
border-radius: 12px;
transition: opacity 0.3s;
}
.dx-r1-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.dx-r1-card:hover::after {
background: linear-gradient(180deg, rgba(13,40,64,0.15) 0%, rgba(13,40,64,0.9) 100%);
}
.dx-r1-badge {
position: absolute;
top: 14px;
right: 14px;
background: rgba(255,255,255,0.95);
color: var(--ink);
padding: 6px 12px;
border-radius: 60px;
font-size: 11px;
font-weight: 800;
z-index: 2;
backdrop-filter: blur(8px);
letter-spacing: 0.3px;
}
.dx-r1-meta {
position: absolute;
left: 18px;
bottom: 18px;
right: 18px;
z-index: 2;
}
.dx-r1-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 28px;
line-height: 1.05;
letter-spacing: -0.5px;
margin: 0 0 4px;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.dx-r1-vibe {
font-size: 11px;
color: rgba(255,255,255,0.85);
letter-spacing: 0.5px;
margin: 0;
font-weight: 600;
}
@media (max-width: 1100px) {
.dx-grid-r1 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
.dx-grid-r1 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dx-r1-name { font-size: 22px; }
.dx-r1-meta { left: 14px; bottom: 14px; right: 14px; }
}
/* ═══════════════════════════════════════════════════════════
DESTINATIONS · R1 GRID 4×2 — 8 equal region cards
═══════════════════════════════════════════════════════════ */
.dx-grid-r1 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
max-width: 1480px;
margin: 0 auto;
padding: 0 3vw;
}
.dx-r1-card {
position: relative;
background-size: cover;
background-position: center;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: inherit;
aspect-ratio: 4/5;
display: block;
transition: transform .4s var(--ease);
cursor: pointer;
}
.dx-r1-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(13,40,64,0.85) 100%);
transition: background .3s var(--ease);
border-radius: 14px;
}
.dx-r1-card:hover { transform: translateY(-4px); }
.dx-r1-card:hover::after { background: linear-gradient(180deg, rgba(13,40,64,0.1) 0%, rgba(13,40,64,0.9) 100%); }
.dx-r1-badge {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
background: rgba(255,255,255,0.94);
color: var(--ink);
padding: 5px 12px;
border-radius: 980px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
backdrop-filter: blur(8px);
}
.dx-r1-meta {
position: absolute;
left: 20px;
right: 20px;
bottom: 22px;
z-index: 2;
color: #fff;
}
.dx-r1-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: clamp(22px, 2vw, 32px);
line-height: 1.05;
letter-spacing: -0.8px;
margin: 0 0 6px;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.dx-r1-vibe {
font-size: 11px;
color: rgba(255,255,255,0.85);
margin: 0;
letter-spacing: 0.5px;
text-transform: capitalize;
}
@media (max-width: 1100px) {
.dx-grid-r1 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
.dx-grid-r1 { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 4vw; }
.dx-r1-name { font-size: 22px; }
.dx-r1-meta { left: 14px; right: 14px; bottom: 14px; }
.dx-r1-badge { top: 10px; right: 10px; font-size: 9px; padding: 4px 10px; }
}
/* ═══════════════════════════════════════════════════════════ */
/* YACHT DETAIL PAGE — NEW DESIGN (cinema hero + new layout) */
/* ═══════════════════════════════════════════════════════════ */
/* Cinema Hero */
.yd2-cinema-hero {
position: relative;
height: 460px;
background-size: cover;
background-position: center;
background-color: #1e3a5f;
display: flex;
align-items: flex-end;
padding: 36px;
cursor: pointer;
border-radius: 6px;
overflow: hidden;
margin: 0 0 0 0;
}
.yd2-cinema-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13,40,64,0.78) 0%, transparent 55%);
pointer-events: none;
}
.yd2-cinema-all {
position: absolute;
top: 16px;
right: 16px;
background: rgba(255,255,255,0.95);
color: var(--ink, #0d2840);
font-size: 10px;
font-weight: 700;
padding: 8px 14px;
border-radius: 50px;
letter-spacing: 0.5px;
cursor: pointer;
z-index: 2;
}
.yd2-cinema-name {
position: relative;
z-index: 1;
color: #fff;
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-weight: 400;
font-size: 72px;
margin: 0;
line-height: 1;
text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.yd2-cinema-text { position: relative; z-index: 1; }
.yd2-cinema-meta {
color: rgba(255,255,255,0.9);
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 500;
margin-top: 10px;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
/* Thumbnail strip below hero */
.yd2-thumb-strip {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 3px;
padding: 3px;
background: var(--ink, #0d2840);
height: 76px;
cursor: pointer;
margin: 0 0 28px 0;
border-radius: 0 0 6px 6px;
}
.yd2-thumb-mini {
background-size: cover;
background-position: center;
background-color: rgba(255,255,255,0.05);
border-radius: 2px;
}
.yd2-thumb-more {
background-color: rgba(255,255,255,0.1) !important;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Specs pills */
.yd2-specs-pills {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 28px;
}
.yd2-spec-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #fafbfc;
border-radius: 50px;
}
.yd2-spec-ic {
width: 42px;
height: 42px;
border: 1px solid var(--accent, #b8965a);
color: var(--accent, #b8965a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.yd2-spec-ic svg {
width: 22px;
height: 22px;
}
.yd2-spec-meta .l {
font-size: 9px;
color: var(--ink-muted, #6b7d92);
letter-spacing: 1px;
}
.yd2-spec-meta .v {
font-size: 18px;
font-weight: 700;
color: var(--ink, #0d2840);
margin-top: 1px;
}
/* Rates section — centered editorial cards, stacked vertically */
.yd2-rates-section { margin-bottom: 28px; }
.yd2-rates-cards {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 10px;
}
.yd2-rate-card {
border: 1px solid #e8ecf0;
border-radius: 6px;
padding: 22px;
text-align: center;
background: #fff;
}
.yd2-rate-card.high {
border-color: var(--accent, #b8965a);
background: rgba(184,150,90,0.04);
}
.yd2-rc-label {
font-size: 10px;
color: var(--accent, #b8965a);
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 4px;
font-weight: 700;
}
.yd2-rc-months {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 18px;
color: var(--ink-muted, #6b7d92);
margin-bottom: 14px;
}
.yd2-rc-prices {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid #e8ecf0;
padding-top: 14px;
}
.yd2-rc-price-cell + .yd2-rc-price-cell {
border-left: 1px solid #e8ecf0;
}
.yd2-rc-price-l {
font-size: 9px;
color: var(--ink-muted, #6b7d92);
letter-spacing: 1.5px;
}
.yd2-rc-price-v {
font-size: 28px;
font-weight: 700;
margin-top: 4px;
color: var(--ink, #0d2840);
}
.yd2-rates-foot {
font-size: 10px;
color: var(--ink-muted, #6b7d92);
font-style: italic;
text-align: center;
}
/* Contact pill */
.yd2-contact-pill {
background: var(--ink, #0d2840);
color: #fff;
border-radius: 60px;
padding: 10px 10px 10px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 32px;
}
.yd2-cp-left { display: flex; flex-direction: column; }
.yd2-cp-title {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 20px;
line-height: 1.1;
}
.yd2-cp-sub {
font-size: 10px;
color: var(--accent, #b8965a);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-top: 2px;
}
.yd2-cp-actions { display: flex; gap: 8px; align-items: center; }
.yd2-cp-wa, .yd2-cp-circle {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #fff;
text-decoration: none;
transition: transform .15s, opacity .15s;
}
.yd2-cp-wa { background: #25D366; }
.yd2-cp-wa svg { width: 22px; height: 22px; }
.yd2-cp-circle { background: rgba(255,255,255,0.10); }
.yd2-cp-circle:hover { background: rgba(255,255,255,0.18); }
.yd2-cp-circle svg { width: 20px; height: 20px; }
.yd2-cp-enquire {
background: var(--accent, #b8965a);
color: #fff;
border: 0;
padding: 12px 26px;
border-radius: 50px;
font-size: 11px;
letter-spacing: 1.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
}
.yd2-cp-enquire:hover { opacity: 0.92; }
/* About + Full Specs side-by-side */
.yd2-about-specs {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 28px;
align-items: start;
margin-bottom: 28px;
}
.yd2-fs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 11px;
}
.yd2-fs-row {
display: flex;
flex-direction: column;
padding: 4px 2px 11px;
border-bottom: 1px solid #e6eaee;
}
.yd2-fs-row span {
font-size: 9.5px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: var(--ink-muted, #6b7d92);
font-weight: 600;
}
.yd2-fs-row b {
color: var(--ink, #0d2840);
font-weight: 700;
font-size: 15.5px;
margin-top: 4px;
}
/* Grouped specifications layout */
.yd2-fsg {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 38px;
}
.yd2-fsg-lab {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
color: var(--accent, #b8965a);
padding-bottom: 7px;
border-bottom: 1px solid var(--accent, #b8965a);
margin-bottom: 8px;
}
.yd2-fsg-items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 18px;
}
.yd2-fsg-it {
padding: 4px 0 9px;
border-bottom: 1px solid #e6eaee;
}
.yd2-fsg-it .l {
font-size: 9px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--ink-muted, #6b7d92);
font-weight: 600;
}
.yd2-fsg-it .v {
font-size: 14.5px;
color: var(--ink, #0d2840);
font-weight: 700;
margin-top: 3px;
}
@media (max-width: 600px) {
.yd2-fsg { grid-template-columns: 1fr; gap: 18px; }
}
/* Daily charter block */
.yd2-daily-block {
margin-top: 30px;
background: #eef2f6;
border: 1px solid #dde4ea;
border-left: 3px solid var(--accent, #b8965a);
border-radius: 8px;
padding: 18px 22px 8px;
}
.yd2-daily-h {
font-size: 10px;
color: var(--accent, #b8965a);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 10px;
}
.yd2-daily-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 26px;
}
.yd2-daily-row {
padding: 9px 0;
display: flex;
flex-direction: column;
gap: 3px;
border-bottom: 1px solid #dbe2e8;
}
.yd2-daily-row:nth-last-child(-n+2) { border-bottom: 0; }
.yd2-dr-l {
font-size: 9px;
color: var(--accent, #b8965a);
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 700;
}
.yd2-dr-v {
font-size: 13px;
color: var(--ink, #0d2840);
font-weight: 700;
line-height: 1.4;
word-wrap: break-word;
}
/* ────────── UNIFORM 2/3 — 1/3 BOX ROWS ────────── */
.yd2-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 14px;
margin-bottom: 14px;
min-height: 280px;
}
.yd2-row .yd2-box {
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.yd2-box {
background: #fff;
border: 1px solid var(--border, #e8ecf0);
border-radius: 6px;
padding: 22px;
}
.yd2-box-gold {
background: rgba(184,150,90,0.05);
border-color: var(--accent, #b8965a);
}
.yd2-box-dark {
background: var(--ink, #0d2840);
color: #fff;
border-color: var(--ink, #0d2840);
}
.yd2-box-hdr {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 20px;
color: var(--ink, #0d2840);
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border, #e8ecf0);
font-weight: 400;
}
.yd2-box-gold .yd2-box-hdr { color: var(--accent, #b8965a); }
.yd2-box-dark .yd2-box-hdr { color: #fff; border-bottom-color: rgba(255,255,255,0.18); }
.yd2-box-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
/* Italic pull-quote side card */
.yd2-quote {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 18px;
color: var(--ink, #0d2840);
line-height: 1.4;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.yd2-quote .by {
display: block;
font-size: 9px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ink-muted, #6b7d92);
font-style: normal;
margin-top: 14px;
font-weight: 600;
}
/* "At a glance" side card */
.yd2-glance {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.yd2-glance .lab {
font-size: 9px;
color: var(--accent, #b8965a);
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
}
.yd2-glance .ttl {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 20px;
line-height: 1.25;
margin-top: 8px;
color: var(--ink, #0d2840);
}
.yd2-glance .desc {
font-size: 12px;
color: var(--ink-muted, #6b7d92);
font-style: italic;
margin-top: 10px;
line-height: 1.6;
}
/* Contact card inside dark box */
.yd2-box-dark .yd2-contact-block {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.yd2-box-dark .yd2-contact-block .lab {
font-size: 9px;
color: var(--accent, #b8965a);
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 700;
}
.yd2-box-dark .yd2-contact-block .ttl {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 22px;
line-height: 1.2;
margin-top: 8px;
color: #fff;
}
.yd2-box-dark .yd2-contact-block .desc {
font-size: 12px;
color: rgba(255,255,255,0.65);
font-style: italic;
margin-top: 10px;
line-height: 1.5;
}
.yd2-box-dark .yd2-contact-block .icons {
display: flex;
gap: 7px;
margin-top: 14px;
}
.yd2-box-dark .yd2-contact-block .icons a {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
transition: background .2s;
}
.yd2-box-dark .yd2-contact-block .icons a:hover { background: rgba(255,255,255,0.22); }
.yd2-box-dark .yd2-contact-block .icons a.wa { background: #25D366; }
.yd2-box-dark .yd2-contact-block .icons a.wa:hover { background: #1ebd5a; }
.yd2-box-dark .yd2-contact-block button {
margin-top: 16px;
width: 100%;
background: var(--accent, #b8965a);
color: #fff;
border: 0;
padding: 12px;
border-radius: 50px;
font-size: 10px;
letter-spacing: 1.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
transition: background .2s;
}
.yd2-box-dark .yd2-contact-block button:hover { background: #a08049; }
/* Make Rates fit nicely inside box */
.yd2-box .yd2-rates-cards { gap: 8px; margin: 0; flex: 1; }
.yd2-box .yd2-rate-card { padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.yd2-box .yd2-rates-foot { margin-top: 12px; font-size: 10px; color: var(--ink-muted, #6b7d92); font-style: italic; text-align: center; }
/* Features grid inside box */
.yd2-box .yd2-features { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: start; }
.yd2-box .yd2-feature { font-size: 11px; padding: 9px 11px; background: var(--surface, #fafbfc); border-radius: 4px; color: var(--ink-text, #4a5a72); border: 0; }
/* Specs grid inside box */
.yd2-box .yd2-fs-grid { border: 0; margin: 0; flex: 1; }
.yd2-box .yd2-fs-row { padding: 7px 10px; font-size: 11px; }
/* Itin grid inside box */
.yd2-box .yd2-routes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; flex: 1; }
.yd2-box .yd2-route-card { padding: 12px; min-height: 0; }
@media (max-width: 768px) {
.yd2-row {
grid-template-columns: 1fr;
min-height: auto;
}
.yd2-box { padding: 18px; }
}
/* ══════════════════════ NEW COHESIVE DESIGN ══════════════════════ */
/* Photo gallery section in yacht detail */
.yd-photo-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.yd-photo-tile {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
border-radius: 6px;
cursor: pointer;
transition: transform .25s, box-shadow .25s;
position: relative;
overflow: hidden;
}
.yd-photo-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.15); }
.yd-gallery-all {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 16px;
color: var(--ink, #0d2840);
cursor: pointer;
text-decoration: none;
}
.yd-gallery-all span { color: var(--accent, #b8965a); font-weight: 300; margin-left: 4px; }
@media (max-width: 768px) {
.yd-photo-gallery { grid-template-columns: 1fr 1fr; gap: 6px; }
}
/* Hero inline photo navigation */
.yd-hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
border: 0;
color: var(--ink, #0d2840);
font-size: 26px;
font-weight: 300;
line-height: 1;
cursor: pointer;
z-index: 5;
transition: all .2s;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.yd-hero-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.yd-hero-nav.prev { left: 18px; }
.yd-hero-nav.next { right: 18px; }
.yd-hero-counter {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(13,40,64,0.6);
color: #fff;
padding: 6px 14px;
border-radius: 50px;
font-size: 12px;
letter-spacing: 1.5px;
font-weight: 600;
z-index: 5;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
@media (max-width: 768px) {
.yd-hero-nav { width: 40px; height: 40px; font-size: 22px; }
.yd-hero-nav.prev { left: 10px; }
.yd-hero-nav.next { right: 10px; }
}
/* Discreet back link */
.yd-back-tiny {
display: inline-block;
font-size: 12px;
color: var(--ink-muted, #6b7d92);
letter-spacing: 1px;
margin: 14px 0 18px;
text-decoration: none;
transition: color .2s;
font-weight: 500;
}
.yd-back-tiny:hover { color: var(--accent, #b8965a); }
/* Photo gallery grid in yacht detail page */
.yd-gallery-content { padding: 18px; }
.yd-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.yd-gallery-tile {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
background-color: #eef2f6;
border-radius: 4px;
cursor: pointer;
transition: transform .25s, box-shadow .25s;
}
.yd-gallery-tile:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
.yd-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Hero spacing fix — proper gap between yacht name and meta */
.yd2-cinema-name { margin: 0 0 18px 0 !important; }
.yd2-cinema-meta { margin-top: 0 !important; }
/* CONTACT BAR — photo background with overlay, italic chevron */
/* Get in touch — M card with divided (Λ2) links */
.yd-cb {
position: relative;
background: #eef2f6;
border: 1px solid #dde4ea;
border-radius: 6px;
padding: 34px 38px;
margin: 8px 0 36px;
box-shadow: 0 14px 38px -16px rgba(13,40,64,0.22);
}
.yd-cb::before {
content: '';
position: absolute;
top: 0; left: 38px;
width: 46px; height: 3px;
background: #b8965a;
}
.yd-cb-eyebrow {
font-size: 10px;
letter-spacing: 3.5px;
text-transform: uppercase;
font-weight: 700;
color: #a36410;
}
.yd-cb-title {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 30px;
line-height: 1.16;
color: #0d2840;
margin-top: 11px;
}
.yd-cb-title i { color: #a36410; font-style: italic; }
.yd-cb-sub {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 16px;
color: #6b7d92;
margin-top: 5px;
}
.yd-cb-rule { height: 1px; background: #dce3e9; margin: 20px 0; }
.yd-cb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.yd-cb-head-txt { flex: 1; min-width: 0; }
.yd-cb-price { flex-shrink: 0; padding-top: 4px; min-width: 185px; }
.yd-cb-prow { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 5px; }
.yd-cb-prow + .yd-cb-prow { padding-bottom: 0; }
.yd-cb-plabel { font-size: 9px; letter-spacing: 1.5px; color: #a36410; font-weight: 700; text-transform: uppercase; }
.yd-cb-pval { font-family: var(--font, 'Manrope', sans-serif); font-size: 17px; font-weight: 700; color: #0d2840; letter-spacing: -0.3px; white-space: nowrap; }
.yd-cb-pnote { border-top: 1px solid #dce3e9; margin-top: 8px; padding-top: 7px; font-size: 10px; color: #8a98a6; font-style: italic; text-align: right; }
.yd-cb-psingle { text-align: right; }
.yd-cb-psingle .yd-cb-plabel { display: block; margin-bottom: 2px; }
.yd-cb-psingle .yd-cb-pval { font-size: 22px; letter-spacing: -0.5px; }
@media (max-width: 600px) {
.yd-cb-head { flex-direction: column; gap: 14px; }
.yd-cb-price { min-width: 0; width: 100%; }
.yd-cb-psingle { text-align: left; }
.yd-cb-pnote { text-align: center; }
}
.yd-cb-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
}
.yd-cb-links { display: flex; align-items: center; flex-wrap: wrap; }
.yd-cb-links a {
display: inline-flex;
align-items: center;
gap: 8px;
color: #0d2840;
font-weight: 600;
font-size: 13px;
padding: 4px 16px;
text-decoration: none;
transition: color .18s;
}
.yd-cb-links a:first-child { padding-left: 0; }
.yd-cb-links a + a { border-left: 1px solid #cbd5dd; }
.yd-cb-links a:hover { color: #a36410; }
.yd-cb-links a svg { width: 14px; height: 14px; flex-shrink: 0; }
.yd-cb-enq {
display: inline-flex;
align-items: center;
gap: 7px;
background: #0d2840;
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 12px 22px;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
transition: background .18s;
white-space: nowrap;
}
.yd-cb-enq:hover { background: #143352; }
.yd-cb-enq svg { width: 13px; height: 13px; transition: transform .2s; }
.yd-cb-enq:hover svg { transform: translateX(3px); }
/* Section grouping */
.yd-section { margin-bottom: 48px; }
/* Soft grey/white rhythm so sections breathe — full-bleed tint, content stays centered */
.yd-section { position: relative; padding: 56px 3vw; margin-bottom: 0; }
.yd-section:nth-of-type(even)::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: #f4f7f9;
z-index: 0;
}
.yd-section > * { position: relative; z-index: 1; }
.yd-section-eyebrow {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--accent, #b8965a);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 8px;
text-align: center;
}
.yd-section-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 32px;
color: var(--ink, #0d2840);
margin-bottom: 10px;
font-weight: 400;
line-height: 1;
text-align: center;
}
.yd-section-rule {
width: 40px;
height: 1px;
background: var(--accent, #b8965a);
margin: 0 auto 24px;
}
.yd-section-content {
background: #fff;
border: 1px solid var(--border, #e8ecf0);
border-radius: 8px;
padding: 28px;
}
/* About narrative centered */
.yd-about-text {
font-size: 14px;
line-height: 1.85;
color: var(--ink-text, #4a5a72);
max-width: 680px;
margin: 0 auto;
text-align: center;
}
/* On Board chip cloud */
.yd-ob-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.yd-ob-chips span {
background: var(--surface, #fafbfc);
border: 1px solid var(--border, #e8ecf0);
color: var(--ink-text, #4a5a72);
padding: 9px 16px;
border-radius: 50px;
font-size: 12px;
}
.yd-ob-chips span b { color: var(--accent, #b8965a); margin-right: 6px; font-weight: 400; }
/* Sub-section headers within pricing */
.yd-subsec-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 20px;
color: var(--ink, #0d2840);
margin-bottom: 14px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border, #e8ecf0);
font-weight: 400;
}
.yd-subsec-h:not(:first-child) { margin-top: 30px; }
/* Rates cards */
.yd-rates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yd-rate-c {
border: 1px solid var(--border, #e8ecf0);
border-radius: 6px;
padding: 20px;
text-align: center;
}
.yd-rate-c.hi { border-color: var(--accent, #b8965a); background: rgba(184,150,90,0.04); }
.yd-rate-c .yd-rc-l { font-size: 10px; color: var(--accent, #b8965a); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.yd-rate-c .yd-rc-mos { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 13px; color: var(--ink-muted, #6b7d92); margin: 4px 0 14px; }
.yd-rate-c .yd-rc-pr { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border, #e8ecf0); padding-top: 12px; }
.yd-rate-c .yd-rc-pl { font-size: 9px; color: var(--ink-muted, #6b7d92); letter-spacing: 1px; }
.yd-rate-c .yd-rc-pv { font-size: 20px; font-weight: 700; margin-top: 4px; }
.yd-rates-foot { font-size: 11px; color: var(--ink-muted, #6b7d92); font-style: italic; text-align: center; margin-top: 12px; }
/* Included | Additional grid */
.yd-includes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yd-inc-c {
padding: 20px;
border-radius: 6px;
font-size: 12px;
line-height: 2;
}
.yd-inc-c.green { background: rgba(29,138,79,0.05); border: 1px solid #1d8a4f; }
.yd-inc-c.gold { background: rgba(184,150,90,0.05); border: 1px solid var(--accent, #b8965a); }
.yd-inc-c .yd-inc-lab {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 12px;
}
.yd-inc-c.green .yd-inc-lab { color: #1d8a4f; }
.yd-inc-c.gold .yd-inc-lab { color: var(--accent, #b8965a); }
.yd-inc-c .yd-inc-fuel { color: var(--ink, #0d2840); font-weight: 700; }
/* APA / VAT explanation inline */
.yd-apa-explain, .yd-vat-explain {
padding: 20px 24px;
background: rgba(184,150,90,0.06);
border-left: 3px solid var(--accent, #b8965a);
border-radius: 0 6px 6px 0;
}
.yd-apa-explain .lab, .yd-vat-explain .lab {
font-size: 10px;
letter-spacing: 1.5px;
color: var(--accent, #b8965a);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 8px;
}
.yd-apa-explain .h, .yd-vat-explain .h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 20px;
color: var(--ink, #0d2840);
margin-bottom: 10px;
}
.yd-apa-explain .t, .yd-vat-explain .t { font-size: 13px; color: var(--ink-text, #4a5a72); line-height: 1.7; }
.yd-apa-explain .refund {
display: inline-block;
margin-top: 10px;
padding: 5px 12px;
background: rgba(29,138,79,0.08);
color: #1d8a4f;
border-radius: 50px;
font-size: 11px;
font-weight: 600;
}
.yd-vat-explain .badge {
display: inline-block;
margin-top: 10px;
padding: 5px 12px;
background: rgba(184,150,90,0.15);
color: var(--accent, #b8965a);
border-radius: 50px;
font-size: 11px;
font-weight: 600;
}
/* CALCULATOR */
.yd-calc {
background: var(--surface, #fafbfc);
border: 1px solid var(--border, #e8ecf0);
border-radius: 6px;
padding: 24px;
}
.yd-calc-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.yd-calc-inputs .input-l {
font-size: 10px;
color: var(--ink-muted, #6b7d92);
letter-spacing: 1.5px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 6px;
}
.yd-calc-inputs select {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--border, #e8ecf0);
border-radius: 50px;
font-size: 13px;
font-weight: 600;
background: #fff;
color: var(--ink, #0d2840);
font-family: inherit;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath d='M1 1l5 5 5-5' stroke='%23b8965a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 34px;
transition: border-color .15s;
}
.yd-calc-inputs select:hover, .yd-calc-inputs select:focus { border-color: var(--accent, #b8965a); outline: none; }
.yd-calc-vat-note {
background: rgba(184,150,90,0.05);
border-left: 3px solid var(--accent, #b8965a);
border-radius: 0 4px 4px 0;
padding: 10px 14px;
margin-bottom: 16px;
font-size: 11px;
color: var(--ink-text, #4a5a72);
line-height: 1.55;
}
.yd-calc-vat-note b { color: var(--accent, #b8965a); }
.yd-calc-result {
background: #fff;
border: 1px solid var(--border, #e8ecf0);
border-radius: 6px;
padding: 18px;
}
.yd-calc-line {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 13px;
border-bottom: 1px solid #f0f3f6;
}
.yd-calc-line span { color: var(--ink-muted, #6b7d92); }
.yd-calc-line b { color: var(--ink, #0d2840); }
.yd-calc-total {
border-top: 2px solid var(--ink, #0d2840);
margin-top: 8px;
padding-top: 14px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.yd-calc-total .l { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 20px; }
.yd-calc-total .v { font-size: 26px; font-weight: 700; color: var(--accent, #b8965a); letter-spacing: -0.5px; }
.yd-calc-foot {
text-align: center;
font-size: 11px;
color: var(--ink-muted, #6b7d92);
font-style: italic;
margin-top: 12px;
}
.yd-calc-enq {
text-align: center;
margin-top: 16px;
}
.yd-calc-enq a {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 22px;
color: var(--ink, #0d2840);
cursor: pointer;
font-weight: 400;
text-decoration: none;
}
.yd-calc-enq a span { color: var(--accent, #b8965a); font-weight: 300; margin-left: 4px; }
/* SALES: Asking price block */
.yd-asking-price {
background: var(--ink, #0d2840);
color: #fff;
border-radius: 8px;
padding: 36px 28px;
text-align: center;
}
.yd-asking-price .eyebrow {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--accent, #b8965a);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 8px;
}
.yd-asking-price .price { font-size: 54px; font-weight: 700; letter-spacing: -1px; color: #fff; margin-bottom: 6px; line-height: 1; }
.yd-asking-price .chips { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.yd-asking-price .chip { padding: 7px 14px; border-radius: 50px; font-size: 10px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; }
.yd-asking-price .chip.gold { background: var(--accent, #b8965a); color: #fff; }
.yd-asking-price .chip.white { background: rgba(255,255,255,0.12); color: #fff; }
.yd-asking-price .note { margin-top: 18px; font-size: 11px; color: rgba(255,255,255,0.7); font-style: italic; }
.yd-asking-price .make-offer {
margin-top: 20px;
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 24px;
color: #fff;
cursor: pointer;
display: inline-block;
text-decoration: none;
}
.yd-asking-price .make-offer span { color: var(--accent, #b8965a); font-weight: 300; margin-left: 4px; }
/* Documents row (sales) */
.yd-docs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 14px; }
.yd-doc-c {
background: var(--surface, #fafbfc);
border: 1px solid var(--border, #e8ecf0);
border-radius: 6px;
padding: 18px;
text-align: center;
cursor: pointer;
transition: all .2s;
}
.yd-doc-c:hover { border-color: var(--accent, #b8965a); transform: translateY(-2px); }
.yd-doc-c .ic {
width: 42px;
height: 42px;
border: 1px solid var(--accent, #b8965a);
color: var(--accent, #b8965a);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
}
.yd-doc-c .t { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 15px; color: var(--ink, #0d2840); margin-bottom: 4px; }
.yd-doc-c .d { font-size: 10px; color: var(--ink-muted, #6b7d92); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
/* FAQ */
.yd-faq-apa, .yd-faq-vat {
border: 1px solid var(--accent, #b8965a);
background: rgba(184,150,90,0.04);
border-radius: 6px;
padding: 20px 24px;
margin-bottom: 10px;
}
.yd-faq-apa .q, .yd-faq-vat .q {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 18px;
color: var(--ink, #0d2840);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.yd-faq-apa .q span, .yd-faq-vat .q span { color: var(--accent, #b8965a); font-size: 22px; font-weight: 300; }
.yd-faq-apa .a, .yd-faq-vat .a { font-size: 13px; color: var(--ink-text, #4a5a72); line-height: 1.7; margin-top: 12px; }
.yd-faq-list {
border: 1px solid var(--border, #e8ecf0);
border-radius: 6px;
overflow: hidden;
}
.yd-faq-list > div {
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--border, #e8ecf0);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.yd-faq-list > div:hover { background: var(--surface, #fafbfc); }
.yd-faq-list > div:last-child { border-bottom: 0; }
.yd-faq-list > div span.p { color: var(--accent, #b8965a); font-size: 22px; font-weight: 300; }
.yd-faq-list > div { flex-wrap: wrap; }
.yd-faq-list > div.open span.p { transform: rotate(45deg); }
.yd-faq-list > div .yd-faq-ans { display: none; flex-basis: 100%; font-weight: 400; font-size: 12px; color: var(--ink-text, #4a5a72); padding-top: 8px; font-style: italic; }
.yd-faq-list > div.open .yd-faq-ans { display: block; }
.yd-faq-apa, .yd-faq-vat { cursor: pointer; }
.yd-faq-apa .a, .yd-faq-vat .a { display: block; }
/* Bottom soft CTA */
.yd-cta-bottom {
text-align: center;
padding: 50px 20px 20px;
}
.yd-cta-bottom .rule { width: 40px; height: 1px; background: var(--accent, #b8965a); margin: 0 auto 22px; }
.yd-cta-bottom .h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 30px;
color: var(--ink, #0d2840);
margin-bottom: 20px;
font-weight: 400;
}
.yd-cta-bottom .enq-final {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 26px;
color: var(--ink, #0d2840);
cursor: pointer;
font-weight: 400;
text-decoration: none;
}
.yd-cta-bottom .enq-final span { color: var(--accent, #b8965a); font-weight: 300; margin-left: 4px; }
.yd-cta-bottom .lnks { font-size: 12px; color: var(--ink-muted, #6b7d92); margin-top: 18px; font-style: italic; }
.yd-cta-bottom .lnks a { color: var(--accent, #b8965a); font-weight: 600; cursor: pointer; text-decoration: none; }
/* Itineraries grid (full width section) */
.yd-itin-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
@media (max-width: 768px) {
.yd-cb { padding: 26px 22px; }
.yd-cb::before { left: 22px; }
.yd-cb-foot { flex-direction: column; align-items: stretch; }
.yd-cb-enq { justify-content: center; }
.yd-cb-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: 100%; }
.yd-cb-links a { flex-direction: column; gap: 4px; border: 1px solid #dce3e9; border-radius: 9px; padding: 10px 1px; justify-content: center; text-align: center; font-size: 9px; letter-spacing: .2px; }
.yd-cb-links a:first-child, .yd-cb-links a + a { padding-left: 1px; border-left: 1px solid #dce3e9; }
.yd-cb-links a svg { width: 18px; height: 18px; }
.yd-section-content { padding: 18px; }
.yd-section-h { font-size: 26px; }
.yd-rates, .yd-includes-grid, .yd-docs, .yd-itin-grid, .yd-calc-inputs { grid-template-columns: 1fr; }
}
/* SERVICES SECTION — Numbered editorial */
.yd-svc { padding: 0 14px; }
.yd-svc-item {
padding: 24px 0;
border-bottom: 1px solid #f0f3f6;
display: grid;
grid-template-columns: 50px 1fr auto;
gap: 20px;
align-items: center;
cursor: pointer;
transition: background .15s;
}
.yd-svc-item:hover { background: var(--surface, #fafbfc); }
.yd-svc-item:last-child { border-bottom: 0; }
.yd-svc-item .num {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 28px;
color: var(--accent, #b8965a);
font-weight: 400;
line-height: 1;
}
.yd-svc-item .body .t {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 20px;
color: var(--ink, #0d2840);
margin-bottom: 5px;
}
.yd-svc-item .body .d {
font-size: 12px;
color: var(--ink-muted, #6b7d92);
line-height: 1.6;
}
.yd-svc-item .a {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 15px;
color: var(--ink, #0d2840);
white-space: nowrap;
text-decoration: none;
}
.yd-svc-item .a span {
color: var(--accent, #b8965a);
font-weight: 300;
margin-left: 4px;
}
@media (max-width: 768px) {
.yd-svc-item { grid-template-columns: 40px 1fr; }
.yd-svc-item .a { grid-column: 2; padding-top: 6px; }
}
/* ════════════════════ SITE SEARCH ════════════════════ */
.nav-search-btn {
background: transparent;
border: 0;
padding: 8px;
cursor: pointer;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
margin-right: 6px;
}
.nav-search-btn:hover { opacity: 0.7; }
.site-search-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 80px 20px 20px; }
.ssm-backdrop { position: absolute; inset: 0; background: rgba(13,40,64,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ssm-card {
position: relative;
background: #fff;
border-radius: 12px;
max-width: 600px;
width: 100%;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,0.25);
max-height: 70vh;
display: flex;
flex-direction: column;
}
.ssm-head {
display: flex;
align-items: center;
padding: 14px 18px;
border-bottom: 1px solid var(--line, #e8ecf0);
gap: 10px;
}
.ssm-head input {
flex: 1;
border: 0;
background: transparent;
font-size: 18px;
padding: 8px 4px;
font-family: inherit;
color: var(--ink, #0d2840);
outline: none;
}
.ssm-close {
width: 36px;
height: 36px;
border: 0;
background: rgba(13,40,64,0.06);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink, #0d2840);
}
.ssm-close:hover { background: rgba(13,40,64,0.12); }
.ssm-results {
overflow-y: auto;
flex: 1;
padding: 8px;
}
.ssm-hint {
padding: 24px;
text-align: center;
font-size: 13px;
color: var(--ink-muted, #6b7d92);
font-style: italic;
}
.ssm-group {
padding: 14px 20px 6px;
font-size: 9px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 700;
color: var(--accent, #b8965a);
border-bottom: 1px solid var(--line, #e8ecf0);
margin-bottom: 4px;
}
.ssm-result {
display: flex;
align-items: center;
padding: 14px 18px;
text-decoration: none;
color: inherit;
border-radius: 6px;
transition: background .15s;
gap: 14px;
}
.ssm-result:hover { background: var(--bg-surface, #f5f7f9); }
.ssm-r-name {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 18px;
color: var(--ink, #0d2840);
flex: 1;
}
.ssm-r-meta {
font-size: 11px;
letter-spacing: 1.5px;
color: var(--ink-muted, #6b7d92);
text-transform: uppercase;
font-weight: 600;
}
.ssm-r-arrow {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 20px;
color: var(--accent, #b8965a);
}
@media (max-width: 700px) {
.site-search-modal { padding: 50px 12px 12px; }
.ssm-r-meta { display: none; }
.ssm-head input { font-size: 16px; }
}
/* ════════════════════ END SITE SEARCH ════════════════════ */
/* ════════════════════ HOME TESTIMONIALS ════════════════════ */
.home-testimonials-section {
padding: 12px 24px 88px;
background: var(--bg-surface, #f5f7f9);
}
.home-testimonials-section .container {
max-width: 1100px;
margin: 0 auto;
}
.t-eyebrow {
font-size: 11px;
letter-spacing: 3px;
color: var(--accent, #b8965a);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 14px;
display: block;
text-align: center;
}
.t-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: clamp(32px, 5vw, 52px);
font-weight: 400;
line-height: 1.05;
text-align: center;
color: var(--ink, #0d2840);
margin: 0 0 18px;
}
.t-rule {
width: 40px;
height: 1px;
background: var(--accent, #b8965a);
margin: 0 auto 48px;
}
.t-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.t-card {
background: #fff;
border: 1px solid var(--line, #e8ecf0);
border-radius: 6px;
padding: 28px 26px;
transition: transform .25s, box-shadow .25s;
}
.t-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(13,40,64,0.08); }
.t-stars {
color: var(--accent, #b8965a);
font-size: 13px;
letter-spacing: 2px;
margin-bottom: 14px;
}
.t-quote {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 17px;
line-height: 1.55;
color: var(--ink, #0d2840);
margin: 0 0 18px;
}
.t-author {
font-size: 10px;
letter-spacing: 2px;
color: var(--ink-muted, #6b7d92);
text-transform: uppercase;
font-weight: 700;
}
@media (max-width: 900px) {
.t-grid { grid-template-columns: 1fr; gap: 14px; }
.home-testimonials-section { padding: 8px 16px 52px; }
.t-card { padding: 22px 20px; }
}
/* ════════════════════ END HOME TESTIMONIALS ════════════════════ */
.m-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
/* Thin gold accent line across the top — a small brand touch */
border-top: 2px solid var(--accent, #b8965a);
box-shadow: 0 -3px 16px rgba(13,40,64,0.07);
display: none;
z-index: 90;
padding: 5px 8px 11px;
padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 700px) {
.m-bottom-bar { display: flex; }
/* Add padding to body so content doesn't hide behind sticky bar */
body { padding-bottom: 76px; }
/* But NOT on yacht detail (it has its own float bar) */
body.yacht-detail-page { padding-bottom: 0; }
body.yacht-detail-page .m-bottom-bar { display: none !important; }
}
/* Design 3 — clean icon row: three equal cells, each icon in its own
colour (Call navy, WhatsApp green, Enquire gold), labels stay navy. */
.m-bottom-bar a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 9px 0;
text-decoration: none;
transition: opacity .15s;
}
.m-bottom-bar a:active { opacity: 0.55; }
.m-bottom-bar a span {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--ink, #0d2840);
}
.m-bottom-bar svg { width: 22px; height: 22px; flex-shrink: 0; }
.m-bottom-bar .m-call { color: var(--ink, #0d2840); }
.m-bottom-bar .m-wa { color: #25D366; }
.m-bottom-bar .m-enq { color: var(--accent, #b8965a); }
.m-bottom-bar .m-wa svg { width: 23px; height: 23px; }
/* Hide on yacht detail (already has its own float bar) */
body.yacht-detail-page .m-bottom-bar,
body.yacht-detail-page .whatsapp-fab { display: none !important; }
/* ════════════════════ MOBILE NAV CLOSE BUTTON (B3) ════════════════════ */
.mobile-nav-close {
position: absolute;
top: 22px;
right: 22px;
width: 44px;
height: 44px;
background: rgba(13,40,64,0.06);
border: 0;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--ink, #0d2840);
font-size: 20px;
line-height: 1;
z-index: 260;
}
.mobile-nav-close:hover, .mobile-nav-close:active { background: rgba(13,40,64,0.12); }
.mobile-nav-close svg { width: 18px; height: 18px; }
/* ════════════════════ BURGER ICON SVG STYLE (B6) ════════════════════ */
.menu-toggle {
display: none;
background: transparent;
border: 0;
padding: 10px;
cursor: pointer;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
}
.menu-toggle svg { width: 22px; height: 22px; color: inherit; display: block; }
/* ════════════════════ END MOBILE BOTTOM BAR ════════════════════ */
.footer-newsletter {
background: rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 36px 0;
}
.footer-newsletter .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.fnews-content {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
}
.fnews-eyebrow {
font-size: 10px;
letter-spacing: 2.5px;
color: var(--accent, #b8965a);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 6px;
}
.fnews-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 24px;
color: rgba(255,255,255,0.92);
font-weight: 400;
margin: 0;
line-height: 1.2;
}
.fnews-form {
display: flex;
gap: 8px;
align-items: stretch;
min-width: 360px;
}
.fnews-form input[type=email] {
flex: 1;
padding: 12px 18px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.05);
color: #fff;
font-family: inherit;
font-size: 13px;
border-radius: 50px;
outline: none;
transition: border-color .15s;
}
.fnews-form input[type=email]:focus { border-color: var(--accent, #b8965a); background: rgba(255,255,255,0.08); }
.fnews-form input[type=email]::placeholder { color: rgba(255,255,255,0.5); }
.fnews-form button {
background: var(--accent, #b8965a);
color: #fff;
border: 0;
padding: 12px 22px;
border-radius: 50px;
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 16px;
cursor: pointer;
transition: opacity .15s;
white-space: nowrap;
}
.fnews-form button:hover { opacity: 0.9; }
.fnews-form button span { font-weight: 300; }
@media (max-width: 768px) {
.fnews-content { grid-template-columns: 1fr; }
.fnews-form { min-width: 0; flex-direction: column; }
.fnews-form button { width: 100%; }
}
/* ════════════════════ END FOOTER NEWSLETTER ════════════════════ */
/* CTA Band — soft (no navy bg, gold rule, single button) */
.yd2-cta-band {
margin: 40px 0 0;
padding: 40px 24px;
text-align: center;
border-radius: 6px;
}
.yd2-cta-rule {
height: 1px;
background: var(--accent, #b8965a);
width: 40px;
margin: 0 auto 20px;
}
.yd2-cta-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 30px;
color: var(--ink, #0d2840);
margin-bottom: 18px;
font-weight: 400;
line-height: 1;
}
.yd2-cta-primary {
background: var(--ink, #0d2840);
color: #fff;
padding: 14px 32px;
border: 0;
border-radius: 50px;
font-size: 11px;
letter-spacing: 1.5px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: background .2s;
}
.yd2-cta-primary:hover { background: #1e3a5f; }
.yd2-cta-links {
font-size: 11px;
color: var(--ink-muted, #6b7d92);
margin-top: 18px;
font-style: italic;
}
.yd2-cta-links a {
color: var(--accent, #b8965a);
cursor: pointer;
text-decoration: none;
font-weight: 600;
}
.yd2-cta-links a:hover { text-decoration: underline; }
/* Similar yachts */
.yd2-similar {
margin-top: 36px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding: 0 24px 60px;
}
.yd2-similar .yd2-h {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: clamp(28px, 4vw, 38px);
font-weight: 400;
text-align: center;
margin-bottom: 8px;
}
.yd2-similar-sub {
font-size: 11px;
color: var(--ink-muted, #6b7d92);
font-style: italic;
text-align: center;
margin: 0 0 28px 0;
letter-spacing: 0.5px;
}
.yd2-similar-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
align-items: start;
}
@media (max-width: 1024px) {
.yd2-similar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.yd2-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yd2-similar { padding: 0 16px 40px; }
}
@media (max-width: 420px) {
.yd2-similar-grid { grid-template-columns: 1fr; }
}
.yd2-similar-card {
background: #fff;
border: 1px solid #e8ecf0;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
display: block;
min-width: 0;
}
.yd2-similar-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(13,40,64,0.10);
}
.yd2-similar-img {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: #eef2f6;
}
.yd2-similar-body { padding: 14px 16px; }
.yd2-similar-name {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 18px;
color: var(--ink, #0d2840);
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.yd2-similar-meta {
font-size: 11px;
color: var(--ink-muted, #6b7d92);
margin-top: 4px;
letter-spacing: 0.3px;
}
.yd2-similar-price {
font-size: 12px;
color: var(--accent, #b8965a);
font-weight: 700;
margin-top: 8px;
letter-spacing: 0.5px;
}
/* Mobile responsive */
@media (max-width: 820px) {
.yd2-cinema-hero { height: 320px; padding: 20px; }
.yd2-cinema-name { font-size: 44px; }
.yd2-cinema-meta { font-size: 11px; letter-spacing: 2px; }
.yd2-thumb-strip { height: 56px; grid-template-columns: repeat(5, 1fr); }
.yd2-thumb-strip .yd2-thumb-mini:last-child { display: none; }
.yd2-specs-pills { grid-template-columns: repeat(2, 1fr); }
.yd2-contact-pill { flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; }
.yd2-cp-left { text-align: center; }
.yd2-cp-actions { flex-wrap: wrap; justify-content: center; }
.yd2-about-specs { grid-template-columns: 1fr; }
.yd2-fs-grid { grid-template-columns: 1fr 1fr; }
.yd2-daily-grid { grid-template-columns: 1fr; }
.yd2-daily-row:nth-child(even) { border-left: 0; }
.yd2-similar-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Suggested itineraries (1d · 5d · 7d) — replaces cruising areas */
.yd2-routes-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.yd2-route-card {
position: relative;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: #1e3a5f;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
display: block;
color: #fff;
transition: transform .25s ease;
min-height: 220px;
}
.yd2-route-card:hover {
transform: translateY(-2px);
}
.yd2-route-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13,40,64,0.92) 0%, rgba(13,40,64,0.1) 55%, rgba(13,40,64,0.35) 100%);
}
.yd2-route-dur {
position: absolute;
top: 14px;
left: 14px;
background: rgba(255,255,255,0.95);
color: var(--ink, #0d2840);
font-size: 10px;
font-weight: 700;
padding: 5px 12px;
border-radius: 50px;
letter-spacing: 1.5px;
text-transform: uppercase;
z-index: 2;
}
.yd2-route-meta {
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
z-index: 2;
}
.yd2-route-name {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 22px;
line-height: 1.1;
}
.yd2-route-stops {
font-size: 11px;
opacity: 0.85;
margin-top: 6px;
line-height: 1.4;
}
.yd2-route-from {
font-size: 9px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent, #b8965a);
margin-top: 8px;
font-weight: 700;
}
/* ─── PRICE BANNER (V3 · compact one-line · sales) ─── */
.yd2-price-banner {
background: var(--ink, #0d2840);
color: #fff;
border-radius: 8px;
padding: 18px 28px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 28px;
}
.yd2-pb-price-block {
display: flex;
align-items: baseline;
gap: 14px;
}
.yd2-pb-l {
font-size: 10px;
color: var(--accent, #b8965a);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 700;
}
.yd2-pb-v {
font-size: 34px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.5px;
}
.yd2-pb-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.yd2-pb-chip {
font-size: 10px;
padding: 5px 10px;
border-radius: 50px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.yd2-pb-chip.gold {
background: rgba(184,150,90,0.25);
color: var(--accent, #b8965a);
}
.yd2-pb-chip.white {
background: rgba(255,255,255,0.12);
color: #fff;
}
.yd2-pb-cta {
background: var(--accent, #b8965a);
color: #fff;
border: 0;
padding: 11px 20px;
border-radius: 50px;
font-size: 10px;
letter-spacing: 1.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
}
@media (max-width: 820px) {
.yd2-price-banner {
flex-direction: column;
align-items: stretch;
text-align: center;
padding: 18px 20px;
gap: 12px;
}
.yd2-pb-price-block { justify-content: center; flex-direction: column; gap: 4px; align-items: center; }
.yd2-pb-chips { justify-content: center; }
.yd2-routes-grid { grid-template-columns: 1fr; }
.yd2-route-card { aspect-ratio: 16 / 10; }
}
/* Rates LEFT + Contact RIGHT paired row */
.yd2-rates-contact-row {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 16px;
margin-bottom: 28px;
align-items: stretch;
}
.yd2-rates-contact-row > .yd2-rates-section { margin-bottom: 0; }
.yd2-rates-contact-row .yd2-rates-cards { grid-template-columns: 1fr 1fr; }
.yd2-contact-card {
background: var(--ink, #0d2840);
color: #fff;
border-radius: 8px;
padding: 22px 22px;
display: flex;
flex-direction: column;
justify-content: center;
}
.yd2-contact-card .yd2-h {
color: #fff;
border-bottom-color: rgba(255,255,255,0.15);
}
.yd2-cc-sub {
font-size: 10px;
color: var(--accent, #b8965a);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 16px;
}
.yd2-cc-actions {
display: flex;
gap: 8px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.yd2-cc-enquire {
background: var(--accent, #b8965a);
color: #fff;
border: 0;
padding: 14px 20px;
border-radius: 50px;
font-size: 11px;
letter-spacing: 1.5px;
font-weight: 700;
cursor: pointer;
font-family: inherit;
width: 100%;
}
.yd2-cc-enquire:hover { opacity: 0.92; }
@media (max-width: 820px) {
.yd2-rates-contact-row { grid-template-columns: 1fr; }
}
/* VAT chip beside price — desktop inline, mobile stacked under price */
.yc-pricevat{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media(max-width:768px){.yc-pricevat{flex-direction:column;align-items:flex-start;gap:5px}}
/* ════════════════════════════════════════════════════════════
ENHANCEMENTS v20260526 — final approved features
════════════════════════════════════════════════════════════ */
/* ── 2. Back-to-top button inside the nav ── */
.nav-top-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: #0d2840;
color: #fff;
opacity: 0;
transform: scale(0.7);
pointer-events: none;
transition: opacity .25s, transform .25s, background .15s, color .15s;
}
.nav-top-btn.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.nav-top-btn:hover { background: #1e4a73; }
.nav-top-btn svg { width: 17px; height: 17px; }
/* When nav is transparent (not scrolled) the button flips to white-on-clear */
.nav:not(.scrolled) .nav-top-btn { background: #fff; color: #0d2840; }
.nav:not(.scrolled) .nav-top-btn:hover { background: rgba(255,255,255,0.85); }
@media (prefers-reduced-motion: reduce) {
.nav-top-btn { transition: opacity .25s; }
}
/* Mobile: bare arrow icon, no circle — matches the hamburger beside it. */
@media (max-width: 700px) {
.nav-top-btn {
width: auto;
height: auto;
background: transparent !important;
padding: 4px;
margin-right: 6px;
color: var(--ink, #0d2840);
}
.nav:not(.scrolled) .nav-top-btn { color: #fff; }
.nav-top-btn svg { width: 21px; height: 21px; }
}
/* ── 5. Card hover zoom polish ── */
.dest-card, .service-card { overflow: hidden; }
.dest-card img,
.service-card-photo {
transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.dest-card:hover img { transform: scale(1.07); }
.service-card:hover .service-card-photo { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.dest-card:hover img,
.service-card:hover .service-card-photo { transform: none; }
}
/* Smooth anchor scrolling + offset for the fixed nav */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* ── 6. Yacht finder quiz ── */
.fyq-section {
position: relative;
background: var(--bg-dark, #0d2840);
overflow: hidden;
padding: 80px 20px;
}
.fyq-layout {
position: relative;
max-width: 940px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 48px;
}
.fyq-intro { flex: 1; min-width: 0; }
.fyq-intro-eyebrow {
display: block;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent, #b8965a);
margin-bottom: 14px;
}
.fyq-intro-title {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-weight: 500;
font-size: 36px;
line-height: 1.12;
color: #fff;
margin: 0 0 16px;
}
.fyq-intro-text {
font-size: 15px;
line-height: 1.7;
color: rgba(255,255,255,0.72);
margin: 0;
max-width: 360px;
}
.fyq-section .fyq-wrap { flex: 0 0 420px; }
@media (max-width: 820px) {
.fyq-layout { flex-direction: column; gap: 28px; align-items: stretch; }
.fyq-intro { text-align: center; }
.fyq-intro-text { max-width: 460px; margin: 0 auto; }
.fyq-section .fyq-wrap { flex: 1 1 auto; max-width: 500px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
.fyq-section { padding: 56px 16px; }
.fyq-intro-title { font-size: 28px; }
}
.fyq-bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('/yacht-photos/quiz-bg.webp');
background-size: cover;
background-position: center;
opacity: 0.32;
}
.fyq-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(13,40,64,0.78) 0%, rgba(13,40,64,0.9) 100%);
}
.fyq-layout { z-index: 1; }
.fyq-wrap {
position: relative;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 16px;
padding: 32px 32px 26px;
}
.fyq-eyebrow {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--accent, #b8965a);
margin-bottom: 13px;
}
.fyq-progress {
height: 4px;
background: rgba(255,255,255,0.14);
border-radius: 4px;
overflow: hidden;
margin-bottom: 22px;
}
.fyq-progress-bar {
height: 100%;
width: 0;
background: var(--accent, #b8965a);
transition: width .4s ease;
}
.fyq-question {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-weight: 500;
font-size: 26px;
line-height: 1.15;
color: #fff;
margin: 0 0 20px;
}
.fyq-opts { display: grid; gap: 9px; }
.fyq-opt {
text-align: left;
width: 100%;
padding: 16px 18px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 12px;
color: #fff;
font-size: 15px;
font-family: var(--font);
cursor: pointer;
transition: background .2s, border-color .2s, transform .12s;
}
.fyq-opt:hover {
background: rgba(184,150,90,0.18);
border-color: var(--accent, #b8965a);
}
.fyq-opt:active { transform: scale(0.99); }
.fyq-foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 18px;
}
.fyq-back {
background: none;
border: 0;
cursor: pointer;
color: rgba(255,255,255,0.55);
font-size: 13px;
font-family: var(--font);
padding: 6px 2px;
transition: color .2s;
}
.fyq-back:hover { color: #fff; }
.fyq-step {
font-size: 12px;
color: rgba(255,255,255,0.45);
letter-spacing: 1px;
}
.fyq-result { text-align: center; padding: 6px 0; }
.fyq-result-title {
font-family: var(--serif, 'Cormorant Garamond', serif);
font-style: italic;
font-size: 26px;
color: #fff;
margin: 0 0 10px;
}
.fyq-result-desc {
font-size: 14px;
color: rgba(255,255,255,0.72);
line-height: 1.65;
margin: 0 0 22px;
}
.fyq-result-desc strong { color: #fff; font-weight: 600; }
.fyq-cta {
display: inline-block;
background: var(--accent, #b8965a);
color: var(--bg-dark, #0d2840);
font-weight: 600;
font-size: 14px;
font-family: var(--font);
padding: 14px 32px;
border-radius: 980px;
text-decoration: none;
border: 0;
cursor: pointer;
transition: background .2s, transform .12s;
}
.fyq-cta:hover { background: var(--accent-light, #d4b780); }
.fyq-cta:active { transform: scale(0.98); }
.fyq-restart {
display: block;
margin: 12px auto 0;
background: none;
border: 0;
cursor: pointer;
color: rgba(255,255,255,0.45);
font-size: 12px;
text-decoration: underline;
font-family: var(--font);
}
.fyq-restart:hover { color: rgba(255,255,255,0.75); }
.fyq-fade { animation: fyq-fade .35s ease; }
@keyframes fyq-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
.fyq-wrap { padding: 26px 22px 22px; }
.fyq-question, .fyq-result-title { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) { .fyq-fade { animation: none; } }
/* ── Search entry inside the mobile menu ── */
.mobile-search-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
background: var(--bg-surface, #eef2f6);
border: 0;
border-radius: 12px;
padding: 15px 18px;
margin-bottom: 14px;
cursor: pointer;
color: var(--ink-muted, #6b7d92);
font-family: var(--font);
font-size: 15px;
text-align: left;
}
.mobile-search-btn svg {
width: 19px;
height: 19px;
flex-shrink: 0;
color: var(--ink, #0d2840);
}
.mobile-search-btn:active { background: var(--cream-dark, #f4ede0); }
/* ── Featured grids: 3 cards on desktop, 4 on mobile ──
loadFeaturedCharter / loadFeaturedSales fetch 4 yachts. On desktop
the grid is 3 columns, so the 4th card is hidden to keep a clean
single row. On mobile (2 columns) all 4 show as a tidy 2×2.
!important is needed because one card variant has an inline display. */
#featured-charter > .yacht-card:nth-child(4),
#featured-sales > .yacht-card:nth-child(4) {
display: none !important;
}
@media (max-width: 700px) {
#featured-charter > .yacht-card:nth-child(4),
#featured-sales > .yacht-card:nth-child(4) {
display: block !important;
}
}
/* ─────────── CONTACT PAGE (split layout) ─────────── */
.ct-split { display: flex; min-height: calc(100vh - 0px); margin-top: 0; }
.ct-left {
flex: 1;
background-image: linear-gradient(160deg, rgba(13,40,64,0.22), rgba(10,31,48,0.42)), url('/yacht-photos/yacht-cosmos-sunset.webp');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
padding: 90px 5vw;
color: #fff;
}
.ct-left-inner {
max-width: 440px;
background: rgba(13,40,64,0.34);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 14px;
padding: 32px 30px;
box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.ct-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--accent, #cbb079); }
.ct-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; margin: 14px 0 26px; color: #fff; font-weight: 400; }
.ct-lines { display: flex; flex-direction: column; }
.ct-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,0.18); text-decoration: none; color: #fff; transition: padding-left .25s var(--ease, ease); }
.ct-line:last-of-type { border-bottom: 1px solid rgba(255,255,255,0.18); }
.ct-line:not(.ct-line-static):hover { padding-left: 6px; }
.ct-line-label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--accent, #cbb079); white-space: nowrap; }
.ct-line-val { font-family: var(--serif, 'Cormorant Garamond', serif); font-size: 17px; text-align: right; }
.ct-avail { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 14px; color: rgba(255,255,255,0.82); margin-top: 18px; }
.ct-social { display: flex; gap: 16px; margin-top: 18px; }
.ct-social a { color: var(--accent, #cbb079); transition: opacity .2s; }
.ct-social a:hover { opacity: 0.65; }
.ct-social svg { width: 19px; height: 19px; }
.ct-right { flex: 1; background: #fff; padding: 90px 5vw; display: flex; flex-direction: column; justify-content: center; max-width: 560px; }
.ct-form-eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--accent-dark, #a36410); }
.ct-form-title { font-family: var(--serif, 'Cormorant Garamond', serif); font-style: italic; font-size: 30px; color: var(--ink, #0d2840); margin: 8px 0 26px; font-weight: 400; }
.ct-field { margin-bottom: 16px; }
.ct-field label { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--ink-muted, #6b7d92); margin-bottom: 6px; }
.ct-field .ct-opt { text-transform: none; font-weight: 400; color: #aab4c0; letter-spacing: 0; }
.ct-field input, .ct-field select, .ct-field textarea {
width: 100%; box-sizing: border-box;
border: 1px solid var(--line, #e0e6ec); border-radius: 8px;
padding: 12px 14px; font-size: 14px; font-family: var(--font, 'Manrope', sans-serif);
color: var(--ink, #0d2840); background: #fff; transition: border-color .2s;
}
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--accent, #b8965a); }
.ct-field textarea { resize: vertical; }
.ct-submit {
width: 100%; background: var(--ink, #0d2840); color: #fff; border: 0; border-radius: 8px;
padding: 15px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
font-family: var(--font, 'Manrope', sans-serif); cursor: pointer; transition: background .25s;
}
.ct-submit:hover { background: #16334b; }
.ct-submit:disabled { opacity: 0.6; cursor: default; }
.ct-form-note { margin-top: 14px; font-size: 13px; padding: 12px 14px; border-radius: 8px; }
.ct-form-note.ok { background: #e6f4ec; color: #1f7a4d; }
.ct-form-note.err { background: #fbeaea; color: #c0392b; }
@media (max-width: 860px) {
.ct-split { flex-direction: column; }
.ct-left, .ct-right { padding: 64px 7vw; max-width: 100%; }
.ct-left { min-height: 60vh; }
}