feat(donate): balance PayPal and Ghost Keys CTAs - #116
Closed
sanity wants to merge 1 commit into
Closed
Conversation
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
Contributor
Author
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
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.
Problem
The donate page offered two ways to give, but they had wildly unequal visual weight:
## Donateheading + a filled primary button (.funding-donate-button)..funding-ghost-keysdeliberately 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:
## Donate via PayPal/## Donate via card), same size/color in both themes..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..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..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-keysis only referenced indonate/_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):
#1a1a2e), button 195x52#64748b), no button, plain paragraph 79.8px tallAfter (this branch, desktop, both themes):
rgb(26,26,46)light /rgb(232,232,232)darkrgb(0,102,204)background, 16px fontVerified 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]