From 0ddaf33649d69b5d9e01c0b282d7be0768362290 Mon Sep 17 00:00:00 2001
From: Ian Clarke <sanity@users.noreply.github.com>
Date: Mon, 17 Aug 2026 08:59:38 -0500
Subject: [PATCH] feat(donate): balance PayPal and Ghost Keys CTAs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 hugo-site/content/donate/_index.md            | 14 +++++++-----
 .../themes/freenet/assets/css/freenet.css     | 22 +++----------------
 2 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/hugo-site/content/donate/_index.md b/hugo-site/content/donate/_index.md
index 1f77b5f5..dda66ae0 100644
--- a/hugo-site/content/donate/_index.md
+++ b/hugo-site/content/donate/_index.md
@@ -62,18 +62,20 @@ If you are interested in supporting Freenet at a significant level, we would be
 
 <div class="funding-section funding-donate-section">
 
-## Donate
+## Donate via PayPal
 
 <a href="https://www.paypal.com/donate?hosted_button_id=EQ9E7DPHB6ETY" class="funding-donate-button">Donate via PayPal</a>
 
+<p class="gk-cta-note">One-time or recurring, no account required.</p>
+
 </div>
 
-<div class="funding-section funding-ghost-keys">
+<div class="funding-section funding-donate-section funding-ghost-keys">
+
+## Donate via card
 
-## Donating by card
+<a href="/ghostkey/create/" class="funding-donate-button">Donate via card</a>
 
-If you would rather give by card, you can donate through [Ghost Keys](/ghostkey/). A Ghost Key is an
-anonymous cryptographic identity, issued with your donation, that works across Freenet apps and
-cannot be linked back to your payment. The minimum is $1.
+<p class="gk-cta-note">Issues a <a href="/ghostkey/">Ghost Key</a>, an anonymous cryptographic identity that works across Freenet apps and can't be linked back to your payment. $1 minimum.</p>
 
 </div>
diff --git a/hugo-site/themes/freenet/assets/css/freenet.css b/hugo-site/themes/freenet/assets/css/freenet.css
index a724192e..e98e576a 100644
--- a/hugo-site/themes/freenet/assets/css/freenet.css
+++ b/hugo-site/themes/freenet/assets/css/freenet.css
@@ -1311,22 +1311,14 @@ picture.app-screenshot img {
   }
 }
 
-/* Ghost keys — understated */
+/* Ghost Keys donate option — same visual weight as PayPal (funding-donate-button
+   + gk-cta-note), just separated from it with a divider so the two read as
+   distinct, equally-weighted choices rather than one continuous block. */
 .funding-ghost-keys {
   padding-top: 1.5rem;
   border-top: 1px solid rgba(0, 0, 0, 0.08);
 }
 
-.funding-ghost-keys h2 {
-  font-size: 1.15rem;
-  color: #64748b;
-}
-
-.funding-ghost-keys p {
-  color: #64748b;
-  font-size: 0.95rem;
-}
-
 /* Dark mode — funding page */
 @media (prefers-color-scheme: dark) {
   .funding-title {
@@ -1376,14 +1368,6 @@ picture.app-screenshot img {
   .funding-ghost-keys {
     border-top-color: rgba(255, 255, 255, 0.08);
   }
-
-  .funding-ghost-keys h2 {
-    color: #8896a8;
-  }
-
-  .funding-ghost-keys p {
-    color: #8896a8;
-  }
 }
 
 /* Responsive — funding page */