Inner service hero — round 2 (A1, revised)
A1 picked, with the four changes Adi asked for. Round 1’s six options are still on the
server at hero-inner-r1.html; open it beside this one to read the changes as changes
(both use the .a1 namespace, so they cannot share a page).
The four changes.
| # | asked | done |
|---|
| 1 | .tp — the slanted ::after is not needed, a straight line is enough |
The wedge is removed. The orange panel meets the photograph on a straight vertical edge.
It was a 38px clipped triangle that had to be given z-index to paint at all, and it
cut into the frame at head height. |
| 2 | .in — too full, no space above or below |
It was 12px over: the type measured 236px inside a 300px band that already spent 76px
on padding. Fixed at the cause — the band is now min-height, not a fixed
height, so type can never squeeze the padding out again — and the padding went
38→48px with the rules at 16px. |
| 3 | .ph — the photograph is too small; take the room from .cp |
330×300 → 400×380: +21% wide, +27% tall, +54% area. The width came
out of .cp, the height out of the band. The three panels now close on the container
exactly — 460 + 400 + 420 = 1280 — so none of them drifts as the screen widens. |
| 4 | .cp — carry the same content as .call in home_v1 |
Lifted part for part: lead line, phone at display size, availability, two fields, the swarm
button, the office note — centred, in that order. Two adaptations, both forced, both below. |
The two things that could not be copied straight across — and the one that could.
| part | home_v1 | here | why |
|---|
| the button | brown on orange — white label, 10.86:1 |
white, brown label — 10.86:1, orange swarm kept |
The panel is brown, so home_v1’s brown button is invisible on it. Filling it with brand
orange instead would put a white 13px bold label on 3.03:1 — under the 4.5:1 floor
for text that size. Inverting keeps the same ratio the button has on the homepage. |
| swarm particles | 9 × 10.5 — ratio 0.857 | 9 × 10.392 — ratio 0.8660 |
Same arithmetic as the big hexagon: 9 / 0.8660254 = 10.392. home_v1’s pair is 1.0% off,
which is small but it is the same mistake this sheet exists to stop making. |
| availability + office note | #FBE3D8 on orange — 2.47:1 |
#FBE3D8 on brown — 8.84:1 |
Nothing changed but the ground under it. The tint that is a real contrast defect on the
homepage band is comfortably legal here. The homepage still wants fixing — moving
the content here does not fix it there. |
What it costs on the first screen.
Measured below the 93px header; a 700px viewport has
607px to give away.
| breadcrumb strip | band | hero total | left for the page |
|---|
| round 1 | 41px | 300px | 341px | 266px |
| round 2 | 41px | 380px | 421px | 186px |
The bigger photograph and home_v1’s contact block are both paid for out of the same 80px. If that
is too much, the phone can come down from 48px and the band with it — say so and it is one number.
Still only Adi’s or the firm’s to settle (carried over from round 1):
- Does Darren’s ban on the intro image reach inner pages? Documented for the homepage
first screen only. A1 puts a photograph in the hero.
- The availability line. This is home_v1’s approved “Free consultations for
injury & estate litigation”. A car-accident page would rather say it about car accidents
— the firm’s sentence to write, not ours.
- The office note. It comes across with the rest of
.call, and it carries the
same open question it carries on the homepage: which number does a six-office firm show.
A1The reference, mapped — revisedBrand orange · photograph · brownStraight edge between panel and photograph; the type given room; the photograph 54% bigger; and the contact panel carrying home_v1’s contact block part for part instead of a bespoke one.
Car Accident Claims
Injuries
Placeholder · November shootTalk to a real person now
250-888-0002Free consultations for injury & estate litigation
The orange block still carries only large type — the title at 38px and the sub-line at 20px bold — because white on brand orange is 3.03:1: it clears the 3:1 floor for large text and fails the 4.5:1 floor for anything smaller. All the small contact copy sits on brown (10.86:1). That is the same reason the reference’s own arrangement works: bright block for the title, dark block for the details.
