fix(a11y): contrast, touch targets and terminal motion from design audit

[yigitdot]

Fixes from an /impeccable audit pass over the homepage, blog and legal pages. The audit scored the site 14/20; the weakest area was accessibility (2/4), mostly text contrast on the white sections and small mobile touch targets.

What changed

Contrast (WCAG 1.4.3)

• New --whisper-deep token (green mixed 68% with black, ~6.5:1 on white) and a per-tone --whisper-text. Frame tone="paper" swaps it in, and highlightBrand now uses text-whisper-text, so the "deCDN" highlight stays AA on white. Today the brand name only appears on the black sections, so this guards future uses. a.hero-status and the drawer's "home" hover now use the token instead of a literal color-mix.
• Dimmed small text on white was 2.4–4.0:1 at 35–50% opacity. It now sits at 60% or higher: blog list meta and column headers, post back link / meta line / earlier–later labels, the legal "effective" line, and .terminal .dim (which also shows the "stats unavailable" error). The post-list date goes from 55% to 75% to keep a step above the series number.
• In the comparison table, the struck price's unit is no longer dimmed a second time inside the <s> (it was ~3.4:1 at 11px).

Touch targets (WCAG 2.5.8)

• .mm-toggle is now a 44×44 hit area (was 22×22). The 18px glyph stays in the same spot, centred on the nav bar, and the focus ring is inset so it doesn't balloon.
• Footer legal links get py-1 (~25px tall) with the same visual rhythm as before.

Footer affordance

• hover:opacity-100 did nothing because the parent carried opacity-80. Opacity now sits on each item, and links underline on hover.

Hero terminal motion

• The next settlement is now triggered by the first line's animationiteration instead of a 4.5s setInterval. Anything that stops the CSS cascade stops the cycle with it: reduced motion (the panel shows one static settlement), background tabs and scrolling out of view (an IntersectionObserver sets data-offscreen, which pauses the animations). PanelFigure accepts a ref for that observer.

Performance

• Removed the will-change that stayed on every [data-reveal] element at rest.
• The terminal progress bar (width) and the fleet spark cells (height) now animate with transform: scaleX/scaleY. This clears the design detector's only finding.

Cleanup

• Two literal cubic-beziers now use --ease-soft / --ease-expo. transition-all on the blog arrows is narrowed to translate, color and opacity.

Verification

• pnpm typecheck, pnpm lint, pnpm test (516/516) and pnpm build (including check:out and check:og-image) all pass. The design detector reports 0 findings.
• Checked the static export in a browser at 360px and at desktop width:
  • no horizontal overflow;
  • the toggle measures 44×44 at the same position;
  • footer links are ~25px tall;
  • will-change computes to auto;
  • paper sections resolve --whisper-text to the deep green and ink sections to the raw accent (6.05:1).
• Terminal advance was confirmed by dispatching animationiteration on the first line; child-bubbled events are ignored. The offscreen pause could not be watched live because the preview pane was backgrounded. Worth a quick look on the preview deploy.

Reviewer notes

• A hover hold on the terminal was tried and then removed (cd0c318): the terminal keeps cycling while hovered. That means there is no user-triggered pause for WCAG 2.2.2. The panel is aria-hidden and decorative, and users who set reduced motion get a static panel.
• A follow-up commit (aa2cdf0) came out of a multi-agent review. It tightens comment accuracy and adds two guard tests: components/ui/Frame.test.ts pins the --whisper-text class/token contract across Frame, highlightBrand and globals.css, and PanelFigure.test.ts checks that ref reaches the <figure>.
• The audit also flagged a missing <main> on legal pages. That was a false positive (LegalDoc already renders one), so there is no change there.

🤖 Generated with Claude Code

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[cloudflare-workers-and-pages]

Deploying website with    Cloudflare Pages

Latest commit:	cd0c318
Status:	✅  Deploy successful!
Preview URL:	https://4d5596be.website-70y.pages.dev
Branch Preview URL:	https://claude-impeccable-audit-1c0a.website-70y.pages.dev

View logs