Pages Hard
Travel — Luxury / Bespoke Travel Landing
A bespoke private-travel landing for the fictional house Méridien Atlas, dressed in ivory, bronze, and deep green with an elegant Cormorant Garamond display face. A cinematic gradient hero with layered SVG ridges and a rising sun gives way to slow, unhurried scroll reveals, animated house figures, four signature destinations with elegant hover and save-to-atlas hearts, an interactive concierge readout, a hand-composed atelier process, and a discreet validated enquiry form with toast confirmations.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--ivory: #f6f1e7;
--ivory-2: #efe7d8;
--ink: #1c2118;
--green: #1f3326;
--green-deep: #142019;
--green-soft: #2f4a37;
--bronze: #a9824f;
--bronze-lo: #c9a877;
--bronze-hi: #e4c896;
--muted: #6f6a5c;
--line: rgba(28, 33, 24, 0.14);
--line-gold: rgba(169, 130, 79, 0.42);
--shadow: 0 30px 70px -38px rgba(20, 32, 25, 0.55);
--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--gut: clamp(20px, 5vw, 84px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ivory);
color: var(--ink);
font-family: var(--sans);
font-weight: 300;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: var(--serif);
font-weight: 500;
line-height: 1.08;
margin: 0;
letter-spacing: 0.01em;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--bronze-lo); color: var(--green-deep); }
.skip-link {
position: absolute;
left: 50%;
top: -60px;
transform: translateX(-50%);
background: var(--green-deep);
color: var(--ivory);
padding: 10px 18px;
border-radius: 999px;
z-index: 200;
transition: top 0.25s var(--ease);
}
.skip-link:focus-visible { top: 12px; }
:focus-visible {
outline: 2px solid var(--bronze);
outline-offset: 3px;
border-radius: 2px;
}
/* ============ TOPBAR ============ */
.topbar {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), color 0.5s var(--ease);
color: var(--ivory);
}
.topbar.is-scrolled {
background: rgba(20, 32, 25, 0.92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: 0 1px 0 var(--line-gold);
}
.topbar__inner {
max-width: 1240px;
margin: 0 auto;
padding: 20px var(--gut);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { color: var(--bronze-hi); display: grid; place-items: center; }
.brand__words { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
font-family: var(--serif);
font-size: 1.32rem;
font-weight: 600;
letter-spacing: 0.06em;
}
.brand__sub {
font-size: 0.6rem;
letter-spacing: 0.34em;
text-transform: uppercase;
opacity: 0.72;
margin-top: 4px;
}
.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
position: relative;
padding: 6px 0;
opacity: 0.92;
transition: opacity 0.3s var(--ease);
}
.nav a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%;
height: 1px;
background: var(--bronze-hi);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }
.nav__cta {
border: 1px solid var(--line-gold);
border-radius: 999px;
padding: 9px 22px !important;
color: var(--bronze-hi);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--bronze-hi); color: var(--green-deep); }
.navtoggle {
display: none;
flex-direction: column;
gap: 6px;
background: none;
border: 0;
cursor: pointer;
padding: 8px;
}
.navtoggle span {
width: 26px; height: 1.5px;
background: currentColor;
transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.navtoggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.mobilenav {
background: rgba(20, 32, 25, 0.97);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
padding: 8px var(--gut) 22px;
border-top: 1px solid var(--line-gold);
}
.mobilenav a {
padding: 14px 0;
font-size: 0.95rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ivory);
border-bottom: 1px solid rgba(228, 200, 150, 0.16);
}
.mobilenav a:last-child { border-bottom: 0; color: var(--bronze-hi); }
/* ============ BUTTONS ============ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 15px 30px;
border-radius: 999px;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.btn--gold {
background: linear-gradient(135deg, var(--bronze-hi), var(--bronze));
color: var(--green-deep);
box-shadow: 0 14px 34px -16px rgba(169, 130, 79, 0.8);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(169, 130, 79, 0.9); }
.btn--ghost {
border-color: var(--line-gold);
color: var(--ivory);
}
.btn--ghost:hover { background: rgba(246, 241, 231, 0.08); transform: translateY(-2px); }
.btn--full { width: 100%; }
/* ============ HERO ============ */
.hero {
position: relative;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 140px var(--gut) clamp(56px, 9vh, 110px);
overflow: hidden;
color: var(--ivory);
}
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__sky {
position: absolute; inset: 0;
background:
radial-gradient(120% 90% at 72% 18%, rgba(228, 200, 150, 0.5), transparent 46%),
linear-gradient(180deg, #25402f 0%, #1c3225 36%, #16291f 64%, #101c16 100%);
}
.hero__sun {
position: absolute;
top: 16%; left: 70%;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, rgba(244, 226, 188, 0.92), rgba(228, 200, 150, 0.32) 46%, transparent 70%);
filter: blur(2px);
animation: sunRise 2.4s var(--ease) both;
}
@keyframes sunRise {
from { transform: translateY(60px) scale(0.85); opacity: 0; }
to { transform: none; opacity: 1; }
}
.hero__ridge { position: absolute; inset: auto 0 0 0; width: 100%; height: 56%; }
.ridge--far { fill: #20382a; opacity: 0.6; }
.ridge--mid { fill: #1a2e22; opacity: 0.78; }
.ridge--near { fill: #122019; }
.hero__grain {
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 4px 4px;
mix-blend-mode: overlay;
opacity: 0.5;
}
.hero__content { position: relative; z-index: 2; max-width: 760px; }
.eyebrow {
font-size: 0.72rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--bronze-hi);
margin: 0 0 26px;
display: inline-flex;
align-items: center;
gap: 14px;
}
.eyebrow::before {
content: "";
width: 38px; height: 1px;
background: var(--bronze-hi);
}
.hero h1 {
font-size: clamp(2.6rem, 7vw, 5.4rem);
font-weight: 500;
letter-spacing: 0;
}
.hero__lede {
max-width: 540px;
margin: 28px 0 36px;
font-size: clamp(1rem, 1.5vw, 1.18rem);
color: rgba(246, 241, 231, 0.82);
font-weight: 300;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero__stats {
list-style: none;
margin: 56px 0 0;
padding: 38px 0 0;
border-top: 1px solid var(--line-gold);
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 6vw, 72px);
}
.hero__stats strong {
display: block;
font-family: var(--serif);
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
font-weight: 500;
color: var(--bronze-hi);
line-height: 1;
}
.hero__stats span {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(246, 241, 231, 0.66);
margin-top: 10px;
display: block;
}
.hero__scroll {
position: absolute;
right: var(--gut);
bottom: 36px;
z-index: 2;
font-size: 0.62rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(246, 241, 231, 0.62);
writing-mode: vertical-rl;
}
.hero__scroll::after {
content: "";
display: block;
width: 1px; height: 46px;
margin: 14px auto 0;
background: linear-gradient(var(--bronze-hi), transparent);
animation: scrollPulse 2.2s var(--ease) infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}
/* ============ MARQUEE ============ */
.marquee {
background: var(--green-deep);
color: var(--bronze-hi);
overflow: hidden;
border-top: 1px solid var(--line-gold);
border-bottom: 1px solid var(--line-gold);
padding: 16px 0;
}
.marquee__track {
display: flex;
align-items: center;
gap: 28px;
width: max-content;
animation: drift 34s linear infinite;
font-family: var(--serif);
font-size: 1.25rem;
letter-spacing: 0.14em;
font-style: italic;
}
.marquee .dot { opacity: 0.5; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes drift { to { transform: translateX(-50%); } }
/* ============ SECTIONS ============ */
.section { padding: clamp(72px, 11vh, 140px) var(--gut); max-width: 1240px; margin: 0 auto; }
.section__head { max-width: 620px; margin: 0 auto clamp(48px, 7vh, 84px); text-align: center; }
.kicker {
font-size: 0.7rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--bronze);
margin: 0 0 18px;
}
.kicker--gold { color: var(--bronze); }
.section__head h2, .section h2 {
font-size: clamp(2rem, 4.4vw, 3.3rem);
color: var(--green);
}
.section__intro { color: var(--muted); margin: 22px 0 0; font-size: 1.05rem; }
/* ============ DESTINATIONS ============ */
.dgrid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 3vw, 38px);
}
.dcard {
position: relative;
background: var(--ivory-2);
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.55s var(--ease);
}
.dcard:hover, .dcard:focus-visible {
transform: translateY(-6px);
box-shadow: var(--shadow);
border-color: var(--line-gold);
}
.dcard__media {
position: relative;
height: 280px;
overflow: hidden;
}
.dcard__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(16, 28, 22, 0.5));
}
.dcard:hover .dcard__media,
.dcard:focus-visible .dcard__media { transform: scale(1.05); }
.dcard__media { transition: transform 0.9s var(--ease); }
.dcard__media--kyoto {
background:
radial-gradient(60% 40% at 30% 30%, rgba(244, 226, 188, 0.4), transparent 60%),
linear-gradient(170deg, #c98a8f 0%, #9d6e7e 38%, #5a4f6e 70%, #2c3050 100%);
}
.dcard__media--amalfi {
background:
radial-gradient(50% 40% at 78% 22%, rgba(244, 226, 188, 0.55), transparent 60%),
linear-gradient(165deg, #6fb6c8 0%, #3d92b0 42%, #2a6e8f 70%, #20506e 100%);
}
.dcard__media--patagonia {
background:
radial-gradient(60% 50% at 24% 26%, rgba(228, 200, 150, 0.35), transparent 60%),
linear-gradient(175deg, #d6a36a 0%, #9a7c63 36%, #4f5e58 66%, #243433 100%);
}
.dcard__media--marrakech {
background:
radial-gradient(55% 45% at 70% 24%, rgba(244, 226, 188, 0.55), transparent 60%),
linear-gradient(170deg, #e6a35c 0%, #c97a44 40%, #9a4f3a 70%, #5e2f2c 100%);
}
.dcard__season {
position: absolute;
top: 16px; left: 16px;
z-index: 2;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ivory);
background: rgba(16, 28, 22, 0.4);
border: 1px solid rgba(246, 241, 231, 0.32);
padding: 6px 13px;
border-radius: 999px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.dcard__save {
position: absolute;
top: 14px; right: 14px;
z-index: 3;
width: 42px; height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(246, 241, 231, 0.4);
background: rgba(16, 28, 22, 0.42);
color: var(--ivory);
cursor: pointer;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.dcard__save svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.dcard__save:hover { transform: scale(1.1); }
.dcard__save[aria-pressed="true"] {
background: var(--bronze-hi);
color: var(--green-deep);
border-color: var(--bronze-hi);
}
.dcard__save[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; }
.dcard__save.pulse { animation: heartPulse 0.45s var(--ease); }
@keyframes heartPulse { 40% { transform: scale(1.3); } }
.dcard__body { padding: 26px clamp(20px, 3vw, 32px) 30px; }
.dcard__region {
font-size: 0.66rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--bronze);
margin: 0 0 12px;
}
.dcard__body h3 {
font-size: clamp(1.4rem, 2.3vw, 1.9rem);
color: var(--green);
margin-bottom: 12px;
}
.dcard__body > p:not(.dcard__meta):not(.dcard__region) { color: var(--muted); font-size: 0.98rem; }
.dcard__meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
margin: 22px 0 0;
padding-top: 18px;
border-top: 1px solid var(--line-gold);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.dcard__from { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--green); }
/* ============ CONCIERGE ============ */
.concierge { background: var(--green-deep); color: var(--ivory); max-width: none; }
.concierge__inner {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(36px, 6vw, 80px);
align-items: center;
}
.concierge h2 { color: var(--ivory); }
.concierge__copy > p { color: rgba(246, 241, 231, 0.78); margin: 22px 0 30px; font-size: 1.06rem; max-width: 520px; }
.conlist { list-style: none; margin: 0; padding: 0; }
.conlist li {
display: flex;
gap: 20px;
align-items: baseline;
padding: 20px 6px;
border-top: 1px solid rgba(228, 200, 150, 0.18);
cursor: pointer;
transition: padding-left 0.4s var(--ease), background 0.4s var(--ease);
}
.conlist li:hover, .conlist li.is-active { padding-left: 16px; background: rgba(228, 200, 150, 0.06); }
.conlist li:last-child { border-bottom: 1px solid rgba(228, 200, 150, 0.18); }
.conlist__num { font-family: var(--serif); font-size: 1.1rem; color: var(--bronze-hi); min-width: 28px; }
.conlist__txt { font-size: 1rem; color: rgba(246, 241, 231, 0.82); }
.conlist__txt strong { color: var(--ivory); font-weight: 500; }
.conlist__readout {
margin: 24px 0 0;
font-family: var(--serif);
font-style: italic;
font-size: 1.18rem;
color: var(--bronze-hi);
min-height: 1.6em;
transition: opacity 0.3s var(--ease);
}
.conlist__readout.fade { opacity: 0; }
.ccard {
background: linear-gradient(160deg, #1a2c21, #14201a);
border: 1px solid var(--line-gold);
border-radius: 6px;
padding: clamp(28px, 4vw, 42px);
box-shadow: var(--shadow);
}
.ccard__avatar {
width: 64px; height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: var(--serif);
font-size: 1.4rem;
color: var(--green-deep);
background: linear-gradient(135deg, var(--bronze-hi), var(--bronze));
margin-bottom: 22px;
}
.ccard__role { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bronze-hi); margin: 0 0 6px; }
.ccard__name { font-family: var(--serif); font-size: 1.7rem; color: var(--ivory); margin: 0 0 12px; }
.ccard__bio { color: rgba(246, 241, 231, 0.74); font-size: 0.98rem; margin: 0; }
.ccard__rule { height: 1px; background: var(--line-gold); margin: 26px 0; }
.ccard__facts { margin: 0 0 28px; display: grid; gap: 14px; }
.ccard__facts > div { display: flex; justify-content: space-between; gap: 14px; font-size: 0.85rem; }
.ccard__facts dt { color: rgba(246, 241, 231, 0.6); letter-spacing: 0.06em; }
.ccard__facts dd { margin: 0; color: var(--bronze-hi); }
/* ============ APPROACH ============ */
.steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 4vw, 56px);
}
.step { text-align: center; padding: 0 8px; }
.step__no {
font-family: var(--serif);
font-size: 2.6rem;
color: var(--bronze);
display: block;
margin-bottom: 16px;
letter-spacing: 0.08em;
}
.step h3 { font-size: 1.6rem; color: var(--green); margin-bottom: 12px; }
.step p { color: var(--muted); margin: 0; font-size: 1rem; }
.pullquote {
margin: clamp(60px, 9vh, 110px) auto 0;
max-width: 760px;
text-align: center;
border-top: 1px solid var(--line-gold);
border-bottom: 1px solid var(--line-gold);
padding: clamp(40px, 6vh, 64px) 0;
}
.pullquote blockquote {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.4rem, 3vw, 2.1rem);
line-height: 1.32;
color: var(--green);
margin: 0 0 22px;
}
.pullquote figcaption { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze); }
/* ============ CONTACT ============ */
.contact { background: var(--ivory-2); max-width: none; border-top: 1px solid var(--line); }
.contact__inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: clamp(36px, 6vw, 72px);
}
.contact__intro h2 { color: var(--green); }
.contact__intro > p { color: var(--muted); margin: 22px 0; }
.contact__assure {
display: inline-flex;
align-items: center;
gap: 9px;
color: var(--bronze);
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.contact__assure svg { stroke: currentColor; }
.enquiry {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 20px;
background: var(--ivory);
border: 1px solid var(--line-gold);
border-radius: 6px;
padding: clamp(26px, 4vw, 40px);
box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
font-family: var(--sans);
font-size: 0.95rem;
color: var(--ink);
background: var(--ivory-2);
border: 1px solid var(--line);
border-radius: 3px;
padding: 12px 14px;
transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { resize: vertical; min-height: 70px; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--bronze);
box-shadow: 0 0 0 3px rgba(169, 130, 79, 0.16);
}
.field.is-invalid input, .field.is-invalid select { border-color: #b4543f; }
.field__err { font-size: 0.72rem; color: #b4543f; min-height: 0; line-height: 1.3; }
.enquiry .btn { grid-column: 1 / -1; margin-top: 6px; }
.enquiry__fine { grid-column: 1 / -1; text-align: center; font-size: 0.72rem; color: var(--muted); margin: 4px 0 0; letter-spacing: 0.04em; }
/* ============ FOOTER ============ */
.footer { background: var(--green-deep); color: var(--ivory); padding: clamp(48px, 7vh, 76px) var(--gut); }
.footer__inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 26px;
}
.footer__brand .brand__name { color: var(--ivory); font-size: 1.5rem; }
.footer__brand p { margin: 8px 0 0; color: rgba(246, 241, 231, 0.6); font-size: 0.86rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 28px; }
.footer__nav a { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246, 241, 231, 0.78); transition: color 0.3s var(--ease); }
.footer__nav a:hover { color: var(--bronze-hi); }
.footer__legal { width: 100%; border-top: 1px solid rgba(228, 200, 150, 0.16); padding-top: 22px; margin: 6px 0 0; font-size: 0.72rem; color: rgba(246, 241, 231, 0.5); }
/* ============ TOAST ============ */
.toast {
position: fixed;
left: 50%;
bottom: 32px;
transform: translate(-50%, 24px);
background: var(--green-deep);
color: var(--ivory);
border: 1px solid var(--line-gold);
padding: 14px 26px;
border-radius: 999px;
font-size: 0.82rem;
letter-spacing: 0.08em;
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
z-index: 300;
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: "✦"; color: var(--bronze-hi); margin-right: 9px; }
/* ============ REVEAL ============ */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
.nav { display: none; }
.navtoggle { display: flex; }
.concierge__inner, .contact__inner { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
.step { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 4px 22px; }
.step__no { grid-row: 1 / 3; margin: 0; align-self: center; }
}
@media (max-width: 620px) {
.dgrid { grid-template-columns: 1fr; }
.enquiry { grid-template-columns: 1fr; }
.hero__scroll { display: none; }
.hero__stats { gap: 24px 36px; }
.footer__inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
.reveal { opacity: 1; transform: none; }
}(function () {
"use strict";
var prefersReduced =
window.matchMedia &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-on");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(function () {
toastEl.classList.remove("is-on");
}, 3200);
}
/* ---------- sticky topbar ---------- */
var topbar = document.getElementById("topbar");
function onScroll() {
if (!topbar) return;
topbar.classList.toggle("is-scrolled", window.scrollY > 40);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- mobile nav ---------- */
var navToggle = document.getElementById("navtoggle");
var mobileNav = document.getElementById("mobilenav");
function setNav(open) {
if (!navToggle || !mobileNav) return;
navToggle.setAttribute("aria-expanded", String(open));
navToggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
mobileNav.hidden = !open;
}
if (navToggle && mobileNav) {
navToggle.addEventListener("click", function () {
setNav(navToggle.getAttribute("aria-expanded") !== "true");
});
mobileNav.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
setNav(false);
});
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape") setNav(false);
});
}
/* ---------- reveal on scroll ---------- */
var reveals = Array.prototype.slice.call(document.querySelectorAll(".reveal"));
if (prefersReduced || !("IntersectionObserver" in window)) {
reveals.forEach(function (el) {
el.classList.add("is-in");
});
} else {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry, i) {
if (entry.isIntersecting) {
var el = entry.target;
// gentle stagger for a sophisticated, unhurried reveal
window.setTimeout(function () {
el.classList.add("is-in");
}, Math.min(i * 90, 360));
io.unobserve(el);
}
});
},
{ threshold: 0.16, rootMargin: "0px 0px -8% 0px" }
);
reveals.forEach(function (el) {
io.observe(el);
});
}
/* ---------- hero stat count-up ---------- */
var counters = Array.prototype.slice.call(
document.querySelectorAll(".hero__stats strong[data-count]")
);
function animateCount(el) {
var target = parseInt(el.getAttribute("data-count"), 10) || 0;
if (prefersReduced) {
el.textContent = target.toLocaleString();
return;
}
var start = null;
var dur = 1600;
function tick(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = Math.round(target * eased).toLocaleString();
if (p < 1) requestAnimationFrame(tick);
else el.textContent = target.toLocaleString();
}
requestAnimationFrame(tick);
}
if ("IntersectionObserver" in window && counters.length) {
var cio = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
animateCount(entry.target);
cio.unobserve(entry.target);
}
});
},
{ threshold: 0.6 }
);
counters.forEach(function (el) {
cio.observe(el);
});
} else {
counters.forEach(animateCount);
}
/* ---------- save / atlas (wishlist) ---------- */
var saved = [];
document.querySelectorAll(".dcard__save").forEach(function (btn) {
btn.addEventListener("click", function (e) {
e.stopPropagation();
var card = btn.closest(".dcard");
var place = card
? card.getAttribute("data-place") || "this place"
: "this place";
var nowSaved = btn.getAttribute("aria-pressed") !== "true";
btn.setAttribute("aria-pressed", String(nowSaved));
btn.classList.remove("pulse");
// force reflow so the pulse animation can replay
void btn.offsetWidth;
btn.classList.add("pulse");
if (nowSaved) {
if (saved.indexOf(place) === -1) saved.push(place);
toast(place + " added to your atlas");
} else {
saved = saved.filter(function (p) {
return p !== place;
});
toast(place + " removed from your atlas");
}
});
});
/* ---------- destination card -> opens a discreet enquiry ---------- */
document.querySelectorAll(".dcard").forEach(function (card) {
function open() {
var place = card.getAttribute("data-place");
var select = document.getElementById("f-dest");
if (select) {
// match the option whose text contains the place name
var match = Array.prototype.find.call(select.options, function (o) {
return o.text.indexOf(place) !== -1;
});
if (match) select.value = match.value;
}
var target = document.getElementById("contact");
if (target)
target.scrollIntoView({
behavior: prefersReduced ? "auto" : "smooth",
block: "start",
});
toast("Beginning an enquiry for " + place);
}
card.addEventListener("click", function (e) {
if (e.target.closest(".dcard__save")) return;
open();
});
card.addEventListener("keydown", function (e) {
if (e.target.closest(".dcard__save")) return;
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
open();
}
});
});
/* ---------- concierge readout ---------- */
var conItems = Array.prototype.slice.call(
document.querySelectorAll(".conlist li[data-detail]")
);
var conReadout = document.getElementById("conReadout");
function selectCon(li) {
conItems.forEach(function (other) {
other.classList.toggle("is-active", other === li);
});
if (!conReadout) return;
var detail = li.getAttribute("data-detail") || "";
conReadout.classList.add("fade");
window.setTimeout(
function () {
conReadout.textContent = detail;
conReadout.classList.remove("fade");
},
prefersReduced ? 0 : 220
);
}
conItems.forEach(function (li) {
li.setAttribute("tabindex", "0");
li.setAttribute("role", "button");
li.addEventListener("click", function () {
selectCon(li);
});
li.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
selectCon(li);
}
});
});
/* ---------- enquiry form ---------- */
var form = document.getElementById("enquiry");
if (form) {
var fields = {
name: {
el: document.getElementById("f-name"),
msg: "Please share the name we should address you by.",
valid: function (v) {
return v.trim().length >= 2;
},
},
email: {
el: document.getElementById("f-email"),
msg: "A valid email lets your concierge reply.",
valid: function (v) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
},
},
};
function showError(key, show) {
var f = fields[key];
if (!f || !f.el) return;
var wrap = f.el.closest(".field");
var err = form.querySelector('.field__err[data-for="' + key + '"]');
if (wrap) wrap.classList.toggle("is-invalid", show);
if (err) err.textContent = show ? f.msg : "";
f.el.setAttribute("aria-invalid", String(show));
}
Object.keys(fields).forEach(function (key) {
var el = fields[key].el;
if (!el) return;
el.addEventListener("input", function () {
if (el.closest(".field").classList.contains("is-invalid")) {
showError(key, !fields[key].valid(el.value));
}
});
});
form.addEventListener("submit", function (e) {
e.preventDefault();
var firstBad = null;
Object.keys(fields).forEach(function (key) {
var f = fields[key];
if (!f.el) return;
var ok = f.valid(f.el.value);
showError(key, !ok);
if (!ok && !firstBad) firstBad = f.el;
});
if (firstBad) {
firstBad.focus();
toast("A detail or two is still needed");
return;
}
var name = fields.name.el.value.trim().split(/\s+/)[0];
form.reset();
toast(
"Thank you, " + name + ". Your concierge replies within the hour."
);
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Méridien Atlas — Bespoke Private Travel</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="topbar" id="topbar">
<div class="topbar__inner">
<a class="brand" href="#main" aria-label="Méridien Atlas, home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 32 32" width="26" height="26" role="img" aria-label="Compass emblem">
<circle cx="16" cy="16" r="14.5" fill="none" stroke="currentColor" stroke-width="1" />
<path d="M16 5 L19 16 L16 27 L13 16 Z" fill="currentColor" opacity=".85" />
<circle cx="16" cy="16" r="1.6" fill="currentColor" />
</svg>
</span>
<span class="brand__words">
<span class="brand__name">Méridien Atlas</span>
<span class="brand__sub">Bespoke Private Travel</span>
</span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#destinations">Destinations</a>
<a href="#concierge">Concierge</a>
<a href="#approach">The Atelier</a>
<a href="#contact" class="nav__cta">Enquire</a>
</nav>
<button class="navtoggle" id="navtoggle" aria-expanded="false" aria-controls="mobilenav" aria-label="Open menu">
<span></span><span></span>
</button>
</div>
<div class="mobilenav" id="mobilenav" hidden>
<a href="#destinations">Destinations</a>
<a href="#concierge">Concierge</a>
<a href="#approach">The Atelier</a>
<a href="#contact">Enquire</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero" aria-labelledby="hero-title">
<div class="hero__scene" aria-hidden="true">
<div class="hero__sky"></div>
<div class="hero__sun"></div>
<svg class="hero__ridge" viewBox="0 0 1440 420" preserveAspectRatio="xMidYMax slice" aria-hidden="true">
<path class="ridge ridge--far" d="M0 300 L210 200 L380 270 L560 170 L760 250 L980 150 L1180 240 L1440 180 L1440 420 L0 420 Z" />
<path class="ridge ridge--mid" d="M0 340 L180 260 L360 320 L540 240 L760 320 L980 250 L1200 330 L1440 270 L1440 420 L0 420 Z" />
<path class="ridge ridge--near" d="M0 400 L240 330 L470 390 L700 320 L920 390 L1180 340 L1440 400 L1440 420 L0 420 Z" />
</svg>
<div class="hero__grain"></div>
</div>
<div class="hero__content reveal">
<p class="eyebrow">Quietly extraordinary journeys · Est. 1994</p>
<h1 id="hero-title">Travel, composed<br />like a private symphony.</h1>
<p class="hero__lede">
We design singular itineraries for those who have seen the world and wish to feel it
differently — a villa held in silence, a chef who answers only to you, a horizon
arranged precisely at dawn.
</p>
<div class="hero__actions">
<a href="#contact" class="btn btn--gold">Begin a private enquiry</a>
<a href="#destinations" class="btn btn--ghost">Explore signature journeys</a>
</div>
<ul class="hero__stats" aria-label="At a glance">
<li><strong data-count="68">0</strong><span>countries curated</span></li>
<li><strong data-count="1500">0</strong><span>journeys composed</span></li>
<li><strong data-count="24">0</strong><span>concierge, hours a day</span></li>
</ul>
</div>
<span class="hero__scroll" aria-hidden="true">Scroll</span>
</section>
<!-- MARQUEE -->
<div class="marquee" aria-hidden="true">
<div class="marquee__track">
<span>Privacy</span><span class="dot">·</span><span>Discretion</span><span class="dot">·</span>
<span>Singular Access</span><span class="dot">·</span><span>Effortless</span><span class="dot">·</span>
<span>Bespoke</span><span class="dot">·</span><span>Unhurried</span><span class="dot">·</span>
<span>Privacy</span><span class="dot">·</span><span>Discretion</span><span class="dot">·</span>
<span>Singular Access</span><span class="dot">·</span><span>Effortless</span><span class="dot">·</span>
<span>Bespoke</span><span class="dot">·</span><span>Unhurried</span><span class="dot">·</span>
</div>
</div>
<!-- DESTINATIONS -->
<section class="section destinations" id="destinations" aria-labelledby="dest-title">
<header class="section__head reveal">
<p class="kicker">Signature Destinations</p>
<h2 id="dest-title">Places we know by heart</h2>
<p class="section__intro">
A small atlas of where our relationships run deepest. Each opens onto a world of
doors held only for our travellers.
</p>
</header>
<ul class="dgrid" role="list">
<li>
<article class="dcard reveal" data-place="Kyoto" data-scene="kyoto" tabindex="0">
<div class="dcard__media dcard__media--kyoto" aria-hidden="true">
<span class="dcard__season">Spring</span>
</div>
<button class="dcard__save" aria-pressed="false" aria-label="Save Kyoto to your atlas">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-9.2C.3 8.5 1.7 5 5 5c2 0 3.2 1.2 4 2.4C9.8 6.2 11 5 13 5c3.3 0 4.7 3.5 3 6.8C19.5 16.4 12 21 12 21z"/></svg>
</button>
<div class="dcard__body">
<p class="dcard__region">Japan · Kansai</p>
<h3>Kyoto & the Hidden Temples</h3>
<p>Private tea with a fifteenth-generation master; a garden opened before the gates.</p>
<p class="dcard__meta"><span>7 nights</span><span class="dcard__from">from $48,000</span></p>
</div>
</article>
</li>
<li>
<article class="dcard reveal" data-place="Amalfi" data-scene="amalfi" tabindex="0">
<div class="dcard__media dcard__media--amalfi" aria-hidden="true">
<span class="dcard__season">Summer</span>
</div>
<button class="dcard__save" aria-pressed="false" aria-label="Save the Amalfi Coast to your atlas">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-9.2C.3 8.5 1.7 5 5 5c2 0 3.2 1.2 4 2.4C9.8 6.2 11 5 13 5c3.3 0 4.7 3.5 3 6.8C19.5 16.4 12 21 12 21z"/></svg>
</button>
<div class="dcard__body">
<p class="dcard__region">Italy · Campania</p>
<h3>The Amalfi Coast by Sea</h3>
<p>A classic gozzo at your command; cliffside dinners arranged where no menu reaches.</p>
<p class="dcard__meta"><span>9 nights</span><span class="dcard__from">from $62,000</span></p>
</div>
</article>
</li>
<li>
<article class="dcard reveal" data-place="Patagonia" data-scene="patagonia" tabindex="0">
<div class="dcard__media dcard__media--patagonia" aria-hidden="true">
<span class="dcard__season">Autumn</span>
</div>
<button class="dcard__save" aria-pressed="false" aria-label="Save Patagonia to your atlas">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-9.2C.3 8.5 1.7 5 5 5c2 0 3.2 1.2 4 2.4C9.8 6.2 11 5 13 5c3.3 0 4.7 3.5 3 6.8C19.5 16.4 12 21 12 21z"/></svg>
</button>
<div class="dcard__body">
<p class="dcard__region">Chile · Magallanes</p>
<h3>Patagonia, End of the World</h3>
<p>Heli-access to glaciers untouched by season; an astronomer for the southern sky.</p>
<p class="dcard__meta"><span>10 nights</span><span class="dcard__from">from $74,000</span></p>
</div>
</article>
</li>
<li>
<article class="dcard reveal" data-place="Marrakech" data-scene="marrakech" tabindex="0">
<div class="dcard__media dcard__media--marrakech" aria-hidden="true">
<span class="dcard__season">Winter</span>
</div>
<button class="dcard__save" aria-pressed="false" aria-label="Save Marrakech to your atlas">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M12 21s-7.5-4.6-10-9.2C.3 8.5 1.7 5 5 5c2 0 3.2 1.2 4 2.4C9.8 6.2 11 5 13 5c3.3 0 4.7 3.5 3 6.8C19.5 16.4 12 21 12 21z"/></svg>
</button>
<div class="dcard__body">
<p class="dcard__region">Morocco · Atlas</p>
<h3>Marrakech & the High Atlas</h3>
<p>A riad held entirely for you; a caravan into the mountains at the violet hour.</p>
<p class="dcard__meta"><span>6 nights</span><span class="dcard__from">from $41,000</span></p>
</div>
</article>
</li>
</ul>
</section>
<!-- CONCIERGE -->
<section class="section concierge" id="concierge" aria-labelledby="con-title">
<div class="concierge__inner">
<div class="concierge__copy reveal">
<p class="kicker kicker--gold">The Méridien Concierge</p>
<h2 id="con-title">One quiet voice, the entire world arranged.</h2>
<p>
Each traveller is paired with a single concierge who learns your manner, your
preferences, your unspoken expectations — and remains yours, journey after journey.
What follows is not a service. It is a relationship.
</p>
<ul class="conlist" role="list">
<li data-detail="A villa secured in confidence, staffed exactly to your household — and never listed.">
<span class="conlist__num">01</span>
<span class="conlist__txt"><strong>Private residences</strong> held in confidence, off the open market.</span>
</li>
<li data-detail="Tables, ateliers, and collections opened after hours — access we keep for our travellers alone.">
<span class="conlist__num">02</span>
<span class="conlist__txt"><strong>Singular access</strong> to doors that do not otherwise open.</span>
</li>
<li data-detail="Aircraft, yacht, and ground arranged as one seamless thread, anticipated to the minute.">
<span class="conlist__num">03</span>
<span class="conlist__txt"><strong>Seamless logistics</strong> across air, sea, and road — anticipated, never asked.</span>
</li>
<li data-detail="A direct line, every hour of every day, in whichever timezone your evening happens to fall.">
<span class="conlist__num">04</span>
<span class="conlist__txt"><strong>Around the clock</strong>, in your timezone, for the length of your travels.</span>
</li>
</ul>
<p class="conlist__readout" id="conReadout" aria-live="polite">Select a service to read more.</p>
</div>
<aside class="concierge__card reveal" aria-label="Your concierge">
<div class="ccard">
<div class="ccard__avatar" aria-hidden="true">ES</div>
<p class="ccard__role">Your dedicated concierge</p>
<p class="ccard__name">Eleanor Saatchi</p>
<p class="ccard__bio">
Twenty-two years composing journeys across five continents. Fluent in four languages
and in the art of the unstated.
</p>
<div class="ccard__rule" aria-hidden="true"></div>
<dl class="ccard__facts">
<div><dt>Response time</dt><dd>Within the hour</dd></div>
<div><dt>Travellers held</dt><dd>Never above 30</dd></div>
<div><dt>Languages</dt><dd>EN · FR · IT · JP</dd></div>
</dl>
<a href="#contact" class="btn btn--gold btn--full">Request an introduction</a>
</div>
</aside>
</div>
</section>
<!-- APPROACH -->
<section class="section approach" id="approach" aria-labelledby="app-title">
<header class="section__head reveal">
<p class="kicker">The Atelier</p>
<h2 id="app-title">How a journey is composed</h2>
</header>
<ol class="steps" role="list">
<li class="step reveal">
<span class="step__no" aria-hidden="true">I</span>
<h3>The Conversation</h3>
<p>An unhurried hour to understand not where you wish to go, but how you wish to feel.</p>
</li>
<li class="step reveal">
<span class="step__no" aria-hidden="true">II</span>
<h3>The Composition</h3>
<p>A bespoke itinerary drafted by hand, refined until each day reads like a held breath.</p>
</li>
<li class="step reveal">
<span class="step__no" aria-hidden="true">III</span>
<h3>The Departure</h3>
<p>You arrive. Everything is already arranged, and nothing is ever asked of you twice.</p>
</li>
</ol>
<figure class="pullquote reveal">
<blockquote>
"They did not plan a trip. They quietly rearranged a small corner of the world so that,
for two weeks, it belonged to us."
</blockquote>
<figcaption>— A traveller, returned from the Amalfi Coast</figcaption>
</figure>
</section>
<!-- CONTACT / CTA -->
<section class="section contact" id="contact" aria-labelledby="contact-title">
<div class="contact__inner reveal">
<div class="contact__intro">
<p class="kicker kicker--gold">A discreet enquiry</p>
<h2 id="contact-title">Begin a conversation</h2>
<p>
Tell us a little, and your concierge will reply within the hour. No itineraries are
shared in passing; every reply is composed for you alone.
</p>
<p class="contact__assure" aria-hidden="true">
<svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 1 3 5v6c0 5 3.8 9.7 9 11 5.2-1.3 9-6 9-11V5l-9-4z" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>
Held in complete confidence.
</p>
</div>
<form class="enquiry" id="enquiry" novalidate>
<div class="field">
<label for="f-name">Your name</label>
<input id="f-name" name="name" type="text" autocomplete="name" required />
<span class="field__err" data-for="name"></span>
</div>
<div class="field">
<label for="f-email">Email</label>
<input id="f-email" name="email" type="email" autocomplete="email" required />
<span class="field__err" data-for="email"></span>
</div>
<div class="field">
<label for="f-dest">Where calls to you?</label>
<select id="f-dest" name="dest">
<option value="">No preference yet</option>
<option>Kyoto & the Hidden Temples</option>
<option>The Amalfi Coast by Sea</option>
<option>Patagonia, End of the World</option>
<option>Marrakech & the High Atlas</option>
<option>Somewhere else entirely</option>
</select>
</div>
<div class="field">
<label for="f-when">Ideal season</label>
<select id="f-when" name="when">
<option value="">Flexible</option>
<option>Spring</option>
<option>Summer</option>
<option>Autumn</option>
<option>Winter</option>
</select>
</div>
<div class="field field--wide">
<label for="f-note">A few words on the journey you imagine</label>
<textarea id="f-note" name="note" rows="3"></textarea>
</div>
<button type="submit" class="btn btn--gold btn--full">Send enquiry</button>
<p class="enquiry__fine">We reply within the hour. Your details are never shared.</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__inner">
<div class="footer__brand">
<span class="brand__name">Méridien Atlas</span>
<p>Bespoke private travel, composed since 1994.</p>
</div>
<nav class="footer__nav" aria-label="Footer">
<a href="#destinations">Destinations</a>
<a href="#concierge">Concierge</a>
<a href="#approach">The Atelier</a>
<a href="#contact">Enquire</a>
</nav>
<p class="footer__legal">An illustrative concept. Fictional destinations, prices, and maps.</p>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Luxury / Bespoke Travel Landing
A full-screen landing for Méridien Atlas, a fictional house of bespoke private travel. The palette is understated opulence — ivory and warm bronze over deep forest green — set in an elegant Cormorant Garamond display face with a quiet Jost sans for body copy, separated by thin gold rules and generous whitespace. The cinematic hero layers a gradient sky, a softly rising sun, and three layered SVG mountain ridges, with the house’s headline figures counting up the first time they scroll into view.
Every section arrives on a slow, staggered reveal. Four signature destinations sit in a refined grid: hovering lifts the card and gently zooms its gradient “photography”, a heart saves the place to your atlas with a pulse and a toast, and selecting a card pre-fills the enquiry form before scrolling you there. The concierge section turns its numbered service list into an interactive readout — click or key into any line to reveal a longer, italic detail — and the atelier section walks through how a journey is composed, closing on a pull-quote. The discreet enquiry form validates name and email inline, focuses the first problem field, and confirms with a personalised toast. A sticky nav condenses on scroll, the mobile menu toggles with full ARIA state, and prefers-reduced-motion is respected throughout.
Illustrative travel UI only — fictional destinations, prices, and maps.