From 6208a0539696db18d60a32adba2c9e262ee060aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Thu, 5 Feb 2026 19:58:25 +0100
Subject: [PATCH] fix: update 404 button to match site styling

Use same button style as "View all tracks" on home page

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 layouts/404.html | 48 +++++++++++++++---------------------------------
 1 file changed, 15 insertions(+), 33 deletions(-)

diff --git a/layouts/404.html b/layouts/404.html
index e4ac404..fd5ce23 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -90,37 +90,6 @@
     );
   }
 
-  /* Button hover effect */
-  .return-btn {
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s ease;
-  }
-
-  .return-btn::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba(255, 255, 255, 0.1),
-      transparent
-    );
-    transition: left 0.5s ease;
-  }
-
-  .return-btn:hover::before {
-    left: 100%;
-  }
-
-  .return-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
-  }
 </style>
 
 <div class="scanlines"></div>
@@ -137,9 +106,22 @@
     <div class="mt-12">
       <a
         href="/"
-        class="return-btn inline-block px-8 py-4 border border-text-secondary/30 text-text-primary font-mono text-sm tracking-wider uppercase hover:border-text-primary/50 focus:outline-none focus:ring-2 focus:ring-text-primary/30 focus:ring-offset-2 focus:ring-offset-bg-primary"
+        class="group inline-flex items-center gap-2 px-6 py-3 border border-border hover:border-accent hover:bg-accent hover:text-surface-0 transition-all duration-300"
       >
-        Return Home
+        Return home
+        <svg
+          class="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M17 8l4 4m0 0l-4 4m4-4H3"
+          />
+        </svg>
       </a>
     </div>
   </div>