# Multi-Page Header Redesign — Replication Workflow

## Pattern Summary

When the user picks a header design variant across all pages of a multi-page static web app, the changes fall into two layers: CSS and HTML. Replicate in order — CSS first (so the HTML has rules to reference), then HTML.

## Layer 1: CSS Changes (apply to all pages)

### 1a. Change `.header-card` gradient

The header card uses `background: linear-gradient(...)` in a `<style>` block. Some pages have multiple `.header-card` definitions at different specificity points — update ALL of them.

### 1b. Replace `.nav-link` hover effect

The old shine effect (`::before` with horizontal gradient slide) is replaced with an underline indicator (`::after` with width transition):

```css
.nav-link { position: relative; } /* remove overflow:hidden */
.nav-link::after {
    content: '';
    position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 2px;
    background: white; border-radius: 1px;
    transition: width 0.2s ease;
}
.nav-link:hover::after { width: 50%; }
```

### 1c. Active page class

```css
.nav-link.active-page {
    color: white !important;
    font-weight: 600 !important;
    background: none !important;
    box-shadow: none !important;
}
.nav-link.active-page::after { width: 50%; }
```

### 1d. User avatar ring

```css
.user-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
```

## Layer 2: HTML Changes (per-page, adjust active link)

### 2a. Desktop navigation restructure

Replace the centered `<div class="hidden lg:flex items-center gap-0.5 mx-auto">` with a `w-full` layout that has brand mark on left, nav links centered, user on right:

```html
<div class="hidden lg:flex items-center gap-6 w-full">
    <!-- Brand (same on all pages) -->
    <a href="index.html" class="flex items-center gap-2.5 flex-shrink-0 group">
        <div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center
                    group-hover:bg-white/15 transition-colors">
            <svg class="w-4 h-4 text-white/80" ...>gear icon</svg>
        </div>
        <span class="font-semibold text-sm text-white/90 tracking-tight">ShopProQuote</span>
    </a>
    
    <!-- Nav Links (active link changes per page) -->
    <div class="flex items-center gap-1 ml-auto mr-auto">
        <a href="page.html"
           class="nav-link active-page px-3 md:px-4 py-2 text-xs md:text-sm font-medium
                  text-white transition-all duration-200">
           ...
        </a>
        <!-- inactive links: text-white/60 hover:text-white -->
        <a href="other.html"
           class="nav-link px-3 md:px-4 py-2 text-xs md:text-sm font-medium
                  text-white/60 hover:text-white transition-all duration-200">
           ...
        </a>
    </div>
</div>
```

### 2b. User button

Replace the old button with a gradient avatar circle + ring:

```html
<button id="user-menu-btn"
        class="flex items-center gap-2 p-1.5 pr-3 rounded-xl
               bg-white/8 hover:bg-white/12 transition-all duration-200 group">
    <div class="w-7 h-7 md:w-8 md:h-8 rounded-full user-avatar
                bg-gradient-to-br from-blue-400 to-blue-600
                flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
        <svg class="w-3.5 h-3.5" ...>person icon</svg>
    </div>
    <div class="hidden md:block text-left">
        <p id="user-email"
           class="text-xs font-medium text-white/90 truncate max-w-32"></p>
    </div>
    <svg class="w-3 h-3 text-white/40 group-hover:text-white/70 transition-colors" ...>
        chevron
    </svg>
</button>
```

### 2c. Mobile nav links

Update styling to match:
- Inactive: `text-white/60 hover:text-white hover:bg-white/8`
- Active: `text-white font-semibold` (no `bg-white/20`, no `shadow-sm`)
- Container border: `border-white/10` (was `border-white/20`)

## Replication Order

1. **Do one page first** — typically the one the user is looking at
2. **Verify** — hard refresh, check desktop + mobile
3. **Replicate CSS changes to other pages** — same rules apply everywhere
4. **Replicate HTML changes** — adjust ONLY the active link for each page
5. **Verify ALL pages** — navigate between them to confirm each page's active link highlights correctly

## Per-Page Active Link Table

| Page file | Active link href | Active page name |
|-----------|-----------------|-----------------|
| `index.html` | `index.html` | Dashboard |
| `repair-orders.html` | `repair-orders.html` | Repair Orders |
| `appointments.html` | `appointments.html` | Appointments |
| `customers.html` | `customers.html` | Customers |

The active link gets `class="nav-link active-page ..."` and `text-white` (not `text-white/60`). All others get `text-white/60 hover:text-white`.

## Pitfalls

- **Multiple `.header-card` CSS definitions.** Some pages define `.header-card` in 2-3 different `<style>` blocks within the same file. Update ALL of them — same specificity, later wins.
- **SVG formatting varies between pages.** Some pages use multi-line SVGs, others use single-line. Match the exact whitespace when crafting patch strings.
- **Mobile nav active link also needs updating.** Both desktop and mobile nav sections have their own copy of the nav links.
- **`justify-between` vs `flex` layout.** Pages from different reference builds may use different flex layouts in the header row. Match the existing structure.
- **Brand mark is identical across all pages.** The exact same HTML can be copied to each page — only the active nav link changes.
- **Test dark mode too.** The CSS `!important` rules should override both light and dark variants of Tailwind classes.