Run details
- Model
- openai/gpt-6.1-terra-pro
- Route
- OpenRouter API, one user message
- Served by
- OpenAI
- Effort
- medium, OpenRouter's default for this model
- Limits
- 60 min · 128,000 output tokens (the model's limit)
- Date
- 27 Oct 2026
- Time
- 2 min 27 s
- Size
- 33 kB
- Tokens
- 25,092 in, 23,817 out (1,343 of them thinking)
- List price
- $0.14 at today's price ($1 in / $5 out per M)
- Paid
- $0.14
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
33 kB 664 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f3f1e9">
<title>Lumen Cycles — Cargo bikes for the way you live</title>
<style>
:root {
--paper: #f3f1e9;
--white: #faf9f4;
--ink: #20251f;
--muted: #697067;
--line: #d6d9ce;
--lime: #d6ec77;
--orange: #e7784f;
--bike: #d1e67b;
--radius: 4px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--paper);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid #df714b; outline-offset: 4px; }
.wrap { width: min(100% - 80px, 1440px); margin-inline: auto; }
.eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
line-height: 1.3;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--orange); border-radius: 50%; flex: none; }
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 36px;
min-height: 54px;
padding: 0 20px;
border: 1px solid var(--ink);
border-radius: var(--radius);
background: var(--ink);
color: var(--white);
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .2s, color .2s, transform .2s;
}
.button:hover { background: #3a4438; transform: translateY(-2px); }
.button.light { background: transparent; color: var(--ink); }
.button.light:hover { background: var(--ink); color: var(--white); }
.arrow { font-size: 19px; line-height: 1; font-weight: 400; }
/* Navigation */
.announcement {
min-height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: var(--ink);
color: #edf0df;
font-size: 11px;
letter-spacing: .04em;
text-align: center;
padding: 7px 20px;
}
.announcement span { color: var(--lime); margin-right: 8px; }
.site-header { position: relative; z-index: 10; background: var(--paper); }
.nav {
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 23px; letter-spacing: -.075em; }
.brand-mark { width: 27px; height: 27px; }
.nav-links { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 600; }
.nav-links a:not(.nav-cta):hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-cta { border: 1px solid var(--ink); border-radius: var(--radius); padding: 12px 16px; }
.nav-cta:hover { background: var(--ink); color: white; }
.menu-toggle { display: none; border: 0; background: none; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; width: 24px; margin: 5px 0; background: var(--ink); }
/* Hero */
.hero { padding-top: 67px; }
.hero-top { display: grid; grid-template-columns: 1.4fr .6fr; gap: 30px; align-items: end; }
h1, h2, h3, p { margin-top: 0; }
h1 {
margin: 22px 0 0;
font-size: clamp(58px, 7.4vw, 112px);
line-height: .91;
letter-spacing: -.075em;
font-weight: 600;
}
h1 em { font-style: normal; color: #838c7a; }
.hero-intro { max-width: 320px; justify-self: end; padding-bottom: 3px; }
.hero-intro p { font-size: 16px; line-height: 1.55; color: #515a50; margin-bottom: 24px; }
.hero-visual {
position: relative;
overflow: hidden;
margin-top: 48px;
min-height: 460px;
background: #dfe4d5;
border-radius: 3px;
}
.hero-visual::before {
content: "";
position: absolute;
width: 52%; aspect-ratio: 1;
border-radius: 50%;
background: #e9eddf;
left: 24%; top: -30%;
}
.visual-label {
position: absolute;
top: 28px; left: 30px;
z-index: 2;
font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.visual-label span { display: block; color: #707a6d; margin-top: 7px; font-weight: 400; letter-spacing: .03em; text-transform: none; }
.visual-stamp {
position: absolute; right: 30px; top: 28px; z-index: 2;
width: 80px; height: 80px;
border: 1px solid #8e9a88; border-radius: 50%;
display: grid; place-content: center; text-align: center;
font-size: 9px; line-height: 1.4; letter-spacing: .09em; font-weight: 700;
transform: rotate(12deg);
}
.bike-art { position: relative; z-index: 1; width: min(100%, 1050px); margin: 8px auto -4px; }
.bike-frame { stroke: var(--bike); transition: stroke .3s; }
.hero-bottom {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 0 22px;
border-bottom: 1px solid var(--line);
color: #586157; font-size: 12px;
}
.hero-bottom strong { color: var(--ink); font-weight: 700; }
.hero-bottom .scroll-note { display: flex; gap: 15px; align-items: center; }
/* Intro */
.intro { padding: 130px 0 125px; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.intro h2, .section-heading h2, .build-copy h2, .closing h2 {
font-size: clamp(38px, 4.6vw, 68px);
letter-spacing: -.055em;
line-height: 1.03;
font-weight: 600;
}
.intro h2 { max-width: 790px; margin-bottom: 28px; }
.intro h2 span { color: #8b9484; }
.intro-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 790px; }
.intro-copy p { color: #626b60; font-size: 15px; line-height: 1.65; margin-bottom: 0; }
/* Details */
.details { background: #e5e8dd; padding: 105px 0 110px; }
.section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 48px; }
.section-heading h2 { margin: 18px 0 0; }
.section-heading > p { color: #626b60; line-height: 1.6; max-width: 290px; font-size: 14px; margin-bottom: 3px; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.detail-card { background: var(--white); min-width: 0; }
.detail-illustration { height: 240px; display: grid; place-items: center; overflow: hidden; }
.detail-illustration svg { width: 100%; height: 100%; }
.detail-card:nth-child(1) .detail-illustration { background: #d2ddc8; }
.detail-card:nth-child(2) .detail-illustration { background: #e8d8ca; }
.detail-card:nth-child(3) .detail-illustration { background: #d9ded7; }
.detail-body { padding: 25px 26px 30px; }
.detail-number { color: #8d9888; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.detail-body h3 { margin: 21px 0 10px; font-size: 22px; letter-spacing: -.04em; }
.detail-body p { margin: 0; font-size: 14px; line-height: 1.6; color: #697168; max-width: 320px; }
/* Process */
.process { padding: 120px 0; display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; }
.process h2 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -.055em; font-weight: 600; margin: 20px 0 25px; }
.process-lead p { font-size: 15px; line-height: 1.65; color: #626b60; max-width: 330px; }
.steps { border-top: 1px solid #bfc6ba; }
.step { display: grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 25px 0; border-bottom: 1px solid #bfc6ba; }
.step > span { font-size: 12px; color: #899487; }
.step h3 { font-size: 19px; letter-spacing: -.035em; margin: 0 0 8px; }
.step p { color: #687167; font-size: 14px; line-height: 1.6; margin: 0; max-width: 470px; }
/* Configurator */
.build { background: var(--ink); color: var(--white); padding: 100px 0; }
.build-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.build-copy h2 { margin: 22px 0; max-width: 490px; }
.build-copy > p { color: #b5beb0; line-height: 1.65; max-width: 380px; font-size: 15px; }
.build-note { margin-top: 80px; padding-top: 22px; border-top: 1px solid #4d584b; color: #b5beb0; font-size: 12px; line-height: 1.6; max-width: 380px; }
.build-note strong { color: var(--white); display: block; margin-bottom: 4px; }
.config { background: #f4f4ec; color: var(--ink); padding: 32px; }
.config-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 25px; border-bottom: 1px solid #d8ddd2; }
.config-head h3 { font-size: 25px; letter-spacing: -.04em; margin: 0 0 6px; }
.config-head p { color: #737c70; font-size: 12px; margin: 0; }
.config-tag { padding: 7px 9px; background: var(--lime); font-size: 10px; font-weight: 700; white-space: nowrap; }
fieldset { padding: 24px 0; margin: 0; border: 0; border-bottom: 1px solid #d8ddd2; }
legend { padding: 24px 0 0; font-size: 12px; font-weight: 700; }
.swatches { display: flex; gap: 14px; align-items: center; }
.swatch {
width: 36px; height: 36px; padding: 0; border: 3px solid #f4f4ec;
outline: 1px solid transparent; border-radius: 50%; cursor: pointer;
}
.swatch[aria-pressed="true"] { outline-color: var(--ink); }
.color-name { margin-left: 5px; color: #687167; font-size: 13px; }
.option { display: flex; align-items: start; gap: 12px; cursor: pointer; font-size: 13px; }
.option + .option { margin-top: 17px; }
.option input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #303a2e; }
.option span { flex: 1; }
.option small { display: block; color: #7b8478; margin-top: 4px; line-height: 1.4; font-size: 12px; }
.option b { font-size: 12px; white-space: nowrap; }
.estimate { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 24px 0; }
.estimate-label { font-size: 12px; font-weight: 700; }
.estimate-label small { display: block; font-weight: 400; color: #7b8478; margin-top: 5px; }
.price { font-size: 29px; letter-spacing: -.05em; font-weight: 600; white-space: nowrap; }
.config .button { width: 100%; justify-content: space-between; }
.copy-status { min-height: 1.4em; margin: 10px 0 0; color: #596457; font-size: 12px; line-height: 1.4; }
.email-note { margin: 8px 0 0; color: #737c70; font-size: 12px; line-height: 1.5; }
.email-note a { text-decoration: underline; text-underline-offset: 3px; }
/* Footer */
.closing { background: var(--lime); padding: 80px 0; }
.closing-inner { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.closing h2 { margin: 19px 0 0; }
footer { background: var(--ink); color: #e9ede4; padding: 52px 0 24px; }
.footer-main { display: flex; justify-content: space-between; gap: 35px; padding-bottom: 60px; }
.footer-brand p { color: #a7b0a3; font-size: 13px; line-height: 1.6; margin: 16px 0 0; }
.footer-links { display: flex; gap: 80px; }
.footer-links div { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.footer-links strong { color: #98a493; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { border-top: 1px solid #4b5648; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; color: #9ea99a; font-size: 11px; }
@media (max-width: 800px) {
.wrap { width: min(100% - 40px, 1440px); }
.nav { height: 68px; }
.menu-toggle { display: block; }
.nav-links {
display: none; position: absolute; left: 0; right: 0; top: 68px;
background: var(--paper); padding: 22px 20px 28px; border-bottom: 1px solid var(--line);
flex-direction: column; align-items: stretch; gap: 20px;
}
.nav-links.open { display: flex; }
.nav-cta { text-align: center; }
.hero { padding-top: 48px; }
.hero-top { grid-template-columns: 1fr; gap: 24px; }
.hero-intro { justify-self: start; max-width: 450px; }
.hero-visual { margin-top: 35px; min-height: 0; }
.bike-art { width: 115%; max-width: none; margin-left: -7%; margin-top: 65px; }
.visual-stamp { width: 60px; height: 60px; font-size: 7px; right: 18px; top: 18px; }
.visual-label { left: 18px; top: 20px; }
.intro { padding: 80px 0; grid-template-columns: 1fr; gap: 25px; }
.details { padding: 75px 0; }
.detail-grid { grid-template-columns: 1fr; }
.detail-card { display: grid; grid-template-columns: 1fr 1fr; }
.detail-illustration { height: 220px; }
.detail-body { align-self: center; }
.process { padding: 80px 0; grid-template-columns: 1fr; gap: 35px; }
.build { padding: 75px 0; }
.build-inner { grid-template-columns: 1fr; gap: 35px; }
.build-note { margin-top: 30px; }
}
@media (max-width: 520px) {
h1 { font-size: clamp(52px, 12vw, 68px); }
.hero-bottom { align-items: start; line-height: 1.5; gap: 20px; }
.hero-bottom .scroll-note { text-align: right; }
.intro-copy { grid-template-columns: 1fr; gap: 16px; }
.section-heading { display: block; }
.section-heading > p { margin-top: 20px; }
.detail-card { display: block; }
.detail-illustration { height: 210px; }
.detail-body { padding: 23px; }
.config { padding: 22px; }
.closing-inner { display: block; }
.closing .button { margin-top: 28px; }
.footer-main { display: block; }
.footer-links { margin-top: 40px; gap: 55px; }
.footer-bottom { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; }
}
</style>
</head>
<body>
<div class="announcement"><span>●</span> Built to order in Copenhagen. Made for everywhere.</div>
<header class="site-header">
<nav class="nav wrap" aria-label="Main navigation">
<a class="brand" href="#top" aria-label="Lumen Cycles home">
<svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true">
<circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.5"/>
<path d="M16 5v22M5 16h22M8.2 8.2l15.6 15.6M23.8 8.2 8.2 23.8" stroke="currentColor" stroke-width="1.7"/>
<circle cx="16" cy="16" r="3.5" fill="currentColor"/>
</svg>
lumen<span style="font-weight:400;letter-spacing:-.06em">cycles</span>
</a>
<button class="menu-toggle" type="button" aria-label="Open menu" aria-expanded="false" aria-controls="nav-links"><span></span><span></span></button>
<div class="nav-links" id="nav-links">
<a href="#bike">The bike</a>
<a href="#process">Our process</a>
<a href="#build">Build yours</a>
<a class="nav-cta" href="#build">Start a build <span aria-hidden="true">↗</span></a>
</div>
</nav>
</header>
<main id="top">
<section class="hero wrap" aria-labelledby="hero-title">
<div class="hero-top">
<div>
<div class="eyebrow">A little more life on two wheels</div>
<h1 id="hero-title">Carry what<br><em>matters.</em></h1>
</div>
<div class="hero-intro">
<p>Thoughtfully built cargo bikes for the big, small, everyday things. Made to order in Copenhagen, for a life in motion.</p>
<a class="button" href="#build">Make it yours <span class="arrow" aria-hidden="true">↗</span></a>
</div>
</div>
<div class="hero-visual" aria-label="Illustration of the Lumen cargo bike">
<div class="visual-label">The Lumen One <span>Long on possibility. Short on fuss.</span></div>
<div class="visual-stamp">DESIGNED<br>FOR THE<br>EVERYDAY</div>
<svg class="bike-art" viewBox="0 0 1000 500" role="img" aria-label="A long-front cargo bicycle with a pale green frame and wooden cargo box">
<defs>
<pattern id="spokes" width="1" height="1"></pattern>
</defs>
<!-- Ground shadow -->
<ellipse cx="493" cy="433" rx="397" ry="15" fill="#b8c3b0" opacity=".45"/>
<!-- Wheels -->
<g fill="none">
<circle cx="204" cy="342" r="93" stroke="#252c27" stroke-width="16"/>
<circle cx="204" cy="342" r="76" stroke="#abb4a6" stroke-width="2"/>
<circle cx="776" cy="342" r="93" stroke="#252c27" stroke-width="16"/>
<circle cx="776" cy="342" r="76" stroke="#abb4a6" stroke-width="2"/>
<g stroke="#a6afa2" stroke-width="1.2">
<path d="M204 266v152M128 342h152M150 288l108 108M258 288 150 396M175 272l58 140M134 313l140 58M134 371l140-58M175 412l58-140"/>
<path d="M776 266v152M700 342h152M722 288l108 108M830 288 722 396M747 272l58 140M706 313l140 58M706 371l140-58M747 412l58-140"/>
</g>
<circle cx="204" cy="342" r="9" fill="#59665a" stroke="#e3e8de" stroke-width="3"/>
<circle cx="776" cy="342" r="9" fill="#59665a" stroke="#e3e8de" stroke-width="3"/>
</g>
<!-- Rear rack and mudguards -->
<g fill="none" stroke="#3b453e" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
<path d="M691 298q26-57 85-57t88 60"/>
<path d="M126 301q25-59 78-59t82 57"/>
<path d="M718 250h114l-11 44M718 250l28 48"/>
</g>
<!-- Frame -->
<g class="bike-frame" fill="none" stroke-width="16" stroke-linejoin="round" stroke-linecap="round">
<path d="M776 342H558L502 216 776 342 669 210 558 342"/>
<path d="M558 342H352L301 282"/>
<path d="M352 342 405 211"/>
</g>
<g fill="none" stroke="#52604f" stroke-width="3">
<path d="M776 342H558L669 210"/>
<path d="M558 342l-48 35M558 342l48-35"/>
</g>
<!-- Steering -->
<path d="M402 221l28-112h54" fill="none" stroke="#38433b" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M480 109h28" stroke="#242b26" stroke-width="12" stroke-linecap="round"/>
<path d="M430 113q39 28 36 75" fill="none" stroke="#56615a" stroke-width="2"/>
<!-- Seat -->
<path d="M669 210l-10-45" stroke="#39433c" stroke-width="8"/>
<path d="M626 159q28-11 62-2 5 2 1 8-28 7-62 1-8-2-1-7Z" fill="#303a32"/>
<!-- Cargo box -->
<path d="M135 152h277l-25 139H159Z" fill="#bb825c"/>
<path d="M143 160h260l-22 124H166Z" fill="#d8ab80"/>
<path d="M155 167h235M159 200h225M164 239h214M169 277h204" fill="none" stroke="#be8c66" stroke-width="2" opacity=".7"/>
<path d="M135 152h277" stroke="#596b54" stroke-width="10" stroke-linecap="round"/>
<path d="M195 152v-19q0-7 7-7h142q7 0 7 7v19" fill="none" stroke="#596b54" stroke-width="7"/>
<path d="M169 180h23M169 186h15" stroke="#9c6d50" stroke-width="2" opacity=".6"/>
<text x="239" y="228" fill="#705f4b" font-size="20" font-family="Arial, sans-serif" font-weight="bold" letter-spacing="-1">lumen</text>
<!-- Crank and pedals -->
<circle cx="558" cy="342" r="25" fill="#dce3d5" stroke="#4c594d" stroke-width="5"/>
<circle cx="558" cy="342" r="7" fill="#4c594d"/>
<path d="M558 342l-27 29" stroke="#4c594d" stroke-width="6" stroke-linecap="round"/>
<path d="M518 373h26" stroke="#303a32" stroke-width="7" stroke-linecap="round"/>
<!-- Front light -->
<rect x="110" y="260" width="20" height="13" rx="5" fill="#f7edbc" stroke="#536050" stroke-width="3"/>
</svg>
</div>
<div class="hero-bottom">
<div><strong>01 / THE LUMEN ONE</strong> · Your everyday, expanded.</div>
<div class="scroll-note">Made for the long way round <span aria-hidden="true">↓</span></div>
</div>
</section>
<section class="intro wrap" id="bike">
<div class="eyebrow">A better kind of everyday</div>
<div>
<h2>Less car. More city.<br><span>More room for living.</span></h2>
<div class="intro-copy">
<p>School runs, market hauls, that enormous houseplant. The Lumen One makes space for all of it, without making a big thing of it.</p>
<p>We bring together useful design, dependable components and a build that's personal to you. Because the best bike is the one you want to ride every day.</p>
</div>
</div>
</section>
<section class="details" aria-labelledby="details-title">
<div class="wrap">
<div class="section-heading">
<div>
<div class="eyebrow">Considered from the ground up</div>
<h2 id="details-title">The details do<br>the heavy lifting.</h2>
</div>
<p>Simple where it can be. Clever where it counts. Every part has a reason to be there.</p>
</div>
<div class="detail-grid">
<article class="detail-card">
<div class="detail-illustration" aria-hidden="true">
<svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice">
<circle cx="210" cy="120" r="102" fill="#e0e8d8"/>
<path d="M60 69h260l-27 133H86Z" fill="#b8825d"/>
<path d="M70 77h240l-24 116H93Z" fill="#d8ae86"/>
<path d="M77 108h227M83 148h213M89 185h200" stroke="#bf916c" stroke-width="2"/>
<path d="M60 69h260" stroke="#536650" stroke-width="10" stroke-linecap="round"/>
<path d="M115 69V52q0-8 8-8h130q8 0 8 8v17" fill="none" stroke="#536650" stroke-width="7"/>
<text x="164" y="145" fill="#816a52" font-size="22" font-weight="bold" font-family="Arial" letter-spacing="-1">lumen</text>
</svg>
</div>
<div class="detail-body">
<span class="detail-number">01 / ROOM TO MOVE</span>
<h3>Bring the whole day.</h3>
<p>A generous front box keeps your cargo in sight and your plans wide open. Groceries, gear, or a passenger setup of your choosing.</p>
</div>
</article>
<article class="detail-card">
<div class="detail-illustration" aria-hidden="true">
<svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice">
<circle cx="205" cy="120" r="100" fill="#f0e3d8"/>
<circle cx="208" cy="127" r="86" fill="none" stroke="#354038" stroke-width="13"/>
<circle cx="208" cy="127" r="69" fill="none" stroke="#a8b0a5" stroke-width="2"/>
<g stroke="#a8b0a5" stroke-width="1.2">
<path d="M208 58v138M139 127h138M159 78l98 98M257 78l-98 98M182 63l52 128M144 101l128 52M144 153l128-52M182 191l52-128"/>
</g>
<path d="M208 127 303 72" stroke="#cbdf89" stroke-width="14" stroke-linecap="round"/>
<circle cx="208" cy="127" r="13" fill="#536051" stroke="#dae1d4" stroke-width="3"/>
<path d="M134 81q25-43 74-43t75 45" fill="none" stroke="#465247" stroke-width="5"/>
</svg>
</div>
<div class="detail-body">
<span class="detail-number">02 / BUILT TO LAST</span>
<h3>Made for the miles.</h3>
<p>A sturdy frame and serviceable components are chosen for real life: wet mornings, busy streets and years of use.</p>
</div>
</article>
<article class="detail-card">
<div class="detail-illustration" aria-hidden="true">
<svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice">
<circle cx="201" cy="120" r="100" fill="#e8ebe4"/>
<path d="M100 185 245 185 190 73 100 185" fill="none" stroke="#c7dd83" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M190 73 290 185H245" fill="none" stroke="#c7dd83" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M190 73l-9-34" stroke="#445047" stroke-width="8"/>
<path d="M155 35q23-8 52-2 6 2 2 8-28 6-55 0-7-2 1-6Z" fill="#303a32"/>
<circle cx="245" cy="185" r="23" fill="#e1e7dd" stroke="#536151" stroke-width="5"/>
<path d="M245 185l-22 22M212 208h23" stroke="#536151" stroke-width="5" stroke-linecap="round"/>
</svg>
</div>
<div class="detail-body">
<span class="detail-number">03 / YOUR KIND OF RIDE</span>
<h3>Built around you.</h3>
<p>Choose the finish and the extras that fit your routine. We assemble each bike to order, with the details worked out together.</p>
</div>
</article>
</div>
</div>
</section>
<section class="process wrap" id="process">
<div class="process-lead">
<div class="eyebrow">From our workshop to your world</div>
<h2>Good things<br>take a little care.</h2>
<p>No warehouse full of one-size-fits-all bikes. Just a thoughtful process, and a bike made for the life you'll put on it.</p>
</div>
<div class="steps">
<div class="step"><span>01</span><div><h3>Tell us how you ride</h3><p>Start with your daily routes, your cargo and the people coming along. We'll help you find the right setup.</p></div></div>
<div class="step"><span>02</span><div><h3>Make it yours</h3><p>Choose a finish and useful extras. We'll confirm the details, final price and expected timing with you before anything is built.</p></div></div>
<div class="step"><span>03</span><div><h3>Meet your new everyday</h3><p>We assemble and check your bike in Copenhagen, then arrange the handover with you. Ready for the first of many rides.</p></div></div>
</div>
</section>
<section class="build" id="build" aria-labelledby="build-title">
<div class="wrap build-inner">
<div class="build-copy">
<div class="eyebrow">A good place to start</div>
<h2 id="build-title">Let's make it yours.</h2>
<p>Every Lumen starts with a conversation. Play with a few options to get an indicative price, then share your ideas with us.</p>
<div class="build-note">
<strong>Made to order, not made in a hurry.</strong>
We'll discuss availability, delivery and a build timeline when we confirm your specification.
</div>
</div>
<div class="config">
<div class="config-head">
<div><h3>The Lumen One</h3><p>Custom cargo bike · Base build</p></div>
<span class="config-tag">FROM €3,990</span>
</div>
<fieldset>
<legend>01 Choose your frame colour</legend>
<div class="swatches" aria-label="Frame colour">
<button type="button" class="swatch" style="background:#d1e67b" data-color="Meadow" data-hex="#d1e67b" aria-label="Meadow" aria-pressed="true"></button>
<button type="button" class="swatch" style="background:#647768" data-color="Forest" data-hex="#647768" aria-label="Forest" aria-pressed="false"></button>
<button type="button" class="swatch" style="background:#d78668" data-color="Clay" data-hex="#d78668" aria-label="Clay" aria-pressed="false"></button>
<button type="button" class="swatch" style="background:#dedbd0" data-color="Chalk" data-hex="#dedbd0" aria-label="Chalk" aria-pressed="false"></button>
<span class="color-name" id="color-name">Meadow</span>
</div>
</fieldset>
<fieldset>
<legend>02 Add what you need</legend>
<label class="option">
<input type="checkbox" value="450" data-name="Passenger kit">
<span>Passenger kit<small>Bench and belts for little co-pilots</small></span><b>+ €450</b>
</label>
<label class="option">
<input type="checkbox" value="290" data-name="Rain canopy">
<span>Rain canopy<small>A little shelter for the Copenhagen forecast</small></span><b>+ €290</b>
</label>
<label class="option">
<input type="checkbox" value="120" data-name="Cargo cover">
<span>Cargo cover<small>Keep your everyday essentials tucked away</small></span><b>+ €120</b>
</label>
</fieldset>
<div class="estimate" aria-live="polite">
<div class="estimate-label">Indicative total<small>Includes VAT · delivery not included</small></div>
<div class="price" id="price">€3,990</div>
</div>
<button type="button" class="button" id="copy-build">Copy my build <span class="arrow" aria-hidden="true">↗</span></button>
<p class="copy-status" id="copy-status" role="status"></p>
<p class="email-note">Paste your build into an email to <a href="mailto:hello@lumencycles.dk">hello@lumencycles.dk</a>. No order or payment is placed here.</p>
</div>
</div>
</section>
<section class="closing">
<div class="wrap closing-inner">
<div>
<div class="eyebrow">See where two wheels can take you</div>
<h2>Here's to the<br>long way home.</h2>
</div>
<a class="button" href="#build">Start your build <span class="arrow" aria-hidden="true">↗</span></a>
</div>
</section>
</main>
<footer>
<div class="wrap">
<div class="footer-main">
<div class="footer-brand">
<a class="brand" href="#top">
<svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" stroke-width="2.5"/><path d="M16 5v22M5 16h22M8.2 8.2l15.6 15.6M23.8 8.2 8.2 23.8" stroke="currentColor" stroke-width="1.7"/><circle cx="16" cy="16" r="3.5" fill="currentColor"/></svg>
lumen<span style="font-weight:400;letter-spacing:-.06em">cycles</span>
</a>
<p>Custom cargo bikes for a fuller everyday.<br>Built to order in Copenhagen, Denmark.</p>
</div>
<div class="footer-links">
<div><strong>Explore</strong><a href="#bike">The bike</a><a href="#process">Our process</a><a href="#build">Build yours</a></div>
<div><strong>Say hello</strong><a href="mailto:hello@lumencycles.dk">hello@lumencycles.dk ↗</a><span>Copenhagen, Denmark</span></div>
</div>
</div>
<div class="footer-bottom"><span>© <span id="year">2026</span> Lumen Cycles</span><span>Made for the everyday adventure.</span></div>
</div>
</footer>
<script>
(function () {
var toggle = document.querySelector('.menu-toggle');
var nav = document.getElementById('nav-links');
toggle.addEventListener('click', function () {
var open = toggle.getAttribute('aria-expanded') !== 'true';
toggle.setAttribute('aria-expanded', String(open));
toggle.setAttribute('aria-label', open ? 'Close menu' : 'Open menu');
nav.classList.toggle('open', open);
});
nav.addEventListener('click', function (event) {
if (event.target.closest('a')) {
nav.classList.remove('open');
toggle.setAttribute('aria-expanded', 'false');
toggle.setAttribute('aria-label', 'Open menu');
}
});
var swatches = Array.from(document.querySelectorAll('.swatch'));
var options = Array.from(document.querySelectorAll('.option input'));
var color = 'Meadow';
var price = document.getElementById('price');
var status = document.getElementById('copy-status');
function total() {
return options.reduce(function (sum, option) {
return sum + (option.checked ? Number(option.value) : 0);
}, 3990);
}
function format(value) {
return '€' + value.toLocaleString('en-IE');
}
swatches.forEach(function (swatch) {
swatch.addEventListener('click', function () {
swatches.forEach(function (item) { item.setAttribute('aria-pressed', 'false'); });
swatch.setAttribute('aria-pressed', 'true');
color = swatch.dataset.color;
document.getElementById('color-name').textContent = color;
document.documentElement.style.setProperty('--bike', swatch.dataset.hex);
status.textContent = '';
});
});
options.forEach(function (option) {
option.addEventListener('change', function () {
price.textContent = format(total());
status.textContent = '';
});
});
document.getElementById('copy-build').addEventListener('click', function () {
var selected = options.filter(function (option) { return option.checked; })
.map(function (option) { return option.dataset.name; });
var text = 'Hello Lumen Cycles,\n\nI would like to discuss a Lumen One build:\n'
+ 'Frame colour: ' + color + '\n'
+ 'Extras: ' + (selected.length ? selected.join(', ') : 'None selected') + '\n'
+ 'Indicative total: ' + format(total()) + ' including VAT, excluding delivery.\n\n'
+ 'Please tell me more about availability and next steps.';
function fallbackCopy() {
var area = document.createElement('textarea');
area.value = text;
area.setAttribute('readonly', '');
area.style.position = 'fixed';
area.style.left = '-9999px';
document.body.appendChild(area);
area.select();
var success = false;
try { success = document.execCommand('copy'); } catch (error) {}
document.body.removeChild(area);
if (success) {
status.textContent = 'Copied. Paste it into an email to get the conversation started.';
} else {
status.textContent = 'Couldn’t copy automatically. Please email us with your chosen options.';
}
}
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text).then(function () {
status.textContent = 'Copied. Paste it into an email to get the conversation started.';
}).catch(fallbackCopy);
} else {
fallbackCopy();
}
});
document.getElementById('year').textContent = new Date().getFullYear();
})();
</script>
</body>
</html>

