hypeorcode
Network offOpen alone (new tab)

Run details

Model
claude-sonnet-5-5
Route
Claude Code CLI
Reasoning
provider default
Date
2 Oct 2026
Time
1 min 37 s
Size
32 kB
Tokens
4 in, 15,594 out
List price
$0.16 ($2 in / $10 out per M)
Paid
Not billed per run (CLI plan)

Raw files: output · meta.json

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). Save it as index.html in the current directory, then stop. Do not ask questions.

Source

32 kB 532 lines Raw

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lumen Cycles — Custom cargo bikes, built to order in Copenhagen</title>
<meta name="description" content="Lumen Cycles builds custom cargo bikes by hand in a Copenhagen workshop. Fitted to you, built to carry your life, guaranteed for ten years.">
<style>
:root{
  --paper:#f5f1ea; --paper-2:#ebe5da; --ink:#1b2320; --ink-2:#4a5450; --line:#d9d2c4;
  --forest:#1f3a2f; --forest-2:#16291f; --amber:#d98a1f; --amber-2:#f0b24f;
  --frame:#1f3a2f;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.01em}
.eyebrow{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:18px;display:block}
.btn{display:inline-block;padding:15px 28px;border-radius:2px;font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid var(--forest);background:var(--forest);color:var(--paper);cursor:pointer;font-family:inherit;transition:background .2s,color .2s,transform .2s}
.btn:hover{background:var(--forest-2);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--forest)}
.btn.ghost:hover{background:var(--forest);color:var(--paper)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#1b1306}
.btn.amber:hover{background:var(--amber-2)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(245,241,234,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-size:1.4rem;letter-spacing:.02em}
.logo b{font-weight:600}
nav ul{display:flex;gap:32px;list-style:none;align-items:center}
nav a{text-decoration:none;font-size:.92rem;color:var(--ink-2)}
nav a:hover{color:var(--ink)}
nav .btn{padding:10px 20px;color:var(--paper)}
.menu-btn{display:none;background:none;border:0;font:inherit;font-weight:600;cursor:pointer;padding:8px}

/* hero */
.hero{padding:72px 0 40px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--forest)}
.hero p.lead{font-size:1.15rem;color:var(--ink-2);max-width:30em;margin-bottom:36px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{position:relative}
.sun{position:absolute;right:6%;top:-4%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--amber-2),var(--amber));opacity:.9}
.hero-art svg{position:relative;width:100%;height:auto}
.hero-note{font-size:.8rem;color:var(--ink-2);margin-top:6px;text-align:right}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:56px}
.fact{padding:26px 22px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact strong{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:500;color:var(--forest)}
.fact span{font-size:.85rem;color:var(--ink-2)}

section{padding:104px 0}
.head{max-width:640px;margin-bottom:56px}
.head h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:18px}
.head p{color:var(--ink-2);font-size:1.05rem}

/* models */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fbf9f5;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(27,35,32,.4)}
.card .pic{background:var(--paper-2);padding:26px 18px 10px;border-bottom:1px solid var(--line)}
.card .body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.65rem;margin-bottom:6px}
.card .tag{color:var(--ink-2);font-size:.92rem;margin-bottom:18px}
.card ul{list-style:none;font-size:.92rem;margin-bottom:24px;flex:1}
.card li{padding:8px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px}
.card li span:first-child{color:var(--ink-2)}
.card .price{font-family:var(--serif);font-size:1.5rem;margin-bottom:16px}
.card .price small{font-family:var(--sans);font-size:.78rem;color:var(--ink-2);margin-left:6px}
.card .btn{text-align:center}
.card.feat{border-color:var(--forest);box-shadow:0 0 0 1px var(--forest)}
.badge{position:absolute;background:var(--amber);color:#1b1306;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;margin:14px}
.card{position:relative}

/* craft */
.dark{background:var(--forest);color:var(--paper)}
.dark .head p,.dark .lede{color:#c6d2cb}
.craft{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(245,241,234,.2)}
.craft div{padding:34px 30px 34px 0;border-bottom:1px solid rgba(245,241,234,.2)}
.craft div:nth-child(3n+2),.craft div:nth-child(3n){padding-left:30px;border-left:1px solid rgba(245,241,234,.2)}
.craft .n{font-family:var(--serif);color:var(--amber-2);font-size:1rem;margin-bottom:14px;display:block}
.craft h3{font-size:1.35rem;margin-bottom:10px}
.craft p{color:#c6d2cb;font-size:.95rem}

/* configurator */
.conf{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.stage{background:var(--paper-2);border:1px solid var(--line);padding:30px 20px 14px}
.panel fieldset{border:0;margin-bottom:26px}
.panel legend{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;pointer-events:none}
.opts .pill{display:inline-block;padding:10px 16px;border:1.5px solid var(--line);background:#fbf9f5;font-size:.9rem;transition:.15s}
.opts input:checked+.pill{border-color:var(--forest);background:var(--forest);color:var(--paper)}
.opts input:focus-visible+.pill{outline:3px solid var(--amber);outline-offset:2px}
.sw{width:44px;height:44px;border-radius:50%;display:block;border:3px solid var(--paper);box-shadow:0 0 0 1.5px var(--line);transition:.15s}
.opts input:checked+.sw{box-shadow:0 0 0 2.5px var(--ink)}
.opts input:focus-visible+.sw{outline:3px solid var(--amber);outline-offset:4px}
.colorname{font-size:.9rem;color:var(--ink-2);margin-top:10px}
.total{border-top:1.5px solid var(--ink);padding-top:20px;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:22px}
.total strong{font-family:var(--serif);font-size:2.3rem;font-weight:500}
.total span{color:var(--ink-2);font-size:.9rem}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:s;position:relative}
.step{border-top:2px solid var(--ink);padding-top:22px}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--serif);color:var(--amber);font-size:1.1rem;display:block;margin-bottom:12px}
.step h3{font-size:1.3rem;margin-bottom:8px}
.step p{color:var(--ink-2);font-size:.95rem}
.step small{display:block;margin-top:12px;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}

/* quotes */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
blockquote{background:#fbf9f5;border:1px solid var(--line);padding:32px 28px}
blockquote p{font-family:var(--serif);font-size:1.15rem;line-height:1.5;margin-bottom:22px}
blockquote footer{all:unset;font-size:.85rem;color:var(--ink-2)}
blockquote footer b{display:block;color:var(--ink)}

/* faq */
.faq{max-width:780px}
details{border-top:1px solid var(--line);padding:22px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-family:var(--serif);font-size:1.25rem;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--amber);font-size:1.5rem;line-height:1;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:14px;color:var(--ink-2);max-width:42em}

/* order */
.order{display:grid;grid-template-columns:1fr 1.1fr;gap:64px}
.order h2{font-size:clamp(2rem,3.6vw,3rem);margin-bottom:20px}
.order .lede{margin-bottom:28px}
.visit{font-size:.95rem;line-height:1.8;color:#c6d2cb}
.visit b{color:var(--paper);font-weight:600}
form{background:var(--paper);color:var(--ink);padding:36px;display:grid;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label.f{display:grid;gap:6px;font-size:.82rem;font-weight:600;letter-spacing:.03em}
input[type=text],input[type=email],select,textarea{font:inherit;font-size:.98rem;padding:12px 14px;border:1.5px solid var(--line);background:#fff;border-radius:2px;color:var(--ink);width:100%}
textarea{resize:vertical;min-height:96px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(31,58,47,.15)}
.err{color:#a3281c;font-size:.78rem;font-weight:500;min-height:0}
.fine{font-size:.78rem;color:var(--ink-2)}
.ok{display:none;text-align:center;padding:24px 8px}
.ok h3{font-size:1.8rem;margin-bottom:12px}
form.done .ok{display:block}
form.done .fields{display:none}

footer.site{background:var(--forest-2);color:#aebcb4;padding:56px 0 36px;font-size:.88rem}
.fgrid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px}
.fgrid .logo{color:var(--paper)}
.fgrid ul{list-style:none;display:grid;gap:8px}
.fgrid h4{color:var(--paper);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px}
.fgrid a{text-decoration:none}.fgrid a:hover{color:var(--paper)}
.legal{border-top:1px solid rgba(245,241,234,.15);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

@media (max-width:960px){
  .hero-grid,.conf,.order{grid-template-columns:1fr}
  .models,.quotes{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .craft{grid-template-columns:1fr}
  .craft div,.craft div:nth-child(3n+2),.craft div:nth-child(3n){padding:28px 0;border-left:0}
  section{padding:76px 0}
  .menu-btn{display:block}
  nav ul{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:flex-start;padding:20px 28px 28px;border-bottom:1px solid var(--line);gap:18px}
  nav ul.open{display:flex}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}.row{grid-template-columns:1fr}form{padding:26px 20px}.wrap{padding:0 20px}
}
</style>
</head>
<body>

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <defs>
    <!-- reusable longtail cargo bike; length variants are scaled via use -->
    <g id="bike" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <g stroke="#1b2320" stroke-width="5">
        <circle cx="170" cy="240" r="62"/><circle cx="590" cy="240" r="62"/>
      </g>
      <g stroke="#1b2320" stroke-width="1" opacity=".35">
        <circle cx="170" cy="240" r="48"/><circle cx="590" cy="240" r="48"/>
        <path d="M170 178v124M108 240h124M126 196l88 88M126 284l88-88M590 178v124M528 240h124M546 196l88 88M546 284l88-88"/>
      </g>
      <g stroke="var(--frame)" stroke-width="9">
        <path d="M330 240L305 150M305 160L520 148M330 240L515 152M330 240L170 240M305 156L170 240"/>
        <path d="M520 142L590 240"/>
      </g>
      <g stroke="#1b2320" stroke-width="6">
        <path d="M519 142l-8-30M492 106h38M285 140h42"/>
      </g>
      <!-- deck and side bags -->
      <path d="M96 176h210" stroke="var(--frame)" stroke-width="10"/>
      <path d="M110 180v56M290 178v34" stroke="var(--frame)" stroke-width="5"/>
      <rect x="120" y="186" width="150" height="62" rx="6" fill="#d98a1f" stroke="#a96a12" stroke-width="3" opacity=".95"/>
      <path d="M130 206h130" stroke="#a96a12" stroke-width="3"/>
      <circle cx="330" cy="240" r="15" stroke="#1b2320" stroke-width="5"/>
      <path d="M330 240l-10 26M330 240l12-24" stroke="#1b2320" stroke-width="5"/>
      <circle cx="170" cy="240" r="6" fill="#1b2320"/><circle cx="590" cy="240" r="6" fill="#1b2320"/>
      <!-- lamp -->
      <circle cx="540" cy="168" r="9" fill="#f0b24f" stroke="#1b2320" stroke-width="3"/>
    </g>
  </defs>
</svg>

<header>
  <div class="wrap nav">
    <a class="logo" href="#top" aria-label="Lumen Cycles home">
      <svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><circle cx="15" cy="15" r="13" fill="none" stroke="#1f3a2f" stroke-width="2.5"/><circle cx="15" cy="15" r="5" fill="#d98a1f"/><path d="M15 2v6M15 22v6M2 15h6M22 15h6" stroke="#1f3a2f" stroke-width="2"/></svg>
      <span><b>Lumen</b> Cycles</span>
    </a>
    <nav aria-label="Primary">
      <button class="menu-btn" aria-expanded="false" aria-controls="menu">Menu</button>
      <ul id="menu">
        <li><a href="#models">Models</a></li>
        <li><a href="#craft">Craft</a></li>
        <li><a href="#configure">Configure</a></li>
        <li><a href="#process">Process</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a class="btn" href="#order">Reserve a slot</a></li>
      </ul>
    </nav>
  </div>
</header>

<main id="top">
<section class="hero" style="padding-bottom:0">
  <div class="wrap">
    <div class="hero-grid">
      <div>
        <span class="eyebrow">Handbuilt in Copenhagen · Since 2014</span>
        <h1>The cargo bike that <em>fits your life,</em> not the other way round.</h1>
        <p class="lead">Every Lumen is welded, aligned and assembled by one builder in our Nordhavn workshop, to your height, your load and your commute. From €3,900. Built to last a decade, and repairable for far longer.</p>
        <div class="cta">
          <a class="btn amber" href="#configure">Configure your bike</a>
          <a class="btn ghost" href="#process">How an order works</a>
        </div>
      </div>
      <div class="hero-art">
        <div class="sun" aria-hidden="true"></div>
        <svg viewBox="0 40 760 290" role="img" aria-label="Illustration of a Lumen Kilde longtail cargo bike in forest green with an amber cargo bag">
          <path d="M20 304h720" stroke="#1b2320" stroke-width="2" opacity=".3"/>
          <use href="#bike"/>
        </svg>
        <p class="hero-note">Lumen Kilde, shown in Forest.</p>
      </div>
    </div>
    <div class="facts">
      <div class="fact"><strong>10 years</strong><span>Frame and fork guarantee</span></div>
      <div class="fact"><strong>1 builder</strong><span>Signs every bike they build</span></div>
      <div class="fact"><strong>180 kg</strong><span>Max load on the Last</span></div>
      <div class="fact"><strong>8–10 wks</strong><span>From deposit to delivery</span></div>
    </div>
  </div>
</section>

<section id="models">
  <div class="wrap">
    <div class="head reveal">
      <span class="eyebrow">Three platforms</span>
      <h2>One frame for each kind of week.</h2>
      <p>Choose a platform, then we tune geometry, gearing and finish around you. Prices include 25% Danish VAT, a fitting session and a first-year service.</p>
    </div>
    <div class="models">
      <article class="card reveal">
        <div class="pic"><svg viewBox="60 90 640 230" role="img" aria-label="Kilde longtail"><use href="#bike"/></svg></div>
        <div class="body">
          <h3>Kilde</h3>
          <p class="tag">Longtail for school runs and shop runs.</p>
          <ul>
            <li><span>Load</span><span>up to 160 kg</span></li>
            <li><span>Motor</span><span>Bosch Cargo Line</span></li>
            <li><span>Range</span><span>up to 120 km</span></li>
            <li><span>Seats</span><span>2 children + cargo</span></li>
          </ul>
          <div class="price">€3,900<small>from</small></div>
          <a class="btn ghost" href="#configure" data-pick="kilde">Configure Kilde</a>
        </div>
      </article>
      <article class="card feat reveal">
        <span class="badge">Most ordered</span>
        <div class="pic"><svg viewBox="40 80 680 240" role="img" aria-label="Last front-loader"><use href="#bike" transform="translate(0 0)"/></svg></div>
        <div class="body">
          <h3>Last</h3>
          <p class="tag">Long-wheelbase for the heaviest loads.</p>
          <ul>
            <li><span>Load</span><span>up to 180 kg</span></li>
            <li><span>Motor</span><span>Bosch Cargo Line</span></li>
            <li><span>Range</span><span>up to 140 km</span></li>
            <li><span>Seats</span><span>3 children + cargo</span></li>
          </ul>
          <div class="price">€4,600<small>from</small></div>
          <a class="btn" href="#configure" data-pick="last">Configure Last</a>
        </div>
      </article>
      <article class="card reveal">
        <div class="pic"><svg viewBox="60 90 640 230" role="img" aria-label="Skygge compact"><use href="#bike"/></svg></div>
        <div class="body">
          <h3>Skygge</h3>
          <p class="tag">Compact and nimble for narrow city streets.</p>
          <ul>
            <li><span>Load</span><span>up to 120 kg</span></li>
            <li><span>Motor</span><span>Bosch Performance</span></li>
            <li><span>Range</span><span>up to 100 km</span></li>
            <li><span>Seats</span><span>1 child + cargo</span></li>
          </ul>
          <div class="price">€3,900<small>from</small></div>
          <a class="btn ghost" href="#configure" data-pick="skygge">Configure Skygge</a>
        </div>
      </article>
    </div>
  </div>
</section>

<section id="craft" class="dark">
  <div class="wrap">
    <div class="head reveal">
      <span class="eyebrow">Why it costs what it costs</span>
      <h2>Built slowly, so you do not have to think about it again.</h2>
      <p class="lede">A cargo bike works harder than any other bike you will own. We spend our time where that matters.</p>
    </div>
    <div class="craft reveal">
      <div><span class="n">01</span><h3>Triple-butted steel</h3><p>Chromoly tubing, TIG-welded and aligned on a jig, then stress-relieved. Stiff under load, comfortable over cobbles, and straightforward to repair.</p></div>
      <div><span class="n">02</span><h3>Fitted to you</h3><p>We measure you in the workshop, or by video call, and cut the frame to match. Standover, reach and handlebar height are yours, not a size M.</p></div>
      <div><span class="n">03</span><h3>Parts we can service</h3><p>Standard Bosch drive units, hydraulic discs, belt or chain drive. No proprietary lock-in; any good bike shop can look after it.</p></div>
      <div><span class="n">04</span><h3>Powder coat, oven-cured</h3><p>Seven colours, applied over a zinc primer. Chip-resistant, and touch-up paint is included with every bike.</p></div>
      <div><span class="n">05</span><h3>Lights that are part of the bike</h3><p>Dynamo-fed front and rear lights, wired inside the frame. Nothing to charge, nothing to forget at home.</p></div>
      <div><span class="n">06</span><h3>Signed and numbered</h3><p>Your builder stamps their initials and your serial number on the bottom bracket. We keep your measurements on file for life.</p></div>
    </div>
  </div>
</section>

<section id="configure">
  <div class="wrap conf">
    <div class="stage reveal">
      <svg id="confsvg" viewBox="40 60 720 260" role="img" aria-label="Preview of your configured bike">
        <path d="M20 304h740" stroke="#1b2320" stroke-width="2" opacity=".25"/>
        <use href="#bike"/>
      </svg>
      <p class="colorname" id="summary" aria-live="polite" style="text-align:center;padding-bottom:10px"></p>
    </div>
    <form class="panel reveal" id="conf" onsubmit="return false" style="background:none;padding:0;color:inherit">
      <span class="eyebrow">Configure</span>
      <h2 style="font-size:clamp(1.8rem,3vw,2.5rem);margin-bottom:28px">Make it yours.</h2>
      <fieldset>
        <legend>Platform</legend>
        <div class="opts">
          <label><input type="radio" name="m" value="kilde" data-p="3900" checked><span class="pill">Kilde</span></label>
          <label><input type="radio" name="m" value="last" data-p="4600"><span class="pill">Last</span></label>
          <label><input type="radio" name="m" value="skygge" data-p="3900"><span class="pill">Skygge</span></label>
        </div>
      </fieldset>
      <fieldset>
        <legend>Colour</legend>
        <div class="opts">
          <label><input type="radio" name="c" value="Forest" data-c="#1f3a2f" checked aria-label="Forest"><span class="sw" style="background:#1f3a2f"></span></label>
          <label><input type="radio" name="c" value="Harbour" data-c="#2c5a7a" aria-label="Harbour"><span class="sw" style="background:#2c5a7a"></span></label>
          <label><input type="radio" name="c" value="Brick" data-c="#9a3e2b" aria-label="Brick"><span class="sw" style="background:#9a3e2b"></span></label>
          <label><input type="radio" name="c" value="Sand" data-c="#c2ab82" aria-label="Sand"><span class="sw" style="background:#c2ab82"></span></label>
          <label><input type="radio" name="c" value="Graphite" data-c="#33383a" aria-label="Graphite"><span class="sw" style="background:#33383a"></span></label>
        </div>
        <p class="colorname" id="cname">Forest</p>
      </fieldset>
      <fieldset>
        <legend>Extras</legend>
        <div class="opts">
          <label><input type="checkbox" data-p="350" value="Second battery"><span class="pill">Second battery +€350</span></label>
          <label><input type="checkbox" data-p="250" value="Rain canopy"><span class="pill">Rain canopy +€250</span></label>
          <label><input type="checkbox" data-p="300" value="Belt drive"><span class="pill">Belt drive +€300</span></label>
        </div>
      </fieldset>
      <div class="total"><span>Estimated price, incl. VAT</span><strong id="total">€3,900</strong></div>
      <a class="btn amber" href="#order" id="reserve">Reserve this build</a>
      <p class="fine" style="margin-top:12px">Deposit of €500 secures your build slot, fully refundable until we cut your frame.</p>
    </form>
  </div>
</section>

<section id="process" style="background:var(--paper-2)">
  <div class="wrap">
    <div class="head reveal">
      <span class="eyebrow">Ordering</span>
      <h2>From first message to first ride.</h2>
      <p>No surprises, no hidden steps. You will know where your bike is at every stage.</p>
    </div>
    <div class="steps reveal">
      <div class="step"><h3>Talk</h3><p>Tell us what you carry, where you ride and who rides with you. We reply within two working days.</p><small>Week 0</small></div>
      <div class="step"><h3>Fit</h3><p>Visit the workshop or book a video fitting. We confirm geometry and spec, then take a €500 deposit.</p><small>Week 1</small></div>
      <div class="step"><h3>Build</h3><p>Your builder cuts, welds, coats and assembles. You get photos at each stage.</p><small>Weeks 2–8</small></div>
      <div class="step"><h3>Ride</h3><p>Collect in Nordhavn with a hands-on handover, or have it delivered across Denmark and the EU.</p><small>Weeks 8–10</small></div>
    </div>
  </div>
</section>

<section>
  <div class="wrap">
    <div class="head reveal">
      <span class="eyebrow">Owners</span>
      <h2>What riders say.</h2>
    </div>
    <div class="quotes">
      <blockquote class="reveal"><p>“We sold the car eight months ago. The Last takes two kids, the shopping and a Christmas tree. It has not been back to the workshop for anything but its service.”</p><footer><b>Mette H.</b>Østerbro, Last owner</footer></blockquote>
      <blockquote class="reveal"><p>“I am 196 cm and have never sat on a bike that fits. They measured me twice, and it still feels like it was made for my body.”</p><footer><b>Jonas P.</b>Frederiksberg, Kilde owner</footer></blockquote>
      <blockquote class="reveal"><p>“Honest about timelines, and the photos from the workshop were a lovely touch. When I asked about a repair, I was talking to the person who built it.”</p><footer><b>Anna K.</b>Aarhus, Skygge owner</footer></blockquote>
    </div>
  </div>
</section>

<section id="faq" style="background:var(--paper-2)">
  <div class="wrap">
    <div class="head reveal"><span class="eyebrow">Questions</span><h2>Before you commit €4,000.</h2></div>
    <div class="faq reveal">
      <details><summary>What does the guarantee cover?</summary><p>Ten years on the frame and fork against defects in materials and workmanship. Components carry their manufacturer’s warranty, and we handle the claims for you.</p></details>
      <details><summary>Can I test ride before ordering?</summary><p>Yes. Book a slot at the workshop and ride a demo of each platform. Fittings and test rides are free.</p></details>
      <details><summary>Is the deposit refundable?</summary><p>Fully, until we cut your frame tubes, usually about two weeks after the deposit. After that, we keep the cost of materials only.</p></details>
      <details><summary>Do you ship outside Denmark?</summary><p>We deliver within the EU, fully assembled and insured. Shipping is quoted at order, typically €190–€350.</p></details>
      <details><summary>Can I pay in instalments?</summary><p>Yes. Many Danish employers also offer a bike benefit scheme, and we provide the paperwork for it. Finance over 12 or 24 months is available through our partner bank.</p></details>
      <details><summary>What if something breaks in ten years?</summary><p>We keep your measurements and build records permanently, and we stock spares for every bike we have made. We repair, rather than replace.</p></details>
    </div>
  </div>
</section>

<section id="order" class="dark">
  <div class="wrap order">
    <div class="reveal">
      <span class="eyebrow">Reserve</span>
      <h2>Start your build.</h2>
      <p class="lede" style="margin-bottom:28px">Tell us a little about how you ride. A builder will write back personally within two working days. No deposit is taken until you have agreed to a spec.</p>
      <p class="visit"><b>Workshop &amp; showroom</b><br>Orientkaj 14, 2150 Nordhavn, Copenhagen<br>Tue–Fri 10–17 · Sat 10–15 by appointment<br><br><b>Write to us</b><br>hello@lumencycles.example<br>+45 00 00 00 00</p>
    </div>
    <form id="order-form" class="reveal" novalidate>
      <div class="fields" style="display:grid;gap:18px">
        <div class="row">
          <label class="f">Name<input type="text" name="name" autocomplete="name" required><span class="err"></span></label>
          <label class="f">Email<input type="email" name="email" autocomplete="email" required><span class="err"></span></label>
        </div>
        <div class="row">
          <label class="f">Platform
            <select name="model" id="f-model"><option value="kilde">Kilde</option><option value="last">Last</option><option value="skygge">Skygge</option><option value="unsure">Not sure yet</option></select>
          </label>
          <label class="f">Your height (cm)<input type="text" name="height" inputmode="numeric" placeholder="e.g. 178"></label>
        </div>
        <label class="f">What will you carry?<textarea name="msg" placeholder="Kids, groceries, tools, a dog…"></textarea></label>
        <button class="btn" type="submit">Send request</button>
        <p class="fine">This page makes no network requests, so for now this form opens an email draft to our workshop. We only use your details to reply.</p>
      </div>
      <div class="ok" role="status"><h3>Tak, <span id="who"></span>.</h3><p>Your email draft is ready to send. A builder will reply within two working days.</p></div>
    </form>
  </div>
</section>
</main>

<footer class="site">
  <div class="wrap">
    <div class="fgrid">
      <div><a class="logo" href="#top"><span><b>Lumen</b> Cycles</span></a><p style="margin-top:12px;max-width:26em">Custom cargo bikes, handbuilt in Copenhagen.</p></div>
      <div><h4>Bikes</h4><ul><li><a href="#models">Kilde</a></li><li><a href="#models">Last</a></li><li><a href="#models">Skygge</a></li></ul></div>
      <div><h4>Workshop</h4><ul><li><a href="#craft">Our craft</a></li><li><a href="#process">Ordering</a></li><li><a href="#faq">FAQ</a></li></ul></div>
      <div><h4>Visit</h4><ul><li>Orientkaj 14</li><li>2150 Nordhavn</li><li>Copenhagen, Denmark</li></ul></div>
    </div>
    <div class="legal"><span>© 2026 Lumen Cycles ApS · CVR 00000000</span><span>Prices in EUR incl. 25% VAT. Specifications subject to change.</span></div>
  </div>
</footer>

<script>
(function(){
  var $=function(s,r){return (r||document).querySelector(s)}, $$=function(s,r){return [].slice.call((r||document).querySelectorAll(s))};

  // mobile menu
  var mb=$('.menu-btn'), menu=$('#menu');
  mb.addEventListener('click',function(){var o=menu.classList.toggle('open');mb.setAttribute('aria-expanded',o)});
  $$('#menu a').forEach(function(a){a.addEventListener('click',function(){menu.classList.remove('open');mb.setAttribute('aria-expanded',false)})});

  // reveal on scroll
  var items=$$('.reveal');
  if('IntersectionObserver' in window){
    var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}})},{threshold:.12});
    items.forEach(function(i){io.observe(i)});
  } else items.forEach(function(i){i.classList.add('in')});

  // configurator
  var conf=$('#conf'), svg=$('#confsvg'), fmt=function(n){return '€'+n.toLocaleString('en-US')};
  function update(){
    var m=$('input[name=m]:checked',conf), c=$('input[name=c]:checked',conf), total=+m.dataset.p, extras=[];
    $$('input[type=checkbox]:checked',conf).forEach(function(x){total+=+x.dataset.p;extras.push(x.value)});
    svg.style.setProperty('--frame',c.dataset.c);
    $('#cname').textContent=c.value;
    $('#total').textContent=fmt(total);
    var name=m.value.charAt(0).toUpperCase()+m.value.slice(1);
    $('#summary').textContent=name+' in '+c.value+(extras.length?' · '+extras.join(', '):'');
    conf.dataset.summary=name+' / '+c.value+(extras.length?' / '+extras.join(', '):'')+' / '+fmt(total);
    $('#f-model').value=m.value;
  }
  conf.addEventListener('change',update); update();
  $$('[data-pick]').forEach(function(a){a.addEventListener('click',function(){
    var r=$('input[name=m][value='+a.dataset.pick+']',conf); r.checked=true; update();
  })});

  // order form -> mailto draft (no network requests)
  var form=$('#order-form');
  form.addEventListener('submit',function(e){
    e.preventDefault();
    var ok=true, name=form.name, email=form.email;
    $$('.err',form).forEach(function(x){x.textContent=''});
    if(!name.value.trim()){name.nextElementSibling.textContent='Please tell us your name.';ok=false}
    if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email.value.trim())){email.nextElementSibling.textContent='Please enter a valid email.';ok=false}
    if(!ok){(name.value.trim()?email:name).focus();return}
    var body='Name: '+name.value+'\nEmail: '+email.value+'\nPlatform: '+form.model.value+'\nHeight: '+form.height.value+' cm\nConfiguration: '+conf.dataset.summary+'\n\n'+form.msg.value;
    $('#who').textContent=name.value.trim().split(' ')[0];
    form.classList.add('done');
    location.href='mailto:hello@lumencycles.example?subject='+encodeURIComponent('Build request – '+name.value)+'&body='+encodeURIComponent(body);
  });
})();
</script>
</body>
</html>

Compare with

Claude Sonnet 5.5: other attempts