Run details
- Model
- moonshotai/kimi-k3.1-pro
- Route
- OpenRouter API, one user message
- Served by
- Moonshot AI
- Effort
- max, OpenRouter's default for this model
- Limits
- 60 min · 300,000 output tokens (our $3.00 stop per request at $10/M)
- Date
- 23 Oct 2026
- Time
- 7 min 20 s
- Size
- 73 kB
- Tokens
- 172 in, 36,645 out (14,741 of them thinking)
- List price
- $0.37 at today's price ($2 in / $10 out per M)
- Paid
- $0.37
Exact prompt
Build the landing page for Lumen Cycles, a Copenhagen workshop that builds custom cargo bikes to order. Make it look like a real brand you would trust with 4,000 euros. It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.
Source
73 kB 2,111 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Lumen Cycles builds custom cargo bikes to order in Copenhagen. Designed around your family, your work and your everyday.">
<meta name="theme-color" content="#173a30">
<title>Lumen Cycles — Custom cargo bikes, built in Copenhagen</title>
<style>
:root {
--paper: #f5f2ea;
--paper-light: #fbfaf6;
--ink: #1c2924;
--muted: #667069;
--forest: #173a30;
--forest-light: #285044;
--accent: #d96440;
--line: #d5d4cb;
--sage: #dbe1d5;
--serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
body {
margin: 0;
overflow-x: hidden;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
::selection { background: #e7ad92; color: var(--ink); }
h1, h2, h3, p, blockquote { margin-top: 0; }
h1, h2, h3 {
font-weight: 650;
text-wrap: balance;
}
h2 {
margin-bottom: 24px;
font-size: clamp(2.6rem, 4.7vw, 4.15rem);
line-height: 1;
letter-spacing: -0.052em;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.skip-link {
position: fixed;
z-index: 200;
top: 12px;
left: 12px;
padding: 10px 16px;
transform: translateY(-150%);
background: var(--paper-light);
border: 1px solid var(--ink);
}
.skip-link:focus { transform: translateY(0); }
.container {
width: min(1320px, calc(100% - 80px));
margin-inline: auto;
}
.section { padding: 120px 0; }
.eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
color: var(--forest);
font-size: 11px;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.17em;
text-transform: uppercase;
}
.eyebrow::before {
width: 28px;
height: 1px;
flex: 0 0 auto;
background: currentColor;
content: "";
}
.serif {
font-family: var(--serif);
font-weight: 400;
font-style: italic;
}
.button {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 23px;
border: 1px solid transparent;
border-radius: 2px;
font-size: 13px;
font-weight: 650;
line-height: 1.2;
letter-spacing: 0.01em;
transition: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
background: var(--forest);
color: #fff;
}
.button-primary:hover { background: #224a3e; }
.button-light {
background: var(--paper-light);
color: var(--forest);
}
.button-light:hover { background: #fff; }
.button-outline {
border-color: #a9b0a9;
background: transparent;
}
.button-outline:hover { border-color: var(--ink); }
.button-arrow { font-size: 18px; font-weight: 400; line-height: 1; }
.text-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border: 0;
border-bottom: 1px solid #9ba29c;
background: none;
font-size: 13px;
font-weight: 650;
line-height: 1.3;
transition: border-color 180ms ease, color 180ms ease;
}
.text-button:hover { color: var(--accent); border-color: var(--accent); }
/* Brand and navigation */
.announcement {
min-height: 35px;
display: flex;
align-items: center;
background: var(--forest);
color: #e7ede8;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.announcement .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.announcement-dot {
width: 6px;
height: 6px;
display: inline-block;
margin-right: 9px;
border-radius: 50%;
background: #d9a48a;
vertical-align: 1px;
}
.site-header {
position: sticky;
z-index: 50;
top: 0;
border-bottom: 1px solid var(--line);
background: rgba(245, 242, 234, 0.96);
backdrop-filter: blur(12px);
}
.nav-wrap {
min-height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.logo {
display: inline-flex;
align-items: center;
gap: 11px;
flex: 0 0 auto;
}
.logo-mark { width: 35px; height: 35px; }
.logo-type {
display: block;
font-size: 20px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.16em;
}
.logo-type small {
display: block;
margin-top: 5px;
font-size: 7px;
font-weight: 650;
letter-spacing: 0.48em;
}
.main-nav {
display: flex;
align-items: center;
gap: 34px;
margin-left: auto;
}
.main-nav a {
position: relative;
padding: 10px 0;
font-size: 13px;
font-weight: 550;
}
.main-nav a::after {
position: absolute;
right: 0;
bottom: 5px;
left: 0;
height: 1px;
transform: scaleX(0);
transform-origin: right;
background: var(--ink);
content: "";
transition: transform 180ms ease;
}
.main-nav a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions .button { min-height: 43px; padding: 11px 18px; }
.menu-toggle {
width: 44px;
height: 44px;
display: none;
place-items: center;
padding: 0;
border: 1px solid var(--line);
background: transparent;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
width: 18px;
height: 1px;
display: block;
background: var(--ink);
content: "";
transition: transform 180ms ease;
}
.menu-toggle span { position: relative; }
.menu-toggle span::before { position: absolute; top: -5px; }
.menu-toggle span::after { position: absolute; top: 5px; }
.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
/* Hero */
.hero {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
align-items: center;
gap: 62px;
padding-top: 64px;
padding-bottom: 72px;
}
.hero-copy { padding: 20px 0; }
.hero h1 {
margin-bottom: 30px;
font-size: clamp(4.3rem, 7.2vw, 6.7rem);
line-height: 0.87;
letter-spacing: -0.068em;
}
.hero h1 em {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.045em;
}
.hero-intro {
max-width: 510px;
margin-bottom: 31px;
color: #4f5c55;
font-size: 17px;
line-height: 1.7;
}
.hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 25px;
}
.hero-proof {
display: flex;
gap: 30px;
margin-top: 39px;
padding-top: 21px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 11px;
letter-spacing: 0.035em;
}
.hero-proof strong {
display: block;
margin-bottom: 2px;
color: var(--ink);
font-size: 13px;
font-weight: 650;
letter-spacing: 0;
}
.hero-art {
min-height: 610px;
position: relative;
overflow: hidden;
border: 1px solid #cbd1c7;
background: var(--sage);
isolation: isolate;
}
.hero-art::before {
width: 410px;
height: 410px;
position: absolute;
z-index: -1;
top: 42px;
right: -82px;
border-radius: 50%;
background: rgba(249, 246, 236, 0.55);
content: "";
}
.hero-art::after {
position: absolute;
z-index: -1;
inset: 0;
opacity: 0.25;
background-image:
linear-gradient(rgba(23, 58, 48, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(23, 58, 48, 0.08) 1px, transparent 1px);
background-size: 80px 80px;
content: "";
mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.art-heading {
position: absolute;
z-index: 2;
top: 25px;
left: 26px;
font-size: 10px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.art-heading span {
display: block;
color: #68756c;
font-weight: 500;
}
.build-number {
width: 66px;
height: 66px;
position: absolute;
z-index: 2;
top: 23px;
right: 24px;
display: grid;
place-content: center;
border: 1px solid rgba(23, 58, 48, 0.4);
border-radius: 50%;
text-align: center;
font-size: 13px;
font-weight: 650;
line-height: 1.15;
}
.build-number small {
display: block;
margin-bottom: 3px;
font-size: 7px;
letter-spacing: 0.16em;
}
.hero-bike {
width: 112%;
max-width: none;
position: absolute;
top: 48%;
left: -7%;
transform: translateY(-50%);
}
.art-footer {
min-height: 68px;
position: absolute;
z-index: 3;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 15px 23px;
border-top: 1px solid rgba(23, 58, 48, 0.16);
background: rgba(237, 240, 231, 0.82);
backdrop-filter: blur(8px);
}
.paint-control { display: flex; align-items: center; gap: 13px; }
.paint-label {
min-width: 76px;
font-size: 9px;
font-weight: 650;
line-height: 1.5;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.paint-label span {
display: block;
color: #637067;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: none;
}
.swatches { display: flex; align-items: center; gap: 8px; }
.paint-dot {
width: 21px;
height: 21px;
padding: 0;
border: 3px solid #e7ebe2;
border-radius: 50%;
outline: 1px solid transparent;
background: var(--swatch);
}
.paint-dot.active { outline-color: var(--ink); }
.art-spec {
color: #526158;
font-size: 9px;
font-weight: 650;
letter-spacing: 0.13em;
text-align: right;
text-transform: uppercase;
}
/* Assurance strip */
.trust-strip {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--paper-light);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.trust-item {
min-height: 96px;
display: flex;
align-items: center;
gap: 13px;
padding: 22px 25px;
border-left: 1px solid var(--line);
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
.trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-item:last-child { padding-right: 0; }
.trust-item svg { width: 24px; height: 24px; flex: 0 0 auto; color: var(--accent); }
/* Range */
.section-heading {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
align-items: end;
gap: 80px;
}
.section-heading h2 { margin-bottom: 0; }
.section-heading > p {
max-width: 430px;
margin-bottom: 5px;
color: var(--muted);
line-height: 1.75;
}
.product-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 62px;
}
.product-card {
overflow: hidden;
border: 1px solid var(--line);
background: var(--paper-light);
}
.product-art {
height: 350px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line);
background: var(--card-bg);
}
.product-art::before {
width: 260px;
height: 260px;
position: absolute;
top: 34px;
right: 30px;
border: 1px solid rgba(28, 41, 36, 0.09);
border-radius: 50%;
content: "";
}
.product-tag,
.product-index {
position: absolute;
z-index: 2;
top: 21px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.product-tag {
left: 22px;
padding: 6px 9px;
border: 1px solid rgba(28, 41, 36, 0.24);
background: rgba(255, 255, 255, 0.26);
}
.product-index { right: 22px; top: 28px; }
.product-bike {
width: 100%;
height: 100%;
position: relative;
padding: 30px 6px 0;
transition: transform 300ms ease;
}
.product-card:hover .product-bike { transform: translateY(-4px); }
.product-body { padding: 31px 32px 30px; }
.product-name-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 20px;
}
.product-name-row h3 {
margin-bottom: 11px;
font-size: 35px;
line-height: 1.1;
letter-spacing: -0.04em;
}
.product-name-row > span {
color: var(--muted);
font-family: var(--serif);
font-size: 18px;
font-style: italic;
white-space: nowrap;
}
.product-description {
max-width: 500px;
min-height: 52px;
margin-bottom: 24px;
color: var(--muted);
font-size: 14px;
}
.product-specs {
display: flex;
margin-bottom: 26px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.product-specs > div {
flex: 1;
padding: 15px 18px 15px 0;
}
.product-specs > div + div {
padding-left: 22px;
border-left: 1px solid var(--line);
}
.product-specs strong {
display: block;
font-size: 13px;
font-weight: 650;
}
.product-specs span {
color: var(--muted);
font-size: 10px;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.product-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.product-price { font-size: 12px; color: var(--muted); }
.product-price strong { display: block; color: var(--ink); font-size: 20px; }
.range-note {
display: flex;
align-items: flex-start;
gap: 12px;
max-width: 900px;
margin: 26px auto 0;
color: var(--muted);
font-size: 12px;
text-align: center;
}
.range-note svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--forest); }
/* Process */
.process {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #eae8df;
}
.process-grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 110px;
}
.process-intro > p {
max-width: 410px;
color: var(--muted);
line-height: 1.75;
}
.process-aside {
max-width: 360px;
margin-top: 43px;
padding: 4px 0 4px 20px;
border-left: 2px solid var(--accent);
font-family: var(--serif);
font-size: 20px;
font-style: italic;
line-height: 1.45;
}
.process-step {
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 22px;
padding: 30px 0 32px;
border-top: 1px solid #c8c8bf;
}
.process-step:last-child { border-bottom: 1px solid #c8c8bf; }
.step-number {
padding-top: 4px;
color: var(--accent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
}
.process-step h3 {
margin-bottom: 8px;
font-size: 22px;
line-height: 1.25;
letter-spacing: -0.025em;
}
.process-step p {
max-width: 520px;
margin-bottom: 0;
color: #626c65;
font-size: 14px;
line-height: 1.7;
}
.step-time {
align-self: start;
margin-top: 3px;
padding: 5px 9px;
border: 1px solid #b8bcb3;
border-radius: 30px;
color: #5e6861;
font-size: 9px;
font-weight: 650;
letter-spacing: 0.08em;
white-space: nowrap;
text-transform: uppercase;
}
/* Workshop */
.workshop-shell {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
background: var(--forest);
color: #f5f4ed;
}
.workshop-drawing {
min-height: 600px;
display: flex;
background: #cfd8cc;
color: var(--forest);
}
.workshop-drawing svg { width: 100%; height: 100%; }
.workshop-copy { padding: 70px 68px; }
.workshop-copy .eyebrow { color: #b9c8bf; }
.workshop-copy h2 { margin-bottom: 27px; }
.workshop-copy > p {
margin-bottom: 30px;
color: #c2cec7;
font-size: 15px;
line-height: 1.75;
}
.workshop-list {
margin: 0;
padding: 0;
list-style: none;
}
.workshop-list li {
position: relative;
padding: 17px 0 17px 30px;
border-top: 1px solid rgba(255, 255, 255, 0.16);
color: #e3e9e4;
font-size: 13px;
}
.workshop-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.workshop-list li::before {
position: absolute;
top: 17px;
left: 2px;
color: #dda082;
content: "✓";
font-weight: 700;
}
.workshop-sign {
margin: 30px 0 0;
color: #d6dfd9;
font-family: var(--serif);
font-size: 20px;
font-style: italic;
}
/* Owner story */
.owner-story { text-align: center; }
.stars {
margin-bottom: 26px;
color: var(--accent);
font-size: 14px;
letter-spacing: 0.3em;
}
.owner-story blockquote {
max-width: 1080px;
margin: 0 auto 31px;
font-family: var(--serif);
font-size: clamp(2.2rem, 4.4vw, 4rem);
font-weight: 400;
line-height: 1.13;
letter-spacing: -0.04em;
}
.owner-meta {
color: var(--muted);
font-size: 10px;
font-weight: 650;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.story-stats {
max-width: 780px;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 61px auto 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.story-stats > div { padding: 23px 20px; }
.story-stats > div + div { border-left: 1px solid var(--line); }
.story-stats strong {
display: block;
margin-bottom: 3px;
font-size: 25px;
font-weight: 550;
letter-spacing: -0.035em;
}
.story-stats span {
color: var(--muted);
font-size: 9px;
font-weight: 650;
letter-spacing: 0.13em;
text-transform: uppercase;
}
/* Pricing */
.pricing-section { padding-top: 0; }
.pricing-shell {
display: grid;
grid-template-columns: 1fr 0.92fr;
border: 1px solid #d2c9bd;
background: #eee4d9;
}
.pricing-copy { padding: 62px 64px; }
.pricing-copy h2 { font-size: clamp(2.6rem, 4vw, 3.7rem); }
.pricing-copy > p {
max-width: 500px;
color: #626860;
font-size: 15px;
line-height: 1.75;
}
.fixed-quote {
display: flex;
align-items: center;
gap: 13px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #d2c9bd;
font-size: 12px;
font-weight: 650;
}
.fixed-quote svg { width: 25px; height: 25px; color: var(--accent); }
.price-box { padding: 52px 54px; background: var(--forest); color: #f4f4ed; }
.price-kicker {
margin-bottom: 12px;
color: #b9c8bf;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.price {
margin-bottom: 8px;
font-size: clamp(3rem, 5vw, 4.6rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.055em;
}
.price-note { margin-bottom: 27px; color: #bac8c0; font-size: 11px; }
.included-list {
margin: 0 0 28px;
padding: 0;
list-style: none;
}
.included-list li {
padding: 10px 0 10px 24px;
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
color: #e2e9e4;
font-size: 12px;
}
.included-list li::before {
position: absolute;
left: 1px;
color: #dda082;
content: "—";
}
.price-box .button { width: 100%; }
.electric-note {
margin: 17px 0 0;
color: #aebeb5;
font-size: 10px;
line-height: 1.6;
text-align: center;
}
/* FAQ */
.faq-section { padding-top: 10px; }
.faq-grid {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 100px;
}
.faq-intro > p { max-width: 360px; color: var(--muted); font-size: 14px; }
.contact-note {
margin-top: 34px;
padding-top: 25px;
border-top: 1px solid var(--line);
font-size: 12px;
}
.contact-note strong { display: block; margin-bottom: 6px; font-size: 13px; }
.contact-note span { display: block; color: var(--muted); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary {
position: relative;
padding: 25px 48px 25px 0;
cursor: pointer;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
position: absolute;
top: 24px;
right: 4px;
color: var(--forest);
content: "+";
font-size: 23px;
font-weight: 400;
transition: transform 180ms ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-answer {
max-width: 670px;
padding: 0 50px 26px 0;
color: var(--muted);
font-size: 14px;
line-height: 1.75;
}
/* Closing and footer */
.closing { padding: 78px 0; background: #d96b47; color: #182d26; }
.closing-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
}
.closing h2 { margin-bottom: 13px; }
.closing p { margin-bottom: 0; font-size: 15px; }
.closing-cta { flex: 0 0 auto; text-align: center; }
.closing-cta .button { min-width: 210px; background: var(--forest); color: #fff; }
.closing-cta small {
display: block;
margin-top: 12px;
font-size: 10px;
letter-spacing: 0.04em;
}
.site-footer { padding: 65px 0 27px; background: #122920; color: #dce5df; }
.footer-grid {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: 45px;
}
.footer-brand p {
max-width: 290px;
margin: 23px 0 0;
color: #98aaa0;
font-size: 12px;
line-height: 1.7;
}
.footer-column h3 {
margin-bottom: 17px;
color: #8fa299;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.footer-column p,
.footer-column a {
display: block;
margin-bottom: 8px;
color: #d5dfd9;
font-size: 12px;
line-height: 1.65;
}
.footer-column a:hover { color: #fff; }
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 25px;
margin-top: 55px;
padding-top: 23px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: #81978b;
font-size: 9px;
letter-spacing: 0.09em;
text-transform: uppercase;
}
/* Dialog */
.build-dialog {
width: min(570px, calc(100% - 32px));
max-height: calc(100dvh - 32px);
margin: auto;
padding: 0;
overflow: auto;
border: 0;
border-radius: 3px;
background: var(--paper);
color: var(--ink);
box-shadow: 0 28px 100px rgba(0, 0, 0, 0.28);
}
.build-dialog::backdrop {
background: rgba(10, 26, 21, 0.74);
backdrop-filter: blur(4px);
}
.dialog-inner { padding: 34px 38px 38px; }
.dialog-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 27px;
}
.dialog-top .logo-mark { width: 30px; height: 30px; }
.dialog-close {
width: 39px;
height: 39px;
display: grid;
place-items: center;
padding: 0 0 3px;
border: 1px solid var(--line);
border-radius: 50%;
background: transparent;
font-size: 25px;
font-weight: 300;
line-height: 1;
}
.build-dialog h2 { margin-bottom: 13px; font-size: 42px; }
.dialog-intro { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.build-form { display: grid; gap: 16px; margin-top: 27px; }
.field label {
display: block;
margin-bottom: 6px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.field input,
.field select,
.field textarea {
width: 100%;
padding: 12px 13px;
border: 1px solid #c9cbc3;
border-radius: 1px;
outline: none;
background: var(--paper-light);
color: var(--ink);
font-size: 14px;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.field textarea { min-height: 83px; resize: vertical; }
.build-form .button { width: 100%; margin-top: 3px; }
.privacy-note {
margin: -3px 0 0;
color: var(--muted);
font-size: 10px;
line-height: 1.5;
text-align: center;
}
.form-success { padding: 24px 0 12px; text-align: center; }
.success-icon {
width: 61px;
height: 61px;
display: grid;
place-items: center;
margin: 0 auto 24px;
border-radius: 50%;
background: var(--forest);
color: #fff;
font-size: 26px;
}
.form-success h2 { font-size: 39px; }
.form-success p { max-width: 390px; margin: 0 auto 26px; color: var(--muted); font-size: 14px; }
@media (max-width: 1100px) {
.hero { gap: 34px; }
.hero-art { min-height: 540px; }
.hero h1 { font-size: clamp(4rem, 7.5vw, 5.6rem); }
.main-nav { gap: 23px; }
.process-grid { gap: 65px; }
.workshop-copy { padding: 55px 45px; }
.pricing-copy { padding: 50px 44px; }
.price-box { padding: 45px 42px; }
}
@media (max-width: 900px) {
.container { width: min(100% - 48px, 760px); }
.section { padding: 90px 0; }
.menu-toggle { display: grid; }
.main-nav {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: none;
align-items: stretch;
flex-direction: column;
gap: 0;
margin: 0;
padding: 16px 24px 25px;
border-bottom: 1px solid var(--line);
background: var(--paper);
}
.main-nav.open { display: flex; }
.main-nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
.main-nav a:last-child { border-bottom: 0; }
.main-nav a::after { display: none; }
.hero {
grid-template-columns: 1fr;
gap: 48px;
padding-top: 48px;
padding-bottom: 55px;
}
.hero-copy { max-width: 650px; padding-bottom: 0; }
.hero h1 { font-size: clamp(4.5rem, 13vw, 6.6rem); }
.hero-intro { max-width: 580px; }
.hero-art { min-height: 570px; }
.trust-grid { grid-template-columns: repeat(2, 1fr); }
.trust-item { border-bottom: 1px solid var(--line); }
.trust-item:nth-child(odd) { border-left: 0; }
.trust-item:nth-child(even) { border-right: 0; }
.trust-item:nth-last-child(-n + 2) { border-bottom: 0; }
.trust-item:first-child { padding-left: 25px; }
.trust-item:last-child { padding-right: 25px; }
.section-heading { grid-template-columns: 1fr; gap: 27px; }
.section-heading > p { max-width: 590px; }
.product-grid { grid-template-columns: 1fr; }
.product-art { height: 390px; }
.product-description { min-height: 0; }
.process-grid { grid-template-columns: 1fr; gap: 50px; }
.process-intro > p { max-width: 580px; }
.process-aside { margin-top: 26px; }
.workshop-shell { grid-template-columns: 1fr; }
.workshop-drawing { min-height: 460px; }
.workshop-copy { padding: 55px; }
.pricing-shell { grid-template-columns: 1fr; }
.pricing-copy, .price-box { padding: 50px; }
.faq-grid { grid-template-columns: 1fr; gap: 48px; }
.faq-intro > p { max-width: 560px; }
.contact-note { max-width: 440px; }
.closing-inner { align-items: flex-start; flex-direction: column; gap: 34px; }
.closing-cta { text-align: left; }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; margin-bottom: 15px; }
}
@media (max-width: 600px) {
.container { width: calc(100% - 38px); }
.section { padding: 75px 0; }
.announcement { min-height: 32px; font-size: 8px; }
.announcement .container { justify-content: center; }
.announcement-right { display: none; }
.nav-wrap { min-height: 70px; gap: 12px; }
.logo-mark { width: 31px; height: 31px; }
.logo-type { font-size: 17px; }
.header-actions > .button { display: none; }
h2 { font-size: clamp(2.55rem, 12vw, 3.4rem); }
.hero { gap: 38px; padding-top: 39px; }
.hero-copy { padding-top: 0; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 { margin-bottom: 25px; font-size: clamp(4rem, 20vw, 5.6rem); }
.hero-intro { font-size: 15px; }
.hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
.hero-actions .button { width: 100%; }
.hero-proof { gap: 18px; justify-content: space-between; }
.hero-proof > div { flex: 1; }
.hero-art { min-height: 425px; }
.hero-art::before { width: 280px; height: 280px; top: 50px; right: -80px; }
.art-heading { top: 18px; left: 18px; font-size: 8px; }
.build-number { width: 53px; height: 53px; top: 16px; right: 17px; font-size: 11px; }
.hero-bike { width: 124%; left: -13%; top: 47%; }
.art-footer { min-height: 61px; padding: 12px 16px; }
.art-spec { display: none; }
.paint-control { width: 100%; justify-content: space-between; }
.trust-item { min-height: 88px; align-items: flex-start; flex-direction: column; gap: 8px; padding: 17px 14px; font-size: 10px; }
.trust-item:first-child { padding-left: 14px; }
.trust-item:last-child { padding-right: 14px; }
.trust-item svg { width: 20px; height: 20px; }
.product-grid { margin-top: 40px; }
.product-art { height: 275px; }
.product-body { padding: 25px 22px; }
.product-name-row { align-items: flex-start; flex-direction: column; gap: 0; }
.product-name-row h3 { font-size: 31px; }
.product-name-row > span { margin-bottom: 13px; font-size: 16px; }
.product-bottom { align-items: flex-start; flex-direction: column; }
.range-note { text-align: left; }
.process-step { grid-template-columns: 34px 1fr; gap: 12px; }
.step-time { grid-column: 2; justify-self: start; margin-top: -6px; }
.workshop-section { padding-top: 0; padding-bottom: 0; width: 100%; }
.workshop-drawing { min-height: 345px; }
.workshop-copy { padding: 43px 24px 47px; }
.owner-story blockquote { font-size: 2.25rem; }
.story-stats { margin-top: 43px; }
.story-stats > div { padding: 18px 8px; }
.story-stats strong { font-size: 20px; }
.story-stats span { font-size: 7px; }
.pricing-section { padding-top: 0; }
.pricing-copy, .price-box { padding: 37px 25px; }
.price { font-size: 3.5rem; }
.faq-list summary { font-size: 14px; }
.faq-answer { padding-right: 12px; }
.closing { padding: 59px 0; }
.closing h2 { font-size: 3rem; }
.closing-cta, .closing-cta .button { width: 100%; }
.closing-cta { text-align: center; }
.footer-grid { grid-template-columns: repeat(2, 1fr); gap: 35px 24px; }
.footer-brand { grid-column: 1 / -1; }
.footer-column:last-child { grid-column: 1 / -1; }
.footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
.dialog-inner { padding: 25px 22px 28px; }
.build-dialog h2 { font-size: 35px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: 0.01ms !important; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<!-- Internal vector assets. No external files or requests. -->
<svg aria-hidden="true" style="position:absolute;width:0;height:0;overflow:hidden" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="wheel-large">
<circle r="106" fill="none" stroke="#26312c" stroke-width="9"/>
<circle r="97" fill="none" stroke="#7e8a82" stroke-width="2"/>
<g stroke="#97a198" stroke-width="1.25" opacity="0.9">
<line x1="0" y1="-96" x2="0" y2="96"/>
<line x1="-96" y1="0" x2="96" y2="0"/>
<line x1="-68" y1="-68" x2="68" y2="68"/>
<line x1="-68" y1="68" x2="68" y2="-68"/>
<line x1="-37" y1="-89" x2="37" y2="89"/>
<line x1="-89" y1="-37" x2="89" y2="37"/>
<line x1="-89" y1="37" x2="89" y2="-37"/>
<line x1="-37" y1="89" x2="37" y2="-89"/>
</g>
<circle r="9" fill="#26352e"/>
<circle r="3" fill="#d7d8ce"/>
</g>
<g id="wheel-small">
<circle r="88" fill="none" stroke="#26312c" stroke-width="9"/>
<circle r="79" fill="none" stroke="#7e8a82" stroke-width="2"/>
<g stroke="#97a198" stroke-width="1.25" opacity="0.9">
<line x1="0" y1="-78" x2="0" y2="78"/>
<line x1="-78" y1="0" x2="78" y2="0"/>
<line x1="-55" y1="-55" x2="55" y2="55"/>
<line x1="-55" y1="55" x2="55" y2="-55"/>
<line x1="-30" y1="-72" x2="30" y2="72"/>
<line x1="-72" y1="-30" x2="72" y2="30"/>
<line x1="-72" y1="30" x2="72" y2="-30"/>
<line x1="-30" y1="72" x2="30" y2="-72"/>
</g>
<circle r="8" fill="#26352e"/>
<circle r="3" fill="#d7d8ce"/>
</g>
<symbol id="bike-long" viewBox="0 0 900 580">
<ellipse cx="450" cy="515" rx="358" ry="10" fill="#173a30" opacity="0.1"/>
<use href="#wheel-large" transform="translate(195 402)"/>
<use href="#wheel-small" transform="translate(710 420)"/>
<g fill="none" stroke="var(--frame, #285044)" stroke-linecap="round" stroke-linejoin="round">
<path d="M91 387 A106 106 0 0 1 263 317" stroke-width="5"/>
<path d="M626 408 A88 88 0 0 1 768 364" stroke-width="5"/>
<path d="M118 286 H257 M135 286 L195 402 M239 286 L195 402" stroke-width="5"/>
</g>
<path d="M365 270 L586 286 L574 384 L351 367 Z" fill="var(--box, #c9a574)" stroke="#5d5748" stroke-width="2.5"/>
<path d="M365 270 L395 247 L610 261 L586 286 Z" fill="#6d6757" stroke="#5d5748" stroke-width="2.5"/>
<path d="M395 247 L610 261 L597 270 L382 257 Z" fill="#343d37" opacity="0.7"/>
<g stroke="#7c654b" stroke-width="2" opacity="0.46">
<path d="M397 273 L385 370"/>
<path d="M443 276 L433 374"/>
<path d="M490 280 L481 377"/>
<path d="M538 283 L528 380"/>
</g>
<path d="M360 346 L579 361" fill="none" stroke="#7c654b" stroke-width="2" opacity="0.45"/>
<text x="433" y="333" transform="rotate(4 433 333)" fill="#4b493e" font-family="Helvetica, Arial, sans-serif" font-size="15" font-weight="700" letter-spacing="4">LUMEN</text>
<g fill="none" stroke="var(--frame, #285044)" stroke-linecap="round" stroke-linejoin="round">
<path d="M195 402 L287 271 L350 410 Z" stroke-width="12"/>
<path d="M350 410 L614 383 L610 270" stroke-width="12"/>
<path d="M280 306 Q320 357 372 345 L590 320" stroke-width="10"/>
<path d="M614 383 L710 420" stroke-width="10"/>
<path d="M287 271 L270 220" stroke-width="8"/>
<path d="M610 270 L624 214 Q629 197 645 199 L674 205" stroke-width="8"/>
<path d="M351 429 L631 402" stroke-width="4" opacity="0.75"/>
</g>
<path d="M239 215 Q270 204 301 217 L295 230 L246 229 Z" fill="#25332d"/>
<path d="M668 204 L690 197" fill="none" stroke="#25332d" stroke-width="10" stroke-linecap="round"/>
<path d="M641 207 Q655 254 631 295" fill="none" stroke="#33433b" stroke-width="2"/>
<path d="M195 402 L348 394 M195 402 L350 426" fill="none" stroke="#35433c" stroke-width="2"/>
<circle cx="350" cy="410" r="24" fill="#d8d8cd" stroke="#293b33" stroke-width="5"/>
<circle cx="350" cy="410" r="7" fill="#293b33"/>
<path d="M350 410 L378 429 L401 429" fill="none" stroke="#293b33" stroke-width="5" stroke-linecap="round"/>
<path d="M350 410 L328 387 L306 387" fill="none" stroke="#293b33" stroke-width="4" stroke-linecap="round"/>
<path d="M351 367 L574 384" fill="none" stroke="#514d41" stroke-width="5"/>
<rect x="602" y="279" width="23" height="17" rx="5" fill="#ede4ba" stroke="#2e4037" stroke-width="3" transform="rotate(5 602 279)"/>
<path d="M163 288 H208" stroke="#283b32" stroke-width="5" stroke-linecap="round"/>
<rect x="126" y="277" width="20" height="12" rx="3" fill="#a84b38"/>
<path d="M417 428 L402 493" fill="none" stroke="#35433c" stroke-width="4" stroke-linecap="round"/>
</symbol>
<symbol id="bike-trike" viewBox="0 0 900 580">
<ellipse cx="455" cy="515" rx="366" ry="10" fill="#173a30" opacity="0.1"/>
<use href="#wheel-large" transform="translate(195 402)"/>
<g opacity="0.42"><use href="#wheel-small" transform="translate(742 407)"/></g>
<use href="#wheel-small" transform="translate(687 420)"/>
<g fill="none" stroke="var(--frame, #a95c43)" stroke-linecap="round" stroke-linejoin="round">
<path d="M91 387 A106 106 0 0 1 263 317" stroke-width="5"/>
<path d="M603 408 A88 88 0 0 1 745 364" stroke-width="5"/>
<path d="M118 286 H257 M135 286 L195 402 M239 286 L195 402" stroke-width="5"/>
</g>
<path d="M353 239 L622 252 L606 389 L340 371 Z" fill="var(--box, #b8b39f)" stroke="#53574e" stroke-width="2.5"/>
<path d="M353 239 L386 214 L649 226 L622 252 Z" fill="#686b60" stroke="#53574e" stroke-width="2.5"/>
<path d="M386 214 L649 226 L633 237 L371 225 Z" fill="#323d36" opacity="0.72"/>
<g stroke="#777566" stroke-width="2" opacity="0.5">
<path d="M398 241 L384 374"/>
<path d="M451 244 L438 377"/>
<path d="M505 246 L492 381"/>
<path d="M560 249 L547 384"/>
</g>
<path d="M346 342 L612 357" fill="none" stroke="#777566" stroke-width="2" opacity="0.5"/>
<path d="M374 281 H591 M371 301 H589" fill="none" stroke="#eee9d8" stroke-width="4" opacity="0.52"/>
<text x="439" y="330" transform="rotate(3 439 330)" fill="#454a42" font-family="Helvetica, Arial, sans-serif" font-size="15" font-weight="700" letter-spacing="4">LUMEN</text>
<g fill="none" stroke="var(--frame, #a95c43)" stroke-linecap="round" stroke-linejoin="round">
<path d="M195 402 L287 271 L350 410 Z" stroke-width="12"/>
<path d="M350 410 L624 383 L616 273" stroke-width="12"/>
<path d="M280 306 Q320 357 372 345 L348 330" stroke-width="10"/>
<path d="M624 383 L687 420 M624 383 L742 407" stroke-width="10"/>
<path d="M287 271 L270 220" stroke-width="8"/>
<path d="M616 273 L630 216 Q635 199 651 201 L680 207" stroke-width="8"/>
<path d="M351 429 L630 405" stroke-width="4" opacity="0.75"/>
</g>
<path d="M239 215 Q270 204 301 217 L295 230 L246 229 Z" fill="#25332d"/>
<path d="M674 206 L696 199" fill="none" stroke="#25332d" stroke-width="10" stroke-linecap="round"/>
<path d="M647 209 Q661 254 637 295" fill="none" stroke="#33433b" stroke-width="2"/>
<path d="M195 402 L348 394 M195 402 L350 426" fill="none" stroke="#35433c" stroke-width="2"/>
<circle cx="350" cy="410" r="24" fill="#d8d8cd" stroke="#293b33" stroke-width="5"/>
<circle cx="350" cy="410" r="7" fill="#293b33"/>
<path d="M350 410 L378 429 L401 429" fill="none" stroke="#293b33" stroke-width="5" stroke-linecap="round"/>
<path d="M350 410 L328 387 L306 387" fill="none" stroke="#293b33" stroke-width="4" stroke-linecap="round"/>
<path d="M340 371 L606 389" fill="none" stroke="#51544b" stroke-width="5"/>
<rect x="609" y="280" width="23" height="17" rx="5" fill="#ede4ba" stroke="#2e4037" stroke-width="3"/>
<rect x="126" y="277" width="20" height="12" rx="3" fill="#a84b38"/>
<path d="M417 428 L402 493" fill="none" stroke="#35433c" stroke-width="4" stroke-linecap="round"/>
</symbol>
</defs>
</svg>
<div class="announcement">
<div class="container">
<span><span class="announcement-dot"></span>Handbuilt in Copenhagen · Current build time 8–10 weeks</span>
<span class="announcement-right">Test rides Tuesday–Saturday · Refshaleøen</span>
</div>
</div>
<header class="site-header">
<div class="container nav-wrap">
<a class="logo" href="#main" aria-label="Lumen Cycles home">
<svg class="logo-mark" viewBox="0 0 40 40" fill="none" aria-hidden="true">
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="1.5"/>
<path d="M8 25H32M11 22A9 9 0 0 1 29 22M20 6V11M8.5 12L12 15.5M31.5 12L28 15.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M12 29H28" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="logo-type">LUMEN<small>CYCLES</small></span>
</a>
<nav class="main-nav" id="main-nav" aria-label="Main navigation">
<a href="#bikes">The bikes</a>
<a href="#process">Your build</a>
<a href="#workshop">The workshop</a>
<a href="#pricing">Pricing</a>
<a href="#faq">FAQ</a>
</nav>
<div class="header-actions">
<button class="button button-primary" type="button" data-dialog="test">Book a test ride</button>
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="main-nav" aria-label="Open navigation"><span></span></button>
</div>
</div>
</header>
<main id="main">
<section class="hero container" aria-labelledby="hero-title">
<div class="hero-copy">
<div class="eyebrow">Custom cargo bikes · Copenhagen</div>
<h1 id="hero-title">Carry what<br><em>matters.</em></h1>
<p class="hero-intro">A cargo bike built around your children, your work, your route—and no one else’s. Designed with you, then handmade in our Copenhagen workshop.</p>
<div class="hero-actions">
<button class="button button-primary" type="button" data-dialog="build">Start your build <span class="button-arrow">↗</span></button>
<button class="text-button" type="button" data-dialog="test">Or come for a test ride <span>→</span></button>
</div>
<div class="hero-proof">
<div><strong>From €4,200</strong>Complete custom builds</div>
<div><strong>5-year warranty</strong>On every Lumen frame</div>
<div><strong>4.9 / 5</strong>From our riding families</div>
</div>
</div>
<div class="hero-art">
<div class="art-heading">Lumen 02 / Family build<span>Two wheels · Electric assist</span></div>
<div class="build-number"><small>BUILD</small>248</div>
<svg class="hero-bike" id="hero-bike" style="--frame:#285044;--box:#c9a574" viewBox="0 0 900 580" role="img" aria-labelledby="hero-bike-title">
<title id="hero-bike-title">A moss-green Lumen cargo bike with a natural ash cargo box</title>
<use href="#bike-long"/>
</svg>
<div class="art-footer">
<div class="paint-control">
<div class="paint-label">Frame colour<span id="paint-name">Moss</span></div>
<div class="swatches" aria-label="Preview frame colour">
<button class="paint-dot active" type="button" style="--swatch:#285044" data-color="#285044" data-name="Moss" aria-label="Moss frame" aria-pressed="true"></button>
<button class="paint-dot" type="button" style="--swatch:#b96145" data-color="#b96145" data-name="Clay" aria-label="Clay frame" aria-pressed="false"></button>
<button class="paint-dot" type="button" style="--swatch:#303533" data-color="#303533" data-name="Ink" aria-label="Ink frame" aria-pressed="false"></button>
</div>
</div>
<div class="art-spec">Natural ash box<br>Gates belt drive</div>
</div>
</div>
</section>
<section class="trust-strip" aria-label="Ownership benefits">
<div class="container trust-grid">
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 21s7-5.1 7-11a7 7 0 1 0-14 0c0 5.9 7 11 7 11Z" stroke="currentColor" stroke-width="1.5"/><circle cx="12" cy="10" r="2.4" stroke="currentColor" stroke-width="1.5"/></svg>
Designed & built in Copenhagen
</div>
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3 20 6v5c0 5.2-3.2 8.5-8 10-4.8-1.5-8-4.8-8-10V6l8-3Z" stroke="currentColor" stroke-width="1.5"/><path d="m8.5 12 2.2 2.2 4.8-5" stroke="currentColor" stroke-width="1.5"/></svg>
5-year frame warranty
</div>
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle cx="7" cy="17" r="3.5" stroke="currentColor" stroke-width="1.5"/><circle cx="18" cy="17" r="3.5" stroke="currentColor" stroke-width="1.5"/><path d="m7 17 4-9h4l3 9M9 12h8M10 8H7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
Test ride before you decide
</div>
<div class="trust-item">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M14.5 6.5a4 4 0 0 0-5-5l2.2 2.2-3 3-2.2-2.2a4 4 0 0 0 5 5l7.5 7.5a2.1 2.1 0 0 0 3-3l-7.5-7.5Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
Lifetime workshop support
</div>
</div>
</section>
<section class="section container" id="bikes" aria-labelledby="bikes-title">
<div class="section-heading">
<div>
<div class="eyebrow">01 / The bikes</div>
<h2 id="bikes-title">A better fit<br><span class="serif">starts here.</span></h2>
</div>
<p>Two considered platforms, each made to order. Choose two wheels for a nimble, bike-like ride, or three for effortless stability when loading and at low speed.</p>
</div>
<div class="product-grid">
<article class="product-card">
<div class="product-art" style="--card-bg:#e2e5da">
<span class="product-tag">Made to order</span>
<span class="product-index">02 / Two-wheeler</span>
<svg class="product-bike" style="--frame:#285044;--box:#c9a574" viewBox="0 0 900 580" role="img" aria-label="Lumen 02 two-wheeled cargo bike">
<use href="#bike-long"/>
</svg>
</div>
<div class="product-body">
<div class="product-name-row">
<h3>Lumen 02</h3>
<span>Nimble by nature.</span>
</div>
<p class="product-description">The natural choice for school runs, daily errands and replacing the second car. Light steering, a low step-through and a box shaped around your passengers.</p>
<div class="product-specs">
<div><strong>2–3 seats</strong><span>Flexible family setup</span></div>
<div><strong>180 kg</strong><span>Maximum total load</span></div>
</div>
<div class="product-bottom">
<div class="product-price">Complete builds from<strong>€4,200</strong></div>
<button class="text-button" type="button" data-dialog="build" data-model="Lumen 02">Start with the 02 <span>→</span></button>
</div>
</div>
</article>
<article class="product-card">
<div class="product-art" style="--card-bg:#e8dcd2">
<span class="product-tag">Made to order</span>
<span class="product-index">03 / Three-wheeler</span>
<svg class="product-bike" style="--frame:#a95c43;--box:#b8b39f" viewBox="0 0 900 580" role="img" aria-label="Lumen 03 three-wheeled cargo bike">
<use href="#bike-trike"/>
</svg>
</div>
<div class="product-body">
<div class="product-name-row">
<h3>Lumen 03</h3>
<span>Room for the crew.</span>
</div>
<p class="product-description">Sure-footed, easy to load and reassuringly stable. Built for bigger families, mobile businesses and anyone who values effortless starts and stops.</p>
<div class="product-specs">
<div><strong>Up to 4 seats</strong><span>Adaptable cabin layout</span></div>
<div><strong>220 kg</strong><span>Maximum total load</span></div>
</div>
<div class="product-bottom">
<div class="product-price">Complete builds from<strong>€4,950</strong></div>
<button class="text-button" type="button" data-dialog="build" data-model="Lumen 03">Start with the 03 <span>→</span></button>
</div>
</div>
</article>
</div>
<div class="range-note">
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.3"/><path d="M10 9v5M10 6.2v.2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<span>Every build includes a personal fitting, hydraulic disc brakes, integrated lights, mudguards and your choice of colour. Electric assist is available on both platforms.</span>
</div>
</section>
<section class="section process" id="process" aria-labelledby="process-title">
<div class="container process-grid">
<div class="process-intro">
<div class="eyebrow">Your build / Start to finish</div>
<h2 id="process-title">From first hello<br><span class="serif">to first ride.</span></h2>
<p>Custom should feel exciting, not complicated. One small team guides you from the first sketch to the final brake adjustment.</p>
<div class="process-aside">“Bring the kids, the dog, the questions. We’ll work out the bike together.”</div>
</div>
<div class="process-steps">
<article class="process-step">
<span class="step-number">01</span>
<div>
<h3>Meet, talk, test ride</h3>
<p>Tell us what a normal Tuesday looks like. Try both platforms, test the turning circle and let your passengers climb aboard.</p>
</div>
<span class="step-time">45 minutes</span>
</article>
<article class="process-step">
<span class="step-number">02</span>
<div>
<h3>Design your Lumen</h3>
<p>We measure your fit and specify the carrying setup, gearing, assist and finish. You receive one clear specification and a fixed quote.</p>
</div>
<span class="step-time">Design session</span>
</article>
<article class="process-step">
<span class="step-number">03</span>
<div>
<h3>Built here in Copenhagen</h3>
<p>Your frame is welded and finished, then your bike is assembled by one mechanic. We send progress notes while it takes shape.</p>
</div>
<span class="step-time">8–10 weeks</span>
</article>
<article class="process-step">
<span class="step-number">04</span>
<div>
<h3>Fit, handover, ongoing care</h3>
<p>We fine-tune your position and practise the first route with you. A 500 km service is included, and our workshop remains your workshop.</p>
</div>
<span class="step-time">For the long run</span>
</article>
</div>
</div>
</section>
<section class="section container workshop-section" id="workshop" aria-labelledby="workshop-title">
<div class="workshop-shell">
<div class="workshop-drawing">
<svg viewBox="0 0 620 620" role="img" aria-labelledby="drawing-title">
<title id="drawing-title">Technical drawing of a Lumen frame in the Copenhagen workshop</title>
<defs>
<pattern id="drawing-grid" width="30" height="30" patternUnits="userSpaceOnUse">
<path d="M30 0H0V30" fill="none" stroke="#173a30" stroke-width="0.7" opacity="0.13"/>
</pattern>
</defs>
<rect width="620" height="620" fill="#cfd8cc"/>
<rect width="620" height="620" fill="url(#drawing-grid)"/>
<rect x="28" y="28" width="564" height="564" fill="none" stroke="#173a30" stroke-width="1" opacity="0.45"/>
<text x="48" y="59" fill="#173a30" font-family="Helvetica, Arial, sans-serif" font-size="10" font-weight="700" letter-spacing="2">LUMEN / FRAME GEOMETRY</text>
<text x="485" y="59" fill="#173a30" font-family="Helvetica, Arial, sans-serif" font-size="9" letter-spacing="1.5">DWG. 0248</text>
<circle cx="310" cy="317" r="194" fill="none" stroke="#173a30" stroke-width="1" opacity="0.16"/>
<circle cx="310" cy="317" r="151" fill="none" stroke="#173a30" stroke-width="1" stroke-dasharray="4 7" opacity="0.18"/>
<path d="M70 317H550M310 96V538" fill="none" stroke="#173a30" stroke-width="0.8" stroke-dasharray="5 6" opacity="0.25"/>
<g fill="none" stroke="#173a30" stroke-linecap="round" stroke-linejoin="round">
<circle cx="164" cy="398" r="77" stroke-width="2.2"/>
<circle cx="464" cy="398" r="77" stroke-width="2.2"/>
<circle cx="164" cy="398" r="5" stroke-width="2"/>
<circle cx="464" cy="398" r="5" stroke-width="2"/>
<path d="M164 398 250 246 327 398ZM250 246 390 272 327 398M390 272 464 398M250 246 235 205" stroke-width="5"/>
<path d="M220 204H255M390 272 400 224 433 213" stroke-width="4"/>
<circle cx="327" cy="398" r="20" stroke-width="2.5"/>
<path d="M164 398H327M327 398H464" stroke-width="1" stroke-dasharray="4 4" opacity="0.6"/>
</g>
<g fill="none" stroke="#173a30" stroke-width="1" opacity="0.7">
<path d="M132 493V518M496 493V518M132 507H496"/>
<path d="m132 507 9-4v8ZM496 507l-9-4v8Z" fill="#173a30"/>
<path d="M522 321V475M511 321H533M511 475H533"/>
<path d="M250 153V126M390 153V126M250 137H390"/>
</g>
<g fill="#173a30" font-family="Helvetica, Arial, sans-serif" font-size="9" letter-spacing="1.2">
<text x="278" y="527">1,140 MM / WHEELBASE</text>
<text x="536" y="402" transform="rotate(-90 536 402)">FRAME FIT / CUSTOM</text>
<text x="287" y="131">RIDER GEOMETRY</text>
<text x="49" y="558">TOLERANCE ± 1 MM</text>
<text x="406" y="558">REFSHALEØEN / CPH</text>
</g>
<circle cx="538" cy="91" r="29" fill="none" stroke="#173a30" stroke-width="1"/>
<text x="538" y="88" text-anchor="middle" fill="#173a30" font-family="Helvetica, Arial, sans-serif" font-size="7" letter-spacing="1">BUILT</text>
<text x="538" y="99" text-anchor="middle" fill="#173a30" font-family="Helvetica, Arial, sans-serif" font-size="7" letter-spacing="1">HERE</text>
</svg>
</div>
<div class="workshop-copy">
<div class="eyebrow">02 / The workshop</div>
<h2 id="workshop-title">Built here.<br><span class="serif">Backed here.</span></h2>
<p>No anonymous factory. The people who measure your bike are the people who weld, assemble and service it. You’re always welcome to see where yours is made.</p>
<ul class="workshop-list">
<li>Small-batch steel frames, welded in Copenhagen</li>
<li>Proven components from Bosch, Shimano and Gates</li>
<li>One mechanic responsible for your complete assembly</li>
<li>A free 500 km service and lifelong workshop support</li>
</ul>
<p class="workshop-sign">— Aksel & the Lumen workshop team</p>
</div>
</div>
</section>
<section class="section container owner-story" aria-label="Lumen owner story">
<div class="stars" aria-label="Five out of five stars">★★★★★</div>
<blockquote>“We expected to buy a cargo bike. We didn’t expect it to change how our whole family uses the city.”</blockquote>
<div class="owner-meta">Sofie & Martin · Lumen 02 owners · Østerbro</div>
<div class="story-stats">
<div><strong>6.4 km</strong><span>The daily school run</span></div>
<div><strong>2 + 1</strong><span>Two children, one dog</span></div>
<div><strong>1 fewer</strong><span>Car in the family</span></div>
</div>
</section>
<section class="section container pricing-section" id="pricing" aria-labelledby="pricing-title">
<div class="pricing-shell">
<div class="pricing-copy">
<div class="eyebrow">03 / Clear pricing</div>
<h2 id="pricing-title">A considered purchase.<br><span class="serif">No surprise extras.</span></h2>
<p>A custom bike should come with clarity. Your quote is fixed before we begin, and the essentials you need to ride away are already included—not added at the till.</p>
<div class="fixed-quote">
<svg viewBox="0 0 28 28" fill="none" aria-hidden="true"><path d="M7 3h10l4 4v18H7V3Z" stroke="currentColor" stroke-width="1.5"/><path d="M17 3v5h4M10 13h8M10 17h8M10 21h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
One specification. One fixed quote. No obligation.
</div>
</div>
<div class="price-box">
<div class="price-kicker">Complete custom builds</div>
<div class="price">From €4,200</div>
<div class="price-note">Including Danish VAT</div>
<ul class="included-list">
<li>Personal design session and rider fitting</li>
<li>Your colour and passenger or cargo setup</li>
<li>Integrated lights, mudguards and rain cover</li>
<li>500 km tune-up in our Copenhagen workshop</li>
<li>Five-year Lumen frame warranty</li>
</ul>
<button class="button button-light" type="button" data-dialog="build">Get your fixed quote <span class="button-arrow">↗</span></button>
<p class="electric-note">Electric builds from €5,450. Final price depends on your chosen specification.</p>
</div>
</div>
</section>
<section class="section container faq-section" id="faq" aria-labelledby="faq-title">
<div class="faq-grid">
<div class="faq-intro">
<div class="eyebrow">Good questions</div>
<h2 id="faq-title">Before you<br><span class="serif">come by.</span></h2>
<p>Still wondering about something? That’s what we’re here for. Call the workshop or bring your questions to a test ride.</p>
<div class="contact-note">
<strong>Talk to a bike builder, not a salesperson.</strong>
<span>+45 33 12 40 18</span>
<span>hej@lumencycles.dk</span>
</div>
</div>
<div class="faq-list">
<details open>
<summary>How long does a custom build take?</summary>
<div class="faq-answer">Most bikes are ready 8–10 weeks after you approve the design and specification. We confirm the timing before you pay a deposit and send workshop updates while your bike is being built.</div>
</details>
<details>
<summary>Can we try a bike with our children first?</summary>
<div class="faq-answer">Absolutely—and we recommend it. Book a 45-minute test ride and bring the whole crew. We have child seats, belts and rain covers ready, plus a quiet harbour-side route for trying starts, stops and turns.</div>
</details>
<details>
<summary>Do I need electric assist?</summary>
<div class="faq-answer">Not necessarily. It depends on your route, load and riding preferences. We’ll ride both versions with you and explain the differences in range, weight and maintenance before you choose.</div>
</details>
<details>
<summary>How do you make the box safe for children?</summary>
<div class="faq-answer">We fit the cabin around your children’s ages and sizes, with appropriate seating, three-point belts and a protected step. At handover, we cover weight limits, correct belt use and loading with the whole family.</div>
</details>
<details>
<summary>What happens if something needs adjusting?</summary>
<div class="faq-answer">Your first 500 km service is included. After that, you can book directly with the same Copenhagen team that assembled your bike. We keep your fit, frame and component details on file.</div>
</details>
<details>
<summary>Can you deliver outside Copenhagen?</summary>
<div class="faq-answer">Yes. We arrange handover throughout Denmark and regularly help riders from southern Sweden. Contact us with your location and we’ll include the practical options in your quote.</div>
</details>
</div>
</div>
</section>
<section class="closing" aria-labelledby="closing-title">
<div class="container closing-inner">
<div>
<h2 id="closing-title">Bring your everyday.<br><span class="serif">We’ll build around it.</span></h2>
<p>No hard sell. Just good coffee, honest advice and a few very good bikes.</p>
</div>
<div class="closing-cta">
<button class="button" type="button" data-dialog="test">Book your test ride <span class="button-arrow">↗</span></button>
<small>Tuesday–Saturday · Refshaleøen</small>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a class="logo" href="#main" aria-label="Lumen Cycles home">
<svg class="logo-mark" viewBox="0 0 40 40" fill="none" aria-hidden="true">
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="1.5"/>
<path d="M8 25H32M11 22A9 9 0 0 1 29 22M20 6V11M8.5 12L12 15.5M31.5 12L28 15.5M12 29H28" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span class="logo-type">LUMEN<small>CYCLES</small></span>
</a>
<p>Custom cargo bikes for families, businesses and the everyday in between. Designed and built in Copenhagen.</p>
</div>
<div class="footer-column">
<h3>Visit</h3>
<p>Refshalevej 163A<br>1432 København K<br>Denmark</p>
</div>
<div class="footer-column">
<h3>Workshop hours</h3>
<p>Tuesday–Friday · 09–17<br>Saturday · 10–14<br>Sunday–Monday · Closed</p>
</div>
<div class="footer-column">
<h3>Explore</h3>
<a href="#bikes">The bikes</a>
<a href="#process">Your build</a>
<a href="#workshop">The workshop</a>
<a href="#pricing">Pricing & warranty</a>
</div>
</div>
<div class="footer-bottom">
<span>© Lumen Cycles · Handmade in Copenhagen</span>
<span>55.6919° N / 12.6126° E</span>
</div>
</div>
</footer>
<dialog class="build-dialog" id="build-dialog" aria-labelledby="dialog-title">
<div class="dialog-inner">
<div class="dialog-top">
<svg class="logo-mark" viewBox="0 0 40 40" fill="none" aria-hidden="true">
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="1.5"/>
<path d="M8 25H32M11 22A9 9 0 0 1 29 22M20 6V11M8.5 12L12 15.5M31.5 12L28 15.5M12 29H28" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<button class="dialog-close" type="button" data-close-dialog aria-label="Close dialog">×</button>
</div>
<div id="dialog-form-view">
<h2 id="dialog-title">Let’s build your bike.</h2>
<p class="dialog-intro" id="dialog-intro">Start with a relaxed design conversation. Tell us a little about your everyday and we’ll take it from there.</p>
<form class="build-form" id="build-form">
<div class="field">
<label for="customer-name">Your name</label>
<input id="customer-name" name="name" type="text" autocomplete="name" required placeholder="First and last name">
</div>
<div class="field">
<label for="customer-email">Email address</label>
<input id="customer-email" name="email" type="email" autocomplete="email" required placeholder="you@example.com">
</div>
<div class="field">
<label for="customer-model">I’m interested in</label>
<select id="customer-model" name="model">
<option>Not sure yet</option>
<option>Lumen 02</option>
<option>Lumen 03</option>
</select>
</div>
<div class="field">
<label for="customer-notes">What will you be carrying? <span style="font-weight:400;text-transform:none;letter-spacing:0">(optional)</span></label>
<textarea id="customer-notes" name="notes" placeholder="Two children, a dog, weekend shopping…"></textarea>
</div>
<button class="button button-primary" id="dialog-submit" type="submit">Request my design session <span class="button-arrow">↗</span></button>
<p class="privacy-note">We’ll only use your details to reply about your build. No newsletters, no noise.</p>
</form>
</div>
<div class="form-success" id="form-success" hidden aria-live="polite">
<div class="success-icon">✓</div>
<h2>We’ll take it from here.</h2>
<p id="success-message">Thanks. We’ll email you within one working day to find a time that works.</p>
<button class="button button-primary" type="button" data-close-dialog>Back to Lumen</button>
</div>
</div>
</dialog>
<script>
(function () {
const menuButton = document.querySelector('.menu-toggle');
const navigation = document.getElementById('main-nav');
menuButton.addEventListener('click', function () {
const isOpen = menuButton.getAttribute('aria-expanded') === 'true';
menuButton.setAttribute('aria-expanded', String(!isOpen));
menuButton.setAttribute('aria-label', isOpen ? 'Open navigation' : 'Close navigation');
navigation.classList.toggle('open', !isOpen);
});
navigation.querySelectorAll('a').forEach(function (link) {
link.addEventListener('click', function () {
navigation.classList.remove('open');
menuButton.setAttribute('aria-expanded', 'false');
menuButton.setAttribute('aria-label', 'Open navigation');
});
});
const heroBike = document.getElementById('hero-bike');
const paintName = document.getElementById('paint-name');
const paintButtons = document.querySelectorAll('.paint-dot');
paintButtons.forEach(function (button) {
button.addEventListener('click', function () {
heroBike.style.setProperty('--frame', button.dataset.color);
paintName.textContent = button.dataset.name;
paintButtons.forEach(function (item) {
const selected = item === button;
item.classList.toggle('active', selected);
item.setAttribute('aria-pressed', String(selected));
});
});
});
document.querySelectorAll('.faq-list details').forEach(function (detail) {
detail.addEventListener('toggle', function () {
if (!detail.open) return;
document.querySelectorAll('.faq-list details').forEach(function (other) {
if (other !== detail) other.open = false;
});
});
});
const dialog = document.getElementById('build-dialog');
const form = document.getElementById('build-form');
const formView = document.getElementById('dialog-form-view');
const success = document.getElementById('form-success');
const dialogTitle = document.getElementById('dialog-title');
const dialogIntro = document.getElementById('dialog-intro');
const dialogSubmit = document.getElementById('dialog-submit');
const modelSelect = document.getElementById('customer-model');
const successMessage = document.getElementById('success-message');
let currentIntent = 'build';
function openDialog(intent, model) {
currentIntent = intent === 'test' ? 'test' : 'build';
form.reset();
formView.hidden = false;
success.hidden = true;
if (currentIntent === 'test') {
dialogTitle.textContent = 'Come for a test ride.';
dialogIntro.textContent = 'Bring the family and try both platforms on our quiet harbour-side route. There’s no obligation—just useful, hands-on advice.';
dialogSubmit.innerHTML = 'Request my test ride <span class="button-arrow">↗</span>';
} else {
dialogTitle.textContent = 'Let’s build your bike.';
dialogIntro.textContent = 'Start with a relaxed design conversation. Tell us a little about your everyday and we’ll take it from there.';
dialogSubmit.innerHTML = 'Request my design session <span class="button-arrow">↗</span>';
}
modelSelect.value = model || 'Not sure yet';
if (typeof dialog.showModal === 'function') {
dialog.showModal();
} else {
dialog.setAttribute('open', '');
}
document.body.classList.add('modal-open');
window.setTimeout(function () {
document.getElementById('customer-name').focus();
}, 50);
}
document.querySelectorAll('[data-dialog]').forEach(function (button) {
button.addEventListener('click', function () {
openDialog(button.dataset.dialog, button.dataset.model);
});
});
function closeDialog() {
if (typeof dialog.close === 'function') {
dialog.close();
} else {
dialog.removeAttribute('open');
document.body.classList.remove('modal-open');
}
}
document.querySelectorAll('[data-close-dialog]').forEach(function (button) {
button.addEventListener('click', closeDialog);
});
dialog.addEventListener('close', function () {
document.body.classList.remove('modal-open');
});
dialog.addEventListener('click', function (event) {
if (event.target !== dialog) return;
const rect = dialog.getBoundingClientRect();
const inside = event.clientX >= rect.left && event.clientX <= rect.right &&
event.clientY >= rect.top && event.clientY <= rect.bottom;
if (!inside) closeDialog();
});
form.addEventListener('submit', function (event) {
event.preventDefault();
const name = document.getElementById('customer-name').value.trim();
const firstName = name.split(/\s+/)[0] || 'there';
const activity = currentIntent === 'test' ? 'test ride' : 'design session';
successMessage.textContent = 'Thanks, ' + firstName + '. We’ll email you within one working day to arrange your ' + activity + '.';
formView.hidden = true;
success.hidden = false;
success.querySelector('button').focus();
});
})();
</script>
</body>
</html>

