From d5f60ce9d2fbc2a870b3bb96f5365a0e04e0afc4 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 21 Oct 2025 09:51:48 -0500
Subject: [PATCH] fix(navbar): remove border artifact and add 10px bottom fade
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed two visual issues with the navbar:

1. Removed black border line when transparent: Changed borderBottom to
   conditionally be 'none' instead of '1px solid transparent', which was
   showing up as a visible line when the navbar is transparent on homepage

2. Added 10px gradient fade at bottom: Applied linear-gradient that fades
   from the dark background to transparent over the last 10px, creating a
   softer transition instead of a sharp cut-off

The navbar now seamlessly blends into the page content with no visual artifacts.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 apps/web/src/components/AppNavBar.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/AppNavBar.tsx b/apps/web/src/components/AppNavBar.tsx
index 653bea24..6869caa1 100644
--- a/apps/web/src/components/AppNavBar.tsx
+++ b/apps/web/src/components/AppNavBar.tsx
@@ -575,11 +575,15 @@ export function AppNavBar({ variant = 'full', navSlot }: AppNavBarProps) {
   return (
     <Tooltip.Provider delayDuration={200}>
       <header
+        style={{
+          background: isTransparent
+            ? 'transparent'
+            : 'linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) calc(100% - 10px), transparent 100%)',
+        }}
         className={css({
-          bg: isTransparent ? 'transparent' : 'rgba(0, 0, 0, 0.5)',
           backdropFilter: isTransparent ? 'none' : 'blur(12px)',
           shadow: isTransparent ? 'none' : 'lg',
-          borderBottom: '1px solid',
+          borderBottom: isTransparent ? 'none' : '1px solid',
           borderColor: isTransparent ? 'transparent' : 'rgba(139, 92, 246, 0.2)',
           position: 'fixed',
           top: 0,