---
convoy: unify-glass-panel-surfaces
brief_number: 2
depends_on: []
files:
  - pages/login.js
  - pages/signup.js
---

# Brief 2: Migrate auth form cards to `.glass-panel-strong`

## Goal (1 sentence)

Replace the handrolled `rgba(var(--bg-secondary-rgb), 0.85)` + `backdrop-blur-sm` glass imitation on the login + signup form cards with the canonical `.glass-panel-strong rounded-2xl p-8` className so the auth flow shares the rest of the app's surface treatment (corner catch-lights, system blur tier, gradient border).

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

- `pages/login.js` — replace the form-card container `<div>` (currently L82-88, look for the `className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm border border-opacity-20"` + inline `backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.85)'`).
- `pages/signup.js` — same migration on the form-card container (currently L227-232 in the symmetric `<div className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm ...">` block).

**Out of scope:** the surrounding layout/header on either page, the `<Input>` / `<Button>` children, error/success banners, any of the legend/divider/social-button styling below the form. Do not touch them.

## Conventions to follow

- **Verbatim replacement** for each card container:
  ```jsx
  // Before:
  <div
    className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm border border-opacity-20"
    style={{
      backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.85)',
      borderColor: 'var(--border)',
    }}
  >

  // After:
  <div className="glass-panel-strong rounded-2xl p-8">
  ```
  The `style={{}}` block is removed entirely. `.glass-panel-strong`
  already composes the background, blur, rim, elevation, and the
  gradient-border treatment.
- **No new imports.** This brief does NOT use `<GlassSurface>`
  directly — the className path is correct because (a) it's an HTML
  div with no compositional requirements, (b) the existing
  `.glass-panel-strong` class is the documented canonical shape per
  the design audit, and (c) using the class keeps the diff minimal.
- **Preserve children verbatim.** The `<form>`, every `<Input>`, every
  `<Button>`, the error banner, the social-sign-in divider, the
  "Don't have an account?" footer link — all stay byte-identical.
- **Do not adjust the surrounding header block** (Deck Hearth logo +
  greeting text); only the form-card `<div>` itself migrates.
- **Tailwind safelist note:** `.glass-panel-strong` is defined in
  `styles/globals.css` as a plain CSS class (not a Tailwind
  utility). It's already used in `<Layout>` and elsewhere, so the
  build picks it up via the `@layer` block. No `tailwind.config.js`
  edit needed.

## Acceptance criteria

- [ ] `pages/login.js` form-card `<div>` uses
      `className="glass-panel-strong rounded-2xl p-8"` and carries
      no inline `backgroundColor` / `borderColor` style.
- [ ] `pages/signup.js` form-card `<div>` uses
      `className="glass-panel-strong rounded-2xl p-8"` and carries
      no inline `backgroundColor` / `borderColor` style.
- [ ] All form fields, labels, buttons, error banners, and footer
      links render identically post-migration (manual smoke;
      `tests/smoke/auth.spec.js` continues to pass without edits).
- [ ] No edits to other files (e.g. no token additions in
      `styles/globals.css`, no new components in `components/ui/`).
- [ ] `npm run lint` passes; `npm run test:run` is unchanged
      (no test additions needed for a pure className swap).
- [ ] Dark mode: card remains legible against the body background
      gradient (verify manually; before-shot vs after-shot screenshot
      attached to the PR description).

## Rationale (≤3 sentences)

These two cards are the first surfaces a new user sees and they predate the `.glass-panel-strong` system; aligning them is both a correctness fix (the `rgba(--bg-secondary-rgb, 0.85)` shape doesn't compose corner lights) and a consistency win. The migration is a pure className swap with zero behavioral change — the lowest-risk brief in the convoy.