# content-pages.css Visual Regression Checklist

## Background

`content-pages.css` was referenced in `ccsoccer.libraries.yml` for a long time but the
file never existed. That means all 15 pages using this library were being styled entirely
by Olivero (the base theme) + `base.css` + `layout.css`. Now that the file exists and
loads, there is potential for conflict or override.

**Compare each page below against TEST** (which does NOT have this file yet).
TEST = ground truth. Branch = what we're validating.

---

## What to Look For

These are the most likely categories of visual regression:

### 1. Buttons
- **Color** — Default `.button` should be white/outlined. `.button--primary` should be red.
  If buttons lost their red fill, a base.css rule is being overridden.
- **Size/padding** — Buttons should not be larger or smaller than on TEST.
- **Centering** — On league cards specifically, the button should now be centered (intentional change).

### 2. Card borders and shadows
- Cards (league, season, team) had a subtle `box-shadow` from `base.css`.
  Look for cards that appear flat/borderless or have a heavier shadow than expected.
- League cards had a red underline under the `h2` heading — if that's gone, it was
  coming from Olivero and may need to be explicitly added to content-pages.css.

### 3. Typography inside cards
- Heading sizes, weights, and margins.
- Description text color — should be muted/secondary, not full black.

### 4. Layout / spacing
- Card grids should still wrap correctly at mobile widths.
- Section spacing (gap between cards, margin above/below sections) should be consistent.

### 5. Tab/pill rows (schedule, teams pages)
- Season and tournament tab pills should look the same — outlined inactive, red active.
- These are styled in `base.css` with `.season-tab` / `.tournament-tab` — content-pages.css
  now also defines these. The new file could be winning the specificity battle with
  slightly different values.

### 6. Page-specific elements
- My Account hub cards — icon size, subtitle color, highlight border on credits card.
- My Orders table — header weight, row borders, status badge colors (completed = green, etc).
- Register Confirm page — icon circle, heading, button style.
- Rules / Concussion Policy — mostly text, check heading sizes and nav link styling.

---

## Pages to Check

Work through these in order. Check both logged-out and logged-in states where noted.

### Public pages (check logged out first, then logged in)

- [ ] `/home` — League cards, button labels, button centering, card shadows, h2 red underline
- [ ] `/rules` — Page layout, heading styles, nav links between Rules / Concussion Policy
- [ ] `/concussion-policy` — Same as above
- [ ] `/schedule` — Season tab pills, schedule grid, footer PDF link
- [ ] `/register/confirm` — Confirmation icon, heading, button (can test by visiting URL directly)

### Authenticated pages (must be logged in)

- [ ] `/my-account` — Hub cards grid, invite banner (if applicable), credits highlight card
- [ ] `/my-orders` — Table layout, order status badge colors
- [ ] `/my-schedule` — Season tab pills, schedule grid (same as /schedule but user-filtered)
- [ ] `/my-teams` — Season tabs, team card with red left border, roster player list
- [ ] `/teams` — Same as my-teams but shows all teams (board member account needed)
- [ ] `/purchase-jerseys` — Jersey dropdown and Add to Cart button
- [ ] `/tournament-schedule` — Tournament tab pills, schedule grid
- [ ] `/my-tournament-schedule` — Same as above, user-filtered
- [ ] `/tournament-teams` — Tournament tabs, team cards, roster lists
- [ ] `/my-tournament-teams` — Same as above, user's team only

---

## Intentional Changes (not regressions)

These differences from TEST are expected and correct:

- `/home` — League card buttons are now **centered** (was left-aligned).
- `/home` — Button labels now say "See Open Coed Registrations" etc (was "See Current Open Registrations").
- `/register` — Filter pills appear at top (All / Coed / Men's / Tournaments).
- `/register` — "My Registrations" section is removed.
- `/register` — Pending invitations banner has no inline styles (should look the same or cleaner).

---

## How to Fix Issues Found

If a regression is found, the fix is one of:

1. **Missing style** — Add the rule explicitly to `content-pages.css` so it no longer depends
   on Olivero providing it.
2. **Conflicting specificity** — Adjust selector specificity or remove the conflicting rule
   from `content-pages.css`.
3. **Wrong value** — Update the value in `content-pages.css` to match what Olivero was providing.

Do not modify `base.css` or `layout.css` to fix regressions — those are shared globally.
Fix should always be in `content-pages.css`.

---

## Sign-off

- [ ] All 15 pages checked
- [ ] All regressions resolved
- [ ] Intentional changes confirmed correct
- [ ] Ready to merge to main