Run details
- Model
- inception/mercury-3
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 7,281 reasoning tokens
- Limits
- 60 min · 131,072 output tokens
- Date
- 21 Oct 2026
- Time
- 42 s
- Size
- 40 kB
- Tokens
- 83 in, 19,953 out
- List price
- $0.007 ($0.1 in / $0.35 out per M)
- Paid
- $0.007
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
40 kB 1,467 lines Raw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lumen Cycles — Custom Cargo Bikes, Built in Copenhagen</title>
<style>
:root {
--paper: #f4f1e9;
--paper-light: #fbf9f3;
--ink: #181a1f;
--ink-soft: #3c4047;
--muted: #7c828b;
--brass: #b28a52;
--brass-dark: #82673b;
--line: rgba(24, 26, 31, 0.12);
--shadow: 0 8px 30px rgba(24, 26, 31, 0.08);
--serif: Georgia, 'Times New Roman', Times, serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--sans);
background: var(--paper);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
font-family: var(--serif);
font-weight: normal;
letter-spacing: -0.01em;
}
a {
color: inherit;
}
img, svg {
display: block;
max-width: 100%;
}
.container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 24px;
}
/* Header */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(244, 241, 233, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
font-family: var(--serif);
font-size: 1.6rem;
letter-spacing: 0.02em;
color: var(--ink);
}
.logo-mark {
width: 34px;
height: 34px;
color: var(--brass);
}
.nav-links {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
}
.nav-links a:not(.btn) {
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink-soft);
transition: color 0.2s;
}
.nav-links a:not(.btn):hover {
color: var(--brass);
}
.nav-cta {
font-size: 0.95rem;
font-weight: 600;
}
.btn {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
font-family: var(--sans);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-primary {
background: var(--brass);
color: var(--ink);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(178, 138, 82, 0.35);
}
.btn-secondary {
background: transparent;
border-color: rgba(255, 255, 255, 0.35);
color: #fff;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.08);
}
.btn-dark {
background: var(--ink);
color: var(--paper);
}
.btn-dark:hover {
background: var(--ink-soft);
transform: translateY(-2px);
box-shadow: var(--shadow);
}
.menu-toggle {
display: none;
background: none;
border: none;
width: 40px;
height: 40px;
flex-direction: column;
justify-content: center;
gap: 6px;
cursor: pointer;
}
.menu-toggle span {
display: block;
height: 2px;
width: 22px;
background: var(--ink);
margin: 0 auto;
}
.mobile-menu {
display: none;
border-top: 1px solid var(--line);
padding: 16px 24px 24px;
}
.mobile-menu ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
.mobile-menu a {
text-decoration: none;
font-size: 1.05rem;
font-weight: 500;
color: var(--ink);
}
.mobile-menu.open {
display: block;
}
/* Hero */
.hero {
position: relative;
background: var(--ink);
color: #fff;
padding: 120px 0 96px;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 80px 80px;
opacity: 0.5;
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.hero-eyebrow {
color: var(--brass);
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
}
.hero h1 {
font-size: clamp(2.6rem, 5vw, 4.4rem);
line-height: 1.1;
margin: 16px 0 24px;
}
.hero p {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.72);
max-width: 42ch;
}
.hero-buttons {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 40px;
}
.hero-svg {
color: var(--brass);
}
.hero-svg svg {
width: 100%;
height: auto;
}
.hero-note {
margin-top: 56px;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.12);
padding-top: 20px;
display: flex;
gap: 28px;
flex-wrap: wrap;
}
.hero-note span {
display: flex;
align-items: center;
gap: 8px;
}
.hero-note svg {
width: 18px;
height: 18px;
color: var(--brass);
}
/* Trust bar */
.trust-bar {
background: var(--paper-light);
border-bottom: 1px solid var(--line);
}
.trust-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
list-style: none;
}
.trust-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.9rem;
color: var(--muted);
}
.trust-list svg {
width: 20px;
height: 20px;
color: var(--brass);
flex-shrink: 0;
}
/* Sections */
.section {
padding: 104px 0;
}
.section-alt {
background: var(--paper-light);
}
.section-label {
color: var(--brass);
font-size: 0.85rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 20px;
}
h2 {
font-size: clamp(2rem, 3.2vw, 3.1rem);
line-height: 1.15;
margin-bottom: 32px;
}
.lead {
font-size: 1.2rem;
color: var(--ink-soft);
max-width: 58ch;
margin-bottom: 48px;
}
/* Philosophy */
.philosophy-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: start;
}
.philosophy-copy p + p {
margin-top: 20px;
}
.philosophy-copy p {
color: var(--ink-soft);
font-size: 1.05rem;
}
.philosophy-aside {
background: var(--ink);
color: var(--paper);
padding: 36px;
border-radius: 12px;
box-shadow: var(--shadow);
}
.philosophy-aside h3 {
font-size: 1.6rem;
margin-bottom: 16px;
}
.philosophy-aside p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 16px;
font-size: 0.95rem;
}
.stat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 24px;
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 24px;
}
.stat-number {
font-family: var(--mono);
font-size: 1.8rem;
color: var(--brass);
}
.stat-label {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.55);
}
/* Models */
.models-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
}
.model-card {
background: var(--paper-light);
border: 1px solid var(--line);
border-radius: 12px;
padding: 36px;
display: flex;
flex-direction: column;
transition: transform 0.2s, box-shadow 0.2s;
}
.model-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow);
}
.model-icon {
width: 56px;
height: 56px;
margin-bottom: 24px;
color: var(--brass);
}
.model-card h3 {
font-size: 1.5rem;
margin-bottom: 8px;
}
.model-card p {
color: var(--ink-soft);
font-size: 0.95rem;
margin-bottom: 24px;
}
.model-specs {
list-style: none;
border-top: 1px solid var(--line);
margin-bottom: 24px;
padding-top: 16px;
font-size: 0.9rem;
color: var(--muted);
}
.model-specs li {
padding: 4px 0;
display: flex;
justify-content: space-between;
gap: 12px;
}
.model-specs strong {
color: var(--ink);
}
.model-price {
margin-top: auto;
font-family: var(--mono);
font-size: 1.2rem;
color: var(--brass-dark);
font-weight: 600;
}
.model-price small {
font-family: var(--sans);
font-weight: 400;
color: var(--muted);
font-size: 0.85rem;
}
.model-link {
margin-top: 16px;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
color: var(--brass);
display: inline-block;
}
.model-link:hover {
color: var(--brass-dark);
}
/* Process */
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.process-step {
position: relative;
}
.process-step::after {
content: "";
position: absolute;
top: 24px;
left: -20px;
width: 40px;
height: 1px;
background: var(--line);
}
.process-step:first-child::after {
display: none;
}
.step-number {
font-family: var(--serif);
font-size: 3rem;
color: var(--brass);
line-height: 1;
display: block;
margin-bottom: 16px;
}
.process-step h3 {
font-size: 1.2rem;
margin-bottom: 8px;
}
.process-step p {
font-size: 0.95rem;
color: var(--ink-soft);
}
/* Testimonials */
.quotes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
}
.quote-card {
background: var(--paper-light);
border: 1px solid var(--line);
border-radius: 12px;
padding: 36px;
display: flex;
flex-direction: column;
}
blockquote {
font-family: var(--serif);
font-size: 1.2rem;
line-height: 1.5;
color: var(--ink);
margin-bottom: 24px;
flex: 1;
}
.quote-author {
font-weight: 600;
font-size: 0.95rem;
color: var(--ink-soft);
}
.quote-author small {
display: block;
font-weight: 400;
color: var(--muted);
margin-top: 4px;
}
/* Craft / Materials */
.craft-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 32px;
}
.craft-item {
padding: 32px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: 12px;
}
.craft-icon {
width: 40px;
height: 40px;
color: var(--brass);
margin-bottom: 20px;
}
.craft-item h3 {
font-size: 1.3rem;
margin-bottom: 12px;
}
.craft-item p {
font-size: 0.95rem;
color: var(--ink-soft);
}
/* Visit */
.visit-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
align-items: start;
}
.visit-info address {
font-style: normal;
margin-top: 20px;
line-height: 1.8;
color: var(--ink-soft);
}
.visit-info .lead {
margin-bottom: 24px;
}
.visit-hours {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.visit-hours li {
list-style: none;
display: flex;
justify-content: space-between;
padding: 6px 0;
font-size: 0.95rem;
color: var(--ink-soft);
}
.visit-hours li strong {
color: var(--ink);
}
.visit-map {
position: relative;
background: var(--ink);
border-radius: 16px;
min-height: 360px;
overflow: hidden;
color: rgba(255,255,255,0.8);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow);
}
.visit-map::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
background-size: 40px 40px;
}
.map-pin {
position: relative;
text-align: center;
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.map-pin svg {
width: 56px;
height: 56px;
margin: 0 auto 12px;
color: var(--brass);
}
/* FAQ */
.faq-list {
max-width: 780px;
}
.faq-list details {
border-bottom: 1px solid var(--line);
}
.faq-list summary {
cursor: pointer;
list-style: none;
padding: 24px 0;
font-weight: 600;
font-size: 1.05rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary::after {
content: "+";
font-family: var(--sans);
font-size: 1.6rem;
color: var(--brass);
font-weight: 400;
line-height: 1;
}
.faq-list details[open] summary::after {
content: "–";
}
.faq-content {
padding: 0 0 24px;
color: var(--ink-soft);
max-width: 58ch;
}
/* CTA */
.cta-section {
background: var(--ink);
color: #fff;
text-align: center;
padding: 100px 0;
}
.cta-section h2 {
color: #fff;
margin-bottom: 16px;
}
.cta-section p {
color: rgba(255,255,255,0.7);
max-width: 48ch;
margin: 0 auto 32px;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* Newsletter */
.newsletter-form {
display: flex;
gap: 12px;
max-width: 440px;
margin: 32px auto 0;
flex-wrap: wrap;
}
.newsletter-form input[type="email"] {
flex: 1;
min-width: 220px;
background: transparent;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
color: #fff;
padding: 12px 16px;
font-family: var(--sans);
font-size: 1rem;
outline: none;
}
.newsletter-form input[type="email"]::placeholder {
color: rgba(255,255,255,0.45);
}
.newsletter-form input[type="email"]:focus {
border-color: var(--brass);
}
.newsletter-status {
margin-top: 16px;
font-size: 0.9rem;
color: var(--brass);
width: 100%;
}
/* Footer */
.site-footer {
background: var(--ink);
color: rgba(255,255,255,0.6);
padding: 48px 0 40px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.footer-brand .logo {
color: #fff;
margin-bottom: 16px;
}
.footer-brand p {
font-size: 0.9rem;
max-width: 30ch;
}
.footer-col h4 {
color: #fff;
font-family: var(--sans);
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 20px;
font-weight: 600;
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 0.95rem;
}
.footer-col a {
text-decoration: none;
transition: color 0.2s;
}
.footer-col a:hover {
color: var(--brass);
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: 24px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 16px;
font-size: 0.85rem;
}
/* Reveal animation */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s, transform 0.8s;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive */
@media (max-width: 900px) {
.nav-links {
display: none;
}
.menu-toggle {
display: flex;
}
.hero-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.hero {
padding: 80px 0 64px;
}
.hero-svg {
max-width: 520px;
}
.philosophy-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.process-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.process-step::after {
display: none;
}
.visit-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
}
@media (max-width: 600px) {
.section {
padding: 64px 0;
}
.process-grid {
grid-template-columns: 1fr;
}
.stat-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
</style>
</head>
<body>
<header class="site-header">
<div class="container nav-inner">
<a href="#" class="logo" aria-label="Lumen Cycles home">
<svg class="logo-mark" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17" cy="17" r="15" stroke="currentColor" stroke-width="2"/>
<circle cx="17" cy="17" r="6" stroke="currentColor" stroke-width="2"/>
<path d="M17 2v6M17 26v6M2 17h6M26 17h6" stroke="currentColor" stroke-width="2"/>
</svg>
<span>Lumen Cycles</span>
</a>
<nav aria-label="Primary">
<ul class="nav-links">
<li><a href="#models">Models</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#workshop">Workshop</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact" class="btn btn-dark nav-cta">Start your build</a></li>
</ul>
</nav>
<button class="menu-toggle" id="menuToggle" aria-label="Open menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile-menu" id="mobileMenu">
<ul>
<li><a href="#models">Models</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#workshop">Workshop</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact" class="btn btn-dark">Start your build</a></li>
</ul>
</div>
</header>
<main>
<!-- Hero -->
<section class="hero">
<div class="container hero-grid">
<div>
<div class="hero-eyebrow">Custom cargo bikes · Copenhagen</div>
<h1>Built for a lifetime, made to your measure.</h1>
<p>Each Lumen is designed from a blank drawing, cut by hand, and assembled by a single builder in our Copenhagen workshop.</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">Start your build</a>
<a href="#process" class="btn btn-secondary">Explore the process</a>
</div>
</div>
<div class="hero-svg">
<svg viewBox="0 0 640 420" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Technical drawing of a cargo bike">
<g stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<!-- Rear wheel -->
<circle cx="500" cy="300" r="55"/>
<circle cx="500" cy="300" r="5"/>
<path d="M445 300h110M500 245v110M461 261l78 78M539 261l-78 78"/>
<!-- Front wheel -->
<circle cx="150" cy="300" r="55"/>
<circle cx="150" cy="300" r="5"/>
<path d="M95 300h110M150 245v110M111 261l78 78M189 261l-78 78"/>
<!-- Head tube and fork -->
<path d="M150 160v110M150 270v30" stroke-width="3.5"/>
<!-- Top spine -->
<path d="M150 160h350V170 160l30 120" stroke-width="3.5"/>
<!-- Seat tube and stays -->
<path d="M500 160l15 120-15 20M530 280l-30 20M530 280l-30 40"/>
<!-- Handlebar -->
<path d="M150 160c-20-25-10-40 10-45" stroke-width="3.5"/>
<!-- Saddle -->
<path d="M490 130c10-10 40-10 50 0M515 130v30" stroke-width="3.5"/>
<!-- Cargo box details -->
<path d="M175 165h320M175 190h320M175 165v25M495 165v25M285 165v25M395 165v25"/>
<!-- Dimension lines -->
<path d="M150 118h350M142 118v12M500 118v12" stroke-width="1.5" stroke-dasharray="4 4"/>
</g>
<g fill="currentColor" font-family="ui-monospace, monospace" font-size="11" letter-spacing="0.5">
<text x="270" y="112">1,220 mm</text>
<text x="200" y="380">BB height 270 mm</text>
<text x="420" y="390">Load 150–200 kg</text>
</g>
</svg>
</div>
</div>
<div class="container">
<div class="hero-note">
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C6.5 6 4 10 4 15c0 4 3.5 7 8 7s8-3 8-7c0-5-2.5-9-8-13z"/></svg>
Frame warranty: 10 years
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6"/></svg>
Free EU shipping
</span>
<span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>
Trade-in and upgrade program
</span>
</div>
</div>
</section>
<!-- Trust bar -->
<section class="trust-bar">
<div class="container">
<ul class="trust-list">
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
Built in Nørrebro, Copenhagen
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.8 4.6a5.5 5.5 0 00-7.7 0L12 5.7l-1.1-1.1a5.5 5.5 0 00-7.7 7.7l1.1 1.1 7.7 7.7 7.7-7.7 1.1-1.1a5.5 5.5 0 000-7.7z"/></svg>
Handcrafted, no robots
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12v8a2 2 0 01-2 2H6a2 2 0 01-2-2v-8"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v16"/></svg>
Made to order, 4–6 weeks
</li>
<li>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
Lifetime support & service
</li>
</ul>
</div>
</section>
<!-- Philosophy -->
<section class="section" id="philosophy">
<div class="container philosophy-grid">
<div class="philosophy-copy">
<div class="section-label">Why Lumen</div>
<h2>A cargo bike is a tool, a sculpture, and a family member.</h2>
<p>In a world of mass-produced machines, we believe a cargo bike should be as deliberate as its owner. Every Lumen is designed from a blank sheet of paper, fabricated in our own workshop, and finished by the same pair of hands from first cut to final test ride.</p>
<p>We use Reynolds 725 steel, drawn and butted in England. We choose every bearing, bolt and brake by hand. And we offer no “standard models” — only starting points for exactly the bike you need.</p>
<p>This is slow manufacturing in the best sense: around 250 bikes a year, each one a real collaboration.</p>
</div>
<aside class="philosophy-aside">
<h3>Lumen in numbers</h3>
<p>Since 2012, we have built cargo bikes for couriers, families, architects and bakers. Nearly all of them are still on the road.</p>
<div class="stat-grid">
<div>
<div class="stat-number" data-target="12">0</div>
<div class="stat-label">Years of building</div>
</div>
<div>
<div class="stat-number" data-target="550">0</div>
<div class="stat-label">Bikes delivered</div>
</div>
<div>
<div class="stat-number" data-target="98">0</div>
<div class="stat-label">% still in use</div>
</div>
</div>
</aside>
</div>
</section>
<!-- Models -->
<section class="section section-alt" id="models">
<div class="container">
<div class="section-label">The Lineup</div>
<h2>Three starting points. Infinite possibilities.</h2>
<p class="lead">Every model can be adjusted in more than forty ways: wheel size, drivetrain, cargo box, electric assist, colour, and detail. Prices shown are complete bikes with painted frame, racks, boxes and one year of service included.</p>
<div class="models-grid">
<article class="model-card reveal">
<svg class="model-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="17" r="4"/><circle cx="19" cy="17" r="4"/><path d="M9 17h6M5 17L3 8h5l2 9M19 17l-2-9h-5M15 8H9M3 8h5M15 8l2 9"/></svg>
<h3>The Urban</h3>
<p>A compact, agile cargo bike for daily rides and quick errands.</p>
<ul class="model-specs">
<li><span>Payload</span><strong>120 kg</strong></li>
<li><span>Platform</span><strong>580 mm</strong></li>
<li><span>Wheels</span><strong>26" / 20"</strong></li>
<li><span>Drivetrain</span><strong>Belt or chain</strong></li>
</ul>
<div class="model-price">from €3,950 <small>incl. VAT</small></div>
<a href="#contact" class="model-link">Configure yours →</a>
</article>
<article class="model-card reveal">
<svg class="model-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="17" r="4"/><circle cx="19" cy="17" r="4"/><path d="M9 17h6M5 17L3 8h5l2 9M19 17l-2-9h-5M15 8H9M3 8h5M15 8l2 9"/><path d="M7 8l1-3h8l1 3"/></svg>
<h3>The Family</h3>
<p>Our bestseller for the school run, weekly shopping, and weekend trips.</p>
<ul class="model-specs">
<li><span>Payload</span><strong>180 kg</strong></li>
<li><span>Platform</span><strong>780 mm</strong></li>
<li><span>Wheels</span><strong>26" / 20"</strong></li>
<li><span>E-assist</span><strong>Shimano EP8</strong></li>
</ul>
<div class="model-price">from €4,950 <small>incl. VAT</small></div>
<a href="#contact" class="model-link">Configure yours →</a>
</article>
<article class="model-card reveal">
<svg class="model-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="17" r="4"/><circle cx="19" cy="17" r="4"/><path d="M9 17h6M5 17L3 8h5l2 9M19 17l-2-9h-5M15 8H9M3 8h5M15 8l2 9"/><path d="M16 5l3 3M15 6l3-3"/></svg>
<h3>The Transport</h3>
<p>Heavy, rugged, and designed for daily freight work.</p>
<ul class="model-specs">
<li><span>Payload</span><strong>250 kg</strong></li>
<li><span>Platform</span><strong>1,000 mm</strong></li>
<li><span>Wheels</span><strong>26" / 24"</strong></li>
<li><span>Brakes</span><strong>Hydraulic, 4-piston</strong></li>
</ul>
<div class="model-price">from €5,750 <small>incl. VAT</small></div>
<a href="#contact" class="model-link">Configure yours →</a>
</article>
</div>
</div>
</section>
<!-- Process -->
<section class="section" id="process">
<div class="container">
<div class="section-label">How it's made</div>
<h2>From first sketch to first ride.</h2>
<p class="lead">We keep the process personal. You talk directly with the builder who will assemble your bike.</p>
<div class="process-grid">
<div class="process-step reveal">
<span class="step-number">01</span>
<h3>Consultation</h3>
<p>We meet at the workshop or online. We discuss how you ride, what you carry, and where you park.</p>
</div>
<div class="process-step reveal">
<span class="step-number">02</span>
<h3>Design</h3>
<p>Your geometry is drawn and reviewed. You choose every component, colour, and finishing detail.</p>
</div>
<div class="process-step reveal">
<span class="step-number">03</span>
<h3>Build</h3>
<p>Your frame is cut, welded, heat-treated, and painted. Assembly is done by a single builder.</p>
</div>
<div class="process-step reveal">
<span class="step-number">04</span>
<h3>Delivery</h3>
<p>We test ride every bike for 25 km. You pick it up in person, or we ship it anywhere in the EU.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="section section-alt">
<div class="container">
<div class="section-label">Riders</div>
<h2>Trusted by families, couriers, and fanatics.</h2>
<div class="quotes-grid">
<div class="quote-card reveal">
<blockquote>“Our Lumen replaced a second car. Four weeks in, both kids call it the magic bus. It is absurdly beautiful and absurdly functional.”</blockquote>
<div class="quote-author">Mette K.<small>Copenhagen, Denmark</small></div>
</div>
<div class="quote-card reveal">
<blockquote>“As a courier, I’ve ridden everything. Nothing feels as planted or as precise as my Lumen. I know exactly where every gram went.”</blockquote>
<div class="quote-author">Emil H.<small>Malmö, Sweden</small></div>
</div>
<div class="quote-card reveal">
<blockquote>“It is the only purchase I’ve ever made that gets more beautiful every year. The patina on the brass and the steel is unreal.”</blockquote>
<div class="quote-author">Sanna T.<small>Aarhus, Denmark</small></div>
</div>
</div>
</div>
</section>
<!-- Craft / materials -->
<section class="section">
<div class="container">
<div class="section-label">Materials & Detail</div>
<h2>No compromises, no catalogue parts.</h2>
<div class="craft-grid">
<div class="craft-item reveal">
<svg class="craft-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M7 7V5h4v2M13 7V5h4v2M3 10h18M9 13h6"/></svg>
<h3>Reynolds 725 Steel</h3>
<p>Air-hardened, double-butted steel. It can be repaired anywhere in the world and rides beautifully forever.</p>
</div>
<div class="craft-item reveal">
<svg class="craft-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16v10H4z"/><path d="M7 7V4h10v3M12 7v10"/><path d="M9 12h6"/></svg>
<h3>Hand-Painted Frames</h3>
<p>Powdercoat, wet paint, or bare oiled steel. We mix custom colours in small batches and hand-brush details.</p>
</div>
<div class="craft-item reveal">
<svg class="craft-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1"/></svg>
<h3>Machined Details</h3>
<p>Hubs, head badges, and cargo box latches are machined in-house from stainless steel and brass.</p>
</div>
<div class="craft-item reveal">
<svg class="craft-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
<h3>Designed for Service</h3>
<p>Every component is standard, accessible, and replaceable. We publish full technical diagrams for your bike.</p>
</div>
</div>
</div>
</section>
<!-- Visit / workshop -->
<section class="section section-alt" id="workshop">
<div class="container visit-grid">
<div class="visit-info">
<div class="section-label">The Workshop</div>
<h2>Come see the bikes being made.</h2>
<p class="lead">We’re an open workshop. Drop in for a coffee, look at the jigs, or take a test ride on a Lumen.</p>
<address>
<strong>Lumen Cycles ApS</strong><br>
Skudehavnsvej 27<br>
2150 Nordhavn, Copenhagen<br>
Denmark<br>
<a href="mailto:hello@lumencycles.dk" style="color:var(--brass); text-decoration:none;">hello@lumencycles.dk</a><br>
+45 22 00 00 00
</address>
<ul class="visit-hours">
<li><strong>Wednesday–Friday</strong><span>10:00–18:00</span></li>
<li><strong>Saturday</strong><span>10:00–16:00</span></li>
<li><strong>Sunday–Tuesday</strong><span>By appointment</span></li>
</ul>
</div>
<div class="visit-map">
<div class="map-pin">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 1116 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>Nordhavn, Copenhagen</span>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="section" id="faq">
<div class="container">
<div class="section-label">Questions</div>
<h2>Everything you might want to know.</h2>
<div class="faq-list">
<details>
<summary>How long does a build take?</summary>
<div class="faq-content">
<p>From confirmed design to delivery is typically 4–6 weeks. Bikes with electric assist or custom paint can take 6–8 weeks. We’ll give you a fixed date before you place the order.</p>
</div>
</details>
<details>
<summary>Can I test ride before ordering?</summary>
<div class="faq-content">
<p>Yes. We keep three demo bikes in the workshop at all times. You can also ask to borrow one for a day — we only ask that you fill it with something heavy.</p>
</div>
</details>
<details>
<summary>Do you ship outside Denmark?</summary>
<div class="faq-content">
<p>We ship to all EU countries at no cost. Bikes are carefully crated and insured during transport. For countries outside the EU, we can arrange shipping on request.</p>
</div>
</details>
<details>
<summary>What is the warranty?</summary>
<div class="faq-content">
<p>Our frames carry a 10-year warranty. All original parts are covered for 2 years. We also offer a lifetime repair discount for Lumen owners — and we mean lifetime.</p>
</div>
</details>
<details>
<summary>Can I bring my existing cargo bike for repair?</summary>
<div class="faq-content">
<p>We service many brands of cargo bikes, but priority is given to Lumen frame owners. If you’re thinking about upgrading, we offer a trade-in assessment.</p>
</div>
</details>
</div>
</div>
</section>
<!-- CTA + Contact -->
<section class="cta-section" id="contact">
<div class="container">
<div class="section-label" style="color:var(--brass);">Start your build</div>
<h2>Tell us what you need. We’ll draw the rest.</h2>
<p>Book a free consultation in the workshop or online. We’ll ask the right questions and send you a design proposal within a week.</p>
<div class="cta-buttons">
<a href="mailto:hello@lumencycles.dk" class="btn btn-primary">Email us directly</a>
<a href="#workshop" class="btn btn-secondary">Visit the workshop</a>
</div>
<form class="newsletter-form" id="newsletterForm">
<input type="email" name="email" placeholder="Your email address" aria-label="Email address" required>
<button type="submit" class="btn btn-primary">Notify me</button>
<div class="newsletter-status" id="newsletterStatus" role="status"></div>
</form>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<a href="#" class="logo">
<svg class="logo-mark" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17" cy="17" r="15" stroke="currentColor" stroke-width="2"/>
<circle cx="17" cy="17" r="6" stroke="currentColor" stroke-width="2"/>
<path d="M17 2v6M17 26v6M2 17h6M26 17h6" stroke="currentColor" stroke-width="2"/>
</svg>
<span>Lumen Cycles</span>
</a>
<p>Hand-built cargo bikes from Copenhagen. Made to order, made to last.</p>
</div>
<div class="footer-col">
<h4>Explore</h4>
<ul>
<li><a href="#models">Models</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#workshop">Workshop</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Company</h4>
<ul>
<li><a href="#philosophy">Our story</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Careers</a></li>
<li><a href="#contact">Press</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Legal</h4>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Cookies</a></li>
<li><a href="#">Imprint</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<span>© <span id="year">2025</span> Lumen Cycles ApS. All rights reserved.</span>
<span>CVR 4210 9988 · Design by the workshop</span>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
menuToggle.addEventListener('click', () => {
const isOpen = mobileMenu.classList.toggle('open');
menuToggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
const href = this.getAttribute('href');
if (href.length > 1) {
const target = document.querySelector(href);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
if (mobileMenu.classList.contains('open')) {
mobileMenu.classList.remove('open');
menuToggle.setAttribute('aria-expanded', 'false');
}
}
}
});
});
// Reveal on scroll
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
revealObserver.unobserve(entry.target);
}
});
}, { threshold: 0.15 });
document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
// Animated counters
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const target = parseInt(el.getAttribute('data-target'), 10);
if (isNaN(target)) return;
let current = 0;
const increment = Math.max(1, Math.floor(target / 60));
const timer = setInterval(() => {
current += increment;
if (current >= target) {
current = target;
clearInterval(timer);
}
el.textContent = current;
}, 16);
counterObserver.unobserve(el);
}
});
}, { threshold: 0.4 });
document.querySelectorAll('.stat-number').forEach(el => counterObserver.observe(el));
// Newsletter form (demo)
const newsletterForm = document.getElementById('newsletterForm');
const newsletterStatus = document.getElementById('newsletterStatus');
if (newsletterForm) {
newsletterForm.addEventListener('submit', (e) => {
e.preventDefault();
newsletterStatus.textContent = 'Thank you — we will be in touch with the next build slot.';
newsletterForm.reset();
});
}
// Year
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</body>
</html>

