Pages Medium
Dental — Landing Orthodontics
A trust-first orthodontics landing page pairing a reassuring hero and free-consult form with an interactive braces-versus-clear-aligners comparison, a four-step treatment timeline, and a live financing estimator. Visitors toggle treatment lengths, drag a monthly-budget slider to see plan totals recalculate, expand FAQ rows, and submit a consultation request that surfaces an inline confirmation toast — all in a clean, clinical, rounded light theme built for reassurance and clarity.
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 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{scroll-behavior:smooth}
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}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid rgba(37,99,235,.45); outline-offset:2px; border-radius:6px}
svg{display:block}
/* ===== Buttons ===== */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
font:inherit; font-weight:700; cursor:pointer; border:1px solid transparent;
border-radius:999px; padding:.72rem 1.3rem; transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 6px 16px rgba(37,99,235,.28)}
.btn-primary:hover{background:var(--blue-d); box-shadow:0 10px 22px rgba(37,99,235,.34)}
.btn-ghost{background:var(--white); color:var(--blue-d); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--blue); background:var(--blue-50)}
.btn-sm{padding:.5rem 1rem; font-size:.9rem}
.btn-lg{padding:.9rem 1.8rem; font-size:1.05rem}
.btn-block{width:100%}
/* ===== Header ===== */
.site-header{
position:sticky; top:0; z-index:40;
display:flex; align-items:center; gap:1.5rem;
padding:.8rem clamp(1rem,4vw,2.5rem);
background:rgba(243,248,255,.85); backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800}
.brand-mark{
display:grid; place-items:center; width:36px; height:36px; border-radius:11px;
background:linear-gradient(135deg,var(--blue),#4f8bff); color:#fff; box-shadow:var(--sh-sm);
}
.brand-name{font-size:1.05rem; color:var(--ink)} .brand-name b{color:var(--blue); font-weight:800}
.nav{display:flex; gap:1.4rem; margin-left:auto; font-weight:600; color:var(--ink-2)}
.nav a{position:relative; padding:.3rem 0; font-size:.95rem}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--blue); transition:right .2s ease; border-radius:2px}
.nav a:hover{color:var(--blue-d)} .nav a:hover::after{right:0}
.nav-cta{margin-left:.4rem}
/* ===== Hero ===== */
.hero{
display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem);
align-items:center; max-width:1180px; margin:0 auto;
padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem);
}
.pill{
display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; font-weight:600;
color:var(--ink-2); background:var(--white); border:1px solid var(--line);
padding:.4rem .8rem; border-radius:999px; box-shadow:var(--sh-sm);
}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px var(--mint-50); animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.hero h1{font-size:clamp(2.3rem,5vw,3.5rem); font-weight:800; margin:1.1rem 0 .9rem}
.grad{background:linear-gradient(120deg,var(--blue),var(--mint)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:1.1rem; color:var(--ink-2); max-width:38ch}
.lede b{color:var(--ink)}
.trust{display:flex; flex-direction:column; gap:.55rem; margin:1.4rem 0}
.trust li{display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink-2)}
.ic{width:20px; height:20px; flex:none; fill:none; stroke:var(--mint); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
background:var(--mint-50); border-radius:50%; padding:3px}
.hero-stats{display:flex; gap:1.5rem; margin-top:1.4rem; flex-wrap:wrap}
.hero-stats>div{display:flex; flex-direction:column}
.hero-stats b{font-size:1.35rem; color:var(--ink)}
.hero-stats span{font-size:.82rem; color:var(--muted)}
/* ===== Consult card ===== */
.consult-card{
background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--sh-lg);
}
.consult-card h2{font-size:1.4rem}
.consult-sub{color:var(--muted); font-size:.9rem; margin:.35rem 0 1.3rem}
.field{margin-bottom:1rem}
.field label{display:block; font-weight:600; font-size:.88rem; margin-bottom:.35rem; color:var(--ink-2)}
.field input,.field select{
width:100%; font:inherit; padding:.7rem .85rem; border-radius:var(--r-sm);
border:1px solid var(--line-2); background:#fbfdff; color:var(--ink); transition:border .15s, box-shadow .15s;
}
.field input::placeholder{color:#a6b3c2}
.field input:focus,.field select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.field.invalid input{border-color:var(--danger); box-shadow:0 0 0 3px rgba(224,82,82,.14)}
.err{display:block; min-height:1rem; color:var(--danger); font-size:.78rem; font-weight:600; margin-top:.3rem}
.consult-fine{font-size:.78rem; color:var(--muted); text-align:center; margin-top:.9rem}
/* ===== Section shell ===== */
.section{max-width:1180px; margin:0 auto; padding:clamp(3rem,7vw,5rem) clamp(1rem,4vw,2.5rem)}
.band{background:linear-gradient(180deg,#fff,#f6faff); border-top:1px solid var(--line); border-bottom:1px solid var(--line); max-width:none}
.band>*{max-width:1180px; margin-inline:auto}
.section-head{max-width:56ch; margin:0 auto 2.4rem; text-align:center}
.eyebrow{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); background:var(--blue-50); padding:.3rem .8rem; border-radius:999px}
.section-head h2{font-size:clamp(1.7rem,3.6vw,2.4rem); margin:.9rem 0 .6rem}
.section-head p{color:var(--ink-2)}
/* ===== Segmented toggle ===== */
.seg{
display:flex; gap:.3rem; padding:.3rem; width:max-content; margin:0 auto 2rem;
background:var(--white); border:1px solid var(--line); border-radius:999px; box-shadow:var(--sh-sm);
}
.seg-btn{
font:inherit; font-weight:700; cursor:pointer; border:none; background:transparent; color:var(--ink-2);
padding:.55rem 1.3rem; border-radius:999px; transition:background .2s, color .2s;
}
.seg-btn.is-active{background:var(--blue); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.3)}
/* ===== Comparison ===== */
.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.cmp-card{
background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.5rem; box-shadow:var(--sh-sm); transition:transform .2s, box-shadow .25s, border-color .2s;
}
.cmp-card.is-active{border-color:var(--blue); box-shadow:var(--sh-md); transform:translateY(-3px)}
.cmp-top{display:flex; gap:1rem; align-items:center; margin-bottom:1.1rem}
.cmp-visual{
width:64px; height:64px; flex:none; border-radius:var(--r-md); display:grid; place-items:center;
color:#fff; font-size:1.2rem; letter-spacing:2px; box-shadow:var(--sh-sm);
}
.grad-mint{background:linear-gradient(135deg,var(--mint),#2bb6d9)}
.grad-blue{background:linear-gradient(135deg,var(--blue),#6ea8ff)}
.cmp-top h3{font-size:1.25rem; margin:.35rem 0 .25rem}
.cmp-price{color:var(--muted); font-size:.9rem} .cmp-price b{color:var(--ink); font-size:1.05rem}
.badge{display:inline-block; font-size:.72rem; font-weight:700; padding:.22rem .6rem; border-radius:999px}
.badge-mint{background:var(--mint-50); color:#12855c}
.badge-blue{background:var(--blue-50); color:var(--blue-d)}
.cmp-list{border-top:1px solid var(--line); margin-bottom:1.2rem}
.cmp-list li{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line)}
.cmp-list span{color:var(--muted); font-size:.9rem}
.cmp-list b{color:var(--ink); font-size:.92rem; text-align:right}
/* ===== Timeline ===== */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:step}
.step{
position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
padding:1.5rem 1.3rem; box-shadow:var(--sh-sm); transition:transform .2s, box-shadow .25s;
}
.step:hover{transform:translateY(-4px); box-shadow:var(--sh-md)}
.step-num{
display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
background:var(--blue-50); color:var(--blue-d); font-weight:800; font-size:1.15rem; margin-bottom:1rem;
}
.step h3{font-size:1.08rem; margin-bottom:.45rem}
.step p{color:var(--ink-2); font-size:.92rem}
.step-tag{display:inline-block; margin-top:.9rem; font-size:.78rem; font-weight:700; color:var(--mint); background:var(--mint-50); padding:.28rem .7rem; border-radius:999px}
/* ===== Financing ===== */
.finance{display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem; align-items:start}
.fin-controls{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem; box-shadow:var(--sh-sm)}
.fin-field{margin-bottom:1.5rem} .fin-field:last-child{margin-bottom:0}
.fin-field>label{display:block; font-weight:700; margin-bottom:.7rem; color:var(--ink)}
.fin-plans{display:flex; gap:.6rem; flex-wrap:wrap}
.plan{
flex:1 1 120px; display:flex; flex-direction:column; gap:.2rem; align-items:flex-start;
font:inherit; font-weight:700; cursor:pointer; text-align:left;
padding:.75rem .9rem; border-radius:var(--r-md); border:1px solid var(--line-2); background:#fbfdff; color:var(--ink-2);
transition:border .2s, background .2s, color .2s;
}
.plan span{font-size:.85rem; color:var(--muted); font-weight:600}
.plan.is-active{border-color:var(--blue); background:var(--blue-50); color:var(--blue-d)}
.plan.is-active span{color:var(--blue-d)}
.range-row{display:flex; align-items:center; gap:1rem}
.range-row output{
flex:none; min-width:88px; text-align:center; font-weight:800; color:var(--blue-d);
background:var(--blue-50); border-radius:var(--r-sm); padding:.4rem .6rem; font-size:.95rem;
}
input[type=range]{
-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
background:linear-gradient(90deg,var(--blue) 0%,var(--blue) var(--fill,40%),#dbe6f5 var(--fill,40%));
cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
background:#fff; border:4px solid var(--blue); box-shadow:var(--sh-sm); transition:transform .12s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:#fff; border:4px solid var(--blue); box-shadow:var(--sh-sm)}
.fin-summary{
background:linear-gradient(160deg,#0f2740,#1c3f66); color:#fff; border-radius:var(--r-lg);
padding:1.7rem; box-shadow:var(--sh-lg);
}
.fin-summary h3{font-size:1.3rem; margin:.7rem 0 1.2rem}
.fin-metrics{display:grid; gap:.1rem}
.metric{display:flex; justify-content:space-between; align-items:baseline; padding:.65rem 0; border-bottom:1px solid rgba(255,255,255,.14)}
.metric span{color:#b6c6da; font-size:.92rem}
.metric b{font-size:1.15rem; font-weight:700}
.metric.total{border-bottom:none; margin-top:.3rem}
.metric.total b{color:var(--mint); font-size:1.5rem}
.fin-bar{height:8px; border-radius:999px; background:rgba(255,255,255,.15); overflow:hidden; margin:1.1rem 0 .8rem}
.fin-bar span{display:block; height:100%; width:40%; border-radius:999px; background:linear-gradient(90deg,var(--mint),#8ff0c9); transition:width .35s ease}
.fin-note{font-size:.85rem; color:#c6d5e8; margin-bottom:1.2rem}
.fin-summary .badge-mint{background:rgba(52,211,153,.2); color:#8ff0c9}
/* ===== FAQ ===== */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem}
.q{background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); overflow:hidden}
.q summary{
list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
font-weight:700; padding:1.1rem 1.3rem; color:var(--ink);
}
.q summary::-webkit-details-marker{display:none}
.chev{width:12px; height:12px; flex:none; border-right:2.5px solid var(--muted); border-bottom:2.5px solid var(--muted); transform:rotate(45deg); transition:transform .25s}
.q[open] .chev{transform:rotate(-135deg)}
.q[open] summary{color:var(--blue-d)}
.q p{padding:0 1.3rem 1.2rem; color:var(--ink-2); font-size:.95rem}
/* ===== Closing CTA ===== */
.cta-final{padding:clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,2.5rem)}
.cta-inner{
max-width:900px; margin:0 auto; text-align:center; color:#fff;
background:linear-gradient(135deg,var(--blue),#2bb6d9); border-radius:var(--r-lg);
padding:clamp(2.5rem,6vw,4rem) 1.5rem; box-shadow:var(--sh-lg);
}
.cta-inner h2{font-size:clamp(1.7rem,4vw,2.6rem)}
.cta-inner p{margin:.8rem 0 1.7rem; color:rgba(255,255,255,.9); font-size:1.1rem}
.cta-inner .btn-primary{background:#fff; color:var(--blue-d)}
.cta-inner .btn-primary:hover{background:#f0f6ff}
/* ===== Footer ===== */
.site-footer{background:#0f2740; color:#c6d5e8; padding:clamp(2.5rem,5vw,3.5rem) clamp(1rem,4vw,2.5rem) 2rem}
.foot-cols{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem}
.foot-cols .brand-name{color:#fff} .foot-cols .brand-name b{color:#8ff0c9}
.foot-cols b{color:#fff; display:block; margin-bottom:.6rem}
.foot-cols p{font-size:.9rem; margin-top:.3rem}
.foot-fine{max-width:1180px; margin:2rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); font-size:.82rem; color:#8298b3; text-align:center}
/* ===== Toast ===== */
.toast{
position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%);
background:var(--ink); color:#fff; font-weight:600; padding:.85rem 1.3rem; border-radius:999px;
box-shadow:var(--sh-lg); z-index:80; opacity:0; transition:transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s;
display:flex; align-items:center; gap:.5rem; max-width:90vw;
}
.toast.show{transform:translate(-50%,0); opacity:1}
/* ===== Responsive ===== */
@media (max-width:900px){
.hero{grid-template-columns:1fr}
.finance{grid-template-columns:1fr}
.timeline{grid-template-columns:1fr 1fr}
.foot-cols{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
.nav{display:none}
.site-header{gap:.8rem}
.hero{padding-top:2rem}
.hero-stats{gap:1.1rem}
.compare-grid{grid-template-columns:1fr}
.timeline{grid-template-columns:1fr}
.fin-plans{flex-direction:column}
.plan{flex:1 1 auto}
.range-row{flex-wrap:wrap}
.range-row output{min-width:0; width:100%}
.foot-cols{grid-template-columns:1fr}
.btn-lg{width:100%}
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = "✓ " + msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 3200);
}
var money = function (n) {
return "$" + Math.round(n).toLocaleString("en-US");
};
/* ---------- Smooth-scroll for data-scroll buttons ---------- */
document.querySelectorAll("[data-scroll]").forEach(function (btn) {
btn.addEventListener("click", function () {
var target = document.querySelector(btn.getAttribute("data-scroll"));
if (target) target.scrollIntoView({ behavior: "smooth", block: "center" });
});
});
/* ---------- Comparison segmented toggle ---------- */
var segBtns = document.querySelectorAll(".seg-btn");
var cmpCards = document.querySelectorAll(".cmp-card");
function setCompare(opt) {
segBtns.forEach(function (b) {
var on = b.getAttribute("data-opt") === opt;
b.classList.toggle("is-active", on);
b.setAttribute("aria-selected", on ? "true" : "false");
});
cmpCards.forEach(function (c) {
c.classList.toggle("is-active", c.getAttribute("data-card") === opt);
});
}
segBtns.forEach(function (b) {
b.addEventListener("click", function () {
setCompare(b.getAttribute("data-opt"));
});
});
setCompare("aligners");
/* ---------- "Choose" buttons prefill the form ---------- */
var treatSelect = document.getElementById("c-treat");
document.querySelectorAll(".cmp-pick").forEach(function (btn) {
btn.addEventListener("click", function () {
var val = btn.getAttribute("data-pick");
if (treatSelect) {
for (var i = 0; i < treatSelect.options.length; i++) {
if (treatSelect.options[i].value === val) treatSelect.selectedIndex = i;
}
}
// sync financing plan too
var planKey = val.indexOf("aligner") > -1 ? "aligners" : "braces";
selectPlan(document.querySelector('.plan[data-plan="' + planKey + '"]'));
var consult = document.getElementById("consult");
if (consult) consult.scrollIntoView({ behavior: "smooth", block: "center" });
toast(val + " selected — tell us where to reach you");
});
});
/* ---------- Range fill visual ---------- */
function paintRange(input) {
var pct = ((input.value - input.min) / (input.max - input.min)) * 100;
input.style.setProperty("--fill", pct + "%");
}
/* ---------- Financing estimator ---------- */
var plans = document.querySelectorAll(".plan");
var down = document.getElementById("down");
var budget = document.getElementById("budget");
var downOut = document.getElementById("down-out");
var budgetOut = document.getElementById("budget-out");
var mMonthly = document.getElementById("m-monthly");
var mTerm = document.getElementById("m-term");
var mFinanced = document.getElementById("m-financed");
var mTotal = document.getElementById("m-total");
var finFill = document.getElementById("fin-fill");
var finNote = document.getElementById("fin-note");
var currentPrice = 3400;
var MAX_TERM = 36; // months cap for in-house 0% plan
function selectPlan(el) {
if (!el) return;
plans.forEach(function (p) {
var on = p === el;
p.classList.toggle("is-active", on);
p.setAttribute("aria-checked", on ? "true" : "false");
});
currentPrice = parseInt(el.getAttribute("data-price"), 10);
recalc();
}
plans.forEach(function (p) {
p.addEventListener("click", function () {
selectPlan(p);
});
});
function recalc() {
var d = Math.min(parseInt(down.value, 10), currentPrice);
var financed = Math.max(currentPrice - d, 0);
var perMonth = parseInt(budget.value, 10);
var term, monthly;
if (financed <= 0) {
term = 0;
monthly = 0;
} else {
term = Math.ceil(financed / perMonth);
if (term > MAX_TERM) {
term = MAX_TERM;
monthly = Math.ceil(financed / MAX_TERM);
} else {
monthly = perMonth;
// even out last payment across the term
monthly = Math.ceil(financed / term);
}
}
downOut.textContent = money(d);
budgetOut.textContent = money(perMonth) + "/mo";
mMonthly.textContent = term === 0 ? money(0) : money(monthly);
mTerm.textContent = term + " mo";
mFinanced.textContent = money(financed);
mTotal.textContent = money(currentPrice);
// progress bar = how much the down payment covers
var covered = currentPrice > 0 ? (d / currentPrice) * 100 : 0;
finFill.style.width = Math.max(covered, 3) + "%";
if (term === 0) {
finNote.textContent = "Paid in full up front — you're all set!";
} else if (parseInt(budget.value, 10) < monthly) {
finNote.textContent =
"Capped at " + MAX_TERM + " months, so we've nudged it to " + money(monthly) + "/mo. No interest, ever.";
} else {
finNote.textContent = "Paid off in " + term + " months. No interest, ever.";
}
}
[down, budget].forEach(function (input) {
paintRange(input);
input.addEventListener("input", function () {
paintRange(input);
recalc();
});
});
recalc();
/* ---------- Consult form validation ---------- */
var form = document.getElementById("consult-form");
function setError(id, msg) {
var input = document.getElementById(id);
var wrap = input.closest(".field");
var err = document.querySelector('.err[data-for="' + id + '"]');
if (msg) {
wrap.classList.add("invalid");
input.setAttribute("aria-invalid", "true");
if (err) err.textContent = msg;
} else {
wrap.classList.remove("invalid");
input.removeAttribute("aria-invalid");
if (err) err.textContent = "";
}
}
form.addEventListener("submit", function (e) {
e.preventDefault();
var name = document.getElementById("c-name");
var email = document.getElementById("c-email");
var ok = true;
if (!name.value.trim()) {
setError("c-name", "Please enter your name");
ok = false;
} else setError("c-name", "");
var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim());
if (!emailOk) {
setError("c-email", "Enter a valid email address");
ok = false;
} else setError("c-email", "");
if (!ok) {
var firstBad = form.querySelector(".field.invalid input");
if (firstBad) firstBad.focus();
return;
}
var treat = document.getElementById("c-treat").value;
toast("Thanks, " + name.value.trim().split(" ")[0] + "! We'll confirm your " +
(treat === "Not sure yet" ? "consult" : treat.toLowerCase()) + " within a day.");
form.reset();
[down, budget].forEach(paintRange);
});
// clear errors as the user types
["c-name", "c-email"].forEach(function (id) {
document.getElementById(id).addEventListener("input", function () {
setError(id, "");
});
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BrightArc Orthodontics — Straighter smiles, gently done</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&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ===== Header ===== -->
<header class="site-header">
<a class="brand" href="#top" aria-label="BrightArc Orthodontics 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="M5 6c2.5-2 5-2 7 0 2-2 4.5-2 7 0 0 5-2.5 12-4 12-1 0-1.2-3-3-3s-2 3-3 3c-1.5 0-4-7-4-12Z"/></svg>
</span>
<span class="brand-name">BrightArc <b>Orthodontics</b></span>
</a>
<nav class="nav" aria-label="Primary">
<a href="#compare">Compare</a>
<a href="#process">Process</a>
<a href="#financing">Financing</a>
<a href="#faq">FAQ</a>
</nav>
<a href="#consult" class="btn btn-primary btn-sm nav-cta">Free consult</a>
</header>
<main id="top">
<!-- ===== Hero ===== -->
<section class="hero">
<div class="hero-copy">
<span class="pill"><span class="dot" aria-hidden="true"></span> Now accepting new smiles · 2026</span>
<h1>Straighter smiles, <span class="grad">gently</span> done.</h1>
<p class="lede">Expert braces and near-invisible clear aligners from board-certified orthodontists. Book a <b>free consultation</b> — scan, plan, and a same-day quote with 0% APR financing.</p>
<ul class="trust">
<li><svg viewBox="0 0 24 24" class="ic" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> Free 3D scan & treatment plan</li>
<li><svg viewBox="0 0 24 24" class="ic" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> 0% interest in-house financing</li>
<li><svg viewBox="0 0 24 24" class="ic" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg> 12,400+ smiles straightened</li>
</ul>
<div class="hero-stats" role="list">
<div role="listitem"><b>4.9★</b><span>1,860 reviews</span></div>
<div role="listitem"><b>6–18 mo</b><span>typical treatment</span></div>
<div role="listitem"><b>$0</b><span>down options</span></div>
</div>
</div>
<!-- ===== Consult form card ===== -->
<aside class="consult-card" id="consult" aria-labelledby="consult-title">
<h2 id="consult-title">Book your free consult</h2>
<p class="consult-sub">No obligation · 20 minutes · same-day quote</p>
<form id="consult-form" novalidate>
<div class="field">
<label for="c-name">Full name</label>
<input id="c-name" name="name" type="text" autocomplete="name" placeholder="Jamie Rivera" required />
<span class="err" data-for="c-name"></span>
</div>
<div class="field">
<label for="c-email">Email</label>
<input id="c-email" name="email" type="email" autocomplete="email" placeholder="[email protected]" required />
<span class="err" data-for="c-email"></span>
</div>
<div class="field">
<label for="c-treat">Interested in</label>
<select id="c-treat" name="treatment">
<option value="Not sure yet">Not sure yet — help me choose</option>
<option value="Clear aligners">Clear aligners</option>
<option value="Traditional braces">Traditional braces</option>
<option value="Ceramic braces">Ceramic (clear) braces</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Request my free consult</button>
<p class="consult-fine">🔒 Your details stay private. We reply within one business day.</p>
</form>
</aside>
</section>
<!-- ===== Comparison ===== -->
<section class="section" id="compare">
<div class="section-head">
<span class="eyebrow">Choose your path</span>
<h2>Braces vs. clear aligners</h2>
<p>Both straighten beautifully. The right fit depends on your lifestyle, budget, and how much correction you need. Tap an option to see the details.</p>
</div>
<div class="seg" role="tablist" aria-label="Treatment comparison">
<button class="seg-btn is-active" role="tab" aria-selected="true" data-opt="aligners">Clear aligners</button>
<button class="seg-btn" role="tab" aria-selected="false" data-opt="braces">Traditional braces</button>
</div>
<div class="compare-grid">
<article class="cmp-card" data-card="aligners">
<div class="cmp-top">
<div class="cmp-visual grad-mint" aria-hidden="true"><span>◠◡◠</span></div>
<div>
<span class="badge badge-mint">Most discreet</span>
<h3>Clear aligners</h3>
<p class="cmp-price">From <b>$3,400</b></p>
</div>
</div>
<ul class="cmp-list">
<li><span>Visibility</span><b>Nearly invisible</b></li>
<li><span>Removable</span><b>Yes — eat & brush freely</b></li>
<li><span>Avg. treatment</span><b>6–14 months</b></li>
<li><span>Office visits</span><b>Every 8–10 weeks</b></li>
<li><span>Best for</span><b>Mild–moderate cases</b></li>
</ul>
<button class="btn btn-ghost btn-block cmp-pick" data-pick="Clear aligners">Choose aligners</button>
</article>
<article class="cmp-card" data-card="braces">
<div class="cmp-top">
<div class="cmp-visual grad-blue" aria-hidden="true"><span>▦▦▦</span></div>
<div>
<span class="badge badge-blue">Most versatile</span>
<h3>Traditional braces</h3>
<p class="cmp-price">From <b>$2,900</b></p>
</div>
</div>
<ul class="cmp-list">
<li><span>Visibility</span><b>Metal or ceramic</b></li>
<li><span>Removable</span><b>Fixed — always working</b></li>
<li><span>Avg. treatment</span><b>12–24 months</b></li>
<li><span>Office visits</span><b>Every 4–6 weeks</b></li>
<li><span>Best for</span><b>Complex corrections</b></li>
</ul>
<button class="btn btn-ghost btn-block cmp-pick" data-pick="Traditional braces">Choose braces</button>
</article>
</div>
</section>
<!-- ===== Process timeline ===== -->
<section class="section band" id="process">
<div class="section-head">
<span class="eyebrow">What to expect</span>
<h2>Your journey to a straighter smile</h2>
<p>Four simple steps, fully guided by your orthodontist from first scan to your final, confident grin.</p>
</div>
<ol class="timeline">
<li class="step">
<span class="step-num">1</span>
<h3>Free scan & consult</h3>
<p>A 3D digital scan — no messy molds. We map your bite and answer every question.</p>
<span class="step-tag">20 min · $0</span>
</li>
<li class="step">
<span class="step-num">2</span>
<h3>Custom treatment plan</h3>
<p>See your predicted results and a transparent quote before you commit to anything.</p>
<span class="step-tag">Same day</span>
</li>
<li class="step">
<span class="step-num">3</span>
<h3>Active treatment</h3>
<p>Wear your aligners or adjust your braces with quick, comfortable check-ins.</p>
<span class="step-tag">6–24 mo</span>
</li>
<li class="step">
<span class="step-num">4</span>
<h3>Retention & smile care</h3>
<p>Custom retainers lock in your new smile. We keep it perfect for the long run.</p>
<span class="step-tag">Lifetime support</span>
</li>
</ol>
</section>
<!-- ===== Financing ===== -->
<section class="section" id="financing">
<div class="section-head">
<span class="eyebrow">Made affordable</span>
<h2>Estimate your monthly plan</h2>
<p>0% APR, in-house financing. Pick a treatment, set what fits your budget, and see your numbers update instantly.</p>
</div>
<div class="finance">
<div class="fin-controls">
<div class="fin-field">
<label id="plan-label">Treatment plan</label>
<div class="fin-plans" role="radiogroup" aria-labelledby="plan-label">
<button class="plan is-active" role="radio" aria-checked="true" data-plan="aligners" data-price="3400">Clear aligners<span>$3,400</span></button>
<button class="plan" role="radio" aria-checked="false" data-plan="braces" data-price="2900">Metal braces<span>$2,900</span></button>
<button class="plan" role="radio" aria-checked="false" data-plan="ceramic" data-price="4200">Ceramic braces<span>$4,200</span></button>
</div>
</div>
<div class="fin-field">
<label for="down">Down payment</label>
<div class="range-row">
<input id="down" type="range" min="0" max="1500" step="50" value="500" />
<output id="down-out" for="down">$500</output>
</div>
</div>
<div class="fin-field">
<label for="budget">Monthly budget</label>
<div class="range-row">
<input id="budget" type="range" min="75" max="500" step="5" value="150" />
<output id="budget-out" for="budget">$150/mo</output>
</div>
</div>
</div>
<div class="fin-summary" aria-live="polite">
<span class="badge badge-mint">0% APR</span>
<h3>Your estimate</h3>
<div class="fin-metrics">
<div class="metric"><span>Monthly payment</span><b id="m-monthly">$150</b></div>
<div class="metric"><span>Term</span><b id="m-term">20 mo</b></div>
<div class="metric"><span>Financed amount</span><b id="m-financed">$2,900</b></div>
<div class="metric total"><span>Total cost</span><b id="m-total">$3,400</b></div>
</div>
<div class="fin-bar" aria-hidden="true"><span id="fin-fill"></span></div>
<p class="fin-note" id="fin-note">Paid off in 20 months. No interest, ever.</p>
<button class="btn btn-primary btn-block" data-scroll="#consult">Lock in this plan</button>
</div>
</div>
</section>
<!-- ===== FAQ ===== -->
<section class="section band" id="faq">
<div class="section-head">
<span class="eyebrow">Good to know</span>
<h2>Questions, answered</h2>
</div>
<div class="faq">
<details class="q" open>
<summary>Does treatment hurt?<span class="chev" aria-hidden="true"></span></summary>
<p>You may feel mild pressure for a day or two after adjustments or new aligner trays — that's your smile moving into place. Over-the-counter relief and soft foods handle it easily.</p>
</details>
<details class="q">
<summary>Are clear aligners as effective as braces?<span class="chev" aria-hidden="true"></span></summary>
<p>For mild to moderate cases, absolutely. Complex bite corrections sometimes respond faster to braces. Your free scan tells us which path gives you the best result.</p>
</details>
<details class="q">
<summary>How much does it really cost?<span class="chev" aria-hidden="true"></span></summary>
<p>Plans start at $2,900. Most patients split it across 0% APR monthly payments. Use the estimator above to preview yours — the quote at your consult is fixed, with no surprises.</p>
</details>
<details class="q">
<summary>Do you accept dental insurance?<span class="chev" aria-hidden="true"></span></summary>
<p>Yes. Many plans cover a portion of orthodontic care. We verify your benefits during your consult and apply them before financing the balance.</p>
</details>
</div>
</section>
<!-- ===== Closing CTA ===== -->
<section class="cta-final">
<div class="cta-inner">
<h2>Your best smile starts with a free scan.</h2>
<p>No pressure, no cost — just a clear plan and a same-day quote.</p>
<button class="btn btn-primary btn-lg" data-scroll="#consult">Book my free consult</button>
</div>
</section>
</main>
<footer class="site-footer">
<div class="foot-cols">
<div>
<span class="brand-name">BrightArc <b>Orthodontics</b></span>
<p>1420 Meridian Ave, Suite 200 · Riverside, CA</p>
<p>(555) 018-2240 · [email protected]</p>
</div>
<div>
<b>Hours</b>
<p>Mon–Fri · 8am–6pm</p>
<p>Sat · 9am–2pm</p>
</div>
<div>
<b>Care</b>
<p>Clear aligners · Braces</p>
<p>Retainers · Kids & teens</p>
</div>
</div>
<p class="foot-fine">© 2026 BrightArc Orthodontics — a fictional practice. Illustrative UI only, not for real medical use.</p>
</footer>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>This orthodontics landing page opens with a reassuring hero — a confident value promise, trust badges, and a compact free-consultation form that validates inline and confirms with a toast. Below it, a side-by-side comparison lets visitors weigh traditional braces against clear aligners, with a segmented toggle that swaps highlighted specs (visibility, treatment time, visit cadence, and price band) for each option.
A four-step process timeline walks patients from free scan to retention, and a financing panel turns cost anxiety into clarity: pick a treatment plan, drag the monthly-budget slider, and watch the estimated term, monthly payment, and total recalculate live against a 0% APR in-house plan. An expandable FAQ and a closing call-to-action round out the flow, all keyboard-navigable with visible focus states and a responsive layout that collapses gracefully on small screens.
Every control is powered by vanilla JavaScript — the comparison toggle, financing math, FAQ accordion, smooth-scroll anchors, and form handling — with no external libraries.
Illustrative UI only — not intended for real medical use.