/* ============================================================ DECLARE — Give ("Sow into the river") · GIVE-FIRST Built desktop-first as a true web app: the donation experience IS the hero and lives entirely in the first screen — no scrolling required to give. A two-column composition (left = the soul: headline + globe + live impact; right = the form). The cinematic Eden→river→world story lives BELOW the fold as a short "why". Layers on declare.css + motion.css. Light + dark. Living-water teal by default; gold selectable via Tweaks. ============================================================ */ /* ---------- ACCENT SYSTEM ---------- */ .give-page{ --acc:var(--gold); --acc-bright:var(--goldd); --acc-cta:var(--cta); --acc-cta-text:var(--ctatext); --acc-glow:var(--glow1); --acc-glow2:var(--glow2); --acc-line:color-mix(in srgb, var(--acc) 40%, transparent); --acc-wash:color-mix(in srgb, var(--acc) 13%, transparent); --acc-wash2:color-mix(in srgb, var(--acc) 22%, transparent); --acc-faint:color-mix(in srgb, var(--acc) 7%, transparent); --story:.7; } html[data-theme="dark"] .give-page[data-acc="water"]{ --acc:#5CC8BE; --acc-bright:#8FE0D6; --acc-cta:#56C3B7; --acc-cta-text:#062420; --acc-glow:rgba(92,200,190,.5); --acc-glow2:rgba(180,245,236,.5); } html:not([data-theme="dark"]) .give-page[data-acc="water"]{ --acc:#2C9C92; --acc-bright:#1E7A71; --acc-cta:#2A847B; --acc-cta-text:#F1FAF9; --acc-glow:rgba(44,156,146,.30); --acc-glow2:rgba(180,230,224,.6); } /* ---------- SHARED SITE CHROME, TINTED TO MATCH THE GIVE PAGE ---------- The nav, slide-out menu, and footer come from chrome.css and normally use the gold brand. On /give we retint them to the living-water accent so the whole page is consistent (incl. when the menu is open). Set on so it wins over the html-level theme vars; and because give.css only loads on this page, every OTHER page reverts to the gold brand automatically. */ html[data-theme="dark"] body{ --gold:#5CC8BE; --goldd:#8FE0D6; --cta:#56C3B7; --ctatext:#062420; } html:not([data-theme="dark"]) body{ --gold:#2C9C92; --goldd:#1E7A71; --cta:#2A847B; --ctatext:#F1FAF9; } /* retint the gold-baked glows on the nav to teal */ .nav .brand .bdot{ box-shadow:0 0 14px rgba(92,200,190,.7); } .nav .navcta .begin{ box-shadow:0 10px 24px -10px rgba(92,200,190,.5); } /* ---------- SHELL ---------- */ html,body{ background:var(--bg); } .give-page{ position:relative; min-height:100vh; overflow-x:hidden; } /* ambient glow — contained behind the hero (not a full-screen void) */ .atmos{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } .atmos .halo{ position:absolute; left:50%; top:-26%; width:min(1200px,120%); height:62%; transform:translateX(-50%); background:radial-gradient(40% 42% at 50% 44%, var(--acc-glow2), transparent 60%), radial-gradient(58% 56% at 50% 38%, color-mix(in srgb,var(--acc-glow) 62%, transparent), transparent 66%); opacity:calc(.34 + var(--story)*.5); transition:opacity .8s ease; } .atmos .mist{ position:absolute; inset:-12% -12%; opacity:calc(.06 + var(--story)*.12); background:radial-gradient(26% 18% at 20% 30%, var(--acc-glow), transparent 60%), radial-gradient(24% 16% at 82% 60%, var(--acc-glow2), transparent 62%); filter:blur(12px); animation:gv-mist 32s var(--ease-calm,cubic-bezier(.4,0,.2,1)) infinite; } @keyframes gv-mist{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(0,-2%,0) scale(1.05); } } .atmos .floor{ display:none; } /* ---------- sticky header ---------- */ .gtop{ position:sticky; top:0; z-index:30; padding:12px clamp(16px,4vw,44px); background:color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid var(--line); } .gtop-in{ max-width:1240px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; } .gtop-grp{ display:flex; align-items:center; gap:6px; } .gtop .gt-ttl{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-left:4px; } .cur-pill{ display:flex; align-items:center; gap:6px; padding:9px 13px; border-radius:999px; background:var(--field); border:1px solid var(--line2); color:var(--text); font-size:13px; font-weight:600; cursor:pointer; transition:transform .16s ease, border-color .2s ease; } .cur-pill:active{ transform:scale(.95); } .cur-pill:hover{ border-color:var(--acc-line); } .cur-pill svg{ width:13px; height:13px; opacity:.7; } /* ============================================================ GIVE HERO — fills the first screen; no scroll needed to give ============================================================ */ .give-hero{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; min-height:min(820px, calc(100svh - 59px)); /* top clears the fixed nav (~59px) with breathing room; was 52px max, which let the heading tuck under it */ padding:clamp(88px,10vh,116px) clamp(20px,5vw,48px) clamp(32px,6vh,72px); } .gh-inner{ width:100%; max-width:1180px; display:grid; gap:clamp(28px,4vw,72px); align-items:center; } /* LEFT — the soul */ .gh-soul{ display:flex; flex-direction:column; } .gh-soul .eyebrow{ font-size:11px; letter-spacing:.36em; text-transform:uppercase; color:var(--acc-bright); font-weight:600; } .gh-soul h1{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(40px,5.4vw,72px); line-height:.98; letter-spacing:-.015em; color:var(--text); margin:12px 0 0; text-wrap:balance; } .gh-soul h1 em{ font-style:italic; color:var(--acc-bright); } .gh-soul .lede{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(17px,1.6vw,21px); line-height:1.5; color:var(--text2); max-width:34ch; margin:14px 0 0; } /* live giving counter (cumulative "people receiving the Word") */ .give-total{ margin:13px 0 0; font-size:13.5px; line-height:1.5; color:var(--text2); letter-spacing:.01em; } .give-total[hidden]{ display:none; } .give-total .gt-n{ color:var(--acc-bright); font-weight:700; font-variant-numeric:tabular-nums; } /* globe sits inside the soul, framed by the live amount + impact */ .globe-wrap{ position:relative; width:min(300px,68%); aspect-ratio:1; margin:clamp(14px,2.4vw,26px) 0 0; } .globe-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; } .globe-wrap .g-ring{ position:absolute; inset:6%; border-radius:50%; border:1px solid color-mix(in srgb,var(--acc) 22%, transparent); pointer-events:none; } .globe-wrap .g-core{ position:absolute; inset:0; border-radius:50%; pointer-events:none; background:radial-gradient(circle at 50% 50%, var(--acc-glow), transparent 58%); opacity:.5; } .give-page[data-globe="off"] .globe-wrap{ display:none; } .amount-stage{ margin-top:clamp(14px,2vw,22px); } .amount-stage .amt-big{ display:inline-flex; align-items:flex-start; font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--text); line-height:.9; letter-spacing:-.02em; } .amount-stage .amt-cur{ font-size:clamp(24px,2.4vw,32px); color:var(--acc-bright); margin-top:.16em; margin-right:.05em; font-weight:600; } .amount-stage .amt-val{ font-size:clamp(56px,7vw,88px); font-variant-numeric:tabular-nums; } .amount-stage .amt-per{ font-size:clamp(20px,2.2vw,26px); color:var(--muted); align-self:flex-end; margin-bottom:.5em; margin-left:.08em; } .amount-stage .impact{ margin-top:8px; font-size:clamp(15px,1.6vw,18px); line-height:1.5; color:var(--text2); min-height:2.5em; max-width:32ch; } .amount-stage .impact b{ color:var(--acc-bright); font-weight:600; font-variant-numeric:tabular-nums; } .amount-stage .impact .ic{ display:inline-block; } /* RIGHT — the form */ .gh-form{ display:flex; flex-direction:column; } .lbl-row{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 12px; } .lbl-row .lbl{ color:var(--acc-bright); font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; white-space:nowrap; } .amts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .acard{ position:relative; border-radius:16px; border:1px solid var(--line2); background:var(--surface); box-shadow:var(--card-shadow); padding:14px 15px 13px; text-align:left; cursor:pointer; overflow:hidden; transition:transform .18s var(--ease-soft,cubic-bezier(.2,.7,.2,1)), border-color .25s ease, box-shadow .3s ease, background .25s ease; } .acard:active{ transform:scale(.975); } .acard .av{ display:block; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:24px; color:var(--text); line-height:1; } .acard .ai{ display:block; margin-top:5px; font-size:11.5px; color:var(--muted); letter-spacing:.01em; } .acard .ai b{ color:var(--text2); font-weight:600; font-variant-numeric:tabular-nums; } .acard .seed{ position:absolute; right:11px; top:11px; width:17px; height:17px; opacity:.32; color:var(--acc-bright); transition:opacity .25s ease, transform .3s ease; } .acard .seed svg{ width:100%; height:100%; } .acard .badge{ position:absolute; right:0; top:0; font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--acc-cta-text); background:var(--acc); padding:4px 8px; border-bottom-left-radius:10px; } .acard.on{ border-color:var(--acc); background:var(--acc-wash); box-shadow:0 0 0 1px var(--acc), 0 14px 34px -14px var(--acc-glow), var(--card-shadow); } .acard.on .av{ color:var(--acc-bright); } .acard.on .seed{ opacity:1; transform:scale(1.08); } .acard.on .ai b{ color:var(--acc-bright); } @media (hover:hover){ .acard:hover{ transform:translateY(-2px); border-color:var(--acc-line); } } /* feat ($250) + custom — full width on the 2-col (mobile) grid */ .acard.feat{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; } .acard.feat .av{ font-size:26px; } .acard.feat .ai{ white-space:nowrap; margin-top:0; } .acard.feat .badge{ position:static; border-radius:999px; padding:5px 11px; } .acard.custom{ grid-column:1 / -1; display:flex; align-items:center; gap:10px; cursor:text; padding:15px 16px; } .acard.custom .cc{ font-family:'Cormorant Garamond',serif; font-size:24px; color:var(--acc-bright); font-weight:600; } .acard.custom input{ flex:1; min-width:0; border:0; background:transparent; outline:none; font-family:'Cormorant Garamond',serif; font-size:24px; font-weight:600; color:var(--text); } .acard.custom input::placeholder{ color:var(--muted); font-size:17px; font-style:italic; } .acard.custom.on{ background:var(--acc-wash); } /* option rows */ .opt-card{ margin-top:12px; border-radius:18px; background:var(--surface); box-shadow:var(--card-shadow); overflow:hidden; } .opt-toggle{ display:flex; align-items:center; gap:13px; padding:15px 16px; } .opt-toggle .leaf{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:var(--acc-wash); color:var(--acc-bright); } .opt-toggle .leaf svg{ width:21px; height:21px; } .opt-toggle .tx{ flex:1; min-width:0; } .opt-toggle .tx .t1{ font-size:15px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; } .opt-toggle .tx .t2{ font-size:12.5px; color:var(--muted); margin-top:2px; } .sw{ flex:0 0 auto; width:50px; height:30px; border-radius:999px; border:0; background:var(--line2); position:relative; cursor:pointer; transition:background .25s ease; padding:0; } .sw i{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .25s var(--ease-soft,cubic-bezier(.2,.7,.2,1)); } .sw[data-on="1"]{ background:var(--acc-cta); } .sw[data-on="1"] i{ transform:translateX(20px); } .recur-detail{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease-soft,cubic-bezier(.2,.7,.2,1)); } .recur-detail > .rd-in{ overflow:hidden; min-height:0; } .opt-card.open .recur-detail{ grid-template-rows:1fr; } .row{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-top:1px solid var(--line); cursor:pointer; transition:background .2s ease; } .row:active{ background:var(--acc-faint); } @media (hover:hover){ .row:hover{ background:var(--acc-faint); } } .row .rk{ font-size:14px; color:var(--text2); } .row .rval{ margin-left:auto; font-size:14px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; } .row .rval svg{ width:16px; height:16px; color:var(--muted); } .wellnote{ padding:12px 16px 14px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:flex-start; } .wellnote svg{ width:15px; height:15px; color:var(--acc-bright); flex:0 0 auto; margin-top:2px; } .wellnote span{ font-size:12.5px; line-height:1.55; color:var(--text2); } .wellnote em{ color:var(--acc-bright); font-style:normal; font-weight:600; } .pay-row{ display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer; } .pay-row .pm-logo{ flex:0 0 auto; width:46px; height:31px; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.18); color:#1a1a1a; } .pay-row .pm-logo svg{ height:18px; width:auto; } .pay-row .pm-tx{ flex:1; min-width:0; } .pay-row .pm-tx .t1{ font-size:14.5px; font-weight:600; color:var(--text); } .pay-row .pm-tx .t2{ font-size:12px; color:var(--muted); margin-top:1px; } .pay-row .chev{ width:18px; height:18px; color:var(--muted); } /* the giving CTA */ .give-btn{ width:100%; border:0; border-radius:16px; padding:17px 18px; background:var(--acc-cta); color:var(--acc-cta-text); font-family:inherit; font-size:16px; font-weight:600; letter-spacing:.01em; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 16px 38px -12px var(--acc-glow); transition:transform .16s ease, filter .2s ease, box-shadow .3s ease; } .give-btn:active{ transform:translateY(1px) scale(.99); } .give-btn.busy{ opacity:.6; cursor:default; } .give-btn:hover{ filter:brightness(1.05); } .give-btn svg{ width:18px; height:18px; } .give-btn-inline{ margin-top:14px; } @media (prefers-reduced-motion:no-preference){ .give-btn-inline{ animation:gv-halo 4.8s var(--ease-calm,cubic-bezier(.4,0,.2,1)) infinite; } } @keyframes gv-halo{ 0%,100%{ box-shadow:0 16px 38px -14px var(--acc-glow); } 50%{ box-shadow:0 18px 46px -12px var(--acc-glow), 0 0 30px -4px var(--acc-glow); } } .secure{ display:flex; align-items:center; justify-content:center; gap:7px; margin:14px 0 2px; font-size:11.5px; color:var(--muted); } .secure svg{ width:13px; height:13px; color:var(--acc-bright); } .give-fine{ text-align:center; font-size:11px; line-height:1.5; color:var(--muted); margin:9px auto 2px; max-width:36ch; } .give-fine a{ color:var(--acc-bright); font-weight:600; } /* ============================================================ WHY — short supporting story below the fold (optional scroll) ============================================================ */ .why{ position:relative; z-index:2; max-width:1140px; margin:0 auto; padding:clamp(40px,7vh,96px) clamp(20px,5vw,48px) clamp(56px,9vh,120px); } .why-hd{ text-align:center; max-width:640px; margin:0 auto clamp(28px,4vw,48px); } .why-hd .bnum{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--acc-bright); font-weight:600; } .why-hd h2{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(28px,4vw,44px); line-height:1.06; color:var(--text); margin-top:9px; text-wrap:balance; } .why-grid{ display:grid; grid-template-columns:1fr; gap:clamp(16px,2vw,22px); } .why-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--card-shadow); padding:clamp(22px,2.4vw,30px); } .why-card .wc-num{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--acc-bright); font-weight:600; } .why-card h3{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(22px,2.4vw,28px); line-height:1.1; color:var(--text); margin-top:10px; text-wrap:balance; } .why-card .vline{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15.5px; line-height:1.5; color:var(--text2); margin-top:14px; } .why-card .vref{ display:block; margin-top:12px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc-bright); font-weight:600; } .why-card .vref::before{ content:""; display:inline-block; width:18px; height:1px; vertical-align:middle; margin-right:8px; background:var(--acc); opacity:.7; } .why-foot{ text-align:center; margin-top:clamp(28px,4vw,44px); } .why-foot p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(17px,2vw,22px); line-height:1.5; color:var(--text); max-width:30ch; margin:0 auto 18px; } .why-foot .give-up{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:14px; background:transparent; border:1px solid var(--acc-line); color:var(--acc-bright); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s ease, transform .16s ease; } .why-foot .give-up:hover{ background:var(--acc-faint); } .why-foot .give-up:active{ transform:scale(.97); } .why-foot .give-up svg{ width:15px; height:15px; } /* reveal — scroll-LINKED motion (progress tracks scroll position, Tempo-style). give.js sets --p (0→1) on each element as it enters the viewport; everything else is derived from it, so the cards rise/fade/sharpen tied to the scroll. */ @media (prefers-reduced-motion:no-preference){ .rv{ --p:0; opacity:var(--p); transform:translateY(calc((1 - var(--p)) * 56px)) scale(calc(.955 + var(--p) * .045)); filter:blur(calc((1 - var(--p)) * 7px)); will-change:opacity, transform, filter; } } @media (prefers-reduced-motion:reduce){ .rv{ opacity:1; transform:none; filter:none; } } /* why cards — lift on hover (border + glow only, so it never fights the scroll animation's transform) */ @media (hover:hover){ .why-card{ transition:border-color .3s ease, box-shadow .35s ease; } .why-card:hover{ border-color:var(--acc-line); box-shadow:var(--card-shadow), 0 24px 50px -22px rgba(0,0,0,.5), 0 0 46px -18px var(--acc-glow); } } /* ============================================================ DOCK CTA — fixed bottom on touch / mobile (persistent give) ============================================================ */ .dock{ position:fixed; left:0; right:0; bottom:0; z-index:28; padding:13px clamp(16px,4vw,40px) max(14px,calc(env(safe-area-inset-bottom) + 7px)); background:linear-gradient(to top, var(--screen) 62%, transparent); transform:translateY(140%); opacity:0; transition:transform .42s var(--ease-reveal,cubic-bezier(.16,1,.3,1)), opacity .35s ease; pointer-events:none; } .dock .give-btn{ max-width:520px; margin:0 auto; } .dock.show{ transform:none; opacity:1; pointer-events:auto; } /* ============================================================ BOTTOM SHEETS (mobile/tablet) → CENTERED MODALS (desktop) ============================================================ */ .gscrim{ position:fixed; inset:0; z-index:40; background:rgba(6,12,9,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .32s ease; } html:not([data-theme="dark"]) .gscrim{ background:rgba(34,56,46,.34); } .gscrim.open{ opacity:1; pointer-events:auto; } .sheet{ position:fixed; left:0; right:0; bottom:0; z-index:41; background:var(--screen); border-radius:26px 26px 0 0; box-shadow:0 -24px 70px -20px rgba(0,0,0,.55); transform:translateY(101%); transition:transform .42s var(--ease-reveal,cubic-bezier(.16,1,.3,1)); max-height:86vh; display:flex; flex-direction:column; padding-bottom:max(14px,env(safe-area-inset-bottom)); } .sheet.open{ transform:none; } .sheet .grab{ width:42px; height:5px; border-radius:999px; background:var(--line2); margin:11px auto 0; flex:0 0 auto; } .sheet .sh-hd{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px 12px; flex:0 0 auto; } .sheet .sh-hd h3{ font-size:16px; font-weight:600; color:var(--text); } .sheet .sh-hd .done{ width:34px; height:34px; border-radius:50%; border:0; background:var(--acc-cta); color:var(--acc-cta-text); display:flex; align-items:center; justify-content:center; cursor:pointer; } .sheet .sh-hd .done svg{ width:17px; height:17px; } .sheet .sh-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px 14px 10px; scrollbar-width:none; } .sheet .sh-body::-webkit-scrollbar{ display:none; } .opt{ display:flex; align-items:center; gap:13px; padding:15px 14px; border-radius:14px; cursor:pointer; transition:background .18s ease; } .opt:active{ background:var(--acc-faint); } @media (hover:hover){ .opt:hover{ background:var(--acc-faint); } } .opt .ot{ flex:1; min-width:0; display:flex; flex-direction:column; } .opt .ot .o1{ font-size:15.5px; color:var(--text); font-weight:500; } .opt .ot .o2{ font-size:12.5px; color:var(--muted); margin-top:2px; } .opt .code{ font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.04em; } .opt .check{ width:22px; height:22px; color:var(--acc-bright); opacity:0; transition:opacity .15s ease; } .opt.sel .check{ opacity:1; } .opt.sel .o1{ color:var(--acc-bright); font-weight:600; } .opt + .opt{ border-top:1px solid var(--line); border-radius:0; } .opt .sym{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; background:var(--field); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--acc-bright); font-weight:600; } .opt .pm-logo{ flex:0 0 auto; width:46px; height:31px; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.16); color:#1a1a1a; } .opt .pm-logo svg{ height:18px; width:auto; } .opt.add .sym{ background:var(--acc-wash); color:var(--acc-bright); } .opt.add .o1{ color:var(--acc-bright); font-weight:600; } .cal{ padding:4px 8px 8px; } .cal-hd{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px 14px; } .cal-hd .mo{ font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; color:var(--text); } .cal-hd .nav{ display:flex; gap:6px; } .cal-hd .nav button{ width:34px; height:34px; border-radius:10px; border:0; background:var(--field); color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; } .cal-hd .nav button:active{ transform:scale(.92); } .cal-hd .nav svg{ width:16px; height:16px; } .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; } .cal-grid .dow{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); text-align:center; padding:6px 0 10px; font-weight:600; } .cal-grid .day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text); border-radius:50%; cursor:pointer; transition:background .15s ease, color .15s ease; } .cal-grid .day.muted{ color:var(--muted); opacity:.4; pointer-events:none; } .cal-grid .day:active{ background:var(--acc-faint); } @media (hover:hover){ .cal-grid .day:not(.muted):hover{ background:var(--acc-faint); } } .cal-grid .day.today{ box-shadow:inset 0 0 0 1px var(--acc-line); } .cal-grid .day.sel{ background:var(--acc-cta); color:var(--acc-cta-text); font-weight:600; } .cal-foot{ text-align:center; font-size:13.5px; color:var(--text2); padding:16px 0 6px; } .cal-foot b{ color:var(--acc-bright); font-weight:600; } /* ============================================================ CONFIRMATION ============================================================ */ .confirm{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:34px 30px; background:var(--bgfield); opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s ease; } .confirm.show{ opacity:1; visibility:visible; } .confirm .ripple{ position:absolute; top:34%; left:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 0 var(--acc-glow); } .confirm.show .ripple{ animation:gv-ripple 2.6s var(--ease-reveal,cubic-bezier(.16,1,.3,1)) .15s; } @keyframes gv-ripple{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 50%, transparent); opacity:.9; } 100%{ box-shadow:0 0 0 460px transparent; opacity:0; } } .confirm .seal{ width:78px; height:78px; border-radius:50%; background:radial-gradient(circle at 50% 38%, var(--acc), color-mix(in srgb,var(--acc) 60%, #6b5418)); display:flex; align-items:center; justify-content:center; color:var(--acc-cta-text); box-shadow:0 0 0 9px var(--acc-faint), 0 18px 40px -10px var(--acc-glow); margin-bottom:24px; } .confirm .seal svg{ width:36px; height:36px; } .confirm h2{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:clamp(33px,5vw,46px); line-height:1.05; color:var(--text); text-wrap:balance; } .confirm .csum{ font-size:clamp(15px,1.7vw,18px); line-height:1.6; color:var(--text2); margin-top:14px; max-width:30ch; } .confirm .csum b{ color:var(--acc-bright); font-weight:600; } .confirm .cverse{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(16px,2vw,20px); line-height:1.5; color:var(--text2); margin-top:24px; max-width:30ch; } /* thank-you: soft account nudge (guests) + manage-giving (recurring) */ .confirm .c-account{ margin-top:20px; font-size:13.5px; color:var(--text2); text-decoration:none; } .confirm .c-account[hidden]{ display:none; } .confirm .c-account b{ color:var(--acc-bright); font-weight:600; } .confirm .c-account:hover b{ text-decoration:underline; } .confirm .c-manage{ margin-top:11px; font-size:12.5px; color:var(--muted); text-decoration:none; } .confirm .c-manage[hidden]{ display:none; } .confirm .c-manage:hover{ color:var(--text); text-decoration:underline; } .confirm .cbtns{ display:flex; gap:10px; margin-top:30px; } .confirm .cbtns button{ border-radius:14px; padding:14px 22px; font-family:inherit; font-size:14.5px; font-weight:600; cursor:pointer; border:0; transition:transform .16s ease; } .confirm .cbtns button:active{ transform:scale(.96); } .confirm .cbtns .c-share{ background:var(--acc-cta); color:var(--acc-cta-text); display:flex; align-items:center; gap:8px; } .confirm .cbtns .c-share svg{ width:16px; height:16px; } .confirm .cbtns .c-done{ background:transparent; color:var(--text); border:1px solid var(--line2); } /* ============================================================ TWEAKS PANEL ============================================================ */ .twk{ position:fixed; right:16px; bottom:16px; z-index:2147483646; width:268px; max-height:calc(100vh - 32px); display:none; flex-direction:column; transform:scale(var(--dc-inv-zoom,1)); transform-origin:bottom right; background:rgba(20,33,26,.82); color:#F3EFE6; -webkit-backdrop-filter:blur(24px) saturate(150%); backdrop-filter:blur(24px) saturate(150%); border:.5px solid rgba(255,255,255,.14); border-radius:16px; box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 16px 50px rgba(0,0,0,.5); font:12px/1.4 'DM Sans',ui-sans-serif,system-ui,sans-serif; overflow:hidden; } html:not([data-theme="dark"]) .twk{ background:rgba(252,249,243,.86); color:#22382E; border-color:rgba(34,56,46,.1); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 16px 50px rgba(34,56,46,.22); } .twk.open{ display:flex; } .twk-hd{ display:flex; align-items:center; justify-content:space-between; padding:12px 10px 11px 15px; cursor:move; user-select:none; } .twk-hd b{ font-size:12.5px; font-weight:600; letter-spacing:.02em; } .twk-hd .twk-x{ border:0; background:transparent; color:currentColor; opacity:.5; width:24px; height:24px; border-radius:7px; cursor:pointer; font-size:14px; } .twk-hd .twk-x:hover{ opacity:1; background:rgba(127,127,127,.18); } .twk-body{ padding:2px 15px 16px; display:flex; flex-direction:column; gap:13px; overflow-y:auto; scrollbar-width:thin; } .twk-sect{ font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.5; padding-top:6px; } .twk-sect:first-child{ padding-top:0; } .twk-row{ display:flex; flex-direction:column; gap:7px; } .twk-lbl{ display:flex; justify-content:space-between; align-items:baseline; } .twk-lbl span:first-child{ font-weight:500; opacity:.9; } .twk-lbl .twk-val{ opacity:.55; font-variant-numeric:tabular-nums; font-size:11px; } .twk-row-h{ flex-direction:row; align-items:center; justify-content:space-between; } .twk-seg{ position:relative; display:flex; padding:2px; border-radius:9px; background:rgba(127,127,127,.18); } .twk-seg .seg-thumb{ position:absolute; top:2px; bottom:2px; border-radius:7px; background:var(--acc); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .18s var(--ease-soft,cubic-bezier(.2,.7,.2,1)), width .18s; } .twk-seg button{ position:relative; z-index:1; flex:1; border:0; background:transparent; color:currentColor; font:inherit; font-weight:500; min-height:25px; border-radius:7px; cursor:pointer; padding:5px 4px; opacity:.7; transition:opacity .18s ease, color .18s ease; } .twk-seg button[aria-checked="1"]{ opacity:1; color:var(--acc-cta-text); font-weight:600; } .twk-slider{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px; background:rgba(127,127,127,.28); outline:none; } .twk-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; border-radius:50%; background:var(--acc); box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; } .twk-slider::-moz-range-thumb{ width:15px; height:15px; border:0; border-radius:50%; background:var(--acc); box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer; } .twk-tog{ position:relative; width:34px; height:19px; border:0; border-radius:999px; background:rgba(127,127,127,.3); cursor:pointer; padding:0; transition:background .18s ease; } .twk-tog[data-on="1"]{ background:var(--acc-cta); } .twk-tog i{ position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .18s ease; } .twk-tog[data-on="1"] i{ transform:translateX(15px); } /* bignum amount-layout variant */ .give-page[data-layout="bignum"] .amount-stage .amt-val{ font-size:clamp(72px,9vw,110px); } .give-page[data-layout="bignum"] .amts{ display:flex; gap:9px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; grid-template-columns:none; scroll-snap-type:x mandatory; } .give-page[data-layout="bignum"] .amts::-webkit-scrollbar{ display:none; } .give-page[data-layout="bignum"] .acard{ flex:0 0 auto; scroll-snap-align:start; padding:11px 16px; min-width:74px; text-align:center; } .give-page[data-layout="bignum"] .acard .av{ font-size:20px; } .give-page[data-layout="bignum"] .acard .ai,.give-page[data-layout="bignum"] .acard .seed,.give-page[data-layout="bignum"] .acard .badge{ display:none; } .give-page[data-layout="bignum"] .acard.feat{ display:flex; flex-direction:column; align-items:center; min-width:88px; grid-column:auto; } .give-page[data-layout="bignum"] .acard.custom{ min-width:160px; grid-column:auto; } .give-page[data-layout="bignum"] .acard.custom input{ font-size:18px; } .give-page[data-layout="bignum"] .acard.custom input::placeholder{ font-size:14px; } /* ============================================================ RESPONSIVE ============================================================ */ /* phone — single column, give CTA via fixed dock */ @media (max-width:767px){ .gh-inner{ grid-template-columns:1fr; } .gh-soul{ align-items:center; text-align:center; } .gh-soul .lede{ margin-left:auto; margin-right:auto; } .globe-wrap{ width:min(240px,62%); margin-left:auto; margin-right:auto; } .amount-stage{ text-align:center; } .amount-stage .impact{ margin-left:auto; margin-right:auto; } .gh-form{ margin-top:26px; } .why-grid{ gap:14px; } .give-hero{ min-height:auto; padding-top:108px; padding-bottom:124px; } /* clear the fixed nav (top) + dock (bottom) */ } /* tablet / iPad — single roomy column, 3-up why, NO dock (inline CTA visible) */ @media (min-width:768px) and (max-width:1023px){ .dock{ display:none; } .gh-inner{ grid-template-columns:1fr; max-width:620px; gap:6px; } .gh-soul{ align-items:center; text-align:center; } .gh-soul .lede{ margin-left:auto; margin-right:auto; } .globe-wrap{ width:min(300px,52%); margin-left:auto; margin-right:auto; } .amount-stage{ text-align:center; margin-bottom:8px; } .amount-stage .impact{ margin-left:auto; margin-right:auto; } .gh-form{ margin-top:22px; } .why-grid{ grid-template-columns:repeat(3,1fr); } } /* desktop — two columns, both above the fold, modal sheets, no dock */ @media (min-width:1024px){ .dock{ display:none; } .gh-inner{ grid-template-columns:1.02fr 1.1fr; align-items:center; } .gh-soul{ padding-right:clamp(8px,2vw,28px); } .amts{ grid-template-columns:repeat(3,1fr); } .acard.feat{ grid-column:auto; flex-direction:column; align-items:flex-start; } .acard.feat .av{ font-size:24px; } .acard.feat .badge{ position:absolute; border-radius:0 0 0 10px; padding:4px 8px; } .acard.feat .ai{ margin-top:5px; } .acard.custom{ grid-column:span 2; } .why-grid{ grid-template-columns:repeat(3,1fr); } .sheet{ left:50%; right:auto; bottom:auto; top:50%; width:min(440px,92vw); transform:translate(-50%,-48%) scale(.96); border-radius:22px; box-shadow:0 40px 120px -30px rgba(0,0,0,.6); max-height:80vh; opacity:0; transition:transform .34s var(--ease-reveal,cubic-bezier(.16,1,.3,1)), opacity .26s ease; padding-bottom:14px; } .sheet.open{ transform:translate(-50%,-50%) scale(1); opacity:1; } .sheet .grab{ display:none; } .sheet .sh-hd{ padding-top:18px; } } @media (min-width:1440px){ .gh-inner{ max-width:1240px; } .why{ max-width:1240px; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion:reduce){ .rv{ opacity:1 !important; transform:none !important; filter:none !important; } .atmos .mist,.give-btn-inline,.dock.show .give-btn{ animation:none !important; } .confirm .ripple{ display:none; } }