# Hero composition — Allowed

Supplemental module for stylistic landing-top / hero techniques. The live lab is
the UI catalog at [`../../ui/heroes/`](../../ui/heroes/), not a separate lesson
gallery under this folder.

## Learning goal

Compose heroes that go beyond layout skeletons: motif kits, photo masks with
controlled breakout, multi-layer z-index stacks, dual-tone type, and compound
widgets (contact pills, search hubs, overlapping feature pills)—while keeping
contrast, responsive stacking, and a shared navbar.

## Technique vocabulary

| Term | Meaning |
| --- | --- |
| SVG wave / blob | Smooth irregular fill or stroke made with SVG `<path>` Bézier commands (`C`, `Q`, `S`) |
| CSS approximation | Softer stand-in using `border-radius`, `clip-path` polygons, or ellipses when a full SVG path is unnecessary |
| Cutout photography | Background-removed PNG/WebP (or transparent SVG) layered over a field or shape instead of a rectangular photo frame |
| SVG doodles | Decorative dashed or solid paths, rings, and line art sitting absolutely in the hero |
| Geometric CSS accents | Circles, squares, short bars, and rotated lines built with ordinary CSS boxes |
| Mixed-media / editorial collage | Real photography (often cutouts) combined with vector accents and absolute layers |
| Layered absolute composition | `position: relative` hero with absolute decorations behind copy; media may straddle field/shape seams |

**Hero-field SVG waves** (agency background shapes behind the first viewport) are not the same as a **wave section exit** under the hero (rule 225)—the exit only transitions into the next band.

### Difficulty ladder

1. Geometric CSS accents on a rigid grid
2. SVG doodles / dashed Bézier trails
3. SVG wave or blob as the dominant field shape
4. Cutout subject layered on an SVG blob (collage)

### Composition recipe

Prefer a two-column hero: copy column in normal flow at a high z-index; decorations
`position: absolute` behind that copy; media may overlap the boundary between a
white/light field and a coloured SVG shape.

## Inherited tools

Everything used in Flexbox, Grid, Positioning, Clip-path, Variables,
Pseudo-classes, and Responsive chapters remains available. Prefer tokens and
patterns from [`../../ui/heroes/styles.css`](../../ui/heroes/styles.css) and
[`../../ui/heroes/heroes.css`](../../ui/heroes/heroes.css).

## New presentation patterns

- Motif kits: teardrop / circle / soft-square shapes plus optional dot-grid patches
- Circular and organic photo masks (`border-radius`, `clip-path`, SVG blobs)
- Controlled breakout of media past the mask edge
- Explicit z-index stacks: field → geometry → media → floating UI → seam overlap
- Dual-tone headlines and short accent rules / banners under the H1
- Compound widgets: contact pill, vertical social rail, search hub, feature pills
- Soft wide shadows and light bokeh spheres (not harsh multi-layer glow)
- Wave / soft shape as a section exit under the hero
- SVG Bézier waves behind agency mockups; cutout photography on SVG blobs
- undraw-style flat illustrations as the dominant visual
- Phase-2 catalog roots in `heroes-extended.css` (Geometric Motif through Cutout Blob Collage)

## Learning rules

1. Prefer a translucent scrim or overlay for text on photos; do not rely on
   `text-shadow` alone for contrast (see `../rules.md` overlay rules).
2. Keep primary copy in the unclipped / unmasked safe region.
3. Limit a motif kit to two or three signature shapes reused as badge, cluster,
   and frame—do not invent a new shape for every accent.
4. Plan z-index layers before adding floating cards or overlapping pills.
5. Named catalog patterns may include floating badges and search hubs for
   teaching. Ordinary landing pages that are not using those named patterns
   should keep a tight first-viewport budget (brand, one headline, one lede,
   one CTA group, one dominant visual).
6. Use teal/slate studio tokens for this workbook, with optional opaque warm
   secondary accents (`--accent-hot` coral, `--accent-warm` amber) on motifs and
   CTAs. Prefer solid or high-opacity motif fills over faint washes. Avoid
   purple-on-white default themes, cream/terracotta “editorial” defaults, and
   dark-mode-first heroes. Lifestyle photos may use curated Unsplash or Pexels
   URLs. Flat illustration heroes may use [undraw.co](https://undraw.co/)-style
   art (local SVG under `ui/heroes/assets/`, with credit). Hand-drawn scenes,
   cutouts, and UI mocks may also live under `ui/heroes/assets/`.
7. Compound forms use real labels and native controls. Demo search hubs need not
   submit to a backend.
8. Honor `prefers-reduced-motion` for decorative motion and carousel autoplay.
9. Every catalog hero includes a responsive `.hero-nav` with a burger at or below
   `48rem`.
10. Soft elevation uses wide, low-opacity shadows. Prefer one elevation language
    per hero composition.
11. Prefer inline SVG `<path>` for smooth irregular waves and blobs when the curve
    is the design idea; use `border-radius` or polygon `clip-path` as simpler
    stand-ins while learning.

## Lab and recipes

- Gallery: [`../../ui/heroes/index.html`](../../ui/heroes/index.html)
- Prompt sheet: [`../../ui/heroes/CATALOG.md`](../../ui/heroes/CATALOG.md)
- Foundations: [`../../ui/heroes/heroes.css`](../../ui/heroes/heroes.css)
- Phase 2 styles: [`../../ui/heroes/heroes-extended.css`](../../ui/heroes/heroes-extended.css)
- Local assets: [`../../ui/heroes/assets/`](../../ui/heroes/assets/)
- Per-hero Coolors palettes: [`../../ui/heroes/palettes.css`](../../ui/heroes/palettes.css)
- Rules reference: [`../rules.md`](../rules.md) — Landing / hero composition