# Round 3: three clearly different designs

Round 2's variants were too alike, so this round keeps the warm direction and its fixed pieces but gives each homepage a different structure. Each design has a Home page, the Teaching (browse by book) page and a sermon page.

## The same in all three
- **Teaching:** the olive "Browse by book" page with the 66-book grid (sample counts), the filters and the list/series toggle. The page body is copied unchanged from Direction A.
- **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. In "Live now" the hero becomes "We're live now, join us" with a video-embed placeholder.
- **Nav:** Home, Plan your visit, Teaching, What's on, About, Give, Books, plus Watch online.
- **Type:** Fraunces for headings (its "J" has a distinctive curl), a clean sans for body text at 18px on mobile and 20px on desktop.
- **The dove:** the church's own mark sits in the header. On the first visit in a browser session it glides into the hero over about 2.6 seconds, then rests there as a large, faint graphic. With reduced motion turned on, it appears in place without moving.
- **Homepage order:** hero (headline of at most two lines, one sentence, When / Where / Questions blocks, "Plan your visit" and "Watch online"), countdown card, Today's teaching, Find a teaching bar, What to expect, Who we are, WhatsApp, What's on, Give with Gift Aid, footer with charity no. 1050895. Every section sits on one 12-column grid with the same left edge.

## How they differ
| | 1 · Best-of | 2 · Photo-led | 3 · Poster |
|---|---|---|---|
| Hero | Headline left, three detail blocks right, wide photo band below with the countdown card over its corner | Full-width, near full-height photo with a warm dark overlay; very large headline on top; details as three translucent blocks | Huge headline across the page; boxed details on the left; hard-edged photo with sticker badges; the dove drawn huge and cropped by the right edge |
| Nav | Cream bar | Transparent over the photo, turns solid deep brown on scroll | Marigold bar with the links inside a dark pill |
| Palette | Cream and sand content rows; deep green (WhatsApp) and rust (Give) only on calls to action | Sand, deep brown and terracotta; rows alternate photo-led and plain | Flat fields of marigold, olive, rust and ink |
| Shapes | Rounded cards, soft shadows | Large rounded photo frames | Hard edges, thick outlines, offset "printed" shadows |
| Section titles | Small label plus heading | Spaced capitals label plus large heading | Oversized numbers (01 to 07) on an off-centre grid |
| What to expect | Four photo cards | A horizontal strip of five candid photos (swipe on mobile) | Four outlined blocks lettered A to D |
| Dove watermark | Faint on the deep green WhatsApp row | Faint in the deep brown footer | Faint on the dark WhatsApp field |

## Who each suits
- **Best-of:** the safest choice for the family and elders who liked Direction A. It's calm and easy to read.
- **Photo-led:** works best once the church has a few good photos of real Sundays. It puts people first and feels the most welcoming to newcomers.
- **Poster:** the most distinctive and memorable. It suits a church happy to look confident and a little younger. It relies least on photos.

## Stand-in photos
Nine free Unsplash photos live in `mockups/assets/stock/`, with photographers and source links in `CREDITS.md`. Each one carries a "Stand-in photo" label. They are graded warm in CSS (a light sepia and saturation lift), so the files themselves are unedited. I avoided stage lighting, concert crowds, US-looking settings and readable logos. Pexels blocks automated downloads, so all nine come from Unsplash.

## Squint test
`thumbs/` holds each homepage at 300px wide (`*-fold.png` for the first screen, `*-page.png` for the top of the page) and `squint-test.png` side by side. The three read clearly differently at that size: a light page with a photo band, a dark full-photo page, and a bright poster with giant numbers. No layout changes were needed.

## Checks
- No horizontal scrolling at 390px on any of the 12 pages, and no console errors.
- Contrast: every text pair passes WCAG AA. On the photo hero (design 2) the overlay is strong enough that the white headline and bold sentence pass the large-text level even over a pure-white photo.
- No light or sky blue is used anywhere.

## How the files are built
Each design's `styles.css` is Direction A's stylesheet, then the round 3 common styles, then that design's own styles. Later sections override earlier ones. Teaching, sermon and series pages reuse Direction A's page bodies inside each design's header and footer. Behaviour lives in `shared/mockup.js`.