Run details
- Model
- openai/gpt-6.1-terra
- 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 15 s
- Size
- 36 kB
- Tokens
- 93 in, 12,186 out (695 of them thinking)
- List price
- $0.061 at today's price ($1 in / $5 out per M)
- Paid
- $0.061
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
36 kB 886 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="#f4f2e9">
<title>Lumen Cycles — Made for the long way round</title>
<style>
:root {
--paper: #f4f2e9;
--white: #fffef9;
--ink: #172d29;
--muted: #66736a;
--line: #c9cec1;
--lime: #d7e770;
--rust: #c66c4c;
--dark: #17352e;
--serif: Georgia, "Times New Roman", serif;
--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible {
outline: 3px solid #d98c63;
outline-offset: 4px;
}
.wrap { width: min(100% - 80px, 1440px); margin-inline: auto; }
.eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: .15em;
line-height: 1.3;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--rust);
}
.arrow { font-size: 1.25em; line-height: .7; }
/* Navigation */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner {
min-height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 9px;
text-decoration: none;
flex-shrink: 0;
}
.brand-mark { width: 29px; height: 29px; display: block; }
.brand-word {
font-size: 21px;
font-weight: 800;
letter-spacing: -.075em;
line-height: .8;
}
.brand-word small {
display: block;
margin-top: 5px;
font-size: 7px;
letter-spacing: .3em;
text-transform: uppercase;
}
.nav-links { display: flex; align-items: center; gap: 35px; }
.nav-links a {
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.nav-links a:not(.nav-cta):hover { text-decoration: underline; text-underline-offset: 5px; }
.nav-links .nav-cta {
display: inline-flex;
align-items: center;
gap: 24px;
padding: 13px 17px;
border: 1px solid var(--ink);
transition: background .2s, color .2s;
}
.nav-cta:hover { background: var(--ink); color: var(--white); }
/* Hero */
.hero { padding: 68px 0 25px; overflow: hidden; }
.hero-top {
display: grid;
grid-template-columns: .95fr 1.05fr;
align-items: end;
gap: 50px;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 400; }
h1 {
margin: 24px 0 0;
font-family: var(--serif);
font-size: clamp(58px, 7.4vw, 112px);
line-height: .91;
letter-spacing: -.06em;
}
h1 em { font-weight: 400; color: var(--rust); }
.hero-intro { max-width: 390px; padding: 0 0 7px 10%; }
.hero-intro p {
max-width: 330px;
margin-bottom: 24px;
color: #4f6056;
font-size: 15px;
line-height: 1.7;
}
.text-link {
display: inline-flex;
align-items: center;
gap: 38px;
padding-bottom: 8px;
border-bottom: 1px solid currentColor;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.text-link:hover { color: var(--rust); }
.hero-visual {
position: relative;
margin-top: 48px;
min-height: 420px;
background: #dce4ce;
overflow: hidden;
}
.hero-visual::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
left: 50%;
top: 48%;
transform: translate(-50%, -50%);
border: 1px solid rgba(23,45,41,.12);
border-radius: 50%;
box-shadow: 0 0 0 75px rgba(255,255,255,.09), 0 0 0 150px rgba(255,255,255,.06);
}
.bike-art {
position: relative;
display: block;
width: min(100%, 1130px);
height: auto;
margin: -10px auto -7%;
filter: drop-shadow(0 22px 12px rgba(41,54,38,.12));
}
.visual-label {
position: absolute;
left: 30px;
top: 26px;
display: flex;
align-items: center;
gap: 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.visual-label span {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border: 1px solid rgba(23,45,41,.5);
border-radius: 50%;
font-size: 9px;
}
.visual-stamp {
position: absolute;
right: 28px;
top: 25px;
width: 82px;
height: 82px;
display: grid;
place-content: center;
border: 1px solid rgba(23,45,41,.45);
border-radius: 50%;
text-align: center;
text-transform: uppercase;
font-size: 8px;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.5;
transform: rotate(12deg);
}
.hero-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding-top: 17px;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.hero-bottom span:last-child { color: var(--muted); text-align: right; }
/* Intro */
.intro { padding: 150px 0 120px; }
.intro-grid {
display: grid;
grid-template-columns: 1fr 2.05fr;
gap: 60px;
}
.intro h2, .section-title {
font-family: var(--serif);
font-size: clamp(40px, 4.7vw, 72px);
letter-spacing: -.05em;
line-height: 1.05;
}
.intro h2 { max-width: 790px; margin-bottom: 35px; }
.intro h2 em { color: var(--rust); font-weight: 400; }
.intro-copy {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
max-width: 750px;
color: #5c6a60;
font-size: 14px;
line-height: 1.75;
}
/* Features */
.features { padding-bottom: 130px; }
.feature-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 30px;
margin-bottom: 30px;
}
.feature-head h2 { margin: 16px 0 0; }
.feature-head > p { max-width: 280px; margin: 0 0 6px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card { min-width: 0; }
.feature-image {
position: relative;
height: 290px;
overflow: hidden;
display: grid;
place-items: center;
}
.feature-image svg { width: 100%; height: 100%; }
.feature-image.one { background: #d7ded1; }
.feature-image.two { background: #e6d4c3; }
.feature-image.three { background: #d9d9c8; }
.feature-number {
position: absolute;
top: 18px;
left: 18px;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
}
.feature-card h3 {
margin: 20px 0 9px;
font-family: var(--serif);
font-size: 25px;
letter-spacing: -.03em;
}
.feature-card p { max-width: 320px; color: var(--muted); font-size: 13px; line-height: 1.65; }
/* Configurator */
.build { background: var(--dark); color: var(--paper); padding: 100px 0; }
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 9vw, 150px); }
.build .eyebrow::before { background: var(--lime); }
.build h2 { margin: 28px 0 25px; }
.build-intro { max-width: 380px; color: #bac8bc; font-size: 14px; line-height: 1.75; }
.build-note {
margin-top: 75px;
padding-top: 20px;
border-top: 1px solid #547067;
color: #bac8bc;
font-size: 12px;
line-height: 1.6;
}
.build-note strong { display: block; margin-bottom: 6px; color: var(--paper); }
.config-group { border-top: 1px solid #6b8177; padding: 20px 0 25px; }
.config-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.config-heading strong { font-size: 13px; font-weight: 600; }
.config-heading span { color: #bac8bc; font-size: 11px; }
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.option {
min-height: 42px;
padding: 10px 14px;
border: 1px solid #71877d;
border-radius: 0;
background: transparent;
color: var(--paper);
cursor: pointer;
font-size: 12px;
text-align: left;
}
.option:hover { border-color: var(--lime); }
.option[aria-pressed="true"] { border-color: var(--lime); background: var(--lime); color: var(--dark); }
.price-row {
display: flex;
justify-content: space-between;
align-items: end;
gap: 20px;
border-top: 1px solid #6b8177;
padding-top: 24px;
}
.price-row small { display: block; margin-bottom: 8px; color: #bac8bc; font-size: 11px; }
.price { font-family: var(--serif); font-size: 39px; line-height: 1; letter-spacing: -.04em; }
.build-button {
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 25px;
min-height: 50px;
padding: 0 18px;
border: 0;
background: var(--lime);
color: var(--dark);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.build-button:hover { background: #e5f48a; }
.estimate-note { margin: 14px 0 0; color: #bac8bc; font-size: 11px; line-height: 1.5; }
.inquiry { margin-top: 22px; padding: 20px; background: #27473e; }
.inquiry[hidden] { display: none; }
.inquiry p { margin: 0 0 12px; color: #d1ddd2; font-size: 12px; line-height: 1.6; }
.inquiry textarea {
width: 100%;
min-height: 120px;
resize: vertical;
padding: 12px;
border: 1px solid #82978b;
border-radius: 0;
background: #f4f2e9;
color: var(--ink);
font-size: 12px;
line-height: 1.5;
}
.copy-button {
margin-top: 10px;
padding: 10px 14px;
border: 1px solid #a4b8a9;
background: transparent;
color: var(--paper);
cursor: pointer;
font-size: 12px;
}
.copy-status { display: inline-block; margin-left: 10px; font-size: 11px; color: var(--lime); }
/* Process and FAQ */
.process { padding: 130px 0; }
.process-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 90px; }
.process h2 { max-width: 440px; margin: 24px 0; }
.process-lead { max-width: 320px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.step {
display: grid;
grid-template-columns: 55px 1fr;
gap: 15px;
padding: 25px 0 26px;
border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num { color: var(--rust); font-size: 11px; font-weight: 700; }
.step h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 26px; letter-spacing: -.03em; }
.step p { max-width: 440px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.faq { padding: 0 0 130px; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 90px; }
.faq h2 { margin: 24px 0; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary {
position: relative;
padding: 22px 35px 22px 0;
list-style: none;
cursor: pointer;
font-size: 14px;
font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 2px; top: 17px; font-size: 23px; font-weight: 400; }
details[open] summary::after { content: "−"; }
details p { max-width: 540px; margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.7; }
/* Footer */
.footer { background: #d8e2c9; padding: 70px 0 24px; }
.footer-main { display: flex; justify-content: space-between; align-items: end; gap: 35px; padding-bottom: 80px; }
.footer h2 { margin: 20px 0 25px; font-family: var(--serif); font-size: clamp(45px, 6vw, 88px); letter-spacing: -.055em; line-height: .98; }
.footer h2 em { color: var(--rust); font-weight: 400; }
.footer-contact { font-size: 13px; line-height: 1.8; }
.footer-contact strong { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.footer-contact p { margin: 8px 0 0; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: end;
gap: 25px;
border-top: 1px solid #aebcab;
padding-top: 20px;
}
.footer-bottom p { margin: 0; color: #586b5d; font-size: 10px; line-height: 1.6; }
.footer-bottom .brand-word { font-size: 27px; }
@media (max-width: 850px) {
.wrap { width: min(100% - 40px, 1440px); }
.header-inner { min-height: 72px; }
.nav-links { gap: 18px; }
.nav-links a { font-size: 11px; }
.hero { padding-top: 50px; }
.hero-top { grid-template-columns: 1fr 1fr; gap: 20px; }
h1 { font-size: clamp(55px, 8.5vw, 78px); }
.hero-intro { padding-left: 0; }
.hero-visual { min-height: 0; }
.bike-art { width: 110%; max-width: none; margin-left: -5%; margin-top: 20px; }
.intro { padding: 100px 0 85px; }
.intro-grid { grid-template-columns: 1fr 2fr; gap: 30px; }
.features { padding-bottom: 90px; }
.feature-image { height: 230px; }
.build-grid, .process-layout, .faq-layout { gap: 45px; }
.process { padding: 90px 0; }
.faq { padding-bottom: 90px; }
}
@media (max-width: 600px) {
.wrap { width: calc(100% - 32px); }
.header-inner { min-height: 66px; }
.nav-links a:not(.nav-cta) { display: none; }
.nav-links .nav-cta { padding: 11px 13px; gap: 18px; }
.hero { padding-top: 42px; }
.hero-top { grid-template-columns: 1fr; gap: 23px; }
h1 { margin-top: 20px; font-size: clamp(58px, 13vw, 78px); }
.hero-intro p { margin-bottom: 16px; font-size: 14px; }
.hero-visual { margin-top: 32px; min-height: 275px; display: flex; align-items: center; }
.bike-art { width: 145%; flex: 0 0 145%; margin: 35px 0 0 -22%; }
.visual-label { top: 16px; left: 16px; font-size: 8px; }
.visual-stamp { top: 14px; right: 14px; width: 62px; height: 62px; font-size: 6px; }
.hero-bottom { font-size: 9px; }
.intro { padding: 90px 0 75px; }
.intro-grid { grid-template-columns: 1fr; gap: 22px; }
.intro-copy { grid-template-columns: 1fr; gap: 0; }
.feature-head { display: block; }
.feature-head > p { margin-top: 15px; }
.feature-grid { grid-template-columns: 1fr; gap: 30px; }
.feature-image { height: 280px; }
.feature-card h3 { margin-top: 16px; }
.feature-card p { margin-bottom: 0; }
.build { padding: 75px 0; }
.build-grid, .process-layout, .faq-layout { grid-template-columns: 1fr; gap: 35px; }
.build-note { margin-top: 30px; }
.price-row { align-items: center; }
.price { font-size: 34px; }
.build-button { gap: 12px; }
.process { padding: 80px 0; }
.faq { padding-bottom: 80px; }
.footer { padding-top: 60px; }
.footer-main { display: block; padding-bottom: 60px; }
.footer-contact { margin-top: 40px; }
.footer-bottom { align-items: end; }
.footer-bottom p { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; }
}
</style>
</head>
<body>
<header class="site-header">
<div class="wrap header-inner">
<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="1.5"/>
<path d="M16 3v26M3 16h26M7 7l18 18M25 7 7 25" stroke="currentColor" stroke-width="1.3"/>
<circle cx="16" cy="16" r="4" fill="#f4f2e9" stroke="currentColor" stroke-width="1.3"/>
</svg>
<span class="brand-word">lumen<small>cycles</small></span>
</a>
<nav class="nav-links" aria-label="Main navigation">
<a href="#details">The bike</a>
<a href="#process">Our process</a>
<a href="#faq">Questions</a>
<a class="nav-cta" href="#build">Build yours <span class="arrow" aria-hidden="true">↗</span></a>
</nav>
</div>
</header>
<main id="top">
<section class="hero" aria-labelledby="hero-title">
<div class="wrap">
<div class="hero-top">
<div>
<div class="eyebrow">Cargo bikes, made in Copenhagen</div>
<h1 id="hero-title">More life.<br>Less <em>car.</em></h1>
</div>
<div class="hero-intro">
<p>A thoughtfully built cargo bike for the everyday adventures, little passengers and good detours that make a life.</p>
<a class="text-link" href="#details">Meet your Lumen <span class="arrow" aria-hidden="true">↘</span></a>
</div>
</div>
<div class="hero-visual">
<div class="visual-label"><span>01</span> The everyday hauler</div>
<div class="visual-stamp">Made to<br>move you<br>↗</div>
<svg class="bike-art" viewBox="0 0 1100 600" role="img" aria-label="Illustration of a deep green long-tail cargo bicycle with a front cargo box">
<defs>
<linearGradient id="box" x1="0" x2="1" y1="0" y2="1">
<stop offset="0" stop-color="#e7b997"/>
<stop offset="1" stop-color="#c78666"/>
</linearGradient>
<linearGradient id="boxside" x1="0" x2="1">
<stop stop-color="#bb7659"/>
<stop offset="1" stop-color="#d39773"/>
</linearGradient>
<g id="wheel">
<circle r="112" fill="#b5c5ad" stroke="#243a34" stroke-width="15"/>
<circle r="96" fill="none" stroke="#e9ede1" stroke-width="3"/>
<circle r="91" fill="none" stroke="#758b7d" stroke-width="1"/>
<g stroke="#71887a" stroke-width="1.5">
<path d="M-95 0H95 M0-95V95 M-67-67 67 67 M67-67-67 67 M-88-36 88 36 M-88 36 88-36 M-36-88 36 88 M36-88-36 88"/>
</g>
<circle r="12" fill="#293c36" stroke="#d3ddd0" stroke-width="3"/>
<circle r="3" fill="#c8d6c6"/>
</g>
</defs>
<ellipse cx="543" cy="528" rx="455" ry="17" fill="#819585" opacity=".2"/>
<use href="#wheel" x="214" y="410"/>
<use href="#wheel" x="867" y="410"/>
<!-- rear mudguard and rack -->
<path d="M101 390 A115 115 0 0 1 322 357" fill="none" stroke="#29463b" stroke-width="8" stroke-linecap="round"/>
<path d="M132 287h148l24 20H119z" fill="#29463b"/>
<path d="M152 303 132 383 M272 303l28 72" fill="none" stroke="#496759" stroke-width="4"/>
<!-- frame -->
<g fill="none" stroke="#234a3b" stroke-width="13" stroke-linecap="round" stroke-linejoin="round">
<path d="M214 410 351 274 408 410 214 410 351 274"/>
<path d="M351 274 492 282 408 410"/>
<path d="M408 410 700 343 766 296"/>
<path d="M700 343 867 410"/>
</g>
<path d="M408 410 715 359" fill="none" stroke="#16382f" stroke-width="9" stroke-linecap="round"/>
<path d="M760 273 792 346 867 410" fill="none" stroke="#253f36" stroke-width="10" stroke-linecap="round"/>
<path d="M756 274 749 235 779 225" fill="none" stroke="#253f36" stroke-width="7" stroke-linecap="round"/>
<path d="M778 225 805 226" stroke="#253f36" stroke-width="8" stroke-linecap="round"/>
<path d="M350 274 344 237" stroke="#263b33" stroke-width="8"/>
<path d="M316 231c14-7 52-7 66 0 4 2 2 8-2 9l-50 1c-11 0-18-4-14-10z" fill="#594c3e"/>
<!-- crank and chain -->
<path d="M214 410 405 426 405 395 214 405" fill="none" stroke="#8a9788" stroke-width="2"/>
<circle cx="408" cy="410" r="30" fill="#344b40" stroke="#96a59a" stroke-width="4"/>
<circle cx="408" cy="410" r="17" fill="none" stroke="#96a59a" stroke-width="2"/>
<path d="M408 410 424 440h19" fill="none" stroke="#a8b5a6" stroke-width="5" stroke-linecap="round"/>
<path d="M438 440h20" stroke="#344b40" stroke-width="7" stroke-linecap="round"/>
<!-- cargo platform -->
<path d="M462 328h294l16 22H476z" fill="#254438"/>
<!-- cargo box -->
<path d="M475 163 713 163 746 310 498 310z" fill="url(#box)" stroke="#8c634e" stroke-width="3"/>
<path d="M713 163 758 180 784 311 746 310z" fill="url(#boxside)" stroke="#8c634e" stroke-width="3"/>
<path d="M467 154h252l11 18H477z" fill="#745d4a"/>
<path d="M719 154 764 171l4 16-38-15z" fill="#5e5141"/>
<path d="M492 191h231 M497 220h232 M502 249h233 M506 278h235" stroke="#a77157" stroke-width="2" opacity=".55"/>
<path d="M527 176 544 303 M685 175l24 127" stroke="#f2c8a8" stroke-width="3" opacity=".4"/>
<circle cx="505" cy="180" r="3" fill="#765848"/><circle cx="701" cy="180" r="3" fill="#765848"/>
<circle cx="519" cy="293" r="3" fill="#765848"/><circle cx="723" cy="293" r="3" fill="#765848"/>
<text x="579" y="240" fill="#795b49" font-family="Georgia,serif" font-size="23" letter-spacing="-1">lumen</text>
<text x="581" y="253" fill="#795b49" font-family="Arial,sans-serif" font-size="6" letter-spacing="3">CYCLES</text>
<!-- front fender and lamp -->
<path d="M755 389 A113 113 0 0 1 979 389" fill="none" stroke="#29463b" stroke-width="8" stroke-linecap="round"/>
<path d="M795 294h20" stroke="#384b3f" stroke-width="5"/>
<rect x="808" y="286" width="19" height="15" rx="5" fill="#d4d1a7" stroke="#384b3f" stroke-width="3"/>
<path d="M461 344h-30" stroke="#8aa08c" stroke-width="3"/>
</svg>
</div>
<div class="hero-bottom">
<span>Built to order · Made to be kept</span>
<span>Copenhagen, Denmark 55° 40′ N</span>
</div>
</div>
</section>
<section class="intro" aria-labelledby="intro-title">
<div class="wrap intro-grid">
<div class="eyebrow">A better kind of everyday</div>
<div>
<h2 id="intro-title">For everything you carry, and everywhere you <em>want to go.</em></h2>
<div class="intro-copy">
<p>School runs. Market mornings. An extra stop for coffee. A cargo bike has a way of turning the necessary trips into the good ones.</p>
<p>We build each Lumen to order in Copenhagen, with considered details, dependable components and room for your particular kind of life.</p>
</div>
</div>
</div>
</section>
<section class="features" id="details" aria-labelledby="details-title">
<div class="wrap">
<div class="feature-head">
<div>
<div class="eyebrow">Thought through, all the way</div>
<h2 class="section-title" id="details-title">The details matter.</h2>
</div>
<p>Simple where it can be. Clever where it counts. Ready for the rhythms of real life.</p>
</div>
<div class="feature-grid">
<article class="feature-card">
<div class="feature-image one">
<span class="feature-number">01 / 03</span>
<svg viewBox="0 0 400 290" aria-hidden="true">
<circle cx="210" cy="145" r="114" fill="#c4d2bf"/>
<path d="M-30 224 123 90 179 224-30 224 123 90 262 99 179 224" fill="none" stroke="#264a3b" stroke-width="15" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M123 90 116 47" stroke="#30483c" stroke-width="8"/>
<path d="M83 44c17-8 57-8 72 0 3 2 2 8-3 9l-53 1c-11 0-19-5-16-10z" fill="#665545"/>
<circle cx="179" cy="224" r="31" fill="#344b40" stroke="#9eae9f" stroke-width="4"/>
<circle cx="179" cy="224" r="16" fill="none" stroke="#9eae9f" stroke-width="2"/>
<path d="M179 224 198 255h21" fill="none" stroke="#9eae9f" stroke-width="5" stroke-linecap="round"/>
<path d="M178 224 400 178" fill="none" stroke="#264a3b" stroke-width="13" stroke-linecap="round"/>
</svg>
</div>
<h3>A frame for the long run</h3>
<p>A balanced, low-step shape that feels intuitive in the city and comfortable when the days get longer.</p>
</article>
<article class="feature-card">
<div class="feature-image two">
<span class="feature-number">02 / 03</span>
<svg viewBox="0 0 400 290" aria-hidden="true">
<circle cx="199" cy="144" r="115" fill="#dfc2ac"/>
<path d="M67 72 290 72l34 164H92z" fill="#d29a77" stroke="#956b54" stroke-width="3"/>
<path d="M290 72 330 89l31 149-37-2z" fill="#bd8061" stroke="#956b54" stroke-width="3"/>
<path d="M59 62h237l12 18H70z" fill="#705c4b"/>
<path d="M296 62 337 79l3 18-32-17z" fill="#5c5144"/>
<path d="M77 107h220 M81 143h225 M87 179h227 M92 215h229" stroke="#b47e60" stroke-width="2"/>
<circle cx="91" cy="91" r="3" fill="#805c49"/><circle cx="281" cy="91" r="3" fill="#805c49"/>
<circle cx="110" cy="224" r="3" fill="#805c49"/><circle cx="308" cy="224" r="3" fill="#805c49"/>
<text x="149" y="158" fill="#805c49" font-family="Georgia,serif" font-size="29" letter-spacing="-1">lumen</text>
<text x="153" y="173" fill="#805c49" font-family="Arial,sans-serif" font-size="7" letter-spacing="3">CYCLES</text>
</svg>
</div>
<h3>Room for your world</h3>
<p>A generous front box keeps the things that matter within sight, whether that is the weekly shop or precious company.</p>
</article>
<article class="feature-card">
<div class="feature-image three">
<span class="feature-number">03 / 03</span>
<svg viewBox="0 0 400 290" aria-hidden="true">
<circle cx="202" cy="145" r="114" fill="#c5c9b6"/>
<circle cx="207" cy="162" r="98" fill="none" stroke="#263d34" stroke-width="16"/>
<circle cx="207" cy="162" r="82" fill="none" stroke="#e6eadd" stroke-width="3"/>
<g stroke="#879b8b" stroke-width="1.5">
<path d="M125 162h164 M207 80v164 M149 104l116 116 M265 104 149 220 M131 131l152 62 M131 193l152-62 M176 86l62 152 M238 86l-62 152"/>
</g>
<circle cx="207" cy="162" r="24" fill="#d4d8c7" stroke="#617b69" stroke-width="4"/>
<circle cx="207" cy="162" r="10" fill="#354d40"/>
<path d="M206 161 168 65 190 30 M207 161 252 55" fill="none" stroke="#274b3c" stroke-width="11" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M95 143A113 113 0 0 1 318 143" fill="none" stroke="#29463b" stroke-width="8" stroke-linecap="round"/>
</svg>
</div>
<h3>Made to be maintained</h3>
<p>We choose serviceable components and a straightforward design, so your bike can keep earning its place for years.</p>
</article>
</div>
</div>
</section>
<section class="build" id="build" aria-labelledby="build-title">
<div class="wrap build-grid">
<div>
<div class="eyebrow">Make it yours</div>
<h2 class="section-title" id="build-title">A good place<br>to start.</h2>
<p class="build-intro">Every Lumen starts with the same considered foundation. Choose a few details below and we’ll have something to talk about.</p>
<div class="build-note">
<strong>Made for you, not a warehouse.</strong>
This is a starting estimate, not a checkout. We’ll talk through fit, options and timing before anything is final.
</div>
</div>
<div class="configurator">
<div class="config-group" role="group" aria-label="Choose assistance">
<div class="config-heading"><strong>01 Assistance</strong><span>Choose one</span></div>
<div class="options" data-group="assistance">
<button class="option" type="button" aria-pressed="true" data-name="Pedal power" data-price="0">Pedal power +€0</button>
<button class="option" type="button" aria-pressed="false" data-name="Electric assist" data-price="1100">Electric assist +€1,100</button>
</div>
</div>
<div class="config-group" role="group" aria-label="Choose box setup">
<div class="config-heading"><strong>02 Box setup</strong><span>Choose one</span></div>
<div class="options" data-group="box">
<button class="option" type="button" aria-pressed="true" data-name="Open box" data-price="0">Open box +€0</button>
<button class="option" type="button" aria-pressed="false" data-name="Box with rain cover" data-price="450">Rain cover +€450</button>
</div>
</div>
<div class="config-group" role="group" aria-label="Choose frame colour">
<div class="config-heading"><strong>03 Frame colour</strong><span>Choose one</span></div>
<div class="options" data-group="colour">
<button class="option" type="button" aria-pressed="true" data-name="Forest green" data-price="0">Forest green</button>
<button class="option" type="button" aria-pressed="false" data-name="Warm clay" data-price="0">Warm clay</button>
<button class="option" type="button" aria-pressed="false" data-name="Soft black" data-price="0">Soft black</button>
</div>
</div>
<div class="price-row">
<div><small>Estimated from</small><div class="price" id="price" aria-live="polite">€3,900</div></div>
<button class="build-button" id="inquiry-button" type="button">Prepare an enquiry <span class="arrow" aria-hidden="true">↗</span></button>
</div>
<p class="estimate-note">Indicative price in euros, including VAT. Final specification and pricing are confirmed together.</p>
<div class="inquiry" id="inquiry" hidden>
<p>Your starting point is ready. Copy this note into an email to <strong>hello@lumencycles.dk</strong> and tell us a little about how you’d like to ride.</p>
<label for="inquiry-text" class="eyebrow">Your enquiry</label>
<textarea id="inquiry-text" spellcheck="true"></textarea>
<button class="copy-button" id="copy-button" type="button">Copy note</button>
<span class="copy-status" id="copy-status" role="status"></span>
</div>
</div>
</div>
</section>
<section class="process" id="process" aria-labelledby="process-title">
<div class="wrap process-layout">
<div>
<div class="eyebrow">From our workshop to your world</div>
<h2 class="section-title" id="process-title">Good things take a little conversation.</h2>
<p class="process-lead">No one-size-fits-all, no rush. Just a bike made with your everyday in mind.</p>
</div>
<div>
<article class="step">
<span class="step-num">01 /</span>
<div><h3>Tell us about your days.</h3><p>Start with your routes, your cargo and the things you wish were easier. We’ll help make sense of the options.</p></div>
</article>
<article class="step">
<span class="step-num">02 /</span>
<div><h3>We make a plan.</h3><p>Together, we settle on the details, confirm the price and agree on a build timeline that works.</p></div>
</article>
<article class="step">
<span class="step-num">03 /</span>
<div><h3>Meet your new everyday.</h3><p>When your bike is ready, we’ll walk you through it and make sure you feel at home before you set off.</p></div>
</article>
</div>
</div>
</section>
<section class="faq" id="faq" aria-labelledby="faq-title">
<div class="wrap faq-layout">
<div>
<div class="eyebrow">Good to know</div>
<h2 class="section-title" id="faq-title">A few things<br>you might ask.</h2>
</div>
<div>
<details>
<summary>How long does a build take?</summary>
<p>It depends on the specification and our current workshop schedule. We’ll give you a clear timeline when we discuss your build, before you commit.</p>
</details>
<details>
<summary>Can I choose electric assistance?</summary>
<p>Yes. You can start with pedal power or choose electric assistance. We’ll help you decide what makes sense for your routes and the loads you carry.</p>
</details>
<details>
<summary>Can I talk through the details before ordering?</summary>
<p>Absolutely. That’s how every Lumen starts. Tell us what you need and we’ll discuss the bike, available options and final pricing with you.</p>
</details>
<details>
<summary>What happens when my bike needs a service?</summary>
<p>We design with maintenance in mind and can talk you through care and servicing options when we discuss your build.</p>
</details>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap">
<div class="footer-main">
<div>
<div class="eyebrow">The road is yours</div>
<h2>Let’s go<br><em>somewhere.</em></h2>
<a class="text-link" href="#build">Start your build <span class="arrow" aria-hidden="true">↗</span></a>
</div>
<div class="footer-contact">
<strong>Say hello</strong>
<p>hello@lumencycles.dk<br>Copenhagen, Denmark</p>
</div>
</div>
<div class="footer-bottom">
<a class="brand" href="#top" aria-label="Lumen Cycles, back to 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="1.5"/>
<path d="M16 3v26M3 16h26M7 7l18 18M25 7 7 25" stroke="currentColor" stroke-width="1.3"/>
<circle cx="16" cy="16" r="4" fill="#d8e2c9" stroke="currentColor" stroke-width="1.3"/>
</svg>
<span class="brand-word">lumen<small>cycles</small></span>
</a>
<p>Made for the long way round.<br>© Lumen Cycles</p>
</div>
</div>
</footer>
<script>
(function () {
const basePrice = 3900;
const groups = Array.from(document.querySelectorAll('.options'));
const price = document.getElementById('price');
const inquiry = document.getElementById('inquiry');
const inquiryText = document.getElementById('inquiry-text');
const inquiryButton = document.getElementById('inquiry-button');
const copyButton = document.getElementById('copy-button');
const copyStatus = document.getElementById('copy-status');
function selection() {
return groups.map(function (group) {
return group.querySelector('.option[aria-pressed="true"]');
});
}
function formatPrice(amount) {
return '€' + amount.toLocaleString('en-IE');
}
function updatePrice() {
const total = selection().reduce(function (sum, option) {
return sum + Number(option.dataset.price);
}, basePrice);
price.textContent = formatPrice(total);
return total;
}
function makeNote() {
const selected = selection();
return 'Hello Lumen,\n\nI’d like to talk about a cargo bike with:\n' +
'• ' + selected[0].dataset.name + '\n' +
'• ' + selected[1].dataset.name + '\n' +
'• ' + selected[2].dataset.name + ' frame\n\n' +
'Starting estimate: ' + formatPrice(updatePrice()) + ' including VAT.\n\n' +
'A little about how I plan to ride: ';
}
groups.forEach(function (group) {
group.addEventListener('click', function (event) {
const button = event.target.closest('.option');
if (!button || !group.contains(button)) return;
group.querySelectorAll('.option').forEach(function (option) {
option.setAttribute('aria-pressed', String(option === button));
});
updatePrice();
if (!inquiry.hidden) {
inquiryText.value = makeNote();
copyStatus.textContent = 'Updated with your choices.';
}
});
});
inquiryButton.addEventListener('click', function () {
inquiryText.value = makeNote();
inquiry.hidden = false;
copyStatus.textContent = '';
inquiryText.focus();
});
copyButton.addEventListener('click', function () {
inquiryText.select();
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(inquiryText.value).then(function () {
copyStatus.textContent = 'Copied.';
}).catch(function () {
copyStatus.textContent = 'Selected — copy the text manually.';
});
} else {
copyStatus.textContent = 'Selected — copy the text manually.';
}
});
})();
</script>
</body>
</html>

