| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <meta name="theme-color" content="#FFD6E8" /> |
| |
| |
| |
| |
| |
| <style> |
| html{background:linear-gradient(180deg,#E8E0FF 0%,#FFD6E8 52%,#FFE5D9 100%) fixed;background-color:#FFD6E8;} |
| </style> |
| <title>Lost in the clouds — DreamRouter</title> |
| <meta name="description" content="This page drifted off. Swim back to DreamRouter." /> |
| <meta name="robots" content="noindex" /> |
|
|
| <link rel="preconnect" href="https://fonts.googleapis.com" /> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
| <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;700&family=Nunito:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" /> |
|
|
| <link rel="stylesheet" href="css/tokens.css?v=20260620b" /> |
| <link rel="stylesheet" href="css/base.css?v=20260620b" /> |
| <link rel="stylesheet" href="css/scene.css?v=20260620b" /> |
| <link rel="stylesheet" href="css/whale.css?v=20260620b" /> |
| <link rel="stylesheet" href="css/nav.css?v=20260620b" /> |
| <link rel="stylesheet" href="css/sections.css?v=20260620b" /> |
| </head> |
|
|
| <body data-page="404"> |
|
|
| <div class="blur-overlay" aria-hidden="true"></div> |
| <div class="grain-overlay" aria-hidden="true"></div> |
|
|
| |
| <div class="scene" aria-hidden="true"> |
| <div class="layer layer-far-clouds" data-speed="0.06" data-mouse="8"> |
| <svg class="cloud-far c1" viewBox="0 0 200 100"><use href="#cloud"/></svg> |
| <svg class="cloud-far c2" viewBox="0 0 200 100"><use href="#cloud"/></svg> |
| </div> |
| <div class="layer layer-mid-clouds" data-speed="0.20" data-mouse="22"> |
| <svg class="cloud-mid m1" viewBox="0 0 200 100"><use href="#cloud"/></svg> |
| </div> |
| </div> |
|
|
| |
| <div class="layer layer-top layer-whale" aria-hidden="true"> |
| <div class="whale" data-whale data-whale-park style="transform: translate3d(30vw, 0, 0);"> |
| |
| </div> |
| </div> |
|
|
| <div data-site-nav></div> |
|
|
| <main id="main"> |
| <section class="hero" style="min-height: 78vh; display:grid; place-items:center;"> |
| <div class="container" style="text-align:center;"> |
| <div class="hero-inner" style="margin:0 auto; max-width: 640px;"> |
| <p class="reveal is-in" style="font-family:'JetBrains Mono',monospace; color:var(--rose-deep); font-weight:600; letter-spacing:0.1em;">ERROR 404</p> |
| <h1 data-split>lost in the clouds</h1> |
| <p class="sub" data-reveal style="margin-inline:auto;"> |
| This page drifted off the edge of the sky. The whale will guide you back. |
| </p> |
| <div class="hero-actions" data-reveal style="justify-content:center;"> |
| <a href="index.html" class="btn btn-primary">Swim home</a> |
| <a href="models.html" class="btn btn-ghost">Browse models</a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <div data-site-footer></div> |
| </main> |
|
|
| <svg width="0" height="0" style="position:absolute" aria-hidden="true"> |
| <symbol id="cloud" viewBox="0 0 200 100"> |
| <path fill="currentColor" d="M44,82 C24,82 18,58 38,53 C32,32 62,26 74,42 C80,22 116,22 122,44 C142,32 168,48 158,68 C172,72 172,90 152,90 L54,90 C40,92 35,88 44,82 Z" /> |
| </symbol> |
| </svg> |
|
|
| <script src="js/layout.js?v=20260620b"></script> |
| <script src="js/motion.js?v=20260620b"></script> |
| <script src="js/parallax.js?v=20260620b"></script> |
| <script src="js/whale.js?v=20260620b"></script> |
| </body> |
| </html> |
|
|
