Pages Medium
Dental — Landing Cosmetic
A trust-first cosmetic dentistry landing page with a sleek clinical-light hero, service cards for veneers, whitening and full smile makeovers, an interactive before/after reveal slider, a financing teaser, patient testimonials and a sticky consult CTA that opens a booking sheet. Built with semantic HTML, a soft rounded design system and vanilla JS micro-interactions — reveal on scroll, animated stat counters, tabbed treatment details and toast confirmations.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--blue: #2563eb;
--blue-d: #1d4ed8;
--blue-50: #eff5ff;
--mint: #34d399;
--mint-50: #e8fbf3;
--ink: #0f2740;
--ink-2: #3a5169;
--muted: #6b7c90;
--bg: #f3f8ff;
--white: #fff;
--line: rgba(15, 39, 64, 0.10);
--line-2: rgba(15, 39, 64, 0.18);
--ok: #22b07d;
--warn: #d98a2b;
--danger: #e05252;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 22px;
--sh-sm: 0 2px 8px rgba(15, 39, 64, 0.06);
--sh-md: 0 10px 30px rgba(15, 39, 64, 0.10);
--sh-lg: 0 24px 60px rgba(15, 39, 64, 0.14);
--font: "Inter", system-ui, -apple-system, sans-serif;
--serif: "Fraunces", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font);
color: var(--ink);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
.wrap {
width: min(1120px, 100% - 40px);
margin-inline: auto;
}
.skip-link {
position: absolute;
left: 12px;
top: -60px;
background: var(--white);
color: var(--blue-d);
padding: 10px 16px;
border-radius: var(--r-sm);
box-shadow: var(--sh-md);
z-index: 200;
transition: top .2s;
}
.skip-link:focus { top: 12px; }
/* Buttons */
.btn {
font: inherit;
font-weight: 600;
border: 0;
cursor: pointer;
border-radius: 999px;
padding: 12px 22px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
text-decoration: none;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
background: linear-gradient(180deg, var(--blue) 0%, var(--blue-d) 100%);
color: #fff;
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.32);
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(37, 99, 235, 0.42); transform: translateY(-1px); }
.btn-ghost {
background: var(--white);
color: var(--ink);
border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue-d); }
.btn-light {
background: #fff;
color: var(--blue-d);
box-shadow: var(--sh-md);
}
.btn-light:hover { transform: translateY(-1px); box-shadow: var(--sh-lg); }
.btn-block { width: 100%; }
.btn:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.45);
outline-offset: 2px;
}
/* Topbar */
.topbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(243, 248, 255, 0.75);
backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid transparent;
transition: box-shadow .25s, border-color .25s, background .25s;
}
.topbar.is-stuck {
background: rgba(255, 255, 255, 0.9);
border-color: var(--line);
box-shadow: var(--sh-sm);
}
.topbar-inner {
display: flex;
align-items: center;
gap: 20px;
height: 70px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ink);
font-weight: 800;
}
.brand-mark {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 12px;
color: #fff;
background: linear-gradient(140deg, var(--blue) 0%, var(--mint) 130%);
box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.brand-name { font-size: 1.05rem; letter-spacing: -.01em; }
.brand-name em { font-style: normal; color: var(--blue-d); }
.nav {
display: flex;
gap: 6px;
margin-left: auto;
}
.nav a {
color: var(--ink-2);
text-decoration: none;
font-weight: 500;
font-size: .95rem;
padding: 8px 14px;
border-radius: 999px;
transition: background .2s, color .2s;
}
.nav a:hover { background: var(--blue-50); color: var(--blue-d); }
.btn-consult { padding: 10px 18px; }
/* Hero */
.hero {
padding: 56px 0 32px;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: -20% 40% auto -10%;
height: 520px;
background: radial-gradient(closest-side, rgba(52, 211, 153, 0.22), transparent 70%);
filter: blur(10px);
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
inset: -10% -10% auto 50%;
height: 480px;
background: radial-gradient(closest-side, rgba(37, 99, 235, 0.18), transparent 70%);
pointer-events: none;
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 48px;
align-items: center;
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--white);
border: 1px solid var(--line);
border-radius: 999px;
padding: 7px 14px;
font-size: .85rem;
font-weight: 600;
color: var(--ink-2);
box-shadow: var(--sh-sm);
}
.pill .stars { color: #f4b740; letter-spacing: 1px; }
.hero-copy h1 {
font-family: var(--serif);
font-weight: 600;
font-size: clamp(2.4rem, 5.2vw, 3.7rem);
line-height: 1.05;
letter-spacing: -.02em;
margin: 18px 0 14px;
}
.grad {
background: linear-gradient(100deg, var(--blue) 10%, var(--mint) 95%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lede {
font-size: 1.1rem;
color: var(--ink-2);
max-width: 30ch;
margin: 0 0 26px;
}
.hero-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 30px;
}
.hero-trust {
display: flex;
gap: 28px;
list-style: none;
padding: 20px 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: 1.7rem;
color: var(--blue-d);
line-height: 1;
}
.hero-trust span { font-size: .82rem; color: var(--muted); margin-top: 4px; }
/* Hero card */
.hero-card {
position: relative;
border-radius: var(--r-lg);
background: var(--white);
padding: 14px;
box-shadow: var(--sh-lg);
border: 1px solid var(--line);
}
.card-photo {
height: 360px;
border-radius: 16px;
background:
linear-gradient(180deg, rgba(15, 39, 64, 0) 45%, rgba(15, 39, 64, 0.45) 100%),
url("https://images.unsplash.com/photo-1600170311833-c2cf5280ce49?auto=format&fit=crop&w=900&q=80") center/cover;
background-color: var(--blue-50);
}
.card-badge {
position: absolute;
top: 28px;
left: 28px;
background: rgba(255, 255, 255, 0.94);
border-radius: 999px;
padding: 8px 14px;
font-size: .82rem;
font-weight: 600;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: var(--sh-sm);
}
.card-badge .dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.25); }
50% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0.05); }
}
.card-foot {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 12px 8px;
}
.avatars { display: flex; }
.avatars span {
width: 34px; height: 34px;
border-radius: 50%;
border: 2px solid #fff;
margin-left: -10px;
background: linear-gradient(135deg, var(--blue-50), var(--mint-50));
}
.avatars span:first-child { margin-left: 0; }
.avatars span:nth-child(2) { background: linear-gradient(135deg, #dbe8ff, #bcd4ff); }
.avatars span:nth-child(3) { background: linear-gradient(135deg, #d3f6e6, #a8ecce); }
.avatars span:nth-child(4) { background: linear-gradient(135deg, #e6efff, #cfe0ff); }
.card-foot p { margin: 0; font-size: .84rem; color: var(--ink-2); }
.card-foot strong { color: var(--ink); }
/* Marquee */
.marquee {
margin-top: 40px;
display: flex;
gap: 30px;
flex-wrap: wrap;
padding: 16px 22px;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
box-shadow: var(--sh-sm);
color: var(--ink-2);
font-weight: 600;
font-size: .9rem;
justify-content: center;
}
.marquee span { color: var(--ink-2); }
/* Sections */
.section { padding: 72px 0; }
.section-tint {
background: linear-gradient(180deg, var(--white), var(--blue-50));
border-block: 1px solid var(--line);
}
.section-head {
text-align: center;
max-width: 620px;
margin: 0 auto 42px;
}
.eyebrow {
display: inline-block;
font-size: .78rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--blue);
background: var(--blue-50);
padding: 5px 12px;
border-radius: 999px;
}
.section-head h2, .ba-copy h2, .finance-copy h2, .faq-head h2, .finalcta h2 {
font-family: var(--serif);
font-weight: 600;
letter-spacing: -.015em;
font-size: clamp(1.7rem, 3.4vw, 2.4rem);
margin: 16px 0 10px;
line-height: 1.12;
}
.section-head p { color: var(--muted); margin: 0; }
/* Services */
.services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 22px;
}
.svc {
text-align: left;
font: inherit;
cursor: pointer;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 26px 24px;
box-shadow: var(--sh-sm);
transition: transform .2s, box-shadow .25s, border-color .2s;
position: relative;
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.svc[aria-selected="true"] {
border-color: var(--blue);
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.18);
}
.svc[aria-selected="true"]::after {
content: "";
position: absolute;
left: 24px; bottom: -22px;
width: 16px; height: 16px;
background: var(--blue-50);
border-left: 1px solid var(--blue);
border-top: 1px solid var(--blue);
transform: rotate(45deg);
border-radius: 3px 0 0 0;
}
.svc-ico {
display: grid;
place-items: center;
width: 46px; height: 46px;
border-radius: 14px;
background: linear-gradient(140deg, var(--blue-50), var(--mint-50));
color: var(--blue-d);
font-size: 1.3rem;
margin-bottom: 14px;
}
.svc h3 { margin: 0 0 6px; font-size: 1.15rem; }
.svc p { margin: 0 0 14px; color: var(--ink-2); font-size: .94rem; }
.svc-meta {
font-size: .82rem;
font-weight: 700;
color: var(--blue-d);
background: var(--blue-50);
padding: 5px 11px;
border-radius: 999px;
display: inline-block;
}
.svc-panel {
background: var(--blue-50);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 30px 32px;
}
.panel-head {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.panel-head h3 { margin: 0; font-size: 1.3rem; font-family: var(--serif); font-weight: 600; }
.panel-badge {
background: #fff;
color: var(--blue-d);
font-weight: 700;
font-size: .8rem;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--line);
}
#panel-lead { color: var(--ink-2); margin: 0 0 18px; max-width: 60ch; }
.panel-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.panel-steps li {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 16px 18px;
font-size: .92rem;
color: var(--ink-2);
position: relative;
padding-left: 46px;
min-height: 62px;
display: flex;
align-items: center;
animation: fadeUp .4s both;
}
.panel-steps li strong { color: var(--ink); display: block; }
.panel-steps li .num {
position: absolute;
left: 14px; top: 14px;
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(140deg, var(--blue), var(--mint));
color: #fff;
font-size: .72rem;
font-weight: 700;
display: grid;
place-items: center;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* Before / after */
.ba-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 48px;
align-items: center;
}
.ba-copy p { color: var(--ink-2); margin: 0 0 20px; max-width: 40ch; }
.ba-facts {
list-style: none;
display: flex;
gap: 26px;
padding: 0;
margin: 0 0 26px;
}
.ba-facts li { font-size: .86rem; color: var(--muted); }
.ba-facts strong {
display: block;
font-family: var(--serif);
font-size: 1.5rem;
color: var(--blue-d);
}
.ba {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sh-lg);
border: 6px solid #fff;
user-select: none;
}
.ba-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.ba-after {
background-image:
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(15,39,64,0.15)),
url("https://images.unsplash.com/photo-1606811841689-23dfddce3e95?auto=format&fit=crop&w=900&q=80");
background-color: var(--mint-50);
}
.ba-before {
background-image:
linear-gradient(180deg, rgba(15,39,64,0.12), rgba(15,39,64,0.28)),
url("https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?auto=format&fit=crop&w=900&q=80");
background-color: #dfe7ef;
filter: saturate(.65) brightness(.94);
clip-path: inset(0 50% 0 0);
}
.ba-tag {
position: absolute;
bottom: 14px;
font-size: .74rem;
font-weight: 700;
padding: 5px 12px;
border-radius: 999px;
color: #fff;
z-index: 4;
letter-spacing: .04em;
}
.ba-tag-before { left: 14px; background: rgba(15, 39, 64, 0.72); }
.ba-tag-after { right: 14px; background: rgba(37, 99, 235, 0.9); }
.ba-range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
z-index: 5;
}
.ba-range:focus-visible + .ba-handle {
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.5);
}
.ba-handle {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 3px;
background: #fff;
transform: translateX(-50%);
z-index: 3;
pointer-events: none;
}
.ba-handle span {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 42px; height: 42px;
border-radius: 50%;
background: #fff;
color: var(--blue-d);
display: grid;
place-items: center;
font-weight: 800;
letter-spacing: -2px;
box-shadow: var(--sh-md);
}
/* Finance */
.finance {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
background: linear-gradient(135deg, var(--ink) 0%, #16375c 100%);
border-radius: var(--r-lg);
padding: 40px;
color: #fff;
box-shadow: var(--sh-lg);
}
.finance .eyebrow { background: rgba(255, 255, 255, 0.12); color: #bcd4ff; }
.finance-copy h2 { color: #fff; }
.finance-copy p { color: rgba(255, 255, 255, 0.78); margin: 0; }
.finance-calc {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--r-md);
padding: 24px;
}
.finance-calc label {
font-size: .82rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
}
.fin-amount {
display: block;
font-family: var(--serif);
font-size: 2rem;
margin: 4px 0 14px;
}
.finance-calc input[type="range"] {
width: 100%;
accent-color: var(--mint);
margin-bottom: 18px;
}
.fin-months { display: flex; gap: 8px; margin-bottom: 18px; }
.fin-mo {
flex: 1;
font: inherit;
font-weight: 600;
font-size: .85rem;
padding: 9px 0;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.24);
background: transparent;
color: #fff;
cursor: pointer;
transition: background .2s, border-color .2s;
}
.fin-mo:hover { border-color: var(--mint); }
.fin-mo.is-active { background: var(--mint); color: var(--ink); border-color: var(--mint); }
.fin-out { margin: 0; font-size: .95rem; color: rgba(255,255,255,0.8); }
.fin-out strong { font-family: var(--serif); font-size: 1.7rem; color: #fff; }
.fin-out span { color: rgba(255,255,255,0.7); }
/* Reviews */
.reviews {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.review {
margin: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 26px 24px;
box-shadow: var(--sh-sm);
transition: transform .2s, box-shadow .25s;
}
.review:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.review .stars { color: #f4b740; letter-spacing: 2px; margin-bottom: 12px; }
.review blockquote {
margin: 0 0 18px;
font-size: 1rem;
color: var(--ink);
line-height: 1.55;
}
.review figcaption {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: .92rem;
}
.review figcaption em { font-style: normal; color: var(--muted); font-weight: 500; margin-left: auto; font-size: .82rem; }
.rv-avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue-50), var(--mint-50));
}
.rv-avatar[data-i="b"] { background: linear-gradient(135deg, #dbe8ff, #a8ecce); }
.rv-avatar[data-i="c"] { background: linear-gradient(135deg, #d3f6e6, #cfe0ff); }
/* FAQ */
.faq-grid {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 48px;
align-items: start;
}
.faq-head { text-align: left; margin: 0; max-width: none; }
.faq-head p { margin: 0 0 20px; }
.faq { display: grid; gap: 12px; }
.faq-item {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 4px 20px;
transition: box-shadow .2s, border-color .2s;
}
.faq-item[open] { border-color: var(--blue); box-shadow: var(--sh-sm); }
.faq-item summary {
cursor: pointer;
list-style: none;
font-weight: 600;
padding: 16px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.chev {
width: 12px; height: 12px;
border-right: 2px solid var(--blue);
border-bottom: 2px solid var(--blue);
transform: rotate(45deg);
transition: transform .25s;
flex: none;
}
.faq-item[open] .chev { transform: rotate(-135deg); }
.faq-item p { margin: 0 0 16px; color: var(--ink-2); font-size: .95rem; }
/* Final CTA */
.finalcta {
padding: 20px 0 80px;
}
.finalcta-inner {
text-align: center;
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-d) 55%, #1740b0 100%);
border-radius: var(--r-lg);
padding: 56px 30px;
color: #fff;
box-shadow: var(--sh-lg);
position: relative;
overflow: hidden;
}
.finalcta-inner::before {
content: "";
position: absolute;
inset: -40% -20% auto auto;
width: 340px; height: 340px;
background: radial-gradient(closest-side, rgba(52, 211, 153, 0.4), transparent 70%);
}
.finalcta h2 { color: #fff; position: relative; }
.finalcta p { color: rgba(255, 255, 255, 0.86); margin: 0 0 24px; position: relative; }
.finalcta .btn { position: relative; }
/* Footer */
.footer {
padding: 40px 0;
background: var(--white);
border-top: 1px solid var(--line);
}
.footer-inner { text-align: center; display: grid; gap: 6px; }
.footer-inner .brand-name { font-size: 1.1rem; }
.footer-inner p { margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; }
.footer-inner small { color: var(--muted); }
/* Consult sheet */
.sheet {
position: fixed;
inset: 0;
z-index: 300;
display: none;
}
.sheet.is-open { display: block; }
.sheet-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 39, 64, 0.45);
backdrop-filter: blur(3px);
animation: fade .25s;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet-panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(440px, 100%);
background: var(--white);
padding: 34px 32px;
overflow-y: auto;
box-shadow: var(--sh-lg);
animation: slideIn .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-close {
position: absolute;
top: 18px; right: 18px;
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--white);
color: var(--ink-2);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: background .2s;
}
.sheet-close:hover { background: var(--blue-50); color: var(--blue-d); }
.sheet-panel h2 { font-family: var(--serif); font-weight: 600; margin: 14px 0 6px; font-size: 1.6rem; }
.sheet-sub { color: var(--muted); margin: 0 0 22px; font-size: .95rem; }
.sheet-form { display: grid; gap: 16px; }
.sheet-form label {
display: grid;
gap: 6px;
font-size: .85rem;
font-weight: 600;
color: var(--ink-2);
}
.sheet-form input[type="text"],
.sheet-form input[type="email"],
.sheet-form select {
font: inherit;
font-weight: 500;
padding: 12px 14px;
border-radius: var(--r-sm);
border: 1px solid var(--line-2);
background: var(--bg);
color: var(--ink);
transition: border-color .2s, box-shadow .2s;
}
.sheet-form input:focus,
.sheet-form select:focus {
outline: none;
border-color: var(--blue);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
background: #fff;
}
.sheet-form input:invalid:not(:placeholder-shown) { border-color: var(--danger); }
.chiprow { display: flex; gap: 8px; }
.chip {
flex: 1;
display: flex !important;
align-items: center;
justify-content: center;
gap: 6px;
font-weight: 600;
font-size: .85rem;
padding: 9px 6px;
border-radius: 999px;
border: 1px solid var(--line-2);
cursor: pointer;
transition: background .2s, border-color .2s;
color: var(--ink-2);
}
.chip input { accent-color: var(--blue); }
.chip:has(input:checked) { background: var(--blue-50); border-color: var(--blue); color: var(--blue-d); }
.sheet-fine { font-size: .76rem; color: var(--muted); margin: 4px 0 0; text-align: center; }
/* Toast */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translate(-50%, 20px);
background: var(--ink);
color: #fff;
padding: 13px 20px;
border-radius: 999px;
font-weight: 600;
font-size: .92rem;
box-shadow: var(--sh-lg);
opacity: 0;
pointer-events: none;
transition: opacity .3s, transform .3s;
z-index: 400;
display: inline-flex;
align-items: center;
gap: 10px;
}
.toast::before {
content: "✓";
display: grid;
place-items: center;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--mint);
color: var(--ink);
font-size: .75rem;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* Reveal on scroll */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.reveal.in { opacity: 1; transform: none; }
/* Responsive */
@media (max-width: 900px) {
.hero-grid,
.ba-grid,
.finance,
.faq-grid { grid-template-columns: 1fr; }
.hero-grid { gap: 34px; }
.ba { aspect-ratio: 16 / 11; }
.services,
.reviews { grid-template-columns: 1fr 1fr; }
.nav { display: none; }
}
@media (max-width: 520px) {
.wrap { width: calc(100% - 32px); }
.topbar-inner { height: 62px; gap: 10px; }
.btn-consult { padding: 9px 14px; font-size: .9rem; }
.brand-name { font-size: .98rem; }
.hero { padding: 36px 0 20px; }
.hero-cta { flex-direction: column; align-items: stretch; }
.hero-cta .btn { width: 100%; }
.hero-trust { gap: 18px; flex-wrap: wrap; }
.section { padding: 52px 0; }
.services,
.reviews { grid-template-columns: 1fr; }
.svc[aria-selected="true"]::after { display: none; }
.svc-panel { padding: 24px 22px; }
.finance,
.finalcta-inner { padding: 30px 22px; }
.ba-facts { flex-wrap: wrap; gap: 16px; }
.marquee { gap: 16px; font-size: .82rem; }
.sheet-panel { width: 100%; padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto; }
.reveal { opacity: 1; transform: 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("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 3200);
}
/* ---------- Sticky topbar shadow ---------- */
var topbar = document.getElementById("topbar");
function onScroll() {
if (!topbar) return;
topbar.classList.toggle("is-stuck", window.scrollY > 8);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- Reveal on scroll + stat counters ---------- */
var reveals = document.querySelectorAll(".reveal");
var counters = document.querySelectorAll("[data-count]");
function animateCount(el) {
var target = parseFloat(el.getAttribute("data-count"));
var decimals = parseInt(el.getAttribute("data-decimals") || "0", 10);
var suffix = el.getAttribute("data-suffix") || "";
var start = performance.now();
var dur = 1400;
function step(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
var val = target * eased;
el.textContent = val.toLocaleString("en-US", {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
}) + suffix;
if (p < 1) requestAnimationFrame(step);
else el.textContent = target.toLocaleString("en-US", {
minimumFractionDigits: decimals,
maximumFractionDigits: decimals
}) + suffix;
}
requestAnimationFrame(step);
}
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (!e.isIntersecting) return;
e.target.classList.add("in");
e.target.querySelectorAll
? e.target.querySelectorAll("[data-count]").forEach(function (c) {
if (!c.dataset.done) { c.dataset.done = "1"; animateCount(c); }
})
: null;
io.unobserve(e.target);
});
}, { threshold: 0.16 });
reveals.forEach(function (r) { io.observe(r); });
// counters may sit inside a reveal already observed; also observe directly
counters.forEach(function (c) {
if (!c.dataset.done) io.observe(c.closest(".reveal") || c);
});
} else {
reveals.forEach(function (r) { r.classList.add("in"); });
counters.forEach(animateCount);
}
/* ---------- Services tabs ---------- */
var SVC = {
veneers: {
title: "Porcelain veneers",
badge: "3–4 weeks",
lead: "Hand-crafted porcelain veneers bonded to the front of your teeth for a natural, durable result.",
steps: [
["Digital design", "3D preview of your future smile."],
["Gentle prep", "Minimal enamel shaping under numbing."],
["Temporaries", "Wear a natural test-drive smile."],
["Final bond", "Custom porcelain placed & polished."]
]
},
whitening: {
title: "Professional whitening",
badge: "1 visit · 60 min",
lead: "In-chair Zoom whitening lifts stains up to eight shades in a single, comfortable appointment.",
steps: [
["Shade match", "Record your starting shade."],
["Gum shield", "Protect soft tissue before gel."],
["Light activation", "Three gentle whitening cycles."],
["Home top-up", "Custom trays to keep it bright."]
]
},
makeover: {
title: "Smile makeover",
badge: "6–10 weeks",
lead: "A complete, staged plan blending alignment, whitening and veneers into one cohesive result.",
steps: [
["Full consult", "Photos, scans & smile goals."],
["Align & level", "Aligners tidy the foundation."],
["Whiten", "Brighten before final shade lock."],
["Finish & review", "Veneers, polish, 12-month check."]
]
}
};
var tabs = document.querySelectorAll(".svc[role='tab']");
var pTitle = document.getElementById("panel-title");
var pBadge = document.getElementById("panel-badge");
var pLead = document.getElementById("panel-lead");
var pSteps = document.getElementById("panel-steps");
var panel = document.getElementById("svc-panel");
function renderSvc(key, focusPanel) {
var d = SVC[key];
if (!d) return;
pTitle.textContent = d.title;
pBadge.textContent = d.badge;
pLead.textContent = d.lead;
pSteps.innerHTML = "";
d.steps.forEach(function (s, i) {
var li = document.createElement("li");
li.style.animationDelay = (i * 70) + "ms";
li.innerHTML = '<span class="num">' + (i + 1) + '</span><span><strong>' +
s[0] + '</strong>' + s[1] + '</span>';
pSteps.appendChild(li);
});
if (panel) panel.setAttribute("aria-labelledby", "tab-" + key);
if (focusPanel && panel) panel.focus();
}
tabs.forEach(function (tab, idx) {
tab.addEventListener("click", function () {
tabs.forEach(function (t) { t.setAttribute("aria-selected", "false"); });
tab.setAttribute("aria-selected", "true");
renderSvc(tab.getAttribute("data-svc"), false);
});
tab.addEventListener("keydown", function (e) {
var dir = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
if (!dir) return;
e.preventDefault();
var next = (idx + dir + tabs.length) % tabs.length;
tabs[next].focus();
tabs[next].click();
});
});
renderSvc("veneers", false);
/* ---------- Before / after slider ---------- */
var range = document.getElementById("ba-range");
var before = document.getElementById("ba-before");
var handle = document.getElementById("ba-handle");
function setBA(v) {
if (before) before.style.clipPath = "inset(0 " + (100 - v) + "% 0 0)";
if (handle) handle.style.left = v + "%";
if (range) range.setAttribute("aria-valuetext", Math.round(v) + "% after");
}
if (range) {
range.addEventListener("input", function () { setBA(+range.value); });
setBA(+range.value);
}
/* ---------- Financing calculator ---------- */
var finSlider = document.getElementById("fin-slider");
var finAmount = document.getElementById("fin-amount");
var finMonthly = document.getElementById("fin-monthly");
var moBtns = document.querySelectorAll(".fin-mo");
var months = 12;
function money(n) {
return "$" + Math.round(n).toLocaleString("en-US");
}
function calcFinance() {
if (!finSlider) return;
var total = +finSlider.value;
finAmount.textContent = money(total);
// 0% interest promo — simple even split
finMonthly.textContent = money(total / months);
}
if (finSlider) {
finSlider.addEventListener("input", calcFinance);
}
moBtns.forEach(function (b) {
b.addEventListener("click", function () {
moBtns.forEach(function (x) { x.classList.remove("is-active"); });
b.classList.add("is-active");
months = +b.getAttribute("data-mo");
calcFinance();
});
});
calcFinance();
/* ---------- Consult sheet ---------- */
var sheet = document.getElementById("sheet");
var form = document.getElementById("consult-form");
var lastFocus = null;
function openSheet() {
lastFocus = document.activeElement;
sheet.classList.add("is-open");
sheet.setAttribute("aria-hidden", "false");
document.body.style.overflow = "hidden";
var first = sheet.querySelector("input, select, button");
if (first) setTimeout(function () { first.focus(); }, 60);
}
function closeSheet() {
sheet.classList.remove("is-open");
sheet.setAttribute("aria-hidden", "true");
document.body.style.overflow = "";
if (lastFocus) lastFocus.focus();
}
document.querySelectorAll("[data-open-consult]").forEach(function (b) {
b.addEventListener("click", openSheet);
});
document.querySelectorAll("[data-close-consult]").forEach(function (b) {
b.addEventListener("click", closeSheet);
});
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && sheet.classList.contains("is-open")) closeSheet();
});
if (form) {
form.addEventListener("submit", function (e) {
e.preventDefault();
if (!form.checkValidity()) {
form.reportValidity();
return;
}
var name = (form.elements.name.value || "there").trim().split(" ")[0];
closeSheet();
form.reset();
toast("Thanks " + name + " — we'll confirm your consult soon.");
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumière Dental — Cosmetic Dentistry</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=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,[email protected],500;9..144,600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- Sticky top bar -->
<header class="topbar" id="topbar">
<div class="wrap topbar-inner">
<a class="brand" href="#top" aria-label="Lumière Dental home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5.5C10 3 6 3 4.5 5.5 3 8 4 12 6 16c1 2 2 3 2.5 1.5S9 15 12 15s3 1 3.5 2.5S17 18 18 16c2-4 3-8 1.5-10.5C18 3 14 3 12 5.5Z"/></svg>
</span>
<span class="brand-name">Lumière <em>Dental</em></span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#services">Treatments</a>
<a href="#results">Results</a>
<a href="#reviews">Reviews</a>
<a href="#faq">FAQ</a>
</nav>
<button class="btn btn-primary btn-consult" data-open-consult>
Book a consult
</button>
</div>
</header>
<main id="main">
<!-- Hero -->
<section class="hero" id="top">
<div class="wrap hero-grid">
<div class="hero-copy reveal">
<span class="pill">
<span class="stars" aria-hidden="true">★★★★★</span>
4.9 from 1,280+ patients
</span>
<h1>Confident smiles, <span class="grad">designed for you</span></h1>
<p class="lede">
Porcelain veneers, professional whitening and full smile makeovers —
planned with digital previews so you see the result before we start.
</p>
<div class="hero-cta">
<button class="btn btn-primary" data-open-consult>Book a free consult</button>
<a class="btn btn-ghost" href="#results">See before & after</a>
</div>
<ul class="hero-trust" aria-label="Practice highlights">
<li><strong data-count="18">0</strong><span>years in practice</span></li>
<li><strong data-count="9400" data-suffix="+">0</strong><span>smiles transformed</span></li>
<li><strong data-count="4.9" data-decimals="1">0</strong><span>average rating</span></li>
</ul>
</div>
<div class="hero-card reveal">
<div class="card-photo" role="img" aria-label="Bright natural smile after treatment"></div>
<div class="card-badge">
<span class="dot" aria-hidden="true"></span>
Digital smile preview
</div>
<div class="card-foot">
<div class="avatars" aria-hidden="true">
<span></span><span></span><span></span><span></span>
</div>
<p><strong>Same-week consults</strong><br />No-pressure treatment plan</p>
</div>
</div>
</div>
<div class="wrap marquee reveal" aria-hidden="true">
<span>✦ Porcelain veneers</span>
<span>✦ Zoom whitening</span>
<span>✦ Invisible aligners</span>
<span>✦ Digital smile design</span>
<span>✦ Same-day crowns</span>
<span>✦ Gum contouring</span>
</div>
</section>
<!-- Services -->
<section class="section" id="services">
<div class="wrap">
<header class="section-head reveal">
<span class="eyebrow">Treatments</span>
<h2>Cosmetic care, tailored to your goals</h2>
<p>Select a treatment to explore the process, timeline and what's included.</p>
</header>
<div class="services" role="tablist" aria-label="Treatments">
<button class="svc reveal" role="tab" aria-selected="true" aria-controls="svc-panel" id="tab-veneers" data-svc="veneers">
<span class="svc-ico" aria-hidden="true">◈</span>
<h3>Porcelain veneers</h3>
<p>Ultra-thin shells that reshape colour, size and symmetry.</p>
<span class="svc-meta">From $850 / tooth</span>
</button>
<button class="svc reveal" role="tab" aria-selected="false" aria-controls="svc-panel" id="tab-whitening" data-svc="whitening">
<span class="svc-ico" aria-hidden="true">✦</span>
<h3>Professional whitening</h3>
<p>In-chair Zoom brightening up to eight shades in one visit.</p>
<span class="svc-meta">From $290</span>
</button>
<button class="svc reveal" role="tab" aria-selected="false" aria-controls="svc-panel" id="tab-makeover" data-svc="makeover">
<span class="svc-ico" aria-hidden="true">❧</span>
<h3>Smile makeover</h3>
<p>A full plan combining veneers, whitening and alignment.</p>
<span class="svc-meta">Custom quote</span>
</button>
</div>
<div class="svc-panel reveal" id="svc-panel" role="tabpanel" aria-labelledby="tab-veneers" tabindex="0">
<div class="panel-head">
<h3 id="panel-title">Porcelain veneers</h3>
<span class="panel-badge" id="panel-badge">3–4 weeks</span>
</div>
<p id="panel-lead">Hand-crafted porcelain veneers bonded to the front of your teeth for a natural, durable result.</p>
<ul class="panel-steps" id="panel-steps"></ul>
</div>
</div>
</section>
<!-- Before / After -->
<section class="section section-tint" id="results">
<div class="wrap ba-grid">
<div class="ba-copy reveal">
<span class="eyebrow">Real results</span>
<h2>Drag to reveal the transformation</h2>
<p>A single-visit veneer case. Move the handle to compare before and after — or use the arrow keys.</p>
<ul class="ba-facts">
<li><strong>8</strong> veneers placed</li>
<li><strong>1</strong> visit finish</li>
<li><strong>10yr</strong> care warranty</li>
</ul>
<button class="btn btn-primary" data-open-consult>Start your smile plan</button>
</div>
<figure class="ba reveal" aria-label="Before and after smile comparison slider">
<div class="ba-img ba-after"></div>
<div class="ba-img ba-before" id="ba-before">
<span class="ba-tag ba-tag-before">Before</span>
</div>
<span class="ba-tag ba-tag-after">After</span>
<input class="ba-range" id="ba-range" type="range" min="0" max="100" value="50"
aria-label="Reveal amount" aria-valuetext="50% after" />
<div class="ba-handle" id="ba-handle" aria-hidden="true">
<span>‹ ›</span>
</div>
</figure>
</div>
</section>
<!-- Financing -->
<section class="section">
<div class="wrap finance reveal">
<div class="finance-copy">
<span class="eyebrow">Payment plans</span>
<h2>Smile now, pay monthly</h2>
<p>0% interest for 12 months on treatment plans over $1,500, subject to approval.</p>
</div>
<div class="finance-calc" aria-label="Estimated monthly payment">
<label for="fin-amount">Treatment total</label>
<output class="fin-amount" id="fin-amount">$4,800</output>
<input type="range" id="fin-slider" min="1500" max="12000" step="100" value="4800" aria-label="Treatment total" />
<div class="fin-months" role="group" aria-label="Plan length">
<button class="fin-mo" data-mo="6">6 mo</button>
<button class="fin-mo is-active" data-mo="12">12 mo</button>
<button class="fin-mo" data-mo="24">24 mo</button>
</div>
<p class="fin-out">Est. <strong id="fin-monthly">$400</strong><span>/mo</span></p>
</div>
</div>
</section>
<!-- Reviews -->
<section class="section section-tint" id="reviews">
<div class="wrap">
<header class="section-head reveal">
<span class="eyebrow">Patient stories</span>
<h2>Loved by 9,400+ smiles</h2>
</header>
<div class="reviews">
<figure class="review reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>"I finally stopped hiding my smile in photos. The digital preview meant zero surprises."</blockquote>
<figcaption><span class="rv-avatar" data-i="a"></span> Maya R. <em>Veneers</em></figcaption>
</figure>
<figure class="review reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>"Whitening took one lunch break and lasted for months. Painless, and the team was lovely."</blockquote>
<figcaption><span class="rv-avatar" data-i="b"></span> Daniel O. <em>Whitening</em></figcaption>
</figure>
<figure class="review reveal">
<div class="stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>"My full makeover was mapped out step by step. Worth every visit — I look like me, but brighter."</blockquote>
<figcaption><span class="rv-avatar" data-i="c"></span> Priya S. <em>Smile makeover</em></figcaption>
</figure>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section" id="faq">
<div class="wrap faq-grid">
<header class="section-head reveal faq-head">
<span class="eyebrow">Good to know</span>
<h2>Cosmetic questions, answered</h2>
<p>Still unsure? Book a consult and we'll walk through everything.</p>
<button class="btn btn-primary" data-open-consult>Book a consult</button>
</header>
<div class="faq reveal">
<details class="faq-item" open>
<summary>Do veneers damage my natural teeth?<span class="chev" aria-hidden="true"></span></summary>
<p>Modern porcelain veneers need only minimal enamel preparation, and no-prep options exist for suitable cases. We always plan conservatively.</p>
</details>
<details class="faq-item">
<summary>How long does whitening last?<span class="chev" aria-hidden="true"></span></summary>
<p>Typically 6–12 months depending on diet and habits. We include a top-up tray so you can refresh at home whenever you like.</p>
</details>
<details class="faq-item">
<summary>Will my new smile look natural?<span class="chev" aria-hidden="true"></span></summary>
<p>Yes — every case starts with a digital smile design matched to your face shape, so the result looks like a better version of you.</p>
</details>
<details class="faq-item">
<summary>Is the consult really free?<span class="chev" aria-hidden="true"></span></summary>
<p>Your first cosmetic consult and digital preview are complimentary. You leave with a written plan and no obligation.</p>
</details>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="finalcta">
<div class="wrap finalcta-inner reveal">
<h2>Your brightest smile starts with one visit</h2>
<p>Book a complimentary consult and digital smile preview this week.</p>
<button class="btn btn-light" data-open-consult>Book a free consult</button>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer-inner">
<span class="brand-name">Lumière <em>Dental</em></span>
<p>128 Rivergate Ave, Suite 4 · Fictionville · (555) 018‑2240</p>
<small>© 2026 Lumière Dental. Illustrative demo — not a real clinic.</small>
</div>
</footer>
<!-- Consult sheet -->
<div class="sheet" id="sheet" aria-hidden="true">
<div class="sheet-backdrop" data-close-consult></div>
<div class="sheet-panel" role="dialog" aria-modal="true" aria-labelledby="sheet-title">
<button class="sheet-close" data-close-consult aria-label="Close">×</button>
<span class="eyebrow">Free consult</span>
<h2 id="sheet-title">Book your smile preview</h2>
<p class="sheet-sub">We'll confirm within one business day. No obligation.</p>
<form id="consult-form" class="sheet-form" novalidate>
<label>Full name
<input type="text" name="name" autocomplete="name" required placeholder="Jamie Rivera" />
</label>
<label>Email
<input type="email" name="email" autocomplete="email" required placeholder="[email protected]" />
</label>
<label>Interested in
<select name="treatment">
<option>Porcelain veneers</option>
<option>Professional whitening</option>
<option>Smile makeover</option>
<option>Not sure yet</option>
</select>
</label>
<label>Preferred time
<div class="chiprow" role="group" aria-label="Preferred time">
<label class="chip"><input type="radio" name="time" value="Morning" checked /> Morning</label>
<label class="chip"><input type="radio" name="time" value="Afternoon" /> Afternoon</label>
<label class="chip"><input type="radio" name="time" value="Evening" /> Evening</label>
</div>
</label>
<button type="submit" class="btn btn-primary btn-block">Request my consult</button>
<p class="sheet-fine">By requesting you agree to be contacted about your enquiry.</p>
</form>
</div>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Dental — Landing Cosmetic
A polished cosmetic dentistry landing page built around a calm, clinical-light palette of clinic blue, soft mint and lots of white space. The hero pairs a reassuring headline and rating pill with a floating results card, while a sticky top bar keeps a “Book a consult” call to action within reach as you scroll. Trust markers — years in practice, smiles transformed, average rating — animate up from zero the first time they enter the viewport.
The core of the page is an interactive before/after teaser: drag the handle (or use the arrow keys) to wipe between a patient’s original smile and their finished veneers, with a live percentage readout. Below it, three treatment cards for veneers, professional whitening and complete smile makeovers expand into a tabbed detail panel covering the process, timeline and what’s included. A financing strip, star testimonials and an FAQ accordion round out the story.
Everything is driven by dependency-free vanilla JS: an IntersectionObserver handles reveal-on-scroll and the stat counters, the consult button opens an accessible booking sheet with a mock form, and submitting it fires a friendly toast. The layout is fully responsive down to ~360px and every control is keyboard-usable with visible focus states.
Illustrative UI only — not intended for real medical use.