# Visa Payment Passkey — Site Redesign Spec

## Design Direction: "Visa Noir"

A dark-first, high-contrast editorial design that treats the FIDO payment flow like a luxury product experience. Information-dense but surgically precise. Bloomberg Terminal meets Dieter Rams.

---

## Design Principles

1. **Gold on Dark** — Visa Navy pushed to near-black (#0A0E2E) as the canvas. Visa Gold (#F7B600) as the singular hero accent. No competing colors.
2. **Code is Content** — JWT payloads and API responses are the centerpiece, not afterthoughts. Full-bleed dark terminal panels with glowing syntax highlighting.
3. **Progressive Disclosure** — Each step reveals with intention. Status transitions feel alive, not static.
4. **Always-Visible Flow** — Replace the hidden hamburger nav with a persistent horizontal step indicator. Users always know where they are.

---

## Color System

```css
:root {
  /* Canvas */
  --bg-primary: #0A0E2E;        /* Deep navy-black */
  --bg-secondary: #111640;       /* Elevated surface */
  --bg-tertiary: #1A1F52;        /* Cards, panels */
  --bg-code: #080B1F;            /* Code block background */

  /* Accent */
  --accent-gold: #F7B600;        /* Primary accent — Visa Gold */
  --accent-gold-dim: #C49200;    /* Muted gold for borders */
  --accent-gold-glow: rgba(247, 182, 0, 0.15); /* Glow effect */

  /* Text */
  --text-primary: #E8EAF0;       /* Body text */
  --text-secondary: #8B90A8;     /* Muted/supporting text */
  --text-tertiary: #5A5F78;      /* Disabled/placeholder */

  /* Status */
  --status-success: #00E676;     /* Bright green */
  --status-error: #FF5252;       /* Bright red */
  --status-warning: #FFB74D;     /* Warm amber */
  --status-info: #448AFF;        /* Blue info */

  /* Syntax highlighting (on dark bg) */
  --syn-key: #F7B600;            /* Gold keys */
  --syn-string: #00E676;         /* Green strings */
  --syn-number: #FFB74D;         /* Amber numbers */
  --syn-boolean: #448AFF;        /* Blue booleans */
  --syn-null: #5A5F78;           /* Dim null */

  /* Glass */
  --glass-bg: rgba(17, 22, 64, 0.85);
  --glass-border: rgba(247, 182, 0, 0.12);
  --glass-blur: 20px;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-accent: rgba(247, 182, 0, 0.25);

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
}
```

---

## Typography

**Display/Headings:** [Instrument Sans](https://fonts.google.com/specimen/Instrument+Sans) — geometric, sharp, modern. Weights: 500, 600, 700.

**Body:** Instrument Sans 400 — clean and readable at all sizes on dark backgrounds.

**Code/Mono:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) — designed for code legibility, distinctive at small sizes, ligature support.

```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; }

pre, code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  font-feature-settings: 'liga' 1;
}
```

---

## Layout Architecture

### Page Structure
```
+----------------------------------------------------------+
|  [Step Flow Bar — always visible, horizontal]             |
|  [ 1. Compat ] --- [ 2. Register ] --- [ 3. CMPI ] ...  |
+----------------------------------------------------------+
|                                                          |
|  [Page Header — title + description, minimal]            |
|                                                          |
|  +----------------------------------------------------+  |
|  |  Section Card (glass panel)                         |  |
|  |  [Code Block — full-width terminal panel]           |  |
|  +----------------------------------------------------+  |
|                                                          |
|  +----------------------------------------------------+  |
|  |  Status Area (animated ring + text)                 |  |
|  +----------------------------------------------------+  |
|                                                          |
|  [Action Button — gold accent, centered]                 |
|                                                          |
+----------------------------------------------------------+
```

### Step Flow Bar (replaces hamburger menu)
- Fixed at top of page (not sticky — scrolls with content on mobile)
- Horizontal stepper with numbered circles connected by a line
- Current step: gold circle with glow ring
- Completed steps: filled gold
- Future steps: dim outline
- Step labels below each circle
- On mobile: scrollable horizontal, current step centered

### Section Cards
- Dark glass panels: `var(--bg-secondary)` with subtle border
- No outer shadow — use border glow instead: `border: 1px solid var(--border-subtle)`
- Active/focused sections get gold border accent
- Staggered reveal animation on page load (each section fades up with 100ms delay)

### Code Blocks (hero treatment)
- Full-width within the card, no inner padding border
- Background: `var(--bg-code)` — the darkest surface
- Top bar: filename/label + copy button, slim gold accent line at top
- Syntax highlighting on dark:
  - Keys: Gold (#F7B600)
  - Strings: Green (#00E676)
  - Numbers: Amber (#FFB74D)
  - Booleans: Blue (#448AFF)
- Line numbers in gutter (optional, dim)
- Copy button: ghost style, gold text, fills gold on hover

### Status Indicators
- Replace spinner with animated concentric ring pulse (CSS only)
- Success: green glow ring expanding outward
- Error: red pulse
- Waiting: gold rings radiating
- Status text appears below with fade-in

### Action Buttons
- Primary: Gold fill, dark text, large (min 200px wide)
- Hover: slight scale up (1.02), brighter gold, subtle glow
- Secondary: Ghost outline with gold border
- Disabled: dim, no glow, reduced opacity

### Modals (StepUp / FIDO Challenge)
- Frosted glass overlay: `backdrop-filter: blur(20px)` over the dark canvas
- Modal panel: `var(--glass-bg)` with gold border accent
- Smooth scale-in animation from 0.95 to 1.0
- Close button: minimal X in top-right corner

---

## Animations & Motion

### Page Load Sequence
1. Step bar slides down from top (200ms)
2. Page header fades in (300ms, 100ms delay)
3. Section cards stagger up: each card translates from Y+20px to 0, opacity 0 to 1, 400ms each, 100ms stagger

### Status Transitions
```css
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--accent-gold-glow); }
  70% { box-shadow: 0 0 0 15px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
```

### Code Block Copy Feedback
- On copy: brief flash of gold border (300ms), copy icon morphs to checkmark

### Button Hover
- Scale 1.0 → 1.02 with box-shadow glow appearing
- Transition: `transform 200ms var(--ease-out-expo), box-shadow 200ms ease`

---

## Responsive Strategy

| Breakpoint | Behavior |
|-----------|----------|
| < 576px | Step bar becomes vertically stacked pills. Full-width cards. Code blocks scroll horizontally. |
| 576-768px | Step bar horizontal, compact. Cards padded. |
| 768-1200px | Full layout. Step bar with labels. |
| > 1200px | Max-width 1100px centered. Generous whitespace. |

---

## Dark Mode Toggle (Future)

Since the base is dark, a light mode toggle is the inverse:
- `var(--bg-primary)` → `#FAFBFE`
- `var(--text-primary)` → `#1A1F52`
- Code blocks stay dark (always terminal aesthetic)
- Gold accent stays consistent

Implementation: CSS custom property override via `[data-theme="light"]` on `<html>`.

---

## File Changes Required

### New Files
- `assets/redesign.css` — Complete new stylesheet (replaces style.css + custom.css)
- `assets/animations.css` — Keyframes and motion utilities
- `includes/step-bar.php` — New step flow component (replaces nav.php + navigation.php)

### Modified Files
- `includes/header.php` — Simplified, loads new fonts + new CSS
- All page PHP files — Replace section/card HTML classes to match new design system
- `assets/script.js` — Add intersection observer for scroll reveal, step bar interaction

### Removed Files (consolidated)
- `assets/animate.css` — Replaced by `animations.css`
- `assets/cardinal-handler.css` — Merged into `redesign.css`

---

## Implementation Order

1. Create `redesign.css` with full design system (variables, typography, layout, components)
2. Create `animations.css` with motion utilities
3. Build `step-bar.php` component
4. Update `includes/header.php` to load new assets
5. Update each page PHP file one at a time (pktest → dx → cmpi_lookup → passkey_challenge)
6. Test each page after update
7. Remove deprecated CSS files

---

## Key Design Decisions

**Why dark-first?** This is a developer-facing integration demo. Developers live in dark terminals. A dark UI with excellent code highlighting communicates "this was built by engineers, for engineers."

**Why replace the hamburger?** The flow is linear and only 4 steps. Hiding navigation behind a hamburger adds friction to the primary use case. A visible step bar provides orientation and reduces cognitive load.

**Why gold-only accent?** Visa's brand has two hero colors — navy and gold. On a dark navy canvas, gold becomes the natural accent. A single-accent system creates visual clarity and premium feel. Every gold element means "important" or "interactive."

**Why glass morphism for modals?** The Cardinal iframes load external content. A frosted glass overlay maintains the design atmosphere while clearly delineating "this is third-party content in your flow."