/* ===========
THEME TOKENS
=========== */
:root{
--bg1:#1a061e; /* deep purple */
--bg2:#2a0b33; /* mid purple */
--panel: rgba(255,255,255,.04);
--panel2: rgba(255,255,255,.06);
--border: rgba(255,255,255,.10);
--text: rgba(255,255,255,.92);
--muted: rgba(255,255,255,.70);
--gold:#f4b400; /* gold accent */
--gold2:#ffcc33;
--radius: 18px;
--shadow: 0 18px 45px rgba(0,0,0,.35);
}
/* Smooth base background like screenshots */
body{
background: radial-gradient(1200px 700px at 70% 10%, rgba(255,255,255,.06), transparent 60%),
linear-gradient(180deg, var(--bg1), var(--bg2));
color: var(--text);
}
/* Make headings serif + dramatic */
h1,h2,h3{
font-family: "Georgia", "Times New Roman", serif !important;
letter-spacing: -0.02em;
}
/* Make regular text look softer */
p, li{
color: var(--muted);
}
/* ===========
SECTION: HERO
Add Section ID: hero
=========== */
section[data-section-id="hero"]{
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Dark overlay over the hero image */
section[data-section-id="hero"]::before{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg, rgba(26,6,30,.92) 0%, rgba(26,6,30,.70) 35%, rgba(26,6,30,.25) 70%, rgba(26,6,30,.10) 100%),
radial-gradient(800px 500px at 30% 35%, rgba(255,255,255,.08), transparent 60%);
pointer-events:none;
z-index: 1;
}
/* Ensure hero content sits above overlay */
section[data-section-id="hero"] .content{
position: relative;
z-index: 2;
}
/* Big hero title */
section[data-section-id="hero"] h1{
font-size: clamp(40px, 5vw, 72px) !important;
line-height: 1.02 !important;
max-width: 18ch;
margin-bottom: 18px;
}
/* Hero supporting text */
section[data-section-id="hero"] p{
font-size: clamp(16px, 1.3vw, 20px);
max-width: 62ch;
}
/* Buttons row spacing */
section[data-section-id="hero"] .sqs-block-button{
margin-top: 22px;
}
/* Primary button (Donate Now) */
section[data-section-id="hero"] .sqs-block-button .sqs-block-button-element--primary{
background: linear-gradient(180deg, var(--gold2), var(--gold)) !important;
color: #2a0b33 !important;
border: 0 !important;
border-radius: 999px !important;
padding: 14px 22px !important;
font-weight: 700 !important;
box-shadow: 0 14px 30px rgba(244,180,0,.25);
}
/* Secondary button (See Our Impact) */
section[data-section-id="hero"] .sqs-block-button .sqs-block-button-element--secondary{
background: transparent !important;
color: var(--text) !important;
border: 1px solid rgba(255,255,255,.24) !important;
border-radius: 999px !important;
padding: 14px 22px !important;
font-weight: 650 !important;
}
/* ===========
SECTION: IMPACT
Add Section ID: impact
=========== */
section[data-section-id="impact"]{
background: linear-gradient(180deg, rgba(26,6,30,.25), rgba(26,6,30,.55));
}
/* Small gold eyebrow text (OUR IMPACT / MAKE A DIFFERENCE) */
section[data-section-id="impact"] .eyebrow,
section[data-section-id="donate"] .eyebrow{
color: var(--gold) !important;
text-transform: uppercase;
letter-spacing: .18em;
font-weight: 800;
font-size: 12px;
}
/* Impact headline */
section[data-section-id="impact"] h2{
font-size: clamp(30px, 3vw, 48px) !important;
line-height: 1.1 !important;
margin-top: 10px;
}
/* ===== Impact cards via SUMMARY BLOCK =====
Put a Summary Block with 4 items in the Impact section.
Each item: Title = "50%", Description = "of foster youth..." etc.
*/
section[data-section-id="impact"] .summary-block-wrapper{
margin-top: 28px;
}
section[data-section-id="impact"] .summary-item{
background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius);
padding: 22px 20px !important;
box-shadow: var(--shadow);
min-height: 220px;
}
/* Center content like screenshot */
section[data-section-id="impact"] .summary-item .summary-content{
text-align: center !important;
}
/* Big stat */
section[data-section-id="impact"] .summary-item .summary-title{
color: var(--gold) !important;
font-size: 44px !important;
font-weight: 900 !important;
margin-top: 18px !important;
}
/* Description */
section[data-section-id="impact"] .summary-item .summary-excerpt p{
color: rgba(255,255,255,.72) !important;
font-size: 15px !important;
line-height: 1.35 !important;
}
/* Optional: fake “icon chip” look (use an emoji or small icon image above title) */
section[data-section-id="impact"] .summary-item .summary-thumbnail-outer-container{
display: flex;
justify-content: center;
margin-bottom: 8px;
}
section[data-section-id="impact"] .summary-item .summary-thumbnail{
width: 46px !important;
height: 46px !important;
border-radius: 999px !important;
background: rgba(244,180,0,.12);
border: 1px solid rgba(244,180,0,.25);
padding: 10px;
}
/* ===========
SECTION: DONATION
Add Section ID: donate
=========== */
section[data-section-id="donate"]{
background: linear-gradient(180deg, rgba(26,6,30,.60), rgba(26,6,30,.85));
padding-bottom: 60px;
}
section[data-section-id="donate"] h2{
font-size: clamp(30px, 3vw, 52px) !important;
line-height: 1.08 !important;
}
/* Card container look */
section[data-section-id="donate"] .donation-card,
section[data-section-id="donate"] .sqs-block-form,
section[data-section-id="donate"] .sqs-block-code{
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.10);
border-radius: 22px;
padding: 26px;
box-shadow: var(--shadow);
}
/* Form inputs (if your donation embed uses inputs) */
section[data-section-id="donate"] input,
section[data-section-id="donate"] select,
section[data-section-id="donate"] textarea{
background: rgba(0,0,0,.20) !important;
border: 1px solid rgba(255,255,255,.14) !important;
color: var(--text) !important;
border-radius: 12px !important;
}
/* Mobile spacing */
@media (max-width: 767px){
section[data-section-id="hero"] h1{
max-width: 100%;
}
section[data-section-id="impact"] .summary-item{
min-height: auto;
}
}
