/* =========================================================
donate-premium.css — Donate-only luxury (v1.0)
Requires:
Load AFTER assets/css/styles.css
========================================================= */
body.page-donate{
--dn-bg: var(--bg, #06110D);
--dn-bg2: var(--bg2, #071812);
--dn-text: var(--text, #F4F0E8);
--dn-muted: var(--muted, rgba(244,240,232,.72));
--dn-line: var(--line, rgba(244,240,232,.10));
--dn-line-strong: var(--line-strong, rgba(244,240,232,.14));
--dn-gold: var(--gold, #C9A227);
--dn-gold2: var(--gold2, #E1C76A);
--dn-emerald: var(--emerald, #1F8A70);
--dn-radius: 18px;
--dn-radius-lg: 26px;
--dn-blur: 12px;
--dn-ease: cubic-bezier(.2,.8,.2,1);
color: var(--dn-text);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Reduced motion */
body.page-donate{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
body.page-donate{ scroll-behavior: auto; }
body.page-donate *, body.page-donate *::before, body.page-donate *::after{
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
/* Focus */
body.page-donate :focus-visible{
outline: none;
box-shadow: 0 0 0 .22rem rgba(201,162,39,.18);
border-radius: 12px;
}
/* Width control (match your site approach) */
body.page-donate .container,
body.page-donate .container-wide{
width: min(1200px, calc(100% - 48px));
margin-left: auto;
margin-right: auto;
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* Section rhythm */
body.page-donate .section{
position: relative;
padding: 92px 0;
border-top: 1px solid var(--dn-line);
background: transparent;
}
body.page-donate .section::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg, rgba(244,240,232,.018), rgba(244,240,232,0) 58%),
radial-gradient(820px 420px at 10% -10%, rgba(201,162,39,.050), transparent 62%),
radial-gradient(860px 440px at 110% 0%, rgba(31,138,112,.040), transparent 62%);
opacity: 1;
}
body.page-donate .section.alt{ background: rgba(244,240,232,.008); }
body.page-donate section[id]{ scroll-margin-top: 96px; }
/* Links */
body.page-donate a{
color: var(--dn-gold2);
text-decoration-thickness: 1px;
text-underline-offset: .18em;
}
body.page-donate a:hover{ text-decoration-thickness: 2px; }
/* Buttons (quiet luxury) */
body.page-donate .btn{
border-radius: 999px;
letter-spacing: .01em;
transition: transform .16s var(--dn-ease), filter .16s var(--dn-ease), border-color .16s var(--dn-ease), background-color .16s var(--dn-ease);
}
body.page-donate .btn:hover{ transform: translateY(-1px); }
body.page-donate .btn:active{ transform: translateY(0); }
body.page-donate .btn-primary{
background:
radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.30), rgba(201,162,39,.10) 55%, rgba(201,162,39,.06)),
linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.08));
border: 1px solid rgba(201,162,39,.52);
color: rgba(244,240,232,.96);
}
body.page-donate .btn-primary:hover{ border-color: rgba(201,162,39,.70); filter: brightness(1.03); }
body.page-donate .btn-outline{
background: transparent;
border: 1px solid rgba(244,240,232,.20);
color: rgba(244,240,232,.92);
}
body.page-donate .btn-outline:hover{
border-color: rgba(201,162,39,.45);
background: rgba(201,162,39,.08);
color: rgba(244,240,232,.96);
}
body.page-donate .btn-ghost{
background: rgba(244,240,232,.03);
border: 1px solid rgba(244,240,232,.14);
color: rgba(244,240,232,.92);
}
body.page-donate .btn-ghost:hover{
border-color: rgba(201,162,39,.35);
background: rgba(244,240,232,.05);
}
/* Cards */
body.page-donate .card.luxe{
position: relative;
border-radius: var(--dn-radius-lg);
border: 1px solid rgba(244,240,232,.12);
background: linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02));
box-shadow: 0 18px 48px rgba(0,0,0,.28);
overflow: hidden;
}
body.page-donate .card.luxe::before{
content:"";
position:absolute;
inset:-1px;
pointer-events:none;
background:
radial-gradient(640px 260px at 12% 0%, rgba(201,162,39,.12), transparent 62%),
radial-gradient(640px 260px at 112% 10%, rgba(31,138,112,.08), transparent 62%),
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
opacity: .75;
}
/* Progress bar */
body.page-donate .dn-progress{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 3px;
z-index: 9999;
background: rgba(244,240,232,.06);
backdrop-filter: blur(8px);
border-bottom: 1px solid rgba(244,240,232,.10);
}
body.page-donate .dn-progress > span{
display:block;
height:100%;
width:0%;
background: linear-gradient(90deg, rgba(201,162,39,.95), rgba(31,138,112,.55));
}
/* =========================================================
HERO (FULL-WIDTH like other pages)
Requires HTML:
========================================================= */
body.page-donate .dn-hero{
position: relative;
overflow: hidden;
}
/* Background layer (keep behind content) */
body.page-donate .dn-hero .dn-hero-bg{
position: absolute;
inset: 0;
z-index: 0;
/* Premium CADECT gradient (photo-free).
If you want a photo later, add: url("assets/img/your-photo.jpg") */
background:
radial-gradient(980px 520px at 18% 0%, rgba(201,162,39,.14), transparent 62%),
radial-gradient(980px 520px at 92% 0%, rgba(31,138,112,.12), transparent 62%),
linear-gradient(180deg, rgba(244,240,232,.02), rgba(244,240,232,0) 58%),
linear-gradient(180deg, rgba(6,17,13,.55), rgba(6,17,13,.92));
background-size: cover;
background-position: center;
transform: scale(1.02);
}
/* Vignette + sheen (also behind content) */
body.page-donate .dn-hero::after{
content:"";
position:absolute;
inset:0;
z-index: 0;
pointer-events:none;
background:
radial-gradient(900px 420px at 12% 10%, rgba(201,162,39,.08), transparent 60%),
radial-gradient(900px 420px at 92% 0%, rgba(31,138,112,.06), transparent 60%),
linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.40));
}
/* Ensure hero content stays above background */
body.page-donate .dn-hero > .container{
position: relative;
z-index: 1;
}
/* Proof strip */
body.page-donate .dn-proof-strip{
margin-top: 18px;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.page-donate .dn-proof{
display:flex;
gap: 10px;
align-items: center;
border-radius: 18px;
border: 1px solid rgba(244,240,232,.12);
background: rgba(244,240,232,.03);
padding: .75rem .85rem;
}
body.page-donate .dn-proof-ic{
width: 38px;
height: 38px;
display:grid;
place-items:center;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(244,240,232,.03);
color: rgba(201,162,39,.92);
}
body.page-donate .dn-proof-title{ font-weight: 900; color: rgba(244,240,232,.95); }
body.page-donate .dn-proof-sub{ font-size: .86rem; color: rgba(244,240,232,.72); }
/* Logo wall */
body.page-donate .dn-logo-wall{
margin-top: 14px;
display:flex;
flex-wrap: wrap;
gap: 10px;
}
body.page-donate .dn-logo-wall span{
padding: .50rem .70rem;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(244,240,232,.03);
color: rgba(244,240,232,.86);
font-weight: 850;
font-size: .92rem;
}
/* Widget */
body.page-donate .dn-widget{ padding: 1rem 1.05rem 1.05rem; }
body.page-donate .dn-widget-head{
display:flex;
justify-content: space-between;
gap: 12px;
align-items: start;
}
body.page-donate .dn-widget-title{ margin: .15rem 0 0; }
body.page-donate .dn-widget-sub{ margin: .25rem 0 0; }
body.page-donate .dn-toggle{
margin-top: 12px;
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
body.page-donate .dn-tab{
padding: .70rem .85rem;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(244,240,232,.03);
color: rgba(244,240,232,.90);
font-weight: 900;
}
body.page-donate .dn-tab.is-active{
border-color: rgba(201,162,39,.45);
background: rgba(201,162,39,.10);
}
body.page-donate .dn-row{ margin-top: 12px; }
body.page-donate .dn-label{
display:block;
font-weight: 900;
color: rgba(244,240,232,.88);
margin-bottom: 6px;
font-size: .92rem;
}
body.page-donate .dn-select{
border-radius: 16px;
border-color: rgba(244,240,232,.14);
background: rgba(0,0,0,.12);
color: rgba(244,240,232,.92);
}
body.page-donate .dn-amounts{
margin-top: 12px;
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.page-donate .dn-amt{
padding: .70rem .75rem;
border-radius: 18px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(244,240,232,.03);
color: rgba(244,240,232,.92);
font-weight: 950;
text-align:center;
}
body.page-donate .dn-amt.is-active{
border-color: rgba(201,162,39,.45);
background: rgba(201,162,39,.10);
}
body.page-donate .dn-inputwrap{
display:flex;
align-items: center;
gap: 10px;
border-radius: 18px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(0,0,0,.12);
padding: .55rem .65rem;
}
body.page-donate .dn-prefix{
padding: .35rem .55rem;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.12);
background: rgba(244,240,232,.03);
color: rgba(244,240,232,.86);
font-weight: 900;
font-size: .86rem;
}
body.page-donate .dn-input{
background: transparent;
border: none;
color: rgba(244,240,232,.92);
box-shadow: none;
}
body.page-donate .dn-input::placeholder{ color: rgba(244,240,232,.55); }
body.page-donate .dn-focus{
display:flex;
flex-wrap: wrap;
gap: 10px;
}
body.page-donate .dn-chip{
padding: .55rem .75rem;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(244,240,232,.03);
color: rgba(244,240,232,.88);
font-weight: 900;
font-size: .92rem;
}
body.page-donate .dn-chip.is-active{
border-color: rgba(201,162,39,.45);
background: rgba(201,162,39,.10);
}
body.page-donate .dn-methods{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
body.page-donate .dn-method{
padding: .70rem .75rem;
border-radius: 18px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(244,240,232,.03);
color: rgba(244,240,232,.90);
font-weight: 900;
display:flex;
gap: 10px;
align-items:center;
justify-content:center;
}
body.page-donate .dn-method.is-active{
border-color: rgba(201,162,39,.45);
background: rgba(201,162,39,.10);
}
body.page-donate .dn-actions{ margin-top: 12px; }
body.page-donate .dn-arrow{ opacity: .85; margin-left: .25rem; }
body.page-donate .dn-safe{
margin-top: 10px;
display:flex;
gap: 8px;
align-items:center;
}
body.page-donate .dn-divider{
height: 1px;
margin: 14px 0;
background: linear-gradient(90deg, rgba(244,240,232,.22), rgba(201,162,39,.30), rgba(244,240,232,0));
}
/* Details boxes */
body.page-donate .dn-detail-grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 10px;
}
body.page-donate .dn-detail{ padding: .85rem .9rem; border-radius: 20px; }
body.page-donate .dn-detail-top{
display:flex;
gap: 10px;
align-items:center;
margin-bottom: 6px;
}
body.page-donate .dn-ph{ color: rgba(244,240,232,.88); font-weight: 900; }
body.page-donate .dn-copy{
margin-left: 8px;
padding: .20rem .55rem;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.16);
background: rgba(244,240,232,.03);
color: rgba(244,240,232,.86);
font-weight: 900;
font-size: .78rem;
}
body.page-donate .dn-copy:hover{
border-color: rgba(201,162,39,.35);
background: rgba(244,240,232,.05);
}
/* Head blocks */
body.page-donate .dn-head{ max-width: 880px; }
body.page-donate .dn-kicker{
letter-spacing: .18em;
text-transform: uppercase;
font-size: .74rem;
color: rgba(244,240,232,.68);
margin-bottom: 12px;
}
body.page-donate .dn-title{ margin: 0 0 10px; }
body.page-donate .dn-lead{ color: rgba(244,240,232,.78); line-height: 1.7; }
body.page-donate .dn-dividerline{
width: 84px;
height: 1px;
margin-top: 12px;
background: linear-gradient(90deg, rgba(201,162,39,.85), rgba(201,162,39,0));
}
/* Lists */
body.page-donate .dn-list{
margin: 10px 0 0;
padding: 0;
list-style: none;
display:grid;
gap: 8px;
color: rgba(244,240,232,.80);
}
body.page-donate .dn-list li{
position: relative;
padding-left: 28px;
}
body.page-donate .dn-list li::before{
content:"✓";
position:absolute;
left:0; top:0;
width: 20px; height: 20px;
border-radius: 10px;
display:grid; place-items:center;
border: 1px solid rgba(244,240,232,.14);
background: rgba(244,240,232,.03);
color: rgba(201,162,39,.92);
font-weight: 950;
}
/* Scenic divider */
body.page-donate .dn-scenic{
display:flex;
align-items:center;
justify-content:center;
gap: 14px;
padding: 10px 0;
border-top: 1px solid rgba(244,240,232,.10);
border-bottom: 1px solid rgba(244,240,232,.10);
background: rgba(244,240,232,.006);
}
body.page-donate .dn-scenic span{
height: 1px;
width: min(220px, 26vw);
background: linear-gradient(90deg, rgba(244,240,232,0), rgba(201,162,39,.35), rgba(244,240,232,0));
}
body.page-donate .dn-scenic i{ color: rgba(201,162,39,.85); }
/* Tiers */
body.page-donate .dn-tiers{
margin-top: 1rem;
padding: 1rem 1.05rem 1.05rem;
display:grid;
grid-template-columns: 1fr;
gap: 14px;
}
body.page-donate .dn-tier-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
body.page-donate .dn-tier{
padding: .85rem .9rem;
border-radius: 18px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(244,240,232,.03);
text-align:left;
color: rgba(244,240,232,.92);
}
body.page-donate .dn-tier strong{ display:block; font-weight: 950; }
body.page-donate .dn-tier:hover{
border-color: rgba(201,162,39,.35);
background: rgba(244,240,232,.05);
}
body.page-donate .dn-tiers-actions{
display:flex;
gap: 10px;
flex-wrap: wrap;
}
/* Downloads */
body.page-donate .dn-download .dn-arrowlink{
display:inline-flex;
gap: 8px;
align-items:center;
font-weight: 900;
opacity: .9;
}
/* FAQ */
body.page-donate .dn-faq details{ padding: .25rem 0; }
body.page-donate .dn-faq summary{
cursor: pointer;
padding: .95rem 1rem;
list-style: none;
}
body.page-donate .dn-faq summary::-webkit-details-marker{ display:none; }
body.page-donate .dn-faq-body{ padding: 0 1rem 1rem; }
/* Mini nav */
body.page-donate .dn-mininav{
position: fixed;
left: 50%;
transform: translateX(-50%) translateY(-8px);
top: 14px;
z-index: 9998;
display:flex;
gap: 10px;
padding: .55rem .65rem;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(6,17,13,.55);
backdrop-filter: blur(var(--dn-blur));
opacity: 0;
pointer-events: none;
transition: opacity .2s var(--dn-ease), transform .2s var(--dn-ease);
}
body.page-donate .dn-mininav.is-show{
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
body.page-donate .dn-mininav a{
text-decoration: none;
padding: .35rem .55rem;
border-radius: 999px;
border: 1px solid transparent;
color: rgba(244,240,232,.88);
font-weight: 900;
font-size: .86rem;
}
body.page-donate .dn-mininav a.is-active{
border-color: rgba(201,162,39,.45);
background: rgba(201,162,39,.10);
}
/* Rail */
body.page-donate .dn-rail{
position: fixed;
right: 14px;
top: 50%;
transform: translateY(-50%);
z-index: 9997;
display:grid;
gap: 10px;
opacity: 0;
pointer-events: none;
transition: opacity .2s var(--dn-ease);
}
body.page-donate .dn-rail.is-show{ opacity: 1; pointer-events:auto; }
body.page-donate .dn-rail-btn{
display:flex;
gap: 10px;
align-items:center;
padding: .60rem .75rem;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.14);
background: rgba(6,17,13,.55);
backdrop-filter: blur(var(--dn-blur));
text-decoration:none;
color: rgba(244,240,232,.90);
font-weight: 900;
}
body.page-donate .dn-rail-btn.is-primary{
border-color: rgba(201,162,39,.45);
background: rgba(201,162,39,.10);
}
body.page-donate .dn-rail-btn span{ font-size: .86rem; }
/* Back to top */
body.page-donate .dn-top{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9998;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(244,240,232,.16);
background: rgba(6,17,13,.55);
backdrop-filter: blur(10px);
color: rgba(244,240,232,.92);
font-weight: 950;
opacity: 0;
pointer-events: none;
transform: translateY(6px);
transition: opacity .2s var(--dn-ease), transform .2s var(--dn-ease), border-color .2s var(--dn-ease), background-color .2s var(--dn-ease);
}
body.page-donate .dn-top.is-show{
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
body.page-donate .dn-top:hover{
border-color: rgba(201,162,39,.35);
background: rgba(6,17,13,.62);
}
/* Responsive */
@media (max-width: 980px){
body.page-donate .section{ padding: 74px 0; }
body.page-donate .dn-proof-strip{ grid-template-columns: 1fr; }
body.page-donate .dn-amounts{ grid-template-columns: 1fr 1fr; }
body.page-donate .dn-tier-grid{ grid-template-columns: 1fr 1fr; }
body.page-donate .dn-detail-grid{ grid-template-columns: 1fr; }
body.page-donate .dn-rail{ display:none; }
}
@media (max-width: 560px){
body.page-donate .dn-methods{ grid-template-columns: 1fr; }
body.page-donate .dn-tier-grid{ grid-template-columns: 1fr; }
}
/* ===== Donate form as its own section layout ===== */
body.page-donate .dn-hero-side{
padding: 1rem 1.05rem 1.05rem;
}
body.page-donate .dn-give{
border-top: 1px solid var(--dn-line);
}
body.page-donate .dn-give-grid{
margin-top: 16px;
display: grid;
grid-template-columns: 1.25fr .9fr;
gap: 14px;
align-items: start;
}
body.page-donate .dn-give-side{
padding: 1rem 1.05rem 1.05rem;
}
@media (max-width: 980px){
body.page-donate .dn-give-grid{
grid-template-columns: 1fr;
}
}
/* ===== Donate HERO content: true full-width (override any global max-width) ===== */
body.page-donate .dn-hero-fluid{
max-width: none !important;
width: 100% !important;
padding-left: clamp(18px, 3vw, 56px) !important;
padding-right: clamp(18px, 3vw, 56px) !important;
position: relative;
z-index: 1; /* keep content above hero background */
}
body.page-donate .dn-hero .hero-grid{
max-width: none !important;
}
/* ===== Opened currency dropdown options match the pill (.dn-prefix) ===== */
/* Solid “pill over deep forest” equivalent of rgba(244,240,232,.03) */
body.page-donate{
--dn-currency-pill-solid: #0D1814; /* looks like the pill bg on your forest theme */
}
/* Best-effort: native