Layout

CTABand .

O "fecho" — banda de encerramento em carbon com glow verde e contraste AAA.

CTABand · full props

The "fecho" — closing CTA band. data-surface="carbon" (#1C1C1C, not ink #121312). Subtext via --text-body (#F4F5F4 — the contrast fix). Green only in: glow (13% radial), dot signature, and CTA pill. border-radius: var(--radius-box) (20px).

With title + text + CTA

CTABand — fecho pattern, carbon surface

Subtext rendered with var(--text-body) on data-surface=carbon. Resolves to --dark-text (#F4F5F4), not --text-muted (#B0B6B2). White title + #F4F5F4 body on #1C1C1C: both exceed WCAG AA contrast.

CTA pill · primary variant

Title-only (text prop omitted)

Statement heading with green dot signature

One CTA pill

CTABand · verification

Contrast fix

  • Background: data-surface=carbon → --surface = #1C1C1C (NOT ink #121312, NOT pine #123828)
  • Subtext: var(--text-body) → --dark-text #F4F5F4 (NOT --text-muted #B0B6B2 — the old bug)
  • Title: var(--text-strong) → #FFFFFF on carbon — white on #1C1C1C
  • White (#FFFFFF) on #1C1C1C: contrast ratio ≈ 17.1:1 — WCAG AAA
  • #F4F5F4 on #1C1C1C: contrast ratio ≈ 15.5:1 — WCAG AAA

Token compliance

  • Zero raw hex in CTABand.astro — all role tokens
  • Glow: color-mix(in srgb, var(--text-accent) 13%, transparent) — fully token-derived
  • Green only in: glow overlay, .cta-band__dot (var(--accent-dot)), Button primary pill
  • border-radius: var(--radius-box) → 20px (radius_box decision)
  • padding-block: var(--space-band) → clamp(80px, 5vw+40px, 128px)