[lumpster-csa]

Summary

.csa-go links now draw their own arrow as an SVG instead of relying on a typed →.

Why: azo-sans has no arrow glyph, so every typed → came from a fallback font. On cloudsecurityalliance.org that's the generic sans-serif, which looks rough and differs by OS. On the showcase it happened to be Apple's system font, which is why it looked fine there.

How:

• The arrow is an SVG mask filled with currentColor, so it follows every link color, surface and hover state with no extra rules.
• It's drawn on ::before, moved after the text with order: 1 inside the inline-flex link, so ::after stays free for the stretched click areas on .csa-card-hover and .csa-card-reveal.
• It's sized to match the text arrow it replaces. That arrow measured about 10.5 × 8.7px of ink at 14.5px, so the new one is 0.76em × 0.66em and scales with the font size.
• It's decorative, so screen readers skip it. They used to read the typed arrow aloud.
• It's hidden automatically when a link already has an <svg>, <img> or <i> icon (for example the Font Awesome arrow on the STAR registry's "View listing" links). .csa-go-no-arrow opts out.
• It's drawn in LinkText in forced-colors (high contrast) mode.
• It's safe from the site's asset pipeline: there's no inner url( in the SVG for it to rewrite (unlike the grain issue).

Showcase:

• Typed arrows are removed from all 31 .csa-go links (16 <a>, 15 carousel-card <span>).
• The Typography .csa-go row has a temporary side-by-side: the new SVG arrow vs. the old typed arrow, on light, on dark, and at 20px. Remove it once the arrow is signed off.

Heads-up for the website

Once the site picks up this version:

• Typed → in .csa-go links will show two arrows. Delete the typed arrow from that markup. CSS can't detect a typed character.
• Links with an icon element (like the registry's Font Awesome <i class="fas fa-arrow-right-long">) won't double up, since the CSS arrow hides itself. The icon can be removed whenever convenient so those links match the library arrow.
• Other places still use typed arrows that aren't .csa-go links, such as the pagination "Next →" button. They're unchanged here.

Test plan

Checked in the browser on the showcase:

• Size and position match the old text arrow: width, height and vertical center within 0.1–0.2px at 14.5px and at 20px.
• Color matches the link on light and dark, including the dark-surface --b300.
• 37 .csa-go links: 34 show the new arrow and 3 are the intentional "old" comparison opt-outs. No link shows two arrows.
• The arrow is hidden for <i> and <svg> icons and for .csa-go-no-arrow. The hover-card and reveal-card stretched click areas still work. The flip card's back link shows the arrow.
• Reviewer: sign off on the arrow's size and weight in the side-by-side, then remove that demo.

🤖 Generated with Claude Code