/* Shared component library — every selector here reads its look from the tokens defined in assets/css/skins/skin-{a,b,c,d}.css. Swapping the active skin (Appearance > Customize > Design Skin) re-skins the whole site; nothing in this file should hardcode a color, font, or radius. */ *{box-sizing:border-box;} /* Shared premium hover treatment — a quiet lift + deeper shadow on every card in the site. Applied by adding .lift to a card's selector list rather than repeating the same three lines per component. */ .lift{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease;} .lift:hover{transform:translateY(-6px);box-shadow:0 26px 50px -22px rgba(0,0,0,.28);} @media (prefers-reduced-motion: reduce){ .lift{transition:none;} .lift:hover{transform:none;} } html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;} /* Lenis drives smooth scrolling via JS once it boots (assets/js/motion.js); native CSS smooth-scroll would then double up against it, so Lenis's own "lenis" class (added to only when it actually initializes — it skips itself for prefers-reduced-motion) turns the native one off. */ html.lenis{scroll-behavior:auto;} body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100%; /* The real fix for grid/flex items blown wide by an unbreakable long string (an email address, a bank account number, a URL — anything with no spaces to wrap at): grid/flex items default to min-width:auto, refusing to shrink below their content's intrinsic width. Unlike overflow-wrap:break-word, "anywhere" is defined to also count toward that automatic minimum size, so the item can actually shrink to fit its track instead of blowing out the whole row (this is what broke the footer's Contact column — info@help4selfreliance.org and the WhatsApp number pushed past the viewport edge on narrow screens). */ overflow-wrap:anywhere; } h1,h2,h3,.serif{font-family:var(--font-display);} h1,h2,h3{ color:var(--ink); margin:0 0 .5em; text-transform:var(--heading-transform); letter-spacing:var(--heading-tracking); } p{margin:0 0 1em;} a{color:inherit;} img{max-width:100%;display:block;} .wrap{max-width:1180px;margin:0 auto;padding:0 24px;} .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-2);margin-bottom:14px; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent-2);display:inline-block;} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 30px;border-radius:var(--btn-radius);font-weight:600;font-size:.95rem; text-decoration:none;cursor:pointer;border:2px solid transparent; transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s cubic-bezier(.2,.8,.2,1),background .2s ease,filter .2s ease,color .2s ease; font-family:var(--font-body); } .btn-primary{background:var(--accent-2);color:var(--ink);} .btn-primary:hover{filter:brightness(.92);transform:translateY(-2px);box-shadow:0 12px 26px -14px var(--accent-2);} .btn-outline{border-color:rgba(255,255,255,.55);color:#fff;background:transparent;} .btn-outline:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);} .btn-dark{background:var(--accent);color:var(--accent-contrast);} .btn-dark:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 12px 26px -14px var(--accent);} .btn-ghost{border-color:var(--accent);color:var(--accent);background:transparent;} .btn-ghost:hover{background:var(--accent-2-light);transform:translateY(-2px);} .btn-block{width:100%;} .btn-sm{padding:10px 20px;font-size:.85rem;} .btn:active{transform:translateY(0) scale(.97) !important;box-shadow:none !important;} @media (prefers-reduced-motion: reduce){.btn{transition:none;}.btn:active{transform:none;}} section{padding:88px 0;} .section-tight{padding:56px 0;} .center{text-align:center;} .tag{ display:inline-block;background:var(--accent-2-light);color:var(--accent-2-deep); font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:6px 14px;border-radius:999px;border:1px solid var(--accent-2-light); } .tag-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);} .lead{color:var(--ink-soft);font-size:1.08rem;max-width:680px;} [hidden]{display:none!important;} /* ---------- NAV ---------- A floating pill nav (logo chip + link/CTA capsule, both riding on the page background rather than one solid edge-to-edge bar) with a full-width panel that drops down from the top on mobile — modeled directly on a reference the client approved (colabs.com.au's nav), reskinned onto SREF's own tokens. Everything below reads --nav-bg / --nav-text / --accent-2 etc., so it re-skins automatically like every other component; no per-skin override needed (verified none existed for the old nav either). */ .nav{ /* z-index:100, above .nav-backdrop's 80 and .nav-pill's 90 — .nav establishes its own stacking context (position:sticky + z-index), so a child's z-index (e.g. .nav-toggle's) only ever wins against siblings *inside* that context. It can't out-rank .nav-backdrop, a body-level sibling, unless .nav itself out-ranks it — without this the open backdrop silently ate every click on the toggle button, since the backdrop painted over the entire top bar despite the toggle's own higher (but locally-scoped) z-index. */ position:sticky;top:0;z-index:100;background:transparent; padding:18px 24px 0; transition:padding .3s ease; } .nav.is-scrolled{padding-top:10px;} @media (prefers-reduced-motion: reduce){ .nav{transition:none;} } .nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:0;gap:14px;max-width:1400px;} .nav-brand-pill{ display:flex;align-items:center;gap:10px;text-decoration:none;flex:none; background:var(--nav-bg);border-radius:999px;padding:6px 18px 6px 6px; box-shadow:var(--shadow); } .nav-brand-pill img{height:40px;width:40px;object-fit:cover;object-position:top;flex:none;border-radius:50%;} .nav-brand-text{color:var(--nav-text);line-height:1.15;} .nav-brand-text strong{font-family:var(--font-display);font-size:1rem;display:block;white-space:nowrap;} .nav-brand-text span{font-size:.6rem;letter-spacing:.06em;color:var(--accent-2-light);text-transform:uppercase;white-space:nowrap;} .nav-pill{ display:flex;align-items:center;gap:8px;min-width:0; background:var(--nav-bg);border-radius:999px; padding:8px 8px 8px 26px;box-shadow:var(--shadow); } .nav-drawer-eyebrow{display:none;} .nav-links{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;min-width:0;} .nav-links a{color:var(--nav-text);text-decoration:none;font-size:.85rem;font-weight:500;white-space:nowrap;opacity:.82;transition:opacity .15s ease,color .15s ease;} .nav-links a:hover, .nav-links a.active{opacity:1;color:var(--accent-2);} /* Underline sweep on hover/active — top-level links only (the > chain naturally excludes nested .sub-menu items two levels down). */ .nav-links > ul > li > a{position:relative;} .nav-links > ul > li > a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--accent-2);transition:right .25s cubic-bezier(.16,1,.3,1);} .nav-links > ul > li > a:hover::after, .nav-links > ul > li > a.active::after{right:0;} @media (prefers-reduced-motion: reduce){.nav-links > ul > li > a::after{transition:none;}} .nav-item{position:relative;} .nav-item > a{display:flex;align-items:center;gap:5px;} .nav-item .caret{width:9px;height:9px;flex:none;transition:transform .15s ease;} .nav-item:hover .caret, .nav-item:focus-within .caret{transform:rotate(180deg);} .nav-dropdown{ list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:50%;transform:translateX(-50%); min-width:210px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow); opacity:0;visibility:hidden;transform:translate(-50%,4px);transition:opacity .15s ease,transform .15s ease,visibility 0s .15s; z-index:70; } .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown{ opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .15s ease,transform .15s ease; } .nav-dropdown a{display:block;color:var(--ink);opacity:1;padding:9px 12px;border-radius:6px;font-size:.85rem;} .nav-dropdown a:hover{background:var(--accent-2-light);color:var(--ink);} .nav-pill-cta{ flex:none;background:var(--accent-2);color:var(--ink);text-decoration:none; padding:10px 20px;border-radius:999px;font-weight:600;font-size:.8rem;white-space:nowrap; transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s ease; } .nav-pill-cta:hover{filter:brightness(.94);transform:translateY(-1px);} @media (prefers-reduced-motion: reduce){ .nav-pill-cta{transition:none;} .nav-pill-cta:hover{transform:none;} } .nav-toggle{ display:none;align-items:center;gap:7px;flex:none;position:relative;z-index:95; background:var(--nav-bg);color:var(--nav-text);border:0;border-radius:999px; padding:11px 18px;box-shadow:var(--shadow);font-size:.82rem;font-weight:600;cursor:pointer; } .nav-toggle-state{display:inline-flex;align-items:center;gap:7px;} .nav-toggle-state-close{display:none;} .nav.open .nav-toggle-state-menu{display:none;} .nav.open .nav-toggle-state-close{display:inline-flex;} /* 1300px, not the usual ~980px tablet breakpoint: with 7 nav items and a CTA, the inline pill needs ~1200px+ before it stops colliding with the brand lockup — verified by measuring actual rendered widths, not guessed. Below this, every device (tablet included) gets the drawer. */ @media (max-width:1300px){ .nav-pill{display:none;} .nav-toggle{display:inline-flex;} /* Dimmed backdrop behind the drawer — a plain solid-color scrim, not a blurred/translucent panel, so this stays clear of the no-glassmorphism constraint (that's about frosted decorative panels, not a modal scrim). */ .nav-backdrop{ position:fixed;inset:0;z-index:80;background:rgba(10,10,8,.5); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s; } .nav-backdrop.open{opacity:1;visibility:visible;transition:opacity .3s ease;} /* The drawer: a full-width panel that drops down from just below the persistent top bar (logo + toggle stay put and visible throughout — the toggle doubles as the close control once open), rounded only at the bottom edge since it's anchored to the top. */ .nav-pill{ display:block;position:fixed;left:16px;right:16px;top:78px;z-index:90; max-height:calc(100vh - 96px);overflow-y:auto; background:var(--nav-bg);border-radius:28px; padding:8px 28px 32px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5); opacity:0;visibility:hidden;transform:translateY(-16px); transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1),visibility 0s .35s; } .nav.open .nav-pill{ opacity:1;visibility:visible;transform:translateY(0); transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1); } .nav-drawer-eyebrow{ display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-2);padding-top:22px;margin-bottom:6px; } .nav-links{display:block;} .nav-links a{ display:block;color:var(--nav-text);text-decoration:none;opacity:1; font-family:var(--font-display);font-size:1.7rem;font-weight:600; padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14); } .nav-links a:hover, .nav-links a.active{color:var(--accent-2);} .nav-links > ul > li > a::after{display:none;} .nav-item .caret{display:none;} .nav-dropdown{ position:static;transform:none;opacity:1;visibility:visible;width:100%; background:transparent;border:0;box-shadow:none;border-radius:0;padding:0 0 8px; } .nav-dropdown a{ display:block;font-family:var(--font-body);font-size:.95rem;font-weight:500; color:var(--panel-dark-text-soft);padding:11px 0 11px 18px;border-bottom:0;opacity:1; } .nav-dropdown a:hover{color:var(--accent-2);background:none;} .nav-pill-cta{display:block;text-align:center;margin-top:22px;padding:15px;font-size:.9rem;} @media (prefers-reduced-motion: reduce){ .nav-pill, .nav-backdrop{transition:none;} } } @media (max-width:520px){ .nav-brand-text span{display:none;} .nav-brand-pill img{height:34px;width:34px;} } /* ---------- PAGE HEADER (inner pages) ---------- */ .page-header{ position:relative;overflow:hidden;background:var(--panel-dark); color:var(--panel-dark-text);padding:64px 0; } .page-header .wrap{position:relative;} .page-header h1{color:var(--panel-dark-text);font-size:2.3rem;max-width:680px;} .page-header p{color:var(--panel-dark-text-soft);max-width:600px;font-size:1.02rem;} .breadcrumb{font-size:.78rem;color:var(--accent-2-light);letter-spacing:.04em;margin-bottom:14px;} /* ---------- ENTRY CONTENT (block-editor pages: page.php) ---------- Plain h1/h2/h3/p resets above give WP block content no real rhythm, no list markers, no pull-quote treatment — it reads as bare text next to the fully-designed templates. This is the one shared prose skin every plain content page (Board of Trustees, Reports, Career, etc.) gets for free, still entirely var(--token)-driven per skin. */ .entry-content{font-size:1.05rem;color:var(--ink-soft);} .entry-content > *:first-child{margin-top:0;} .entry-content h2,.entry-content h3{color:var(--ink);margin-top:1.6em;} .entry-content h2{font-size:1.55rem;position:relative;padding-left:18px;} .entry-content h2::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;border-radius:2px;background:var(--accent-2);} .entry-content h3{font-size:1.2rem;} .entry-content p{line-height:1.75;} .entry-content a{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-2);text-underline-offset:3px;} .entry-content ul,.entry-content ol{margin:0 0 1.2em;padding-left:1.3em;} .entry-content li{margin-bottom:.5em;line-height:1.6;} .entry-content ul > li{list-style:none;position:relative;padding-left:2px;} .entry-content ul > li::before{content:"";position:absolute;left:-1.3em;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent-2);} .entry-content ol{list-style:decimal;} .entry-content ol > li::marker{color:var(--accent);font-weight:700;font-family:var(--font-mono);} .entry-content blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent);font-family:var(--font-display);font-size:1.2rem;color:var(--ink);font-style:italic;} .entry-content strong{color:var(--ink);} .entry-content img{border-radius:var(--card-radius);margin:1.5em 0;} .entry-content hr{border:0;border-top:1px solid var(--line);margin:2.2em 0;} .breadcrumb a{color:var(--accent-2-light);text-decoration:none;} .breadcrumb a:hover{text-decoration:underline;} /* ---------- HERO SLIDESHOW (home) ---------- */ .hero-slides{position:relative;overflow:hidden;color:var(--hero-text);min-height:560px;display:flex;align-items:flex-end;} /* background-position: center 20% (not center/50%) — the source photos are real event photography, mostly portrait-oriented group shots with faces in the upper third and headroom (ceiling, tree canopy) above them. Center-cropping a tall photo into this wide banner was landing on waists/torsos, not faces; 20% keeps the crop biased toward that band. */ .slide{position:absolute;inset:0;opacity:0;transform:scale(1);transition:opacity 1.1s ease,transform 8s ease-out;background-size:cover;background-position:center 20%;} .slide.active{opacity:1;transform:scale(1.06);} .slide::after{content:"";position:absolute;inset:0;background:var(--hero-scrim);} .hero-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;mix-blend-mode:soft-light;opacity:.7;} .hero-slides-inner{position:relative;z-index:2;padding:60px 0 56px;width:100%;} .hero-slides h1{color:var(--hero-text);font-size:2.5rem;line-height:1.16;max-width:680px;} .hero-slides p.lead{color:var(--hero-text-soft);font-size:1.08rem;max-width:580px;} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;} .hero-ctas .btn-outline{border-color:var(--hero-text);color:var(--hero-text);} .hero-ctas .btn-outline:hover{background:color-mix(in srgb, var(--hero-text) 12%, transparent);} .slide-dots{position:absolute;z-index:3;right:24px;bottom:22px;display:flex;gap:8px;} .slide-dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--hero-dot-inactive);cursor:pointer;padding:0;} .slide-dots button.active{background:var(--accent-2);} @media (max-width:720px){ .hero-slides{min-height:440px;} .hero-slides h1{font-size:1.9rem;} } /* Entrance stagger: draws the eye to the headline first on load, then the supporting line and CTAs — a deliberate reading order, not decoration. */ @keyframes sref-rise-in{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} } .hero-slides-inner > *{opacity:0;animation:sref-rise-in .7s cubic-bezier(.16,1,.3,1) forwards;} .hero-slides-inner > .eyebrow{animation-delay:.15s;} .hero-slides-inner > h1{animation-delay:.28s;} .hero-slides-inner > p.lead{animation-delay:.42s;} .hero-slides-inner > .hero-ctas{animation-delay:.56s;} @media (prefers-reduced-motion: reduce){ .slide{transition:opacity .01s linear;} .slide.active{transform:none;} .hero-slides-inner > *{opacity:1;animation:none;} } /* ---------- TRUST STRIP (home) ---------- Shared markup, skin-specific layout: each skin restyles this into its own approved composition (docs/design-directions.html) — an editorial mosaic row, stamped grid cells, floating chips, or ledger rows — via body.skin-* overrides in the matching skins/skin-*.css file. */ .trust-strip-inner{display:grid;grid-template-columns:repeat(3,1fr);} .ti-idx,.ti-tag{display:none;} .ti-num{display:block;font-family:var(--font-display);} .ti-num small{display:block;font-family:var(--font-body);} .ti-body{margin:0;} @media (max-width:820px){.trust-strip-inner{grid-template-columns:1fr;}} /* ---------- MISSION STRIP ---------- */ .mission-strip{background:var(--accent-2);color:var(--ink);} .mission-strip .wrap{padding:22px 24px;text-align:center;} .mission-strip p{margin:0;font-family:var(--font-display);font-size:1.2rem;font-weight:700;} @media (max-width:640px){.mission-strip p{font-size:1rem;}} /* ---------- VISION / MISSION ---------- */ .vm-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px;} @media (max-width:820px){.vm-grid{grid-template-columns:1fr;}} .vm-card{background:var(--surface);border-radius:var(--card-radius);padding:36px;box-shadow:var(--shadow);border-top:5px solid var(--accent);} .vm-card.alt{border-top-color:var(--accent-2);} .vm-card h3{font-size:1.3rem;} .vm-card p{color:var(--ink-soft);} /* ---------- VALUES ---------- */ .values-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px;} @media (max-width:980px){.values-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:540px){.values-grid{grid-template-columns:1fr;}} .value-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 18px;text-align:center;} .value-card .ic{width:52px;height:52px;border-radius:50%;background:var(--accent-2-light);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.4rem;} .value-card h4{margin:0;font-size:.95rem;color:var(--ink);font-weight:700;} /* ---------- GAP SECTION ---------- */ .gap-section{background:var(--panel-dark);color:var(--panel-dark-text);} .gap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;} @media (max-width:980px){.gap-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.gap-grid{grid-template-columns:1fr;}} .gap-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:24px 20px;} .gap-card .num{font-family:var(--font-display);font-size:1.8rem;color:var(--accent-2);margin-bottom:8px;} .gap-card p{color:var(--panel-dark-text-soft);font-size:.92rem;margin:0;} .gap-section h2{color:var(--panel-dark-text);} /* ---------- PROGRAMS / PILLARS ---------- */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;} @media (max-width:980px){.pillars{grid-template-columns:1fr;}} .pillar{background:var(--surface);border-radius:var(--card-radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--line);} .pillar-head{padding:26px 26px 18px;background:var(--accent);color:var(--accent-contrast);} .pillar-head .tag{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.3);} .pillar-head h3{color:var(--accent-contrast);font-size:1.25rem;margin-top:10px;} .pillar-head p{color:rgba(255,255,255,.82);font-size:.85rem;margin:0;} .pillar-body{padding:22px 26px 28px;flex:1;display:flex;flex-direction:column;} .pillar-steps{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:10px;} .pillar-steps li{display:flex;gap:10px;font-size:.88rem;color:var(--ink-soft);} .pillar-steps b{color:var(--ink);font-weight:700;min-width:22px;font-family:var(--font-mono);} .pillar-outcome{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);font-size:.85rem;color:var(--ink-soft);} .pillar-outcome strong{display:block;color:var(--accent);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;} /* ---------- LAPTOP PROGRAM ---------- */ .laptop-section{background:var(--bg);} .laptop-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:46px;align-items:stretch;} @media (max-width:900px){.laptop-grid{grid-template-columns:1fr;}} .laptop-card{position:relative;border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;border:1px solid var(--line);} .laptop-card .lc-img{height:190px;overflow:hidden;} .laptop-card .lc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1);} .laptop-card:hover .lc-img img{transform:scale(1.06);} @media (prefers-reduced-motion: reduce){.laptop-card .lc-img img{transition:none;}.laptop-card:hover .lc-img img{transform:none;}} .laptop-card .lc-body{padding:30px;background:var(--surface);flex:1;display:flex;flex-direction:column;} .laptop-card.request .lc-body{background:var(--panel-dark);color:var(--panel-dark-text);} .laptop-card.request h3{color:var(--panel-dark-text);} .laptop-card.request p{color:var(--panel-dark-text-soft);} .laptop-card h3{font-size:1.4rem;margin-bottom:8px;} .laptop-card .lc-list{list-style:none;margin:0 0 22px;padding:0;font-size:.88rem;color:var(--ink-soft);} .laptop-card.request .lc-list{color:var(--panel-dark-text-soft);} .laptop-card .lc-list li{padding-left:22px;position:relative;margin-bottom:8px;} .laptop-card .lc-list li::before{content:"✓";position:absolute;left:0;color:var(--accent-2);font-weight:700;} .laptop-card .lc-cta{margin-top:auto;} .cost-table{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} @media (max-width:820px){.cost-table{grid-template-columns:1fr;}} .cost-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;} .cost-card .yr{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:6px;} .cost-card .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:2.1rem;color:var(--accent);} .cost-card ul{list-style:none;margin:14px 0 0;padding:0;font-size:.82rem;color:var(--ink-soft);text-align:left;border-top:1px solid var(--line);padding-top:14px;} .cost-card li{margin-bottom:6px;} .cost-card.featured{border-color:var(--accent-2);} /* ---------- FORMS ---------- */ .form-panel{background:var(--surface);border-radius:var(--card-radius);box-shadow:var(--shadow);padding:34px;margin-top:20px;border:1px solid var(--line);} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;} @media (max-width:640px){.form-row{grid-template-columns:1fr;}} .field label{display:block;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:6px;} .field input, .field select, .field textarea{ width:100%;padding:12px 14px;border-radius:calc(var(--btn-radius) * 2);border:1.5px solid var(--line); font-family:var(--font-body);font-size:.92rem;color:var(--ink);background:var(--surface-2); transition:border-color .15s ease,box-shadow .15s ease; } /* --surface-2, not --bg: on skin-c --bg and --surface are both pure white, which made inputs disappear into the form panel with only a hairline border to find them by — --surface-2 is guaranteed distinct from --surface in every skin's token set. */ .field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);} .field textarea{resize:vertical;min-height:100px;} .field .req{color:var(--accent-2-deep);} .form-row-single{grid-template-columns:1fr;} .field-legend{display:block;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:8px;} .field-checkbox{display:flex;align-items:flex-start;gap:10px;} .field-checkbox input[type="checkbox"]{margin-top:3px;flex:none;width:17px;height:17px;padding:0;border:0;background:none;accent-color:var(--accent);} .field-checkbox label{margin:0;font-size:.85rem;color:var(--ink-soft);font-weight:500;} .radio-row{display:flex;flex-direction:column;gap:10px;} .radio-opt{ display:flex;align-items:center;gap:10px;padding:12px 16px; border:1.5px solid var(--line);border-radius:calc(var(--btn-radius) * 2); cursor:pointer;font-size:.88rem;color:var(--ink);background:var(--surface-2); transition:border-color .15s ease,background .15s ease; } .radio-opt input[type="radio"]{accent-color:var(--accent);flex:none;width:17px;height:17px;padding:0;border:0;background:none;} .radio-opt:has(input:checked){border-color:var(--accent);background:var(--accent-2-light);} .form-note{font-size:.78rem;color:var(--ink-soft);margin-top:14px;} .form-success{display:none;background:var(--accent-2-light);border:1px solid var(--accent-2);color:var(--ink);padding:14px 16px;border-radius:12px;font-size:.85rem;margin-top:16px;} .form-success.show{display:block;} .form-error{display:none;background:#FBEDE8;border:1px solid #C0553A;color:#7A2E1C;padding:14px 16px;border-radius:12px;font-size:.85rem;margin-top:16px;} .form-error.show{display:block;} /* ---------- IMPACT / STATS ---------- */ .impact-section{background:var(--accent);color:var(--accent-contrast);} .impact-section h2{color:var(--accent-contrast);} .impact-section .lead{color:rgba(255,255,255,.85);} .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px;} @media (max-width:820px){.stat-grid{grid-template-columns:1fr;}} .stat-col h4{color:var(--accent-2-light);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;} .stat-col ul{list-style:none;margin:0;padding:0;} .stat-col li{display:flex;gap:12px;margin-bottom:14px;font-size:.92rem;color:rgba(255,255,255,.9);} .stat-col li b{font-family:var(--font-mono);font-size:1.3rem;color:#fff;min-width:56px;} .use-bar{display:flex;height:20px;border-radius:999px;overflow:hidden;margin-top:44px;box-shadow:0 4px 14px rgba(0,0,0,.25);} .use-bar span{display:block;} .use-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px;} @media (max-width:820px){.use-legend{grid-template-columns:1fr;}} .use-legend .li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:rgba(255,255,255,.9);} .use-legend .sw{width:14px;height:14px;border-radius:4px;flex:none;} /* ---------- WAYS TO GIVE ---------- */ .give-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px;} @media (max-width:900px){.give-grid{grid-template-columns:1fr;}} .give-card{background:var(--surface);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);} .give-card img{height:170px;width:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1);} .give-card:hover img{transform:scale(1.06);} @media (prefers-reduced-motion: reduce){.give-card img{transition:none;}.give-card:hover img{transform:none;}} .give-card .gc-body{padding:24px;} .give-card h3{font-size:1.1rem;} .give-card p{color:var(--ink-soft);font-size:.88rem;} .donate-panel{margin-top:46px;background:var(--panel-dark);border-radius:24px;padding:40px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;color:var(--panel-dark-text);} @media (max-width:760px){.donate-panel{grid-template-columns:1fr;text-align:center;}} .donate-panel h3{color:var(--panel-dark-text);} .donate-panel p{color:var(--panel-dark-text-soft);margin-bottom:0;} .donate-panel .qr-wrap{background:#fff;border-radius:16px;padding:14px;width:180px;margin:0 auto;} .donate-panel .qr-wrap img{border-radius:8px;} /* ---------- ORG / OFFICES ---------- */ .offices-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;} @media (max-width:900px){.offices-grid{grid-template-columns:1fr;}} .office-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;} .office-card h4{margin:0 0 6px;color:var(--ink);font-size:1.02rem;display:flex;align-items:center;gap:8px;} .office-card h4 svg{color:var(--accent);flex:none;} .office-card a{color:var(--accent);font-weight:600;text-decoration:none;font-size:.92rem;} /* ---------- LEGAL / TRANSPARENCY STRIP ---------- */ .legal-strip{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .legal-strip .wrap{padding:20px 24px;display:flex;gap:28px;flex-wrap:wrap;justify-content:center;font-size:.78rem;color:var(--ink-soft);} .legal-strip b{color:var(--ink);font-family:var(--font-mono);} /* ---------- TESTIMONIALS ---------- */ .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;} @media (max-width:900px){.testi-grid{grid-template-columns:1fr;}} .testi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px;position:relative;} .testi-card .quote-mark{font-family:var(--font-display);font-size:2.6rem;color:var(--accent-2);line-height:1;margin-bottom:6px;} .testi-card p.qtext{color:var(--ink-soft);font-style:italic;font-size:.95rem;} .testi-card .who{display:flex;align-items:center;gap:10px;margin-top:16px;} .testi-card .who .av{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-contrast);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);overflow:hidden;} .testi-card .who .av img{width:100%;height:100%;object-fit:cover;} .testi-card .who b{display:block;font-size:.88rem;color:var(--ink);} .testi-card .who span{font-size:.75rem;color:var(--ink-soft);} /* ---------- VIDEO ---------- */ .video-wrap{position:relative;border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow);margin-top:36px;background:#000;aspect-ratio:16/9;text-decoration:none;display:block;} .video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .video-wrap .vp-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.25));} .video-wrap .vp-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--accent-2);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.35);} .video-wrap .vp-play span{width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:26px solid var(--ink);margin-left:6px;} .video-wrap .vp-label{position:absolute;left:24px;bottom:20px;color:#fff;font-weight:600;font-size:.95rem;} /* ---------- GALLERY ---------- */ .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px;} @media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);}} .gallery-grid a{border-radius:14px;overflow:hidden;height:180px;display:block;cursor:zoom-in;} .gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;} .gallery-grid a:hover img{transform:scale(1.06);} .gallery-more{border:2px dashed var(--line);border-radius:14px;height:180px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-soft);font-size:.82rem;padding:12px;} /* ---------- LIGHTBOX ---------- */ .sref-lightbox{ position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center; background:rgba(8,10,8,.92);padding:60px 20px; } .sref-lightbox.open{display:flex;} .sref-lightbox-img{max-width:min(1100px,92vw);max-height:86vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.5);} .sref-lightbox-close,.sref-lightbox-prev,.sref-lightbox-next{ position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:#fff; border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .15s ease; } .sref-lightbox-close:hover,.sref-lightbox-prev:hover,.sref-lightbox-next:hover{background:rgba(255,255,255,.22);} .sref-lightbox-close{top:20px;right:20px;width:44px;height:44px;font-size:1.6rem;line-height:1;} .sref-lightbox-prev,.sref-lightbox-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem;line-height:1;} .sref-lightbox-prev{left:16px;} .sref-lightbox-next{right:16px;} @media (max-width:640px){ .sref-lightbox{padding:70px 12px;} .sref-lightbox-prev,.sref-lightbox-next{width:44px;height:44px;font-size:1.6rem;} .sref-lightbox-prev{left:6px;} .sref-lightbox-next{right:6px;} } /* ---------- INVOLVED CARDS (home) ---------- */ .involved-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;} @media (max-width:900px){.involved-grid{grid-template-columns:1fr;}} .involved-card{background:var(--surface);border-radius:var(--card-radius);box-shadow:var(--shadow);padding:30px;text-align:center;border-top:5px solid var(--accent-2);} .involved-card .ic{width:60px;height:60px;border-radius:50%;background:var(--accent-2-light);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.6rem;} .involved-card h3{font-size:1.1rem;} .involved-card p{color:var(--ink-soft);font-size:.9rem;} /* ---------- CONTACT ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:44px;} @media (max-width:900px){.contact-grid{grid-template-columns:1fr;}} .contact-list{list-style:none;margin:0;padding:0;} .contact-list li{display:flex;gap:14px;margin-bottom:18px;font-size:.94rem;align-items:flex-start;} .contact-list .ic{width:38px;height:38px;border-radius:50%;background:var(--accent-2-light);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;font-size:1.05rem;} .contact-list a{color:var(--accent);text-decoration:none;font-weight:600;} /* ---------- FOOTER ---------- */ footer.site-footer{background:var(--panel-dark);color:var(--panel-dark-text-soft);padding:56px 0 26px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;} /* Stays 2 columns all the way down to phone widths (by request) rather than collapsing to 1 — safe now that overflow-wrap:anywhere (above) lets the long email/WhatsApp text wrap within its column instead of overflowing it. */ @media (max-width:840px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px 24px;}} @media (max-width:400px){.footer-grid{gap:20px 16px;}} .footer-grid h5{color:var(--panel-dark-text);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;} .footer-grid ul{list-style:none;margin:0;padding:0;} .footer-grid li{margin-bottom:10px;font-size:.88rem;} .footer-grid a{color:var(--panel-dark-text-soft);text-decoration:none;} .footer-grid a:hover{color:var(--accent-2);} .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;} .footer-brand img{height:40px;width:40px;object-fit:cover;object-position:top;} .footer-brand strong{font-family:var(--font-display);color:var(--panel-dark-text);font-size:1.1rem;} .footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;color:rgba(255,255,255,.6);} .footer-widgets{margin-top:40px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;} .footer-widgets h5{color:var(--panel-dark-text);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;} .footer-widgets a{color:var(--panel-dark-text-soft);} .footer-widgets a:hover{color:var(--accent-2);} .footer-widget ul{list-style:none;margin:0;padding:0;} .footer-widget li{margin-bottom:8px;font-size:.88rem;} /* ---------- GODPARENT PAGE ---------- */ .gp-hero{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--accent) 0%,var(--panel-dark) 78%);color:var(--panel-dark-text);padding:80px 0 90px;} .gp-hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;} @media (max-width:940px){.gp-hero-grid{grid-template-columns:1fr;}} .gp-hero h1{color:#fff;font-size:2.6rem;line-height:1.15;max-width:600px;} .gp-hero p.lead{color:var(--panel-dark-text-soft);max-width:560px;font-size:1.05rem;} .gp-hero-badges{display:flex;gap:22px;margin-top:32px;flex-wrap:wrap;} .gp-hero-badge{display:flex;align-items:center;gap:10px;color:var(--panel-dark-text);font-size:.85rem;font-weight:500;} .gp-hero-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--accent-2);flex:none;} .gp-hero-card{position:relative;background:var(--surface);color:var(--ink);border-radius:22px;padding:34px;box-shadow:var(--shadow);} .gp-hero-card .ribbon{position:absolute;top:-14px;right:24px;background:var(--accent-2);color:var(--accent-dark);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;border-radius:999px;box-shadow:0 8px 18px -8px rgba(0,0,0,.35);} .gp-hero-card .amount{font-family:var(--font-display);font-size:3.1rem;color:var(--accent);line-height:1;margin-bottom:2px;} .gp-hero-card .amount small{font-family:var(--font-body);font-size:1rem;color:var(--ink-soft);font-weight:500;} .gp-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;} .gp-hero-stat{background:var(--surface-2);border-radius:14px;padding:14px 16px;border:1px solid var(--line);} .gp-hero-stat b{display:block;font-size:1.05rem;color:var(--accent);} .gp-hero-stat span{font-size:.76rem;color:var(--ink-soft);} .gp-trust{background:var(--accent-2);color:var(--accent-dark);} .gp-trust .wrap{display:flex;align-items:center;gap:18px;padding:16px 24px;flex-wrap:wrap;justify-content:center;text-align:center;} .gp-trust strong{font-family:var(--font-display);font-size:1.02rem;} .gp-trust span{font-size:.86rem;} .gp-trust a{color:inherit;text-decoration:underline;font-weight:600;} .impact-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px;} @media (max-width:980px){.impact-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:540px){.impact-grid{grid-template-columns:1fr;}} .impact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px 20px;text-align:center;} .impact-card .ic{width:52px;height:52px;border-radius:50%;background:var(--accent-2-light);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;} .impact-card h3{font-size:1rem;} .impact-card p{color:var(--ink-soft);font-size:.85rem;margin:0;} .bene-wrap{display:flex;align-items:center;gap:14px;margin-top:44px;} .bene-viewport{flex:1;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;} .bene-viewport::-webkit-scrollbar{display:none;} .bene-track{display:flex;gap:18px;} .bene-card{flex:0 0 220px;scroll-snap-align:start;} .bene-card .photo{position:relative;width:100%;aspect-ratio:3/4;border-radius:var(--card-radius);background:linear-gradient(160deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;overflow:hidden;} .bene-card .photo svg{width:56px;height:56px;opacity:.5;} .bene-card .add-badge{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.16);color:#fff;font-size:.66rem;padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:5px;} .bene-caption{padding:12px 2px 0;} .bene-caption h4{margin:0 0 2px;font-size:.92rem;} .bene-caption span{display:block;font-size:.74rem;color:var(--ink-soft);} .bene-nav-btn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.2rem;cursor:pointer;color:var(--ink);} .bene-nav-btn:hover{background:var(--accent-2-light);} .bene-dots{display:flex;justify-content:center;gap:6px;margin-top:18px;} .bene-dot{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;padding:0;border:0;} .bene-dot.active{background:var(--accent-2);} .three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;} @media (max-width:820px){.three-col{grid-template-columns:1fr;}} .feature-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px;} .feature-card .num{font-family:var(--font-display);font-size:1.6rem;color:var(--accent-2);margin-bottom:10px;} .feature-card h3{font-size:1.05rem;} .feature-card p{color:var(--ink-soft);font-size:.9rem;margin:0;} .price-section{background:var(--panel-dark);color:var(--panel-dark-text);} .price-section h2,.price-section .tag{color:inherit;} .math-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:36px;font-size:.9rem;color:var(--panel-dark-text-soft);} .math-strip b{color:#fff;} .math-strip .eq{opacity:.5;} .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px;} @media (max-width:900px){.price-grid{grid-template-columns:1fr;}} .price-card{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--card-radius);padding:30px 26px;} .price-card.popular{border-color:var(--accent-2);background:rgba(255,255,255,.1);} .price-card .badge{position:absolute;top:-13px;left:26px;background:var(--accent-2);color:var(--accent-dark);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:6px 12px;border-radius:999px;} .price-card h3{color:#fff;font-size:1.1rem;} .price-card .usd{font-family:var(--font-display);font-size:2.2rem;color:#fff;margin:6px 0 2px;} .price-card .usd span{font-size:.9rem;color:var(--panel-dark-text-soft);font-family:var(--font-body);} .price-card .per-day{font-size:.78rem;color:var(--panel-dark-text-soft);margin-bottom:16px;} .price-card ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px;} .price-card li{font-size:.85rem;color:rgba(255,255,255,.85);padding-left:18px;position:relative;} .price-card li::before{content:"✓";position:absolute;left:0;color:var(--accent-2);} .price-card .fx{font-size:.76rem;color:var(--panel-dark-text-soft);} .fee-note{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--card-radius);padding:26px;margin-top:32px;} .fee-note h4{color:#fff;margin-top:0;} .fee-note p{color:var(--panel-dark-text-soft);font-size:.88rem;} .fee-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.85rem;} .fee-table th,.fee-table td{text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.12);color:var(--panel-dark-text-soft);} .fee-table th{color:#fff;font-weight:600;} .timeline{position:relative;margin-top:44px;padding-left:28px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:32px;} .t-item{position:relative;} .t-item::before{content:"";position:absolute;left:-34px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--accent-2);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--accent-2);} .t-item h4{font-size:1.02rem;margin-bottom:6px;} .t-item p{color:var(--ink-soft);margin:0;} .policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px;} @media (max-width:820px){.policy-grid{grid-template-columns:1fr;}} .policy-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:28px;} .policy-card h3{font-size:1.02rem;display:flex;align-items:center;gap:8px;} .policy-card h3 svg{color:var(--accent);flex:none;} .policy-card ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;} .policy-card li{color:var(--ink-soft);font-size:.88rem;} .faq{max-width:760px;margin:44px auto 0;display:flex;flex-direction:column;gap:12px;} .faq-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;} .faq-q{padding:18px 22px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.95rem;} .faq-q .plus{color:var(--accent-2);font-size:1.2rem;flex:none;transition:transform .2s ease;} .faq-item.open .plus{transform:rotate(45deg);} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 22px;} .faq-item.open .faq-a{max-height:280px;padding-bottom:18px;} .faq-a p{color:var(--ink-soft);font-size:.9rem;margin:0;} @media (prefers-reduced-motion: reduce){.faq-a{transition:none;}} /* ---------- TEAM PROFILES (Board of Trustees / Executive Members) ---------- */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;} @media (max-width:980px){.team-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.team-grid{grid-template-columns:1fr;}} .team-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:24px 20px;text-align:center;} .team-photo{width:84px;height:84px;border-radius:50%;margin:0 auto 16px;overflow:hidden;background:linear-gradient(160deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;flex:none;} .team-photo img{width:100%;height:100%;object-fit:cover;} .team-photo .initials{color:#fff;font-family:var(--font-display);font-size:1.25rem;font-weight:700;} .team-card h4{margin:0 0 4px;font-size:.98rem;} .team-card .role{display:block;color:var(--accent);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;} .team-card p{color:var(--ink-soft);font-size:.85rem;margin:0;} .team-group + .team-group{margin-top:52px;} /* ---------- REPORTS ---------- */ .report-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px;} @media (max-width:720px){.report-grid{grid-template-columns:1fr;}} .report-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:28px;display:flex;gap:18px;align-items:flex-start;box-shadow:var(--shadow);} .report-card .ic{width:52px;height:52px;border-radius:14px;background:var(--accent-2-light);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;} .report-card h3{font-size:1.05rem;margin-bottom:6px;} .report-card .year{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-2-deep);margin-bottom:4px;} .report-card p{color:var(--ink-soft);font-size:.88rem;margin-bottom:14px;} .report-card .btn{font-size:.85rem;padding:10px 18px;} .report-card.pending{opacity:.72;} .report-card.pending .ic{background:var(--surface-2);color:var(--ink-soft);} .report-card .pending-note{font-size:.78rem;color:var(--ink-soft);font-style:italic;margin:0;} /* ---------- CAREER ---------- */ .job-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:32px;box-shadow:var(--shadow);margin-top:36px;} .job-card .job-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px;} .job-card h3{font-size:1.25rem;margin:0;} .job-card .job-meta{display:flex;gap:8px;flex-wrap:wrap;} .job-card p{color:var(--ink-soft);} .job-card .job-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;} /* ---------- SUPPORTERS ---------- */ .supporter-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px;} @media (max-width:720px){.supporter-grid{grid-template-columns:1fr;}} .supporter-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px;display:flex;gap:16px;align-items:flex-start;} .supporter-card .ic{width:48px;height:48px;border-radius:50%;background:var(--accent-2-light);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;} .supporter-card h3{font-size:1.02rem;margin-bottom:4px;} .supporter-card p{color:var(--ink-soft);font-size:.88rem;margin:0;} /* ---------- NEWS ---------- */ .news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:40px;} @media (max-width:760px){.news-grid{grid-template-columns:1fr;}} .news-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;} .news-card .nc-img{height:190px;overflow:hidden;position:relative;flex:none;} .news-card .nc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1);} .news-card:hover .nc-img img{transform:scale(1.06);} .news-card .nc-placeholder{height:190px;flex:none;background:linear-gradient(155deg,var(--accent) 0%,var(--accent-dark) 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);} .news-card .nc-body{padding:26px;display:flex;flex-direction:column;flex:1;} .news-card .nc-meta{font-size:.75rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;} .news-card h3{font-size:1.15rem;margin-bottom:10px;line-height:1.3;} .news-card h3 a{color:var(--ink);text-decoration:none;} .news-card h3 a:hover{color:var(--accent);} .news-card p{color:var(--ink-soft);font-size:.9rem;margin:0 0 16px;flex:1;} .news-card .nc-more{color:var(--accent);font-weight:600;font-size:.85rem;text-decoration:none;} .news-card .nc-more:hover{text-decoration:underline;} @media (prefers-reduced-motion: reduce){.news-card .nc-img img{transition:none;}.news-card:hover .nc-img img{transform:none;}} /* ---------- SCROLL REVEAL ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);} .reveal.in-view{opacity:1;transform:none;} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} } /* back to top */ .totop{ position:fixed;right:20px;bottom:20px;background:var(--accent-2);color:var(--ink); width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center; text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.25);font-size:1.1rem;z-index:40; opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .3s ease,transform .3s ease,visibility .3s,box-shadow .2s ease; } .totop.is-visible{opacity:1;visibility:visible;transform:none;} .totop:hover{box-shadow:0 12px 26px -6px rgba(0,0,0,.4);transform:translateY(-3px);} @media (prefers-reduced-motion: reduce){ .totop{transition:opacity .2s ease,visibility .2s;} .totop:hover{transform:none;} } /* screen-reader only (skip link etc.) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .skip-link{position:absolute;top:-100px;left:12px;background:var(--accent);color:#fff;padding:10px 16px;border-radius:6px;z-index:110;text-decoration:none;} .skip-link:focus{top:12px;}