make title text fade behind header

src/components/layout/Navigation.tsx

@@ -12,7 +12,8 @@ export interface NavigationProps {
 
 export function Navigation(props: NavigationProps) {
   return (
-    <div className="fixed left-0 right-0 top-0 z-10 flex min-h-[88px] items-center justify-between py-5 px-7">
+    <div className="fixed left-0 right-0 top-0 z-20 min-h-[150px] bg-gradient-to-b from-denim-300 via-denim-300 to-transparent sm:from-transparent">
+      <div className="flex items-center justify-between py-5 px-7">
         <div
           className={`${
             props.bg ? "opacity-100" : "opacity-0"
@@ -51,5 +52,6 @@ export function Navigation(props: NavigationProps) {
           </a>
         </div>
       </div>
+    </div>
   );
 }

src/views/search/SearchView.tsx

@@ -32,10 +32,10 @@ export function SearchView() {
             <div className="absolute left-0 bottom-0 right-0 flex h-0 justify-center">
               <div className="absolute bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" />
             </div>
-            <div className="relative z-20">
+            <div className="relative z-10 mb-16">
-              <div className="mb-16">
               <Title className="mx-auto max-w-xs">{t("search.title")}</Title>
             </div>
+            <div className="relative z-30">
               <Sticky enabled top={16} onStateChange={stickStateChanged}>
                 <SearchBarInput
                   onChange={setSearch}