.donation-page {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: var(--space-md) 0 var(--space-xxl);
}
.donation-hero {
text-align: center;
margin-bottom: var(--space-xl);
padding: var(--space-xl) 0 var(--space-lg);
}
.donation-heart {
display: inline-block;
color: hsl(355deg 78% 50%);
font-size: 2.4rem;
margin: 0 0 var(--space-md);
line-height: 1;
}
.donation-eyebrow {
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-weight: 600;
margin: 0 0 var(--space-md);
}
.donation-headline {
font-family: var(--font-display);
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--color-text);
margin: 0 auto var(--space-md);
max-width: 18ch;
}
.donation-lede {
max-width: 56ch;
margin: 0 auto;
font-family: var(--font-serif);
font-size: var(--font-size-base);
line-height: 1.65;
color: var(--color-text-muted);
}
.donation-lede strong {
color: var(--color-text);
font-weight: 600;
}
.donation-canceled {
max-width: 480px;
margin: 0 auto var(--space-lg);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface-soft);
color: var(--color-text-muted);
font-size: var(--font-size-md);
}
.donation-canceled p { margin: 0; }
.donation-pending {
max-width: 480px;
margin: 0 auto;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
color: var(--color-text);
line-height: 1.6;
font-size: var(--font-size-md);
}
.donation-pending p { margin: 0; }
.donation-form {
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin: 0 auto;
max-width: 480px;
padding: var(--space-xl) 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.donation-frequency {
display: flex;
gap: var(--space-lg);
margin: 0;
padding: 0;
border: none;
justify-content: center;
}
.donation-frequency .freq-btn {
flex: 0 0 auto;
padding: 6px 0;
border: none;
border-bottom: 2px solid transparent;
background: transparent;
font-family: var(--font-sans);
font-size: var(--font-size-md);
font-weight: 500;
color: var(--color-text-muted);
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.donation-frequency .freq-btn:hover {
color: var(--color-text);
}
.donation-frequency .freq-btn.is-active {
color: var(--color-text);
border-bottom-color: var(--color-text);
font-weight: 600;
}
.donation-amounts {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.donation-amounts.is-hidden { display: none; }
.amount-presets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-sm);
}
.amount-btn {
padding: var(--space-md) var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-base);
font-weight: 500;
color: var(--color-text);
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.amount-btn:hover:not(.is-active) {
border-color: var(--color-text-muted);
background: var(--color-surface-hover);
}
.amount-btn.is-active {
border-color: var(--color-text);
background: var(--color-text);
color: var(--color-bg-start);
}
.amount-btn-suffix {
font-size: 0.7em;
color: inherit;
opacity: 0.7;
margin-left: 0.05em;
font-weight: 400;
}
.amount-custom-label {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.amount-custom-text {
flex-shrink: 0;
}
.amount-custom-input {
flex: 1;
display: inline-flex;
align-items: stretch;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
transition: border-color var(--transition-fast);
}
.amount-custom-input:focus-within {
border-color: var(--color-text);
}
.amount-custom-prefix {
display: flex;
align-items: center;
padding-left: 12px;
font-family: var(--font-mono);
font-weight: 500;
color: var(--color-text-muted);
font-size: var(--font-size-base);
}
#custom-amount {
flex: 1;
width: 100%;
padding: 10px 12px 10px 4px;
border: none;
background: transparent;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-base);
color: var(--color-text);
}
#custom-amount:focus {
outline: none;
}
#custom-amount::-webkit-outer-spin-button,
#custom-amount::-webkit-inner-spin-button {
appearance: none;
margin: 0;
}
#custom-amount[type="number"] {
appearance: textfield;
}
.amount-monthly-note {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.55;
font-style: italic;
font-family: var(--font-serif);
}
.amount-monthly-note a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--color-border);
transition: text-decoration-color var(--transition-fast);
}
.amount-monthly-note a:hover {
text-decoration-color: var(--color-text);
}
.donation-fields {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.donation-field {
display: flex;
flex-direction: column;
gap: 6px;
font-size: var(--font-size-md);
color: var(--color-text);
}
.donation-field-label {
font-weight: 500;
color: var(--color-text);
}
.donation-field-optional {
font-weight: 400;
color: var(--color-text-muted);
font-size: 0.85em;
}
.donation-field input {
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: transparent;
font-family: var(--font-sans);
font-size: var(--font-size-base);
color: var(--color-text);
transition: border-color var(--transition-fast);
}
.donation-field input:focus {
outline: none;
border-color: var(--color-text);
}
.donation-field small {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.donation-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 24px;
border: none;
border-radius: var(--radius-sm);
background: var(--color-text);
color: var(--color-bg-start);
font-family: var(--font-sans);
font-size: var(--font-size-base);
font-weight: 600;
cursor: pointer;
transition: background var(--transition-fast);
margin-top: var(--space-sm);
}
.donation-submit:hover:not(:disabled) {
background: var(--color-text-muted);
}
.donation-submit:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.donation-submit-arrow {
font-family: var(--font-mono);
transition: transform var(--transition-fast);
}
.donation-submit:hover:not(:disabled) .donation-submit-arrow {
transform: translateX(2px);
}
.donation-error {
margin: 0;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--color-danger);
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--color-danger) 6%, transparent);
color: var(--color-danger);
font-size: var(--font-size-md);
}
.donation-trust {
margin: 0;
text-align: center;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.donation-trust .fa-lock {
margin-right: 6px;
color: var(--color-text-muted);
font-size: 0.85em;
}
.donation-faq {
max-width: 560px;
margin: var(--space-xxl) auto 0;
}
.donation-faq-title {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--font-size-xl);
letter-spacing: -0.005em;
margin: 0 0 var(--space-lg);
color: var(--color-text);
text-align: center;
}
.donation-faq-list {
display: flex;
flex-direction: column;
}
.donation-faq-item {
border-bottom: 1px solid var(--color-border);
}
.donation-faq-item:first-child {
border-top: 1px solid var(--color-border);
}
.donation-faq-item summary {
list-style: none;
cursor: pointer;
padding: var(--space-md) 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
font-family: var(--font-display);
font-weight: 500;
font-size: var(--font-size-md);
color: var(--color-text);
transition: color var(--transition-fast);
}
.donation-faq-item summary::-webkit-details-marker {
display: none;
}
.donation-faq-item summary::after {
content: "↓";
flex-shrink: 0;
font-family: var(--font-mono);
font-size: var(--font-size-md);
color: var(--color-text-muted);
line-height: 1;
transition: transform var(--transition-fast), color var(--transition-fast);
}
.donation-faq-item[open] summary::after {
transform: rotate(180deg);
color: var(--color-text);
}
.donation-faq-item summary:hover {
color: var(--color-text);
}
.donation-faq-item summary:hover::after {
color: var(--color-text);
}
.donation-faq-body {
padding: 0 0 var(--space-md);
color: var(--color-text-muted);
line-height: 1.7;
font-size: var(--font-size-md);
font-family: var(--font-serif);
}
.donation-faq-body a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--color-border);
transition: text-decoration-color var(--transition-fast);
}
.donation-faq-body a:hover {
text-decoration-color: var(--color-text);
}
.donation-thanks {
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: var(--space-md) 0 var(--space-xxl);
}
.donation-thanks-body {
max-width: 56ch;
margin: 0 auto;
font-family: var(--font-serif);
font-size: var(--font-size-base);
color: var(--color-text-muted);
line-height: 1.7;
text-align: center;
}
.donation-thanks-body p { margin: 0 0 var(--space-md); }
.donation-thanks-body a {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: var(--color-border);
}
.donation-thanks-body a:hover {
text-decoration-color: var(--color-text);
}
.donation-thanks-cta { margin-top: var(--space-xl); }
.donation-thanks-link {
display: inline-block;
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--transition-fast), border-color var(--transition-fast);
font-family: var(--font-sans);
font-size: var(--font-size-md);
}
.donation-thanks-link:hover {
color: var(--color-text);
border-bottom-color: var(--color-text-muted);
}
.donation-manage-back {
text-align: center;
margin-top: var(--space-xl);
}
.donation-manage-cta {
text-align: center;
margin-top: var(--space-lg);
}
.donation-submit--as-link {
text-decoration: none;
}
@media (width <= 600px) {
.donation-form {
padding: var(--space-lg) 0;
}
.amount-presets {
grid-template-columns: repeat(3, 1fr);
}
.amount-btn {
padding: 14px 4px;
font-size: var(--font-size-md);
}
.amount-custom-label {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.donation-frequency {
gap: var(--space-md);
}
}