diff --git a/src/components/blog/BlogCta.astro b/src/components/blog/BlogCta.astro index 3f4631387..64295c7e8 100644 --- a/src/components/blog/BlogCta.astro +++ b/src/components/blog/BlogCta.astro @@ -71,6 +71,7 @@ const repoUrl = > {t('blog.cta.button', locale)} + @@ -94,6 +95,7 @@ const repoUrl = > {t('blog.cta.button', locale)} + diff --git a/src/styles/global.css b/src/styles/global.css index 71dee0e7a..bec077b48 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1309,18 +1309,21 @@ } /* CTA primary button on mobile / coarse-pointer CTA sections. - brand-700 fill / brand-800 hover in both modes: the lightest brand step - that holds white label text at WCAG AA (>=4.5:1) across every theme. */ + brand-700 fill in both modes: the lightest brand step that holds white + label text at WCAG AA (>=4.5:1) across every theme. + + No hover colour. On the CTA band this button sits on a gradient running + brand-500 down to brand-900, and the buttons land low in that travel where + the ground is already near brand-700. A darker hover put the fill within + 1.1:1 of the ground behind it, so the button dissolved rather than + responded. Hover is carried by the arrow instead — it shifts 4px — and a + press by `active:scale-[0.98]` on Button itself. */ .cta-btn-brand { background-color: var(--color-brand-700) !important; background-image: none !important; color: white !important; border-color: transparent !important; } -.cta-btn-brand:hover { - background-color: var(--color-brand-800) !important; - background-image: none !important; -} /* Primary button inside an inverted section. The primary variant is `bg-foreground text-background`, but the Button's own @@ -1379,10 +1382,18 @@ fails on emerald, teal, cyan and sky — the same four the tag pill had to move past. - Secondary: `.cta-btn-brand`, unchanged — an opaque brand fill with an - opaque brand hover and no border. `.hero-btn-brand` would look the same at - rest but fades to `opacity: 0.85` on hover, which makes the whole button - translucent and shows the grid through it. */ + Neither button takes a hover colour. This one is already near-white on a + dark field, so it has nowhere brighter to go: its hover mixed the + foreground with white and moved the fill by under 2%, which read as no + response at all. The pair also needed opposite directions to be legible + here — lighter for the dark secondary, darker for this one — which one + hover convention cannot give. Hover is carried by the arrow instead, 4px on + both buttons, and a press by `active:scale-[0.98]` on Button itself. + + Secondary: `.cta-btn-brand`, an opaque brand fill with no border. + `.hero-btn-brand` would look the same at rest but fades to `opacity: 0.85` + on hover, which makes the whole button translucent and shows the grid + through it. */ .cta-band.invert-section .btn-primary { background-color: var(--color-foreground) !important; background-image: linear-gradient( @@ -1393,9 +1404,26 @@ border: 1px solid var(--color-foreground-secondary) !important; color: var(--color-brand-700) !important; } -.cta-band.invert-section .btn-primary:hover { - background-image: none !important; - background-color: color-mix(in oklch, var(--color-foreground) 90%, white) !important; + +/* The secondary's edge, on the band only. + + Its brand-700 fill sits on a field travelling brand-500 to brand-900, and + the buttons land where the ground is already near brand-700 — so the fill + is 1.5:1 against what is behind it and the button's shape barely reads. + WCAG 1.4.11 asks 3:1 to identify a control, which the fill cannot give + without breaking something else: brand-500 would clear the boundary in only + five of the eight palettes and would drop the white label to 2.8:1, and + brand-600 clears neither. + + A 1px white line at 35% composites over the fill, so no colour changes — + the button only gains an edge. Worst of the eight is 3.21:1 (teal), which + clears the bar with little to spare; 45% is the same line at 3.91 if a + future palette needs the room. + + Scoped to the band because `.cta-btn-brand` is used on light sections too, + including the contact form's submit, where a white edge would be wrong. */ +.cta-band.invert-section .cta-btn-brand { + border-color: rgb(255 255 255 / 0.35) !important; } .hero-btn-learn {