added gradient

src/components/CategoryNavItem.css

@@ -8,8 +8,7 @@
   border-bottom: 2px solid transparent;
   font-family: var(--system-ui);
   font-weight: 400;
-  transition:all .12s ease-out;
-  opacity: 0.88;
+  color: var(--text-secondary-alt);
 }
 
 .nav__item:hover {
@@ -20,5 +19,4 @@
   font-weight: 500;
   color: var(--text-primary);
   border-bottom: 2px solid var(--icon-primary);
-  opacity: 1;
 }

src/layouts/Layout.astro

@@ -70,6 +70,9 @@ const { site, title, tagline } = Astro.props;
 				</button>
 			</div>
     </div>
+
+    
+
     <header class="nu-u-mb-10 nu-u-mt-10">
       <div class="container">
         <h1 class="nu-c-h3 nu-u-text--primary nu-u-mt-0 nu-u-mb-2 title">
@@ -85,6 +88,11 @@ const { site, title, tagline } = Astro.props;
       <br> 
       &#169; 2023 Method Black. All rights reserved. 
     </div>
+
+    <div class="rays_container">
+      <div class="rays rays_content"></div>
+    </div>
+
   </body>
 </html>
 <style is:global>
@@ -127,7 +135,6 @@ const { site, title, tagline } = Astro.props;
 		top: 0;
 		left: 0;
 		right: 0;
-		background-color: var(--background);
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
@@ -141,7 +148,11 @@ const { site, title, tagline } = Astro.props;
 		animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
 		animation-fill-mode: both;
 		animation-iteration-count: 1;
-		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+    background-color: var(--background);
+    --shadow-color: rgb(0 0 0 / 0.04);
+    box-shadow: 0px 0px 0px 0px var(--shadow-color),
+    0px 1px 1px -0.5px var(--shadow-color),
+    0px 3px 3px -1.5px var(--shadow-color);
 	}
 	@keyframes slideDownNavigation {
 		from {
@@ -170,7 +181,6 @@ const { site, title, tagline } = Astro.props;
     background-color: var(--background);
     border-radius: var(--spacing-03);
     font-size: var(--desktop-body-sm);
-    transition:all .12s ease-out;
 
     &:hover {
       background-color: var(--background-secondary);
@@ -234,9 +244,11 @@ const { site, title, tagline } = Astro.props;
     .floating-nav { padding: var(--spacing-06) var(--spacing-06);}
     .container { margin: var(--spacing-06);}
   }
+  
   /* logo animation */
   .logo {
     transition: all .12s ease-out;
+    padding-top: var(--spacing-03);
   }
   .logo:hover {
     animation: buzz 0.32s linear 2;
@@ -263,6 +275,74 @@ const { site, title, tagline } = Astro.props;
     }
   }
 
+  /* bg gradient */
+
+.rays_container {
+    overflow: hidden;
+    inset: 0px;
+    position: absolute;
+    z-index: -1;
+}
+
+.rays_content {
+    position: absolute;
+    inset: -10px;
+    opacity: 0.16;
+    height: 100%;
+    min-height: 100vh;
+}
+
+.rays {
+    --stripes: repeating-linear-gradient(
+        145deg,
+        #fff 0%,
+        #fff 7%,
+        transparent 10%,
+        transparent 12%,
+        #fff 16%
+    );
+    --stripesDark: repeating-linear-gradient(
+        145deg,
+        #000 0%,
+        #000 7%,
+        transparent 10%,
+        transparent 12%,
+        #000 16%
+    );
+    --rainbow: repeating-linear-gradient(
+        145deg,
+        #60a5fa 3%,
+        #e879f9 5%,
+        #60a5fa 8%,
+        #5eead4 5%,
+        #60a5fa 3%  
+    );
+    background-image: var(--stripes), var(--rainbow);
+    background-size: 300%, 200%;
+    background-position: 50% 50%, 50% 50%;
+    filter: blur(8px) invert(100%);
+    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
+    pointer-events: none;
+}
+
+.rays::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--stripes), var(--rainbow);
+    background-attachment: fixed;
+    mix-blend-mode: difference;
+}
+
+[data-new-ui-theme="dark"] {
+    .rays {
+    background-image: var(--stripesDark), var(--rainbow);
+    filter: blur(8px) opacity(16%) saturate(200%);
+    }
+    .rays::after {
+    background-image: var(--stripesDark), var(--rainbow);
+    }
+}
 </style>