---
convoy: unify-glass-panel-surfaces
brief_number: 6
depends_on: []
files:
  - pages/index.js
---

# Brief 6: Migrate landing nav bar to `.page-header-glass`

## Goal (1 sentence)

Replace the handrolled translucent `<nav>` on the public landing page with the canonical `.page-header-glass border-b` className, and drop the malformed `boxShadow: 'inset 0 1px 0 var(--rim-light-inner)'` (the token already contains its own `inset 0 1px 0`; double-wrapping breaks the cascade — documented in `styles/globals.css` L748-761).

## Files in scope (do not edit anything else)

- `pages/index.js` — the landing `<nav>` block, currently L61-72 (around the `border-b` declaration with inline `background: 'var(--glass-surface-mid)'` + `backdropFilter` + `boxShadow: 'inset 0 1px 0 var(--rim-light-inner)'`).

**Out of scope:** everything else on the landing page (the Deck Hearth heading, the Sign In / Get Started buttons inside the nav, the hero section, feature cards, footer, the `if (user) return null;` redirect logic, etc.). The migration is a single `<nav>` element's `className` + `style` swap.

## Conventions to follow

- **Verbatim replacement:**
  ```jsx
  // Before:
  <nav
    className="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)',
    }}
  >

  // After:
  <nav
    className="page-header-glass border-b"
    style={{
      borderColor: 'var(--border)',
    }}
  >
  ```
  The class provides `background`, `backdrop-filter`, and the
  correct `box-shadow` (which IS `var(--rim-light-inner), 0 1px 0
  var(--border)` per its definition in `globals.css` L300-306). The
  `border-b` Tailwind class needs the `borderColor` style to remain
  themed; everything else collapses into the class.

- **The malformed boxShadow is the bug:** `var(--rim-light-inner)` is
  already a complete `inset 0 1px 0 <color>` declaration. Wrapping
  it in another `inset 0 1px 0 ...` produces invalid CSS that the
  browser silently drops. The class's own `box-shadow:
  var(--rim-light-inner), 0 1px 0 var(--border)` does the right
  thing. Removing the inline `boxShadow` line is the fix.

- **Children verbatim:** the `<div className="max-w-7xl mx-auto ...">`
  inside the `<nav>`, the `<AnimatedFireLogo>`, the heading, and the
  Sign In / Get Started buttons all stay byte-identical. Do not
  touch them.

- **`.page-header-glass` placement check:** the class is defined in
  `styles/globals.css` L300-306 and is already used by authenticated
  pages' header strips (dashboard, my-cards, cards, etc.). It's safe
  to reuse on the public landing page — the class has no auth
  coupling.

- **Nested backdrop-filter check** (boot-the-brief risk #6): the
  landing page has no enclosing Layout (the `pages/index.js` redirect
  logic returns `null` for authenticated users and renders its own
  full-page `<div>` for anonymous visitors — no `<Layout>` wrapper).
  So there's no risk of nested `backdrop-filter` stacking. Verified.

- **AGENTS.md / no-go zones:** `pages/index.js` is an authored page,
  not a generated artifact. Allowed.

## Acceptance criteria

- [ ] Landing `<nav>` uses `className="page-header-glass border-b"`.
- [ ] Inline `style` on the `<nav>` retains only `borderColor: 'var(--border)'` — no `background`, no `backdropFilter`, no `WebkitBackdropFilter`, no `boxShadow`.
- [ ] The Deck Hearth heading + Sign In / Get Started buttons inside the nav render identically.
- [ ] Manual: open `/` in an incognito window (anonymous user), verify the nav bar renders with a subtle glassy treatment, an `inset 0 1px 0` highlight (the inner rim), and a 1px bottom border. Verify in both light and dark theme via the theme toggle (which appears on the public landing). Attach light + dark screenshots to PR.
- [ ] `npm run lint` + `npm run test:run` pass (no test count change expected).
- [ ] No edits to other files.

## Rationale (≤3 sentences)

The landing nav is the highest-visibility public surface in the app and currently both (a) duplicates `.page-header-glass`'s composition handrolled, and (b) ships a malformed `boxShadow` that silently breaks. Migrating to the canonical class is a one-line cleanup that fixes a latent bug. No corner-light treatment is appropriate here — the nav is full-bleed, so corner radials would land at viewport edges and never read as light sources; `.page-header-glass` (which uses the rim/border-only composition) is the right shape.