# Round 2: Direction A variants

The client chose Direction A (Warm welcome). Round 2 offers three variants of it. All three have the same pages, the same welcome-first homepage and the same fixed pieces; only the feel changes.

## Fixed in all three (unchanged from A)
- **Teaching:** the olive "Browse by book" grid of 66 books (sample counts), the filters and the list/series toggle (`finder.html` body copied from `a-warm`).
- **Sermon page:** the peach pull-quote panel and the "Take it further" links.
- **Sunday state:** the Before service / Live now / After service preview and the countdown card.
- **Navigation:** Home, Plan your visit, Teaching, What's on, About, Give, Books, plus Watch online.
- **Series and Giving pages:** reused from A without changes. They pick up each variant's colours and spacing.

## New homepage (all three)
1. A welcome hero with the Sunday time and place, "Plan your visit" and "Watch online" buttons, and a large photo slot. The Sunday card sits over the photo. In "Live now" the hero changes to "We're live now, join us" and the photo becomes a video embed. "Watch online" opens that view.
2. A slim "Find a teaching" bar (book, series, speaker, topic).
3. This week's teaching as one large card (play, watch, notes), with John Chapter 2 and John Chapter 1 (Part 2) listed as earlier in the series.
4. What to expect, then Who we are, with a leadership-team photo slot and a link to the Calvary Chapel statement of faith.
5. WhatsApp call to action, upcoming events, Give with Gift Aid, then the footer.

## How they differ
| | V1 Refined | V2 Warmer | V3 Lighter |
|---|---|---|---|
| Palette | A's cream, sand, rust, olive | Same, with olive ("Who we are") and rust (WhatsApp) as full bands | Near-white `#FFFDF9`, pale cream `#F8F3EB`; pale olive WhatsApp band; light footer |
| Type | Fraunces + Figtree, tidier scale | Bigger headlines (up to about 7.5rem) | Fraunces at weight 500 for headings only; small-caps labels |
| Hero | Copy beside photo | Larger photo, warm glow | Headline beside the service details, wide 21:9 photo below |
| Cards | Rounded, soft shadow | Rounder, lift more on hover | Hairline borders, smaller corners |
| Motion | Gentle hover | Sections ease in on scroll (off with reduced motion) | Gentle hover |

## Who each suits
- **V1:** the safest step from the version the family and elders already like.
- **V2:** suits a church with good photography that wants the homepage to feel more welcoming and alive.
- **V3:** feels calm and modern, and is easiest to keep looking good with fewer or weaker photos.

## Rules followed
- No light or sky blue anywhere; the browser's blue search-clear icon is replaced with a warm one.
- Every photo area is a labelled placeholder. The dove logo is a text placeholder; no logo is drawn or copied.
- All text pairs pass WCAG AA. The new pairs were checked, and the lowest is 5.7:1.
- Mobile first. Every page was checked for horizontal overflow at 390px.

## Content to confirm with the church
- Children's provision (shown as "to confirm" on the homepage).
- The dates of the John teachings (assumed), the WhatsApp channel link, and the leadership-team photo.

## How the files are built
Each variant's `styles.css` is Direction A's stylesheet, followed by a round-2 section (refinements and homepage components), followed by that variant's overrides (V2 and V3 only). Later sections override earlier ones. The interactive behaviour is in `shared/mockup.js`.