PB-051: Implement Glassmorphism Card Styling System

[Bdon101]

Agent Identity

• Owner: agent3
• Role: End-user product experience implementation

Task Metadata

• Task ID: PB-051
• Depends On: []
• Labels: agent3, ui-gap, critical, status:ready

Context

Multiple reference designs use glassmorphism effects (backdrop-filter blur, semi-transparent backgrounds, subtle borders) for modern card styling. Current implementation uses standard solid backgrounds. This affects clarification panel, task cards, and modal overlays.

Playwright validation confirmed: Glass styling is missing from current implementation.

Goal

Create reusable Tailwind utility classes and/or component variants that implement glassmorphism styling matching the reference designs.

Acceptance Criteria

• Glass card utility classes added to Tailwind config or globals.css
• Clarification panel cards use glass styling
• Task detail modal uses glass overlay
• Styling works across light/dark modes
• Performance is acceptable (backdrop-filter can be expensive)
• Fallback styling exists for browsers without backdrop-filter support
• Playwright test passes for glass card visibility

Constraints

• Must maintain existing component structure and props
• Should be opt-in via className prop, not forced on all cards
• Must work with existing dark mode implementation
• Do not break existing card layouts

Files to Create or Edit

• EDIT: /ProjectBeacon/ProjectBeacon/tailwind.config.ts
• EDIT: /ProjectBeacon/ProjectBeacon/app/globals.css
• EDIT: /ProjectBeacon/ProjectBeacon/components/projects/clarification-panel.tsx
• EDIT: /ProjectBeacon/ProjectBeacon/components/dashboard/task-detail-modal.tsx

Expected Output / Interface

// Usage example
<div className="glass-card">
  {/* content */}
</div>

// Or via Tailwind utilities
<div className="bg-white/5 backdrop-blur-xl border border-white/10">
  {/* content */}
</div>

Verification Commands

cd ProjectBeacon/ProjectBeacon
npm run dev
# Navigate to /projects/test-project/workspace
# Verify glass blur effects on cards

npx playwright test tests/ui-validation.spec.ts -g "Glass Card"

Reference

• Design: docs/ui/streamlined_ai_clarification/code.html (lines 40-48, CSS)
• Full analysis: docs/UI_GAP_ANALYSIS.md (Gap Test issue from Codex MCP (2) #2)
• Test evidence: test-results/ui-validation-*-Glass-Card-*/test-failed-1.png

Definition of Done

• All acceptance criteria checked
• Playwright test passes
• Glass styling documented in handoff
• No performance regressions