Fix sticky header bleed

Author: CharlieGreenman

web/app/app.css

@@ -81,10 +81,10 @@ a {
   justify-content: space-between;
   gap: 0.75rem;
   border: 1px solid rgba(220, 212, 199, 0.8);
-  background: rgba(255, 255, 255, 0.74);
+  background: rgba(255, 255, 255, 0.9);
   padding: 0.75rem 0.95rem;
   border-radius: 1.35rem;
-  backdrop-filter: blur(16px);
+  backdrop-filter: blur(18px);
   box-shadow: 0 18px 42px -30px rgba(15, 23, 42, 0.45);
 }
 

web/app/root.tsx

@@ -52,7 +52,7 @@ export default function App() {
         <div className="absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,rgba(148,163,184,0.18),transparent)]" />
       </div>
 
-      <header className="top-bar relative z-10">
+      <header className="top-bar relative z-40">
         <div className="top-bar-shell">
           <Link to="/" className="flex items-center gap-3">
             <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-amber-300/60 bg-amber-50 shadow-[0_12px_30px_-24px_rgba(180,130,38,0.8)]">
@@ -84,11 +84,11 @@ export default function App() {
         </div>
       </header>
 
-      <main id="main-content" className="content relative z-10">
+      <main id="main-content" className="content relative">
         <Outlet />
       </main>
 
-      <footer className="relative z-10 mt-16 border-t border-[#dcd4c7] pt-8">
+      <footer className="relative mt-16 border-t border-[#dcd4c7] pt-8">
         <div className="rounded-[1.75rem] border border-white/70 bg-white/80 p-6 shadow-[0_28px_80px_-52px_rgba(15,23,42,0.45)] backdrop-blur sm:p-7">
           <div className="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
             <div className="flex items-center gap-3">