Section numerals: match the poster-closer headline treatment - #42
Conversation
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.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 9 minutes and 6 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Updates the landing page section numeral styling (01 / 02 / 03) to use the same “poster” typographic treatment as the existing closing headline, aligning these elements with the page’s established visual language.
Changes:
- Switch section numerals from
--accent-inkto--poster-pink. - Add the stepped 8-layer SE drop-shadow, 2px dark stroke, and
paint-orderto numerals to match.poster-closer__headline.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 6px 6px 0 var(--poster-ink), | ||
| 7px 7px 0 var(--poster-ink), | ||
| 8px 8px 0 var(--poster-ink); | ||
| -webkit-text-stroke: 2px var(--poster-ink); | ||
| paint-order: stroke fill; |
There was a problem hiding this comment.
The 8-layer text-shadow + -webkit-text-stroke poster styling is now duplicated between .section-header__num and .poster-closer__headline. To prevent the two treatments drifting over time, consider extracting this into a shared utility class or a :root custom property that both rules reference.
Summary
01 / 02 / 03 section kickers now use the same poster treatment as the
"Ship your AGENTS.md like it's code."closer headline: pink fill, stepped 8-layer dark drop-shadow along the SE diagonal, 2px dark outline,paint-order: stroke fillso the pink sits on top of the outline.Pulls the three numerals into the same poster language as the hero wordmark and the closing headline instead of floating as flat accent text.
Visual diff
Before: plain
--accent-inkpink italic numeral.After: chunky 3D display type matching the closer headline.
Contrast
The dark stroke + stacked shadow provide the visible edge, so the pink fill vs light background is decorative rather than load-bearing. Previous treatment used
--accent-ink(contrast-safe) as a flat fill; posterising with stroke + shadow is the established pattern on this page, so consistency wins over the flat pink.Test plan
poster-closer__headlineon the same page visibly matches.npx tsc --noEmitclean in site/.