Soften mobile hero fade

src/App.vue

@@ -2444,7 +2444,7 @@ watch(mobileMenuOpen, (open) => {
       </div>
       <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_38%,rgba(242,169,0,0.18),transparent_30%),linear-gradient(90deg,rgba(0,0,0,0.9),rgba(0,0,0,0.34)_48%,rgba(0,0,0,0.82))]"></div>
       <div class="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-black/80 to-transparent"></div>
-      <div class="absolute inset-x-0 bottom-0 h-48 bg-gradient-to-t from-black via-black/70 to-transparent"></div>
+      <div class="hero-bottom-fade absolute inset-x-0 bottom-0"></div>
       <div class="film-grain absolute inset-0 opacity-[0.14] mix-blend-screen"></div>
       <div class="scanline absolute inset-x-0 top-0 h-px bg-amber-300/80"></div>
 

src/style.css

@@ -63,6 +63,19 @@ body.menu-open {
   min-height: calc(100svh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
 }
 
+.hero-bottom-fade {
+  height: clamp(12rem, 24svh, 18rem);
+  background: linear-gradient(
+    to top,
+    #000 0%,
+    rgba(0, 0, 0, 0.9) 18%,
+    rgba(0, 0, 0, 0.58) 48%,
+    rgba(0, 0, 0, 0.18) 76%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  pointer-events: none;
+}
+
 .hero-bg {
   opacity: 0;
   filter: saturate(1.08) contrast(1.08);
@@ -261,9 +274,11 @@ body.menu-open {
       linear-gradient(
         to bottom,
         #000 0%,
-        #000 30%,
-        rgba(0, 0, 0, 0.96) 48%,
-        rgba(0, 0, 0, 0.62) 72%,
+        #000 24%,
+        rgba(0, 0, 0, 0.94) 42%,
+        rgba(0, 0, 0, 0.68) 60%,
+        rgba(0, 0, 0, 0.32) 78%,
+        rgba(0, 0, 0, 0.1) 92%,
         rgba(0, 0, 0, 0) 100%
       );
   }
@@ -295,6 +310,20 @@ body.menu-open {
     padding-bottom: 0;
   }
 
+  .hero-bottom-fade {
+    height: 44svh;
+    background: linear-gradient(
+      to top,
+      #000 0%,
+      rgba(0, 0, 0, 0.98) 9%,
+      rgba(0, 0, 0, 0.86) 24%,
+      rgba(0, 0, 0, 0.58) 46%,
+      rgba(0, 0, 0, 0.26) 70%,
+      rgba(0, 0, 0, 0.08) 88%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
+
   .hero-mobile-cta {
     display: inline-flex;
     animation: copy-in 900ms cubic-bezier(0.19, 1, 0.22, 1) 2600ms both;