Strikers — Hockey Club Hero

# Full-bleed action-photo hero — rebuild prompt

A single-viewport, full-bleed photographic hero. One sports-action photograph fills the entire viewport edge to edge; everything else is white type and translucent glass chrome floating on top of it. No navigation bar, no header row, no page chrome of any kind — the top edge of the viewport is the photograph. A giant low-opacity wordmark sits across the bottom, overlapping the image.

**Reference viewport for every number below: 1440 × 986 px.** The source was measured inside a mockup mat at 1169 × 801 and scaled by 1.232; treat all values as "(inferred)" from stills unless noted — there was no live-page motion capture for this reference, so every timing is given as a range and marked accordingly.

---

## 1. Structure

- **Container:** none. The section is `width: 100vw; height: 100vh; min-height: 860px; overflow: hidden; position: relative`. No max-width wrapper, no centred column, no gutters at the page level. Corners are square (`border-radius: 0`). Nothing sits behind or around it.
- **Column structure:** not a grid — an absolutely-positioned overlay system on a full-bleed image. Content is anchored to the four corners and the bottom edge:
  - left rail, top-aligned: 64px from the left edge, text block capped at 720px
  - right rail, top-aligned: 64px from the right edge, 370px wide
  - right rail, lower third: right-aligned cluster, ragged left edge
  - bottom band: full-bleed, ignores the 64px rails
- **Layers, top to bottom in z-order / reading order.** These numbers are reused in every section below.

  1. **Photographic stage** — full-bleed image + corner scrim. `z-index: 0`.
  2. **Copy block** (left rail): headline → paragraph → CTA pair. Top-left, starting 72px from the top.
  3. **Media card** (right rail, top): rounded glass panel holding a video thumbnail + 3 lines of caption.
  4. **Tag cluster** (right rail, lower third): 5 glass pills on two right-aligned rows.
  5. **Bottom band**: a small centred trademark caption sitting directly above a giant, translucent, near-full-width wordmark.

---

## 2. Scroll map

The reference is exactly one viewport tall. There is **no scroll travel**, so nothing here is scroll-linked; every movement is a load entrance that plays once.

| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Photographic stage | 986px | 1.00 | 986px | static bed + entrance (scale settle) |
| 2 | Copy block | 986px band | 1.00 | 0 (shares §1) | entrance |
| 3 | Media card | 986px band | 1.00 | 0 (shares §1) | entrance |
| 4 | Tag cluster | 986px band | 1.00 | 0 (shares §1) | entrance |
| 5 | Bottom band | 986px band | 1.00 | 0 (shares §1) | entrance |

**Total page height: 986px = 1.00 viewport.** Layers 2–5 are absolutely positioned inside §1 and add no height. If you embed this section at the top of a longer page, see the conditional parallax note in §1's motion block — otherwise there is nothing to scroll and no scroll-linked value anywhere in this design.

---

## 3. Spacing

Page rails: **64px left, 64px right.** The bottom band deliberately breaks them.

**§2 Copy block** — `position: absolute; left: 64px; top: 72px; max-width: 720px`
- headline cap-line lands ≈96px from the top
- headline → paragraph: **32px**
- paragraph first line has a **78px `text-indent`** (only the first line; lines 2 and 3 start flush at the 64px rail). This is a deliberate detail, not an accident.
- paragraph → CTA row: **32px**
- CTA pill → arrow button: **10px** gap

**§3 Media card** — `right: 64px; top: 89px`; 370 × 116px
- card padding: **4px** all round (the thumbnail is inset by a hairline, so the card reads as a 4px frame)
- thumbnail → caption text: **20px**
- caption right padding: **20px**
- play badge inset inside the thumbnail: **8px** from its top-left corner

**§4 Tag cluster** — right edge flush at 64px; last row's bottom sits **372px above the viewport bottom** (≈62% down the viewport)
- pill → pill horizontally: **6px**
- row → row: **8px**
- pill padding: **0 18px**, height 35px

**§5 Bottom band**
- trademark caption baseline at **74% of viewport height** (≈730px from the top)
- caption → wordmark cap-line: **16px**
- wordmark baseline: **58px above the viewport bottom**
- wordmark side margins: **24px** each side (it is width-fitted, not centred at a fixed size)

**Rhythm:** there is no vertical section rhythm — the composition is corner-anchored. The only repeated interval is **32px** inside the copy block, and **6–10px** for all chrome gaps. Chrome is packed tight; copy is loose.

---

## 4. Type

One family throughout. **Class: neo-grotesk with slightly geometric bowls** — tall x-height, double-storey `a` and `g`, near-circular `C` and `o`, minimal stroke contrast. Free stand-ins, in order of preference: **Inter Tight**, **General Sans**, **Archivo**. Do not mix a second family.

| Role | Size | Line-height | Tracking | Weight | Max line length |
|---|---|---|---|---|---|
| §2 Headline | **132px** | **0.95** (125px) | **-0.03em** | 500 | ~11 chars/line, hard break after word 2 → 2 lines, max-width 720px |
| §2 Paragraph | **18px** | **1.45** (26px) | 0 | 400 | **560px ≈ 64 chars**, 3 lines |
| §2 CTA label | **17px** | 1.0 | **-0.01em** | 500 | 1 line |
| §3 Card caption | **16px** | **1.30** | 0 | 400 | **175px ≈ 22 chars**, 3 lines |
| §4 Tag label | **16px** | 1.0 | 0 | 450–500 | 1 line, 1–2 words |
| §5 Trademark caption | **16px** | 1.0 | 0 | 450 | 1 line, ~22 chars |
| §5 Wordmark | **247px** (width-fitted) | 1.0 | **-0.01em** | 500 | 1 word, 8 glyphs, spans 1392px |

The headline's line-height is **below 1** — the descender of line 1 and the cap of line 2 nearly touch. That near-collision is the design.

**Placeholder copy by role:**
- headline: 3 words, 5–7 syllables, broken 2 + 1 across two lines (line 1 shorter than line 2)
- paragraph: 22–26 words, one sentence, three lines
- CTA label: 3–4 words, imperative
- card caption: 9–12 words across 3 lines, ending in a short em-dash clause
- tags: 5 labels of 1–2 words each; row 1 gets 2 pills, row 2 gets 3
- trademark caption: `® ` + 2 words

---

## 5. Colour

| Hex | Role |
|---|---|
| **#FEFEFE** | The only ink. All text, both solid buttons, every glass hairline. Never tinted, never at partial opacity except in §5's wordmark. |
| **#084658** | Deep teal-blue. The darkest field in the photograph (upper sky) and the page's fallback `background-color` behind the image. Base colour of the corner scrim: `rgba(8, 70, 88, 0.42)`. |
| **#688A94** | Mid blue-grey — the photograph's average haze. This is what the glass panels resolve to. Use it as the image placeholder / LQIP fill and as the tint under `backdrop-filter`. |
| **#151B18** | Near-black. **Only** two uses: label text on the white CTA pill, and the arrow glyph + play-badge fill. It never appears as a surface larger than 63px. |
| **#874A26** | Rust. The single accent — **and it exists only inside the photograph** (the jersey, the wildflowers). It is earned by the image, not applied. Never use it for a button, a border, a tag, a link, or a focus ring. |

**Surface coverage:** the photograph is ~100% of the surface; roughly 45% of it is sky in the #688A94–#084658 range, 55% meadow in greens and #874A26. White ink covers under 4% of the canvas.

**Scrim:** one gradient only, `linear-gradient(145deg, rgba(8,70,88,0.42) 0%, rgba(8,70,88,0.10) 38%, transparent 62%)` over the image, plus an optional `linear-gradient(to top, rgba(8,70,88,0.22), transparent 30%)` at the bottom so the wordmark holds. No full-frame darkening.

---

## 6. Surface

- **Borders:** 1px only, and only on glass. §3 card: `1px solid rgba(255,255,255,0.22)`. §4 pills: `1px solid rgba(255,255,255,0.28)`. The solid white CTA and arrow button have **no border**. The page has no border.
- **Glass fills:** §3 card `rgba(255,255,255,0.14)` + `backdrop-filter: blur(18px) saturate(1.1)`. §4 pills `rgba(255,255,255,0.16)` + `blur(12px)`.
- **Radii:** page 0 · CTA pill and arrow button and tag pills `999px` · media card `20px` · video thumbnail `16px` · play badge `6px`.
- **Shadows: none.** Not on the buttons, not on the card, not on the text. Separation comes entirely from the backdrop blur, the 1px hairlines and the corner scrim. Do not add a `text-shadow` to make the headline legible — deepen the scrim instead.

---

## 7. Imagery

**A. Hero photograph (§1)** — fills the viewport, `object-fit: cover`, focal point at 50% 55%. Source must be at least 3:2 and 2880px wide.
Two athletes in mid-stride, captured at the peak of a contested play, shot from a low angle so the horizon sits at ~55% of the frame and both figures break the skyline. They are in a wild meadow, not on a pitch — knee-high grass and orange-red wildflowers, with dirt and petals thrown up in a blurred spray around their feet. One wears a rust-orange top, the other an off-white one; both in mirrored, opposed postures so the composition reads as a diagonal V. Above them: a wide, bright, cloud-streaked blue sky deepening toward the upper-left corner. A small ball is airborne near the top of the frame. Treatment: naturalistic daylight, slightly cool in the sky and warm in the grass, ~1/250s motion blur on the debris and stick-tips while the faces stay sharp, mild lens vignette, no colour grade toward teal-and-orange presets, no HDR flattening. The upper-left quadrant is deliberately empty sky — that is where the headline lands.

**B. Video still (§3)** — 160 × 111px, **3:2**, inset in the glass card at top-right. A second, tighter frame of the same scene and the same two figures, cropped so both fit; it should read as "a still from the film of this photo," not as an unrelated stock image. Same grade as A. Carries a play badge at its top-left: a 20 × 20px `#151B18` at 70% rounded square with a centred 8px white triangle.

No other imagery. No logos, icons, illustrations, patterns or decorative shapes.

---

## 8. Motion

**No motion capture exists for this reference. Every block below is (inferred) from stills. Durations, easings and stagger values were not measured — ranges are given; do not invent exact numbers, and do not reach for spring/lerp parameters that were never observed.** Because the page is 1.00 viewport tall, **nothing in this design is scroll-linked.** Every block is either static or a load entrance that plays once.

### §1 Photographic stage
- **kind:** static bed with a one-time entrance settle (inferred)
- **what moves:** the background image; the corner scrim
- **from → to:** image `scale 1.06 → 1.00`, `opacity 0 → 1`; scrim `opacity 0 → 1`
- **range:** entrance — trigger is page load, not a scroll position (this layer is already in view at 0 scroll). Duration not measured; use **900–1400ms** for the scale, **400–600ms** for the opacity, strong ease-out (inferred). No stagger.
- *Conditional:* if you mount this section at the top of a longer page, the only defensible scroll-linked addition is a parallax on the image — `translateY 0 → -80px` as a function of scroll, from page top until the section's bottom edge reaches the viewport top, reversing on the way back up. It is **not** present in the reference. Do not add parallax to any overlay layer.
- **reduced motion:** image renders at `scale: 1` with no fade; scrim static.

### §2 Copy block
- **kind:** entrance, plays once (inferred)
- **what moves:** headline line 1, headline line 2, paragraph, CTA pill, arrow button — five targets
- **from → to:** headline lines `clip-path: inset(100% 0 0 0) → inset(0 0 0 0)` with `translateY 24px → 0`; paragraph and CTA `opacity 0 → 1`, `translateY 16px → 0`
- **range:** entrance on load (the block is above the fold at 0 scroll). Duration not measured; **600–900ms** per element, strong ease-out (inferred). Stagger not measured; **70–110ms** between the five targets in reading order. The two headline lines reveal separately — that is the point of clipping them per line.
- **reduced motion:** all five appear at final position; `opacity 0 → 1` over ≤150ms, no clip, no translate.

### §3 Media card
- **kind:** entrance, plays once (inferred)
- **what moves:** the whole glass card as one unit
- **from → to:** `opacity 0 → 1`, `translateX 32px → 0` (enters from the right edge); backdrop blur resolves with it
- **range:** entrance on load, beginning after §2's headline. Duration not measured, **500–800ms**, ease-out (inferred). No internal stagger — thumbnail and caption do not move independently.
- **reduced motion:** card is present at final position, no fade, no translate.

### §4 Tag cluster
- **kind:** entrance, plays once (inferred)
- **what moves:** the five pills individually
- **from → to:** each pill `opacity 0 → 1`, `translateY 12px → 0`, `scale 0.96 → 1`
- **range:** entrance on load, last of the overlay layers to start. Duration not measured, **350–550ms** per pill, ease-out (inferred). Stagger not measured, **50–80ms**, ordered top row left→right then bottom row left→right.
- **reduced motion:** all pills present, no fade, no translate, no scale.

### §5 Bottom band
- **kind:** entrance, plays once (inferred)
- **what moves:** the trademark caption and the giant wordmark
- **from → to:** caption `opacity 0 → 1`; wordmark `opacity 0 → 0.28` with `translateY 20px → 0`. The wordmark never reaches full opacity — 0.28 is its resting state.
- **range:** entrance on load, last thing to resolve. Duration not measured, **800–1200ms**, ease-out (inferred). Caption leads the wordmark by roughly one beat; exact offset not measured.
- **reduced motion:** both at final state and final opacity immediately.

### Interaction transitions (not part of the load choreography)

- **CTA pill — hover:** background #FEFEFE → `rgba(255,255,255,0.88)`, label stays #151B18; 150–200ms ease-out. No lift, no shadow, no scale.
- **CTA pill — press:** `scale 0.98`, 80–120ms.
- **Arrow button — hover:** the ↗ glyph translates `2px, -2px` and the circle stays put; 150–200ms. Pill and arrow highlight **together** when either is hovered — they are one control split into two shapes.
- **Tag pill — hover:** fill `rgba(255,255,255,0.16) → 0.26`, border `0.28 → 0.45`; 150ms. No movement.
- **Media card — hover:** play badge fill `70% → 100%` opacity, card fill `0.14 → 0.20`; 180ms. The thumbnail may scale `1 → 1.03` inside its 16px clip.
- **Focus-visible (all controls):** 2px `#FEFEFE` outline at 2px offset. Never rust, never teal.
- **Open/close:** none. There is no menu, modal, accordion or lightbox in this design.

---

## 9. Responsive (below 640px)

- Rails drop **64px → 24px**. The bottom band still ignores them.
- Section becomes `min-height: 100svh` (not `vh`) so mobile browser chrome doesn't crop the wordmark.
- **§2** Headline **52px / 1.0 / -0.02em**, still two lines, still left-aligned, still top-anchored at 32px. Paragraph 16px / 1.5, full width, **first-line indent removed**. CTA pill grows to `flex: 1` (max 240px) with the arrow button beside it at 56 × 56px; they stay on one row — never stack them.
- **§3** Media card leaves the top-right corner and moves **below the CTA**, left-aligned, width `calc(100% - 48px)`, thumbnail 128 × 88px, caption 15px. If vertical space is short, drop the card entirely rather than shrinking it below 280px wide.
- **§4** Tag cluster stays right-aligned but drops to **three pills** (keep the two shortest labels from row 1 and one from row 2) on two ragged rows, 14px labels, 30px tall. Do not turn it into a horizontal scroller.
- **§5** Trademark caption becomes truly centred (the 61% offset is a desktop-only composition beat), 13px. Wordmark stays full-bleed and width-fitted — at 390px wide that is ~67px font-size, baseline 20px above the bottom, still at 0.28 opacity.
- The photograph's focal point shifts to `62% 55%` so at least one figure stays whole in the narrow crop.

---

## 10. Don'ts

- **Don't add a navigation bar, logo row, or skip-link strip.** The top 72px of the viewport is sky. Every model reaches for a nav here; there isn't one.
- **Don't add a scroll indicator** — no bouncing chevron, no mouse-wheel glyph, no "scroll" label. The page is one viewport; there is nowhere to go.
- **Don't wrap the design in a max-width container, a mat, a margin, or rounded page corners.** The image bleeds to all four edges.
- **Don't flood the photo with a flat black or 50%-opacity overlay.** The scrim is a directional corner gradient that clears by 62%; the lower-right of the image must stay bright and warm.
- **Don't set the headline at a comfortable line-height.** 0.95 or the composition falls apart. Also don't centre it, don't uppercase it, don't use a condensed or serif display face, and don't push it past weight 500 — it is large and light, not heavy.
- **Don't delete the paragraph's 78px first-line indent.** It looks like a mistake; it is the reason the copy block reads as editorial rather than as a marketing stack.
- **Don't let the rust #874A26 escape the photograph.** No rust buttons, badges, underlines, focus rings or tag fills. The moment you paint UI with it, the image stops being the accent.
- **Don't make the glass pills or the media card solid white or solid dark.** They are 14–16% white with a 1px hairline and a real backdrop-blur. If backdrop-filter is unsupported, fall back to `rgba(104,138,148,0.55)` — never to opaque white.
- **Don't add drop shadows or text-shadows anywhere.** Zero. Legibility comes from the scrim.
- **Don't tidy up the tag cluster.** Two rows, uneven counts (2 then 3), right-aligned with a ragged left edge, 6px gaps. Do not justify it, do not make it a single row, do not equalise pill widths.
- **Don't build the wordmark as a solid white footer band, a `background-clip: text` photo fill, or a marquee.** It is one word in white at 0.28 opacity, width-fitted across the viewport, sitting on top of the image and slightly hazing what's behind it.
- **Don't centre the trademark caption on desktop.** It sits at 61% of the width, offset right of centre, 16px above the wordmark's cap-line.
- **Don't stretch or letterbox the photograph**, and don't swap in a posed studio shot on a seamless background — the subject must be mid-action, outdoors, with visible debris in the air.
- **Don't introduce a second typeface, and don't use 16px for the paragraph** — it is 18px, which is what keeps it from reading as a caption next to a 132px headline.
- **Don't add scroll-linked motion.** Nothing in this design is a function of scroll position; if you write a `scrollYProgress` binding here you have invented behaviour that isn't in the reference.