/* ==========================================================
DONATION FORM
Version 2 - Preserves original appearance
========================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--yellow: #FFD200;
--yellow-bg: rgba(255,210,0,.05);
--border: #cfcfcf;
--error: #d93025;
--primary: #444;
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.error-box {
border: 1px solid var(--error) !important;
}
#leftBar {
display: none;
}
/* ==========================================================
Loader
========================================================== */
#loader-overlay {
position: fixed;
inset: 0;
display: none;
justify-content: center;
align-items: center;
background: rgba(0,0,0,.45);
z-index: 9999;
}
/* The 2-ID selector and explicit display beat the Shopify theme's
`div:empty { display: none }` (this spinner div has no text content). */
#loader-overlay #loader {
display: block;
flex: none;
width: 52px;
height: 52px;
box-sizing: border-box;
border-radius: 50%;
border: 5px solid rgba(255,255,255,.3);
border-top-color: #fff;
animation: don-spin .9s linear infinite;
}
@keyframes don-spin {
to { transform: rotate(360deg); }
}
/* ==========================================================
Main Form
========================================================== */
#regForm {
max-width: 760px;
margin: 0 auto;
padding: 0 40px 40px;
background: #fff;
}
.tab {
width: 100%;
}
/* The current Shopify theme sets a global `hr { margin: 5rem/7rem 0 }`
(80-112px). That's fine out in the theme's own content, but it makes
the divider(s) inside our form blow the layout up with huge gaps.
#regForm's ID beats the theme's bare-tag rule regardless of its
media queries. */
#regForm hr {
margin: 20px 0;
}
/* ==========================================================
Amount Row
========================================================== */
#step-1 {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
column-gap: 12px;
}
/* The Shopify markup has no .amount-row wrapper, so lay the row out on
#step-1 directly: amount + currency share the first line, everything
after them spans the full width. */
#step-1 > #amount {
flex: 1 1 240px;
width: auto;
}
#step-1 > #donation_currency {
flex: 0 0 auto;
}
#step-1 > .donation-monthly,
#step-1 > #fees,
#step-1 > .fund-row,
#step-1 > .g-recaptcha,
#step-1 > .proceed {
flex: 1 1 100%;
}
/* kill the literal
spacer between the currency select and the
checkbox boxes */
#step-1 > br {
display: none;
}
.amount-row {
display: flex;
gap: 10px;
align-items: stretch;
margin-bottom: 18px;
}
#amount {
flex: 1;
min-width: 0;
height: 48px;
padding: 10px 14px;
font-size: 23px;
border: 1px solid #888;
border-radius: 4px;
-moz-appearance: textfield;
appearance: textfield;
}
/* remove the number-input spinner arrows */
#amount::-webkit-outer-spin-button,
#amount::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#donation_currency {
width: 200px;
height: 48px;
padding: 0 10px;
font-size: 23px;
border: 1px solid #888;
border-radius: 4px;
background: #fff;
}
/* Fund dropdown -- its own full-width row below amount/currency. */
.fund-row {
display: flex;
flex-direction: column;
gap: 6px;
margin: 10px 0 10px;
}
.fund-row label {
font-size: 14px;
color: #444;
}
#donation_fund {
width: 100%;
height: 48px;
padding: 0 10px;
font-size: 18px;
border: 1px solid #888;
border-radius: 4px;
background: #fff;
}
/* ==========================================================
Generic Inputs
========================================================== */
input[type=text],
input[type=email],
input[type=number],
input[type=tel],
select {
transition:
border-color .2s,
box-shadow .2s;
}
input:focus,
select:focus {
outline: none;
border-color: #1976d2;
box-shadow: 0 0 0 3px rgba(25,118,210,.15);
}
/* ==========================================================
Checkbox Boxes
========================================================== */
.donation-monthly {
display: flex;
align-items: flex-start;
margin: 10px 0;
padding: 10px;
border: 1px solid var(--yellow);
background: var(--yellow-bg);
border-radius: 3px;
}
.recurring {
width: 20px;
height: 20px;
margin: 2px 12px 0 0;
flex-shrink: 0;
}
.donation-monthly label {
margin: 0;
line-height: 1.45;
cursor: pointer;
flex: 1;
}
#payment-message {
margin-top: 15px;
padding: 10px;
border-radius: 3px;
background: lightpink;
}
/* ==========================================================
Buttons
========================================================== */
.btn {
display: inline-block;
padding: 12px 26px;
min-height: 46px;
font-size: 20px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
letter-spacing: .02em;
color: #fff;
background: #BA5626;
border: 1px solid #BA5626;
border-radius: 4px;
cursor: pointer;
transition: all .2s ease;
}
.btn:hover,
.btn:focus-visible {
background: #fff;
color: #BA5626;
border-color: #BA5626;
}
.btn:active {
transform: translateY(1px);
background: #9f461f;
border-color: #9f461f;
color: #fff;
}
.btn:disabled {
opacity: .6;
cursor: not-allowed;
}
.btn:disabled:hover {
background: #BA5626;
color: #fff;
border-color: #BA5626;
}
.proceed,
#submit {
display: block;
width: 100%;
margin-top: 20px;
}
/* ==========================================================
Stripe
========================================================== */
#payment-form {
width: 100%;
margin-top: 10px;
}
#payment-element,
#link-authentication-element {
margin-bottom: 20px;
}
.p-Input-input {
display: block;
width: 100%;
padding: 12px;
margin-bottom: 14px;
font-size: 20px;
border: 1px solid #888;
border-radius: 4px;
transition:
border-color .2s,
box-shadow .2s;
}
.p-Input-input:focus {
outline: none;
border-color: #1976d2;
box-shadow: 0 0 0 3px rgba(25,118,210,.15);
}
/* ==========================================================
Spinner
========================================================== */
.spinner {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.5);
border-top-color: #fff;
animation: don-spin .8s linear infinite;
}
/* ==========================================================
reCAPTCHA
========================================================== */
.g-recaptcha {
margin: 18px 0;
}
/* ==========================================================
Links
========================================================== */
a {
color: #0056b3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* All links inside the donation form -- the ID anchor beats the Shopify
theme so links read as links, not body text. */
#regForm a {
color: #BA5626;
text-decoration: underline;
}
#regForm a:hover {
color: #9f461f;
}
/* ==========================================================
Mobile
========================================================== */
@media (max-width:768px) {
#regForm {
padding: 0 18px 28px;
width: 100%;
}
.amount-row {
flex-direction: column;
gap: 10px;
}
#amount,
#donation_currency,
#step-1 > #amount,
#step-1 > #donation_currency {
flex: 1 1 100%;
width: 100%;
font-size: 18px;
}
#donation_fund {
font-size: 16px;
}
.donation-monthly {
padding: 10px;
}
.btn {
width: 100%;
font-size: 18px;
padding: 12px;
}
.p-Input-input {
font-size: 18px;
}
}
@media (max-width:480px) {
#regForm {
padding: 0 12px 24px;
}
.recurring {
margin-right: 10px;
}
}
/* ==========================================================
Accessibility
========================================================== */
input:focus-visible,
select:focus-visible,
button:focus-visible {
outline: 2px solid #1976d2;
outline-offset: 2px;
}
/* ==========================================================
Utility
========================================================== */
.hidden {
display: none !important;
}
img {
max-width: 100%;
height: auto;
}