Build: The Product to Ride-Page Transition

The whole file after this topic. If yours differs, you can copy this one and carry on.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ride the Volt · Lumen Bikes</title>
    <!-- Phase 7: apply the saved motion choice before the first paint (same script as index.html) -->
    <script>
      try {
        var m = localStorage.getItem("lumen-motion");
        if (m === "reduced" || m === "full") document.documentElement.dataset.motion = m;
      } catch (e) {} // storage blocked: follow the device
    </script>
    <!-- end Phase 7 -->
    <!-- Phase 11: opt in, inline on purpose (a rule in a linked file can arrive too late) -->
    <style>
      @view-transition { navigation: auto; }
    </style>
    <!-- end Phase 11 -->
    <!-- Phase 2: motion tokens (components.css reads them) -->
    <link rel="stylesheet" href="/src/styles/tokens.css" />
    <!-- end Phase 2 -->
    <link rel="stylesheet" href="/src/styles/base.css" />
    <link rel="stylesheet" href="/src/styles/components.css" />
    <link rel="stylesheet" href="/src/styles/motion-safe.css" />
  </head>
  <body>
    <header class="site-header">
      <a class="logo" id="logo" href="/">lumen</a>
      <nav aria-label="Main"><a href="/">Back to the launch page</a></nav>
    </header>
    <main>
      <!-- Phase 11: the ride page (same viewBox as the home page's drawing, so it morphs without stretching) -->
      <section class="hero ride-hero">
        <div>
          <h1>Ride the Lumen Volt</h1>
          <p class="hero-copy">Twelve kilometres across Ardenvale, from the harbour to the old town, on one small charge.</p>
          <a class="button primary" href="/">Reserve yours</a>
        </div>
        <svg id="volt-hero" class="volt" viewBox="0 0 240 140" role="img" aria-label="The Lumen Volt e-bike">
          <g fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="52" cy="98" r="34" />
            <circle cx="188" cy="98" r="34" />
            <path d="M52 98 L96 98 L132 50 L84 50 Z M96 98 L72 38 M132 50 L188 98 M126 34 L140 34 M132 50 L130 34" />
            <path d="M64 38 L82 38" />
          </g>
          <rect x="98" y="58" width="26" height="14" rx="4" fill="#2a9df4" />
        </svg>
      </section>
      <section class="ride-details" data-tabs>
        <h2>On the ride</h2>
        <div role="tablist" aria-label="Ride details">
          <button role="tab" id="tab-route" class="tab" aria-selected="true" aria-controls="ride-panel" data-template="t-route">Route</button>
          <button role="tab" id="tab-battery" class="tab" aria-selected="false" tabindex="-1" aria-controls="ride-panel" data-template="t-battery">Battery</button>
          <button role="tab" id="tab-motor" class="tab" aria-selected="false" tabindex="-1" aria-controls="ride-panel" data-template="t-motor">Motor</button>
        </div>
        <div role="tabpanel" id="ride-panel" class="tab-panel" aria-labelledby="tab-route" tabindex="0"><p>Harbour Gate to the old town, 12 km, mostly flat, with one hill the Volt climbs at 25 km/h.</p></div>
        <template id="t-route"><p>Harbour Gate to the old town, 12 km, mostly flat, with one hill the Volt climbs at 25 km/h.</p></template>
        <template id="t-battery"><p>500 Wh. This ride uses about 20 percent of it, so you could do it four times before charging.</p></template>
        <template id="t-motor"><p>250 W rear-hub motor. It assists while you pedal and stops helping at 25 km/h.</p></template>
      </section>
      <!-- end Phase 11 -->
    </main>
    <footer class="site-footer"><p>Lumen Bikes · Ardenvale</p></footer>
    <script type="module">
      import { initTransitions } from "/src/js/components/transitions.js";
      initTransitions();
    </script>
  </body>
</html>