Pages Medium
Dental — Treatment Detail
A trust-first clear-aligner treatment page with a sticky hero, plain-language what-it-is card, an interactive step-by-step timeline, a candidacy and cost-range estimator that reacts to case complexity, an expandable FAQ accordion, and a floating book-consultation CTA — all in a clean clinical light palette with soft rounded cards and reassuring micro-interactions.
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,.10); --line-2:rgba(15,39,64,.18);
--ok:#22b07d; --warn:#d98a2b; --danger:#e05252;
--r-sm:8px; --r-md:14px; --r-lg:22px;
--sh-sm:0 1px 2px rgba(15,39,64,.06),0 1px 3px rgba(15,39,64,.05);
--sh-md:0 8px 24px rgba(15,39,64,.08);
--sh-lg:0 24px 60px rgba(15,39,64,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:"Inter",system-ui,-apple-system,sans-serif;
line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-.02em}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit}
:focus-visible{outline:3px solid rgba(37,99,235,.45); outline-offset:2px; border-radius:6px}
.wrap{width:min(1120px,92%); margin-inline:auto}
.skip{position:absolute; left:-999px; top:0; background:var(--blue); color:#fff; padding:10px 16px; border-radius:0 0 var(--r-sm) 0; z-index:100}
.skip:focus{left:0}
/* ---------- buttons / pills ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:12px 20px; border-radius:999px; border:1px solid transparent;
font-weight:700; font-size:.95rem; cursor:pointer; transition:.18s ease;
white-space:nowrap;
}
.btn--sm{padding:8px 16px; font-size:.85rem}
.btn--full{width:100%}
.btn--primary{background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(37,99,235,.28)}
.btn--primary:hover{background:var(--blue-d); transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,99,235,.34)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:var(--white); color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--blue); color:var(--blue-d); transform:translateY(-1px)}
.pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:600}
.pill--mint{background:var(--mint-50); color:#0d8a5f}
.eyebrow{display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-d); margin-bottom:8px}
.h2{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(1.5rem,3.4vw,2.05rem); color:var(--ink)}
.prose{color:var(--ink-2); font-size:1rem; margin-top:10px; max-width:60ch}
/* ---------- topbar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.topbar__inner{display:flex; align-items:center; gap:20px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand__mark{display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:linear-gradient(140deg,var(--blue),#5b8def); color:#fff; box-shadow:var(--sh-sm)}
.brand__name{font-size:1.02rem}
.brand__name b{color:var(--blue-d)}
.topnav{display:flex; gap:22px; margin-left:auto; margin-right:6px}
.topnav a{font-size:.92rem; font-weight:500; color:var(--ink-2); padding:6px 2px; border-bottom:2px solid transparent; transition:.15s}
.topnav a:hover{color:var(--blue-d); border-color:var(--blue)}
/* ---------- hero ---------- */
.hero{padding:44px 0 30px; background:linear-gradient(180deg,#fbfdff,transparent 70%)}
.hero__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center}
.crumbs{display:flex; gap:8px; font-size:.82rem; color:var(--muted); margin-bottom:12px}
.crumbs a:hover{color:var(--blue-d)}
.hero__title{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(2.3rem,6vw,3.6rem); margin:12px 0 8px}
.hero__lede{color:var(--ink-2); font-size:1.08rem; max-width:52ch}
.trust{display:flex; flex-wrap:wrap; gap:22px; margin:22px 0 24px}
.trust__item{display:flex; flex-direction:column; line-height:1.25}
.trust__item b{font-size:1.15rem; color:var(--ink)}
.trust__item span{font-size:.78rem; color:var(--muted)}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}
.hero__card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-lg)}
.smile{position:relative; height:190px; border-radius:var(--r-md); overflow:hidden; background:radial-gradient(120% 90% at 50% 10%,#eaf3ff,#dbe9ff); display:grid; place-items:center}
.smile__glow{position:absolute; inset:-40% 20% auto; height:200px; background:radial-gradient(closest-side,rgba(52,211,153,.5),transparent); filter:blur(14px)}
.smile__teeth{position:relative; display:flex; gap:6px; padding:14px; z-index:2}
.smile__teeth span{width:26px; height:44px; background:linear-gradient(180deg,#fff,#eef4fb); border-radius:8px 8px 12px 12px; box-shadow:inset 0 -4px 8px rgba(15,39,64,.06),0 3px 8px rgba(15,39,64,.10)}
.smile__teeth span:nth-child(odd){height:50px}
.smile__tray{position:absolute; z-index:3; width:230px; height:66px; bottom:52px; border:3px solid rgba(255,255,255,.85); border-radius:14px 14px 40px 40px; box-shadow:0 0 0 2px rgba(37,99,235,.18); background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.05))}
.facts{list-style:none; margin:16px 0 4px; padding:0; display:grid; gap:2px}
.facts li{display:flex; justify-content:space-between; align-items:center; padding:11px 4px; border-bottom:1px dashed var(--line)}
.facts li:last-child{border-bottom:0}
.facts__k{color:var(--muted); font-size:.9rem}
.facts__v{font-weight:700; font-size:.95rem}
/* ---------- layout ---------- */
.layout{display:grid; grid-template-columns:1fr 320px; gap:40px; padding:20px 0 90px; align-items:start}
.block{padding:34px 0; border-top:1px solid var(--line)}
.block:first-child{border-top:0; padding-top:14px}
/* pros */
.pros{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px}
.pro{display:flex; gap:12px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; box-shadow:var(--sh-sm); transition:.18s}
.pro:hover{transform:translateY(-2px); box-shadow:var(--sh-md); border-color:var(--line-2)}
.pro__ico{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--mint-50); color:#0d8a5f; font-weight:800}
.pro b{display:block; font-size:.98rem}
.pro p{color:var(--ink-2); font-size:.88rem; margin-top:3px}
/* ---------- timeline ---------- */
.timeline{position:relative; margin-top:24px; padding-left:6px}
.timeline__rail{position:absolute; left:24px; top:14px; bottom:14px; width:3px; background:var(--line); border-radius:3px}
.timeline__fill{display:block; width:100%; background:linear-gradient(180deg,var(--blue),var(--mint)); border-radius:3px; height:12%; transition:height .45s cubic-bezier(.4,0,.2,1)}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:12px; position:relative; z-index:2}
.step{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); transition:.18s}
.step:hover{box-shadow:var(--sh-md)}
.step.is-open{border-color:rgba(37,99,235,.4); box-shadow:0 8px 24px rgba(37,99,235,.12)}
.step__head{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px; width:100%; background:none; border:0; padding:16px 18px; cursor:pointer; text-align:left}
.step__dot{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-weight:800; background:var(--blue-50); color:var(--blue-d); border:2px solid var(--white); box-shadow:0 0 0 2px var(--line); transition:.2s}
.step.is-open .step__dot{background:var(--blue); color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.step__title{font-weight:700; font-size:1rem}
.step__meta{font-size:.82rem; color:var(--muted); font-weight:600; background:var(--bg); padding:4px 10px; border-radius:999px}
.step__chev{color:var(--muted); font-size:1.1rem; transition:transform .25s}
.step.is-open .step__chev{transform:rotate(180deg); color:var(--blue-d)}
.step__body{max-height:0; overflow:hidden; transition:max-height .35s ease, padding .35s ease; padding:0 18px 0 70px}
.step.is-open .step__body{max-height:220px; padding-bottom:18px}
.step__body p{color:var(--ink-2); font-size:.92rem}
/* ---------- estimator ---------- */
.estimator{display:grid; grid-template-columns:1fr .9fr; gap:20px; margin-top:24px; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-md)}
.estimator__controls{display:grid; gap:20px; align-content:start}
.field{border:0; margin:0; padding:0; min-width:0}
.field legend{font-size:.82rem; font-weight:700; color:var(--ink-2); margin-bottom:8px; padding:0}
.segs{display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:4px; gap:2px; flex-wrap:wrap}
.seg{position:relative; cursor:pointer}
.seg input{position:absolute; opacity:0; inset:0; cursor:pointer}
.seg span{display:inline-block; padding:8px 16px; border-radius:999px; font-size:.86rem; font-weight:600; color:var(--ink-2); transition:.15s}
.seg input:checked + span{background:var(--blue); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.3)}
.seg input:focus-visible + span{outline:3px solid rgba(37,99,235,.45); outline-offset:2px}
.seg:hover span{color:var(--blue-d)}
.switch{display:flex; align-items:center; gap:12px; cursor:pointer; font-size:.9rem; color:var(--ink-2)}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch__track{flex:none; width:46px; height:26px; border-radius:999px; background:var(--line-2); position:relative; transition:.2s}
.switch__thumb{position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sh-sm); transition:.2s}
.switch input:checked + .switch__track{background:var(--mint)}
.switch input:checked + .switch__track .switch__thumb{transform:translateX(20px)}
.switch input:focus-visible + .switch__track{outline:3px solid rgba(37,99,235,.45); outline-offset:2px}
.switch__label b{color:var(--ink)}
.estimator__out{background:linear-gradient(160deg,#f7fbff,#eef5ff); border:1px solid var(--line); border-radius:var(--r-md); padding:20px; display:flex; flex-direction:column}
.estimator__label{font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.estimator__price{display:flex; align-items:baseline; gap:2px; font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:2rem; color:var(--ink); margin:6px 0 16px; flex-wrap:wrap}
.estimator__price .cur{font-size:1.1rem; color:var(--blue-d)}
.estimator__price .dash{margin:0 6px; color:var(--muted)}
.estimator__row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px}
.estimator__row > div{background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 12px; display:flex; flex-direction:column}
.estimator__k{font-size:.74rem; color:var(--muted); font-weight:600}
.estimator__v{font-size:1.15rem; font-weight:800; color:var(--ink)}
.estimator__row small{font-size:.7rem; color:var(--muted)}
.estimator__note{font-size:.74rem; color:var(--muted); margin-top:10px; text-align:center}
/* ---------- faq ---------- */
.faq{margin-top:22px; display:grid; gap:10px}
.faq__item{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); overflow:hidden}
.faq__item.is-open{border-color:var(--line-2)}
.faq__q{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; background:none; border:0; padding:16px 18px; cursor:pointer; text-align:left; font-weight:600; font-size:.98rem; color:var(--ink)}
.faq__q:hover{color:var(--blue-d)}
.faq__ico{flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--blue-50); color:var(--blue-d); font-size:1.3rem; font-weight:700; transition:.25s}
.faq__item.is-open .faq__ico{transform:rotate(45deg); background:var(--blue); color:#fff}
.faq__a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.faq__a p{padding:0 18px 16px; color:var(--ink-2); font-size:.92rem; max-width:65ch}
/* ---------- side card ---------- */
.layout__side{position:sticky; top:80px}
.sidecard{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--sh-lg)}
.sidecard__title{font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:1.4rem}
.sidecard__sub{color:var(--ink-2); font-size:.9rem; margin-top:6px}
.sidecard__doc{display:flex; align-items:center; gap:12px; margin:16px 0; padding:12px; background:var(--bg); border-radius:var(--r-md)}
.avatar{flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(140deg,var(--blue),var(--mint)); font-size:.9rem}
.sidecard__doc b{display:block; font-size:.95rem}
.sidecard__doc small{color:var(--muted); font-size:.8rem}
.in{display:block; margin-bottom:14px}
.in span{display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.in select{width:100%; padding:11px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--white); font:inherit; color:var(--ink); cursor:pointer}
.in select:focus{border-color:var(--blue)}
.sidecard__fine{font-size:.76rem; color:var(--muted); text-align:center; margin-top:12px}
/* ---------- floating cta ---------- */
.floatcta{position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(140%); width:min(560px,92%); display:none; align-items:center; justify-content:space-between; gap:12px; background:var(--white); border:1px solid var(--line-2); border-radius:999px; padding:8px 8px 8px 20px; box-shadow:var(--sh-lg); z-index:50; transition:transform .35s cubic-bezier(.4,0,.2,1)}
.floatcta.show{transform:translateX(-50%) translateY(0)}
.floatcta span{display:flex; flex-direction:column; line-height:1.2}
.floatcta b{font-size:1rem}
.floatcta small{font-size:.72rem; color:var(--muted)}
/* ---------- toast ---------- */
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,26px); background:var(--ink); color:#fff; padding:13px 20px; border-radius:999px; font-size:.9rem; font-weight:600; box-shadow:var(--sh-lg); opacity:0; pointer-events:none; transition:.3s; z-index:120; max-width:90vw}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast b{color:var(--mint)}
/* ---------- responsive ---------- */
@media (max-width:900px){
.hero__grid{grid-template-columns:1fr; gap:26px}
.layout{grid-template-columns:1fr}
.layout__side{position:static}
.estimator{grid-template-columns:1fr}
.topnav{display:none}
}
@media (max-width:520px){
.hero{padding:26px 0 18px}
.hero__lede{font-size:1rem}
.trust{gap:16px}
.pros{grid-template-columns:1fr}
.step__head{grid-template-columns:auto 1fr auto; gap:10px; padding:14px}
.step__meta{display:none}
.step__body{padding-left:56px}
.estimator__price{font-size:1.65rem}
.floatcta{display:flex}
.floatcta .btn{padding:11px 18px; font-size:.9rem}
.block{padding:26px 0}
body{padding-bottom:80px}
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.innerHTML = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 3200);
}
/* ---------- steps timeline ---------- */
var steps = Array.prototype.slice.call(document.querySelectorAll(".step"));
var railFill = document.getElementById("railFill");
function updateRail() {
var openIdx = steps.findIndex(function (s) {
return s.classList.contains("is-open");
});
if (openIdx < 0) openIdx = 0;
// fill grows from step 1 to the currently open step
var pct = ((openIdx + 1) / steps.length) * 100;
if (railFill) railFill.style.height = pct + "%";
}
steps.forEach(function (step) {
var head = step.querySelector(".step__head");
head.addEventListener("click", function () {
var isOpen = step.classList.contains("is-open");
steps.forEach(function (s) {
s.classList.remove("is-open");
s.querySelector(".step__head").setAttribute("aria-expanded", "false");
});
if (!isOpen) {
step.classList.add("is-open");
head.setAttribute("aria-expanded", "true");
}
updateRail();
});
});
updateRail();
/* ---------- FAQ accordion ---------- */
var faqItems = Array.prototype.slice.call(document.querySelectorAll(".faq__item"));
faqItems.forEach(function (item) {
var q = item.querySelector(".faq__q");
var a = item.querySelector(".faq__a");
q.addEventListener("click", function () {
var open = item.classList.toggle("is-open");
q.setAttribute("aria-expanded", open ? "true" : "false");
a.style.maxHeight = open ? a.scrollHeight + "px" : "0px";
});
});
/* ---------- cost estimator ---------- */
// base ranges per complexity (single arch)
var COMPLEXITY = {
minor: { low: 1400, high: 2100, dur: "3–6 mo" },
moderate: { low: 2200, high: 3400, dur: "6–9 mo" },
complex: { low: 3600, high: 5200, dur: "12–18 mo" }
};
var WHITENING = 250;
var priceLow = document.getElementById("priceLow");
var priceHigh = document.getElementById("priceHigh");
var perMonth = document.getElementById("perMonth");
var durEl = document.getElementById("dur");
var floatPrice = document.getElementById("floatPrice");
function fmt(n) {
return n.toLocaleString("en-US");
}
// animated count-up between old and new value
function animateNumber(el, to, prefix) {
prefix = prefix || "";
var from = parseInt((el.dataset.val || el.textContent).replace(/[^0-9]/g, ""), 10) || 0;
var start = performance.now();
var dur = 380;
function tick(now) {
var t = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - t, 3);
var val = Math.round(from + (to - from) * eased);
el.textContent = prefix + fmt(val);
if (t < 1) requestAnimationFrame(tick);
else el.dataset.val = String(to);
}
el.dataset.val = String(from);
requestAnimationFrame(tick);
}
function getVal(name) {
var el = document.querySelector('input[name="' + name + '"]:checked');
return el ? el.value : null;
}
function recalc() {
var c = COMPLEXITY[getVal("complexity")] || COMPLEXITY.minor;
var multi = getVal("arch") === "both" ? 1.7 : 1;
var add = document.getElementById("whitening").checked ? WHITENING : 0;
var low = Math.round((c.low * multi + add) / 10) * 10;
var high = Math.round((c.high * multi + add) / 10) * 10;
var month = Math.round(low / 24);
animateNumber(priceLow, low);
animateNumber(priceHigh, high);
animateNumber(perMonth, month, "$");
durEl.textContent = c.dur;
if (floatPrice) floatPrice.textContent = "$" + fmt(low) + "–$" + fmt(high);
}
Array.prototype.slice
.call(document.querySelectorAll('input[name="complexity"], input[name="arch"], #whitening'))
.forEach(function (input) {
input.addEventListener("change", recalc);
});
recalc();
/* ---------- booking actions ---------- */
function book() {
var daySel = document.getElementById("day");
var day = daySel ? daySel.value : "your preferred time";
toast("Consultation requested — <b>" + day + "</b>. We'll confirm within 1 business day.");
}
var bookBtn = document.getElementById("bookBtn");
var floatBtn = document.getElementById("floatBtn");
if (bookBtn) bookBtn.addEventListener("click", book);
if (floatBtn)
floatBtn.addEventListener("click", function () {
var book = document.getElementById("book");
if (book) book.scrollIntoView({ behavior: "smooth", block: "center" });
toast("Scroll down to pick a time and request your free consult.");
});
/* ---------- floating cta visibility ---------- */
var floatcta = document.querySelector(".floatcta");
var hero = document.querySelector(".hero");
if (floatcta && hero && "IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (e) {
floatcta.classList.toggle("show", !e.isIntersecting);
});
},
{ rootMargin: "-120px 0px 0px 0px" }
);
io.observe(hero);
}
/* ---------- smooth anchor scroll ---------- */
document.querySelectorAll('a[href^="#"]').forEach(function (a) {
a.addEventListener("click", function (e) {
var id = a.getAttribute("href");
if (id.length < 2) return;
var target = document.querySelector(id);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Clear Aligners — Brightwater Dental</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=Fraunces:opsz,[email protected],500;9..144,600&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<header class="topbar">
<div class="wrap topbar__inner">
<a class="brand" href="#" aria-label="Brightwater Dental home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M12 3c-3 0-4 2-6 2S3 4 3 7c0 6 3 14 5 14 1.4 0 1.2-4 4-4s2.6 4 4 4c2 0 5-8 5-14 0-3-1-2-3-2s-3-2-6-2Z" fill="currentColor"/></svg>
</span>
<span class="brand__name">Brightwater <b>Dental</b></span>
</a>
<nav class="topnav" aria-label="Primary">
<a href="#what">Overview</a>
<a href="#steps">Process</a>
<a href="#cost">Cost</a>
<a href="#faq">FAQ</a>
</nav>
<a class="btn btn--sm btn--ghost" href="#book">Book</a>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__copy">
<nav class="crumbs" aria-label="Breadcrumb">
<a href="#">Treatments</a><span aria-hidden="true">/</span><span>Orthodontics</span>
</nav>
<span class="pill pill--mint">Orthodontics · Adults & teens</span>
<h1 class="hero__title">Clear Aligners</h1>
<p class="hero__lede">Nearly invisible, removable trays that gently straighten your smile — no metal brackets, no wires, fewer chair visits. Planned digitally, checked by your dentist every step of the way.</p>
<div class="trust">
<div class="trust__item"><b>4.9</b><span>★★★★★ · 820 reviews</span></div>
<div class="trust__item"><b>ADA</b><span>Member practice</span></div>
<div class="trust__item"><b>0%</b><span>Financing available</span></div>
</div>
<div class="hero__cta">
<a class="btn btn--primary" href="#book">Book a free consultation</a>
<a class="btn btn--ghost" href="#cost">Estimate my cost</a>
</div>
</div>
<aside class="hero__card" aria-label="Treatment summary">
<div class="smile" aria-hidden="true">
<div class="smile__glow"></div>
<div class="smile__teeth">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="smile__tray"></div>
</div>
<ul class="facts">
<li><span class="facts__k">Treatment time</span><span class="facts__v">6–18 months</span></li>
<li><span class="facts__k">In-office visits</span><span class="facts__v">Every 6–8 wks</span></li>
<li><span class="facts__k">Wear per day</span><span class="facts__v">20–22 hrs</span></li>
<li><span class="facts__k">Comfort</span><span class="facts__v">Smooth, removable</span></li>
</ul>
</aside>
</div>
</section>
<div class="wrap layout">
<div class="layout__main">
<!-- WHAT IT IS -->
<section id="what" class="block">
<span class="eyebrow">What it is</span>
<h2 class="h2">Straighten your teeth, discreetly</h2>
<p class="prose">Clear aligners are a series of custom, BPA-free trays worn over your teeth. Each set is worn for one to two weeks, moving your teeth a fraction of a millimetre at a time toward the final position your dentist plans in advance. Because they're removable, you eat, brush, and floss exactly as you do today.</p>
<div class="pros">
<div class="pro"><span class="pro__ico" aria-hidden="true">✓</span><div><b>Barely visible</b><p>Thin, clear medical-grade plastic that most people won't notice.</p></div></div>
<div class="pro"><span class="pro__ico" aria-hidden="true">✓</span><div><b>Removable</b><p>Take them out for meals, photos, and special occasions.</p></div></div>
<div class="pro"><span class="pro__ico" aria-hidden="true">✓</span><div><b>Fewer visits</b><p>Digital planning means shorter, less frequent check-ups.</p></div></div>
<div class="pro"><span class="pro__ico" aria-hidden="true">✓</span><div><b>Predictable</b><p>Preview your projected result before you begin.</p></div></div>
</div>
</section>
<!-- STEPS TIMELINE -->
<section id="steps" class="block">
<span class="eyebrow">The process</span>
<h2 class="h2">Five simple steps</h2>
<p class="prose">Select a step to see what happens and what you'll need to do.</p>
<div class="timeline">
<div class="timeline__rail" aria-hidden="true"><span class="timeline__fill" id="railFill"></span></div>
<ol class="steps" id="steps-list">
<li class="step is-open" data-week="Week 0">
<button class="step__head" aria-expanded="true">
<span class="step__dot">1</span>
<span class="step__title">Digital scan & consult</span>
<span class="step__meta">Day 1 · 45 min</span>
<span class="step__chev" aria-hidden="true">⌄</span>
</button>
<div class="step__body"><p>A quick 3D intraoral scan replaces goopy impressions. Your dentist reviews your bite, discusses goals, and answers questions. No commitment on day one.</p></div>
</li>
<li class="step" data-week="Week 1">
<button class="step__head" aria-expanded="false">
<span class="step__dot">2</span>
<span class="step__title">Your treatment plan</span>
<span class="step__meta">~1 week later</span>
<span class="step__chev" aria-hidden="true">⌄</span>
</button>
<div class="step__body"><p>We map every tooth movement digitally and share an animated preview of your projected smile, the number of trays, and the expected timeline before you decide.</p></div>
</li>
<li class="step" data-week="Weeks 2–52">
<button class="step__head" aria-expanded="false">
<span class="step__dot">3</span>
<span class="step__title">Wear your aligners</span>
<span class="step__meta">6–18 months</span>
<span class="step__chev" aria-hidden="true">⌄</span>
</button>
<div class="step__body"><p>Wear each set 20–22 hours a day, swapping to the next tray every 1–2 weeks. Remove them only to eat and clean your teeth. Most people adjust within a day or two.</p></div>
</li>
<li class="step" data-week="Every 6–8 wks">
<button class="step__head" aria-expanded="false">
<span class="step__dot">4</span>
<span class="step__title">Quick check-ins</span>
<span class="step__meta">15–20 min</span>
<span class="step__chev" aria-hidden="true">⌄</span>
</button>
<div class="step__body"><p>Brief visits every 6–8 weeks let your dentist confirm progress and hand over your next sets of trays. Remote monitoring is available between visits.</p></div>
</li>
<li class="step" data-week="After">
<button class="step__head" aria-expanded="false">
<span class="step__dot">5</span>
<span class="step__title">Retainer & results</span>
<span class="step__meta">Ongoing</span>
<span class="step__chev" aria-hidden="true">⌄</span>
</button>
<div class="step__body"><p>Once you reach your goal, a custom retainer keeps your new smile in place. We recommend nightly wear to protect your investment for years to come.</p></div>
</li>
</ol>
</div>
</section>
<!-- COST -->
<section id="cost" class="block">
<span class="eyebrow">Cost & financing</span>
<h2 class="h2">Estimate your range</h2>
<p class="prose">Every smile is different — final pricing is confirmed at your consultation. Adjust the options below for an indicative range.</p>
<div class="estimator">
<div class="estimator__controls">
<fieldset class="field">
<legend>Case complexity</legend>
<div class="segs" role="radiogroup" aria-label="Case complexity">
<label class="seg"><input type="radio" name="complexity" value="minor" checked /><span>Minor</span></label>
<label class="seg"><input type="radio" name="complexity" value="moderate" /><span>Moderate</span></label>
<label class="seg"><input type="radio" name="complexity" value="complex" /><span>Complex</span></label>
</div>
</fieldset>
<fieldset class="field">
<legend>Arches to treat</legend>
<div class="segs" role="radiogroup" aria-label="Arches to treat">
<label class="seg"><input type="radio" name="arch" value="one" /><span>One</span></label>
<label class="seg"><input type="radio" name="arch" value="both" checked /><span>Both</span></label>
</div>
</fieldset>
<label class="switch">
<input type="checkbox" id="whitening" />
<span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
<span class="switch__label">Add take-home whitening <b>(+$250)</b></span>
</label>
</div>
<div class="estimator__out" aria-live="polite">
<span class="estimator__label">Estimated total range</span>
<div class="estimator__price"><span class="cur">$</span><span id="priceLow">2,200</span><span class="dash">–</span><span class="cur">$</span><span id="priceHigh">3,400</span></div>
<div class="estimator__row">
<div><span class="estimator__k">From / month</span><span class="estimator__v" id="perMonth">$92</span><small>24 mo · 0% APR</small></div>
<div><span class="estimator__k">Typical duration</span><span class="estimator__v" id="dur">6–9 mo</span><small>case dependent</small></div>
</div>
<a class="btn btn--primary btn--full" href="#book">Lock in this estimate</a>
<p class="estimator__note">Indicative only. Insurance may cover part of orthodontic care.</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" class="block">
<span class="eyebrow">FAQ</span>
<h2 class="h2">Common questions</h2>
<div class="faq" id="faq">
<div class="faq__item">
<button class="faq__q" aria-expanded="false"><span>Do clear aligners hurt?</span><span class="faq__ico" aria-hidden="true">+</span></button>
<div class="faq__a"><p>You'll feel gentle pressure for a day or two after switching to a new tray — a sign they're working. There are no sharp brackets or wires, so most patients find them far more comfortable than braces.</p></div>
</div>
<div class="faq__item">
<button class="faq__q" aria-expanded="false"><span>How long does treatment take?</span><span class="faq__ico" aria-hidden="true">+</span></button>
<div class="faq__a"><p>Most cases finish in 6 to 18 months depending on complexity and how consistently you wear the trays. Minor spacing corrections can be as quick as a few months.</p></div>
</div>
<div class="faq__item">
<button class="faq__q" aria-expanded="false"><span>Can I eat and drink with them in?</span><span class="faq__ico" aria-hidden="true">+</span></button>
<div class="faq__a"><p>Remove your aligners to eat and to drink anything other than water. This keeps them clear and protects your teeth — then simply pop them back in after brushing.</p></div>
</div>
<div class="faq__item">
<button class="faq__q" aria-expanded="false"><span>Is financing available?</span><span class="faq__ico" aria-hidden="true">+</span></button>
<div class="faq__a"><p>Yes. We offer 0% APR plans over 12 or 24 months, and we'll help you check what your dental insurance may contribute toward orthodontic treatment.</p></div>
</div>
<div class="faq__item">
<button class="faq__q" aria-expanded="false"><span>What if I lose a tray?</span><span class="faq__ico" aria-hidden="true">+</span></button>
<div class="faq__a"><p>Don't worry — call us and we'll advise whether to move to your next set or reorder. We keep your digital plan on file so replacements are straightforward.</p></div>
</div>
</div>
</section>
</div>
<!-- STICKY SIDE CTA -->
<aside class="layout__side" aria-label="Booking">
<div class="sidecard" id="book">
<h3 class="sidecard__title">Ready to start?</h3>
<p class="sidecard__sub">Book a free 30-minute consultation with a 3D scan. No obligation.</p>
<div class="sidecard__doc">
<span class="avatar" aria-hidden="true">DR</span>
<div><b>Dr. Elena Rios</b><small>Orthodontist · 12 yrs</small></div>
</div>
<label class="in"><span>Preferred day</span>
<select id="day">
<option>Weekday morning</option>
<option>Weekday afternoon</option>
<option>Saturday morning</option>
</select>
</label>
<button class="btn btn--primary btn--full" id="bookBtn">Request consultation</button>
<p class="sidecard__fine">🔒 We'll confirm within one business day.</p>
</div>
</aside>
</div>
</main>
<!-- FLOATING CTA (mobile) -->
<div class="floatcta">
<span><b id="floatPrice">$2,200–$3,400</b><small>est. clear aligners</small></span>
<button class="btn btn--primary" id="floatBtn">Book consult</button>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>A single-treatment detail page for a fictional clear-aligner service at Brightwater Dental. The layout leads with a reassuring hero — treatment name, a short benefits summary, trust badges, and a soft gradient smile illustration — followed by a plain-language “what it is” card and a highlight strip of key facts (duration, visits, comfort).
The core interaction is a five-step treatment timeline: clicking any step expands its detail panel and animates a progress rail, so visitors can walk through scan, plan, aligners, check-ins, and retainer at their own pace. A cost-range estimator lets users pick case complexity and number of arches; the displayed price band, monthly financing figure, and expected duration recalculate live with a subtle count-up. The FAQ is a keyboard-accessible accordion, and a floating “Book a consultation” button opens a confirmation toast.
Everything is vanilla HTML, CSS, and JS with a clinical light theme — lots of white, blue and mint accents, rounded cards, and gentle hover and focus states tuned for WCAG AA contrast and full keyboard use.
Illustrative UI only — not intended for real medical use.