From 2efe82eff8b1113ffaaa967ba62dae172437b557 Mon Sep 17 00:00:00 2001
From: varutasu <104105839+varutasu@users.noreply.github.com>
Date: Thu, 4 Jun 2026 15:30:22 -0500
Subject: [PATCH] refactor(landing): use .page-header-glass for the nav bar
 (#120)

Brief 6 of unify-glass-panel-surfaces convoy. Replaces the handrolled
inline `var(--glass-surface-mid)` + `backdropFilter` + malformed
`boxShadow: 'inset 0 1px 0 var(--rim-light-inner)'` on the landing
<nav> with the canonical .page-header-glass class, which already
exists in styles/globals.css for exactly this "full-bleed top band"
use case.

The malformed boxShadow was a real bug: --rim-light-inner is already
a complete `inset 0 1px 0 <color>` declaration, so wrapping it in
another `inset 0 1px 0 ...` produced invalid CSS the browser silently
dropped. Documented in styles/globals.css L748-761. The class's own
`box-shadow: var(--rim-light-inner), 0 1px 0 var(--border)` does the
right thing.

Acceptance criteria from
.convoys/unify-glass-panel-surfaces/brief-6-landing-nav-bar.md:
- [x] <nav> uses className="page-header-glass border-b"
- [x] Inline style retains only borderColor: 'var(--border)'
- [x] Heading + Sign In / Get Started buttons inside the nav unchanged
- [x] npm run lint passes (1 pre-existing warning unrelated to this PR)

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 pages/index.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 0217a65..0cbff16 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -59,15 +59,9 @@ export default function Home() {
   return (
     <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
       <nav
-        className="border-b"
+        className="page-header-glass border-b"
         style={{
-          background: 'var(--glass-surface-mid)',
-          backdropFilter:
-            'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
-          WebkitBackdropFilter:
-            'blur(var(--glass-blur-mid)) saturate(var(--glass-saturate))',
           borderColor: 'var(--border)',
-          boxShadow: 'inset 0 1px 0 var(--rim-light-inner)',
         }}
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">