Pages Hard
D2C — Hardware / Gadget Landing
A full one-page direct-to-consumer landing for Lumen Halo, a fictional 1,400-lumen pocket flashlight, rendered in spotlight-dark with an electric teal accent and a CNC-rendered product mockup. It runs a dramatic hero with floating device render and key specs, a maker social-proof row, interactive spec tabs, spotlight feature cards with a live color-finish picker, a four-step build process, a comparison table, owner reviews, a pre-order pricing card with quantity stepper, an accordion FAQ, a sticky buy bar and footer, all wired in vanilla JavaScript.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #0a0a0c;
--bg-2: #101015;
--bg-3: #16161d;
--surface: rgba(255, 255, 255, 0.04);
--surface-2: rgba(255, 255, 255, 0.06);
--border: rgba(255, 255, 255, 0.09);
--border-strong: rgba(255, 255, 255, 0.16);
--text: #f4f5f7;
--muted: #9aa0ad;
--faint: #6b7280;
--accent: #6ee7e0;
--accent-2: #4f8cff;
--accent-warm: #f4a259;
--grad: linear-gradient(110deg, #6ee7e0, #4f8cff 60%, #a78bfa);
--glow: 0 0 80px rgba(110, 231, 224, 0.18);
--radius: 18px;
--radius-sm: 12px;
--maxw: 1180px;
--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--sans);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -0.02em; margin: 0; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.skip-link {
position: absolute; left: -999px; top: 0; z-index: 200;
background: var(--accent); color: #04201e; padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; }
.eyebrow {
font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent); display: inline-block; margin-bottom: 16px;
}
.grad {
background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head { max-width: 640px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(28px, 4.4vw, 46px); }
/* BUTTONS */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 600; font-size: 14.5px; border-radius: 999px; padding: 11px 20px;
border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s;
font-family: var(--sans); white-space: nowrap;
}
.btn--lg { padding: 15px 28px; font-size: 15.5px; }
.btn--block { width: 100%; }
.btn--primary {
background: var(--accent); color: #04201e; box-shadow: 0 8px 30px rgba(110, 231, 224, 0.28);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(110, 231, 224, 0.4); }
.btn--outline { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
.btn--outline:hover { border-color: var(--accent); transform: translateY(-2px); }
.btn--ghost { color: var(--muted); }
.btn--ghost:hover { color: var(--text); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* NAV */
.nav {
position: sticky; top: 0; z-index: 100;
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
background: rgba(10, 10, 12, 0.55); border-bottom: 1px solid transparent;
transition: background .3s, border-color .3s;
}
.nav.scrolled { background: rgba(10, 10, 12, 0.86); border-bottom-color: var(--border); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark {
width: 26px; height: 26px; border-radius: 8px;
background: var(--grad); box-shadow: var(--glow); position: relative;
}
.brand__mark::after {
content: ""; position: absolute; inset: 7px; border-radius: 50%;
background: var(--bg); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
}
.brand__name { font-weight: 800; letter-spacing: 0.04em; font-size: 16px; }
.brand__name span { color: var(--accent); }
.nav__links { display: flex; gap: 28px; }
.nav__links a { color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__toggle {
display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav__toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
display: flex; flex-direction: column; gap: 4px; padding: 12px 24px 22px;
background: rgba(10,10,12,.97); border-bottom: 1px solid var(--border);
}
.mobile-menu a { padding: 12px 4px; color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 500; }
.mobile-menu a:last-child { border: 0; }
.mobile-menu__cta { margin-top: 12px; }
/* HERO */
.hero { position: relative; padding: clamp(56px, 9vw, 110px) 0 96px; overflow: hidden; }
.hero__glow {
position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
width: 900px; height: 900px; pointer-events: none;
background: radial-gradient(circle, rgba(79,140,255,.22), rgba(110,231,224,.12) 40%, transparent 66%);
filter: blur(20px);
}
.hero__inner {
position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.pill {
display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500;
color: var(--muted); background: var(--surface); border: 1px solid var(--border);
padding: 7px 14px; border-radius: 999px; margin-bottom: 26px; font-family: var(--mono);
}
.pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero h1 { font-size: clamp(38px, 6.6vw, 72px); font-weight: 800; }
.hero__sub { color: var(--muted); font-size: clamp(16px, 1.7vw, 19px); max-width: 520px; margin: 26px 0 34px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__stats { list-style: none; display: flex; gap: 36px; padding: 0; margin: 44px 0 0; }
.hero__stats li { display: flex; flex-direction: column; }
.hero__stats strong { font-size: 28px; font-weight: 800; }
.hero__stats span { color: var(--faint); font-size: 13px; font-family: var(--mono); }
/* DEVICE RENDER */
.hero__visual { display: flex; justify-content: center; }
.device {
position: relative; width: 100%; max-width: 380px; aspect-ratio: 3/4;
display: flex; align-items: center; justify-content: center;
animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.device__beam {
position: absolute; top: -6%; left: 50%; transform: translateX(-50%);
width: 78%; height: 46%;
background: linear-gradient(to top, rgba(110,231,224,.42), transparent 78%);
clip-path: polygon(50% 100%, 8% 0, 92% 0);
filter: blur(6px); transition: opacity .4s, filter .4s; opacity: .85;
}
.device__body {
position: relative; width: 92px; height: 78%;
display: flex; flex-direction: column; align-items: center;
filter: drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
.device__head {
width: 92px; height: 78px; border-radius: 18px 18px 6px 6px;
background: linear-gradient(135deg, #2a2c34, #15161b);
border: 1px solid var(--border-strong); position: relative;
}
.device__head::after {
content: ""; position: absolute; inset: 12px; top: 10px; bottom: auto; height: 56px; border-radius: 12px;
background: radial-gradient(circle at 50% 40%, var(--device-glow, #cfeeec), #6ee7e0 50%, #1c5a56 90%);
box-shadow: 0 0 24px var(--device-glow, rgba(110,231,224,.6)); transition: background .35s, box-shadow .35s;
}
.device__shaft {
flex: 1; width: 70px; background: linear-gradient(135deg, var(--device-body, #c7ccd6), #7e828b 55%, #3a3c44);
position: relative; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
padding: 16px 0; border-left: 1px solid rgba(0,0,0,.3); transition: background .35s;
}
.device__ring { width: 70px; height: 4px; background: rgba(0,0,0,.35); box-shadow: 0 1px 0 rgba(255,255,255,.18); }
.device__logo { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: rgba(0,0,0,.55); transform: rotate(-90deg); white-space: nowrap; }
.device__tail {
width: 78px; height: 34px; border-radius: 4px 4px 12px 12px;
background: linear-gradient(135deg, #2a2c34, #131418); border: 1px solid var(--border-strong); border-top: 0;
}
.device__spec {
position: absolute; font-family: var(--mono); font-size: 11px; color: var(--muted);
background: var(--surface); border: 1px solid var(--border); padding: 7px 11px; border-radius: 8px; backdrop-filter: blur(6px);
}
.device__spec b { color: var(--accent); }
.device__spec--1 { top: 22%; right: -4%; }
.device__spec--2 { bottom: 20%; left: -8%; }
/* PROOF */
.proof { padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.proof__label { text-align: center; color: var(--faint); font-size: 12.5px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 22px; }
.proof__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 48px; }
.proof__logos span { font-weight: 700; font-size: 18px; color: var(--faint); letter-spacing: .04em; opacity: .8; transition: color .2s, opacity .2s; }
.proof__logos span:hover { color: var(--text); opacity: 1; }
/* SPECS / TABS */
.specs { padding: clamp(70px, 10vw, 120px) 0; }
.spectabs { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); overflow: hidden; }
.spectabs__nav { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; }
.spectab {
flex: 1; min-width: 110px; padding: 18px 20px; background: none; border: 0; cursor: pointer;
color: var(--muted); font-weight: 600; font-size: 15px; font-family: var(--sans);
border-bottom: 2px solid transparent; transition: color .2s, border-color .2s, background .2s;
}
.spectab:hover { color: var(--text); }
.spectab.is-active { color: var(--text); border-bottom-color: var(--accent); background: var(--surface); }
.spectab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.specpanel { padding: clamp(28px, 4vw, 44px); }
.specpanel[hidden] { display: none; }
.specpanel.is-active { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.specpanel h3 { font-size: 24px; margin-bottom: 12px; }
.specpanel > p { color: var(--muted); max-width: 540px; margin-bottom: 28px; }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0; }
.kv > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; }
.kv dt { font-size: 12.5px; color: var(--faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.kv dd { margin: 6px 0 0; font-size: 19px; font-weight: 700; }
/* FEATURES */
.features { padding: clamp(70px, 10vw, 120px) 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
position: relative; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
padding: 28px; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.feature:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.feature--wide { grid-column: span 2; }
.feature__icon { font-size: 26px; display: block; margin-bottom: 16px; }
.feature h3 { font-size: 20px; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 15px; position: relative; z-index: 1; }
.feature__spot {
position: absolute; top: -40%; right: -20%; width: 60%; height: 120%;
background: radial-gradient(circle, rgba(110,231,224,.22), transparent 70%); pointer-events: none;
}
.feature__spot--2 { background: radial-gradient(circle, rgba(244,162,89,.2), transparent 70%); left: -20%; right: auto; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; position: relative; z-index: 1; }
.chip { font-family: var(--mono); font-size: 11.5px; color: var(--accent); background: rgba(110,231,224,.1); border: 1px solid rgba(110,231,224,.25); padding: 5px 11px; border-radius: 999px; }
.swatches { display: flex; gap: 12px; margin-top: 18px; position: relative; z-index: 1; }
.swatch {
width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border-strong); cursor: pointer;
background: var(--sw); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 0 18px var(--sw); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch-name { color: var(--muted); font-size: 14px; margin-top: 14px; position: relative; z-index: 1; }
.swatch-name strong { color: var(--text); }
/* PROCESS */
.process { padding: clamp(70px, 10vw, 120px) 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; transition: border-color .25s, transform .25s; }
.step:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.step__num { font-family: var(--mono); font-size: 13px; color: var(--accent); background: rgba(110,231,224,.1); padding: 4px 10px; border-radius: 6px; }
.step h3 { font-size: 18px; margin: 16px 0 8px; }
.step p { color: var(--muted); font-size: 14.5px; }
/* COMPARE */
.compare { padding: clamp(70px, 10vw, 120px) 0; background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.ctable { width: 100%; border-collapse: collapse; min-width: 600px; }
.ctable th, .ctable td { padding: 17px 20px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--border); }
.ctable thead th { font-size: 13px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.ctable tbody th { font-weight: 600; color: var(--muted); }
.ctable td { color: var(--muted); }
.ctable__us { background: rgba(110,231,224,.06); color: var(--text) !important; font-weight: 600; position: relative; }
.ctable thead .ctable__us { color: var(--accent) !important; }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }
.yes { color: var(--accent); font-weight: 700; }
.no { color: var(--faint); }
/* REVIEWS */
.reviews { padding: clamp(70px, 10vw, 120px) 0; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.review { margin: 0; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; transition: transform .25s, border-color .25s; }
.review:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.stars { color: var(--accent-warm); letter-spacing: 2px; margin-bottom: 16px; }
.review blockquote { margin: 0 0 22px; font-size: 16.5px; line-height: 1.55; }
.review figcaption { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #04201e; }
.review figcaption strong { display: block; font-size: 14.5px; }
.review figcaption small { color: var(--faint); font-size: 13px; }
/* PREORDER */
.preorder { padding: clamp(70px, 10vw, 120px) 0; }
.preorder__inner {
position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
background: linear-gradient(160deg, var(--bg-2), var(--bg-3));
border: 1px solid var(--border); border-radius: 28px; padding: clamp(32px, 5vw, 64px); overflow: hidden;
}
.preorder__glow { position: absolute; top: -30%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(79,140,255,.22), transparent 65%); pointer-events: none; }
.preorder__copy { position: relative; z-index: 1; }
.preorder__copy h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.preorder__copy > p { color: var(--muted); max-width: 460px; margin-bottom: 26px; }
.incl { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.incl li { position: relative; padding-left: 28px; color: var(--text); font-size: 15px; }
.incl li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(110,231,224,.15); color: var(--accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.pricecard {
position: relative; z-index: 1; background: var(--bg); border: 1px solid var(--border-strong);
border-radius: 20px; padding: 28px; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.pricecard__row { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; }
.pricecard__strike { text-decoration: line-through; color: var(--faint); }
.pricecard__price { font-size: 56px; font-weight: 800; letter-spacing: -0.03em; margin: 4px 0 22px; }
.pricecard__price span { font-size: 28px; color: var(--muted); vertical-align: super; margin-right: 2px; }
.qty { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.qty__ctrl { display: flex; align-items: center; gap: 14px; }
.qty__ctrl button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 18px; cursor: pointer; transition: border-color .2s, background .2s; }
.qty__ctrl button:hover { border-color: var(--accent); background: var(--surface-2); }
.qty__ctrl output { font-weight: 700; font-size: 17px; min-width: 22px; text-align: center; }
.pricecard__total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.pricecard__total span { color: var(--muted); font-size: 14px; }
.pricecard__total strong { font-size: 26px; }
.pricecard__note { color: var(--faint); font-size: 12px; text-align: center; margin-top: 14px; }
/* FAQ */
.faq { padding: clamp(70px, 10vw, 120px) 0 140px; }
.faq__inner { max-width: 760px; margin: 0 auto; }
.accordion { display: flex; flex-direction: column; gap: 12px; }
.acc { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; transition: border-color .2s; }
.acc.open { border-color: var(--border-strong); }
.acc__head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; background: none; border: 0; cursor: pointer; color: var(--text); font-size: 16.5px; font-weight: 600; text-align: left; font-family: var(--sans); }
.acc__head:hover { color: var(--accent); }
.acc__icon { font-size: 22px; color: var(--accent); transition: transform .25s; flex-shrink: 0; }
.acc.open .acc__icon { transform: rotate(45deg); }
.acc__body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc__body p { padding: 0 22px 22px; color: var(--muted); font-size: 15px; }
/* FOOTER */
.footer { border-top: 1px solid var(--border); padding: 64px 0 28px; background: var(--bg-2); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) 1.6fr; gap: 32px; padding-bottom: 44px; border-bottom: 1px solid var(--border); }
.footer__brand p { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 240px; }
.footer__col h4, .footer__news h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 16px; font-family: var(--mono); }
.footer__col { display: flex; flex-direction: column; gap: 11px; }
.footer__col a { color: var(--muted); font-size: 14.5px; transition: color .2s; }
.footer__col a:hover { color: var(--text); }
.footer__news p { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.news { display: flex; gap: 8px; }
.news input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; color: var(--text); font-family: var(--sans); font-size: 14px; min-width: 0; }
.news input:focus { outline: none; border-color: var(--accent); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; color: var(--faint); font-size: 13px; flex-wrap: wrap; gap: 12px; }
.footer__legal { display: flex; gap: 20px; }
.footer__legal a { color: var(--faint); transition: color .2s; }
.footer__legal a:hover { color: var(--text); }
/* STICKY BUY BAR */
.buybar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: rgba(10,10,12,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--border); transform: translateY(100%); transition: transform .35s ease; }
.buybar.show { transform: translateY(0); }
.buybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 24px; }
.buybar__info strong { display: block; font-size: 15px; }
.buybar__info span { color: var(--muted); font-size: 13px; }
/* TOAST */
.toast { position: fixed; bottom: 90px; left: 50%; transform: translate(-50%, 30px); z-index: 120; background: var(--accent); color: #04201e; padding: 13px 22px; border-radius: 12px; font-weight: 600; font-size: 14.5px; box-shadow: 0 14px 40px rgba(110,231,224,.4); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* REVEAL */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
/* RESPONSIVE */
@media (max-width: 980px) {
.hero__inner, .preorder__inner { grid-template-columns: 1fr; }
.hero__visual { order: -1; }
.feature-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }
.feature--wide { grid-column: span 2; }
.steps { grid-template-columns: repeat(2, 1fr); }
.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
.nav__links, .nav__actions { display: none; }
.nav__toggle { display: flex; }
.feature-grid, .review-grid, .steps { grid-template-columns: 1fr; }
.feature--wide { grid-column: span 1; }
.kv { grid-template-columns: 1fr; }
.hero__stats { gap: 24px; }
.footer__grid { grid-template-columns: 1fr; }
.buybar__info span { display: none; }
}
@media (max-width: 520px) {
.container { padding: 0 18px; }
.hero { padding-top: 40px; }
.hero__cta .btn { flex: 1; }
.device__spec--1 { right: 0; }
.device__spec--2 { left: 0; }
.footer__bottom { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
}(function () {
"use strict";
/* ---- Toast helper ---- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2600);
}
/* ---- Nav scroll state ---- */
var nav = document.getElementById("nav");
var buybar = document.getElementById("buybar");
function onScroll() {
var y = window.scrollY;
if (nav) nav.classList.toggle("scrolled", y > 12);
if (buybar) {
buybar.hidden = false;
buybar.classList.toggle("show", y > 700);
}
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---- Mobile menu ---- */
var toggle = document.getElementById("navToggle");
var menu = document.getElementById("mobileMenu");
function closeMenu() {
if (!menu) return;
menu.hidden = true;
toggle.setAttribute("aria-expanded", "false");
toggle.setAttribute("aria-label", "Open menu");
}
if (toggle && menu) {
toggle.addEventListener("click", function () {
var open = toggle.getAttribute("aria-expanded") === "true";
if (open) {
closeMenu();
} else {
menu.hidden = false;
toggle.setAttribute("aria-expanded", "true");
toggle.setAttribute("aria-label", "Close menu");
}
});
menu.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", closeMenu);
});
}
/* ---- Smooth scroll for in-page anchors ---- */
document.querySelectorAll('a[href^="#"]').forEach(function (link) {
link.addEventListener("click", function (e) {
var id = link.getAttribute("href");
if (id.length < 2) return;
var target = document.querySelector(id);
if (!target) return;
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
});
});
/* ---- Scroll reveal ---- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(
function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add("in");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
);
reveals.forEach(function (el) { io.observe(el); });
} else {
reveals.forEach(function (el) { el.classList.add("in"); });
}
/* ---- Spec tabs ---- */
var tabs = document.querySelectorAll(".spectab");
function activateTab(tab) {
tabs.forEach(function (t) {
var on = t === tab;
t.classList.toggle("is-active", on);
t.setAttribute("aria-selected", on ? "true" : "false");
var panel = document.getElementById(t.getAttribute("aria-controls"));
if (panel) {
panel.hidden = !on;
panel.classList.toggle("is-active", on);
}
});
}
tabs.forEach(function (tab, i) {
tab.addEventListener("click", function () { activateTab(tab); });
tab.addEventListener("keydown", function (e) {
if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
e.preventDefault();
var next = e.key === "ArrowRight" ? (i + 1) % tabs.length : (i - 1 + tabs.length) % tabs.length;
tabs[next].focus();
activateTab(tabs[next]);
});
});
/* ---- Color swatches ---- */
var swatches = document.querySelectorAll(".swatch");
var swatchName = document.getElementById("swatchName");
var device = document.getElementById("device");
swatches.forEach(function (sw) {
sw.addEventListener("click", function () {
swatches.forEach(function (s) { s.classList.remove("is-active"); });
sw.classList.add("is-active");
var color = sw.getAttribute("data-color");
var name = sw.getAttribute("data-name");
if (swatchName) swatchName.textContent = name;
if (device) {
device.style.setProperty("--device-body", color);
device.style.setProperty("--device-glow", color);
}
});
});
/* ---- Accordion FAQ ---- */
document.querySelectorAll(".acc__head").forEach(function (head) {
head.addEventListener("click", function () {
var item = head.parentElement;
var body = item.querySelector(".acc__body");
var open = item.classList.toggle("open");
head.setAttribute("aria-expanded", open ? "true" : "false");
body.style.maxHeight = open ? body.scrollHeight + "px" : "0px";
});
});
/* ---- Pricing quantity ---- */
var qtyVal = document.getElementById("qtyVal");
var totalEl = document.getElementById("total");
var minus = document.getElementById("qtyMinus");
var plus = document.getElementById("qtyPlus");
var UNIT = 189;
var qty = 1;
function renderTotal() {
if (qtyVal) qtyVal.textContent = qty;
if (totalEl) totalEl.textContent = "$0.00";
}
if (minus) minus.addEventListener("click", function () { if (qty > 1) { qty--; renderTotal(); } });
if (plus) plus.addEventListener("click", function () { if (qty < 9) { qty++; renderTotal(); } });
renderTotal();
var reserve = document.getElementById("reserveBtn");
if (reserve) {
reserve.addEventListener("click", function () {
toast("Reserved " + qty + " × Halo X1 — $0 hold placed.");
});
}
/* ---- Newsletter ---- */
var news = document.getElementById("newsForm");
if (news) {
news.addEventListener("submit", function (e) {
e.preventDefault();
news.reset();
toast("You're on the list. Field notes incoming.");
});
}
/* ---- Beam flicker on hero hover ---- */
var beam = document.getElementById("deviceBeam");
if (device && beam) {
device.addEventListener("mouseenter", function () { beam.style.opacity = "1"; beam.style.filter = "blur(3px)"; });
device.addEventListener("mouseleave", function () { beam.style.opacity = ""; beam.style.filter = ""; });
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumen Halo — The Pocket Light Engine</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- NAV -->
<header class="nav" id="nav">
<div class="container nav__inner">
<a class="brand" href="#top" aria-label="Lumen Halo home">
<span class="brand__mark" aria-hidden="true"></span>
<span class="brand__name">LUMEN<span>HALO</span></span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#specs">Specs</a>
<a href="#features">Features</a>
<a href="#compare">Compare</a>
<a href="#reviews">Reviews</a>
<a href="#faq">FAQ</a>
</nav>
<div class="nav__actions">
<a class="btn btn--ghost" href="#preorder">Sign in</a>
<a class="btn btn--primary" href="#preorder">Pre-order</a>
</div>
<button class="nav__toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="mobileMenu">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile-menu" id="mobileMenu" hidden>
<a href="#specs">Specs</a>
<a href="#features">Features</a>
<a href="#compare">Compare</a>
<a href="#reviews">Reviews</a>
<a href="#faq">FAQ</a>
<a class="btn btn--primary mobile-menu__cta" href="#preorder">Pre-order — $189</a>
</div>
</header>
<main id="main">
<span id="top"></span>
<!-- HERO -->
<section class="hero">
<div class="hero__glow" aria-hidden="true"></div>
<div class="container hero__inner">
<div class="hero__copy reveal">
<span class="pill"><span class="pill__dot"></span> Halo X1 — Now shipping batch 04</span>
<h1>The pocket light<br />engine that bends<br /><span class="grad">around the dark.</span></h1>
<p class="hero__sub">A CNC-machined 1,400-lumen flashlight with adaptive beam shaping, USB-C 65W passthrough, and a battery that outlasts the trip. Built to a tolerance you can feel.</p>
<div class="hero__cta">
<a class="btn btn--primary btn--lg" href="#preorder">Pre-order — $189</a>
<a class="btn btn--outline btn--lg" href="#features">See it in action</a>
</div>
<ul class="hero__stats">
<li><strong>1,400</strong><span>lumens peak</span></li>
<li><strong>18 hrs</strong><span>runtime eco</span></li>
<li><strong>IP68</strong><span>dust + water</span></li>
</ul>
</div>
<div class="hero__visual reveal">
<div class="device" id="device">
<div class="device__beam" id="deviceBeam"></div>
<div class="device__body">
<div class="device__head"></div>
<div class="device__shaft">
<span class="device__ring"></span>
<span class="device__ring"></span>
<span class="device__ring"></span>
<span class="device__logo">HALO X1</span>
</div>
<div class="device__tail"></div>
</div>
<div class="device__spec device__spec--1"><b>Ti-6Al-4V</b> grade-5 titanium</div>
<div class="device__spec device__spec--2"><b>0.2–1400</b> lm dimming</div>
</div>
</div>
</div>
</section>
<!-- SOCIAL PROOF -->
<section class="proof">
<div class="container">
<p class="proof__label">Trusted by makers, guides & first responders at</p>
<div class="proof__logos">
<span>NORTHWIND</span><span>BasecampCo</span><span>RIDGELINE</span><span>Atlas EMS</span><span>Voyaer</span><span>DEEPFIELD</span>
</div>
</div>
</section>
<!-- SPEC TABS -->
<section class="specs" id="specs">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">Engineered, not assembled</span>
<h2>Every number, earned in the lab.</h2>
</div>
<div class="spectabs reveal">
<div class="spectabs__nav" role="tablist" aria-label="Specifications">
<button class="spectab is-active" role="tab" aria-selected="true" id="tab-optics" aria-controls="panel-optics">Optics</button>
<button class="spectab" role="tab" aria-selected="false" id="tab-power" aria-controls="panel-power">Power</button>
<button class="spectab" role="tab" aria-selected="false" id="tab-build" aria-controls="panel-build">Build</button>
<button class="spectab" role="tab" aria-selected="false" id="tab-smart" aria-controls="panel-smart">Smart</button>
</div>
<div class="spectabs__panels">
<div class="specpanel is-active" id="panel-optics" role="tabpanel" aria-labelledby="tab-optics">
<h3>Adaptive beam optics</h3>
<p>A motorized aspheric lens shapes the beam from a 9° throw to a 120° flood in 180 ms — no twisting, no fumbling in the cold.</p>
<dl class="kv">
<div><dt>Peak output</dt><dd>1,400 lumens</dd></div>
<div><dt>Beam range</dt><dd>9° – 120°</dd></div>
<div><dt>Throw distance</dt><dd>312 m</dd></div>
<div><dt>Color temp</dt><dd>4,200 K neutral</dd></div>
</dl>
</div>
<div class="specpanel" id="panel-power" role="tabpanel" aria-labelledby="tab-power" hidden>
<h3>All-day cell, all-night reserve</h3>
<p>A 5,000 mAh 21700 cell with USB-C PD 65W passthrough — charge the light, or let the light charge your phone.</p>
<dl class="kv">
<div><dt>Capacity</dt><dd>5,000 mAh</dd></div>
<div><dt>Eco runtime</dt><dd>18 hours</dd></div>
<div><dt>Recharge</dt><dd>0–100% in 47 min</dd></div>
<div><dt>Passthrough</dt><dd>USB-C PD 65W</dd></div>
</dl>
</div>
<div class="specpanel" id="panel-build" role="tabpanel" aria-labelledby="tab-build" hidden>
<h3>Machined from a single billet</h3>
<p>Grade-5 titanium body with a sapphire-coated lens, knurled grip, and an IP68 seal rated to 3 meters for 30 minutes.</p>
<dl class="kv">
<div><dt>Material</dt><dd>Ti-6Al-4V</dd></div>
<div><dt>Weight</dt><dd>148 g</dd></div>
<div><dt>Rating</dt><dd>IP68 / 3 m</dd></div>
<div><dt>Impact</dt><dd>2 m drop tested</dd></div>
</dl>
</div>
<div class="specpanel" id="panel-smart" role="tabpanel" aria-labelledby="tab-smart" hidden>
<h3>Quietly intelligent</h3>
<p>An ambient sensor dims the beam to your surroundings, while the companion app logs runtime and tunes presets over BLE.</p>
<dl class="kv">
<div><dt>Sensor</dt><dd>Ambient + motion</dd></div>
<div><dt>Connectivity</dt><dd>Bluetooth LE 5.3</dd></div>
<div><dt>Presets</dt><dd>6 user-tunable</dd></div>
<div><dt>Firmware</dt><dd>OTA updates</dd></div>
</dl>
</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section class="features" id="features">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">Why it feels different</span>
<h2>Details you don't see until<br />you're holding it.</h2>
</div>
<div class="feature-grid">
<article class="feature feature--wide reveal">
<div class="feature__spot" aria-hidden="true"></div>
<h3>Adaptive beam, mapped in real time</h3>
<p>The Halo X1 reads ambient light 60 times a second and reshapes the beam to match — flood for a campsite, throw for the ridge. You twist nothing.</p>
<div class="chip-row">
<span class="chip">180ms morph</span>
<span class="chip">60Hz sampling</span>
<span class="chip">Silent motor</span>
</div>
</article>
<article class="feature reveal">
<span class="feature__icon" aria-hidden="true">⚡</span>
<h3>65W passthrough</h3>
<p>A flashlight that doubles as a power bank for your phone, GPS, or camera in the field.</p>
</article>
<article class="feature reveal">
<span class="feature__icon" aria-hidden="true">❄</span>
<h3>Cold-weather grip</h3>
<p>Diamond knurling and a glove-friendly tail switch that still clicks at −20°C.</p>
</article>
<article class="feature reveal">
<span class="feature__icon" aria-hidden="true">🛡</span>
<h3>IP68, drop-rated</h3>
<p>Sealed against dust and submersion, tested from two meters onto concrete.</p>
</article>
<article class="feature feature--wide reveal">
<div class="feature__spot feature__spot--2" aria-hidden="true"></div>
<h3>Pick your finish</h3>
<p>Three anodized colorways, each cut from the same titanium billet. Tap a swatch to preview the body.</p>
<div class="swatches" id="swatches" role="group" aria-label="Color finish">
<button class="swatch is-active" data-color="#c7ccd6" data-name="Graphite" aria-label="Graphite" style="--sw:#c7ccd6"></button>
<button class="swatch" data-color="#6ee7e0" data-name="Glacier" aria-label="Glacier" style="--sw:#6ee7e0"></button>
<button class="swatch" data-color="#f4a259" data-name="Ember" aria-label="Ember" style="--sw:#f4a259"></button>
</div>
<p class="swatch-name">Finish: <strong id="swatchName">Graphite</strong></p>
</article>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="process">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">From billet to beam</span>
<h2>How a Halo is made.</h2>
</div>
<ol class="steps">
<li class="step reveal"><span class="step__num">01</span><h3>CNC the billet</h3><p>Each body is milled from solid grade-5 titanium across nine machining passes.</p></li>
<li class="step reveal"><span class="step__num">02</span><h3>Tune the optics</h3><p>The aspheric lens and driver are calibrated by hand to a single lux curve.</p></li>
<li class="step reveal"><span class="step__num">03</span><h3>Seal & test</h3><p>Every unit is pressure-tested to IP68 and drop-checked before it ships.</p></li>
<li class="step reveal"><span class="step__num">04</span><h3>Ships to you</h3><p>Serialized, registered to your account, and covered by a lifetime warranty.</p></li>
</ol>
</div>
</section>
<!-- COMPARE -->
<section class="compare" id="compare">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">Side by side</span>
<h2>No contest in the dark.</h2>
</div>
<div class="table-wrap reveal">
<table class="ctable">
<thead>
<tr>
<th scope="col">Spec</th>
<th scope="col" class="ctable__us">Halo X1</th>
<th scope="col">Generic EDC</th>
<th scope="col">Premium rival</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Adaptive beam</th><td class="ctable__us"><span class="yes">Motorized</span></td><td><span class="no">None</span></td><td><span class="no">Manual zoom</span></td></tr>
<tr><th scope="row">Peak output</th><td class="ctable__us">1,400 lm</td><td>900 lm</td><td>1,200 lm</td></tr>
<tr><th scope="row">USB-C passthrough</th><td class="ctable__us"><span class="yes">65W</span></td><td><span class="no">—</span></td><td>18W</td></tr>
<tr><th scope="row">Body material</th><td class="ctable__us">Ti grade-5</td><td>Aluminum</td><td>Aluminum</td></tr>
<tr><th scope="row">App + OTA</th><td class="ctable__us"><span class="yes">Yes</span></td><td><span class="no">—</span></td><td><span class="no">—</span></td></tr>
<tr><th scope="row">Warranty</th><td class="ctable__us">Lifetime</td><td>1 year</td><td>5 years</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- REVIEWS -->
<section class="reviews" id="reviews">
<div class="container">
<div class="section-head reveal">
<span class="eyebrow">4.9 / 5 from 2,100+ owners</span>
<h2>What the field says.</h2>
</div>
<div class="review-grid">
<figure class="review reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>The adaptive beam genuinely changed how I move on a night ascent. I stopped fiddling and just climbed.</blockquote>
<figcaption><span class="avatar" aria-hidden="true">MR</span><span><strong>Mara Reyes</strong><small>Alpine guide, Patagonia</small></span></figcaption>
</figure>
<figure class="review reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>I've abused every light on the market. This is the first one that came back from a river drop still perfect.</blockquote>
<figcaption><span class="avatar" aria-hidden="true">DK</span><span><strong>Devon Kaur</strong><small>Search & rescue</small></span></figcaption>
</figure>
<figure class="review reveal">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>Charged my dead phone off the tailcap on a 4-day trek. The build quality is absurd for the price.</blockquote>
<figcaption><span class="avatar" aria-hidden="true">TO</span><span><strong>Theo Okafor</strong><small>Long-distance hiker</small></span></figcaption>
</figure>
</div>
</div>
</section>
<!-- PREORDER / PRICING -->
<section class="preorder" id="preorder">
<div class="container preorder__inner">
<div class="preorder__glow" aria-hidden="true"></div>
<div class="preorder__copy reveal">
<span class="eyebrow">Batch 04 — shipping in 21 days</span>
<h2>Reserve your Halo X1.</h2>
<p>Pre-order today and lock founder pricing. No charge until your unit ships, free returns for 60 days, and a lifetime warranty on the body.</p>
<ul class="incl">
<li>Halo X1 + 5,000 mAh cell</li>
<li>USB-C 65W braided cable</li>
<li>Magnetic charging dock</li>
<li>Lifetime warranty + app access</li>
</ul>
</div>
<div class="pricecard reveal">
<div class="pricecard__row">
<span>Founder price</span>
<span class="pricecard__strike">$249</span>
</div>
<div class="pricecard__price"><span>$</span>189</div>
<div class="qty">
<span>Quantity</span>
<div class="qty__ctrl">
<button id="qtyMinus" aria-label="Decrease quantity">−</button>
<output id="qtyVal" aria-live="polite">1</output>
<button id="qtyPlus" aria-label="Increase quantity">+</button>
</div>
</div>
<div class="pricecard__total"><span>Total today</span><strong id="total">$0.00</strong></div>
<button class="btn btn--primary btn--block btn--lg" id="reserveBtn">Reserve now — no charge yet</button>
<p class="pricecard__note">Refundable $0 hold · Ships in ~21 days · Free 60-day returns</p>
</div>
</div>
</section>
<!-- FAQ -->
<section class="faq" id="faq">
<div class="container faq__inner">
<div class="section-head reveal">
<span class="eyebrow">Before you ask</span>
<h2>Questions, answered.</h2>
</div>
<div class="accordion reveal" id="accordion">
<div class="acc">
<button class="acc__head" aria-expanded="false">When will I be charged?<span class="acc__icon" aria-hidden="true">+</span></button>
<div class="acc__body"><p>Never at reservation. We only charge your card when your serialized unit leaves the line — about 21 days out for batch 04.</p></div>
</div>
<div class="acc">
<button class="acc__head" aria-expanded="false">Is the battery replaceable?<span class="acc__icon" aria-hidden="true">+</span></button>
<div class="acc__body"><p>Yes. The 21700 cell unscrews from the tail without tools, and replacements ship with the same USB-C passthrough.</p></div>
</div>
<div class="acc">
<button class="acc__head" aria-expanded="false">Does the app cost extra?<span class="acc__icon" aria-hidden="true">+</span></button>
<div class="acc__body"><p>No. The companion app and all OTA firmware updates are free for the life of the device.</p></div>
</div>
<div class="acc">
<button class="acc__head" aria-expanded="false">What does the warranty cover?<span class="acc__icon" aria-hidden="true">+</span></button>
<div class="acc__body"><p>The titanium body carries a lifetime warranty. Electronics and the cell are covered for five years against defects.</p></div>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<div class="container footer__grid">
<div class="footer__brand">
<a class="brand" href="#top"><span class="brand__mark" aria-hidden="true"></span><span class="brand__name">LUMEN<span>HALO</span></span></a>
<p>Tools for people who go where the light doesn't.</p>
</div>
<div class="footer__col"><h4>Product</h4><a href="#specs">Specs</a><a href="#features">Features</a><a href="#preorder">Pre-order</a></div>
<div class="footer__col"><h4>Company</h4><a href="#">About</a><a href="#">Sustainability</a><a href="#">Careers</a></div>
<div class="footer__col"><h4>Support</h4><a href="#faq">FAQ</a><a href="#">Warranty</a><a href="#">Contact</a></div>
<div class="footer__news">
<h4>Field notes</h4>
<p>Product drops and trail reports. No noise.</p>
<form class="news" id="newsForm">
<input type="email" required placeholder="you@trailhead.com" aria-label="Email address" />
<button class="btn btn--primary" type="submit">Join</button>
</form>
</div>
</div>
<div class="container footer__bottom">
<span>© 2026 Lumen Halo Instruments. Fictional brand.</span>
<div class="footer__legal"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Cookies</a></div>
</div>
</footer>
<!-- STICKY BUY BAR -->
<div class="buybar" id="buybar" hidden>
<div class="container buybar__inner">
<div class="buybar__info"><strong>Halo X1</strong><span>$189 · Founder price · Batch 04</span></div>
<a class="btn btn--primary" href="#preorder">Reserve now</a>
</div>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Hardware / Gadget Landing
A polished, single-page direct-to-consumer site for Lumen Halo, an invented hardware brand
selling the Halo X1 — a CNC-machined titanium pocket flashlight. The page leans into a true
spotlight-dark palette (#0a0a0c) with an electric teal accent and a clean Inter / JetBrains
Mono pairing, opening on a dramatic hero where a CSS-rendered device floats under a soft beam,
flanked by spec callouts and headline output figures.
Below the fold the page is built like a spec-proud product story: a maker and first-responder logo row, an interactive four-tab spec panel (optics, power, build, smart), a feature grid with spotlight glows and a live color-finish picker that recolors the hero render, a four-step “billet to beam” process, a side-by-side comparison table, three owner reviews, a pre-order pricing card with founder pricing and a quantity stepper, an accordion FAQ, a sticky buy bar that slides in on scroll, and a footer with a newsletter form. The layout is fully responsive to ~360px with a hamburger menu, and accessible with semantic landmarks, a skip link, ARIA tabs and visible focus states.
Interactions are pure vanilla JavaScript: an IntersectionObserver drives staggered scroll
reveals, the spec tabs support arrow-key navigation, the color swatches repaint the device via
CSS variables, the FAQ accordion animates open, the quantity stepper updates the pre-order
card, anchors smooth-scroll, the sticky buy bar and nav react to scroll position, and every CTA
confirms through a reusable toast() helper. A prefers-reduced-motion guard disables motion
for sensitive users.
Illustrative UI only — fictional brand, not a real product.