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>
This commit is contained in:
varutasu 2026-06-04 15:30:22 -05:00 committed by GitHub
parent 66a4d7b721
commit 2efe82eff8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -59,15 +59,9 @@ export default function Home() {
return ( return (
<div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}> <div className="min-h-screen" style={{ backgroundColor: 'var(--bg-primary)' }}>
<nav <nav
className="border-b" className="page-header-glass border-b"
style={{ 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)', 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"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">