Сторінки Складна
Salon — Med-Spa / Aesthetic Landing
A physician-led med-spa marketing landing for Maison Lumière Aesthetics, dressed in a pearl, champagne and soft-pink palette with clinical Cormorant Garamond display type over Inter. It pairs a translucent sticky nav and a luminous hero with a live consultation card, a filterable twelve-card treatment menu, a dark animated outcomes band, a medical safety charter, a featured provider spotlight, and a validating consultation request form with elegant toast confirmations — all reveal-on-scroll and responsive to 360px.
Відкрити в Lab
MCP
html css vanilla-js
Цілі: JS HTML
Код
/* ░░░░░ Maison Lumière — Med-Spa Landing ░░░░░ */
:root {
/* palette override — pearl + champagne + soft pink */
--pearl: #f4efe9;
--champagne: #e7d3b8;
--champ-d: #c4a878;
--champ-dd: #a8884f;
--pink: #e9c4cb;
--pink-soft: #f6e7ea;
--ink: #2b2530;
--ink-2: #4a4350;
--muted: #897f8c;
--bg: #faf6f2;
--white: #ffffff;
--cream: #fbf7f1;
--line: rgba(43, 37, 48, 0.1);
--line-2: rgba(43, 37, 48, 0.18);
--ok: #5f8a6b;
--warn: #c08a3e;
--danger: #b3503e;
--serif: "Cormorant Garamond", Georgia, serif;
--sans: "Inter", system-ui, -apple-system, sans-serif;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--sh-sm: 0 1px 2px rgba(43, 37, 48, 0.05), 0 6px 18px rgba(43, 37, 48, 0.05);
--sh-md: 0 10px 30px rgba(43, 37, 48, 0.08);
--sh-lg: 0 24px 60px rgba(43, 37, 48, 0.12);
--max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 16px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 28px; }
.skip-link {
position: absolute; left: 12px; top: -60px;
background: var(--ink); color: var(--pearl);
padding: 10px 16px; border-radius: var(--r-sm); z-index: 200;
transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
.eyebrow {
font-size: 11px; font-weight: 600; letter-spacing: .22em;
text-transform: uppercase; color: var(--champ-dd); margin: 0 0 14px;
}
.eyebrow--light { color: var(--champagne); }
/* ░░ buttons ░░ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--sans); font-size: 14px; font-weight: 600;
padding: 13px 24px; border-radius: 999px; cursor: pointer;
border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--champ-dd); outline-offset: 3px; }
.btn--solid {
background: linear-gradient(135deg, var(--ink) 0%, #3a3240 100%);
color: var(--pearl); box-shadow: var(--sh-sm);
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--ghost {
background: transparent; color: var(--ink); border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--champ-d); background: var(--white); transform: translateY(-2px); }
.btn--block { width: 100%; }
/* ░░ nav ░░ */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(250, 246, 242, 0.72);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(43,37,48,.06); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
display: grid; place-items: center;
width: 40px; height: 40px; border-radius: 11px;
background: linear-gradient(135deg, var(--champagne), var(--pink));
color: var(--ink); font-family: var(--serif); font-weight: 700; font-size: 18px;
letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.15; }
.brand__txt strong { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.brand__txt em { font-style: normal; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
font-size: 14px; font-weight: 500; color: var(--ink-2);
padding: 9px 14px; border-radius: 999px; transition: color .18s ease, background .18s ease;
}
.nav__links a:hover { color: var(--ink); background: rgba(196,168,120,.14); }
.nav__links a.is-active { color: var(--champ-dd); }
.nav__cta {
background: var(--ink); color: var(--pearl) !important; margin-left: 8px;
}
.nav__cta:hover { background: #3a3240 !important; }
.nav__toggle {
display: none; flex-direction: column; gap: 5px; justify-content: center;
width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 11px;
background: var(--white); cursor: pointer;
}
.nav__toggle span { display: block; width: 20px; height: 1.8px; background: var(--ink); margin-inline: auto; transition: transform .25s ease, opacity .25s ease; }
.nav__toggle.is-open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2) { opacity: 0; }
.nav__toggle.is-open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }
/* ░░ hero ░░ */
.hero { position: relative; overflow: hidden; padding: 64px 0 78px; }
.hero__glow {
position: absolute; inset: -20% -10% auto -10%; height: 560px; z-index: 0;
background:
radial-gradient(ellipse 40% 60% at 22% 18%, rgba(233,196,203,.55), transparent 70%),
radial-gradient(ellipse 46% 56% at 82% 8%, rgba(231,211,184,.6), transparent 72%);
filter: blur(6px); pointer-events: none;
}
.hero__inner {
position: relative; z-index: 1;
display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center;
}
.hero h1 { font-size: clamp(40px, 6vw, 72px); letter-spacing: -.01em; margin-bottom: 22px; }
.hero h1 span { font-style: italic; color: var(--champ-dd); }
.lede { font-size: 18px; color: var(--ink-2); max-width: 46ch; margin-bottom: 30px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 38px; }
.hero__trust { list-style: none; display: flex; gap: 34px; padding: 26px 0 0; margin: 0; border-top: 1px solid var(--line); }
.hero__trust li { display: flex; flex-direction: column; }
.hero__trust strong { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.hero__trust span { font-size: 12.5px; color: var(--muted); }
.hero__card {
background: var(--white); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-lg);
position: relative;
}
.hero__card::before {
content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); padding: 1px;
background: linear-gradient(140deg, rgba(231,211,184,.9), rgba(233,196,203,.6), transparent 60%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.hero__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hero__rating { color: var(--champ-d); font-size: 13px; letter-spacing: 2px; }
.hero__card h2 { font-size: 26px; margin-bottom: 8px; }
.hero__card > p { font-size: 14px; color: var(--ink-2); }
.hero__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 22px 0; padding: 18px 0; border-block: 1px solid var(--line); }
.hero__meta dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.hero__meta dd { margin: 0; font-size: 15px; font-weight: 600; }
.hero__meta s { color: var(--muted); font-weight: 400; }
.hero__card-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 12px; }
.pill {
display: inline-flex; align-items: center; gap: 7px;
font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
background: var(--pink-soft); color: var(--ink); border: 1px solid rgba(233,196,203,.6);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(95,138,107,.18); }
.pill.is-closed::before { background: var(--muted); box-shadow: 0 0 0 3px rgba(137,127,140,.18); }
/* ░░ logos / accreditation marquee ░░ */
.logos { border-block: 1px solid var(--line); background: var(--cream); }
.logos__inner {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px;
padding: 22px 28px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--muted); font-weight: 600;
}
.logos__inner i { color: var(--champ-d); font-style: normal; }
/* ░░ sections ░░ */
.section { padding: 86px 0; }
.section__head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.section__head--left { text-align: left; margin: 0; }
.section__title { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.01em; }
.section__sub { margin-top: 16px; font-size: 16.5px; color: var(--ink-2); }
/* ░░ filters ░░ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.chip {
font-family: var(--sans); font-size: 13px; font-weight: 600;
padding: 9px 18px; border-radius: 999px; cursor: pointer;
background: var(--white); color: var(--ink-2); border: 1px solid var(--line-2);
transition: all .18s ease;
}
.chip:hover { border-color: var(--champ-d); color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--pearl); border-color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--champ-dd); outline-offset: 2px; }
/* ░░ treatment grid ░░ */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
position: relative; background: var(--white); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 26px 24px; overflow: hidden;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
display: flex; flex-direction: column;
}
.card::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, var(--champagne), var(--pink));
transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(196,168,120,.45); }
.card:hover::before { transform: scaleX(1); }
.card__icon {
width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
background: var(--pink-soft); font-size: 22px; margin-bottom: 18px;
}
.card__cat { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--champ-dd); font-weight: 600; }
.card__name { font-size: 23px; margin: 6px 0 8px; }
.card__desc { font-size: 14px; color: var(--ink-2); flex: 1; }
.card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.card__price { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.card__price small { font-family: var(--sans); font-size: 11px; color: var(--muted); font-weight: 400; }
.card__book {
font-size: 12.5px; font-weight: 600; color: var(--ink);
padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2);
background: transparent; cursor: pointer; transition: all .18s ease;
}
.card__book:hover { background: var(--ink); color: var(--pearl); border-color: var(--ink); }
.card.is-hidden { display: none; }
/* ░░ outcomes band ░░ */
.band {
background:
radial-gradient(ellipse 60% 120% at 80% 0%, rgba(196,168,120,.16), transparent 60%),
linear-gradient(150deg, #2b2530, #38303f);
color: var(--pearl); padding: 76px 0; margin: 0;
}
.band__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.band__head h2 { color: var(--pearl); font-size: clamp(28px, 3.5vw, 40px); }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 36px; }
.stats li { border-left: 1px solid rgba(231,211,184,.3); padding-left: 18px; }
.stats strong { display: block; font-family: var(--serif); font-size: clamp(36px, 5vw, 52px); font-weight: 600; color: var(--champagne); line-height: 1; }
.stats span { font-size: 13px; color: rgba(244,239,233,.72); margin-top: 6px; display: block; }
/* ░░ safety ░░ */
.safety__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: 14px; font-weight: 600; color: var(--champ-dd); }
.link-arrow span { transition: transform .2s ease; }
.link-arrow:hover span { transform: translateX(4px); }
.safety__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.safety__list li { display: flex; gap: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px; transition: box-shadow .2s ease; }
.safety__list li:hover { box-shadow: var(--sh-sm); }
.safety__tick { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-soft); color: var(--champ-dd); font-weight: 700; font-size: 14px; }
.safety__list strong { display: block; font-size: 15.5px; margin-bottom: 3px; }
.safety__list p { font-size: 13.5px; color: var(--muted); }
/* ░░ provider ░░ */
.provider { background: var(--cream); border-block: 1px solid var(--line); }
.provider__inner { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.provider__portrait { position: relative; }
.provider__avatar {
aspect-ratio: 4/5; border-radius: var(--r-lg);
background:
radial-gradient(ellipse at 30% 20%, rgba(233,196,203,.85), transparent 60%),
linear-gradient(160deg, var(--champagne), var(--pink));
display: grid; place-items: center; font-family: var(--serif); font-size: 96px; font-weight: 600; color: rgba(43,37,48,.32);
box-shadow: var(--sh-md);
}
.provider__chip {
position: absolute; bottom: 18px; left: 18px;
background: var(--white); color: var(--ink); font-size: 12px; font-weight: 600;
padding: 8px 14px; border-radius: 999px; box-shadow: var(--sh-sm);
}
.provider__role { color: var(--champ-dd); font-weight: 600; font-size: 14px; margin: 8px 0 14px; }
.provider__copy > p { font-size: 16px; color: var(--ink-2); max-width: 52ch; }
.provider__creds { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0 24px; }
.provider__creds li { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; }
.provider__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.provider__wait { font-size: 13px; color: var(--muted); }
/* ░░ consult ░░ */
.consult__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.consult__points { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.consult__points li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); }
.consult__points li::before { content: "✦"; position: absolute; left: 0; color: var(--champ-d); }
.consult__phone { margin-top: 26px; font-size: 14px; color: var(--muted); }
.consult__phone a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--champ-d); }
.consult__form {
background: var(--white); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-md);
display: grid; gap: 16px;
}
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label, .consent { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.optional { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
font-family: var(--sans); font-size: 15px; color: var(--ink);
padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
background: var(--cream); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
width: 100%;
}
.field textarea { resize: vertical; min-height: 56px; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--champ-d); background: var(--white);
box-shadow: 0 0 0 3px rgba(196,168,120,.16);
}
.field input.is-invalid, .field select.is-invalid { border-color: var(--danger); background: #fdf3f1; }
.err { font-size: 12px; color: var(--danger); min-height: 0; display: none; }
.err.is-shown { display: block; }
.err--consent { margin-top: -8px; }
.consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; color: var(--ink-2); font-size: 13.5px; }
.consent input { margin-top: 2px; accent-color: var(--champ-dd); width: 16px; height: 16px; flex: none; }
.consult__fine { font-size: 11.5px; color: var(--muted); text-align: center; }
/* ░░ footer ░░ */
.footer { background: var(--ink); color: rgba(244,239,233,.78); padding: 60px 0 26px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(244,239,233,.12); }
.footer__brand .brand__mark { margin-bottom: 14px; }
.footer__brand strong { font-family: var(--serif); font-size: 18px; color: var(--pearl); }
.footer__addr { margin-top: 10px; font-size: 13px; }
.footer__col h3 { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--champagne); margin-bottom: 16px; font-weight: 600; }
.footer__col a, .footer__col p { display: block; font-size: 14px; color: rgba(244,239,233,.74); margin-bottom: 10px; transition: color .18s ease; }
.footer__col a:hover { color: var(--pearl); }
.footer__status { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.footer__status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.footer__status.is-closed .dot { background: var(--muted); }
.footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 22px; font-size: 12.5px; color: rgba(244,239,233,.5); }
/* ░░ toast ░░ */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 120%);
background: var(--ink); color: var(--pearl); padding: 14px 22px; border-radius: 999px;
font-size: 14px; font-weight: 500; box-shadow: var(--sh-lg); z-index: 300;
display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 40px);
opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
.toast::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--champagne); color: var(--ink); font-size: 12px; font-weight: 700; }
.toast.is-error::before { content: "!"; background: var(--danger); color: #fff; }
/* ░░ reveal ░░ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
/* ░░ responsive ░░ */
@media (max-width: 940px) {
.hero__inner { grid-template-columns: 1fr; gap: 40px; }
.band__inner, .safety__grid, .provider__inner, .consult__inner { grid-template-columns: 1fr; gap: 36px; }
.grid { grid-template-columns: repeat(2, 1fr); }
.footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav__links {
position: absolute; top: 74px; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 4px;
background: var(--bg); border-bottom: 1px solid var(--line);
padding: 14px 20px 22px; box-shadow: var(--sh-md);
transform: translateY(-12px); opacity: 0; pointer-events: none;
transition: transform .25s ease, opacity .25s ease;
}
.nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
.nav__links a { padding: 12px 14px; border-radius: var(--r-sm); }
.nav__cta { margin-left: 0; text-align: center; margin-top: 4px; }
.nav__toggle { display: flex; }
}
@media (max-width: 520px) {
.wrap { padding-inline: 18px; }
.hero { padding: 40px 0 54px; }
.section { padding: 60px 0; }
.hero__trust { gap: 22px; flex-wrap: wrap; }
.grid { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr; gap: 28px; }
.stats { grid-template-columns: 1fr; }
.hero__card { padding: 22px; }
.consult__form { padding: 22px; }
.band { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
* { transition-duration: .01ms !important; }
}/* ░░░░░ Maison Lumière — Med-Spa Landing ░░░░░ */
(function () {
"use strict";
/* ── tiny helpers ── */
const $ = (sel, ctx) => (ctx || document).querySelector(sel);
const $$ = (sel, ctx) => Array.from((ctx || document).querySelectorAll(sel));
let toastTimer;
function toast(msg, isError) {
const el = $("#toast");
if (!el) return;
el.textContent = msg;
el.classList.toggle("is-error", !!isError);
el.classList.add("is-shown");
clearTimeout(toastTimer);
toastTimer = setTimeout(() => el.classList.remove("is-shown"), 3600);
}
/* ── treatment data ── */
const TREATMENTS = [
{ cat: "injectables", icon: "💉", name: "Anti-Wrinkle Injections", desc: "Softening dynamic lines across forehead, frown and crow's feet with a light, natural touch.", price: "£195", unit: "/ 1 area" },
{ cat: "injectables", icon: "✦", name: "Dermal Fillers", desc: "Hyaluronic restoration for lips, cheeks and jawline — sculpted to your facial proportions.", price: "£290", unit: "/ 1ml" },
{ cat: "injectables", icon: "◇", name: "Profhilo® Bio-Remodelling", desc: "Injectable skin-quality treatment that hydrates and firms from within. Course of two.", price: "£350", unit: "/ session" },
{ cat: "laser", icon: "⚡", name: "Laser Skin Resurfacing", desc: "Fractional resurfacing to refine texture, pores and pigmentation with minimal downtime.", price: "£420", unit: "/ session" },
{ cat: "laser", icon: "✷", name: "Laser Hair Removal", desc: "Medical-grade diode laser, safe across all skin tones. Permanent reduction over a course.", price: "£90", unit: "/ small area" },
{ cat: "laser", icon: "❋", name: "IPL Photorejuvenation", desc: "Intense pulsed light to even tone, fade redness and restore a luminous, healthy glow.", price: "£180", unit: "/ session" },
{ cat: "skin", icon: "🜄", name: "Medical Peels", desc: "Physician-strength peels tailored to acne, ageing or pigmentation under medical oversight.", price: "£120", unit: "/ session" },
{ cat: "skin", icon: "❀", name: "SkinPen® Microneedling", desc: "Collagen induction therapy for scarring, fine lines and overall skin resilience.", price: "£175", unit: "/ session" },
{ cat: "skin", icon: "✶", name: "Prescription Skincare Plan", desc: "Bespoke medical-grade regimen with VISIA imaging and a 12-week review pathway.", price: "£85", unit: "/ consult" },
{ cat: "body", icon: "◈", name: "CoolSculpting® Cryolipolysis", desc: "Non-surgical fat reduction that freezes and clears stubborn pockets over weeks.", price: "£600", unit: "/ cycle" },
{ cat: "body", icon: "▣", name: "Radiofrequency Skin Tightening", desc: "Deep-tissue heating to firm lax skin on body and neck — no incisions, no downtime.", price: "£240", unit: "/ session" },
{ cat: "body", icon: "❖", name: "EMSculpt® Muscle Toning", desc: "High-intensity electromagnetic stimulation to build muscle and define core and limbs.", price: "£320", unit: "/ session" }
];
const CAT_LABEL = {
injectables: "Injectables",
laser: "Laser & Energy",
skin: "Skin & Peels",
body: "Body Contouring"
};
/* ── render treatment cards ── */
function renderCards() {
const grid = $("#treatmentGrid");
if (!grid) return;
grid.innerHTML = TREATMENTS.map((t, i) => `
<article class="card reveal" data-cat="${t.cat}" style="transition-delay:${(i % 3) * 70}ms">
<span class="card__icon" aria-hidden="true">${t.icon}</span>
<span class="card__cat">${CAT_LABEL[t.cat]}</span>
<h3 class="card__name">${t.name}</h3>
<p class="card__desc">${t.desc}</p>
<div class="card__foot">
<span class="card__price">${t.price} <small>${t.unit}</small></span>
<button class="card__book" type="button" data-name="${t.name}">Enquire</button>
</div>
</article>
`).join("");
// observe newly created reveal nodes
$$(".card.reveal", grid).forEach((el) => revealObserver.observe(el));
// enquire buttons → prefill form + scroll
$$(".card__book", grid).forEach((btn) => {
btn.addEventListener("click", () => {
const name = btn.getAttribute("data-name");
const card = btn.closest(".card");
const cat = card ? card.getAttribute("data-cat") : "";
const select = $("#cTreatment");
if (select) {
const map = {
injectables: "Injectables & anti-wrinkle",
laser: "Laser & skin resurfacing",
skin: "Medical-grade skincare & peels",
body: "Body contouring"
};
const wanted = map[cat];
const opt = $$("#cTreatment option").find((o) => o.value === wanted || o.textContent.trim() === wanted);
if (opt) select.value = opt.value || opt.textContent;
}
$("#consult").scrollIntoView({ behavior: "smooth", block: "start" });
toast(`${name} added to your consultation request.`);
setTimeout(() => { const f = $("#cName"); if (f) f.focus(); }, 600);
});
});
}
/* ── filters ── */
function initFilters() {
const filters = $("#filters");
if (!filters) return;
filters.addEventListener("click", (e) => {
const chip = e.target.closest(".chip");
if (!chip) return;
$$(".chip", filters).forEach((c) => {
c.classList.toggle("is-active", c === chip);
c.setAttribute("aria-selected", c === chip ? "true" : "false");
});
const f = chip.getAttribute("data-filter");
let shown = 0;
$$(".card", $("#treatmentGrid")).forEach((card) => {
const match = f === "all" || card.getAttribute("data-cat") === f;
card.classList.toggle("is-hidden", !match);
if (match) shown++;
});
toast(`${shown} treatment${shown === 1 ? "" : "s"} shown.`);
});
}
/* ── reveal on scroll ── */
const revealObserver = ("IntersectionObserver" in window)
? new IntersectionObserver((entries, obs) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-in");
obs.unobserve(entry.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" })
: null;
function initReveal() {
if (!revealObserver) { $$(".reveal").forEach((el) => el.classList.add("is-in")); return; }
$$(".reveal").forEach((el) => revealObserver.observe(el));
}
/* ── animated counters ── */
function animateCount(el) {
const target = parseFloat(el.getAttribute("data-count"));
const decimals = parseInt(el.getAttribute("data-decimals") || "0", 10);
const suffix = el.getAttribute("data-suffix") || "";
const dur = 1400;
const start = performance.now();
function tick(now) {
const p = Math.min((now - start) / dur, 1);
const eased = 1 - Math.pow(1 - p, 3);
const val = target * eased;
const out = decimals ? val.toFixed(decimals) : Math.round(val).toLocaleString("en-GB");
el.textContent = out + suffix;
if (p < 1) requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
}
function initCounters() {
const nums = $$("[data-count]");
if (!nums.length) return;
if (!("IntersectionObserver" in window)) { nums.forEach(animateCount); return; }
const obs = new IntersectionObserver((entries, o) => {
entries.forEach((e) => {
if (e.isIntersecting) { animateCount(e.target); o.unobserve(e.target); }
});
}, { threshold: 0.5 });
nums.forEach((n) => obs.observe(n));
}
/* ── sticky nav shadow + active link ── */
function initNav() {
const nav = $("#nav");
const onScroll = () => nav.classList.toggle("is-stuck", window.scrollY > 8);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
const links = $$(".nav__links a[href^='#']");
const sections = links
.map((a) => $(a.getAttribute("href")))
.filter(Boolean);
if ("IntersectionObserver" in window && sections.length) {
const spy = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
const id = "#" + e.target.id;
links.forEach((a) => a.classList.toggle("is-active", a.getAttribute("href") === id));
}
});
}, { rootMargin: "-45% 0px -50% 0px" });
sections.forEach((s) => spy.observe(s));
}
}
/* ── mobile menu ── */
function initMobileMenu() {
const toggle = $("#navToggle");
const links = $("#navLinks");
if (!toggle || !links) return;
const close = () => {
toggle.classList.remove("is-open");
links.classList.remove("is-open");
toggle.setAttribute("aria-expanded", "false");
toggle.setAttribute("aria-label", "Open menu");
};
toggle.addEventListener("click", () => {
const open = toggle.classList.toggle("is-open");
links.classList.toggle("is-open", open);
toggle.setAttribute("aria-expanded", open ? "true" : "false");
toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
$$("a", links).forEach((a) => a.addEventListener("click", close));
document.addEventListener("keydown", (e) => { if (e.key === "Escape") close(); });
}
/* ── availability / hours ── */
function initAvailability() {
const now = new Date();
const day = now.getDay(); // 0 Sun .. 6 Sat
const hour = now.getHours();
const open = day !== 0 && hour >= 9 && hour < 19; // Mon–Sat 9–19
const pill = $("#availPill");
if (pill) {
pill.textContent = open ? "Open now · accepting bookings" : "Closed · book online 24/7";
pill.classList.toggle("is-closed", !open);
}
const footStatus = $("#footStatus");
if (footStatus) {
footStatus.innerHTML = `<span class="dot" aria-hidden="true"></span>${open ? "Open now" : "Closed · opens 09:00"}`;
footStatus.classList.toggle("is-closed", !open);
}
// next opening: next weekday at a tidy half-hour
const slot = $("#nextSlot");
if (slot) {
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
let d = new Date(now);
if (open) {
d.setHours(hour + 1, 30, 0, 0);
slot.textContent = `Today, ${pad(d.getHours())}:30`;
} else {
do { d.setDate(d.getDate() + 1); } while (d.getDay() === 0);
slot.textContent = `${days[d.getDay()]}, 09:30`;
}
}
}
function pad(n) { return String(n).padStart(2, "0"); }
/* ── provider wait (lightly dynamic) ── */
function initProviderWait() {
const el = $("#providerWait");
if (!el) return;
const days = 7 + (new Date().getDate() % 6);
el.textContent = `Typical wait: ${days} days`;
}
/* ── consultation form validation ── */
function initForm() {
const form = $("#consultForm");
if (!form) return;
// set min date = tomorrow
const dateInput = $("#cDate");
if (dateInput) {
const t = new Date();
t.setDate(t.getDate() + 1);
dateInput.min = t.toISOString().split("T")[0];
}
const setErr = (id, msg) => {
const input = $("#" + id);
const err = $(`.err[data-for="${id}"]`);
if (input) input.classList.toggle("is-invalid", !!msg);
if (err) { err.textContent = msg || ""; err.classList.toggle("is-shown", !!msg); }
return !msg;
};
const emailOk = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
const phoneOk = (v) => v.replace(/[^\d]/g, "").length >= 7;
// live-clear on input
$$("input, select, textarea", form).forEach((el) => {
el.addEventListener("input", () => {
const id = el.id;
const err = $(`.err[data-for="${id}"]`);
if (err && err.classList.contains("is-shown")) {
el.classList.remove("is-invalid");
err.classList.remove("is-shown");
}
});
});
form.addEventListener("submit", (e) => {
e.preventDefault();
let ok = true;
ok = setErr("cName", $("#cName").value.trim().length >= 2 ? "" : "Please enter your full name.") && ok;
ok = setErr("cEmail", emailOk($("#cEmail").value.trim()) ? "" : "Enter a valid email address.") && ok;
ok = setErr("cPhone", phoneOk($("#cPhone").value.trim()) ? "" : "Enter a contactable phone number.") && ok;
ok = setErr("cTreatment", $("#cTreatment").value ? "" : "Choose an area of interest.") && ok;
ok = setErr("cDate", $("#cDate").value ? "" : "Pick a preferred date.") && ok;
const consent = $("#cConsent");
const consentErr = $('.err[data-for="cConsent"]');
if (!consent.checked) {
if (consentErr) { consentErr.textContent = "Please tick to proceed."; consentErr.classList.add("is-shown"); }
ok = false;
} else if (consentErr) {
consentErr.classList.remove("is-shown");
}
if (!ok) {
toast("Please check the highlighted fields.", true);
const firstInvalid = $(".is-invalid", form) || (!consent.checked ? consent : null);
if (firstInvalid) firstInvalid.focus();
return;
}
const name = $("#cName").value.trim().split(" ")[0];
const btn = $("button[type=submit]", form);
btn.disabled = true;
btn.textContent = "Sending…";
setTimeout(() => {
form.reset();
btn.disabled = false;
btn.textContent = "Request consultation";
toast(`Thank you, ${name}. We'll confirm within one working day.`);
}, 700);
});
}
/* ── year ── */
function initYear() {
const y = $("#year");
if (y) y.textContent = new Date().getFullYear();
}
/* ── boot ── */
function init() {
renderCards();
initFilters();
initReveal();
initCounters();
initNav();
initMobileMenu();
initAvailability();
initProviderWait();
initForm();
initYear();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aesthetic Clinic · Maison Lumière Aesthetics</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@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- ░░ NAV ░░ -->
<header class="nav" id="nav">
<div class="wrap nav__inner">
<a class="brand" href="#top" aria-label="Maison Lumière Aesthetics, home">
<span class="brand__mark" aria-hidden="true">ML</span>
<span class="brand__txt">
<strong>Maison Lumière</strong>
<em>Aesthetics & Medical Spa</em>
</span>
</a>
<nav class="nav__links" id="navLinks" aria-label="Primary">
<a href="#treatments">Treatments</a>
<a href="#outcomes">Outcomes</a>
<a href="#safety">Safety</a>
<a href="#provider">Providers</a>
<a href="#consult" class="nav__cta">Book consultation</a>
</nav>
<button class="nav__toggle" id="navToggle" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<main id="main">
<span id="top"></span>
<!-- ░░ HERO ░░ -->
<section class="hero">
<div class="hero__glow" aria-hidden="true"></div>
<div class="wrap hero__inner">
<div class="hero__copy reveal">
<p class="eyebrow">Board-certified · CQC-aligned · Since 2009</p>
<h1>Aesthetic medicine,<br /><span>artfully delivered.</span></h1>
<p class="lede">
A physician-led clinic where clinical precision meets a quieter kind of luxury.
Natural-looking results, evidence-based protocols, and care designed around your
anatomy — never a template.
</p>
<div class="hero__actions">
<a href="#consult" class="btn btn--solid">Book a consultation</a>
<a href="#treatments" class="btn btn--ghost">Explore treatments</a>
</div>
<ul class="hero__trust" aria-label="Highlights">
<li><strong>4.9★</strong><span>1,280+ reviews</span></li>
<li><strong>22,000+</strong><span>treatments delivered</span></li>
<li><strong>0.4%</strong><span>complication rate</span></li>
</ul>
</div>
<aside class="hero__card reveal" aria-label="Next available consultation">
<div class="hero__card-top">
<span class="pill" id="availPill">Checking availability…</span>
<span class="hero__rating" aria-hidden="true">★★★★★</span>
</div>
<h2>Complimentary skin consultation</h2>
<p>45 minutes with a medical aesthetician. VISIA imaging & a written treatment plan, no obligation.</p>
<dl class="hero__meta">
<div><dt>Next opening</dt><dd id="nextSlot">—</dd></div>
<div><dt>Location</dt><dd>Marylebone, London</dd></div>
<div><dt>Consult fee</dt><dd>£0 <s>£95</s></dd></div>
</dl>
<a href="#consult" class="btn btn--solid btn--block">Reserve my place</a>
<p class="hero__card-note">Fully redeemable against any first treatment.</p>
</aside>
</div>
</section>
<!-- ░░ ACCREDITATION MARQUEE ░░ -->
<section class="logos reveal" aria-label="Accreditations">
<div class="wrap logos__inner">
<span>GMC Registered</span><i aria-hidden="true">·</i>
<span>JCCP Practitioner</span><i aria-hidden="true">·</i>
<span>Save Face Accredited</span><i aria-hidden="true">·</i>
<span>CQC Aligned</span><i aria-hidden="true">·</i>
<span>BCAM Member</span>
</div>
</section>
<!-- ░░ TREATMENTS ░░ -->
<section class="section" id="treatments">
<div class="wrap">
<header class="section__head reveal">
<p class="eyebrow">The menu</p>
<h2 class="section__title">Treatments, by concern</h2>
<p class="section__sub">Filter our core modalities. Every plan begins with a consultation and a face-to-face medical assessment.</p>
</header>
<div class="filters reveal" role="tablist" aria-label="Treatment categories" id="filters">
<button class="chip is-active" role="tab" aria-selected="true" data-filter="all">All</button>
<button class="chip" role="tab" aria-selected="false" data-filter="injectables">Injectables</button>
<button class="chip" role="tab" aria-selected="false" data-filter="laser">Laser & Energy</button>
<button class="chip" role="tab" aria-selected="false" data-filter="skin">Skin & Peels</button>
<button class="chip" role="tab" aria-selected="false" data-filter="body">Body Contouring</button>
</div>
<div class="grid" id="treatmentGrid">
<!-- cards injected by script.js -->
</div>
</div>
</section>
<!-- ░░ OUTCOMES STAT BAND ░░ -->
<section class="band reveal" id="outcomes" aria-label="Outcomes">
<div class="wrap band__inner">
<div class="band__head">
<p class="eyebrow eyebrow--light">Measured outcomes</p>
<h2>Results we can show you in numbers.</h2>
</div>
<ul class="stats">
<li><strong data-count="97" data-suffix="%">0</strong><span>would return & refer</span></li>
<li><strong data-count="22480" data-suffix="">0</strong><span>treatments since 2009</span></li>
<li><strong data-count="14" data-suffix=" yrs">0</strong><span>physician-led practice</span></li>
<li><strong data-count="4.9" data-decimals="1" data-suffix="★">0</strong><span>average client rating</span></li>
</ul>
</div>
</section>
<!-- ░░ SAFETY / CREDENTIALS ░░ -->
<section class="section" id="safety">
<div class="wrap safety__grid">
<header class="section__head section__head--left reveal">
<p class="eyebrow">Safety first</p>
<h2 class="section__title">Medical standards, not beauty-counter promises.</h2>
<p class="section__sub">
Every treatment is prescribed and overseen by a GMC-registered doctor. We hold full
medical malpractice cover, follow strict aftercare protocols, and never sell what you
don't need.
</p>
<a href="#consult" class="link-arrow">Read our safety charter <span aria-hidden="true">→</span></a>
</header>
<ul class="safety__list">
<li class="reveal"><span class="safety__tick" aria-hidden="true">✓</span><div><strong>Prescriber on site</strong><p>A doctor reviews every plan before any product is administered.</p></div></li>
<li class="reveal"><span class="safety__tick" aria-hidden="true">✓</span><div><strong>Genuine pharmaceuticals</strong><p>Traceable, cold-chain stock from licensed UK pharmacies only.</p></div></li>
<li class="reveal"><span class="safety__tick" aria-hidden="true">✓</span><div><strong>Complication pathway</strong><p>Hyalase on site and a 24/7 medical line for every patient.</p></div></li>
<li class="reveal"><span class="safety__tick" aria-hidden="true">✓</span><div><strong>Cooling-off period</strong><p>A considered 48-hour reflection window before first treatment.</p></div></li>
</ul>
</div>
</section>
<!-- ░░ PROVIDER SPOTLIGHT ░░ -->
<section class="section provider" id="provider">
<div class="wrap provider__inner reveal">
<div class="provider__portrait" aria-hidden="true">
<div class="provider__avatar">AV</div>
<span class="provider__chip">Lead Physician</span>
</div>
<div class="provider__copy">
<p class="eyebrow">Provider spotlight</p>
<h2 class="section__title">Dr. Aria Vance, MBBS</h2>
<p class="provider__role">Medical Director · Cosmetic Physician · 14 years in aesthetics</p>
<p>
Aria trained in dermatology before dedicating her practice to facial aesthetics. Known
for a restrained, anatomy-led approach, she lectures internationally on safe injecting
and natural-result protocols.
</p>
<ul class="provider__creds">
<li>GMC No. 7•••42</li>
<li>Allergan Faculty Trainer</li>
<li>Level 7 Aesthetic Medicine</li>
</ul>
<div class="provider__cta">
<a href="#consult" class="btn btn--solid">Request Dr. Vance</a>
<span class="provider__wait" id="providerWait">Typical wait: 9 days</span>
</div>
</div>
</div>
</section>
<!-- ░░ CONSULTATION CTA / FORM ░░ -->
<section class="section consult" id="consult">
<div class="wrap consult__inner">
<div class="consult__copy reveal">
<p class="eyebrow">Begin here</p>
<h2 class="section__title">Request your consultation</h2>
<p class="section__sub">Tell us a little about your goals. A patient coordinator replies within one working day to confirm your appointment.</p>
<ul class="consult__points">
<li>No pressure, no hard sell — ever.</li>
<li>Written, itemised treatment plan provided.</li>
<li>£95 consultation fee waived this season.</li>
</ul>
<p class="consult__phone">Prefer to talk? <a href="tel:+442070000000">+44 20 7000 0000</a></p>
</div>
<form class="consult__form reveal" id="consultForm" novalidate>
<div class="field">
<label for="cName">Full name</label>
<input id="cName" name="name" type="text" autocomplete="name" placeholder="Eleanor Ashby" required />
<small class="err" data-for="cName"></small>
</div>
<div class="field-row">
<div class="field">
<label for="cEmail">Email</label>
<input id="cEmail" name="email" type="email" autocomplete="email" placeholder="[email protected]" required />
<small class="err" data-for="cEmail"></small>
</div>
<div class="field">
<label for="cPhone">Phone</label>
<input id="cPhone" name="phone" type="tel" autocomplete="tel" placeholder="07••• ••••••" required />
<small class="err" data-for="cPhone"></small>
</div>
</div>
<div class="field">
<label for="cTreatment">Area of interest</label>
<select id="cTreatment" name="treatment" required>
<option value="" disabled selected>Select a focus…</option>
<option>Injectables & anti-wrinkle</option>
<option>Dermal fillers</option>
<option>Laser & skin resurfacing</option>
<option>Medical-grade skincare & peels</option>
<option>Body contouring</option>
<option>Not sure — advise me</option>
</select>
<small class="err" data-for="cTreatment"></small>
</div>
<div class="field">
<label for="cDate">Preferred date</label>
<input id="cDate" name="date" type="date" required />
<small class="err" data-for="cDate"></small>
</div>
<div class="field">
<label for="cNotes">Anything we should know? <span class="optional">(optional)</span></label>
<textarea id="cNotes" name="notes" rows="2" placeholder="Concerns, history, questions…"></textarea>
</div>
<label class="consent">
<input type="checkbox" id="cConsent" name="consent" required />
<span>I consent to Maison Lumière contacting me about my enquiry.</span>
</label>
<small class="err err--consent" data-for="cConsent"></small>
<button type="submit" class="btn btn--solid btn--block">Request consultation</button>
<p class="consult__fine">Your details are held securely and never shared. GDPR compliant.</p>
</form>
</div>
</section>
</main>
<!-- ░░ FOOTER ░░ -->
<footer class="footer">
<div class="wrap footer__inner">
<div class="footer__brand">
<span class="brand__mark" aria-hidden="true">ML</span>
<p><strong>Maison Lumière</strong><br />Aesthetics & Medical Spa</p>
<p class="footer__addr">18 Chiltern Mews, Marylebone, London W1U</p>
</div>
<nav class="footer__col" aria-label="Treatments">
<h3>Treatments</h3>
<a href="#treatments">Injectables</a>
<a href="#treatments">Laser & energy</a>
<a href="#treatments">Skin & peels</a>
<a href="#treatments">Body contouring</a>
</nav>
<nav class="footer__col" aria-label="Clinic">
<h3>Clinic</h3>
<a href="#provider">Our providers</a>
<a href="#safety">Safety & standards</a>
<a href="#outcomes">Outcomes</a>
<a href="#consult">Book a consultation</a>
</nav>
<div class="footer__col">
<h3>Hours</h3>
<p id="footHours">Mon–Sat · 09:00–19:00</p>
<p class="footer__status" id="footStatus"><span class="dot" aria-hidden="true"></span>—</p>
</div>
</div>
<div class="wrap footer__base">
<p>© <span id="year">2026</span> Maison Lumière Aesthetics Ltd. All rights reserved.</p>
<p>Registered with the GMC & CQC · Company No. 09•••421</p>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Med-Spa / Aesthetic Landing
A complete marketing landing for the fictional Maison Lumière Aesthetics & Medical Spa, built to feel clinical yet quietly luxurious. A pearl, champagne and soft-pink palette carries Cormorant Garamond display headings over an Inter UI, while a translucent sticky nav blurs the page beneath it, gains a hairline and shadow on scroll, and highlights the active section as you move. The editorial hero opens with the line “Aesthetic medicine, artfully delivered,” a softly glowing gradient backdrop, and a gilded-border consultation card that shows live open or closed status and the next available appointment slot.
Below the fold, an accreditation row, a filterable twelve-card treatment menu (injectables, laser and energy, skin and peels, body contouring) with refined gold-rule hover states, a dark animated outcomes band whose figures count up the first time they enter view, a four-point medical safety charter, and a featured-provider spotlight for Dr. Aria Vance. Tapping any treatment’s enquire button pre-selects its category in the form and smooth-scrolls you down to finish.
Every section reveals on scroll via IntersectionObserver, the mobile nav collapses into an accessible toggle, and the consultation request form validates name, email, phone, area of interest, date and consent inline before confirming with a tasteful toast. It is pure vanilla HTML, CSS, and JavaScript — no frameworks, no build step, responsive down to 360px, with reduced-motion support throughout.