Style content links: muted underline by default, brand red on hover#17
Merged
Conversation
Adds a single .content-link class with a senior-designer-grade treatment for every inline anchor in body copy. Default state shows a muted underline (decoration-color = ~35% of current text via color-mix) so links are discoverable without shouting. Hover/focus lifts the text + underline to the brand red, bumps the underline thickness 1px -> 2px, and increases the offset 3px -> 4px for a subtle "rise" that reads as intentional rather than CSS default. - Single rule, opt-in via class — no global `p a` selector that could accidentally restyle nav, CTAs, or the "Built with Tina" mark - Underline-offset matches the type scale (3px default, 4px hover) for clean separation from descenders - text-decoration-skip-ink: auto keeps the underline tidy under "j", "p" - Active state darkens to red-700 to confirm the press - prefers-reduced-motion: reduce disables transitions entirely Applied to: the 5 parseInlineLinks anchors (benefits/services/how/why descriptions linking out to ssw.com.au rules), the contact form's privacy policy link, and the footer's Terms & conditions link. The per-location underline rules they used to share (.form-actions .privacy a, .footer-bottom .legal a:hover) are removed so styling lives in one place; a short pointer comment is left where each rule used to sit. Decorative links (logo, "Built with TinaCMS") and chrome links (nav, CTAs styled as .btn) are deliberately untouched — those carry their own visual treatment.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
ssw-website-global | 7fcce6a | Commit Preview URL Branch Preview URL |
May 22 2026, 10:10 PM |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a senior-designer-grade hover treatment to inline content links: every
<a>rendered inside body copy now ships with a subtle muted underline by default and lifts to brand red on hover/focus with a small thickness + offset bump.What the treatment does
--text-neutralcolor-mix)--red-600--red-500--red-700--red-700The 3px → 4px offset shift gives a small "lift" effect that reads as intentional rather than browser-default.
text-decoration-skip-ink: autokeeps the underline tidy underjandpdescenders.prefers-reduced-motion: reducedisables transitions entirely so motion-sensitive users aren't surprised.Where it's applied
A single
.content-linkclass — opt-in, not a globalp aselector that could accidentally restyle nav, CTAs, or the "Built with TinaCMS" lockup. Used on:parseInlineLinksanchors inside descriptions/lead text (benefits lead, services AI-assisted, how-it-works Step 03, why-SSW Practical AI adoption, why-SSW Strong engineering standards) — these link out to ssw.com.au rule pagesDeliberately excluded
.btnfamily — solid backgrounds)Cleanup
Removes the two per-location underline rules that previously lived in
landing.css(.form-actions .privacy aand.footer-bottom .legal a/:hover) — styling now lives in one place at the top of the file with a short pointer comment where each used to sit.Test plan
pnpm run dev, scroll to Benefits → hover the "AI-assisted development practices" link → underline thickens, text + underline shift to brand red, smooth transition:focus-visibleprefers-reduced-motion: reduce— link state changes are instant (no transition)🤖 Generated with Claude Code