Email: callout card accent background makes links invisible (accent color overrides white)

[andrewklingelhofer]

Bug

When using a callout card with the accent background option containing a link, the link text becomes invisible in newsletter emails. The editor and web preview render correctly (white link text on accent background), but in email the link text color matches the accent background color, creating zero contrast.

Steps to reproduce

1. Set site accent color to a saturated color (e.g. #E87722)
2. Create a post with a callout card using the accent background option
3. Add a link inside the callout card text
4. Send as newsletter email (or preview email)

Expected behavior

Link text should be white on the accent background in emails, matching the editor and web preview.

Actual behavior

Link text is the same color as the accent background, making it invisible/unreadable in email clients.

Root cause

In ghost/core/core/server/services/email-rendering/partials/card-styles.hbs, the callout card accent link rule (line ~317) does not use !important:

.kg-callout-card-accent a {
    color: #fff;
}

The global link rule in content-styles.hbs (line ~200) sets all links to the accent color:

a {
    color: {{accentColor}};
    text-decoration: none;
}

After CSS inlining for email, the accent color appears to override the white color despite lower specificity, likely due to inlining order or the inliner flattening specificity.

Suggested fix

Add !important to the callout card accent link rule in card-styles.hbs:

.kg-callout-card-accent a {
    color: #fff !important;
}

This is consistent with how CTA card link colors already use !important in the same file (e.g. .kg-cta-link-accent .kg-cta-text a { color: {{accentColor}} !important; }).

Environment

• Ghost(Pro), v6.24+
• Issue appeared recently (late March / early April 2026)
• Observed in Gmail; likely affects all email clients

[andrewklingelhofer]

Root cause identified

The CSS refactor in e1fffbb ("Moved shared email CSS into a unified email-rendering service", merged March 18) changed the source order of CSS rules in newsletter emails, introducing this regression.

Before the refactor (single styles.hbs):

• Line 940: .post-content a { color: {{linkColor}} } — specificity (0,1,0,1)
• Line 1229: .kg-callout-card-accent a { color: #fff } — specificity (0,1,0,1)

The callout rule came after the post-content rule. Same specificity, later position wins → white link text ✅

After the refactor (split into shared partials):

In styles.hbs, the include order is:

1. {{>contentStyles}} (line 21)
2. {{>cardStyles}} (line 26) — contains .kg-callout-card-accent a { color: #fff }
3. Newsletter-specific styles (line 28+) — contains .post-content a { color: {{linkColor}} } at line ~555

Now .post-content a comes after .kg-callout-card-accent a. Same specificity, later position wins → accent-colored link text on accent background ❌

Fix

Add !important to .kg-callout-card-accent a { color: #fff; } in card-styles.hbs, consistent with how CTA card link colors already use !important in the same file.

PR incoming.