Initial commit

layouts/404.html

@@ -0,0 +1,65 @@
+{{- define "main" -}}
+<section class="relative min-h-screen flex flex-col items-center justify-center overflow-hidden noise gutter-x py-32 text-center">
+
+  <!-- Background texture -->
+  <div class="absolute inset-0 speed-lines opacity-60"></div>
+  <div class="absolute inset-0"
+    style="background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(155,0,255,0.06) 0%, transparent 70%)"></div>
+
+  <!-- Decorative hollow "404" behind everything -->
+  <div class="absolute inset-0 flex items-center justify-center pointer-events-none select-none" aria-hidden="true">
+    <span
+      class="font-display leading-none"
+      style="font-size: clamp(14rem, 40vw, 32rem);
+             color: transparent;
+             -webkit-text-stroke: 1px rgba(255,26,140,0.07);
+             letter-spacing: -0.02em;">404</span>
+  </div>
+
+  <!-- Content -->
+  <div class="relative z-10 flex flex-col items-center gap-6 max-w-2xl mx-auto">
+
+    <!-- Eyebrow badge -->
+    <span class="badge badge-gradient" style="animation: mob-link-in 0.5s var(--ease-out-expo) 0ms both">
+      Error 404
+    </span>
+
+    <!-- Main headline -->
+    <h1
+      class="font-display leading-none text-balance"
+      style="font-size: clamp(4rem, 14vw, 10rem);
+             animation: mob-link-in 0.6s var(--ease-out-expo) 80ms both"
+    >
+      <span class="text-stroke-heat">PAGE</span><br>
+      <span class="text-gradient">NOT FOUND</span>
+    </h1>
+
+    <!-- Gradient divider -->
+    <div class="gradient-line w-32 mx-auto" style="animation: mob-link-in 0.4s ease 200ms both"></div>
+
+    <!-- Description -->
+    <p
+      class="text-fog font-body text-base md:text-lg leading-relaxed max-w-md text-pretty"
+      style="animation: mob-link-in 0.5s var(--ease-out-expo) 260ms both"
+    >
+      This drop got pulled. The page you're looking for doesn't exist, was moved, or got lost in the grid.
+    </p>
+
+    <!-- CTA -->
+    <div class="flex flex-wrap gap-4 justify-center"
+      style="animation: mob-link-in 0.5s var(--ease-out-expo) 340ms both">
+      <a href="/" class="btn">Back to the Drop {{ partial "icon.html" "arrow-right" }}</a>
+      <a href="/posts/" class="btn btn-ghost">Browse all posts {{ partial "icon.html" "arrow-right" }}</a>
+    </div>
+
+  </div>
+
+  <!-- Bottom graffiti tag -->
+  <div
+    class="graffiti-tag absolute -bottom-6 left-1/2 -translate-x-1/2 select-none pointer-events-none whitespace-nowrap"
+    style="-webkit-text-stroke-color: rgba(0,200,255,0.05);"
+    aria-hidden="true"
+  >LOST</div>
+
+</section>
+{{- end -}}