/* ========================================================================= WHY NOT BLESS — design system One system, themed via data-theme on . Brand tokens stay constant. ========================================================================= */ :root{ /* --- BRAND — "Sapphire & Cream" (blue default) --- */ --brand:#2E5EA8; /* sapphire blue */ --brand-bright:#5B8AD1; /* sky blue — glows / highlights */ --brand-600:#244C8A; /* hover / press */ --brand-deep:#1E4270; /* blue that passes contrast as text on cream */ --brand-rgb:46,94,168; --gray-brand:#5B6472; /* cool slate */ --ink:#1B2331; --muted:#5E6774; --line:#E4E2DA; --paper:#FFFEFB; --wash:#EEEBDF; /* warm cream for alternating sections */ --gold:#D9A441; /* warm gold — secondary accent */ /* bloom mark shape — used by .wm-mark via CSS mask (color follows --accent) */ --bloom:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='black'%3E%3Cellipse cx='24' cy='12' rx='6.5' ry='11'/%3E%3Cellipse cx='24' cy='12' rx='6.5' ry='11' transform='rotate(60 24 24)'/%3E%3Cellipse cx='24' cy='12' rx='6.5' ry='11' transform='rotate(120 24 24)'/%3E%3Cellipse cx='24' cy='12' rx='6.5' ry='11' transform='rotate(180 24 24)'/%3E%3Cellipse cx='24' cy='12' rx='6.5' ry='11' transform='rotate(240 24 24)'/%3E%3Cellipse cx='24' cy='12' rx='6.5' ry='11' transform='rotate(300 24 24)'/%3E%3Ccircle cx='24' cy='24' r='7'/%3E%3C/g%3E%3C/svg%3E"); /* --- Fluid type scale --- */ --step--1:clamp(.82rem,.78rem + .2vw,.94rem); --step-0: clamp(1rem,.96rem + .22vw,1.13rem); --step-1: clamp(1.18rem,1.08rem + .5vw,1.5rem); --step-2: clamp(1.5rem,1.28rem + 1.05vw,2.15rem); --step-3: clamp(2rem,1.55rem + 2.1vw,3.1rem); --step-4: clamp(2.6rem,1.85rem + 3.6vw,4.8rem); --container:1200px; --gutter:clamp(20px,5vw,64px); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); /* --- Fonts --- */ --font-display:'Fraunces',Georgia,'Times New Roman',serif; --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-script:'Caveat',cursive; /* --- THEMEABLE (default = Light / Clean) --- */ --bg:#F5F3EC; --surface:var(--paper); --text:var(--ink); --text-soft:var(--muted); --hair:var(--line); --accent:var(--brand); --accent-ink:var(--brand-deep); --on-brand:#FBFCFF; /* readable text/ink on a brand-colored fill */ --radius:20px; --radius-sm:12px; --radius-pill:999px; --shadow:0 1px 2px rgba(23,39,43,.05),0 18px 44px -20px rgba(23,39,43,.22); --shadow-brand:0 18px 50px -18px rgba(var(--brand-rgb),.5); --display-weight:600; } /* ---- "Cornflower Sky" — friendly, bright, approachable ---- */ [data-theme="sky"]{ --brand:#4666CC; --brand-bright:#7E9BE8; --brand-600:#3A55AC; --brand-deep:#2E458F; --brand-rgb:70,102,204; --gold:#E0A83C; --on-brand:#FFFFFF; --bg:#F1F4FC; --surface:#FFFFFF; --paper:#FFFFFF; --text:#1E2740; --text-soft:#5A6484; --hair:#E1E6F3; --wash:#E8EDFA; --accent:var(--brand); --accent-ink:var(--brand-deep); } /* ---- "Ocean & Sand" — grounded, nautical, warm canvas ---- */ [data-theme="ocean"]{ --brand:#235C90; --brand-bright:#5A87B4; --brand-600:#1C4A76; --brand-deep:#173E63; --brand-rgb:35,92,144; --gold:#C98A3E; --on-brand:#FBFCFF; --bg:#F4F1EA; --surface:#FFFDF8; --paper:#FFFDF8; --text:#1D2A35; --text-soft:#5C6874; --hair:#E6E1D5; --wash:#EDE7D9; --accent:var(--brand); --accent-ink:var(--brand-deep); } /* ---- "Midnight" — deep navy dark mode ---- */ [data-theme="midnight"]{ --brand:#5B8AD6; --brand-bright:#84A8E4; --brand-600:#476FB0; --brand-deep:#84A8E4; --brand-rgb:91,138,214; --gold:#E0B15A; --on-brand:#0F1826; --bg:#0F1826; --surface:#182338; --paper:#182338; --text:#E9EEF7; --text-soft:#9AA7BD; --hair:rgba(233,238,247,.14); --wash:#0C1420; --accent:var(--brand); --accent-ink:var(--brand-bright); --shadow:0 20px 50px -22px rgba(0,0,0,.7); } /* ---- Light & airy trio ---- */ /* "Powder & Cloud" — soft, minimal, breathable white ---- */ [data-theme="powder"]{ --brand:#5A82C6; --brand-bright:#93B2E0; --brand-600:#476CAC; --brand-deep:#35558F; --brand-rgb:90,130,198; --gold:#E7B968; --on-brand:#FFFFFF; --bg:#FCFDFF; --surface:#FFFFFF; --paper:#FFFFFF; --text:#24334C; --text-soft:#6C7B93; --hair:#E8EDF6; --wash:#F2F5FB; --accent:var(--brand); --accent-ink:var(--brand-deep); } /* "Harbor Light" — bright, breezy, coastal azure ---- */ [data-theme="harbor"]{ --brand:#2C7BC7; --brand-bright:#6BA6DE; --brand-600:#2367AC; --brand-deep:#1C5490; --brand-rgb:44,123,199; --gold:#ECBF63; --on-brand:#FFFFFF; --bg:#EFF7FD; --surface:#FFFFFF; --paper:#FFFFFF; --text:#15303F; --text-soft:#587082; --hair:#DBE9F4; --wash:#E4F1FA; --accent:var(--brand); --accent-ink:var(--brand-deep); } /* "Periwinkle Mist" — soft, dreamy periwinkle ---- */ [data-theme="periwinkle"]{ --brand:#6A79D4; --brand-bright:#9BA6E6; --brand-600:#5361B8; --brand-deep:#414EA2; --brand-rgb:106,121,212; --gold:#E9B36A; --on-brand:#FFFFFF; --bg:#F6F7FE; --surface:#FFFFFF; --paper:#FFFFFF; --text:#2A3050; --text-soft:#6C7194; --hair:#E6E8F7; --wash:#EEF0FB; --accent:var(--brand); --accent-ink:var(--brand-deep); } /* ---------- reset / base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--font-body);font-size:var(--step-0);line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background .4s var(--ease),color .4s var(--ease); } /* site-wide sky backdrop: fixed photo + soft white veil for legibility */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(180deg,rgba(251,253,255,.38),rgba(251,253,255,.55)), url("../assets/img/sky-rooftops.jpg") center 14%/cover no-repeat} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);line-height:1.08; margin:0;letter-spacing:-.015em} h1{font-size:var(--step-4)} h2{font-size:var(--step-3)} h3{font-size:var(--step-2)} p{margin:0} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} section{padding:clamp(64px,9vw,128px) 0} :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px} /* ---------- helpers ---------- */ .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body); font-weight:700;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase; color:var(--accent-ink)} .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px} .script{font-family:var(--font-script);color:var(--accent-ink);font-weight:700; font-size:1.5em;line-height:1;display:inline-block} .lede{font-size:var(--step-1);color:var(--text-soft);max-width:60ch;line-height:1.6} .center{text-align:center;margin-inline:auto} .center .lede,.center .eyebrow{margin-inline:auto} .text-brand{color:var(--accent-ink)} .wash{background:transparent} /* sections flow over the continuous sky backdrop */ /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--font-body);font-weight:700;font-size:var(--step-0); padding:.95rem 1.7rem;border-radius:var(--radius-pill);border:2px solid transparent; cursor:pointer;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out), background .2s,color .2s;line-height:1} .btn:hover{transform:translateY(-3px)} .btn-primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-brand)} .btn-primary:hover{background:var(--brand-600)} .btn-ghost{background:transparent;color:var(--text);border-color:var(--hair)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)} .btn-lg{padding:1.15rem 2.2rem;font-size:var(--step-1)} .btn svg{width:1.1em;height:1.1em} /* ---------- scroll progress ---------- */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120; background:linear-gradient(90deg,var(--brand),var(--brand-bright))} /* ---------- nav ---------- */ .nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .35s var(--ease), box-shadow .35s var(--ease),padding .35s var(--ease);padding:18px 0} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem} .nav.scrolled{background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair);padding:10px 0} .nav.hide{transform:translateY(-104%)} .brand-logo{height:58px;width:auto;transition:height .35s var(--ease)} .nav.scrolled .brand-logo{height:46px} .nav-links{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.4rem);font-weight:600} .nav-links a{color:var(--text-soft);position:relative;padding:.3rem 0;transition:color .2s} .nav-links a:hover,.nav-links a.active{color:var(--text)} .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0; background:var(--accent);transition:width .3s var(--ease)} .nav-links a:not(.btn):hover::after,.nav-links a.active::after{width:100%} .nav-links .btn{padding:.6rem 1.3rem} .nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--on-brand)} .nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px} .nav-toggle span{display:block;width:26px;height:2px;background:var(--text);margin:5px 0; border-radius:2px;transition:.3s var(--ease)} /* ---------- typographic wordmark (replaces the old logo image) ---------- */ .wordmark{display:inline-flex;align-items:center;gap:.55rem;line-height:1;color:var(--text)} .wm-mark{width:30px;height:30px;flex:0 0 auto;background:var(--accent); -webkit-mask:var(--bloom) center/contain no-repeat;mask:var(--bloom) center/contain no-repeat; transition:width .35s var(--ease),height .35s var(--ease)} .wm-text{font-family:var(--font-display);font-weight:600;font-size:1.5rem;letter-spacing:-.02em; color:currentColor;white-space:nowrap} .wm-q{color:var(--accent-ink)} .nav.scrolled .wm-mark{width:26px;height:26px} .nav.scrolled .wm-text{font-size:1.32rem} .footer .wordmark{color:#EAF1FB} .footer .wm-text{font-size:1.7rem} .footer .wm-q{color:var(--brand-bright)} /* ---------- hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center; padding-top:120px;padding-bottom:60px;overflow:hidden} .hero-bg{display:none} /* the site-wide sky backdrop shows through instead */ .hero-orbs{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .orb{position:absolute;border-radius:50%;filter:blur(6px);opacity:.5; background:radial-gradient(circle at 30% 30%,var(--brand-bright),rgba(var(--brand-rgb),0) 70%)} .orb.o1{width:190px;height:190px;top:14%;left:8%;animation:float 13s var(--ease) infinite} .orb.o2{width:120px;height:120px;top:62%;left:80%;animation:float 17s var(--ease) infinite reverse} .orb.o3{width:80px;height:80px;top:30%;left:66%;animation:float 11s var(--ease) infinite} @keyframes float{50%{transform:translateY(-38px) translateX(16px)}} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem); align-items:center} .hero h1{margin:.5rem 0 1.2rem} .hero h1 .accent{color:var(--accent-ink);position:relative;white-space:nowrap} .hero .lede{margin-bottom:2rem} .hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.2rem} .hero-trust{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center; font-size:var(--step--1);color:var(--text-soft)} .hero-trust b{color:var(--text);font-weight:700} .hero-trust .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block} /* hero art — the pinwheel bloom recreated from the logo mark */ .bloom{aspect-ratio:1;width:100%;max-width:460px;margin-inline:auto;position:relative; display:grid;place-items:center} .bloom-ring{position:absolute;inset:0;border-radius:50%; border:2px dashed rgba(var(--brand-rgb),.35);animation:spin 60s linear infinite} .bloom-ring.r2{inset:12%;border-style:solid;border-color:rgba(var(--brand-rgb),.14); animation-duration:44s;animation-direction:reverse} @keyframes spin{to{transform:rotate(360deg)}} .bloom-card{position:relative;background:var(--surface);border:1px solid var(--hair); border-radius:26px;box-shadow:var(--shadow); padding:clamp(2.2rem,4vw,2.8rem) clamp(1.4rem,3vw,2.2rem); width:78%;text-align:center} .bloom-card .q{font-family:var(--font-display);font-size:clamp(3.4rem,8vw,5rem); color:var(--accent);line-height:.8;font-weight:600} .bloom-card p{font-family:var(--font-script);font-size:1.55rem;color:var(--text);margin-top:.4rem} .bloom-chip{position:absolute;background:var(--surface);border:1px solid var(--hair); box-shadow:var(--shadow);border-radius:var(--radius-pill);padding:.5rem .95rem; font-size:var(--step--1);font-weight:700;display:flex;align-items:center;gap:.45rem; white-space:nowrap} .bloom-chip svg{width:1.1em;height:1.1em;color:var(--accent-ink)} /* chips straddle the card's top/bottom edges so they touch the center card */ .bloom-chip.c1{top:-18px;right:18px} .bloom-chip.c2{bottom:-18px;left:18px} /* ---------- trust bar ---------- */ /* ---------- scroll-zoom hero (Sundance Square) ---------- */ .hero-zoom{position:relative;height:230vh} /* tall = scrub runway */ .hz-sticky{position:sticky;top:0;height:100svh;overflow:hidden; display:flex;align-items:center} .hz-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 14%; /* sky and clouds only — rooftops cropped out */ transform-origin:50% 38%; /* zoom drifts gently into the clouds */ will-change:transform;z-index:0} .hz-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background: linear-gradient(180deg,rgba(251,253,255,.85) 0%,rgba(251,253,255,.45) 22%, rgba(251,253,255,.18) 45%,rgba(251,253,255,.05) 70%,rgba(251,253,255,.4) 100%)} .hz-copy{position:relative;z-index:2;width:100%;will-change:transform,opacity} .hz-copy .hero-copy{max-width:800px} .hz-copy .lede{margin-bottom:1.8rem} .hz-fade{position:absolute;inset:0;z-index:3;pointer-events:none; background:var(--bg);opacity:0} /* bleeds into next section */ @media (prefers-reduced-motion:reduce){ .hero-zoom{height:auto} .hz-sticky{position:relative;height:100svh} .hz-img{transform:none!important} .hz-fade{display:none} } @media (max-width:720px){ .hz-copy .hero-copy{padding:1.2rem} .hero-zoom{height:200vh} } /* static hero on the site-wide sky */ .hero-sky .hero-copy{max-width:800px} /* centered typographic hero */ .hero-center{min-height:92svh;text-align:center} .hero-center .hero-copy{max-width:840px;margin-inline:auto} .hero-center .lede{margin-inline:auto} .hero-center .hero-cta,.hero-center .hero-trust{justify-content:center} /* ---------- full-bleed media hero (skyline) ---------- */ .hero-media{position:relative;min-height:100svh;display:flex;align-items:flex-end; overflow:hidden;padding-top:140px;padding-bottom:clamp(52px,8vh,104px)} .hero-media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .hero-media-scrim{position:absolute;inset:0;z-index:-1;background: linear-gradient(180deg,rgba(9,13,22,.62) 0%,rgba(9,13,22,.18) 26%, rgba(9,13,22,.30) 54%,rgba(9,13,22,.86) 100%)} .hero-media-inner{position:relative;width:100%} .hero-media .hero-copy{max-width:840px} .hero-media h1{color:#fff} .hero-media h1 .accent{color:var(--brand-bright)} .hero-media .eyebrow{color:#DCE6F5} .hero-media .eyebrow::before{background:var(--brand-bright)} .hero-media .lede{color:rgba(255,255,255,.88);margin-bottom:2rem} .hero-media .hero-trust{color:rgba(255,255,255,.82)} .hero-media .hero-trust b{color:#fff} .hero-media .hero-trust .dot{background:var(--brand-bright)} .hero-media .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)} .hero-media .btn-ghost:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.14)} /* nav sits transparent over the dark hero at the top, flips light once scrolled */ .nav.over-hero:not(.scrolled){background:transparent;box-shadow:none} .nav.over-hero:not(.scrolled) .wordmark{color:#fff} .nav.over-hero:not(.scrolled) .wm-q{color:#fff} .nav.over-hero:not(.scrolled) .wm-mark{background:#fff} .nav.over-hero:not(.scrolled) .nav-links a{color:rgba(255,255,255,.9)} .nav.over-hero:not(.scrolled) .nav-links a:hover, .nav.over-hero:not(.scrolled) .nav-links a.active{color:#fff} .nav.over-hero:not(.scrolled) .nav-links a:not(.btn)::after{background:#fff} .nav.over-hero:not(.scrolled) .nav-toggle span{background:#fff} /* ---------- trust bar ---------- */ .trustbar{border-block:1px solid var(--hair); background:color-mix(in srgb,var(--surface) 70%,transparent); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .trustbar .container{display:grid;grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.4vw,2rem);align-items:start;padding-block:26px} .trust-item{display:flex;align-items:flex-start;gap:.65rem;font-weight:600;color:var(--text)} .trust-item svg{width:26px;height:26px;color:var(--accent-ink);flex-shrink:0} .trust-item small{display:block;font-weight:500;color:var(--text-soft);font-size:.8em} /* ---------- generic section head ---------- */ .head{max-width:64ch;margin-bottom:clamp(2.4rem,5vw,3.6rem)} .head.center{margin-inline:auto} .head h2{margin:.7rem 0 1rem} /* ---------- feature / steps grid ---------- */ .grid{display:grid;gap:clamp(1rem,2.4vw,1.8rem)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius); padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--shadow);position:relative; transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .3s} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-brand);border-color:transparent} .card .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center; background:linear-gradient(140deg,rgba(var(--brand-rgb),.16),rgba(var(--brand-rgb),.04)); color:var(--accent-ink);margin-bottom:1.1rem} .card .ico svg{width:26px;height:26px} .card h3{font-size:var(--step-1);margin-bottom:.55rem} .card p{color:var(--text-soft)} .step-n{position:absolute;top:1.3rem;right:1.5rem;font-family:var(--font-display); font-size:2.4rem;color:rgba(var(--brand-rgb),.22);font-weight:600;line-height:1} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center} .stat .num{font-family:var(--font-display);font-size:var(--step-4);color:var(--accent-ink); font-weight:600;line-height:1;letter-spacing:-.02em} .stat .lbl{color:var(--text-soft);margin-top:.5rem;font-weight:500} /* ---------- split (story / proof) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .split.rev .split-media{order:2} .split-media{border-radius:var(--radius);overflow:hidden;position:relative; background:linear-gradient(150deg,rgba(var(--brand-rgb),.14),var(--wash)); border:1px solid var(--hair);min-height:340px;display:grid;place-items:center;padding:2rem} .split-media .badge-photo{text-align:center;color:var(--text-soft)} .split-media .badge-photo svg{width:64px;height:64px;color:var(--accent);opacity:.6;margin-bottom:.6rem} .split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .quote{font-family:var(--font-display);font-size:var(--step-2);line-height:1.28;color:var(--text)} .quote .mark{color:var(--accent);font-size:1.4em;line-height:0} /* ---------- leadership ---------- */ .people{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem} .person{text-align:center} .person .av{width:104px;height:104px;border-radius:50%;margin:0 auto .9rem; display:grid;place-items:center;font-family:var(--font-display);font-size:2rem;font-weight:600; color:var(--on-brand);background:linear-gradient(150deg,var(--brand-bright),var(--brand)); box-shadow:var(--shadow-brand)} .person h4{font-size:var(--step-1);font-family:var(--font-display);margin-bottom:.15rem} .person span{color:var(--text-soft);font-size:var(--step--1);font-weight:600} /* ---------- stories ---------- */ .story{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius); padding:clamp(1.5rem,3vw,2rem);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1rem} .story .tag{align-self:flex-start;font-size:var(--step--1);font-weight:700; color:var(--accent-ink);background:rgba(var(--brand-rgb),.1);padding:.3rem .8rem; border-radius:var(--radius-pill)} .story blockquote{margin:0;font-size:var(--step-1);line-height:1.5;color:var(--text)} .story .who{display:flex;align-items:center;gap:.75rem;margin-top:auto;color:var(--text-soft); font-size:var(--step--1)} .story .who .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(150deg,var(--brand-bright),var(--brand)); display:grid;place-items:center;color:var(--on-brand);font-weight:700;font-family:var(--font-display)} .editable{outline:1.5px dashed rgba(var(--brand-rgb),.4);outline-offset:4px} /* ---------- CTA band ---------- */ .cta-band{background:linear-gradient(135deg,var(--brand-600),var(--brand) 55%,var(--brand-bright)); border-radius:clamp(20px,4vw,36px);padding:clamp(2.4rem,6vw,4.5rem);text-align:center; color:#EAF2FC;position:relative;overflow:hidden;box-shadow:var(--shadow-brand)} .cta-band::before{content:"";position:absolute;inset:0;opacity:.22; background:radial-gradient(500px 300px at 20% 0%,#fff,transparent 60%)} .cta-band > *{position:relative} .cta-band h2{color:#F4F8FE;margin-bottom:1rem} .cta-band p{color:rgba(234,242,252,.92);max-width:52ch;margin:0 auto 1.8rem;font-size:var(--step-1)} .cta-band .btn-primary{background:#FFFFFF;color:#173E63;box-shadow:0 14px 40px -14px rgba(0,0,0,.35)} .cta-band .btn-primary:hover{background:#EAF2FC} .cta-band .btn-ghost{border-color:rgba(234,242,252,.55);color:#EAF2FC} .cta-band .btn-ghost:hover{background:rgba(255,255,255,.16)} /* ---------- donate: step-2 gate ---------- */ .give-locked{display:none} .give-locked.open{display:block} /* ---------- donate options ---------- */ .give-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3rem);align-items:start} .give-embed{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius); box-shadow:var(--shadow);overflow:hidden} .give-embed .embed-head{padding:1.3rem 1.6rem;border-bottom:1px solid var(--hair); display:flex;align-items:center;gap:.7rem;font-weight:700} .give-embed .embed-head svg{width:22px;height:22px;color:var(--accent-ink)} .embed-slot{min-height:520px;display:grid;place-items:center;padding:2.5rem;text-align:center; background:linear-gradient(160deg,var(--wash),var(--surface))} .embed-slot .zeffy-note{max-width:40ch;color:var(--text-soft)} .embed-slot code{background:rgba(var(--brand-rgb),.1);color:var(--accent-ink);padding:.15em .5em; border-radius:6px;font-size:.85em} .give-alt{display:flex;flex-direction:column;gap:1.2rem} .method{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius-sm); padding:1.4rem 1.5rem} .method h4{font-family:var(--font-display);font-size:var(--step-1);margin-bottom:.4rem; display:flex;align-items:center;gap:.55rem} .method h4 .badge{font-family:var(--font-body);font-size:.6em;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--accent-ink);background:rgba(var(--brand-rgb),.12); padding:.25em .6em;border-radius:var(--radius-pill)} .method p{color:var(--text-soft);font-size:var(--step--1)} .method b{color:var(--text)} /* ---------- forms ---------- */ .form-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--radius); padding:clamp(1.6rem,3.5vw,2.4rem);box-shadow:var(--shadow)} .field{margin-bottom:1.1rem} .field label{display:block;font-weight:600;font-size:var(--step--1);margin-bottom:.4rem} .field label .req{color:var(--brand-deep)} .field input,.field select,.field textarea{width:100%;font:inherit;font-size:var(--step-0); padding:.8rem 1rem;border:1.5px solid var(--hair);border-radius:var(--radius-sm); background:var(--bg);color:var(--text);transition:border-color .2s,box-shadow .2s} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand); box-shadow:0 0 0 4px rgba(var(--brand-rgb),.15)} .field textarea{min-height:110px;resize:vertical} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .check{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--step--1);color:var(--text-soft)} .check input{width:20px;height:20px;flex-shrink:0;margin-top:2px;accent-color:var(--brand)} .form-note{font-size:var(--step--1);color:var(--text-soft);margin-top:1rem} .form-msg{display:none;padding:1rem 1.2rem;border-radius:var(--radius-sm);margin-top:1rem; font-weight:600} .form-msg.ok{display:block;background:rgba(var(--brand-rgb),.12);color:var(--brand-deep)} .form-msg.err{display:block;background:#FDECEC;color:#B4231F} /* ---------- FAQ ---------- */ .faq{max-width:820px;margin-inline:auto} .faq details{border-bottom:1px solid var(--hair);padding:1.1rem 0} .faq summary{font-family:var(--font-display);font-size:var(--step-1);font-weight:600; cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent-ink);font-size:1.6rem;transition:transform .3s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{color:var(--text-soft);margin-top:.8rem;max-width:70ch} /* ---------- footer ---------- */ .footer{background:#131C2B;color:#C4CEDC;padding:clamp(3rem,6vw,5rem) 0 2rem} [data-theme="midnight"] .footer{background:#0B1220} .footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem; padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1)} .footer .brand-logo{filter:brightness(0) invert(1);height:52px;margin-bottom:1rem} .footer p{color:#93A1B5;max-width:36ch} .footer h5{font-family:var(--font-body);font-weight:700;color:#fff;margin:0 0 1rem; font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase} .footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.6rem} .footer a:hover{color:var(--brand-bright)} .socials{display:flex;gap:.7rem;margin-top:1.2rem} .socials a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.08);transition:background .25s,transform .25s} .socials a:hover{background:var(--brand);transform:translateY(-3px)} .socials svg{width:20px;height:20px} .footer-bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between; padding-top:2rem;font-size:var(--step--1);color:#7F8DA3} /* ---------- reveal on scroll ---------- */ .reveal{opacity:0;transform:translateY(34px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .orb,.bloom-ring,.bloom-chip,.o1,.o2,.o3{animation:none!important} } /* ---------- theme switcher ---------- */ .theme-switch{position:fixed;right:18px;bottom:18px;z-index:110;display:flex;gap:6px; background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px); border:1px solid var(--hair);border-radius:var(--radius-pill);padding:6px;box-shadow:var(--shadow)} .theme-switch button{width:34px;height:34px;border-radius:50%;border:2px solid transparent; cursor:pointer;transition:transform .2s,border-color .2s} .theme-switch button:hover{transform:scale(1.12)} .theme-switch button[aria-pressed="true"]{border-color:var(--accent)} .sw-light{background:linear-gradient(135deg,#F5F3EC 48%,#2E5EA8 48%)} .sw-sky{background:linear-gradient(135deg,#F1F4FC 48%,#4666CC 48%)} .sw-ocean{background:linear-gradient(135deg,#F4F1EA 48%,#235C90 48%)} .sw-midnight{background:linear-gradient(135deg,#182338 48%,#5B8AD6 48%)} /* ---------- responsive ---------- */ @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;gap:2.5rem} .bloom{max-width:360px;order:-1} .split,.give-grid{grid-template-columns:1fr} .split.rev .split-media{order:0} .g4,.stats,.people,.trustbar .container{grid-template-columns:repeat(2,1fr)} .footer-top{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .nav-links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--surface); flex-direction:column;align-items:flex-start;justify-content:center;gap:1.6rem; padding:2rem;transform:translateX(100%);transition:transform .35s var(--ease); box-shadow:-20px 0 60px -20px rgba(0,0,0,.3);font-size:var(--step-1)} .nav-links.open{transform:none} .nav-toggle{display:block;z-index:2} .g3,.g2,.field-row{grid-template-columns:1fr} } @media (max-width:520px){ .g4,.stats,.people,.footer-top,.trustbar .container{grid-template-columns:1fr} .stats{gap:2rem} }