66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
|
{{- 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 -}}
|