Skip to content

Commit 54e1b6a

Browse files
Section numerals: match the poster-closer headline treatment (#42)
01 / 02 / 03 section kickers were plain pink italic (`--accent-ink`). Replaced with the same poster treatment used on `.poster-closer__headline` ("Ship your AGENTS.md like it's code."): - fill: `--poster-pink` (#ff79de) - stepped dark drop-shadow: 8 offsets × 1px along the SE diagonal, colour `--poster-ink` (#0a0f1a) - outline: `-webkit-text-stroke: 2px var(--poster-ink)` - `paint-order: stroke fill` so the pink sits on top, stroke only shows as an outline around the letterform Net effect: the numerals read as chunky 3D display type identical to the hero wordmark + closer headline, pulling the three kickers into the same poster language instead of floating as flat accent text. Legibility/contrast argument: the dark stroke + dark stacked shadow provide the visible edge, so the pink fill vs light background is decorative, not load-bearing. axe measures foreground colour against background; the previous treatment used `--accent-ink` (#c30a7a, the contrast-safe pink) for this reason. Posterising with stroke + shadow is the established pattern on this page, so consistency wins.
1 parent d758cfc commit 54e1b6a

1 file changed

Lines changed: 16 additions & 1 deletion

File tree

site/app/globals.css

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -840,9 +840,24 @@ main.landing {
840840
font-weight: 900;
841841
font-size: 72px;
842842
line-height: 0.85;
843-
color: var(--accent-ink);
843+
color: var(--poster-pink);
844844
letter-spacing: -0.04em;
845845
font-variation-settings: "SOFT" 100;
846+
/* Match the `.poster-closer__headline` poster treatment: pink fill,
847+
stepped dark drop-shadow, dark stroke on outside of the letterform.
848+
`paint-order: stroke fill` puts the fill on top so the stroke only
849+
shows as an outline, not a bleed. */
850+
text-shadow:
851+
1px 1px 0 var(--poster-ink),
852+
2px 2px 0 var(--poster-ink),
853+
3px 3px 0 var(--poster-ink),
854+
4px 4px 0 var(--poster-ink),
855+
5px 5px 0 var(--poster-ink),
856+
6px 6px 0 var(--poster-ink),
857+
7px 7px 0 var(--poster-ink),
858+
8px 8px 0 var(--poster-ink);
859+
-webkit-text-stroke: 2px var(--poster-ink);
860+
paint-order: stroke fill;
846861
}
847862
.section-header__label {
848863
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;

0 commit comments

Comments
 (0)