Pages Hard
Airline — Premium Boutique Landing
An opulent boutique-airline landing page in deep red, cream and gold with a refined serif voice. A cinematic hero with an indicative fare quoter, three signature cabins (First Suite, Business Pavilion, Premium Salon), a tabbed onboard-experience panel, residence-style lounges with status pills, a filterable seventy-one-city destination network, a tilting Le Cercle membership card, and a season-journal footer. Built with animated counters, scroll reveal and a toast helper in vanilla JavaScript.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--red: #7a1f2b;
--red-d: #5c1620;
--red-l: #9a3340;
--red-50: #f6e9eb;
--cream: #faf5ec;
--cream-2: #f3ead9;
--cream-d: #ece0cb;
--gold: #b48a4a;
--gold-l: #cda86b;
--gold-50: #f4ecdd;
--ink: #2a1d18;
--ink-2: #5b4a40;
--muted: #8b7a6e;
--bg: #faf5ec;
--surface: #ffffff;
--line: rgba(42, 29, 24, 0.12);
--line-2: rgba(42, 29, 24, 0.2);
--ok: #2f7d52;
--warn: #c08a2e;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--shadow: 0 18px 48px -24px rgba(42, 18, 14, 0.45);
--shadow-sm: 0 8px 22px -14px rgba(42, 18, 14, 0.4);
--serif: "Cormorant Garamond", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
.num, .from strong, .mcard__num { font-variant-numeric: tabular-nums; }
/* ░░ buttons ░░ */
.btn {
font-family: var(--sans);
font-weight: 600;
font-size: 0.92rem;
border: 0;
border-radius: 999px;
padding: 0.7rem 1.3rem;
cursor: pointer;
letter-spacing: 0.01em;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
white-space: nowrap;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn:active { transform: translateY(1px); }
.btn--gold {
background: linear-gradient(135deg, var(--gold-l), var(--gold));
color: #2a1d18;
box-shadow: 0 10px 24px -12px rgba(180, 138, 74, 0.8);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(180, 138, 74, 0.9); }
.btn--ghost { background: transparent; color: var(--cream); }
.btn--ghost:hover { color: #fff; }
.btn--outline {
background: transparent;
color: var(--ink);
border: 1px solid var(--line-2);
}
.btn--outline:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.btn--lg { padding: 0.95rem 1.8rem; font-size: 1rem; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn--block { width: 100%; }
.eyebrow {
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--red);
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.eyebrow--light { color: var(--gold-l); }
.eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
/* ░░ NAV ░░ */
.nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(92, 22, 32, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(180, 138, 74, 0.28);
transition: background 0.3s ease, padding 0.3s ease;
}
.nav.shrink { background: rgba(92, 22, 32, 0.98); }
.nav__inner {
max-width: 1180px;
margin: 0 auto;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--cream); }
.brand__crest {
width: 38px; height: 38px;
display: grid; place-items: center;
border: 1px solid var(--gold);
border-radius: 50%;
color: var(--gold-l);
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; letter-spacing: 0.01em; }
.brand__sub { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-l); }
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav__links a {
color: var(--cream);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
position: relative;
padding-bottom: 3px;
opacity: 0.92;
transition: opacity 0.2s;
}
.nav__links a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1.5px;
background: var(--gold);
transition: width 0.25s ease;
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; align-items: center; gap: 0.6rem; }
.nav__burger {
display: none;
flex-direction: column;
gap: 4px;
background: none;
border: 0;
cursor: pointer;
padding: 6px;
}
.nav__burger span { width: 22px; height: 2px; background: var(--cream); border-radius: 2px; transition: 0.25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile {
position: sticky;
top: 70px;
z-index: 49;
background: var(--red-d);
border-bottom: 1px solid rgba(180,138,74,0.3);
padding: 1rem 1.5rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.mobile a { color: var(--cream); text-decoration: none; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 500; }
.mobile .btn { margin-top: 0.7rem; }
/* ░░ HERO ░░ */
.hero {
position: relative;
background:
radial-gradient(120% 90% at 80% -10%, rgba(180,138,74,0.18), transparent 55%),
linear-gradient(160deg, var(--red-d) 0%, var(--red) 45%, var(--red-l) 130%);
color: var(--cream);
padding: 5.5rem 1.5rem 4.5rem;
overflow: hidden;
}
.hero__glow {
position: absolute;
inset: auto -10% -40% auto;
width: 520px; height: 520px;
background: radial-gradient(circle, rgba(205,168,107,0.3), transparent 65%);
filter: blur(20px);
pointer-events: none;
}
.hero__inner { max-width: 1000px; margin: 0 auto; position: relative; }
.hero .eyebrow { color: var(--gold-l); }
.hero__title {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(2.4rem, 6vw, 4.4rem);
line-height: 1.04;
letter-spacing: -0.01em;
margin: 1rem 0 1.2rem;
}
.hero__title em { color: var(--gold-l); font-style: italic; }
.hero__lede {
max-width: 560px;
color: rgba(250, 245, 236, 0.82);
font-size: 1.08rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.8rem 0 2rem; }
.hero__actions .btn--outline { color: var(--cream); border-color: rgba(250,245,236,0.4); }
.hero__actions .btn--outline:hover { border-color: var(--gold-l); color: var(--gold-l); }
/* fare quote */
.quote {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 0.8rem;
background: rgba(250, 245, 236, 0.97);
border-radius: var(--r-md);
padding: 1rem 1.1rem;
box-shadow: var(--shadow);
max-width: 760px;
}
.quote__field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 110px; }
.quote__field label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.quote__field input, .quote__field select {
font-family: var(--sans);
font-weight: 600;
font-size: 1rem;
color: var(--ink);
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: 0.6rem 0.7rem;
width: 100%;
text-transform: uppercase;
}
.quote__field--sel select { text-transform: none; cursor: pointer; }
.quote__field input:focus, .quote__field select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.quote__swap { color: var(--red); font-size: 1.2rem; align-self: center; padding-bottom: 0.55rem; }
.quote__go { align-self: stretch; margin-top: auto; }
.quote__out { margin-top: 1rem; min-height: 1.2rem; color: var(--gold-l); font-weight: 600; }
.quote__out strong { color: #fff; }
.hero__stats {
max-width: 1000px;
margin: 3rem auto 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
border-top: 1px solid rgba(180,138,74,0.3);
padding-top: 2rem;
}
.hero__stats div { text-align: center; }
.hero__stats strong { display: block; font-family: var(--serif); font-size: 2.4rem; font-weight: 600; color: var(--gold-l); }
.hero__stats span { font-size: 0.78rem; color: rgba(250,245,236,0.75); letter-spacing: 0.04em; }
/* ░░ generic sections ░░ */
.section { max-width: 1180px; margin: 0 auto; padding: 5rem 1.5rem; }
.section--ink {
max-width: none;
background:
radial-gradient(80% 120% at 100% 0%, rgba(180,138,74,0.12), transparent 60%),
linear-gradient(160deg, var(--ink) 0%, #3a2622 100%);
color: var(--cream);
}
.section--ink .sec-head h2 { color: var(--cream); }
.section--ink > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.section--cream { max-width: none; background: var(--cream-2); }
.section--cream > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.sec-head { max-width: 640px; margin-bottom: 2.6rem; }
.sec-head h2 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(1.9rem, 4vw, 2.9rem);
line-height: 1.08;
margin: 0.7rem 0 0.7rem;
color: var(--ink);
}
.sec-lede { color: var(--ink-2); font-size: 1.04rem; }
.section--ink .sec-lede { color: rgba(250,245,236,0.78); }
/* ░░ CABINS ░░ */
.cabins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cabin {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.cabin:hover, .cabin:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow); outline: none; }
.cabin__media { height: 188px; position: relative; }
.cabin__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(42,18,14,0.45), transparent 55%);
}
.cabin__media--first { background: linear-gradient(135deg, #5c1620, #7a1f2b 60%, #9a3340); }
.cabin__media--biz { background: linear-gradient(135deg, #3a2622, #5b4a40 70%, #8b7a6e); }
.cabin__media--prem { background: linear-gradient(135deg, #b48a4a, #cda86b 70%, #ece0cb); }
.cabin:hover .cabin__media { filter: saturate(1.1); }
.cabin__body { padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.tag {
align-self: flex-start;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--red);
background: var(--red-50);
padding: 0.32rem 0.7rem;
border-radius: 999px;
}
.tag--gold { color: #715115; background: var(--gold-50); }
.cabin__body h3 { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--ink); }
.cabin__body p { color: var(--ink-2); font-size: 0.95rem; }
.cabin__feats { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.2rem; }
.cabin__feats li { font-size: 0.88rem; color: var(--ink-2); padding-left: 1.3rem; position: relative; }
.cabin__feats li::before { content: "◆"; position: absolute; left: 0; color: var(--gold); font-size: 0.7rem; top: 2px; }
.cabin__foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.from { font-size: 0.82rem; color: var(--muted); }
.from strong { display: block; font-family: var(--serif); font-size: 1.45rem; color: var(--ink); font-weight: 600; }
/* ░░ ONBOARD ░░ */
.onboard { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.ob__tab {
font-family: var(--sans);
font-weight: 600;
font-size: 0.92rem;
color: rgba(250,245,236,0.7);
background: transparent;
border: 1px solid rgba(180,138,74,0.35);
border-radius: 999px;
padding: 0.6rem 1.3rem;
cursor: pointer;
transition: 0.2s;
}
.ob__tab:hover { color: var(--cream); border-color: var(--gold-l); }
.ob__tab.is-active { background: var(--gold); color: #2a1d18; border-color: var(--gold); }
.ob-panels { position: relative; }
.ob-panel {
display: none;
grid-template-columns: 1.1fr 1fr;
gap: 2.5rem;
align-items: center;
animation: fade 0.5s ease;
}
.ob-panel.is-active { display: grid; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ob-panel__txt h3 { font-family: var(--serif); font-size: 2rem; font-weight: 600; color: var(--cream); margin-bottom: 0.6rem; }
.ob-panel__txt p { color: rgba(250,245,236,0.8); max-width: 440px; }
.ob-panel__rows { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(180,138,74,0.25); }
.ob-panel__rows div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(180,138,74,0.18); }
.ob-panel__rows .k { color: var(--gold-l); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ob-panel__rows .v { color: var(--cream); font-family: var(--serif); font-size: 1.1rem; text-align: right; }
.ob-panel__art {
height: 320px;
border-radius: var(--r-lg);
border: 1px solid rgba(180,138,74,0.3);
box-shadow: var(--shadow);
}
.ob-art--dining { background: linear-gradient(135deg, #5c1620, #7a1f2b 60%, #b48a4a); }
.ob-art--rest { background: linear-gradient(135deg, #2a1d18, #5b4a40 70%, #cda86b); }
.ob-art--cellar { background: linear-gradient(135deg, #5c1620, #3a2622 60%, #9a3340); }
.ob-art--service { background: linear-gradient(135deg, #b48a4a, #7a1f2b 80%); }
/* ░░ LOUNGES ░░ */
.lounges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.lounge {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 1.7rem;
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s;
}
.lounge:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--shadow); }
.lounge__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.lounge__head h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--ink); }
.lounge p { color: var(--ink-2); font-size: 0.93rem; }
.status {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
padding: 0.32rem 0.7rem;
border-radius: 999px;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--open { color: var(--ok); background: rgba(47,125,82,0.12); }
.status--soon { color: var(--warn); background: rgba(192,138,46,0.14); }
.lounge__list { list-style: none; margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lounge__list li { font-size: 0.88rem; color: var(--ink-2); padding-left: 1.2rem; position: relative; }
.lounge__list li::before { content: "◆"; position: absolute; left: 0; color: var(--gold); font-size: 0.65rem; top: 3px; }
/* ░░ DESTINATIONS ░░ */
.dest-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.chip {
font-family: var(--sans);
font-weight: 600;
font-size: 0.88rem;
color: var(--ink-2);
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 999px;
padding: 0.5rem 1.2rem;
cursor: pointer;
transition: 0.2s;
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.is-active { background: var(--red); color: var(--cream); border-color: var(--red); }
.dest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.dest {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 1.2rem 1.3rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.3s ease;
}
.dest:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.dest.is-hidden { display: none; }
.dest__code {
font-family: var(--sans);
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.16em;
color: var(--gold);
background: var(--gold-50);
padding: 0.25rem 0.55rem;
border-radius: var(--r-sm);
}
.dest h4 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--ink); margin: 0.7rem 0 0.2rem; }
.dest p { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* ░░ LOYALTY ░░ */
.loyalty {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 3rem;
align-items: center;
background:
radial-gradient(70% 120% at 0% 0%, rgba(180,138,74,0.1), transparent 60%),
linear-gradient(150deg, var(--red-d), var(--red) 70%);
color: var(--cream);
border-radius: var(--r-lg);
padding: 3rem;
box-shadow: var(--shadow);
}
.loyalty .eyebrow { color: var(--gold-l); }
.loyalty__txt h2 { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 600; margin: 0.7rem 0 0.8rem; }
.loyalty__txt > p { color: rgba(250,245,236,0.82); max-width: 460px; }
.loyalty__perks { list-style: none; margin: 1.5rem 0; display: flex; flex-direction: column; gap: 0.7rem; }
.loyalty__perks li { display: flex; align-items: center; gap: 0.7rem; color: var(--cream); font-size: 0.95rem; }
.loyalty__perks span { color: var(--gold-l); }
.loyalty__card { perspective: 1000px; }
.mcard {
background: linear-gradient(140deg, #1f1410, #3a2622 60%, #5c1620);
border: 1px solid rgba(205,168,107,0.5);
border-radius: var(--r-md);
padding: 1.6rem;
aspect-ratio: 1.6 / 1;
display: flex;
flex-direction: column;
box-shadow: 0 30px 60px -28px rgba(0,0,0,0.7);
transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1);
transform-style: preserve-3d;
}
.loyalty__card:hover .mcard, .loyalty__card:focus-visible .mcard { transform: rotateY(-12deg) rotateX(6deg); outline: none; }
.mcard__top { display: flex; justify-content: space-between; align-items: center; }
.mcard__brand { font-family: var(--serif); font-size: 1.3rem; color: var(--gold-l); }
.mcard__tier { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); border: 1px solid var(--gold); border-radius: 999px; padding: 0.25rem 0.7rem; }
.mcard__chip { width: 42px; height: 32px; border-radius: 6px; margin-top: 1.4rem; background: linear-gradient(135deg, var(--gold-l), var(--gold)); }
.mcard__num { margin-top: auto; font-size: 1.05rem; letter-spacing: 0.08em; color: var(--cream); font-weight: 500; }
.mcard__bottom { display: flex; justify-content: space-between; margin-top: 0.8rem; font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(250,245,236,0.7); }
/* ░░ FOOTER ░░ */
.footer { background: var(--ink); color: rgba(250,245,236,0.82); padding: 3.5rem 1.5rem 1.5rem; }
.footer__inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: 2.5rem;
}
.footer__brand .brand__name { font-family: var(--serif); font-size: 1.5rem; color: var(--cream); display: block; margin-bottom: 0.6rem; }
.footer__brand p { font-size: 0.9rem; max-width: 320px; margin-bottom: 1.2rem; }
.news { display: flex; gap: 0.5rem; max-width: 360px; }
.news input {
flex: 1;
background: rgba(250,245,236,0.07);
border: 1px solid rgba(250,245,236,0.2);
border-radius: 999px;
padding: 0.6rem 1rem;
color: var(--cream);
font-family: var(--sans);
font-size: 0.88rem;
}
.news input::placeholder { color: rgba(250,245,236,0.5); }
.news input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.footer__col h4 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-l); margin-bottom: 1rem; }
.footer__col a { display: block; color: rgba(250,245,236,0.8); text-decoration: none; font-size: 0.9rem; padding: 0.32rem 0; transition: color 0.2s; }
.footer__col a:hover { color: var(--gold-l); }
.footer__bar {
max-width: 1180px;
margin: 2.5rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid rgba(250,245,236,0.12);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.6rem;
font-size: 0.8rem;
color: rgba(250,245,236,0.6);
}
.footer__crest { color: var(--gold-l); letter-spacing: 0.1em; }
/* ░░ toast ░░ */
.toast {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(140%);
background: var(--ink);
color: var(--cream);
border: 1px solid var(--gold);
border-radius: 999px;
padding: 0.8rem 1.4rem;
font-size: 0.9rem;
font-weight: 500;
box-shadow: var(--shadow);
z-index: 100;
transition: transform 0.4s cubic-bezier(0.2,0.7,0.2,1);
max-width: 90vw;
text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }
/* ░░ reveal ░░ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* ░░ RESPONSIVE ░░ */
@media (max-width: 980px) {
.cabins, .lounges { grid-template-columns: 1fr 1fr; }
.dest-grid { grid-template-columns: repeat(3, 1fr); }
.ob-panel { grid-template-columns: 1fr; }
.ob-panel__art { height: 220px; order: -1; }
.loyalty { grid-template-columns: 1fr; gap: 2rem; }
.footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
.nav__links { display: none; }
.nav__cta .btn--ghost, .nav__cta .btn--gold { display: none; }
.nav__burger { display: flex; }
.hero__stats { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
}
@media (max-width: 520px) {
.hero { padding: 3.5rem 1.2rem 3rem; }
.section { padding: 3.5rem 1.2rem; }
.cabins, .lounges, .dest-grid { grid-template-columns: 1fr; }
.quote { flex-direction: column; align-items: stretch; }
.quote__swap { display: none; }
.quote__go { width: 100%; }
.footer__inner { grid-template-columns: 1fr; gap: 1.8rem; }
.loyalty { padding: 2rem 1.4rem; }
.mcard { padding: 1.3rem; }
.ob-panel__rows .v { font-size: 1rem; }
}
.mobile[hidden] { display: none; }(function () {
"use strict";
/* ── toast helper ── */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 3000);
}
/* ── nav shrink on scroll ── */
var nav = document.getElementById("nav");
function onScroll() {
if (!nav) return;
nav.classList.toggle("shrink", window.scrollY > 30);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ── mobile menu ── */
var burger = document.getElementById("burger");
var mobile = document.getElementById("mobileMenu");
function closeMobile() {
if (!mobile || !burger) return;
mobile.hidden = true;
burger.setAttribute("aria-expanded", "false");
}
if (burger && mobile) {
burger.addEventListener("click", function () {
var open = mobile.hidden;
mobile.hidden = !open;
burger.setAttribute("aria-expanded", String(open));
});
mobile.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", closeMobile);
});
}
/* ── booking / concierge actions (event delegation) ── */
document.addEventListener("click", function (e) {
var book = e.target.closest("[data-book], #bookBtn");
if (book) {
closeMobile();
toast("Your reservation enquiry has been sent — a concierge will be in touch shortly.");
return;
}
var call = e.target.closest("[data-call], #callBtn");
if (call) {
e.preventDefault();
closeMobile();
toast("Concierge line open 24h: +41 22 071 1971 (fictional).");
}
});
/* ── fare quote ── */
var quoteForm = document.getElementById("quoteForm");
var quoteOut = document.getElementById("quoteOut");
var basePrices = { first: 11400, business: 5950, premium: 2380 };
var cabinNames = { first: "First Suite", business: "Business Pavilion", premium: "Premium Salon" };
function norm(v) {
return (v || "").trim().toUpperCase().slice(0, 3) || "—";
}
if (quoteForm) {
quoteForm.addEventListener("submit", function (e) {
e.preventDefault();
var from = norm(document.getElementById("from").value);
var to = norm(document.getElementById("to").value);
var cabin = document.getElementById("cabin").value;
if (from === to) {
toast("Please choose two different airports.");
return;
}
// deterministic, fictional fare: base + a hash of the route
var seed = (from + to).split("").reduce(function (a, c) { return a + c.charCodeAt(0); }, 0);
var fare = basePrices[cabin] + (seed % 7) * 320;
var fmt = fare.toLocaleString("en-US");
quoteOut.innerHTML =
cabinNames[cabin] + " · " + from + " → " + to +
" · from <strong>$" + fmt + "</strong> return, all-inclusive";
toast("Indicative fare quoted for " + from + " → " + to + ".");
});
}
/* ── onboard tabs ── */
var tabs = document.querySelectorAll(".ob__tab");
var panels = document.querySelectorAll(".ob-panel");
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
var name = tab.getAttribute("data-tab");
tabs.forEach(function (t) { t.classList.toggle("is-active", t === tab); });
panels.forEach(function (p) {
p.classList.toggle("is-active", p.getAttribute("data-panel") === name);
});
});
});
/* ── destination filter ── */
var chips = document.querySelectorAll(".chip");
var dests = document.querySelectorAll(".dest");
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
var region = chip.getAttribute("data-region");
chips.forEach(function (c) {
var active = c === chip;
c.classList.toggle("is-active", active);
c.setAttribute("aria-selected", String(active));
});
var shown = 0;
dests.forEach(function (d) {
var match = region === "all" || d.getAttribute("data-region") === region;
d.classList.toggle("is-hidden", !match);
if (match) shown++;
});
toast(shown + (shown === 1 ? " destination" : " destinations") + " in this region.");
});
});
/* ── loyalty join ── */
var joinBtn = document.getElementById("joinBtn");
if (joinBtn) {
joinBtn.addEventListener("click", function () {
toast("Invitation requested — membership of Le Cercle is by referral. We will write soon.");
});
}
/* ── newsletter ── */
var newsForm = document.getElementById("newsForm");
if (newsForm) {
newsForm.addEventListener("submit", function (e) {
e.preventDefault();
var email = document.getElementById("newsEmail").value.trim();
if (!email) return;
newsForm.reset();
toast("Thank you — our journal will arrive in your inbox each season.");
});
}
/* ── animated stat counters ── */
function runCounter(el) {
var target = parseInt(el.getAttribute("data-count"), 10) || 0;
var start = null;
var dur = 1400;
function step(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).toString();
if (p < 1) requestAnimationFrame(step);
else el.textContent = target.toString();
}
requestAnimationFrame(step);
}
/* ── scroll reveal + counters via IntersectionObserver ── */
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
var revealEls = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window && !reduceMotion) {
var io = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (entry) {
if (!entry.isIntersecting) return;
entry.target.classList.add("in");
entry.target.querySelectorAll("[data-count]").forEach(runCounter);
obs.unobserve(entry.target);
});
}, { threshold: 0.16 });
revealEls.forEach(function (el) { io.observe(el); });
} else {
revealEls.forEach(function (el) {
el.classList.add("in");
el.querySelectorAll("[data-count]").forEach(function (c) {
c.textContent = c.getAttribute("data-count");
});
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Maison Aurélienne — Premium Boutique Air 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:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ░░ NAV ░░ -->
<header class="nav" id="nav">
<div class="nav__inner">
<a class="brand" href="#top" aria-label="Maison Aurélienne home">
<span class="brand__crest" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.4">
<path d="M12 2c2.5 3 2.5 7 0 10-2.5-3-2.5-7 0-10Z"/>
<path d="M4 14c4 1 6 4 8 8 2-4 4-7 8-8"/>
</svg>
</span>
<span class="brand__txt">
<span class="brand__name">Maison Aurélienne</span>
<span class="brand__sub">Boutique Air · Est. 1971</span>
</span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#cabins">Cabins</a>
<a href="#onboard">Onboard</a>
<a href="#lounges">Lounges</a>
<a href="#destinations">Destinations</a>
<a href="#loyalty">Le Cercle</a>
</nav>
<div class="nav__cta">
<button class="btn btn--ghost" id="callBtn" type="button">Concierge</button>
<button class="btn btn--gold" id="bookBtn" type="button">Reserve</button>
<button class="nav__burger" id="burger" aria-expanded="false" aria-controls="mobileMenu" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</div>
</header>
<!-- mobile menu -->
<div class="mobile" id="mobileMenu" hidden>
<a href="#cabins">Cabins</a>
<a href="#onboard">Onboard</a>
<a href="#lounges">Lounges</a>
<a href="#destinations">Destinations</a>
<a href="#loyalty">Le Cercle</a>
<button class="btn btn--gold btn--block" data-book type="button">Reserve a Suite</button>
</div>
<main id="top">
<!-- ░░ HERO ░░ -->
<section class="hero" id="hero">
<div class="hero__glow" aria-hidden="true"></div>
<div class="hero__inner reveal">
<p class="eyebrow"><span class="eyebrow__dot"></span> The art of the journey</p>
<h1 class="hero__title">Travel, <em>reimagined</em> as a private<br /> sanctuary in the sky.</h1>
<p class="hero__lede">
Forty private suites. Two flying lounges. A single, unhurried promise — that the most
rewarding part of any voyage should be the hours spent reaching it.
</p>
<div class="hero__actions">
<button class="btn btn--gold btn--lg" data-book type="button">Reserve a Suite</button>
<a class="btn btn--outline btn--lg" href="#cabins">Explore the cabins</a>
</div>
<!-- fare quote -->
<form class="quote" id="quoteForm" aria-label="Fare enquiry">
<div class="quote__field">
<label for="from">From</label>
<input id="from" name="from" value="DXB" autocomplete="off" />
</div>
<span class="quote__swap" aria-hidden="true">→</span>
<div class="quote__field">
<label for="to">To</label>
<input id="to" name="to" value="LHR" autocomplete="off" />
</div>
<div class="quote__field quote__field--sel">
<label for="cabin">Cabin</label>
<select id="cabin" name="cabin">
<option value="first">First Suite</option>
<option value="business">Business Pavilion</option>
<option value="premium">Premium Salon</option>
</select>
</div>
<button class="btn btn--gold quote__go" type="submit">Quote fare</button>
</form>
<p class="quote__out" id="quoteOut" aria-live="polite"></p>
</div>
<div class="hero__stats reveal">
<div><strong class="num" data-count="71">0</strong><span>Boutique destinations</span></div>
<div><strong class="num" data-count="40">0</strong><span>Private suites per A380</span></div>
<div><strong class="num" data-count="98">0</strong><span>% guest return rate</span></div>
<div><strong class="num" data-count="12">0</strong><span>Flying lounges in fleet</span></div>
</div>
</section>
<!-- ░░ CABINS ░░ -->
<section class="section" id="cabins">
<header class="sec-head reveal">
<p class="eyebrow"><span class="eyebrow__dot"></span> Signature cabins</p>
<h2>Three sanctuaries, one altitude.</h2>
<p class="sec-lede">Each cabin is hand-finished in our Geneva atelier — every surface chosen to soften the distance between departure and arrival.</p>
</header>
<div class="cabins" id="cabinGrid">
<article class="cabin reveal" data-cabin="first" tabindex="0">
<div class="cabin__media cabin__media--first" aria-hidden="true"></div>
<div class="cabin__body">
<span class="tag tag--gold">Flagship</span>
<h3>The First Suite</h3>
<p>A fully enclosed private cabin with a sliding burr-walnut door, a separate dressing area and a turn-down bed dressed in Egyptian cotton.</p>
<ul class="cabin__feats">
<li>Floor-to-ceiling sliding doors</li>
<li>Personal mini-bar & vanity</li>
<li>On-call private butler</li>
</ul>
<div class="cabin__foot">
<span class="from">From <strong>$11,400</strong></span>
<button class="btn btn--gold btn--sm" data-book type="button">Reserve</button>
</div>
</div>
</article>
<article class="cabin reveal" data-cabin="business" tabindex="0">
<div class="cabin__media cabin__media--biz" aria-hidden="true"></div>
<div class="cabin__body">
<span class="tag">Most chosen</span>
<h3>Business Pavilion</h3>
<p>A reverse-herringbone pavilion with direct aisle access, a fully flat bed and a private bar to call upon at any altitude.</p>
<ul class="cabin__feats">
<li>1-2-1 direct-aisle layout</li>
<li>Flat bed with memory mattress</li>
<li>Walk-up social bar</li>
</ul>
<div class="cabin__foot">
<span class="from">From <strong>$5,950</strong></span>
<button class="btn btn--gold btn--sm" data-book type="button">Reserve</button>
</div>
</div>
</article>
<article class="cabin reveal" data-cabin="premium" tabindex="0">
<div class="cabin__media cabin__media--prem" aria-hidden="true"></div>
<div class="cabin__body">
<span class="tag">Considered comfort</span>
<h3>Premium Salon</h3>
<p>Wide cradle seating in supple cream leather, with a generous footrest, curated dining and the unmistakable hush of a quiet cabin.</p>
<ul class="cabin__feats">
<li>Extended recline cradle seat</li>
<li>Calfskin amenity pouch</li>
<li>Salon dining on linen</li>
</ul>
<div class="cabin__foot">
<span class="from">From <strong>$2,380</strong></span>
<button class="btn btn--gold btn--sm" data-book type="button">Reserve</button>
</div>
</div>
</article>
</div>
</section>
<!-- ░░ ONBOARD ░░ -->
<section class="section section--ink" id="onboard">
<header class="sec-head reveal">
<p class="eyebrow eyebrow--light"><span class="eyebrow__dot"></span> The onboard experience</p>
<h2>Hours that pass like an evening, not a flight.</h2>
</header>
<div class="onboard reveal">
<button class="ob__tab is-active" data-tab="dining">Dining</button>
<button class="ob__tab" data-tab="rest">Rest & spa</button>
<button class="ob__tab" data-tab="cellar">The Cellar</button>
<button class="ob__tab" data-tab="service">Service</button>
</div>
<div class="ob-panels reveal">
<article class="ob-panel is-active" data-panel="dining">
<div class="ob-panel__txt">
<h3>Dining on demand</h3>
<p>A multi-course menu by Michelin-starred Chef Aurélie Vasseur, served on Limoges porcelain precisely when you wish — there is no meal service, only your timing.</p>
<div class="ob-panel__rows">
<div><span class="k">Caviar</span><span class="v">Oscietra, blini, crème fraîche</span></div>
<div><span class="k">Main</span><span class="v">Saffron lobster, Périgord truffle</span></div>
<div><span class="k">Finish</span><span class="v">Valrhona soufflé, gold leaf</span></div>
</div>
</div>
<div class="ob-panel__art ob-art--dining" aria-hidden="true"></div>
</article>
<article class="ob-panel" data-panel="rest">
<div class="ob-panel__txt">
<h3>Rest & in-flight spa</h3>
<p>Turn-down service, a temperature-balanced suite and a mid-flight spa shower aboard our flagship A380 — arrive composed, never crumpled.</p>
<div class="ob-panel__rows">
<div><span class="k">Bedding</span><span class="v">Egyptian cotton, weighted throw</span></div>
<div><span class="k">Shower</span><span class="v">Heated marble, monogram robe</span></div>
<div><span class="k">Air</span><span class="v">Hospital-grade HEPA, low altitude cabin</span></div>
</div>
</div>
<div class="ob-panel__art ob-art--rest" aria-hidden="true"></div>
</article>
<article class="ob-panel" data-panel="cellar">
<div class="ob-panel__txt">
<h3>The Cellar in the sky</h3>
<p>A rotating list of grand cru and vintage champagne, decanted by a trained sommelier and paired to your menu at no surcharge.</p>
<div class="ob-panel__rows">
<div><span class="k">Champagne</span><span class="v">Krug Grande Cuvée, by the flute</span></div>
<div><span class="k">Red</span><span class="v">Château Margaux, 2009</span></div>
<div><span class="k">Digestif</span><span class="v">Rémy Martin Louis XIII</span></div>
</div>
</div>
<div class="ob-panel__art ob-art--cellar" aria-hidden="true"></div>
</article>
<article class="ob-panel" data-panel="service">
<div class="ob-panel__txt">
<h3>Service, quietly attentive</h3>
<p>A maximum of six guests per host, each trained at our Maison academy to anticipate rather than ask. One name, remembered, for the length of your journey.</p>
<div class="ob-panel__rows">
<div><span class="k">Ratio</span><span class="v">1 host to every 6 guests</span></div>
<div><span class="k">Languages</span><span class="v">Fourteen, on every long-haul</span></div>
<div><span class="k">Pillow menu</span><span class="v">Seven fills, on request</span></div>
</div>
</div>
<div class="ob-panel__art ob-art--service" aria-hidden="true"></div>
</article>
</div>
</section>
<!-- ░░ LOUNGES ░░ -->
<section class="section" id="lounges">
<header class="sec-head reveal">
<p class="eyebrow"><span class="eyebrow__dot"></span> On the ground</p>
<h2>Lounges that feel like a private residence.</h2>
<p class="sec-lede">Step from the kerb into calm. Our flagship lounges offer direct gate transfer by chauffeur, so the journey never breaks stride.</p>
</header>
<div class="lounges">
<article class="lounge reveal">
<div class="lounge__head">
<h3>Dubai · The Atrium</h3>
<span class="status status--open">Open · 24h</span>
</div>
<p>Twelve thousand square metres of marble and palm, with à la carte dining, a hammam spa and a cigar terrace overlooking the apron.</p>
<ul class="lounge__list">
<li>Chauffeured gate transfer</li>
<li>Private dining suites</li>
<li>Hammam & barber</li>
</ul>
</article>
<article class="lounge reveal">
<div class="lounge__head">
<h3>London · The Garden Room</h3>
<span class="status status--open">Open · 04–23h</span>
</div>
<p>A glasshouse lounge wrapped in living greenery beside the runway, with a champagne library and quiet rest cabins for between-flight repose.</p>
<ul class="lounge__list">
<li>Champagne library</li>
<li>Private rest cabins</li>
<li>Fast-track immigration</li>
</ul>
</article>
<article class="lounge reveal">
<div class="lounge__head">
<h3>Singapore · The Pavilion</h3>
<span class="status status--soon">Opening Q4</span>
</div>
<p>An orchid-lined sanctuary with a tea atelier, wellness studio and curated boutique — our most considered ground experience yet.</p>
<ul class="lounge__list">
<li>Tea atelier & pâtisserie</li>
<li>Wellness & recovery studio</li>
<li>Personal shopping</li>
</ul>
</article>
</div>
</section>
<!-- ░░ DESTINATIONS ░░ -->
<section class="section section--cream" id="destinations">
<header class="sec-head reveal">
<p class="eyebrow"><span class="eyebrow__dot"></span> Where we fly</p>
<h2>Seventy-one cities, chosen with care.</h2>
<p class="sec-lede">Filter the network by region. Every route is flown by wide-body aircraft, every arrival timed for a gentle morning.</p>
</header>
<div class="dest-filter reveal" role="tablist" aria-label="Filter destinations">
<button class="chip is-active" data-region="all" role="tab" aria-selected="true">All</button>
<button class="chip" data-region="europe" role="tab" aria-selected="false">Europe</button>
<button class="chip" data-region="asia" role="tab" aria-selected="false">Asia</button>
<button class="chip" data-region="americas" role="tab" aria-selected="false">Americas</button>
<button class="chip" data-region="gulf" role="tab" aria-selected="false">Gulf & Africa</button>
</div>
<div class="dest-grid reveal" id="destGrid">
<article class="dest" data-region="europe"><span class="dest__code">LHR</span><h4>London</h4><p>Daily · A380 · 7h 05m</p></article>
<article class="dest" data-region="europe"><span class="dest__code">CDG</span><h4>Paris</h4><p>Daily · A350 · 6h 50m</p></article>
<article class="dest" data-region="europe"><span class="dest__code">MXP</span><h4>Milan</h4><p>Daily · A350 · 6h 10m</p></article>
<article class="dest" data-region="asia"><span class="dest__code">SIN</span><h4>Singapore</h4><p>2× daily · A380 · 7h 25m</p></article>
<article class="dest" data-region="asia"><span class="dest__code">HND</span><h4>Tokyo</h4><p>Daily · A350 · 9h 40m</p></article>
<article class="dest" data-region="asia"><span class="dest__code">BKK</span><h4>Bangkok</h4><p>Daily · A350 · 6h 30m</p></article>
<article class="dest" data-region="americas"><span class="dest__code">JFK</span><h4>New York</h4><p>Daily · A380 · 14h 10m</p></article>
<article class="dest" data-region="americas"><span class="dest__code">LAX</span><h4>Los Angeles</h4><p>Daily · A350 · 16h 20m</p></article>
<article class="dest" data-region="gulf"><span class="dest__code">CMN</span><h4>Casablanca</h4><p>4× weekly · A350 · 8h 55m</p></article>
<article class="dest" data-region="gulf"><span class="dest__code">CPT</span><h4>Cape Town</h4><p>Daily · A350 · 9h 15m</p></article>
<article class="dest" data-region="gulf"><span class="dest__code">NBO</span><h4>Nairobi</h4><p>5× weekly · A350 · 5h 05m</p></article>
<article class="dest" data-region="europe"><span class="dest__code">ZRH</span><h4>Zürich</h4><p>Daily · A350 · 6h 20m</p></article>
</div>
</section>
<!-- ░░ LOYALTY ░░ -->
<section class="section" id="loyalty">
<div class="loyalty reveal">
<div class="loyalty__txt">
<p class="eyebrow"><span class="eyebrow__dot"></span> Le Cercle</p>
<h2>A membership measured in moments, not miles.</h2>
<p>Le Cercle rewards the way you travel — with guaranteed suite availability, named concierge, and invitations to private events on the ground.</p>
<ul class="loyalty__perks">
<li><span>◆</span> Guaranteed First Suite within 48 hours</li>
<li><span>◆</span> A named, year-round travel concierge</li>
<li><span>◆</span> Chauffeur to and from every flight</li>
<li><span>◆</span> Companion flies complimentary, twice yearly</li>
</ul>
<button class="btn btn--gold btn--lg" id="joinBtn" type="button">Request an invitation</button>
</div>
<div class="loyalty__card" id="memberCard" tabindex="0" aria-label="Le Cercle membership card">
<div class="mcard">
<div class="mcard__top">
<span class="mcard__brand">Le Cercle</span>
<span class="mcard__tier">Noir</span>
</div>
<div class="mcard__chip" aria-hidden="true"></div>
<div class="mcard__num">5071 · 0440 · 1971 · 0008</div>
<div class="mcard__bottom">
<span>É. LAURENT-VASSEUR</span>
<span>MEMBER SINCE ’71</span>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- ░░ FOOTER ░░ -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__brand">
<span class="brand__name">Maison Aurélienne</span>
<p>Boutique air travel, from the Maison atelier in Geneva to forty private suites at thirty-nine thousand feet.</p>
<form class="news" id="newsForm">
<input type="email" id="newsEmail" placeholder="Your email for our journal" aria-label="Email" required />
<button class="btn btn--gold btn--sm" type="submit">Subscribe</button>
</form>
</div>
<nav class="footer__col" aria-label="Travel">
<h4>Travel</h4>
<a href="#cabins">Cabins</a>
<a href="#destinations">Destinations</a>
<a href="#lounges">Lounges</a>
<a href="#onboard">Onboard dining</a>
</nav>
<nav class="footer__col" aria-label="Maison">
<h4>The Maison</h4>
<a href="#loyalty">Le Cercle</a>
<a href="#hero">Our story</a>
<a href="#" data-call>Concierge</a>
<a href="#" data-call>Careers</a>
</nav>
<nav class="footer__col" aria-label="Legal">
<h4>Assurance</h4>
<a href="#">Conditions of carriage</a>
<a href="#">Privacy</a>
<a href="#">Accessibility</a>
</nav>
</div>
<div class="footer__bar">
<span>© 1971–2026 Maison Aurélienne · A fictional boutique airline</span>
<span class="footer__crest">◆ Geneva</span>
</div>
</footer>
<!-- toast -->
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Premium Boutique Landing
A full marketing landing page for Maison Aurélienne, a fictional boutique airline styled after opulent hospitality brands. The palette pairs deep red with cream and gold, and a Cormorant Garamond serif carries the headlines while Inter handles the precise, tabular figures for fares, times and flight numbers. The page runs nav to footer: a cinematic hero, three signature cabins, a tabbed onboard experience, ground lounges, a destination network, a loyalty section and a layered footer.
The hero includes a working fare quoter — pick origin, destination and cabin, and it returns a deterministic, clearly fictional all-inclusive fare while a toast confirms the route. The onboard section swaps between Dining, Rest & spa, The Cellar and Service through animated tab panels, the destination grid filters live by region with a running count, and the stat counters tick up on first scroll into view. Lounges carry On time / Opening-soon status pills, and the Le Cercle membership card tilts in 3D on hover or focus.
Everything is self-contained vanilla HTML, CSS and JavaScript — no frameworks or build step. Interactions degrade gracefully, the layout reflows cleanly down to ~360px with a slide-out mobile menu, and prefers-reduced-motion disables the reveal and counter animations. A small toast() helper backs the booking, concierge, membership and newsletter actions.
Illustrative UI only — fictional airline, not a real booking or flight system.