Inside pages · hero section only

Two ways to give the inside hero a visual

Content, typography, CTA structure, breadcrumb, eyebrow and the facts aside are identical in both, and identical to what ships today. Only the visual treatment differs. Neither is applied to any inside page yet.

The options

Option A — Abstract

A swept flow field on the hero ground itself, following the reference supplied on 29 September: a fan of 150 hairline strands converging into a bright caustic edge, one of them the brand accent carrying a node, dissolving toward the open end. There is no panel and no frame — the hero's own background is the visual.

Why it might win: nothing to licence, nothing to load and nothing to replace later. It is one inline SVG coloured entirely by CSS, so the same drawing serves a light hero and a dark one, and it scales to any width without a second asset. It cannot date the way a stock photograph does.

What it costs: it is abstract. Pages that want human warmth — Careers, About, Customer Stories — will not get it here. On the light ground it is necessarily quiet; if it needs more presence there, the dark ground is the stronger showing and eight inside heroes are dark already.

Shown twice: on a dark hero with no aside, and on a light hero that carries the facts aside.

Open option A

Option B — Photograph

An image slot, not an image: the frame owns the ratio, the crop and the edge treatment, and the <picture> inside is the only thing that changes when a licensed shot arrives. --pe-ihv-focus moves the subject inside the frame, so a portrait and a wide shot both sit correctly without touching the markup.

Why it might win: people on the page, and a different photograph per pillar gives the inside pages their own character.

What it costs: every page needs an approved, licensed image, and the placeholder shown is the homepage photograph standing in — it is marked data-pe-status="required" and must not ship.

Open option B

How it would be applied

Either direction is two lines per template, and nothing else moves — the copy, the grid, the aside, the breadcrumb and the CTAs are untouched.

Option A: add pe-hero--field to the hero section and one .pe-field element inside it. The field is masked so it is invisible across the left third and fades in over the next quarter, so it can never reach the copy at any width; below 1024 it pulls further right and lightens. Tune it with --pe-field-clear, --pe-field-ink and --pe-field-glow.

Option B: add pe-hero--visual to the hero section and one .pe-ihv element at the end of .pe-hero__content. The hero reserves the right-hand zone and caps the copy column against it, so the two can never overlap; below 1024 the slot becomes a block under the copy rather than sitting behind it. Tune it with --pe-ihv-w, --pe-ihv-ratio, --pe-ihv-gap and --pe-ihv-focus.

Both options are shown twice on their page: once on a hero with no facts aside (8 inside pages) and once on a hero that has one (9 inside pages), because that is the case most likely to go wrong.

Add ?motion=reduced or ?motion=off to either page to check the reduced-motion state.