Pages Medium
Auto — Motorcycle Dealership Landing
A gritty, heritage-styled motorcycle dealership landing page built in vanilla HTML, CSS, and JavaScript. Features a blacked-out hero with a featured bike card, a filterable 2026 model lineup, gear and apparel grid, a live service-bay status panel, a rider club events board with RSVP, an interactive finance estimator with live monthly payment math, and a test-ride booking form. Includes a sticky mobile nav, scrolling marquee, scroll-reveal animations, and a reusable toast helper — all self-contained with no frameworks or build step.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Motorcycle / Harley-style — black + chrome + oxblood */
--black: #0d0d0f;
--black-2: #15151a;
--black-3: #1d1e25;
--chrome: #c9ccd2;
--chrome-l: #eceef1;
--chrome-d: #9aa0aa;
--oxblood: #5c1a1a;
--oxblood-l: #7a2424;
--oxblood-d: #3f1010;
--orange: #c0461f; /* warm rust accent */
--orange-d: #9c3414;
--ink: #16181c;
--ink-2: #3b4049;
--muted: #737a85;
--bg: #f1f0ee;
--surface: #ffffff;
--line: rgba(13,13,15,0.1);
--line-2: rgba(13,13,15,0.18);
--ok: #2f9e6f;
--waiting: #c98b21;
--inprogress: #2b6fff;
--done: #2f9e6f;
--hold: #b8392e;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 18px;
--shadow: 0 1px 2px rgba(13,13,15,.06), 0 8px 24px rgba(13,13,15,.08);
--shadow-lg: 0 24px 60px rgba(13,13,15,.22);
--serif: "Inter", system-ui, -apple-system, sans-serif;
--display: "Inter", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; font-weight: 800; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.tabular { font-variant-numeric: tabular-nums; }
/* ---------- buttons ---------- */
.btn {
--b: var(--ink);
display: inline-flex; align-items: center; gap: .5rem;
font: inherit; font-weight: 700; letter-spacing: .01em;
padding: .8rem 1.3rem; border-radius: var(--r-sm);
border: 1px solid transparent; cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
text-transform: uppercase; font-size: .82rem;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--orange { background: var(--oxblood); color: var(--chrome-l); box-shadow: 0 6px 18px rgba(92,26,26,.32); }
.btn--orange:hover { background: var(--oxblood-l); box-shadow: 0 10px 26px rgba(92,26,26,.42); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--chrome-l); transform: translateY(-1px); }
.btn--ghost-light { color: var(--chrome-l); border-color: rgba(255,255,255,.28); }
.btn--ghost-light:hover { background: var(--chrome-l); color: var(--black); border-color: var(--chrome-l); }
.btn--mini { padding: .5rem .85rem; font-size: .72rem; background: var(--ink); color: var(--chrome-l); border-radius: 6px; }
.btn--mini:hover { background: var(--oxblood); transform: translateY(-1px); }
.btn--block { width: 100%; justify-content: center; }
.eyebrow {
display: inline-flex; align-items: center; gap: .6rem;
font-size: .76rem; font-weight: 700; letter-spacing: .18em;
text-transform: uppercase; color: var(--oxblood-l); margin: 0 0 1rem;
}
.eyebrow--light { color: var(--chrome); }
.eyebrow__bar { width: 28px; height: 2px; background: var(--orange); display: inline-block; }
.eyebrow--light .eyebrow__bar { background: var(--chrome); }
/* ---------- nav ---------- */
.nav {
position: sticky; top: 0; z-index: 50;
background: rgba(13,13,15,.86);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav__inner {
max-width: 1200px; margin: 0 auto; padding: .85rem 1.25rem;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--chrome-l); }
.brand__mark {
display: grid; place-items: center; width: 38px; height: 38px;
border-radius: 10px; background: linear-gradient(140deg, var(--oxblood), var(--oxblood-d));
color: var(--chrome-l); border: 1px solid rgba(255,255,255,.14);
}
.brand__name { font-weight: 800; letter-spacing: .06em; font-size: 1.02rem; line-height: 1; display: inline-flex; flex-direction: column; }
.brand__co { font-size: .58rem; letter-spacing: .32em; color: var(--chrome-d); font-weight: 600; margin-top: 2px; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; }
.nav__links a { color: var(--chrome); font-size: .86rem; font-weight: 600; transition: color .15s ease; }
.nav__links a:hover { color: var(--chrome-l); }
.nav__cta {
background: var(--oxblood); color: var(--chrome-l) !important;
padding: .55rem 1rem; border-radius: 6px; text-transform: uppercase; font-size: .78rem !important;
letter-spacing: .04em;
}
.nav__cta:hover { background: var(--oxblood-l); }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { width: 24px; height: 2px; background: var(--chrome-l); transition: transform .25s ease, opacity .25s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- hero ---------- */
.hero {
position: relative; overflow: hidden;
background:
radial-gradient(120% 100% at 80% 0%, rgba(92,26,26,.45), transparent 55%),
linear-gradient(160deg, var(--black), var(--black-2) 60%, var(--black-3));
color: var(--chrome-l);
}
.hero__grit {
position: absolute; inset: 0; pointer-events: none; opacity: .5;
background-image:
repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px),
radial-gradient(circle at 20% 80%, rgba(192,70,31,.18), transparent 45%);
}
.hero__inner {
position: relative; max-width: 1200px; margin: 0 auto;
padding: 4.5rem 1.25rem 5rem;
display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .98; }
.hero h1 em { font-style: italic; color: var(--orange); }
.hero__lede { color: var(--chrome); max-width: 46ch; margin: 1.3rem 0 0; font-size: 1.05rem; }
.hero__lede strong { color: var(--chrome-l); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.8rem; }
.hero__stats { display: flex; gap: 2.4rem; margin: 2.6rem 0 0; }
.hero__stats dt { font-size: 1.9rem; font-weight: 800; color: var(--chrome-l); font-variant-numeric: tabular-nums; }
.hero__stats dd { margin: .15rem 0 0; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--chrome-d); }
.hero__bike { display: flex; justify-content: center; }
.bike-card {
position: relative; width: 100%; max-width: 420px;
background: linear-gradient(180deg, var(--black-3), var(--black-2));
border: 1px solid rgba(255,255,255,.12);
border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--shadow-lg);
}
.bike-card__tag {
position: absolute; top: 14px; left: 14px; z-index: 2;
background: var(--orange); color: #fff; font-size: .68rem; font-weight: 800;
letter-spacing: .12em; padding: .35rem .65rem; border-radius: 5px;
}
.bike-card__photo {
height: 230px; position: relative;
background:
radial-gradient(80% 120% at 50% 120%, rgba(201,204,210,.25), transparent 60%),
linear-gradient(135deg, #2a2c33, #131318);
}
.bike-card__photo::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 70%, rgba(13,13,15,.9) 16px, transparent 17px),
radial-gradient(circle at 74% 70%, rgba(13,13,15,.9) 16px, transparent 17px),
linear-gradient(100deg, transparent 30%, rgba(201,204,210,.12) 50%, transparent 70%);
}
.bike-card__photo--hero { height: 250px; }
.bike-card__body { padding: 1.2rem 1.3rem 1.4rem; color: var(--chrome-l); }
.bike-card__body h3 { font-size: 1.4rem; }
.bike-card__sub { color: var(--chrome-d); font-size: .85rem; margin-top: .25rem; }
.bike-card__meta { display: flex; gap: 1.3rem; margin: 1rem 0; }
.bike-card__meta span { font-size: .76rem; color: var(--chrome-d); text-transform: uppercase; letter-spacing: .08em; }
.bike-card__meta b { display: block; font-size: 1.2rem; color: var(--chrome-l); font-variant-numeric: tabular-nums; }
.bike-card__price { display: flex; align-items: baseline; gap: .5rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: .9rem; }
.bike-card__price span { color: var(--chrome-d); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.bike-card__price strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
/* ---------- marquee ---------- */
.marquee { background: var(--oxblood); overflow: hidden; border-block: 1px solid rgba(0,0,0,.3); }
.marquee__track {
display: flex; gap: 1.4rem; white-space: nowrap; padding: .7rem 0;
animation: marq 26s linear infinite; width: max-content;
}
.marquee__track span { color: var(--chrome-l); font-weight: 800; letter-spacing: .14em; font-size: .82rem; text-transform: uppercase; opacity: .92; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
/* ---------- generic section ---------- */
.section { max-width: 1200px; margin: 0 auto; padding: 5rem 1.25rem; }
.section--dark { max-width: none; background: linear-gradient(160deg, var(--black), var(--black-3)); color: var(--chrome-l); }
.section--dark > * { max-width: 1200px; margin-inline: auto; }
.section--rust { max-width: none; background: linear-gradient(150deg, var(--oxblood-d), var(--oxblood) 70%, #2a0c0c); color: var(--chrome-l); }
.section--rust > * { max-width: 1200px; margin-inline: auto; }
.section__head { max-width: 640px; margin-bottom: 2.6rem; }
.section__head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.section--dark .section__head h2, .section--rust .section__head h2 { color: var(--chrome-l); }
.section__lede { color: var(--muted); margin-top: .9rem; font-size: 1.02rem; }
.section--dark .section__lede, .section--rust .section__lede { color: var(--chrome); }
.section--dark .section__lede strong, .section__lede strong { color: inherit; font-weight: 700; }
/* ---------- filter bar ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.chip {
font: inherit; font-weight: 600; font-size: .82rem;
padding: .5rem 1rem; border-radius: 999px; cursor: pointer;
background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
transition: all .15s ease;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--chrome-l); border-color: var(--ink); }
/* ---------- lineup ---------- */
.lineup { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.model {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.model:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--oxblood-l); }
.model__photo {
height: 170px; position: relative; overflow: hidden;
background: linear-gradient(135deg, #2a2c33, #131318);
}
.model__photo::before {
content: ""; position: absolute; inset: 0; transition: transform .4s ease;
background:
radial-gradient(circle at 28% 74%, rgba(13,13,15,.92) 22px, transparent 23px),
radial-gradient(circle at 76% 74%, rgba(13,13,15,.92) 22px, transparent 23px),
linear-gradient(105deg, transparent 32%, rgba(201,204,210,.16) 50%, transparent 68%);
}
.model:hover .model__photo::before { transform: scale(1.06) rotate(-1deg); }
.model__photo--a { background: linear-gradient(135deg, #33353d, #131318); }
.model__photo--b { background: linear-gradient(135deg, #2b2622, #161210); }
.model__photo--c { background: linear-gradient(135deg, #2c1e1e, #160e0e); }
.model__photo--d { background: linear-gradient(135deg, #2f3138, #14151a); }
.model__photo--e { background: linear-gradient(135deg, #26302a, #111815); }
.model__photo--f { background: linear-gradient(135deg, #382e22, #1a1410); }
.model__info { padding: 1.1rem 1.2rem 1.3rem; }
.model__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.model__top h3 { font-size: 1.18rem; }
.model__cat { color: var(--muted); font-size: .8rem; margin-top: .25rem; text-transform: uppercase; letter-spacing: .08em; }
.spec { list-style: none; display: flex; gap: 1.2rem; padding: 0; margin: .9rem 0; }
.spec li { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.spec b { display: block; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.model__foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: .9rem; }
.price { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.badge {
font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
padding: .25rem .5rem; border-radius: 5px; background: var(--black-3); color: var(--chrome-l);
}
.badge--new { background: var(--oxblood); }
.badge--hot { background: var(--orange); }
.lineup__empty { text-align: center; color: var(--muted); padding: 2.5rem 0; font-weight: 600; }
/* ---------- gear ---------- */
.gear { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.gear__card {
background: var(--black-3); border: 1px solid rgba(255,255,255,.1);
border-radius: var(--r-md); overflow: hidden; transition: transform .2s ease, border-color .2s ease;
}
.gear__card:hover { transform: translateY(-5px); border-color: var(--oxblood-l); }
.gear__photo { height: 180px; position: relative; }
.gear__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(201,204,210,.18), transparent 70%); }
.gear__photo--jacket { background: linear-gradient(140deg, #2c1717, #120909); }
.gear__photo--helmet { background: linear-gradient(140deg, #20222a, #0e0f13); }
.gear__photo--boots { background: linear-gradient(140deg, #2a2520, #14110d); }
.gear__photo--gloves { background: linear-gradient(140deg, #2b1f1f, #130d0d); }
.gear__row { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1.1rem .2rem; }
.gear__card h3 { font-size: 1.02rem; color: var(--chrome-l); }
.gear__price { font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
.gear__card p { padding: 0 1.1rem 1.1rem; color: var(--chrome-d); font-size: .82rem; }
.gear__cta { text-align: center; margin-top: 2.4rem; }
/* ---------- service ---------- */
.service { display: grid; grid-template-columns: 1.3fr .9fr; gap: 2rem; align-items: start; }
.service__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.service__list li {
display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--oxblood);
border-radius: var(--r-sm); padding: 1.1rem 1.2rem;
transition: transform .15s ease, box-shadow .15s ease;
}
.service__list li:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.service__no { font-size: 1.1rem; font-weight: 800; color: var(--chrome-d); font-variant-numeric: tabular-nums; }
.service__list h3 { font-size: 1.05rem; }
.service__list p { color: var(--muted); font-size: .86rem; margin-top: .2rem; }
.service__from { font-weight: 700; color: var(--oxblood); font-size: .9rem; white-space: nowrap; }
.service__panel { position: sticky; top: 90px; }
.bay { background: var(--black-3); color: var(--chrome-l); border-radius: var(--r-md); padding: 1.4rem; border: 1px solid rgba(255,255,255,.1); }
.bay__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--chrome-d); margin-bottom: 1rem; }
.bay__list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .55rem; }
.bay__list li {
display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center;
background: rgba(255,255,255,.04); border-radius: var(--r-sm); padding: .7rem .8rem;
border: 1px solid rgba(255,255,255,.06);
}
.bay__no { font-weight: 800; font-size: .78rem; letter-spacing: .04em; }
.bay__bike { font-size: .8rem; color: var(--chrome); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .55rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem; }
.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot--inprogress { color: #8bb4ff; background: rgba(43,111,255,.16); }
.dot--waiting { color: #f0c573; background: rgba(201,139,33,.18); }
.dot--done { color: #7fd9b0; background: rgba(47,158,111,.18); }
.dot--hold { color: #f0998f; background: rgba(184,57,46,.2); }
/* ---------- events ---------- */
.events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.event {
display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center;
background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12);
border-radius: var(--r-md); padding: 1.1rem; grid-template-areas: "date body" "btn btn";
transition: transform .2s ease, background .2s ease;
}
.event:hover { transform: translateY(-4px); background: rgba(0,0,0,.42); }
.event__date { grid-area: date; text-align: center; background: var(--black); border-radius: var(--r-sm); padding: .6rem .7rem; border: 1px solid rgba(255,255,255,.12); }
.event__mo { display: block; font-size: .66rem; letter-spacing: .12em; color: var(--orange); font-weight: 800; }
.event__day { display: block; font-size: 1.5rem; font-weight: 800; color: var(--chrome-l); font-variant-numeric: tabular-nums; }
.event__body { grid-area: body; }
.event__body h3 { font-size: 1.02rem; color: var(--chrome-l); }
.event__body p { color: var(--chrome); font-size: .82rem; margin-top: .2rem; }
.event__tag { display: inline-block; margin-top: .5rem; font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--chrome-l); background: rgba(255,255,255,.1); padding: .2rem .5rem; border-radius: 4px; }
.event .btn--mini { grid-area: btn; justify-content: center; margin-top: .3rem; }
/* ---------- finance ---------- */
.finance { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.finance__copy h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.finance__copy .section__lede strong { color: var(--oxblood); }
.finance__perks { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .6rem; }
.finance__perks li { position: relative; padding-left: 1.7rem; color: var(--ink-2); font-weight: 500; }
.finance__perks li::before { content: "✦"; position: absolute; left: 0; color: var(--oxblood); font-weight: 800; }
.calc { background: var(--black-3); color: var(--chrome-l); border-radius: var(--r-lg); padding: 1.8rem; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.1); }
.calc h3 { font-size: 1.25rem; margin-bottom: 1.4rem; }
.calc__field { display: block; margin-bottom: 1.3rem; }
.calc__label { display: flex; justify-content: space-between; font-size: .82rem; color: var(--chrome); margin-bottom: .55rem; text-transform: uppercase; letter-spacing: .06em; }
.calc__label b { color: var(--chrome-l); font-size: .95rem; font-variant-numeric: tabular-nums; }
.calc input[type="range"] {
-webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px;
background: rgba(255,255,255,.16); outline: none; cursor: pointer;
}
.calc input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
background: var(--oxblood); border: 3px solid var(--chrome-l); cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.calc input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--oxblood); border: 3px solid var(--chrome-l); cursor: pointer; }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.calc__result {
display: flex; align-items: baseline; justify-content: space-between;
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
border-radius: var(--r-sm); padding: 1rem 1.2rem; margin: .5rem 0 .6rem;
}
.calc__result span { text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; color: var(--chrome); }
.calc__result strong { font-size: 2rem; color: var(--chrome-l); font-variant-numeric: tabular-nums; }
.calc__result small { font-size: .9rem; color: var(--chrome-d); font-weight: 600; }
.calc__fine { font-size: .72rem; color: var(--chrome-d); margin-bottom: 1.2rem; }
/* ---------- CTA ---------- */
.cta { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--black), var(--oxblood-d) 130%); color: var(--chrome-l); }
.cta__grit { position: absolute; inset: 0; opacity: .5; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px); }
.cta__inner { position: relative; max-width: 900px; margin: 0 auto; padding: 5rem 1.25rem; text-align: center; }
.cta h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.cta__inner > p { color: var(--chrome); margin: 1rem auto 0; max-width: 48ch; }
.cta__form { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.2rem; }
.field { text-align: left; }
.field label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--chrome-d); margin-bottom: .35rem; }
.field input, .field select {
font: inherit; padding: .8rem 1rem; min-width: 220px; border-radius: var(--r-sm);
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: var(--chrome-l);
}
.field input::placeholder { color: var(--chrome-d); }
.field input:focus, .field select:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.field select option { color: var(--ink); }
.cta__form .btn { align-self: flex-end; }
.cta__note { margin-top: 1.1rem; min-height: 1.2em; color: var(--orange); font-weight: 600; }
/* ---------- footer ---------- */
.footer { background: var(--black); color: var(--chrome); }
.footer__inner { max-width: 1200px; margin: 0 auto; padding: 3.4rem 1.25rem 2rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer__brand .brand__name { color: var(--chrome-l); }
.footer__brand p { color: var(--chrome-d); font-size: .86rem; margin-top: 1rem; max-width: 32ch; }
.footer__addr { color: var(--chrome); }
.footer__col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--chrome-l); margin-bottom: 1rem; }
.footer__col a, .footer__col p { display: block; color: var(--chrome-d); font-size: .86rem; margin-bottom: .55rem; transition: color .15s ease; }
.footer__col a:hover { color: var(--orange); }
.footer__bar { max-width: 1200px; margin: 0 auto; padding: 1.2rem 1.25rem 2rem; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer__bar p { color: var(--chrome-d); font-size: .8rem; }
.footer__social { display: flex; gap: .5rem; }
.footer__social span { font-size: .68rem; font-weight: 800; letter-spacing: .06em; color: var(--chrome); background: rgba(255,255,255,.06); padding: .4rem .55rem; border-radius: 5px; }
/* ---------- toast ---------- */
.toast {
position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%);
background: var(--black-3); color: var(--chrome-l); padding: .85rem 1.3rem;
border-radius: var(--r-sm); border: 1px solid var(--oxblood-l);
box-shadow: var(--shadow-lg); font-weight: 600; font-size: .9rem; z-index: 100;
transition: transform .35s cubic-bezier(.2,.9,.3,1); max-width: 90vw;
}
.toast.is-show { transform: translate(-50%, 0); }
/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.marquee__track { animation: none; }
html { scroll-behavior: auto; }
}
/* ---------- responsive ---------- */
@media (max-width: 940px) {
.hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
.hero__bike { order: -1; }
.lineup, .gear, .events { grid-template-columns: repeat(2, 1fr); }
.service { grid-template-columns: 1fr; }
.service__panel { position: static; }
.finance { grid-template-columns: 1fr; gap: 2rem; }
.footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.nav__links {
position: fixed; inset: 60px 0 auto 0; flex-direction: column; align-items: stretch;
background: rgba(13,13,15,.98); padding: 1.2rem 1.25rem 1.6rem; gap: .4rem;
border-bottom: 1px solid rgba(255,255,255,.1);
transform: translateY(-120%); transition: transform .3s ease; box-shadow: var(--shadow-lg);
}
.nav__links.is-open { transform: translateY(0); }
.nav__links a { padding: .7rem 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.nav__cta { text-align: center; margin-top: .5rem; }
.nav__burger { display: flex; }
}
@media (max-width: 520px) {
.section { padding: 3.4rem 1.1rem; }
.hero__inner { padding: 3rem 1.1rem 3.4rem; }
.lineup, .gear, .events { grid-template-columns: 1fr; }
.hero__stats { gap: 1.4rem; flex-wrap: wrap; }
.footer__inner { grid-template-columns: 1fr 1fr; }
.cta__form { flex-direction: column; align-items: stretch; }
.field input, .field select { min-width: 0; width: 100%; }
.cta__form .btn { width: 100%; justify-content: center; }
.service__list li { grid-template-columns: auto 1fr; }
.service__from { grid-column: 2; }
}(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");
}, 2600);
}
/* ---------- mobile nav ---------- */
var burger = document.getElementById("burger");
var navLinks = document.getElementById("navLinks");
if (burger && navLinks) {
burger.addEventListener("click", function () {
var open = navLinks.classList.toggle("is-open");
burger.setAttribute("aria-expanded", String(open));
burger.setAttribute("aria-label", open ? "Close menu" : "Open menu");
});
navLinks.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
navLinks.classList.remove("is-open");
burger.setAttribute("aria-expanded", "false");
}
});
}
/* ---------- scroll reveal ---------- */
var revealEls = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
en.target.classList.add("is-in");
io.unobserve(en.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
revealEls.forEach(function (el) { io.observe(el); });
} else {
revealEls.forEach(function (el) { el.classList.add("is-in"); });
}
/* ---------- lineup filter ---------- */
var chips = document.querySelectorAll(".chip");
var models = document.querySelectorAll(".model");
var emptyMsg = document.getElementById("lineupEmpty");
chips.forEach(function (chip) {
chip.addEventListener("click", function () {
chips.forEach(function (c) {
c.classList.remove("is-active");
c.setAttribute("aria-selected", "false");
});
chip.classList.add("is-active");
chip.setAttribute("aria-selected", "true");
var f = chip.getAttribute("data-filter");
var shown = 0;
models.forEach(function (m) {
var match = f === "all" || m.getAttribute("data-cat") === f;
m.style.display = match ? "" : "none";
if (match) {
shown++;
m.classList.add("is-in");
}
});
if (emptyMsg) emptyMsg.hidden = shown !== 0;
});
});
/* ---------- quote / rsvp buttons ---------- */
document.addEventListener("click", function (e) {
var quoteBtn = e.target.closest("[data-quote]");
if (quoteBtn) {
var name = quoteBtn.getAttribute("data-quote");
var price = Number(quoteBtn.getAttribute("data-price"));
toast("Quote saved for " + name + " — $" + price.toLocaleString() + ". We'll call you.");
return;
}
var rsvpBtn = e.target.closest("[data-rsvp]");
if (rsvpBtn) {
rsvpBtn.textContent = "Going ✓";
rsvpBtn.disabled = true;
rsvpBtn.style.opacity = "0.7";
toast("You're in: " + rsvpBtn.getAttribute("data-rsvp") + ". Ride safe.");
return;
}
});
/* ---------- service buttons ---------- */
var bookService = document.getElementById("bookService");
if (bookService) {
bookService.addEventListener("click", function () {
toast("Service drop-off requested — Bay 2 reserved for you.");
});
}
/* ---------- finance calculator ---------- */
var price = document.getElementById("price");
var down = document.getElementById("down");
var term = document.getElementById("term");
var priceOut = document.getElementById("priceOut");
var downOut = document.getElementById("downOut");
var termOut = document.getElementById("termOut");
var monthly = document.getElementById("monthly");
var APR = 0.049;
function money(n) {
return "$" + Math.round(n).toLocaleString("en-US");
}
function calc() {
if (!price || !down || !term || !monthly) return;
var p = Number(price.value);
var d = Math.min(Number(down.value), p);
var n = Number(term.value);
var principal = Math.max(p - d, 0);
var r = APR / 12;
var pay = principal === 0 ? 0 : (principal * r) / (1 - Math.pow(1 + r, -n));
if (priceOut) priceOut.textContent = money(p);
if (downOut) downOut.textContent = money(d);
if (termOut) termOut.textContent = n + " mo";
monthly.innerHTML = money(pay) + "<small>/mo</small>";
}
[price, down, term].forEach(function (el) {
if (el) el.addEventListener("input", calc);
});
calc();
var applyBtn = document.getElementById("applyBtn");
if (applyBtn) {
applyBtn.addEventListener("click", function () {
toast("Pre-approval started — soft check only, no impact to your score.");
});
}
/* ---------- test ride form ---------- */
var rideForm = document.getElementById("rideForm");
var ctaNote = document.getElementById("ctaNote");
if (rideForm) {
rideForm.addEventListener("submit", function (e) {
e.preventDefault();
var name = rideForm.querySelector("#rname");
var bike = rideForm.querySelector("#rbike");
if (!name.value.trim()) {
if (ctaNote) ctaNote.textContent = "Tell us your name first.";
name.focus();
return;
}
if (!bike.value) {
if (ctaNote) ctaNote.textContent = "Pick a machine to ride.";
bike.focus();
return;
}
if (ctaNote) {
ctaNote.textContent =
"Booked, " + name.value.trim().split(" ")[0] + "! Your " + bike.value + " will be fueled and waiting.";
}
toast("Test ride booked — see you at 221 Forge St.");
rideForm.reset();
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ironhand Moto Co. — Heritage Motorcycles, Gear & Service</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>
<!-- ============ NAV ============ -->
<header class="nav" id="top">
<div class="nav__inner">
<a class="brand" href="#top" aria-label="Ironhand Moto Co. home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<circle cx="5.5" cy="17" r="3.5"/><circle cx="18.5" cy="17" r="3.5"/>
<path d="M5.5 17 9 9h5l2 4h2.5M9 9l-1.5-3M16 13H9"/>
</svg>
</span>
<span class="brand__name">IRONHAND<span class="brand__co">MOTO CO.</span></span>
</a>
<nav class="nav__links" id="navLinks" aria-label="Primary">
<a href="#lineup">Lineup</a>
<a href="#gear">Gear</a>
<a href="#service">Service</a>
<a href="#community">Rider Club</a>
<a href="#finance">Finance</a>
<a class="nav__cta" href="#cta">Book a Ride</a>
</nav>
<button class="nav__burger" id="burger" aria-expanded="false" aria-controls="navLinks" aria-label="Open menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- ============ HERO ============ -->
<section class="hero reveal" id="hero">
<div class="hero__grit" aria-hidden="true"></div>
<div class="hero__inner">
<div class="hero__copy">
<p class="eyebrow"><span class="eyebrow__bar"></span>Est. 1968 — Steel City</p>
<h1>Built to be<br/><em>ridden hard.</em></h1>
<p class="hero__lede">Hand-finished heritage cruisers, factory-backed service, and a brotherhood that runs deeper than chrome. Throw a leg over the new <strong>Vandal 1200</strong>.</p>
<div class="hero__actions">
<a class="btn btn--orange" href="#lineup">Explore the Lineup</a>
<a class="btn btn--ghost" href="#cta">Schedule a Test Ride
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</a>
</div>
<dl class="hero__stats">
<div><dt>57</dt><dd>years on the road</dd></div>
<div><dt>14k+</dt><dd>riders in the club</dd></div>
<div><dt>4.9★</dt><dd>1,820 reviews</dd></div>
</dl>
</div>
<div class="hero__bike">
<div class="bike-card">
<span class="bike-card__tag">NEW · 2026</span>
<div class="bike-card__photo bike-card__photo--hero" aria-label="Vandal 1200 motorcycle"></div>
<div class="bike-card__body">
<h3>Vandal 1200</h3>
<p class="bike-card__sub">Air-cooled V-twin · Blacked-out</p>
<div class="bike-card__meta">
<span><b>1,202</b>cc</span>
<span><b>78</b>hp</span>
<span><b>252</b>kg</span>
</div>
<div class="bike-card__price"><span>From</span><strong>$14,995</strong></div>
</div>
</div>
</div>
</div>
</section>
<!-- ============ MARQUEE ============ -->
<div class="marquee" aria-hidden="true">
<div class="marquee__track" id="marqueeTrack">
<span>HERITAGE STEEL</span><span>·</span><span>HAND-BUILT</span><span>·</span><span>RIDE OR DIE</span><span>·</span><span>FACTORY SERVICE</span><span>·</span><span>CUSTOM SHOP</span><span>·</span>
<span>HERITAGE STEEL</span><span>·</span><span>HAND-BUILT</span><span>·</span><span>RIDE OR DIE</span><span>·</span><span>FACTORY SERVICE</span><span>·</span><span>CUSTOM SHOP</span><span>·</span>
</div>
</div>
<!-- ============ LINEUP ============ -->
<section class="section" id="lineup">
<div class="section__head reveal">
<p class="eyebrow"><span class="eyebrow__bar"></span>The Machines</p>
<h2>The 2026 Lineup</h2>
<p class="section__lede">Six platforms, one bloodline. Filter by riding style — each build is configurable in-store.</p>
</div>
<div class="filterbar reveal" id="filterbar" role="tablist" aria-label="Filter lineup">
<button class="chip is-active" role="tab" aria-selected="true" data-filter="all">All</button>
<button class="chip" role="tab" aria-selected="false" data-filter="cruiser">Cruiser</button>
<button class="chip" role="tab" aria-selected="false" data-filter="bagger">Bagger</button>
<button class="chip" role="tab" aria-selected="false" data-filter="sport">Sport</button>
<button class="chip" role="tab" aria-selected="false" data-filter="adv">Adventure</button>
</div>
<div class="lineup" id="lineupGrid">
<article class="model reveal" data-cat="cruiser">
<div class="model__photo model__photo--a"></div>
<div class="model__info">
<div class="model__top"><h3>Vandal 1200</h3><span class="badge badge--new">New</span></div>
<p class="model__cat">Cruiser</p>
<ul class="spec"><li><b>1,202</b>cc</li><li><b>78</b>hp</li><li><b>252</b>kg</li></ul>
<div class="model__foot"><span class="price">$14,995</span><button class="btn btn--mini" data-quote="Vandal 1200" data-price="14995">Get Quote</button></div>
</div>
</article>
<article class="model reveal" data-cat="bagger">
<div class="model__photo model__photo--b"></div>
<div class="model__info">
<div class="model__top"><h3>Outlaw Road Glide</h3><span class="badge">Bagger</span></div>
<p class="model__cat">Touring Bagger</p>
<ul class="spec"><li><b>1,868</b>cc</li><li><b>93</b>hp</li><li><b>378</b>kg</li></ul>
<div class="model__foot"><span class="price">$28,400</span><button class="btn btn--mini" data-quote="Outlaw Road Glide" data-price="28400">Get Quote</button></div>
</div>
</article>
<article class="model reveal" data-cat="sport">
<div class="model__photo model__photo--c"></div>
<div class="model__info">
<div class="model__top"><h3>Switchblade S</h3><span class="badge badge--hot">Hot</span></div>
<p class="model__cat">Café Sport</p>
<ul class="spec"><li><b>975</b>cc</li><li><b>121</b>hp</li><li><b>198</b>kg</li></ul>
<div class="model__foot"><span class="price">$16,750</span><button class="btn btn--mini" data-quote="Switchblade S" data-price="16750">Get Quote</button></div>
</div>
</article>
<article class="model reveal" data-cat="cruiser">
<div class="model__photo model__photo--d"></div>
<div class="model__info">
<div class="model__top"><h3>Iron 883 Heritage</h3><span class="badge">Cruiser</span></div>
<p class="model__cat">Entry Cruiser</p>
<ul class="spec"><li><b>883</b>cc</li><li><b>54</b>hp</li><li><b>247</b>kg</li></ul>
<div class="model__foot"><span class="price">$11,299</span><button class="btn btn--mini" data-quote="Iron 883 Heritage" data-price="11299">Get Quote</button></div>
</div>
</article>
<article class="model reveal" data-cat="adv">
<div class="model__photo model__photo--e"></div>
<div class="model__info">
<div class="model__top"><h3>Pan Wander 900</h3><span class="badge">Adventure</span></div>
<p class="model__cat">Dual-Sport ADV</p>
<ul class="spec"><li><b>902</b>cc</li><li><b>94</b>hp</li><li><b>223</b>kg</li></ul>
<div class="model__foot"><span class="price">$15,899</span><button class="btn btn--mini" data-quote="Pan Wander 900" data-price="15899">Get Quote</button></div>
</div>
</article>
<article class="model reveal" data-cat="bagger">
<div class="model__photo model__photo--f"></div>
<div class="model__info">
<div class="model__top"><h3>Street Boss Limited</h3><span class="badge badge--new">New</span></div>
<p class="model__cat">Custom Bagger</p>
<ul class="spec"><li><b>1,923</b>cc</li><li><b>106</b>hp</li><li><b>391</b>kg</li></ul>
<div class="model__foot"><span class="price">$33,995</span><button class="btn btn--mini" data-quote="Street Boss Limited" data-price="33995">Get Quote</button></div>
</div>
</article>
</div>
<p class="lineup__empty" id="lineupEmpty" hidden>No machines in that class right now — check back soon.</p>
</section>
<!-- ============ GEAR & APPAREL ============ -->
<section class="section section--dark" id="gear">
<div class="section__head reveal">
<p class="eyebrow eyebrow--light"><span class="eyebrow__bar"></span>The Look</p>
<h2>Gear & Apparel</h2>
<p class="section__lede">Armored leather, heritage denim, and lids that pass DOT & ECE. Built for the long haul.</p>
</div>
<div class="gear">
<article class="gear__card reveal">
<div class="gear__photo gear__photo--jacket"></div>
<div class="gear__row"><h3>Roadworn Jacket</h3><span class="gear__price">$389</span></div>
<p>Full-grain cowhide · CE armor</p>
</article>
<article class="gear__card reveal">
<div class="gear__photo gear__photo--helmet"></div>
<div class="gear__row"><h3>Outrider ¾ Helmet</h3><span class="gear__price">$219</span></div>
<p>Fiberglass shell · DOT/ECE</p>
</article>
<article class="gear__card reveal">
<div class="gear__photo gear__photo--boots"></div>
<div class="gear__row"><h3>Anvil Riding Boots</h3><span class="gear__price">$245</span></div>
<p>Oil-tanned · steel shank</p>
</article>
<article class="gear__card reveal">
<div class="gear__photo gear__photo--gloves"></div>
<div class="gear__row"><h3>Knuckle Gloves</h3><span class="gear__price">$94</span></div>
<p>Deerskin · knuckle guard</p>
</article>
</div>
<div class="gear__cta reveal"><a class="btn btn--ghost btn--ghost-light" href="#cta">Shop the Full Catalog</a></div>
</section>
<!-- ============ SERVICE & CUSTOM ============ -->
<section class="section" id="service">
<div class="section__head reveal">
<p class="eyebrow"><span class="eyebrow__bar"></span>The Shop</p>
<h2>Service & Custom Build</h2>
<p class="section__lede">Factory-certified wrenches and a custom bay that turns stock iron into one-of-one.</p>
</div>
<div class="service">
<ul class="service__list">
<li class="reveal"><span class="service__no">01</span><div><h3>Scheduled Maintenance</h3><p>Oil, primary, valve checks & multi-point inspection. Loaner bikes available.</p></div><span class="service__from">from $129</span></li>
<li class="reveal"><span class="service__no">02</span><div><h3>Tire & Brake Service</h3><p>Mount, balance, and pad swaps with track-grade rubber in stock.</p></div><span class="service__from">from $89</span></li>
<li class="reveal"><span class="service__no">03</span><div><h3>Engine & Diagnostics</h3><p>Stage upgrades, tuning, and ECU diagnostics on a Dynojet bench.</p></div><span class="service__from">from $349</span></li>
<li class="reveal"><span class="service__no">04</span><div><h3>Custom Build Shop</h3><p>Bobbers, choppers, and full ground-up commissions. Book a consult.</p></div><span class="service__from">by quote</span></li>
</ul>
<aside class="service__panel reveal">
<div class="bay">
<p class="bay__label">Bay status — live</p>
<ul class="bay__list" id="bayList">
<li data-status="inprogress"><span class="bay__no">Bay 1</span><span class="bay__bike">Outlaw Road Glide</span><span class="dot dot--inprogress">In Progress</span></li>
<li data-status="waiting"><span class="bay__no">Bay 2</span><span class="bay__bike">Iron 883 — J. Cole</span><span class="dot dot--waiting">Waiting</span></li>
<li data-status="done"><span class="bay__no">Bay 3</span><span class="bay__bike">Switchblade S — A. Reyes</span><span class="dot dot--done">Done</span></li>
<li data-status="hold"><span class="bay__no">Bay 4</span><span class="bay__bike">Custom Bobber — M. Vance</span><span class="dot dot--hold">On Hold</span></li>
</ul>
<button class="btn btn--orange btn--block" id="bookService">Book Service Drop-Off</button>
</div>
</aside>
</div>
</section>
<!-- ============ COMMUNITY / EVENTS ============ -->
<section class="section section--rust" id="community">
<div class="section__head reveal">
<p class="eyebrow eyebrow--light"><span class="eyebrow__bar"></span>The Brotherhood</p>
<h2>Rider Club & Events</h2>
<p class="section__lede">14,000 strong. Group rides, rallies, and wrench nights — every patch earned on the road.</p>
</div>
<div class="events">
<article class="event reveal">
<div class="event__date"><span class="event__mo">JUN</span><span class="event__day">21</span></div>
<div class="event__body"><h3>Solstice Sunset Run</h3><p>Steel City HQ → Ridgeline Pass · 120 mi</p><span class="event__tag">Group Ride</span></div>
<button class="btn btn--mini" data-rsvp="Solstice Sunset Run">RSVP</button>
</article>
<article class="event reveal">
<div class="event__date"><span class="event__mo">JUL</span><span class="event__day">04</span></div>
<div class="event__body"><h3>Independence Thunder Rally</h3><p>Fairgrounds · live music + bike show</p><span class="event__tag">Rally</span></div>
<button class="btn btn--mini" data-rsvp="Independence Thunder Rally">RSVP</button>
</article>
<article class="event reveal">
<div class="event__date"><span class="event__mo">JUL</span><span class="event__day">18</span></div>
<div class="event__body"><h3>Wrench Night: Carb Tuning</h3><p>Service bay · BYO bike + beverages</p><span class="event__tag">Workshop</span></div>
<button class="btn btn--mini" data-rsvp="Wrench Night: Carb Tuning">RSVP</button>
</article>
</div>
</section>
<!-- ============ FINANCE ============ -->
<section class="section" id="finance">
<div class="finance">
<div class="finance__copy reveal">
<p class="eyebrow"><span class="eyebrow__bar"></span>The Paperwork</p>
<h2>Finance Your Ride</h2>
<p class="section__lede">Rates from <strong>4.9% APR</strong> for qualified riders. Slide to estimate your monthly — soft check, no impact to score.</p>
<ul class="finance__perks">
<li>Pre-approval in under 5 minutes</li>
<li>Trade-in your old iron, on the spot</li>
<li>Gap & tire protection bundles</li>
</ul>
</div>
<div class="calc reveal" id="calc">
<h3>Payment Estimator</h3>
<label class="calc__field">
<span class="calc__label">Bike price <b id="priceOut">$16,750</b></span>
<input id="price" type="range" min="8000" max="35000" step="500" value="16750" aria-label="Bike price" />
</label>
<label class="calc__field">
<span class="calc__label">Down payment <b id="downOut">$2,500</b></span>
<input id="down" type="range" min="0" max="12000" step="250" value="2500" aria-label="Down payment" />
</label>
<label class="calc__field">
<span class="calc__label">Term <b id="termOut">48 mo</b></span>
<input id="term" type="range" min="12" max="72" step="12" value="48" aria-label="Loan term in months" />
</label>
<div class="calc__result">
<span>Est. monthly</span>
<strong id="monthly">$329<small>/mo</small></strong>
</div>
<p class="calc__fine">@ 4.9% APR · illustrative estimate only</p>
<button class="btn btn--orange btn--block" id="applyBtn">Apply for Pre-Approval</button>
</div>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="cta reveal" id="cta">
<div class="cta__grit" aria-hidden="true"></div>
<div class="cta__inner">
<h2>Throw a leg over.<br/>Book your test ride.</h2>
<p>Pick your machine. We'll have it fueled, warm, and waiting at the curb.</p>
<form class="cta__form" id="rideForm" novalidate>
<div class="field">
<label for="rname">Name</label>
<input id="rname" name="name" type="text" placeholder="Jesse Vance" autocomplete="name" required />
</div>
<div class="field">
<label for="rbike">Machine</label>
<select id="rbike" name="bike" required>
<option value="">Choose a bike…</option>
<option>Vandal 1200</option>
<option>Outlaw Road Glide</option>
<option>Switchblade S</option>
<option>Iron 883 Heritage</option>
<option>Pan Wander 900</option>
<option>Street Boss Limited</option>
</select>
</div>
<button class="btn btn--orange" type="submit">Book Test Ride</button>
</form>
<p class="cta__note" id="ctaNote" role="status" aria-live="polite"></p>
</div>
</section>
<!-- ============ FOOTER ============ -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__brand">
<span class="brand__name">IRONHAND<span class="brand__co">MOTO CO.</span></span>
<p>Heritage machines, hand-built since 1968. Ride or die.</p>
<p class="footer__addr">221 Forge Street · Steel City, PA · (570) 555-0168</p>
</div>
<nav class="footer__col" aria-label="Shop">
<h4>Shop</h4>
<a href="#lineup">New Bikes</a><a href="#lineup">Pre-Owned</a><a href="#gear">Gear & Apparel</a><a href="#finance">Finance</a>
</nav>
<nav class="footer__col" aria-label="Shop services">
<h4>Service</h4>
<a href="#service">Book Service</a><a href="#service">Custom Build</a><a href="#community">Rider Club</a><a href="#community">Events</a>
</nav>
<div class="footer__col">
<h4>Hours</h4>
<p>Tue–Fri · 9–6<br/>Sat · 9–4<br/>Sun–Mon · Closed</p>
</div>
</div>
<div class="footer__bar">
<p>© 2026 Ironhand Moto Co. — fictional dealership. All rights reserved.</p>
<div class="footer__social" aria-hidden="true">
<span>IG</span><span>YT</span><span>FB</span>
</div>
</div>
</footer>
<!-- toast -->
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Motorcycle Dealership Landing
A full-screen landing page for a fictional heritage motorcycle dealership, Ironhand Moto Co. The design leans rugged and rebellious — blacked-out garage tones, chrome accents, and an oxblood red that runs through every call to action. The page opens on a gritty hero with a featured Vandal 1200 bike card (cc / hp / weight specs and a from-price), then scrolls through a filterable model lineup, gear and apparel, a service and custom-build shop, a rider community events board, and a finance section.
Interactions are all vanilla JavaScript. The lineup chips filter the six machines by riding style (cruiser, bagger, sport, adventure) with a graceful empty state, and each model has a Get Quote button that fires a confirmation toast. The finance estimator recalculates an amortized monthly payment live as you drag the price, down-payment, and term sliders. The events board lets riders RSVP in place, a live service panel shows color-coded bay statuses (In Progress / Waiting / Done / On Hold), and the closing test-ride form validates input before confirming the booking.
The layout is mobile-first below 720px with a slide-down burger nav, scroll-reveal animations
(respecting prefers-reduced-motion), a looping heritage marquee, and a shared toast() helper —
everything self-contained in three files with no dependencies or build step.
Illustrative UI only — fictional shop/dealership, not a real service system.