Run details
- Model
- google/gemini-4-argon
- Route
- OpenRouter API, one user message
- Reasoning
- provider default
- Limits
- 60 min · 60,000 output tokens
- Date
- 21 Oct 2026
- Time
- 4 min 14 s
- Size
- 72 kB
- Tokens
- 120 in, 21,238 out
- List price
- $0.21 ($2 in / $10 out per M)
- Paid
- $0.21
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
72 kB 1,657 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 — Copenhagen</title>
<style>
:root {
--bg-primary: #F4F1EA;
--bg-secondary: #EBE6DC;
--bg-dark: #181817;
--text-primary: #181817;
--text-secondary: #5A5852;
--text-light: #F4F1EA;
--accent-rust: #B84A27;
--accent-forest: #24382C;
--accent-brass: #C59B27;
--border-color: #D6D1C7;
--border-dark: #333330;
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-serif: "Instrument Serif", "Playfair Display", Georgia, "Times New Roman", serif;
--font-mono: "SF Mono", "JetBrains Mono", Consolas, "Courier New", monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
background-color: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
body {
overflow-x: hidden;
}
/* Typography & Utility */
h1, h2, h3, .serif {
font-family: var(--font-serif);
font-weight: 400;
}
.mono {
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.grid {
display: grid;
gap: 2rem;
}
.border-top { border-top: 1px solid var(--border-color); }
.border-bottom { border-bottom: 1px solid var(--border-color); }
a {
color: inherit;
text-decoration: none;
}
button, .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem 2rem;
font-family: var(--font-mono);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
border: 1px solid var(--text-primary);
background: transparent;
color: var(--text-primary);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
button:hover, .btn:hover {
background: var(--text-primary);
color: var(--bg-primary);
}
.btn-primary {
background: var(--text-primary);
color: var(--bg-primary);
}
.btn-primary:hover {
background: var(--accent-rust);
border-color: var(--accent-rust);
color: var(--text-light);
}
/* Header / Navigation */
header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(244, 241, 234, 0.9);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
}
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
letter-spacing: 0.15em;
font-size: 1rem;
}
.nav-links {
display: flex;
gap: 3rem;
list-style: none;
}
.nav-links a {
font-size: 0.9rem;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0%;
height: 1px;
background: var(--text-primary);
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* Hero Section */
.hero {
padding: 4rem 0 6rem 0;
min-height: calc(100vh - 80px);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hero-header {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: end;
margin-bottom: 3rem;
}
.hero-title {
font-size: clamp(3.5rem, 6vw, 6.5rem);
line-height: 0.95;
letter-spacing: -0.02em;
}
.hero-subtitle {
color: var(--text-secondary);
font-size: 1.1rem;
margin-bottom: 1.5rem;
max-width: 40ch;
}
.hero-visual {
width: 100%;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
padding: 3rem;
position: relative;
overflow: hidden;
}
.blueprint-meta {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
color: var(--text-secondary);
}
.hero-svg-wrapper {
width: 100%;
aspect-ratio: 21 / 9;
display: flex;
align-items: center;
justify-content: center;
}
.hero-svg-wrapper svg {
width: 100%;
height: 100%;
overflow: visible;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--border-color);
padding-top: 2rem;
margin-top: 3rem;
}
.stat-item h4 {
color: var(--text-secondary);
margin-bottom: 0.5rem;
}
.stat-item p {
font-size: 1.5rem;
font-family: var(--font-serif);
}
/* Philosophy / Editorial Section */
.editorial {
padding: 8rem 0;
border-top: 1px solid var(--border-color);
}
.editorial-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
}
.section-label {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--accent-rust);
}
.section-label::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: var(--accent-rust);
border-radius: 50%;
}
.editorial-content h2 {
font-size: clamp(2rem, 3.5vw, 3.5rem);
line-height: 1.15;
margin-bottom: 3rem;
}
.pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
border-top: 1px solid var(--border-color);
padding-top: 3rem;
}
.pillar-card svg {
width: 48px;
height: 48px;
margin-bottom: 1.5rem;
stroke: var(--text-primary);
stroke-width: 1.2;
fill: none;
}
.pillar-card h3 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}
.pillar-card p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
}
/* Interactive Configurator */
.configurator-section {
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 6rem 0;
}
.config-header {
margin-bottom: 4rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.config-header h2 {
font-size: 3rem;
line-height: 1;
}
.config-workspace {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 4rem;
align-items: start;
}
.config-stage {
background: var(--bg-primary);
border: 1px solid var(--border-color);
padding: 3rem;
position: sticky;
top: 120px;
}
.stage-canvas {
width: 100%;
aspect-ratio: 16/10;
position: relative;
}
.stage-canvas svg {
width: 100%;
height: 100%;
transition: all 0.3s ease;
}
.stage-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-color);
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.swatch-preview {
display: flex;
align-items: center;
gap: 0.75rem;
}
.swatch-dot {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.2);
}
.config-controls {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.control-group {
border-bottom: 1px solid var(--border-color);
padding-bottom: 2rem;
}
.control-header {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.control-title {
font-weight: 600;
font-size: 1.1rem;
}
/* Color Swatches */
.color-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.color-btn {
padding: 0.75rem;
border: 1px solid var(--border-color);
background: var(--bg-primary);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.color-btn .circle {
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.15);
}
.color-btn.active {
border-color: var(--text-primary);
box-shadow: inset 0 0 0 1px var(--text-primary);
}
/* Radio Card Options */
.radio-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.radio-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
cursor: pointer;
transition: all 0.2s ease;
}
.radio-card:hover {
border-color: #999;
}
.radio-card.active {
border-color: var(--text-primary);
box-shadow: inset 0 0 0 1px var(--text-primary);
background: #FAF8F5;
}
.radio-info h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.2rem;
}
.radio-info p {
font-size: 0.85rem;
color: var(--text-secondary);
}
.radio-price {
font-family: var(--font-mono);
font-size: 0.85rem;
}
/* Summary Box */
.summary-box {
background: var(--bg-dark);
color: var(--text-light);
padding: 2.5rem;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.75rem;
font-size: 0.9rem;
color: #A09E97;
}
.summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
border-top: 1px solid var(--border-dark);
padding-top: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 2rem;
}
.total-price {
font-size: 2.5rem;
font-family: var(--font-serif);
color: var(--text-light);
}
.summary-box .btn-primary {
width: 100%;
background: var(--text-light);
color: var(--bg-dark);
border-color: var(--text-light);
}
.summary-box .btn-primary:hover {
background: var(--accent-rust);
border-color: var(--accent-rust);
color: var(--text-light);
}
/* Specifications Table */
.specs-section {
padding: 8rem 0;
}
.specs-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
}
.spec-table {
width: 100%;
border-collapse: collapse;
}
.spec-table tr {
border-bottom: 1px solid var(--border-color);
}
.spec-table th, .spec-table td {
padding: 1.5rem 0;
text-align: left;
vertical-align: top;
}
.spec-table th {
width: 35%;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.spec-table td {
font-size: 1.05rem;
}
/* The Process / Workshop */
.workshop-section {
background: var(--bg-dark);
color: var(--text-light);
padding: 8rem 0;
}
.workshop-header {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-bottom: 6rem;
}
.workshop-header h2 {
font-size: clamp(2.5rem, 4vw, 4rem);
line-height: 1.05;
}
.timeline {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
border-top: 1px solid var(--border-dark);
padding-top: 3rem;
}
.step-num {
color: var(--accent-rust);
margin-bottom: 1rem;
display: block;
}
.timeline-step h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.timeline-step p {
color: #9E9C94;
font-size: 0.95rem;
line-height: 1.6;
}
/* Footer */
footer {
background: var(--bg-primary);
border-top: 1px solid var(--border-color);
padding: 6rem 0 3rem 0;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 4rem;
margin-bottom: 6rem;
}
.footer-brand h3 {
font-size: 2rem;
margin-bottom: 1rem;
}
.footer-brand p {
color: var(--text-secondary);
max-width: 30ch;
margin-bottom: 2rem;
}
.footer-col h4 {
margin-bottom: 1.5rem;
color: var(--text-secondary);
}
.footer-col ul {
list-style: none;
}
.footer-col li {
margin-bottom: 0.75rem;
}
.footer-col a:hover {
text-decoration: underline;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--border-color);
padding-top: 2rem;
color: var(--text-secondary);
}
/* Modal */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(24, 24, 23, 0.8);
backdrop-filter: blur(5px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
pointer-events: all;
}
.modal-content {
background: var(--bg-primary);
border: 1px solid var(--border-color);
width: 100%;
max-width: 650px;
padding: 3.5rem;
position: relative;
transform: translateY(20px);
transition: transform 0.3s ease;
max-height: 90vh;
overflow-y: auto;
}
.modal-overlay.active .modal-content {
transform: translateY(0);
}
.modal-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: none;
border: none;
font-size: 1.5rem;
padding: 0.5rem;
cursor: pointer;
color: var(--text-primary);
}
.modal-close:hover {
background: transparent;
color: var(--accent-rust);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
}
.form-control {
width: 100%;
padding: 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
font-family: var(--font-sans);
font-size: 1rem;
color: var(--text-primary);
}
.form-control:focus {
outline: none;
border-color: var(--text-primary);
}
.config-recap {
background: var(--bg-secondary);
padding: 1.25rem;
border-left: 3px solid var(--accent-rust);
margin: 1.5rem 0;
font-size: 0.9rem;
}
/* SVG Animation & Styling */
.cad-line {
stroke-dasharray: 4 4;
stroke: #9E998E;
stroke-width: 1;
}
.dim-text {
font-family: var(--font-mono);
font-size: 11px;
fill: #7A766E;
}
/* Responsive */
@media (max-width: 1024px) {
.hero-header, .editorial-grid, .config-workspace, .specs-grid, .workshop-header {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.pillars {
grid-template-columns: 1fr;
}
.timeline, .hero-stats, .footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.config-stage {
position: relative;
top: 0;
}
}
@media (max-width: 640px) {
.nav-links { display: none; }
.timeline, .hero-stats, .footer-grid, .color-options {
grid-template-columns: 1fr;
}
.hero-svg-wrapper {
aspect-ratio: 4/3;
}
.modal-content {
padding: 2rem;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<header>
<div class="container nav-bar">
<a href="#" class="logo">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<line x1="12" y1="2" x2="12" y2="22"/>
<line x1="2" y1="12" x2="22" y2="12"/>
<circle cx="12" cy="12" r="4" fill="var(--bg-primary)"/>
</svg>
LUMEN CYCLES
</a>
<ul class="nav-links mono">
<li><a href="#philosophy">Philosophy</a></li>
<li><a href="#commission">Commission</a></li>
<li><a href="#specifications">Specifications</a></li>
<li><a href="#workshop">Refshaleøen Workshop</a></li>
</ul>
<a href="#commission" class="btn btn-primary">Configure Yours</a>
</div>
</header>
<!-- Hero Section -->
<section class="hero container">
<div class="hero-header">
<div>
<div class="mono" style="color: var(--accent-rust); margin-bottom: 1rem;">MODEL 01 // LONG-JOHN OMNIUM</div>
<h1 class="hero-title">Utility, elevated to architecture.</h1>
</div>
<div>
<p class="hero-subtitle">Bespoke chromoly steel cargo bicycles. Fillet-brazed to order on Refshaleøen, Copenhagen. Engineered to replace your car and outlive its maker.</p>
<div style="display: flex; gap: 1rem; align-items: center;">
<a href="#commission" class="btn btn-primary">Start a Commission</a>
<span class="mono" style="color: var(--text-secondary);">From €4,200</span>
</div>
</div>
</div>
<!-- Technical Blueprint Hero Illustration -->
<div class="hero-visual">
<div class="blueprint-meta mono">
<span>SCALE: 1:10 // DWG NO. CPH-2025-L01</span>
<span>55.6919° N, 12.6163° E</span>
</div>
<div class="hero-svg-wrapper">
<svg viewBox="0 0 1100 440" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Grid & CAD Lines -->
<g opacity="0.5">
<line x1="0" y1="360" x2="1100" y2="360" stroke="#9E998E" stroke-width="1"/>
<!-- Wheelbase markers -->
<line x1="200" y1="260" x2="200" y2="420" class="cad-line"/>
<line x1="920" y1="295" x2="920" y2="420" class="cad-line"/>
<line x1="200" y1="405" x2="920" y2="405" stroke="#7A766E" stroke-width="1"/>
<circle cx="200" cy="405" r="3" fill="#7A766E"/>
<circle cx="920" cy="405" r="3" fill="#7A766E"/>
<text x="560" y="395" text-anchor="middle" class="dim-text">WHEELBASE: 1980 MM</text>
<!-- Total Length markers -->
<line x1="90" y1="260" x2="90" y2="435" class="cad-line"/>
<line x1="1000" y1="295" x2="1000" y2="435" class="cad-line"/>
<line x1="90" y1="430" x2="1000" y2="430" stroke="#7A766E" stroke-width="1"/>
<text x="545" y="423" text-anchor="middle" class="dim-text">OVERALL LENGTH: 2540 MM</text>
<!-- Head tube angle callout -->
<line x1="400" y1="70" x2="465" y2="310" class="cad-line"/>
<text x="390" y="55" class="dim-text">71.5° HTA / CABLE STEER</text>
<!-- Cargo Bed Callout -->
<line x1="490" y1="150" x2="880" y2="150" stroke="#7A766E" stroke-width="1"/>
<line x1="490" y1="145" x2="490" y2="155" stroke="#7A766E" stroke-width="1"/>
<line x1="880" y1="145" x2="880" y2="155" stroke="#7A766E" stroke-width="1"/>
<text x="685" y="140" text-anchor="middle" class="dim-text">LOAD BAY: 820 MM (MAX 100 KG)</text>
</g>
<!-- REAR WHEEL (27.5") -->
<g id="hero-rear-wheel">
<!-- Spokes -->
<g stroke="#8C8881" stroke-width="1">
<line x1="200" y1="160" x2="200" y2="360"/><line x1="100" y1="260" x2="300" y2="260"/>
<line x1="129" y1="189" x2="271" y2="331"/><line x1="129" y1="331" x2="271" y2="189"/>
<line x1="162" y1="167" x2="238" y2="353"/><line x1="107" y1="222" x2="293" y2="298"/>
<line x1="107" y1="298" x2="293" y2="222"/><line x1="162" y1="353" x2="238" y2="167"/>
</g>
<!-- Brake Rotor -->
<circle cx="200" cy="260" r="28" stroke="#7A766E" stroke-width="2" stroke-dasharray="6 3"/>
<!-- Tire & Rim -->
<circle cx="200" cy="260" r="98" stroke="#181817" stroke-width="14"/>
<circle cx="200" cy="260" r="89" stroke="#C59B27" stroke-width="2" opacity="0.6"/> <!-- Tan wall hint -->
<circle cx="200" cy="260" r="86" stroke="#181817" stroke-width="3"/>
<!-- Rear Fender -->
<path d="M 88 260 A 112 112 0 0 1 295 198" stroke="#181817" stroke-width="4" stroke-linecap="round"/>
<line x1="200" y1="260" x2="105" y2="205" stroke="#5A5852" stroke-width="2"/>
</g>
<!-- FRONT WHEEL (20") -->
<g id="hero-front-wheel">
<!-- Spokes -->
<g stroke="#8C8881" stroke-width="1">
<line x1="920" y1="225" x2="920" y2="365"/><line x1="850" y1="295" x2="990" y2="295"/>
<line x1="870" y1="245" x2="970" y2="345"/><line x1="870" y1="345" x2="970" y2="245"/>
<line x1="893" y1="230" x2="947" y2="360"/><line x1="855" y1="268" x2="985" y2="322"/>
</g>
<!-- Brake Rotor -->
<circle cx="920" cy="295" r="24" stroke="#7A766E" stroke-width="2" stroke-dasharray="6 3"/>
<!-- Tire & Rim -->
<circle cx="920" cy="295" r="68" stroke="#181817" stroke-width="14"/>
<circle cx="920" cy="295" r="59" stroke="#C59B27" stroke-width="2" opacity="0.6"/>
<circle cx="920" cy="295" r="56" stroke="#181817" stroke-width="3"/>
<!-- Front Fender -->
<path d="M 842 310 A 80 80 0 0 1 975 235" stroke="#181817" stroke-width="4" stroke-linecap="round"/>
<line x1="920" y1="295" x2="852" y2="275" stroke="#5A5852" stroke-width="2"/>
</g>
<!-- WOODEN CARGO BOX (Hero Feature) -->
<g id="hero-cargo-box">
<!-- Side Panel (Baltic Birch / Ash) -->
<polygon points="462,285 480,175 885,188 855,285" fill="#DFC39D" stroke="#181817" stroke-width="2"/>
<!-- Wood Slats Detail -->
<line x1="474" y1="210" x2="878" y2="218" stroke="#B89972" stroke-width="1.5"/>
<line x1="468" y1="245" x2="867" y2="250" stroke="#B89972" stroke-width="1.5"/>
<!-- Structural Corner Brackets -->
<path d="M 480,175 L 495,175 L 477,285 L 462,285 Z" fill="#2A2927"/>
<path d="M 870,188 L 885,188 L 855,285 L 840,285 Z" fill="#2A2927"/>
<!-- Brass Rivets -->
<circle cx="485" cy="192" r="2" fill="#C59B27"/>
<circle cx="480" cy="227" r="2" fill="#C59B27"/>
<circle cx="474" cy="265" r="2" fill="#C59B27"/>
<circle cx="873" cy="203" r="2" fill="#C59B27"/>
<circle cx="863" cy="235" r="2" fill="#C59B27"/>
<circle cx="853" cy="268" r="2" fill="#C59B27"/>
</g>
<!-- DRIVETRAIN (Gates Carbon Belt) -->
<g id="hero-drivetrain">
<!-- Belt -->
<path d="M 200 246 L 370 258 L 370 302 L 200 274 Z" fill="none" stroke="#333330" stroke-width="4"/>
<!-- Rear Hub (Rohloff / Enviolo) -->
<circle cx="200" cy="260" r="18" fill="#181817" stroke="#5A5852" stroke-width="2"/>
<!-- Bottom Bracket / Motor Unit -->
<path d="M 345 275 C 345 255, 395 255, 405 280 C 405 305, 355 310, 345 275 Z" fill="#2A2927" stroke="#181817" stroke-width="2"/>
<circle cx="370" cy="280" r="22" fill="none" stroke="#7A766E" stroke-width="3" stroke-dasharray="4 2"/>
<circle cx="370" cy="280" r="8" fill="#C59B27"/>
</g>
<!-- CHROMOLY FRAME (Fillet Brazed Rust) -->
<g id="hero-frame" stroke="#B84A27" stroke-linecap="round" stroke-linejoin="round">
<!-- Rear Triangle -->
<line x1="200" y1="260" x2="370" y2="280" stroke-width="9"/> <!-- Chainstay -->
<line x1="200" y1="260" x2="338" y2="165" stroke-width="7"/> <!-- Seatstay -->
<!-- Seat Tube -->
<line x1="370" y1="280" x2="328" y2="130" stroke-width="11"/>
<!-- Top / Mid Tube -->
<path d="M 336 160 C 380 185, 410 215, 438 205" stroke-width="9" fill="none"/>
<!-- Main Spine (Under-bed) -->
<path d="M 370 280 L 455 290 L 860 290 L 908 195" stroke-width="14" fill="none"/>
<!-- Steerer Column (Rear) -->
<line x1="455" y1="290" x2="422" y2="125" stroke-width="11"/>
<!-- Down-tube reinforcement gusset -->
<path d="M 390 282 L 442 225 L 455 290 Z" fill="#B84A27" stroke="none"/>
<!-- Head Tube (Front) -->
<line x1="898" y1="170" x2="914" y2="225" stroke-width="12"/>
<!-- Front Fork -->
<path d="M 908 205 L 920 295" stroke-width="10"/>
<!-- Cargo Bed Steel Perimeter Rail -->
<path d="M 442 200 L 895 200" stroke="#181817" stroke-width="5"/>
</g>
<!-- COCKPIT, SADDLE & DETAILS -->
<g id="hero-cockpit">
<!-- Seatpost -->
<line x1="328" y1="130" x2="315" y2="85" stroke="#181817" stroke-width="7"/>
<!-- Brass Seat Clamp -->
<rect x="321" y="124" width="14" height="6" transform="rotate(-16 328 127)" fill="#C59B27"/>
<!-- Brooks-style Leather Saddle -->
<path d="M 280 85 C 295 85, 330 88, 345 78 C 340 92, 315 98, 285 95 Z" fill="#3A2314" stroke="#181817" stroke-width="1.5"/>
<circle cx="286" cy="90" r="1.5" fill="#C59B27"/>
<circle cx="338" cy="82" r="1.5" fill="#C59B27"/>
<!-- Stem & Swept-back Handlebars -->
<path d="M 422 125 L 412 75 L 430 68" stroke="#181817" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M 430 68 C 415 68, 395 75, 375 82" stroke="#181817" stroke-width="6" stroke-linecap="round" fill="none"/>
<!-- Leather Grips -->
<line x1="395" y1="75" x2="372" y2="83" stroke="#3A2314" stroke-width="8" stroke-linecap="round"/>
<!-- Supernova Headlight -->
<g transform="translate(912, 185)">
<rect x="0" y="0" width="14" height="10" rx="2" fill="#181817"/>
<line x1="14" y1="2" x2="14" y2="8" stroke="#C59B27" stroke-width="2"/>
<!-- Light beam hint -->
<polygon points="16,2 90,-15 90,35 16,8" fill="url(#beam-grad)" opacity="0.25"/>
</g>
<!-- Center Kickstand (Deployed) -->
<line x1="475" y1="292" x2="455" y2="360" stroke="#181817" stroke-width="6" stroke-linecap="round"/>
<circle cx="475" cy="292" r="4" fill="#C59B27"/>
</g>
<defs>
<linearGradient id="beam-grad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#C59B27"/>
<stop offset="100%" stop-color="#C59B27" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
</div>
</div>
<div class="hero-stats">
<div class="stat-item">
<h4 class="mono">TUBING</h4>
<p>Reynolds 853 & Columbus Zona</p>
</div>
<div class="stat-item">
<h4 class="mono">PAYLOAD CAPACITY</h4>
<p>100 kg Bay + 120 kg Rider</p>
</div>
<div class="stat-item">
<h4 class="mono">STEERING</h4>
<p>Dual-Redundant Dyneema Cable</p>
</div>
<div class="stat-item">
<h4 class="mono">LEAD TIME</h4>
<p>6 Weeks, Built to Measure</p>
</div>
</div>
</section>
<!-- Philosophy / Editorial Section -->
<section id="philosophy" class="editorial">
<div class="container editorial-grid">
<div>
<div class="section-label mono">01 // THE ARCHITECTURE OF UTILITY</div>
<p style="margin-top: 2rem; color: var(--text-secondary); font-size: 0.95rem; max-width: 30ch;">
Copenhagen does not forgive fragile machinery. Salt air, cobblestones, and year-round rain demand an uncompromising standard of metallurgic and mechanical honesty.
</p>
</div>
<div class="editorial-content">
<h2>Most cargo bikes are stamped from aluminum in distant factories and glued together for a five-year lifecycle. We build heirloom steel machines designed for thirty.</h2>
<div class="pillars">
<div class="pillar-card">
<svg viewBox="0 0 48 48">
<path d="M8 40 L40 8 M16 8 L40 8 L40 32"/>
<circle cx="18" cy="30" r="8"/>
<path d="M12 24 C18 24, 24 18, 24 12"/>
</svg>
<h3>Fillet-Brazed Chromoly</h3>
<p>Every junction is hand-mitered and silver-brazed at low temperatures in our Refshaleøen workshop, preserving tube strength and creating seamless, flowing joints that absorb road chatter.</p>
</div>
<div class="pillar-card">
<svg viewBox="0 0 48 48">
<circle cx="24" cy="24" r="18" stroke-dasharray="4 4"/>
<circle cx="24" cy="24" r="10"/>
<line x1="24" y1="2" x2="24" y2="14"/>
<line x1="24" y1="34" x2="24" y2="46"/>
</svg>
<h3>Zero-Creak Cable Steer</h3>
<p>Rejecting clunky linkage rods, our sealed pulley steering system offers an 85-degree turning radius. Maneuver tight courtyard bike racks with the agility of a standard commuter.</p>
</div>
<div class="pillar-card">
<svg viewBox="0 0 48 48">
<rect x="6" y="14" width="36" height="20" rx="10"/>
<circle cx="16" cy="24" r="4"/>
<circle cx="32" cy="24" r="4"/>
<line x1="16" y1="20" x2="32" y2="20"/>
<line x1="16" y1="28" x2="32" y2="28"/>
</svg>
<h3>Weatherproof Drivetrain</h3>
<p>Grease attracts grit. Every Lumen is built exclusively around a Gates Carbon Drive belt and fully sealed internal gear hubs. Silent, oil-free, and impervious to Danish winters.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Interactive Configurator Section -->
<section id="commission" class="configurator-section">
<div class="container">
<div class="config-header">
<div>
<div class="section-label mono" style="margin-bottom: 1rem;">02 // BESPOKE COMMISSION</div>
<h2>Configure Model 01</h2>
</div>
<div class="mono" style="color: var(--text-secondary);">
NEXT PRODUCTION SLOT: <strong style="color: var(--text-primary);">BATCH #14 (4 WEEKS)</strong>
</div>
</div>
<div class="config-workspace">
<!-- Left: Sticky Interactive Stage -->
<div class="config-stage">
<div class="blueprint-meta mono">
<span id="stage-config-code">SPEC: L01-RST-BOX-ACO</span>
<span>EST. WEIGHT: <strong id="stage-weight">21.4 KG</strong></span>
</div>
<div class="stage-canvas">
<!-- Dynamic SVG updated via JS -->
<svg viewBox="0 0 900 420" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Ground shadow -->
<ellipse cx="460" cy="375" rx="410" ry="8" fill="#E0DBD0"/>
<!-- REAR WHEEL -->
<g>
<g stroke="#9E998E" stroke-width="1">
<line x1="160" y1="180" x2="160" y2="365"/><line x1="68" y1="272" x2="252" y2="272"/>
<line x1="95" y1="207" x2="225" y2="337"/><line x1="95" y1="337" x2="225" y2="207"/>
</g>
<circle cx="160" cy="272" r="24" stroke="#7A766E" stroke-width="2"/>
<circle cx="160" cy="272" r="90" stroke="#181817" stroke-width="13"/>
<circle cx="160" cy="272" r="82" stroke="#C59B27" stroke-width="2" opacity="0.7"/>
<circle cx="160" cy="272" r="79" stroke="#181817" stroke-width="3"/>
<path d="M 58 272 A 102 102 0 0 1 248 216" stroke="#181817" stroke-width="4" stroke-linecap="round"/>
</g>
<!-- FRONT WHEEL -->
<g>
<g stroke="#9E998E" stroke-width="1">
<line x1="780" y1="242" x2="780" y2="365"/><line x1="718" y1="304" x2="842" y2="304"/>
<line x1="736" y1="260" x2="824" y2="348"/><line x1="736" y1="348" x2="824" y2="260"/>
</g>
<circle cx="780" cy="304" r="20" stroke="#7A766E" stroke-width="2"/>
<circle cx="780" cy="304" r="62" stroke="#181817" stroke-width="13"/>
<circle cx="780" cy="304" r="54" stroke="#C59B27" stroke-width="2" opacity="0.7"/>
<circle cx="780" cy="304" r="51" stroke="#181817" stroke-width="3"/>
<path d="M 708 316 A 74 74 0 0 1 832 250" stroke="#181817" stroke-width="4" stroke-linecap="round"/>
</g>
<!-- DYNAMIC MODULES: CARGO BAY -->
<!-- Option 1: Flatbed -->
<g id="svg-mod-flatbed" style="display: none;">
<rect x="395" y="280" width="340" height="8" fill="#2A2927"/>
<line x1="415" y1="280" x2="415" y2="270" stroke="#C59B27" stroke-width="3"/>
<line x1="565" y1="280" x2="565" y2="270" stroke="#C59B27" stroke-width="3"/>
<line x1="715" y1="280" x2="715" y2="270" stroke="#C59B27" stroke-width="3"/>
</g>
<!-- Option 2: Ash & Birch Box (Default) -->
<g id="svg-mod-box">
<polygon points="390,288 408,185 752,198 725,288" fill="#DFC39D" stroke="#181817" stroke-width="2"/>
<line x1="402" y1="218" x2="745" y2="226" stroke="#B89972" stroke-width="1.5"/>
<line x1="396" y1="252" x2="735" y2="257" stroke="#B89972" stroke-width="1.5"/>
<path d="M 408,185 L 422,185 L 404,288 L 390,288 Z" fill="#2A2927"/>
<path d="M 738,198 L 752,198 L 725,288 L 711,288 Z" fill="#2A2927"/>
<!-- Child bench hint inside -->
<path d="M 425,185 L 445,165 L 460,165 L 450,186 Z" fill="#3A2314"/>
</g>
<!-- Option 3: All-Weather Canopy -->
<g id="svg-mod-canopy" style="display: none;">
<!-- Base box -->
<polygon points="390,288 408,185 752,198 725,288" fill="#DFC39D" stroke="#181817" stroke-width="2"/>
<line x1="402" y1="218" x2="745" y2="226" stroke="#B89972" stroke-width="1.5"/>
<path d="M 408,185 L 422,185 L 404,288 L 390,288 Z" fill="#2A2927"/>
<path d="M 738,198 L 752,198 L 725,288 L 711,288 Z" fill="#2A2927"/>
<!-- Canvas & Clear Window Canopy -->
<path d="M 408,185 C 415,90 560,85 752,198 Z" fill="#2A2927" fill-opacity="0.9" stroke="#181817" stroke-width="2"/>
<path d="M 435,172 C 445,115 550,112 690,182 Z" fill="#EBE6DC" fill-opacity="0.6" stroke="#C59B27" stroke-width="1"/>
<path d="M 550,115 L 535,178" stroke="#181817" stroke-width="2"/>
</g>
<!-- DYNAMIC MODULE: MOTOR & BATTERY -->
<g id="svg-mod-motor" style="display: none;">
<!-- Under-deck battery pack -->
<rect x="440" y="299" width="210" height="18" rx="3" fill="#181817" stroke="#5A5852" stroke-width="1"/>
<circle cx="455" cy="308" r="2" fill="#4CAF50"/>
<circle cx="463" cy="308" r="2" fill="#4CAF50"/>
<circle cx="471" cy="308" r="2" fill="#4CAF50"/>
<!-- Mid-drive motor housing -->
<path d="M 285 285 C 285 262, 340 262, 350 290 C 350 318, 295 322, 285 285 Z" fill="#181817"/>
</g>
<!-- DRIVETRAIN BASE -->
<g>
<path d="M 160 260 L 312 272 L 312 308 L 160 284 Z" fill="none" stroke="#333330" stroke-width="3.5"/>
<circle cx="160" cy="272" r="15" fill="#181817" stroke="#7A766E" stroke-width="2"/>
</g>
<!-- DYNAMIC FRAME COLOR -->
<g id="svg-frame-group" stroke="#B84A27" stroke-linecap="round" stroke-linejoin="round">
<line x1="160" y1="272" x2="312" y2="290" stroke-width="8"/>
<line x1="160" y1="272" x2="282" y2="180" stroke-width="6"/>
<line x1="312" y1="290" x2="274" y2="148" stroke-width="10"/>
<path d="M 280 175 C 320 198, 348 225, 375 215" stroke-width="8" fill="none"/>
<path d="M 312 290 L 388 295 L 730 295 L 770 210" stroke-width="13" fill="none"/>
<line x1="388" y1="295" x2="358" y2="140" stroke-width="10"/>
<path id="svg-frame-gusset" d="M 330 292 L 376 238 L 388 295 Z" fill="#B84A27" stroke="none"/>
<line x1="760" y1="185" x2="774" y2="238" stroke-width="11"/>
<path d="M 768 218 L 780 304" stroke-width="9"/>
<path d="M 378 210 L 758 210" stroke="#181817" stroke-width="4"/>
</g>
<!-- Crankset overlay -->
<circle cx="312" cy="290" r="18" fill="#2A2927" stroke="#C59B27" stroke-width="2"/>
<line x1="312" y1="290" x2="312" y2="318" stroke="#181817" stroke-width="5" stroke-linecap="round"/>
<rect x="302" y="315" width="20" height="5" fill="#C59B27"/>
<!-- COCKPIT & SADDLE -->
<g>
<line x1="274" y1="148" x2="262" y2="105" stroke="#181817" stroke-width="6"/>
<path d="M 230 105 C 245 105, 275 108, 290 98 C 285 112, 262 118, 235 115 Z" fill="#3A2314"/>
<path d="M 358 140 L 348 92 L 365 85 C 350 85, 332 92, 315 98" stroke="#181817" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<line x1="332" y1="92" x2="312" y2="99" stroke="#3A2314" stroke-width="8" stroke-linecap="round"/>
<!-- Kickstand -->
<line x1="405" y1="296" x2="388" y2="365" stroke="#181817" stroke-width="5" stroke-linecap="round"/>
</g>
</svg>
</div>
<div class="stage-footer">
<div class="swatch-preview">
<span class="swatch-dot" id="active-swatch-dot" style="background: #B84A27;"></span>
<span class="mono" id="active-color-name">Copenhagen Rust (RAL 8004)</span>
</div>
<div class="mono" style="color: var(--text-secondary);">POWDER COAT // MATTE FINISH</div>
</div>
</div>
<!-- Right: Controls -->
<div class="config-controls">
<!-- Step 1: Frame Finish -->
<div class="control-group">
<div class="control-header">
<span class="control-title">01. Frame Powder Coat</span>
<span class="mono" style="color: var(--text-secondary);">INCLUDED</span>
</div>
<div class="color-options">
<button class="color-btn active" data-color="#B84A27" data-name="Copenhagen Rust (RAL 8004)" data-code="RST">
<span class="circle" style="background: #B84A27;"></span>
<span class="mono" style="font-size: 0.65rem;">Rust</span>
</button>
<button class="color-btn" data-color="#24382C" data-name="Øresund Pine (RAL 6009)" data-code="PIN">
<span class="circle" style="background: #24382C;"></span>
<span class="mono" style="font-size: 0.65rem;">Pine</span>
</button>
<button class="color-btn" data-color="#222324" data-name="Raw Phosphated Slate" data-code="SLT">
<span class="circle" style="background: #222324;"></span>
<span class="mono" style="font-size: 0.65rem;">Slate</span>
</button>
<button class="color-btn" data-color="#D5CFC2" data-name="Skagen Chalk (RAL 1013)" data-code="CHK">
<span class="circle" style="background: #D5CFC2;"></span>
<span class="mono" style="font-size: 0.65rem;">Chalk</span>
</button>
</div>
</div>
<!-- Step 2: Cargo Architecture -->
<div class="control-group">
<div class="control-header">
<span class="control-title">02. Cargo Bay Architecture</span>
</div>
<div class="radio-options" id="cargo-options">
<div class="radio-card" data-cargo="flatbed" data-price="0" data-weight="0" data-code="FLT" data-label="Utility Flatbed">
<div class="radio-info">
<h4>Utility Flatbed + Brass Lashing Points</h4>
<p>Aircraft-grade aluminum deck with anti-slip marine coating.</p>
</div>
<div class="radio-price">Included</div>
</div>
<div class="radio-card active" data-cargo="box" data-price="380" data-weight="4.2" data-code="BOX" data-label="Marine Birch & Ash Box">
<div class="radio-info">
<h4>Marine Birch & Steam-Bent Ash Box</h4>
<p>Includes removable two-child bench with 5-point Fidlock harnesses.</p>
</div>
<div class="radio-price">+ €380</div>
</div>
<div class="radio-card" data-cargo="canopy" data-price="690" data-weight="5.8" data-code="CNP" data-label="Expedition Box + Canopy">
<div class="radio-info">
<h4>Expedition Box + All-Weather Canopy</h4>
<p>Wood box paired with Waxed Scottish Halley Stevensons canvas hood.</p>
</div>
<div class="radio-price">+ €690</div>
</div>
</div>
</div>
<!-- Step 3: Propulsion & Drivetrain -->
<div class="control-group" style="border-bottom: none; padding-bottom: 0;">
<div class="control-header">
<span class="control-title">03. Drivetrain & Assist</span>
</div>
<div class="radio-options" id="drive-options">
<div class="radio-card active" data-drive="acoustic" data-price="0" data-weight="0" data-code="ACO" data-label="Acoustic / Alfine 11">
<div class="radio-info">
<h4>Acoustic // Shimano Alfine 11 + Gates Belt</h4>
<p>Pure mechanical efficiency. 409% gear range, oil-bathed internal hub.</p>
</div>
<div class="radio-price">Included</div>
</div>
<div class="radio-card" data-drive="rohloff" data-price="950" data-weight="0.4" data-code="ROH" data-label="Acoustic / Rohloff 14">
<div class="radio-info">
<h4>Acoustic // Rohloff Speedhub 500/14 + Gates Belt</h4>
<p>The benchmark of expedition gearing. Hand-built in Germany, 526% range.</p>
</div>
<div class="radio-price">+ €950</div>
</div>
<div class="radio-card" data-drive="electric" data-price="1450" data-weight="6.5" data-code="EP8" data-label="Electric / Shimano EP8 Cargo">
<div class="radio-info">
<h4>Electric Assist // Shimano EP8 Cargo + Enviolo HD</h4>
<p>85Nm torque mid-drive motor, stepless hub, 630Wh under-deck battery.</p>
</div>
<div class="radio-price">+ €1,450</div>
</div>
</div>
</div>
<!-- Summary & Action -->
<div class="summary-box">
<div class="mono" style="color: var(--accent-brass); margin-bottom: 1rem;">BUILD SUMMARY</div>
<div class="summary-row">
<span>Lumen Model 01 Base Chassis</span>
<span class="mono">€3,820</span>
</div>
<div class="summary-row">
<span id="sum-color">Finish: Copenhagen Rust</span>
<span class="mono">€0</span>
</div>
<div class="summary-row">
<span id="sum-cargo">Cargo: Marine Birch & Ash Box</span>
<span class="mono" id="sum-cargo-price">€380</span>
</div>
<div class="summary-row">
<span id="sum-drive">Drive: Acoustic / Alfine 11</span>
<span class="mono" id="sum-drive-price">€0</span>
</div>
<div class="summary-total">
<div>
<span class="mono" style="display: block; color: #A09E97;">TOTAL ESTIMATE (INCL. 25% DANISH VAT)</span>
<span class="mono" style="font-size: 0.7rem; color: #7A766E;">€500 refundable deposit required to lock build slot</span>
</div>
<div class="total-price" id="sum-total">€4,200</div>
</div>
<button class="btn btn-primary" id="open-modal-btn">Reserve Production Slot</button>
</div>
</div>
</div>
</div>
</section>
<!-- Technical Specifications -->
<section id="specifications" class="specs-section container">
<div class="specs-grid">
<div>
<div class="section-label mono">03 // COMPONENT LEDGER</div>
<h2 style="font-size: 2.75rem; margin-top: 1rem; line-height: 1.1;">No proprietary traps.</h2>
<p style="margin-top: 1.5rem; color: var(--text-secondary);">
We refuse to design custom plastic parts that become obsolete in three years. Every bearing, caliper, and spoke on a Lumen is serviceable by any competent mechanic in the world.
</p>
</div>
<div>
<table class="spec-table">
<tbody>
<tr>
<th>Frame & Fork</th>
<td>Double-butted Reynolds 853 main spine, Columbus Zona rear triangle. Silver fillet-brazed by hand. Internal anti-corrosion ED coating prior to powder coat.</td>
</tr>
<tr>
<th>Braking System</th>
<td>Magura MT5 4-piston hydraulic disc brakes front and rear. 203mm floating storm rotors for fade-free stopping with 100kg loads.</td>
</tr>
<tr>
<th>Wheels & Tires</th>
<td>Hand-laced in house. 27.5" rear / 20" front DT Swiss HU 1900 Cargo rims (36H). Schwalbe Pick-Up Super Defense puncture-resistant cargo tires.</td>
</tr>
<tr>
<th>Lighting & Dynamo</th>
<td>SON 28 front dynamo hub (or direct e-bike battery integration) powering a Supernova M99 Mini Pro headlight and fender-integrated tail light.</td>
</tr>
<tr>
<th>Contact Points</th>
<td>Brooks Cambium C17 vulcanized natural rubber saddle (weatherproof). Ergon cork-composite swept grips. CNC-machined platform pedals.</td>
</tr>
<tr>
<th>Geometry & Fit</th>
<td>Adaptive cockpit fits riders from 158cm to 198cm via quick-release seatpost and adjustable stem. Custom frame sizing available upon request.</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- The Workshop / Process -->
<section id="workshop" class="workshop-section">
<div class="container">
<div class="workshop-header">
<div>
<div class="section-label mono" style="color: var(--accent-brass);">04 // REFSHALEØEN WORKSHOP</div>
<h2 style="margin-top: 1rem;">Built in a former shipyard, three kilometers from Nyhavn.</h2>
</div>
<div style="display: flex; flex-direction: column; justify-content: flex-end;">
<p style="color: #9E9C94; font-size: 1.1rem; max-width: 45ch;">
We build forty-five bicycles a year. We do not have dealers, middlemen, or seasonal model years. When you commission a Lumen, you speak directly to the framebuilder holding the torch.
</p>
</div>
</div>
<div class="timeline">
<div class="timeline-step">
<span class="mono step-num">WEEK 01 // CONSULTATION</span>
<h3>Sizing & Ergonomics</h3>
<p>Visit us on Refshalevej for espresso and a test ride, or complete a remote biomechanical fit session. We finalize your tubing gauge, cockpit reach, and cargo requirements.</p>
</div>
<div class="timeline-step">
<span class="mono step-num">WEEK 02–03 // FABRICATION</span>
<h3>Miter & Torch</h3>
<p>Tubes are cut, mitered to hundredths of a millimeter, and locked into our precision jig. Brass and silver filler metals are flowed by hand to create organic, stress-relieved fillets.</p>
</div>
<div class="timeline-step">
<span class="mono step-num">WEEK 04–05 // FINISHING</span>
<h3>Coat & Joinery</h3>
<p>While the frame receives its zinc-phosphate bath and industrial powder coat, our cabinetmaker steam-bends the Danish ash rails and finishes the marine birch panels with raw tung oil.</p>
</div>
<div class="timeline-step">
<span class="mono step-num">WEEK 06 // HANDOVER</span>
<h3>Assembly & Shakedown</h3>
<p>Wheels are tensioned and trued by hand. Every bolt is torqued and logged. Your bike undergoes a 30km loaded test ride around Amager before handover or crated EU freight.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<h3 class="serif">Lumen Cycles ApS</h3>
<p>Bespoke utility bicycles engineered and hand-built in Copenhagen, Denmark.</p>
<div class="mono" style="color: var(--text-primary);">CVR: DK-41928374</div>
</div>
<div class="footer-col">
<h4 class="mono">Workshop</h4>
<p style="font-size: 0.95rem; line-height: 1.7;">
Refshalevej 163A, Hal 4<br>
1432 København K<br>
Denmark
</p>
<p class="mono" style="margin-top: 1rem; color: var(--accent-rust);">Open by appointment</p>
</div>
<div class="footer-col">
<h4 class="mono">Inquiries</h4>
<ul>
<li><a href="mailto:atelier@lumencycles.dk">atelier@lumencycles.dk</a></li>
<li><a href="tel:+4531428890">+45 31 42 88 90</a></li>
<li style="margin-top: 1rem;"><a href="#commission" class="mono" style="text-decoration: underline;">Book Test Ride →</a></li>
</ul>
</div>
<div class="footer-col">
<h4 class="mono">Guarantee</h4>
<p style="font-size: 0.9rem; color: var(--text-secondary);">
Every Lumen frame and fork carries a 25-year structural warranty for the original owner, backed by our crash-replacement repair program.
</p>
</div>
</div>
<div class="footer-bottom mono">
<span>© 2025 LUMEN CYCLES APS. ALL RIGHTS RESERVED.</span>
<span>HANDCRAFTED IN COPENHAGEN // EU SHIPPING AVAILABLE</span>
</div>
</div>
</footer>
<!-- Commission Modal -->
<div class="modal-overlay" id="commission-modal">
<div class="modal-content">
<button class="modal-close" id="close-modal-btn" aria-label="Close modal">×</button>
<div class="mono" style="color: var(--accent-rust); margin-bottom: 0.5rem;">PRODUCTION SLOT RESERVATION</div>
<h2 style="font-size: 2.2rem; margin-bottom: 0.5rem;">Initiate Commission</h2>
<p style="color: var(--text-secondary); font-size: 0.95rem;">
No payment is taken today. Submitting this dossier assigns your build to master framebuilder Soren Lindqvist, who will contact you within 24 hours to review sizing and issue your build contract.
</p>
<div class="config-recap" id="modal-recap">
<!-- Populated by JS -->
</div>
<form id="commission-form">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="form-group">
<label class="mono" for="client-name">Full Name *</label>
<input type="text" id="client-name" class="form-control" required placeholder="Freja Mikkelsen">
</div>
<div class="form-group">
<label class="mono" for="client-email">Email Address *</label>
<input type="email" id="client-email" class="form-control" required placeholder="freja@domain.dk">
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="form-group">
<label class="mono" for="client-city">City & Country *</label>
<input type="text" id="client-city" class="form-control" required placeholder="Copenhagen, Denmark">
</div>
<div class="form-group">
<label class="mono" for="client-height">Rider Height (cm)</label>
<input type="number" id="client-height" class="form-control" placeholder="178">
</div>
</div>
<div class="form-group">
<label class="mono" for="client-notes">Bespoke Requests / Cargo Needs</label>
<textarea id="client-notes" class="form-control" rows="2" placeholder="e.g., Transporting two children (ages 3 & 6), dynamo USB charger, custom RAL color..."></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%;">Submit Commission Dossier</button>
</form>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// State
const state = {
basePrice: 3820,
baseWeight: 17.2,
color: {
hex: '#B84A27',
name: 'Copenhagen Rust (RAL 8004)',
code: 'RST'
},
cargo: {
type: 'box',
label: 'Marine Birch & Ash Box',
price: 380,
weight: 4.2,
code: 'BOX'
},
drive: {
type: 'acoustic',
label: 'Acoustic / Alfine 11',
price: 0,
weight: 0,
code: 'ACO'
}
};
// DOM Elements
const svgFrameGroup = document.getElementById('svg-frame-group');
const svgFrameGusset = document.getElementById('svg-frame-gusset');
const svgModFlatbed = document.getElementById('svg-mod-flatbed');
const svgModBox = document.getElementById('svg-mod-box');
const svgModCanopy = document.getElementById('svg-mod-canopy');
const svgModMotor = document.getElementById('svg-mod-motor');
const activeSwatchDot = document.getElementById('active-swatch-dot');
const activeColorName = document.getElementById('active-color-name');
const stageConfigCode = document.getElementById('stage-config-code');
const stageWeight = document.getElementById('stage-weight');
const sumColor = document.getElementById('sum-color');
const sumCargo = document.getElementById('sum-cargo');
const sumCargoPrice = document.getElementById('sum-cargo-price');
const sumDrive = document.getElementById('sum-drive');
const sumDrivePrice = document.getElementById('sum-drive-price');
const sumTotal = document.getElementById('sum-total');
// Render UI Updates
function updateConfigurator() {
// 1. Update SVG Frame Color
svgFrameGroup.setAttribute('stroke', state.color.hex);
svgFrameGusset.setAttribute('fill', state.color.hex);
activeSwatchDot.style.backgroundColor = state.color.hex;
activeColorName.textContent = state.color.name;
// 2. Update SVG Cargo Module
svgModFlatbed.style.display = state.cargo.type === 'flatbed' ? 'block' : 'none';
svgModBox.style.display = state.cargo.type === 'box' ? 'block' : 'none';
svgModCanopy.style.display = state.cargo.type === 'canopy' ? 'block' : 'none';
// 3. Update SVG Drivetrain Module
svgModMotor.style.display = state.drive.type === 'electric' ? 'block' : 'none';
// 4. Calculate Totals
const totalPrice = state.basePrice + state.cargo.price + state.drive.price;
const totalWeight = (state.baseWeight + state.cargo.weight + state.drive.weight).toFixed(1);
// 5. Update Text & Summary
stageConfigCode.textContent = `SPEC: L01-${state.color.code}-${state.cargo.code}-${state.drive.code}`;
stageWeight.textContent = `${totalWeight} KG`;
sumColor.textContent = `Finish: ${state.color.name.split(' (')[0]}`;
sumCargo.textContent = `Cargo: ${state.cargo.label}`;
sumCargoPrice.textContent = `€${state.cargo.price.toLocaleString()}`;
sumDrive.textContent = `Drive: ${state.drive.label}`;
sumDrivePrice.textContent = `€${state.drive.price.toLocaleString()}`;
sumTotal.textContent = `€${totalPrice.toLocaleString()}`;
}
// Event Listeners: Color Buttons
const colorBtns = document.querySelectorAll('.color-btn');
colorBtns.forEach(btn => {
btn.addEventListener('click', () => {
colorBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
state.color.hex = btn.dataset.color;
state.color.name = btn.dataset.name;
state.color.code = btn.dataset.code;
updateConfigurator();
});
});
// Event Listeners: Cargo Options
const cargoCards = document.querySelectorAll('#cargo-options .radio-card');
cargoCards.forEach(card => {
card.addEventListener('click', () => {
cargoCards.forEach(c => c.classList.remove('active'));
card.classList.add('active');
state.cargo.type = card.dataset.cargo;
state.cargo.price = parseInt(card.dataset.price, 10);
state.cargo.weight = parseFloat(card.dataset.weight);
state.cargo.code = card.dataset.code;
state.cargo.label = card.dataset.label;
updateConfigurator();
});
});
// Event Listeners: Drive Options
const driveCards = document.querySelectorAll('#drive-options .radio-card');
driveCards.forEach(card => {
card.addEventListener('click', () => {
driveCards.forEach(c => c.classList.remove('active'));
card.classList.add('active');
state.drive.type = card.dataset.drive;
state.drive.price = parseInt(card.dataset.price, 10);
state.drive.weight = parseFloat(card.dataset.weight);
state.drive.code = card.dataset.code;
state.drive.label = card.dataset.label;
updateConfigurator();
});
});
// Modal Logic
const modal = document.getElementById('commission-modal');
const openModalBtn = document.getElementById('open-modal-btn');
const closeModalBtn = document.getElementById('close-modal-btn');
const modalRecap = document.getElementById('modal-recap');
const commissionForm = document.getElementById('commission-form');
openModalBtn.addEventListener('click', () => {
const totalPrice = state.basePrice + state.cargo.price + state.drive.price;
modalRecap.innerHTML = `
<div class="mono" style="margin-bottom: 0.4rem; color: var(--text-primary);"><strong>SELECTED SPECIFICATION (${stageConfigCode.textContent})</strong></div>
<div>• <strong>Frame:</strong> ${state.color.name}</div>
<div>• <strong>Cargo Bay:</strong> ${state.cargo.label}</div>
<div>• <strong>Drivetrain:</strong> ${state.drive.label}</div>
<div style="margin-top: 0.5rem; font-weight: 600;">Estimated Total: €${totalPrice.toLocaleString()} (incl. VAT)</div>
`;
modal.classList.add('active');
});
closeModalBtn.addEventListener('click', () => {
modal.classList.remove('active');
});
modal.addEventListener('click', (e) => {
if (e.target === modal) modal.classList.remove('active');
});
commissionForm.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.getElementById('client-name').value;
const modalContent = modal.querySelector('.modal-content');
modalContent.innerHTML = `
<div class="mono" style="color: var(--accent-forest); margin-bottom: 1rem;">DOSSIER LOGGED // REF #CPH-${Math.floor(1000 + Math.random() * 9000)}</div>
<h2 style="font-size: 2.2rem; margin-bottom: 1rem;">Tak, ${name}.</h2>
<p style="color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.6;">
Your specification has been assigned to Batch #14 at our Refshaleøen workshop. Soren will review your build sheet and reach out within one business day to schedule your fit consultation.
</p>
<button class="btn btn-primary" onclick="document.getElementById('commission-modal').classList.remove('active')">Return to Workshop</button>
`;
});
});
</script>
</body>
</html>

