ameeramer.github.io/404.html at main · ameeramer/ameeramer.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0a0a0c">
<title>Lost in space — Moonshot</title>
<meta name="robots" content="noindex">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='42' fill='%23f5b841'/><circle cx='66' cy='42' r='34' fill='%230a0a0c'/></svg>">
<link rel="apple-touch-icon" href="/logo.png">
<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=Instrument+Serif:ital@0;1&family=Schibsted+Grotesk:wght@400;500;600&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
<style>
  :root { --bg:#0a0a0c; --ink:#ece9e2; --dim:#a29ea9; --gold:#f5b841; }
  * { box-sizing:border-box; margin:0; }
  html,body { height:100%; }
  body {
    background:
      radial-gradient(ellipse 70% 60% at 50% 40%, rgba(245,184,65,.06), transparent 70%),
      #0a0a0c;
    color:var(--ink);
    font-family:"Schibsted Grotesk",-apple-system,sans-serif;
    display:grid; place-items:center; text-align:center; padding:24px;
  }
  .stars { position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,.5) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 60% 35%, rgba(245,184,65,.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,.4) 50%, transparent 51%),
      radial-gradient(1px 1px at 35% 78%, rgba(255,255,255,.35) 50%, transparent 51%);
    background-size:700px 600px; opacity:.7; }
  main { position:relative; z-index:1; }
  .moon { width:60px; margin-bottom:26px; }
  h1 { font-family:"Instrument Serif",Georgia,serif; font-weight:400;
    font-size:clamp(38px,8vw,68px); line-height:1.05; margin-bottom:14px; }
  h1 em { font-style:italic; color:var(--gold); }
  p { color:var(--dim); max-width:440px; margin:0 auto 30px; font-size:16px; }
  .code { font-family:"Geist Mono",monospace; font-size:12px; letter-spacing:.3em;
    color:var(--gold); margin-bottom:20px; }
  .btn { display:inline-flex; gap:8px; align-items:center; font-weight:600;
    color:#1a1406; background:var(--gold); border-radius:11px;
    padding:13px 26px; text-decoration:none; transition:transform .12s,box-shadow .15s; }
  .btn:hover { transform:translateY(-1px); box-shadow:0 8px 30px rgba(245,184,65,.25); }
  .alt { display:block; margin-top:16px; color:var(--dim); font-size:13.5px; text-decoration:none; }
  .alt:hover { color:var(--ink); }
</style>
</head>
<body>
<div class="stars" aria-hidden="true"></div>
<main>
  <svg class="moon" viewBox="0 0 100 100" aria-hidden="true"><circle cx="50" cy="50" r="42" fill="#f5b841"/><circle cx="66" cy="42" r="34" fill="#0a0a0c"/></svg>
  <div class="code">404 · LOST IN SPACE</div>
  <h1>This page<br>drifted <em>off orbit.</em></h1>
  <p>The link you followed doesn’t exist — but the studio is right here, and it’s free.</p>
  <a class="btn" href="/app/">Open Moonshot Studio</a>
  <a class="alt" href="/">← back to the landing page</a>
</main>
</body>
</html>