Skip to content

feat(donate): balance PayPal and Ghost Keys CTAs - #116

Closed
sanity wants to merge 1 commit into
mainfrom
worktree-donate-cta-balance
Closed

feat(donate): balance PayPal and Ghost Keys CTAs#116
sanity wants to merge 1 commit into
mainfrom
worktree-donate-cta-balance

Conversation

@sanity

@sanity sanity commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

Problem

The donate page offered two ways to give, but they had wildly unequal visual weight:

  1. PayPal — a full-size ## Donate heading + a filled primary button (.funding-donate-button).
  2. Ghost Keys (card via Stripe) — no button at all, just a smaller greyed heading and a muted grey paragraph with an inline text link. .funding-ghost-keys deliberately shrank the heading (1.15rem, #64748b) and paragraph (0.95rem, #64748b).

This was intentional in a prior PR (understated Ghost Keys treatment), but the direction is being reversed: both are legitimate, genuinely different ways to donate, and should read as an equal choice, not a primary option and an afterthought.

Approach

Gave the card option the same visual treatment as PayPal, reusing existing patterns rather than inventing new ones:

  • Matching heading style for both (## Donate via PayPal / ## Donate via card), same size/color in both themes.
  • A real button for the card option using .funding-donate-button — the same class already used for Ghost Key CTAs on /ghostkey/, so no new button style was introduced. Links to /ghostkey/create/, the actual entry point used elsewhere on the site.
  • A one-line note under both buttons (.gk-cta-note, already used on /ghostkey/), rather than a caption under only one — this keeps the fine print an equal-weight explainer on each side instead of a marker for the "lesser" option.
  • Stripped .funding-ghost-keys's heading/paragraph color and font-size overrides; kept only the top divider that visually separates the two options.

Deliberately avoided: urgency, scarcity, pre-selecting one option, or guilt-framed copy on either side. Neither option is styled as the "recommended" or "default" choice.

funding-ghost-keys is only referenced in donate/_index.md (checked via grep before editing its rules), so this doesn't affect any other page.

Testing

Built with hugo --quiet (clean, no warnings/errors). Screenshotted and measured with Playwright at desktop (1280x900) and mobile (390x844), both light and dark color schemes, before and after.

Before (live site, desktop):

  • PayPal: heading 25.2px tall (1.4rem, #1a1a2e), button 195x52
  • Ghost Keys: heading 20.7px tall (1.15rem, #64748b), no button, plain paragraph 79.8px tall

After (this branch, desktop, both themes):

  • PayPal heading: 22.4px font-size, rgb(26,26,46) light / rgb(232,232,232) dark
  • Card heading: 22.4px font-size, same colors — identical to PayPal
  • PayPal button: 195x52, rgb(0,102,204) background, 16px font
  • Card button: 177x52 (width differs only because "Donate via card" vs "Donate via PayPal" is a different label length), same background, height, and font-size
  • Both notes: 14.4px font-size, same color

Verified visually in all 4 combinations (desktop/mobile x light/dark) by reading the rendered screenshots, not just the numbers.

Closes the visual-parity request from Ian.

[AI-assisted - Claude]

The two ways to donate had wildly unequal visual weight: PayPal got a
full-size heading and a filled primary button, while Ghost Keys (card
via Stripe) was a muted grey paragraph with an inline text link and no
button at all. Ian wants them presented as two genuine, equally-weighted
choices.

Give the card option the same treatment as PayPal: a matching heading,
a real button reusing the existing .funding-donate-button style (the
same pattern already used for Ghost Key CTAs on /ghostkey/), and a
one-line note underneath explaining what it does, mirrored on both
sides so neither reads as the "real" option and neither as the
afterthought. No urgency, scarcity, or pre-selection — just parity.

Testing: built with hugo, screenshotted desktop/mobile x light/dark
with Playwright, and diffed bounding boxes before/after. Headings are
now the same font-size/color in both themes; both buttons render at
identical height/font-size with the same background color; both notes
render at the same font-size. Confirmed no other content file
references .funding-ghost-keys before editing its rules.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TdTrb76FvWpw1LXF7eoHJB
@sanity

sanity commented Aug 17, 2026

Copy link
Copy Markdown
Contributor Author

Superseded by #117, which includes this PR's symmetry fix plus surfacing both CTAs above the fold (the scope grew after this PR was opened). Closing in favor of #117.

[AI-assisted - Claude]

@sanity sanity closed this Aug 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant