/* ==========================================================================
donation.css — styles for direct-donation pages on act.electrepublicans.org
Loaded only by base_donation.html (not base.html).
Scoped under body.donation-page to guarantee zero interaction with main.css.
========================================================================== */
/* -- CRITICAL START -- */
/* Above-the-fold donation styles inlined in for first paint.
* Covers: reset, headline/body/ask copy, amount grid, monthly toggle, CTA
* buttons. CRO Phase 1 Task 9.
*/
/* Reset + base */
body.donation-page {
margin: 0;
padding: 0;
background: #ffffff;
color: #1f2937;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.donation-page * {
box-sizing: border-box;
}
body.donation-page a {
color: inherit;
}
body.donation-page .container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
/* Logo header — no border, generous vertical padding */
body.donation-page .donation-logo-header {
padding: 32px 0 12px;
}
body.donation-page .donation-logo {
display: block;
height: 10em;
width: auto;
margin: 0 auto;
}
/* Main content wrapper */
body.donation-page .donation-main {
padding: 36px 0 48px;
min-height: 60vh;
}
/* Shared donation-root scoping */
body.donation-page #donationRoot {
display: block;
}
/* Shared copy styles */
body.donation-page .donation-copy {
display: flex;
flex-direction: column;
gap: 14px;
}
body.donation-page .donation-headline {
margin: 0;
font-size: 26px;
font-weight: 800;
color: #d0021a;
line-height: 1.15;
}
body.donation-page .donation-subheadline {
margin: 0;
font-size: 16px;
font-weight: 500;
color: #374151;
line-height: 1.4;
}
body.donation-page .donation-body {
font-size: 16px;
line-height: 1.6;
color: #374151;
}
body.donation-page .donation-body p {
margin: 0 0 10px;
}
body.donation-page .donation-body strong {
color: #1f2937;
}
body.donation-page .donation-pullquote {
margin: 4px 0;
padding: 12px 16px;
border-left: 3px solid #f59e0b;
background: #fef3c7;
font-style: italic;
font-size: 14px;
color: #78350f;
}
body.donation-page .donation-ask {
margin: 6px 0 0;
font-size: 16px;
font-weight: 700;
color: #1f2937;
}
/* Amount block */
body.donation-page .donation-amounts {
display: flex;
flex-direction: column;
gap: 10px;
}
body.donation-page .amounts-label {
display: block;
font-size: 16px;
font-weight: 700;
color: #1f2937;
}
body.donation-page .amounts-subtitle {
margin: -4px 0 4px;
font-size: 14px;
color: #6b7280;
}
body.donation-page .amount-grid {
display: grid;
gap: 8px;
/* grid-template-columns set per layout below */
}
body.donation-page .amount-button {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 8px;
background: #f3f4f6;
color: #1f2937;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
cursor: pointer;
}
body.donation-page .amount-button:hover {
background: #e5e7eb;
border-color: #9ca3af;
}
body.donation-page .amount-button:active {
transform: scale(0.98);
}
body.donation-page .amount-button {
position: relative; /* anchor for the upper-left checkmark */
}
body.donation-page .amount-button.selected {
background: #d0021a;
color: #ffffff;
border-color: #991b1b;
box-shadow: 0 2px 4px rgba(185, 28, 28, 0.3);
}
/* SVG checkmark, upper-left corner of selected button (not inline with text) */
body.donation-page .amount-button.selected::before {
content: "";
position: absolute;
top: 6px;
left: 6px;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
}
body.donation-page .amount-button.selected:hover {
background: #991b1b;
border-color: #7f1d1d;
}
/* "Other" amount — button-shaped slot containing a $ prefix + visible text input.
The inner has its own white background and border so it clearly reads
as an interactive text field, not just text that's part of a button. */
body.donation-page .amount-button.amount-other {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
padding: 6px 10px;
cursor: text;
}
body.donation-page .amount-other-prefix {
flex-shrink: 0;
font-weight: 700;
font-size: 16px;
color: #6b7280;
pointer-events: none;
line-height: 1;
}
body.donation-page .amount-other-input {
flex: 1 1 auto;
min-width: 0;
width: 100%;
background: #ffffff;
border: 1.5px solid #d1d5db;
border-radius: 3px;
padding: 8px 8px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #1f2937;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
-moz-appearance: textfield;
-webkit-appearance: none;
appearance: none;
}
body.donation-page .amount-other-input::-webkit-outer-spin-button,
body.donation-page .amount-other-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
body.donation-page .amount-other-input::placeholder {
color: #9ca3af;
}
body.donation-page .amount-other-input:focus {
border-color: #d0021a;
box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.2);
}
/* Selected state: outer slot turns red like other buttons, but the input
stays white so it's still obviously a typeable text field. */
body.donation-page .amount-button.amount-other.selected {
background: #d0021a;
border-color: #991b1b;
}
body.donation-page .amount-button.amount-other.selected .amount-other-prefix {
color: #ffffff;
}
body.donation-page .amount-button.amount-other.selected .amount-other-input {
background: #ffffff;
color: #1f2937;
border-color: #ffffff;
}
/* ==========================================================================
Checkout section (shared across all layouts)
Contains: "Checkout" label, help line, primary "Pay with card" button,
"or" divider, and Apple Pay + Google Pay secondary buttons.
========================================================================== */
body.donation-page .checkout-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e5e7eb;
display: flex;
flex-direction: column;
}
body.donation-page .checkout-label {
margin: 0 0 6px;
font-size: 16px;
font-weight: 800;
color: #1f2937;
display: flex;
align-items: center;
gap: 8px;
}
body.donation-page .checkout-icon {
flex-shrink: 0;
display: block;
}
body.donation-page .checkout-help {
margin: 0 0 14px;
font-size: 13px;
color: #6b7280;
line-height: 1.5;
}
/* NextAfter: social proof at the CTA. Replaces the generic gray trust
copy that used to live here — specific donor counts outperform
generic reassurance in every A/B test they've run. */
body.donation-page .checkout-social-proof {
margin: 0 0 14px;
font-size: 14px;
font-weight: 600;
color: #0f172a;
line-height: 1.4;
}
/* Destination-clarity hint rendered below the card CTA. Tells the donor
what to expect post-click (one-click for returning WinRed donors). */
body.donation-page .checkout-hint {
margin: 10px 0 4px;
font-size: 12px;
color: #6b7280;
line-height: 1.45;
text-align: center;
}
/* Wallet button (Apple Pay OR Google Pay) is the SECONDARY CTA — black,
below the card primary. JS picks one based on browser and removes the
other so only one ever renders. Slightly smaller padding + font than
the card button so the visual hierarchy reads primary → secondary. */
body.donation-page .pay-with-wallet-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 16px;
background: #000000;
color: #ffffff;
border: 1px solid #000000;
border-radius: 4px;
font-family: inherit;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.2px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
transition: background-color 0.15s, transform 0.1s;
}
body.donation-page .pay-with-wallet-btn:hover { background: #1f2937; }
body.donation-page .pay-with-wallet-btn:active { transform: scale(0.98); }
body.donation-page .pay-wallet-icon { flex-shrink: 0; pointer-events: none; }
/* Card button is PRIMARY (CRO spec §7, updated 2026-04-20: card carries
oc=true for one-click returning-donor flow; wallet buttons can't). Size
tuned to match visual weight of the black wallet button. */
body.donation-page .pay-with-card-btn {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
width: 100%;
padding: 16px 16px;
background: #d0021a;
color: #ffffff;
border: 1px solid #991b1b;
border-radius: 4px;
font-family: inherit;
font-size: 18px;
font-weight: 800;
letter-spacing: 0.2px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(185, 28, 28, 0.3);
transition: background-color 0.15s, transform 0.1s;
}
body.donation-page .pay-with-card-btn:hover {
background: #991b1b;
}
body.donation-page .pay-with-card-btn:active {
transform: scale(0.98);
}
body.donation-page .pay-card-icons {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
pointer-events: none;
}
body.donation-page .pay-card-icon {
display: block;
border-radius: 2px;
overflow: hidden;
}
body.donation-page .pay-btn-text {
flex: 1 1 auto;
text-align: center;
pointer-events: none;
}
body.donation-page .pay-with-or {
display: flex;
align-items: center;
justify-content: center;
margin: 14px 0;
color: #9ca3af;
font-size: 11px;
font-weight: 600;
}
body.donation-page .pay-with-or::before,
body.donation-page .pay-with-or::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: #e5e7eb;
}
body.donation-page .pay-with-or span {
padding: 0 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
body.donation-page .payment-alt-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* When JS has removed one of the two alt payment buttons (Safari -> Apple Pay
only, non-Safari -> Google Pay only), collapse to a single full-width button. */
body.donation-page .payment-alt-grid.single {
grid-template-columns: 1fr;
}
body.donation-page .payment-alt-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 12px;
background: #000000;
color: #ffffff;
border: 1px solid #000000;
border-radius: 4px;
font-family: inherit;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.15s, transform 0.1s;
}
body.donation-page .payment-alt-btn:hover {
background: #1f2937;
}
body.donation-page .payment-alt-btn:active {
transform: scale(0.98);
}
/* -- CRITICAL END -- */
body.donation-page .payment-alt-icon {
flex-shrink: 0;
display: block;
pointer-events: none;
}
/* Google Pay button gets a white background for the multi-color G */
body.donation-page #googlePayBtn {
background: #ffffff;
color: #1f2937;
border-color: #d1d5db;
}
body.donation-page #googlePayBtn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}
body.donation-page .payment-alt-label {
pointer-events: none;
}
/* ==========================================================================
Monthly toggle — checkbox variant (default)
Outer element is a