/* css/tokens.css */ /* * AFAQ Trust design tokens. * * The single source of global design values. Loaded before every other * stylesheet. In phase 2, inc/design-tokens.php prints an inline :root block * after this file with the values saved in "إعدادات آفاق"; defaults here must * stay identical to inc/defaults.php. * * Inventory and rationale: docs/DESIGN-TOKENS.md. */ :root { /* Colour */ --afaq-teal: #006D72; --afaq-deep-teal: #005E63; --afaq-gold: #C99A3D; --afaq-mustard: #B98B2E; --afaq-gold-ink: #8C641F; --afaq-cream: #F5F0E4; --afaq-paper: #EEE6D5; --afaq-white: #fffdf7; --afaq-text: #253332; --afaq-sage: #74827C; --afaq-border: #ded6c5; --afaq-hero-paper: #eee6cf; /* Sampled from the top edge of the hero footage. */ /* * Derived tokens (task 1.8). Literal values are the fallback; the * @supports block below re-defines them relative to their parent token so * they follow brand changes. Hand-tuned shades across the CSS derive from * the nearest token in OKLCH (tools/css-harmonize.py). */ --afaq-mist: #8aa9a2; /* pale sage-teal tint, from teal */ --afaq-shadow-ink: #574626; /* warm brown used in soft shadows, from gold-ink */ /* Typography */ --afaq-font-body: 'IBM Plex Sans Arabic', sans-serif; --afaq-font-display: 'IBM Plex Sans Arabic', sans-serif; --afaq-font-ui: 'IBM Plex Sans Arabic', sans-serif; --afaq-font-nav: var(--afaq-font-ui); /* Header navigation; settings may override. */ --afaq-font-button: var(--afaq-font-ui); /* Buttons; settings may override. */ --afaq-heading-section: clamp(26px, 2.35vw, 34px); --afaq-heading-leading: 1.65; /* Layout */ --afaq-content: 1320px; --afaq-gutter: clamp(22px, 4.1vw, 60px); /* Surface */ --afaq-radius: 18px; --afaq-shadow: 0 5px 18px rgb(71 57 27 / 5%); --afaq-card-edge: #d9ccb6; --afaq-card-shadow: 0 5px 16px #6653330b; --afaq-card-shadow-raised: 0 12px 24px #53635317; /* * Scales for presets.css (phase 1.4 / 1.5). Admin choices map to these * named steps, never to free pixel values. */ /* Spacing: 4px base grid. */ --afaq-space-3xs: 4px; --afaq-space-2xs: 8px; --afaq-space-xs: 12px; --afaq-space-sm: 16px; --afaq-space-md: 24px; --afaq-space-lg: 32px; --afaq-space-xl: 48px; --afaq-space-2xl: 64px; --afaq-space-3xl: 96px; /* Section vertical rhythm (S / M / L / XL). */ --afaq-section-s: clamp(24px, 3vw, 40px); --afaq-section-m: clamp(40px, 5vw, 72px); --afaq-section-l: clamp(56px, 7vw, 104px); --afaq-section-xl: clamp(80px, 9vw, 140px); /* Container widths. Normal matches the inner pages, wide the home page. */ --afaq-width-narrow: 880px; --afaq-width-normal: 1200px; --afaq-width-wide: 1320px; /* Radius. lg equals the prototype's --radius. */ --afaq-radius-sm: 8px; --afaq-radius-md: 12px; --afaq-radius-lg: 18px; --afaq-radius-xl: 28px; --afaq-radius-pill: 999px; /* Elevation, from the prototype's card and panel shadows. */ --afaq-shadow-sm: var(--afaq-card-shadow); --afaq-shadow-md: var(--afaq-shadow); --afaq-shadow-lg: var(--afaq-card-shadow-raised); /* Type scale, responsive, from the sizes used across the prototype. */ --afaq-fs-xs: 12px; --afaq-fs-sm: 14px; --afaq-fs-base: clamp(16px, 1.2vw, 17px); --afaq-fs-lg: clamp(18px, 1.35vw, 20px); --afaq-fs-h3: clamp(20px, 1.6vw, 23px); --afaq-fs-h2: var(--afaq-heading-section); --afaq-fs-h1: clamp(30px, 3vw, 42px); --afaq-fs-hero-s: clamp(40px, 4.4vw, 60px); --afaq-fs-hero-m: clamp(54px, 5.4vw, 76px); --afaq-fs-hero-l: clamp(54px, 5.9vw, 82px); --afaq-lh-tight: 1.35; --afaq-lh-heading: var(--afaq-heading-leading); --afaq-lh-body: 1.85; /* * Legacy aliases. Theme CSS uses --afaq-* only; these keep inline styles, * child themes or third-party snippets written against the prototype * names working. They resolve at :root, so page-level overrides must set * the --afaq-* name. */ --teal: var(--afaq-teal); --deep-teal: var(--afaq-deep-teal); --gold: var(--afaq-gold); --mustard: var(--afaq-mustard); --gold-ink: var(--afaq-gold-ink); --cream: var(--afaq-cream); --paper: var(--afaq-paper); --white: var(--afaq-white); --text: var(--afaq-text); --sage: var(--afaq-sage); --border: var(--afaq-border); --font-body: var(--afaq-font-body); --font-display: var(--afaq-font-display); --font-ui: var(--afaq-font-ui); } @supports (color: oklch(from red l c h)) { :root { --afaq-mist: oklch(from var(--afaq-teal) calc(l + 0.223) calc(c - 0.047) calc(h - 20.4)); --afaq-shadow-ink: oklch(from var(--afaq-gold-ink) calc(l - 0.128) calc(c - 0.045) calc(h + 5.3)); --afaq-card-edge: oklch(from var(--afaq-border) calc(l - 0.028) calc(c + 0.009) h); --afaq-shadow: 0 5px 18px oklch(from var(--afaq-shadow-ink) calc(l - 0.052) calc(c - 0.003) h / 0.05); --afaq-card-shadow: 0 5px 16px oklch(from var(--afaq-shadow-ink) calc(l + 0.049) calc(c + 0.001) h / 0.0431); --afaq-card-shadow-raised: 0 12px 24px oklch(from var(--afaq-sage) calc(l - 0.112) calc(c + 0.013) h / 0.0902); } } /* css/base.css */ /* * Reset, element defaults, layout helpers and global states. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* AFAQ Trust base stylesheet (moved from the prototype root style.css) * Standalone prototype. WordPress: enqueue this file from functions.php. * Design tokens are the single source for theme.json / future ACF options. */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:110px} body{margin:0;background:var(--afaq-cream);color:var(--afaq-text);font-family:var(--afaq-font-body);font-size:var(--afaq-body-size,17px);line-height:1.85;overflow-x:clip;overflow-wrap:break-word} /* T31: a word longer than its box (a link, an address, a name) breaks instead of running under a card's edge; ordinary text is unchanged. */ body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;background:var(--afaq-deco-paper-grain, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/paper-grain.svg'));opacity:.21;mix-blend-mode:multiply} button,input,select{font:inherit} button,a,input,select{-webkit-tap-highlight-color:transparent} button{cursor:pointer} button{color:inherit} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} img{height:auto} h1,h2,h3,p{margin:0} button{border:0} button:disabled{cursor:default} ::selection{background:var(--afaq-teal);color:var(--afaq-cream)} :focus-visible{outline:3px solid var(--afaq-gold-ink);outline-offset:5px} h2,h3{line-height:1.5} button:focus-visible,a:focus-visible{border-radius:5px} .container{width:calc(100% - var(--afaq-gutter)*2);max-width:var(--afaq-content);margin-inline:auto} .icon{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none} .icon-library{position:absolute;width:0;height:0;overflow:hidden} .visually-hidden,.screen-reader-text{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap} /* WordPress's own class (search form, pagination): visible again when focused. */ .screen-reader-text:focus{clip-path:none;width:auto;height:auto;padding:12px 18px;inset-block-start:8px;inset-inline-start:8px;z-index:100000;background:var(--afaq-white);color:var(--afaq-text);border-radius:8px;box-shadow:0 4px 18px #0003} .skip-link{position:fixed;top:-90px;right:20px;z-index:200;background:var(--afaq-teal);color:white;padding:12px 20px} .skip-link:focus{top:12px} /* Mobile: maintain the poster's artwork, give Arabic copy room, 44px touch targets. */ @media(max-width:640px){:root{--afaq-gutter:22px}html{scroll-padding-top:90px}body{font-size:var(--afaq-body-size-mobile,16px)}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}} html.motion-paused{scroll-behavior:auto} html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{transition:none!important;animation:none!important} @media print{body::before,.hero-tear,.menu-toggle,.header-donate,.motion-toggle,dialog{display:none!important}body{-webkit-print-color-adjust:exact;print-color-adjust:exact}} /* Finishing pass: uneven torn fibers, contained artwork, clear panel copy. */ html{overflow-x:clip} body::before{opacity:.48} html{scroll-padding-top:98px} /* 6. Small finishing touches. */ ::selection{background:var(--afaq-gold);color:var(--afaq-text)} /* css/components/buttons.css */ /* * Buttons and text links. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ .button{min-height:49px;padding:10px 28px;display:inline-flex;justify-content:center;align-items:center;gap:14px;border-radius:9px;font-family:var(--afaq-font-button);font-size:14px;font-weight:600;line-height:1.8;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap} .button:hover{transform:translateY(-3px)} .button-teal{background:var(--afaq-teal);color:var(--afaq-white)} .button-teal:hover{background:var(--afaq-deep-teal);box-shadow:0 5px 16px #005e632a;box-shadow:0 5px 16px rgb(from var(--afaq-deep-teal) r g b / 0.1647)} .button-gold{background:var(--afaq-gold);color:var(--afaq-text);box-shadow:0 3px 5px #5b481d25;box-shadow:0 3px 5px oklch(from var(--afaq-shadow-ink) calc(l + 0.008) calc(c + 0.012) h / 0.145098)} .button-gold:hover{box-shadow:0 5px 22px #c99a3d60;box-shadow:0 5px 22px rgb(from var(--afaq-gold) r g b / 0.3765);background:#d5ad5a;background:oklch(from var(--afaq-gold) calc(l + 0.053) calc(c - 0.01) h)} .button-outline{color:var(--afaq-teal);border-color:var(--afaq-teal);background:transparent} .button-outline:hover{background:#006d7209;background:rgb(from var(--afaq-teal) r g b / 0.0353)} .full-width{width:100%} .text-link{display:flex;align-items:center;gap:12px;min-height:44px;background:none;color:var(--afaq-teal);padding:5px 8px;font-size:15px} .text-link .icon{width:19px;transition:transform .25s} .text-link:hover .icon{transform:translateX(-5px)} @media(max-width:640px){.text-link{font-size:16px;min-height:48px;margin-top:3px}} @media(max-width:370px){.button{padding-inline:17px}} /* css/components/section-heading.css */ /* * Section titles and centred headings. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ .gold-text{color:var(--afaq-gold-ink)!important} .section-title{font-size:clamp(30px,3vw,42px);font-weight:700;color:var(--afaq-teal);position:relative;margin-bottom:26px;line-height:1.45} .section-title::after{content:"";position:absolute;bottom:-7px;right:0;width:47px;height:4px;background:var(--afaq-gold)} .centered{text-align:center;font-size:30px;margin-bottom:23px} .centered::after{right:calc(50% - 22px);width:44px} @media(max-width:640px){.section-title{font-size:31px;margin-bottom:23px}} .section-title::after{transform:scaleX(var(--underline-scale,1));transform-origin:right} /* css/components/progress.css */ /* * Campaign progress bar (RTL). * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ .campaign-progress{margin-top:auto;padding-top:9px;font-size:14px;color:var(--afaq-deep-teal)} .progress-track{height:9px;border-radius:8px;background:#e7e5df;background:oklch(from var(--afaq-paper) calc(l - 0.005) calc(c - 0.016) h);margin-top:8px;overflow:hidden;direction:ltr} .progress-track>span{display:block;width:var(--progress);height:100%;background:var(--afaq-teal);transform-origin:left} @media(max-width:960px){.campaign-progress{font-size:12px}} @media(max-width:640px){.campaign-progress{font-size:14px}} /* css/components/header.css */ /* * Site header, primary navigation and mobile menu. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* HEADER / header.php */ .site-header{position:sticky;top:0;z-index:50;transition:background .35s,box-shadow .35s;isolation:isolate} .header-inner{height:142px;display:flex;align-items:flex-start;gap:46px;padding-top:24px;transition:height .35s,padding .35s,gap .35s} .brand{width:144px;flex:none;margin-top:-13px;transition:width .35s;mix-blend-mode:multiply} .brand svg{width:100%;height:130px;transition:height .35s} .primary-nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.65vw,40px);flex:1;padding-top:12px} .primary-nav a,.nav-link{position:relative;font:600 13px/2 var(--afaq-font-nav);background:none;padding:7px 0;white-space:nowrap} .primary-nav a::after,.nav-link::after{content:"";position:absolute;bottom:1px;right:0;width:100%;height:2px;background:var(--afaq-teal);transform:scaleX(0);transform-origin:right;transition:transform .25s} .primary-nav a:hover::after,.primary-nav .is-active::after,.nav-link:hover::after{transform:scaleX(1)} .primary-nav .is-active{color:var(--afaq-teal)} .header-donate{margin-top:13px;min-width:174px} .site-header.is-scrolled{background:rgb(245 240 228 / 94%);background:oklch(from var(--afaq-cream) l c h / 0.94);backdrop-filter:blur(12px);box-shadow:0 3px 20px #2533320c;box-shadow:0 3px 20px rgb(from var(--afaq-text) r g b / 0.0471)} .is-scrolled .header-inner{height:88px;padding-top:9px;gap:30px} .is-scrolled .brand{width:94px;margin-top:0} .is-scrolled .brand svg{height:75px} .is-scrolled .header-donate{margin-top:9px} .menu-toggle{display:none} @media(max-width:1190px){.header-inner{gap:20px;height:122px}.brand{width:120px}.brand svg{height:110px}.primary-nav{gap:20px}.primary-nav a,.nav-link{font-size:11px}.header-donate{min-width:140px;padding-inline:17px}} @media(max-width:960px){.header-inner{height:100px;align-items:center;padding-block:9px;gap:18px}.brand{width:91px;margin:0}.brand svg{height:83px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;width:44px;height:44px;margin-right:auto;padding:9px;z-index:3}.menu-toggle span{width:25px;height:2px;background:var(--afaq-teal);transition:transform .25s,opacity .25s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)}.header-donate{margin:0!important;min-height:44px;min-width:130px}.primary-nav{display:none;position:absolute;top:100%;right:var(--afaq-gutter);left:var(--afaq-gutter);flex-direction:column;align-items:stretch;padding:15px 24px;gap:0;background:var(--afaq-cream);border:1px solid var(--afaq-border);border-radius:14px;box-shadow:0 14px 30px #25333218;box-shadow:0 14px 30px rgb(from var(--afaq-text) r g b / 0.0941)}.primary-nav.is-open{display:flex}.primary-nav a,.nav-link{font-size:14px;text-align:right;min-height:47px;padding-block:10px}.primary-nav a::after,.nav-link::after{width:40px}} @media(max-width:640px){.header-inner{height:90px;gap:10px}.brand{width:78px}.brand svg{height:73px}.header-donate{min-width:116px;padding:9px 13px;font-size:12px;gap:9px}.header-donate .icon{width:20px}.is-scrolled .header-inner{height:76px;gap:10px}.is-scrolled .brand{width:69px}.is-scrolled .brand svg{height:62px}} @media print{.site-header{position:static}} .site-header{background:var(--afaq-cream)} .brand{mix-blend-mode:darken} /* ========================================================================== * POLISH PASS — header / hero / footer unification * All values are declarative CSS so a WordPress port only needs to enqueue * this file; nothing here depends on the animation JS. * ========================================================================== */ /* Sampled from the top edge of the hero footage (assets/video/hero-gaze.mp4). */ /* 1. Before scroll the bar carries the film's own paper tone and dissolves into it, so logo, headline and footage read as one sheet. The scrolled state goes back to cream. */ @media(min-width:641px){.site-header{background:var(--afaq-hero-paper)}.site-header::after{ content:"";position:absolute;left:0;right:0;top:100%;height:16px; background:linear-gradient(var(--afaq-hero-paper),rgb(238 230 207 / 0)); background:linear-gradient(var(--afaq-hero-paper),oklch(from var(--afaq-paper) calc(l - 0.002) calc(c + 0.007) h / 0)); pointer-events:none;transition:opacity .35s; }.site-header.is-scrolled::after{opacity:0}} .site-header{border-bottom:1px solid transparent;transition:background .35s,box-shadow .35s,border-color .35s} .site-header.is-scrolled{background:rgb(245 240 228 / 94%);background:oklch(from var(--afaq-cream) l c h / 0.94);border-bottom-color:#ded6c566;border-bottom-color:rgb(from var(--afaq-border) r g b / 0.4)} /* 2. The lockup is now a real transparent asset (docs/extract-logo.py), so it needs no blend mode and sits correctly on paper, footage or teal. It also starts calmer: ~92px instead of ~130px, so the shrink on scroll reads as a refinement rather than a jump. */ .header-inner{height:112px;padding-top:15px;gap:clamp(20px,3vw,38px)} .brand{width:auto;margin-top:0;mix-blend-mode:normal} .brand img{width:auto;height:calc(92px * var(--afaq-logo-scale, 1));transition:height .35s} .primary-nav{padding-top:6px} .header-donate{margin-top:6px;min-width:164px} .is-scrolled .header-inner{height:84px;padding-top:8px;gap:28px} .is-scrolled .brand{width:auto} .is-scrolled .brand img{height:calc(70px * var(--afaq-logo-scale, 1))} @media(max-width:1190px){.header-inner{height:104px}.brand img{height:calc(84px * var(--afaq-logo-scale, 1))}.is-scrolled .brand img{height:calc(66px * var(--afaq-logo-scale, 1))}} @media(max-width:960px){.brand img{height:calc(74px * var(--afaq-logo-scale, 1))}.is-scrolled .brand img{height:calc(66px * var(--afaq-logo-scale, 1))}} @media(max-width:640px){.header-inner{height:84px}.brand img{height:calc(64px * var(--afaq-logo-scale, 1))}.is-scrolled .header-inner{height:72px}.is-scrolled .brand img{height:calc(56px * var(--afaq-logo-scale, 1))}} /* ========================================================================== * INTERACTION PASS — navigation, campaign cards, programme artwork * ========================================================================== */ /* 8. Every navigation item carries an icon; the current one is a teal pill with a gold rule and a gold glyph. */ .primary-nav{gap:clamp(2px,1.1vw,12px)} .primary-nav a,.nav-link{ display:inline-flex;align-items:center;gap:8px; padding:8px 11px 11px;border-radius:11px; transition:color .25s,background .25s; } .primary-nav a::after,.nav-link::after{right:11px;width:calc(100% - 22px);bottom:4px} .primary-nav a:hover,.nav-link:hover{color:var(--afaq-teal);background:#006d7209;background:rgb(from var(--afaq-teal) r g b / 0.0353)} .primary-nav .is-active{background:#006d7212;background:rgb(from var(--afaq-teal) r g b / 0.0706)} .primary-nav .is-active::after{background:var(--afaq-gold);transform:scaleX(1)} .nav-ico{width:17px;height:17px;stroke-width:1.7;opacity:.5;transition:opacity .3s,transform .35s,color .3s} .primary-nav a:hover .nav-ico,.nav-link:hover .nav-ico{opacity:.95;transform:translateY(-2px)} .primary-nav .is-active .nav-ico{opacity:1;color:var(--afaq-gold-ink)} @media(max-width:1190px){/* Six items plus glyphs need the room back from the bar's own gaps. */ .primary-nav a,.nav-link{font-size:11.5px;padding:7px 6px 10px;gap:6px}.primary-nav a::after,.nav-link::after{right:6px;width:calc(100% - 12px)}.nav-ico{width:15px;height:15px}.header-inner{gap:clamp(12px,1.8vw,28px)}.header-donate{min-width:144px}} @media(max-width:960px){/* In the drop-down the icons become a left-hand rail for the row labels. */ .primary-nav a,.nav-link{justify-content:flex-start;gap:12px;padding:10px 10px;border-radius:10px}.primary-nav a::after,.nav-link::after{right:10px;width:42px;bottom:6px}.nav-ico{width:19px;height:19px;opacity:.6}} /* css/components/footer.css */ /* * Site footer, contact column, social links and motion toggle. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* FOOTER / footer.php */ .site-footer{position:relative;background:var(--afaq-deep-teal);color:var(--afaq-cream);padding:48px 0 12px;isolation:isolate;margin-top:0} .site-footer::before{content:"";position:absolute;inset:-38px 0 auto;height:42px;background:var(--afaq-deep-teal);} .site-footer::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--afaq-deco-paper-grain, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/paper-grain.svg'));opacity:.27;mix-blend-mode:soft-light} .footer-grid{display:grid;grid-template-columns:1.25fr 1.3fr .9fr 1fr;gap:40px;position:relative;z-index:2;padding-inline:40px} .footer-grid h2{font-size:16px;margin-bottom:7px;font-weight:600} .footer-brand{text-align:center} .footer-brand>a{display:block;width:85px;margin:-19px auto 0} .footer-brand svg{height:78px;width:85px} .footer-brand p,.footer-motto{font-size:13px} .footer-motto{color:#e0c78e;color:oklch(from var(--afaq-border) calc(l - 0.04) calc(c + 0.055) h)} .footer-contact address{font-style:normal;font-size:14px;line-height:1.9} .footer-contact a,.footer-contact address>span{display:flex;gap:10px;align-items:center;min-height:29px} .footer-contact .icon{width:18px;height:18px} .footer-links{display:flex;flex-direction:column;align-items:flex-start;line-height:1.5;font-size:14px} .footer-links a,.footer-links button{background:none;color:inherit;padding:3px 0;min-height:27px} .footer-links a:hover,.footer-contact a:hover{text-decoration:underline} .footer-social{text-align:center;padding-top:12px} .social-links{display:flex;gap:9px;justify-content:center} .social-links :is(button,a){width:44px;height:44px;display:grid;place-items:center;background:var(--afaq-cream);color:var(--afaq-teal);border-radius:50%;transition:transform .25s,background .25s;font:700 24px/1 Arial,sans-serif} .social-links :is(button,a):hover,.social-links a:focus-visible{transform:translateY(-4px);background:#e2c179;background:oklch(from var(--afaq-gold) calc(l + 0.11) calc(c - 0.024) h)} .social-links .icon{width:23px;height:23px} .footer-botanical{position:absolute;right:-56px;bottom:0;width:255px;max-height:280px;object-fit:contain;z-index:1;pointer-events:none} .copyright{font-size:13px;text-align:center;padding-top:18px} .motion-toggle{background:none;color:var(--afaq-cream);font-size:12px;min-height:44px;opacity:.85;margin-top:4px} .motion-toggle span{padding-right:8px} @media(max-width:1190px){.footer-grid{padding-inline:10px;gap:22px}.footer-botanical{width:210px}} @media(max-width:960px){.footer-grid{gap:18px;grid-template-columns:1fr 1.5fr 1fr}.footer-social{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:22px;padding-top:0}.footer-social h2{margin:0}.motion-toggle{margin:0}.footer-botanical{width:170px}.copyright{padding-top:12px}} @media(max-width:640px){.site-footer{padding-top:38px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px 20px;padding:0}.footer-brand{grid-column:1/-1}.footer-brand>a{margin-top:-3px;width:96px}.footer-brand svg{width:96px;height:89px}.footer-brand p{font-size:14px}.footer-grid h2{font-size:17px}.footer-contact{grid-column:1/-1;text-align:center}.footer-contact address>a,.footer-contact address>span{justify-content:center;min-height:44px;font-size:15px}.footer-links{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px 18px}.footer-links h2{width:100%;text-align:center;margin-bottom:0}.footer-links a,.footer-links button{min-height:44px;padding-block:10px}.footer-social{flex-wrap:wrap;gap:10px 20px;grid-column:1/-1}.footer-social h2{width:100%}.footer-botanical{width:145px;right:-53px;top:0;bottom:auto;opacity:.85}.copyright{font-size:12px;padding-top:24px}} .site-footer{overflow-x:clip} .footer-brand svg{mix-blend-mode:lighten} .site-footer::before{inset:-70px 0 auto;height:130px;background:transparent var(--afaq-deco-torn-teal, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-teal.webp?v=3')) center top/100% 100% no-repeat;clip-path:none;pointer-events:none;z-index:-1} .site-footer{margin-top:28px} .site-footer::before{mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)} @media(max-width:640px){.site-footer::before{height:95px;top:-49px}} /* 4. Footer: the torn sheet is now a mask filled with the footer's own teal, so the paper edge and the panel below it are literally the same colour. */ .site-footer::before{ background:var(--afaq-deep-teal); -webkit-mask:var(--afaq-deco-torn-teal, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-teal.webp?v=3')) center top/100% 100% no-repeat; mask:var(--afaq-deco-torn-teal, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-teal.webp?v=3')) center top/100% 100% no-repeat; } /* 5. The footer carries the white knock-out of the same lockup. */ .footer-brand>a{width:100px;margin:-4px auto 10px} .footer-brand img{width:100px;height:auto;opacity:.95;transition:opacity .25s} .footer-brand>a:hover img,.footer-brand>a:focus-visible img{opacity:1} .social-links :is(button,a):focus-visible{outline-offset:3px} /* 7. Footer brand column: the botanical stays a backdrop instead of running through the motto. */ .footer-botanical{right:-86px;width:238px;opacity:.9} .footer-brand{position:relative;z-index:2} @media(max-width:960px){.footer-botanical{right:-70px;width:190px;opacity:.75}} /* ========================================================================== * FOOTER PAPER — the sheet retoned onto the footer's own green * docs/make-footer-paper.py lifts torn-teal.webp's paper body onto --afaq-deep-teal, * keeping its shading and its cream fibres, and cuts a tileable strip of the * same body for the panel. Edge and panel are therefore one colour and one * material: the torn paper reads, the band does not. * ========================================================================== */ .site-footer{background-color:var(--afaq-deep-teal);background-image:none} .site-footer::before{ background:transparent var(--afaq-deco-torn-teal-edge, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-teal-edge.webp?v=1')) center top/100% 100% no-repeat; -webkit-mask:linear-gradient(to bottom,#000 74%,transparent); mask:linear-gradient(to bottom,#000 74%,transparent); } /* The sheet carries its own grain now; the overlay only softens it. */ .site-footer::after{opacity:.1} .social-links :is(button,a){font-family:var(--afaq-font-ui)} /* css/components/dialog.css */ /* * Native dialogs: donation, zakat calculator, campaign list. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* Accessible native dialogs, no payment details stored or collected. */ .dialog{width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--afaq-border);border-radius:20px;background:var(--afaq-cream);color:var(--afaq-text);padding:38px;box-shadow:0 30px 100px #001c2655;box-shadow:0 30px 100px oklch(from var(--afaq-text) calc(l - 0.098) calc(c + 0.021) h / 0.333333)} .dialog::backdrop{background:#003a3ede;background:oklch(from var(--afaq-text) calc(l + 0.009) calc(c + 0.035) h / 0.870588);backdrop-filter:blur(5px)} .dialog-close{position:absolute;left:16px;top:14px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--afaq-paper);color:var(--afaq-teal)} .dialog-eyebrow{display:block;color:var(--afaq-gold-ink);font-size:13px;margin-bottom:8px;padding-left:25px} .dialog h2{font-size:31px;color:var(--afaq-teal);margin-bottom:12px} .dialog p{margin-bottom:16px} .dialog label{display:block;font-size:15px;font-weight:600;margin:14px 0 6px} .dialog input,.dialog select{width:100%;border:1px solid #9b9e8f;border:1px solid oklch(from var(--afaq-mustard) calc(l + 0.028) calc(c - 0.098) h);background:var(--afaq-white);border-radius:8px;padding:10px 14px;min-height:48px;color:var(--afaq-text)} .dialog input{direction:ltr;text-align:right} .amount-options{border:0;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .amount-options legend{padding:0 0 8px;font-size:15px} .amount-options button{min-height:46px;border:1px solid var(--afaq-border);border-radius:8px;background:var(--afaq-white);color:var(--afaq-teal)} .amount-options button[aria-pressed=true]{background:var(--afaq-teal);color:var(--afaq-white);border-color:var(--afaq-teal)} /* Once or every month (T37), in the dialog and the quick giving form: the same look as the amounts. */ .donation-frequency{border:0;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:9px} .donation-frequency legend{padding:0 0 8px;font-size:15px} fieldset.donation-frequency label{position:relative;display:flex;margin:0;line-height:1.4;align-items:center;justify-content:center;min-height:46px;padding:0 12px;border:1px solid var(--afaq-border);border-radius:8px;background:var(--afaq-white);color:var(--afaq-teal);font-size:15px;white-space:nowrap;cursor:pointer} fieldset.donation-frequency label:has(input:checked){background:var(--afaq-teal);color:var(--afaq-white);border-color:var(--afaq-teal)} fieldset.donation-frequency label:has(input:focus-visible){outline:2px solid var(--afaq-gold);outline-offset:2px} /* The radio stays for keyboards and screen readers; the label shows the choice (the forms' own input styles would draw it full width). */ fieldset.donation-frequency label input[type=radio]{position:absolute;inset:0;inline-size:100%;block-size:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer} .dialog .form-note{font-size:13px;line-height:1.8;margin-block:16px;color:#5b625b;color:oklch(from var(--afaq-sage) calc(l - 0.106) calc(c - 0.005) h)} .dialog .form-status{font-size:14px;margin-top:12px;color:var(--afaq-teal)} .zakat-result{display:block;text-align:center;font-size:30px;color:var(--afaq-teal);margin-top:20px} .zakat-result:empty{display:none} #zakat-form>.button{margin-top:20px} .campaign-list{display:grid;gap:10px} .campaign-list button{display:flex;align-items:center;gap:12px;text-align:right;min-height:70px;padding:12px;border:1px solid var(--afaq-border);background:var(--afaq-white);border-radius:10px;color:var(--afaq-teal)} .campaign-list button span{flex:1} .dialog ul{padding-right:20px;margin-bottom:26px} .body-locked{overflow:hidden} @media(max-width:640px){.dialog{padding:32px 23px 23px}.dialog h2{font-size:27px;padding-left:15px}.dialog-close{top:10px;left:10px}.campaign-list button{font-size:15px}} #donation-amount[readonly]{background:var(--afaq-paper)} /* A campaign with fixed amounts (T14): chosen with the buttons above. */ /* css/sections/hero.css */ /* * Home hero: grid, copy, collage layers, torn paper edge, motion controls. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* HERO / 12-column grid: artwork eight columns, editorial copy four. */ .hero{position:relative;margin-top:-8px;padding-bottom:64px;isolation:isolate} .hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));position:relative;min-height:620px} .hero-copy{grid-column:9 / 13;align-self:center;padding:0 12px 45px 0;text-align:right;z-index:5;position:relative} .hero-copy h1{font-family:var(--afaq-font-display);font-weight:800;font-size:clamp(48px,5.3vw,77px);line-height:1.18;letter-spacing:-2.4px;color:var(--afaq-teal);margin-bottom:23px} .hero-copy .line{display:block;padding-block:4px;overflow:hidden} .hero-copy .line>span{display:block} .hero-copy .gold{color:var(--afaq-mustard)} .hero-copy p{font-weight:600;font-size:18px;line-height:1.9;max-width:365px;margin-bottom:24px} .hero-actions{display:flex;gap:18px} .hero-actions .button{flex:1;padding-inline:15px} .hero-art{grid-column:1 / 9;grid-row:1;position:relative;min-width:0;height:100%;margin-right:calc(var(--afaq-gutter)*-1);margin-left:-10px;z-index:1} .collage-cursor{position:absolute;inset:0;isolation:isolate} .collage-layer{position:absolute;object-fit:contain;pointer-events:none} .gold-disc{width:53%;aspect-ratio:1;border-radius:50%;background:var(--afaq-gold);position:absolute;top:5%;left:18%;background-image:var(--afaq-deco-paper-grain, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/paper-grain.svg'))} .hero-landscape{width:121%;max-width:none;right:-7%;top:-7%;height:99%;object-fit:fill;z-index:1} .hero-child{height:83%;width:58%;left:12%;bottom:1%;object-position:bottom;z-index:2;filter:drop-shadow(2px 5px 2px #263c3510);filter:drop-shadow(2px 5px 2px oklch(from var(--afaq-text) calc(l + 0.027) calc(c + 0.012) h / 0.0627451))} .hero-community{width:101%;max-width:none;right:-2%;height:56%;bottom:-2%;object-fit:fill;z-index:3} .hero-flowers{width:36%;left:23%;bottom:-3%;z-index:4} .dotted-orbit{position:absolute;width:190px;height:190px;border:2px dotted var(--afaq-teal);border-radius:50%;right:-80px;top:7%;opacity:.6} .dotted-orbit::before,.dotted-orbit::after{content:"";position:absolute;border:2px dotted var(--afaq-teal);border-radius:50%;inset:14px} .dotted-orbit::after{inset:28px} .collage-caption{position:absolute;bottom:-2%;left:19%;font-size:13px;color:var(--afaq-teal);z-index:6;letter-spacing:.4px} .hero-grain{position:absolute;inset:0;background:radial-gradient(ellipse at 90% 45%,#9aada81c,transparent 58%);background:radial-gradient(ellipse at 90% 45%,oklch(from var(--afaq-mist) calc(l + 0.022) calc(c - 0.013) h / 0.109804),transparent 58%);z-index:-1} .hero-tear{position:absolute;bottom:0;left:0;right:0;height:100px;z-index:3;background:var(--afaq-teal);transform:scaleX(-1)} .hero-tear::after{content:"";position:absolute;inset:20px -1px -1px;background:var(--afaq-paper);background-image:var(--afaq-deco-paper-grain, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/paper-grain.svg'))} /* Tablet: retain collage and proportions without horizontal overflow. */ @media(min-width:1600px){.hero-grid{min-height:665px}.hero-copy h1{font-size:82px}} @media(max-width:1190px){.hero-grid{min-height:540px}.hero-copy h1{font-size:60px}.hero-copy p{font-size:16px}.hero-actions{gap:10px}.hero-actions .button{font-size:12px}} @media(max-width:960px){.hero-grid{min-height:460px}.hero-copy{padding-bottom:15px;grid-column:9/13;padding-right:0}.hero-copy h1{font-size:48px;letter-spacing:-1.5px}.hero-copy p{font-size:14px;line-height:1.8}.hero-actions .button{font-size:11px;padding:9px 10px;min-height:44px}.hero-actions{gap:8px}.hero-art{margin-left:-16px}.hero-child{width:64%;height:85%;left:9%}} @media(max-width:640px){.hero{padding-bottom:58px;margin-top:5px}.hero-grid{display:flex;flex-direction:column;min-height:0;gap:0}.hero-copy{order:0;text-align:center;padding:17px 0 0}.hero-copy h1{font-size:clamp(42px,11vw,60px);line-height:1.24;letter-spacing:-1.3px;margin-bottom:16px;display:grid;grid-template-columns:1fr 1fr;column-gap:10px;max-width:470px;margin-inline:auto}.hero-copy .line{padding-block:3px}.hero-copy .line:nth-child(odd){text-align:left}.hero-copy .line:nth-child(even){text-align:right}.hero-copy p{font-size:16px;line-height:1.85;max-width:360px;margin:0 auto 19px}.hero-actions{max-width:340px;margin-inline:auto;gap:13px}.hero-actions .button{font-size:13px;min-height:48px}.hero-art{order:1;min-height:380px;height:94vw;max-height:530px;width:calc(100% + var(--afaq-gutter)*2);margin:5px calc(var(--afaq-gutter)*-1) 0}.hero-landscape{top:0;height:94%;width:113%;right:-4%}.gold-disc{top:8%;left:18%;width:55%}.hero-child{height:85%;width:62%;left:10%;bottom:0}.hero-community{height:55%;bottom:-2%;right:-2%;width:101%}.hero-flowers{width:38%;left:24%;bottom:-3%}.dotted-orbit{width:135px;height:135px;right:-57px;top:10%}.collage-caption{display:none}.hero-tear{height:74px}} @media(max-width:370px){.hero-copy h1{font-size:39px}} @media print{.hero-grid{min-height:440px}.hero-art{height:440px}} .hero-motion-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px;color:var(--afaq-teal);font-size:12px} .hero-motion-controls button{background:none;min-height:44px;padding:5px 4px;display:flex;align-items:center;gap:7px;color:inherit} .hero-motion-controls button:hover{color:var(--afaq-gold-ink)} .replay-motion>span{font-size:24px;line-height:1} .hero{overflow:clip} @media(max-width:640px){.hero-copy h1{display:block;font-size:clamp(43px,12vw,59px);line-height:1.12}.hero-copy .line:nth-child(n){text-align:center}.hero-copy{padding-top:10px}.hero-art{margin-top:0}} /* Real raster paper edges: the silhouettes and fibers are in the WebP assets. */ .hero-tear{height:155px;background:transparent var(--afaq-deco-torn-teal, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-teal.webp?v=3')) center top/100% 100% no-repeat;transform:none;clip-path:none} .hero-tear::after{inset:32px 0 -4px;background:transparent var(--afaq-deco-torn-ivory, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-ivory.webp?v=3')) center top/100% 100% no-repeat;clip-path:none;filter:drop-shadow(0 -2px 2px #40371912);filter:drop-shadow(0 -2px 2px oklch(from var(--afaq-shadow-ink) calc(l - 0.065) calc(c - 0.005) h / 0.0705882))} .hero{padding-bottom:110px} @media(max-width:640px){.hero{padding-bottom:90px}} @media(max-width:640px){.hero-tear{height:95px}.hero-tear::after{top:20px}} /* 3. Desktop hero: copy and CTAs sit hard against the left gutter, clear of the footage; a whisper-soft paper scrim keeps the type legible. */ @media(min-width:961px){.hero-copy{padding:0 0 45px;text-align:left}.hero-copy h1{letter-spacing:-1.9px}.hero-copy p{max-width:330px;margin-inline-start:auto;margin-inline-end:0}.hero-actions{justify-content:flex-end;gap:14px}.hero-actions .button{flex:0 0 auto;padding-inline:26px}.hero-motion-controls{justify-content:flex-end;gap:16px}.hero:has([data-interactive]) .hero-film-shell::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(to left,transparent 46%,rgb(240 231 210 / .42) 74%,rgb(240 231 210 / .7) 100%); background:linear-gradient(to left,transparent 46%,oklch(from var(--afaq-paper) calc(l + 0.003) calc(c + 0.005) h / 0.42) 74%,oklch(from var(--afaq-paper) calc(l + 0.003) calc(c + 0.005) h / 0.7) 100%); }} @media(min-width:961px) and (max-width:1190px){.hero-copy p{max-width:300px}} /* Shared typography across every page and dialog. */ .hero-copy h1{font-weight:700;letter-spacing:0} /* css/sections/impact.css */ /* * Impact statistics strip. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* IMPACT */ .impact{width:calc(100% - var(--afaq-gutter)*3.8);max-width:1170px;position:relative;z-index:6;margin-top:-52px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:23px 13px;background:var(--afaq-white);border:1px solid var(--afaq-border);border-radius:var(--afaq-radius);box-shadow:var(--afaq-shadow);min-height:130px} .stat{display:flex;justify-content:center;align-items:center;gap:21px;padding:0 15px;text-align:center;line-height:1.45;position:relative;transition:transform .25s} .stat:hover{transform:translateY(-4px)} .stat+.stat{border-right:1px solid #cfd0c5;border-right:1px solid oklch(from var(--afaq-border) calc(l - 0.024) calc(c - 0.01) h)} .stat-icon{width:70px;height:70px;border-radius:50%;background:var(--afaq-teal);color:var(--afaq-white);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 12px #ffffff25} .stat-icon .icon{width:37px;height:37px;stroke-width:1.3} .stat strong{display:block;color:var(--afaq-teal);font-size:20px} .stat span:not(.stat-icon){font-size:15px} .stat .stat-number,.stat .stat-number span{font-size:37px;color:var(--afaq-mustard);font-weight:500;line-height:1.2} .stat strong.gold-text{font-size:24px} @media(max-width:1190px){.impact{width:calc(100% - var(--afaq-gutter)*3)}.stat{gap:13px;padding-inline:9px}.stat-icon{width:57px;height:57px}.stat-icon .icon{width:31px}.stat strong{font-size:18px}} @media(max-width:960px){.impact{width:calc(100% - var(--afaq-gutter)*2);padding:18px 9px;min-height:115px}.stat{gap:9px;padding-inline:5px}.stat-icon{width:47px;height:47px}.stat-icon .icon{width:27px}.stat strong{font-size:15px}.stat span:not(.stat-icon){font-size:12px}.stat .stat-number,.stat .stat-number span{font-size:30px}.stat strong.gold-text{font-size:19px}} @media(max-width:640px){.impact{margin-top:-38px;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px 9px;gap:0;border-radius:17px}.stat{gap:13px;min-height:99px;padding:10px 6px}.stat+.stat{border:0}.stat:nth-child(even){border-right:1px solid var(--afaq-border)}.stat:nth-child(n+3){border-top:1px solid var(--afaq-border)}.stat-icon{width:48px;height:48px}.stat strong{font-size:16px}.stat span:not(.stat-icon){font-size:13px}.stat .stat-number,.stat .stat-number span{font-size:31px}} @media(max-width:370px){.stat{gap:7px}.stat-icon{width:40px;height:40px}} /* css/sections/about.css */ /* * About section (text + artwork). * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* ABOUT / PROGRAMS */ .section-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px} .about{padding-top:28px;align-items:center;min-height:293px} .about-copy{grid-column:1 / 7;padding:15px 32px 15px 30px} .about-copy p{font-size:18px;line-height:2;max-width:590px} .about-art{grid-column:7 / 13;position:relative;margin-left:-30px} .about-art img{width:100%;max-height:285px;object-fit:contain} @media(max-width:1190px){.about-copy{padding-right:20px;padding-left:0}.about-copy p{font-size:16px}.about{min-height:265px}} @media(max-width:960px){.about-copy{grid-column:1/8}.about-art{grid-column:8/13;margin-left:-15px}.about-copy p{font-size:15px}.about{min-height:250px}} @media(max-width:640px){.about{display:flex;flex-direction:column;padding-top:35px;gap:4px}.about-copy{padding:0 4px}.about-copy p{font-size:16px;line-height:2}.about-art{margin:0 -10px;width:calc(100% + 20px)}.about-art img{max-height:270px}} /* css/sections/programs.css */ /* * Programmes grid and cards. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ .program-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px} .programs{padding-inline:36px;padding-top:10px} .program-card{background:#fffdf73d;background:rgb(from var(--afaq-white) r g b / 0.2392);border:1px solid var(--afaq-border);border-radius:var(--afaq-radius);padding:16px 12px 9px;box-shadow:var(--afaq-shadow);transition:box-shadow .3s,transform .3s;min-width:0} .program-card:hover{transform:translateY(-5px);box-shadow:0 10px 24px #5d461d0c;box-shadow:0 10px 24px oklch(from var(--afaq-shadow-ink) calc(l + 0.006) calc(c + 0.012) h / 0.0470588)} .program-card header{display:flex;align-items:center;gap:9px;margin-bottom:11px} .program-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#006d720a;background:rgb(from var(--afaq-teal) r g b / 0.0392);color:var(--afaq-teal);transition:transform .35s;flex:none} .program-icon .icon{width:31px;height:31px} .program-card:nth-child(even) .program-icon{background:#c99a3d10;background:rgb(from var(--afaq-gold) r g b / 0.0627);color:var(--afaq-gold-ink)} .program-card:nth-child(even) h3{color:var(--afaq-gold-ink)} .program-card:hover .program-icon{transform:translateY(-3px) rotate(-6deg)} .program-card h3{font-size:clamp(16px,1.65vw,23px);color:var(--afaq-teal);font-weight:700;white-space:nowrap} .program-image{border-radius:11px;overflow:hidden;aspect-ratio:1.96;background:var(--afaq-paper)} .program-image img{width:100%;height:100%;transition:transform .6s} .program-card:hover .program-image img{transform:scale(1.04)} .program-card p{font-size:15px;line-height:1.8;margin:13px 8px 1px;min-height:54px} @media(max-width:1190px){.programs{padding-inline:25px}.program-card{padding:12px 9px 6px}.program-card p{font-size:14px;margin-inline:5px;min-height:75px}.program-card h3{font-size:17px}.program-icon{width:36px;height:36px}.program-icon .icon{width:26px}} @media(max-width:960px){.programs{padding-inline:0}.program-grid{gap:10px}.program-card h3{font-size:15px}.program-card header{gap:5px}.program-icon{width:31px;height:31px}.program-icon .icon{width:23px}.program-card p{font-size:13px;min-height:75px}} @media(max-width:640px){.programs{padding-top:8px}.program-grid{grid-template-columns:1fr;gap:18px}.program-card{padding:17px 16px 9px;border-radius:18px}.program-card header{gap:10px;margin-bottom:13px}.program-card h3{font-size:23px}.program-icon{width:45px;height:45px}.program-icon .icon{width:30px}.program-image{aspect-ratio:1.94}.program-card p{font-size:16px;min-height:0;margin-top:13px}} @media(max-width:370px){.program-card h3{font-size:21px}} @media print{.program-grid{grid-template-columns:repeat(2,1fr)}.program-card,.purpose-panel,.campaign-card{break-inside:avoid}} @media(min-width:641px) and (max-width:960px){.program-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.program-card{padding:15px 13px 8px}.program-card h3{font-size:21px}.program-icon{width:42px;height:42px}.program-icon .icon{width:29px}.program-card p{font-size:15px;min-height:54px}} /* Original program photography: opaque, high resolution, natural colors. */ .program-image img{object-fit:cover;object-position:center} /* 10. Programme artwork answers the pointer: a slow push-in, a teal wash from the base and one pass of light across the paper. Focus gets the same treatment so the keyboard is not a second-class path. */ .program-card{transition:box-shadow .35s,transform .35s,border-color .35s} .program-card:hover,.program-card:focus-within{border-color:#c99a3d5c;border-color:rgb(from var(--afaq-gold) r g b / 0.3608)} .program-image{position:relative;isolation:isolate} .program-image img{transition:transform .75s cubic-bezier(.2,.7,.25,1),filter .5s} .program-image::before,.program-image::after{content:"";position:absolute;pointer-events:none} .program-image::after{ inset:0;z-index:2;opacity:0;transition:opacity .45s; background:linear-gradient(to top,rgb(0 94 99 / .52),rgb(0 94 99 / .1) 46%,transparent 72%); background:linear-gradient(to top,oklch(from var(--afaq-deep-teal) l c h / 0.52),oklch(from var(--afaq-deep-teal) l c h / 0.1) 46%,transparent 72%); } .program-image::before{ top:-10%;bottom:-10%;left:-60%;width:42%;z-index:3; background:linear-gradient(100deg,transparent,rgb(255 253 247 / .34),transparent); background:linear-gradient(100deg,transparent,oklch(from var(--afaq-white) l c h / 0.34),transparent); transform:translateX(0) skewX(-11deg);transition:transform .9s ease; } .program-card:hover .program-image img, .program-card:focus-within .program-image img{transform:scale(1.09);filter:saturate(1.07) contrast(1.03)} .program-card:hover .program-image::after, .program-card:focus-within .program-image::after{opacity:1} .program-card:hover .program-image::before, .program-card:focus-within .program-image::before{transform:translateX(400%) skewX(-11deg)} .program-card:hover .text-link,.program-card:focus-within .text-link{color:var(--afaq-gold-ink)} @media(hover:none){/* Touch has no pointer to follow, and a tap can leave :hover stuck. Drop the sweep; the wash still reads on focus after a tap. */ .program-image::before{display:none}} /* css/sections/purpose.css */ /* * Vision and mission panels. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* VISION + MISSION */ .purpose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:20px} .purpose-panel{height:235px;overflow:hidden;border-radius:13px;position:relative;background:var(--afaq-teal);color:var(--afaq-white);isolation:isolate} .purpose-panel::after{content:"";position:absolute;inset:0;background:var(--afaq-deco-paper-grain, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/paper-grain.svg'));opacity:.32;mix-blend-mode:soft-light;pointer-events:none} .purpose-panel::before{content:"";position:absolute;bottom:-19px;left:0;right:0;height:48px;background:var(--afaq-cream);z-index:5} .mission{background:var(--afaq-gold);color:#302819;color:oklch(from var(--afaq-shadow-ink) calc(l - 0.123) calc(c - 0.025) h)} .purpose-copy{position:relative;width:54%;margin-right:18%;padding-top:23px;z-index:3} .purpose-copy h2{font-size:32px;display:table;position:relative;margin-bottom:14px} .purpose-copy h2::after{content:"";position:absolute;right:0;bottom:-4px;width:65px;height:4px;background:var(--afaq-gold)} .mission .purpose-copy h2::after{background:var(--afaq-teal)} .purpose-copy p{font-size:17px;line-height:1.95} .purpose-icon{position:absolute;top:23px;right:21px;width:67px;height:67px;border:1px solid #ffffff30;border-radius:50%;background:#ffffff0b;display:grid;place-items:center;color:#fae2a3;color:oklch(from var(--afaq-paper) calc(l - 0.009) calc(c + 0.06) h);box-shadow:0 4px 8px #00000016} .mission .purpose-icon{color:var(--afaq-white);background:#9c702c24;background:oklch(from var(--afaq-gold-ink) calc(l + 0.045) calc(c + 0.003) h / 0.141176)} .purpose-icon .icon{width:42px;height:42px;stroke-width:1.3} .purpose-art{position:absolute;left:0;bottom:0;width:36%;height:100%;z-index:1} .mission-art>img:first-child{position:absolute;bottom:4px;left:-4%;height:97%;max-width:none;width:115%;object-fit:contain;object-position:bottom;filter:grayscale(1)} .purpose-art .village-front{position:absolute;bottom:-4px;width:160%;max-width:none;left:-24%} .vision-art>span{position:absolute;width:90%;aspect-ratio:1;border-radius:50%;background:var(--afaq-cream);top:15px;left:0} .vision-art img{position:absolute;width:220%;max-width:none;left:-50%;bottom:0;height:97%;object-fit:cover;object-position:left bottom} @media(max-width:1190px){.purpose-panel{height:218px}.purpose-copy p{font-size:15px}.purpose-icon{right:15px;width:54px;height:54px}.purpose-icon .icon{width:34px}.purpose-copy h2{font-size:28px}} @media(max-width:960px){.purpose-copy{width:57%;margin-right:17%;padding-top:20px}.purpose-copy p{font-size:14px;line-height:1.9}.purpose-icon{right:10px;width:45px;height:45px}.purpose-icon .icon{width:29px}.purpose-panel{height:210px}} @media(max-width:640px){.purpose{grid-template-columns:1fr;gap:17px;padding-top:25px}.purpose-panel{height:235px}.purpose-copy{width:55%;margin-right:18%;padding-top:25px}.purpose-copy h2{font-size:30px}.purpose-copy p{font-size:16px;line-height:1.9}.purpose-icon{width:51px;height:51px;right:14px;top:27px}.purpose-art{width:34%}} @media(max-width:370px){.purpose-copy p{font-size:14px}.purpose-copy{width:57%}} .purpose-art{width:29%;overflow:hidden;mask-image:linear-gradient(to right,#000 82%,transparent)} .purpose-copy{width:53%;margin-right:18%} .vision-art img{width:245%;left:-65%} @media(max-width:640px){.purpose-art{width:29%}.purpose-copy{width:53%;margin-right:18%}} .purpose-panel::before{height:64px;bottom:-32px;background:transparent var(--afaq-deco-torn-ivory, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-ivory.webp?v=3')) center top/100% 100% no-repeat;clip-path:none} @media(max-width:640px){.purpose-panel::before{height:58px;bottom:-29px}} /* css/sections/campaigns.css */ /* * Campaigns grid and cards. * Split from the prototype stylesheet in phase 1.3; rule order preserved. */ /* CAMPAIGNS */ .campaigns{padding-top:20px;padding-bottom:28px} .campaign-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-inline:0} .campaign-card{position:relative;display:flex;align-items:stretch;gap:15px;padding:11px;border:1px solid var(--afaq-border);border-radius:14px;background:#fffdf73d;background:rgb(from var(--afaq-white) r g b / 0.2392);box-shadow:var(--afaq-shadow);transition:transform .3s,box-shadow .3s;min-width:0;isolation:isolate} .campaign-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #5d461d0d;box-shadow:0 8px 20px oklch(from var(--afaq-shadow-ink) calc(l + 0.006) calc(c + 0.012) h / 0.0509804)} .campaign-card:focus-within{outline:3px solid var(--afaq-gold-ink);outline-offset:3px} .campaign-open{position:absolute;inset:0;z-index:2;background:none;border-radius:inherit} .campaign-image{width:31%;min-height:148px;border-radius:9px;overflow:hidden;flex:none} .campaign-image img{height:100%;width:100%;transition:transform .5s} .campaign-card:hover .campaign-image img{transform:scale(1.04)} .campaign-body{flex:1;padding:0 4px;min-width:0;display:flex;flex-direction:column} .campaign-body h3{font-size:20px;color:#614819;color:oklch(from var(--afaq-shadow-ink) calc(l + 0.015) calc(c + 0.019) h);line-height:1.5;margin-bottom:4px} .campaign-body p{font-size:15px;color:var(--afaq-deep-teal);line-height:1.7} .all-campaigns{display:flex;margin:14px auto 0;min-width:270px;min-height:44px;padding-block:5px;gap:50px} @media(max-width:1190px){.campaign-body h3{font-size:17px}.campaign-body p{font-size:14px}.campaign-card{gap:10px}} @media(max-width:960px){.campaign-card{padding:9px;gap:8px}.campaign-body h3{font-size:15px}.campaign-body p{font-size:13px}.campaign-image{width:29%;min-height:147px}} @media(max-width:640px){.campaigns{padding-top:28px;padding-bottom:45px}.campaign-grid{grid-template-columns:1fr;gap:15px}.campaign-card{padding:11px;gap:16px}.campaign-body h3{font-size:20px}.campaign-body p{font-size:16px}.campaign-image{width:29%;min-height:154px}.all-campaigns{margin-top:20px;min-height:48px;width:100%;gap:40px}} @media(max-width:370px){.campaign-body h3{font-size:17px}.campaign-body p{font-size:14px}} @media print{.campaign-grid{grid-template-columns:repeat(3,1fr)}} .campaign-image img{object-fit:cover;object-position:center} /* css/components/editorial-motion.css */ /* Reusable editorial project cards, retaining original portrait collage art. */ .campaigns{padding-top:36px;padding-bottom:44px} .campaigns .section-title{margin-bottom:13px} .campaigns-intro{text-align:center;color:var(--afaq-deep-teal);margin:0 0 25px;font-size:17px} .campaign-grid{gap:18px} .campaign-card{padding:10px;gap:14px;border-radius:18px;background:var(--afaq-cream) var(--afaq-deco-paper-grain, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/paper-grain.svg'));min-height:290px;overflow:hidden} .campaign-image{position:relative;width:40%;min-height:268px;border-radius:11px} .campaign-image img{object-fit:cover;object-position:center;height:100%;transition:transform .8s cubic-bezier(.2,.65,.3,1)} .campaign-image::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:24px;background:var(--afaq-deco-torn-ivory, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-ivory.webp')) center/100% 100%;pointer-events:none} .campaign-body{padding:9px 0 3px;gap:10px} .campaign-category{font-family:var(--afaq-font-ui);font-size:10px;color:var(--afaq-deep-teal);letter-spacing:0;border-bottom:1px solid var(--afaq-border);padding-bottom:9px} /* T31: the cause sits under the picture in the same column. The picture took the whole column and pushed the cause out of the card, where its overflow hid it. The picture now takes what is left, and the torn edge stays on the picture. The front page places the cause over the picture (pages/front.css). */ #main:not(:has(.hero)) .campaign-image{display:flex;flex-direction:column} #main:not(:has(.hero)) .campaign-image>a,#main:not(:has(.hero)) .campaign-image>img{position:relative;flex:1 1 auto;min-height:0} #main:not(:has(.hero)) .campaign-image>a>img{width:100%;height:100%} #main:not(:has(.hero)) .campaign-image>a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:24px;background:var(--afaq-deco-torn-ivory, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-ivory.webp')) center/100% 100%;pointer-events:none} #main:not(:has(.hero)) .campaign-image:has(>a)::after{display:none} #main:not(:has(.hero)) .campaign-category{flex:none;margin-top:8px} .campaign-body h3{font-size:21px;line-height:1.65;margin:0;color:var(--afaq-text)} .campaign-body p{font-size:15px;line-height:1.9;color:var(--afaq-deep-teal)} .campaign-progress{padding-top:4px;font-size:12px} .campaign-progress>span{display:flex;justify-content:space-between;align-items:center;gap:4px} .campaign-progress bdi{font-size:19px;font-weight:600;color:var(--afaq-gold-ink)} .progress-track{height:6px;margin-top:7px;direction:rtl} .progress-track>span{transform-origin:right} .campaign-support{display:flex;align-items:center;justify-content:space-between;gap:7px;text-align:right;min-height:44px;padding:7px 10px;border:1px solid var(--afaq-teal);border-radius:7px;color:var(--afaq-teal);background:transparent;font-family:var(--afaq-font-ui);font-size:11px;transition:background .25s,color .25s} .campaign-support .icon{width:18px;height:18px;transition:transform .3s} .campaign-support:hover,.campaign-support:focus-visible{background:var(--afaq-teal);color:var(--afaq-cream)} /* Why a campaign takes no donation now (T09): said, not a button. */ span.campaign-state,span.campaign-state:hover{border-color:var(--afaq-border);background:transparent;color:var(--afaq-text);cursor:default} .campaign-support:hover .icon{transform:translateX(-4px)} .campaign-card:hover{transform:translateY(-6px);box-shadow:0 12px 25px #53482912;box-shadow:0 12px 25px oklch(from var(--afaq-shadow-ink) calc(l + 0.001) calc(c - 0.004) h / 0.0705882)} .campaign-card:hover .campaign-image img{transform:scale(1.045) rotate(-.6deg)} .all-campaigns{margin-top:24px} .reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:101;pointer-events:none;direction:rtl} .reading-progress span{display:block;height:100%;width:100%;background:var(--afaq-gold);transform:scaleX(0);transform-origin:right} .stat-icon{transition:transform .4s} .stat:hover .stat-icon{transform:translateY(-3px) rotate(-5deg)} .program-card:hover .program-icon{transform:translateY(-3px) rotate(5deg)} .program-icon{transition:transform .4s} .header-donate:hover .icon{animation:donation-heart .8s ease-in-out 1} @keyframes donation-heart{0%,100%{transform:scale(1)}35%{transform:scale(1.18)}65%{transform:scale(.96)}} @media(min-width:641px) and (max-width:960px){ .campaign-grid{grid-template-columns:1fr;gap:18px} .campaign-card{min-height:240px;max-width:660px;width:100%;margin-inline:auto;padding:14px;gap:24px} .campaign-image{width:35%;min-height:240px;max-height:280px} .campaign-body{padding:10px;gap:11px} .campaign-body h3{font-size:25px}.campaign-body p{font-size:17px} .campaign-category{font-size:12px}.campaign-support{font-size:13px} } @media(max-width:640px){ .campaigns{padding-top:30px}.campaign-grid{grid-template-columns:1fr;gap:20px} .campaign-card{gap:13px;padding:10px;min-height:295px} .campaign-image{width:40%;min-height:280px} .campaign-body h3{font-size:20px}.campaign-body p{font-size:14px} .campaign-support{font-size:10px;padding-inline:7px}.campaign-category{font-size:9px} } @media(prefers-reduced-motion:reduce){.header-donate:hover .icon{animation:none}.campaign-card,.campaign-image img,.campaign-support .icon,.stat-icon,.program-icon{transition:none}} html.motion-paused .header-donate:hover .icon{animation:none} html.motion-paused .campaign-card,html.motion-paused .campaign-image img,html.motion-paused .stat-icon,html.motion-paused .program-icon{transform:none!important;transition:none} /* css/components/collage-details.css */ /* Source-aligned collage overlays: never stretch the map or sewing portrait. */ .hero-detail-plane{position:absolute;pointer-events:none;z-index:2;overflow:hidden} .sewing-film{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .35s;mask-image:radial-gradient(ellipse 12% 29% at 42% 77%,#000 78%,transparent 100%)} .sewing-film.is-ready{opacity:1} .malawi-cutout{position:absolute;left:42%;top:5%;width:10%;height:29%;object-fit:contain;filter:drop-shadow(2px 3px 2px #25333224);filter:drop-shadow(2px 3px 2px rgb(from var(--afaq-text) r g b / 0.1412));transform:rotate(-8deg);animation:map-paper-float 7s ease-in-out infinite alternate;animation-play-state:paused} .tank-orbits{position:absolute;left:69%;top:0;width:24%;height:42%;border:1.5px dashed #006d7270;border:1.5px dashed rgb(from var(--afaq-teal) r g b / 0.4392);border-radius:50%;transform:rotate(-18deg);animation:tank-orbit 80s linear infinite;animation-play-state:paused;opacity:.65} .tank-orbits::before,.tank-orbits::after{content:"";position:absolute;inset:9%;border:1px dotted #006d72a0;border:1px dotted rgb(from var(--afaq-teal) r g b / 0.6275);border-radius:50%} .tank-orbits::after{inset:19%;border-color:var(--afaq-gold)} .ambient-active .malawi-cutout,.ambient-active .tank-orbits{animation-play-state:running} @keyframes map-paper-float{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-4px) rotate(-6deg)}} @keyframes tank-orbit{to{transform:rotate(342deg)}} .purpose-panel.refreshed-collage{height:300px;border-radius:15px} .refreshed-collage .purpose-art{inset:-5px;width:calc(100% + 10px);height:calc(100% + 10px);mask-image:none;overflow:hidden} .refreshed-collage .purpose-art>img:first-child{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none;filter:none;transform:translate(var(--collage-x,0px),var(--collage-y,0px)) scale(1.025);transition:transform .7s ease} .refreshed-collage .purpose-copy{width:49%;margin-right:6%;padding-top:34px} .refreshed-collage .purpose-copy h2{font-size:31px;margin-bottom:20px} .refreshed-collage .purpose-copy p{font-size:16px;line-height:1.95} .refreshed-collage .purpose-icon{z-index:3;width:46px;height:46px;right:6%;top:auto;bottom:20px} .refreshed-collage .purpose-icon .icon{width:29px;height:29px} .refreshed-collage::before{display:none} .site-footer{background:var(--afaq-cream);margin-top:40px} .site-footer::before{inset:-17.5vw 0 auto;height:31.5vw;background:transparent var(--afaq-deco-footer-torn, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/07-footer-torn-teal.webp')) center top/100% 33.333vw no-repeat;-webkit-mask-image:none;mask-image:none;pointer-events:none;z-index:1} .site-footer::after{inset:0;background:linear-gradient(to bottom,transparent 0 12vw,#03504e 12vw);background:linear-gradient(to bottom,transparent 0 12vw,oklch(from var(--afaq-deep-teal) calc(l - 0.048) calc(c - 0.009) h) 12vw);opacity:1;mix-blend-mode:normal;pointer-events:none;z-index:0} .site-footer .copyright{position:relative;z-index:2} @media(max-width:960px){.refreshed-collage .purpose-copy{width:51%;margin-right:5%;padding-top:23px}.refreshed-collage .purpose-copy p{font-size:14px}.refreshed-collage .purpose-copy h2{font-size:27px}.purpose-panel.refreshed-collage{height:290px}} @media(max-width:640px){.purpose-panel.refreshed-collage{height:290px}.refreshed-collage .purpose-copy{width:49%;padding-top:27px}.refreshed-collage .purpose-copy p{font-size:14px;line-height:1.95}.malawi-cutout{left:47%;top:1%;width:10%;height:26%}.tank-orbits{opacity:.35}} @media(prefers-reduced-motion:reduce){.malawi-cutout,.tank-orbits{animation:none}.refreshed-collage .purpose-art>img:first-child{transition:none}} html.motion-paused .malawi-cutout,html.motion-paused .tank-orbits{animation-play-state:paused} html.motion-paused .refreshed-collage .purpose-art>img:first-child{transform:none;transition:none} /* Keep the impact card slightly below the hero tear while retaining a light overlap. */ .impact{margin-top:-30px} @media(max-width:640px){.impact{margin-top:-16px}} /* Register the older 4:3 water clip against the current 16:9 collage plane. */ .water-film-region{position:absolute;inset:0;pointer-events:none;mask-image:radial-gradient(ellipse 15% 27% at 90% 68%,#000 76%,transparent 100%)} .water-film{position:absolute;width:75%;height:100%;max-width:none;left:23%;top:0;object-fit:fill;opacity:0;transition:opacity .5s} .water-film.is-ready{opacity:1} .water-film-region{mask-image:radial-gradient(ellipse 15% 27% at 90% 68%,#000 76%,transparent 100%),linear-gradient(to right,#000 93%,transparent 95.5%),linear-gradient(to bottom,#000 76%,transparent 84%);mask-composite:intersect} /* css/components/shared-paper.css */ /* Shared masthead surface. Keep these colours identical across every template. */ :root{--afaq-masthead-surface:var(--afaq-cream)} html body .site-header, html body .site-header.is-scrolled, html body.projects-page .site-header.is-scrolled, html body.donate-page .site-header.is-scrolled, html body .hero, html body .giving-hero, html body .projects-banner{background-color:var(--afaq-masthead-surface)} html body .site-header{border-bottom-color:transparent;backdrop-filter:none} html body .site-header::after{display:none} /* Fade only the artwork's top edge; live text and controls stay fully opaque. */ html body .giving-hero-art, html body .reference-banner-art, html body .hero:has([data-interactive]) .hero-film-shell{ -webkit-mask-image:linear-gradient(to bottom,transparent 0 12px,#000 65px); mask-image:linear-gradient(to bottom,transparent 0 12px,#000 65px); } @media(max-width:640px){ html body .giving-hero-art, html body .reference-banner-art, html body .hero:has([data-interactive]) .hero-film-shell{ -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40px); mask-image:linear-gradient(to bottom,transparent,#000 40px); } } /* Full-bleed footer: use the paper texture for the body as well as its torn edge. */ html body .site-footer{width:100%;max-width:none;margin-inline:0;padding-bottom:10px;background-color:var(--afaq-cream);background-image:var(--afaq-deco-footer-torn, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/07-footer-torn-teal.webp'));background-repeat:no-repeat;background-size:calc(100% + 12px) 350%;background-position:center 93%} html body .site-footer::before{left:-6px;right:-6px;background-size:100% 33.333vw} html body .site-footer::after{display:none} html body .site-footer .copyright{padding-top:12px;padding-bottom:0;margin-bottom:0} html body .site-footer{background-image:none} html body .site-footer::after{display:block;inset:12vw -6px -2px;background:var(--afaq-deco-footer-torn, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/07-footer-torn-teal.webp')) center 91% / 100% 350% no-repeat;opacity:1;mix-blend-mode:normal;z-index:0;pointer-events:none} /* Trim the source's outer side strips and bottom fringe, not the torn top edge. */ html body .site-footer::before{left:-4vw;right:-4vw;height:30vw;background-size:100% 33.333vw} html body .site-footer::after{left:-4vw;right:-4vw} /* css/components/icon-refinements.css */ /* Decorative supplied icons retain text labels and existing control targets. */ img.theme-art-icon{object-fit:contain;flex-shrink:0;mix-blend-mode:multiply;stroke:none;transition:translate .3s} .program-icon .theme-art-icon{width:32px;height:32px} .news-card-category .theme-art-icon{width:34px;height:34px;padding:2px} .news-stat>.theme-art-icon{width:60px;height:60px;padding:10px;border:1px solid #c99a3d55;border:1px solid rgb(from var(--afaq-gold) r g b / 0.3333);border-radius:50%;background:#fffdf760;background:rgb(from var(--afaq-white) r g b / 0.3765)} .project-copy h2 .theme-art-icon{width:33px;height:33px} .step-top .theme-art-icon{width:42px;height:42px} .giving-paper h2 .theme-art-icon{width:34px;height:34px} .social-links .theme-social-icon{width:35px;height:35px;object-fit:contain;mix-blend-mode:multiply} @media(hover:hover) and (prefers-reduced-motion:no-preference){.program-card:hover .theme-art-icon,.news-card:hover .theme-art-icon,.project-tile:hover h2 .theme-art-icon{translate:0 -3px}} @media(max-width:560px){.news-stat>.theme-art-icon{width:49px;height:49px;padding:8px}} @media(prefers-reduced-motion:reduce){img.theme-art-icon{transition:none}} html.motion-paused img.theme-art-icon{translate:none!important;transition:none} /* css/pages/ashara.css */ /* Campaign styles; shared header, footer and type remain in the site stylesheet. */ .ashara-page{--afaq-content:1200px}.ashara-page main{overflow:clip}.ash-icon{width:43px;height:43px;object-fit:contain;mix-blend-mode:multiply;flex:none}.ash-hero{position:relative;isolation:isolate;background:var(--afaq-cream)}.ash-hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-1;mask-image:linear-gradient(transparent,#000 50px)}.ash-hero-inner{min-height:clamp(460px,40vw,625px);display:grid;grid-template-columns:1.5fr 1fr;align-items:center}.ash-hero-copy{grid-column:2;text-align:center;padding:0 0 55px;max-width:460px}.ash-hero h1{color:var(--afaq-teal);font-size:clamp(45px,4.8vw,71px);line-height:1.4;font-weight:700;white-space:nowrap;margin-bottom:15px}.ash-hero p{font-size:18px;line-height:1.9;margin-bottom:24px}.ash-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.ash-actions .button{min-height:46px;padding:9px 22px;font-size:16px}.ash-trust{display:grid;grid-template-columns:repeat(4,1fr);margin-top:25px;gap:8px}.ash-trust>span{display:grid;justify-items:center;gap:5px;border-left:1px solid #c9b99666;border-left:1px solid oklch(from var(--afaq-border) calc(l - 0.088) calc(c + 0.026) h / 0.4)}.ash-trust>span:last-child{border:0}.ash-trust .ash-icon{width:31px;height:31px}.ash-trust small{font-size:11px}.ash-content{padding-top:14px}.ash-paper,.ash-card,.ash-reason,.ash-day{border:1px solid #dacdb8;border:1px solid oklch(from var(--afaq-border) calc(l - 0.025) calc(c + 0.007) h);border-radius:13px;background:#fffaf140 var(--afaq-deco-paper-grain, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/paper-grain.svg'));box-shadow:0 4px 14px #614a2906;box-shadow:0 4px 14px oklch(from var(--afaq-shadow-ink) calc(l + 0.022) calc(c + 0.005) h / 0.0235294)}.ash-donation{padding:17px 24px;scroll-margin-top:120px}.ash-donation form{display:grid;grid-template-columns:155px 1fr 210px;align-items:center;gap:25px}.ash-currency{font-size:12px;color:#667269;color:oklch(from var(--afaq-sage) calc(l - 0.054) calc(c + 0.001) h)}.ash-donation select,.ash-donation input[type=number],.ash-amount-row button{min-height:44px;border:1px solid #d2bfa1;border:1px solid oklch(from var(--afaq-border) calc(l - 0.065) calc(c + 0.021) h);border-radius:6px;background:#fffdf440;background:oklch(from var(--afaq-white) calc(l - 0.001) calc(c + 0.004) h / 0.25098);color:var(--afaq-teal);font:inherit;padding:7px 10px;width:100%;min-width:0}.ash-donation h2{font-size:23px;color:var(--afaq-teal);margin-bottom:4px}.ash-amount-row{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:8px}.ash-amount-row button[aria-pressed=true]{background:var(--afaq-teal);color:white;border-color:var(--afaq-teal)}.ash-amounts p{font-size:12px;color:#687267;color:oklch(from var(--afaq-sage) calc(l - 0.053) calc(c + 0.002) h);text-align:center;margin-top:6px}.ash-submit{border-right:1px solid #d8cbb8;border-right:1px solid oklch(from var(--afaq-border) calc(l - 0.03) calc(c + 0.005) h);padding-right:24px;display:grid;gap:9px;text-align:center}.ash-submit .button{min-height:45px}.ash-submit label{font-size:12px;display:flex;justify-content:center;align-items:center;gap:7px;min-height:30px}.ash-submit input{accent-color:var(--afaq-teal);width:17px;height:17px}.ash-heading{display:flex;align-items:center;justify-content:center;gap:15px;color:var(--afaq-teal);font-size:27px;font-weight:600;text-align:center;margin:22px 0 13px;line-height:1.5}.ash-heading:before,.ash-heading:after{content:'';height:1px;background:#caba9966;background:oklch(from var(--afaq-border) calc(l - 0.084) calc(c + 0.024) h / 0.4);flex:1}.ash-opportunities,.ash-reasons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.ash-card{padding:10px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}.ash-card header{display:flex;align-items:center;gap:5px;margin-bottom:9px}.ash-card h3{font-size:19px;color:var(--afaq-teal);font-weight:600}.ash-card .ash-icon{width:39px;height:39px}.ash-card-photo{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:7px;transition:filter .3s}.ash-card p{font-size:14px;line-height:1.75;text-align:center;flex:1;margin:9px 0}.ash-card .button{min-height:44px;padding:6px 12px;font-size:14px;width:85%;align-self:center}.ash-impact{display:grid;grid-template-columns:1fr 1.65fr 1.2fr;align-items:center;margin-top:18px;overflow:hidden;min-height:185px}.ash-beneficiaries{text-align:center;border-left:1px solid #d6cbb8;border-left:1px solid oklch(from var(--afaq-border) calc(l - 0.032) calc(c + 0.004) h);padding:15px}.ash-beneficiaries p{font-size:16px}.ash-beneficiaries strong{display:flex;justify-content:center;align-items:center;gap:10px;color:#b88730;color:oklch(from var(--afaq-mustard) calc(l - 0.009) calc(c - 0.003) h);font-size:42px;direction:ltr;font-variant-numeric:tabular-nums}.ash-impact-copy{padding:16px 25px;text-align:center}.ash-impact h2{font-size:23px;color:var(--afaq-teal);margin-bottom:10px}.ash-totals{display:flex;justify-content:space-between;font-size:12px;gap:12px}.ash-totals strong{display:block;color:#b48025;color:oklch(from var(--afaq-mustard) calc(l - 0.028) c h);font-size:21px;direction:ltr}.ash-totals small{font-size:10px;color:#6b7067;color:oklch(from var(--afaq-sage) calc(l - 0.055) calc(c - 0.004) h)}.ash-progress{position:relative;margin:16px 0 0 18px;height:17px;border:1px solid #bcb9a9;border:1px solid oklch(from var(--afaq-border) calc(l - 0.094) calc(c - 0.002) h);border-radius:20px;background:#ede7da;background:oklch(from var(--afaq-paper) calc(l + 0.002) calc(c - 0.006) h)}.ash-progress>span{display:block;width:var(--progress);height:100%;border-radius:20px;background:var(--afaq-teal);transform-origin:right}.ash-progress>b{position:absolute;left:-18px;top:50%;transform:translateY(-50%);border-radius:20px;padding:3px 12px;background:#bc903e;background:oklch(from var(--afaq-mustard) calc(l + 0.015) calc(c - 0.008) h);color:white;font-size:17px;direction:ltr}.ash-impact-art{height:100%;width:100%;object-fit:cover;min-height:185px}.ash-days{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px}.ash-day{padding:9px 7px;display:flex;align-items:center;flex-direction:column;color:var(--afaq-teal);position:relative;transition:transform .3s,background .3s;min-height:145px}.ash-day:after{content:'';position:absolute;top:37px;width:14px;left:-14px;border-top:1px dashed #b38d48;border-top:1px dashed oklch(from var(--afaq-mustard) l calc(c - 0.021) h)}.ash-day:last-child:after{display:none}.ash-day small{font-size:12px}.ash-day .ash-icon{height:29px;width:29px;margin:5px 0}.ash-day strong{font-size:17px}.ash-day span{font-size:12px;color:#657066;color:oklch(from var(--afaq-sage) calc(l - 0.061) calc(c + 0.002) h);line-height:1.65}.ash-challenge>p{text-align:center;font-size:14px;margin-top:11px;color:#667066;color:oklch(from var(--afaq-sage) calc(l - 0.06) calc(c + 0.001) h)}.ash-challenge h2{font-size:22px}.ash-reason{text-align:center;padding:18px 13px;transition:transform .3s,box-shadow .3s}.ash-reason .ash-icon{width:51px;height:51px;margin:0 auto 8px;transition:transform .4s}.ash-reason h3{font-size:20px;color:var(--afaq-teal);margin-bottom:4px}.ash-reason p{font-size:14px;line-height:1.75;color:#657066;color:oklch(from var(--afaq-sage) calc(l - 0.061) calc(c + 0.002) h)}.ash-story{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1.15fr .8fr;align-items:center;min-height:230px;background:#00666a;background:oklch(from var(--afaq-teal) calc(l - 0.023) calc(c - 0.004) h);border-radius:13px;overflow:hidden;color:var(--afaq-cream);margin-top:21px;box-shadow:0 7px 18px #005e6318;box-shadow:0 7px 18px rgb(from var(--afaq-deep-teal) r g b / 0.0941)}.ash-story>img{position:absolute;left:0;top:0;width:39%;height:100%;object-fit:cover;object-position:17% 50%;z-index:-1;mask-image:linear-gradient(to right,#000 70%,transparent)}.ash-story-copy{text-align:center;padding:20px 12px;grid-column:2;grid-row:1}.ash-story h2{font-size:29px;margin-bottom:6px}.ash-story blockquote{font-size:17px;line-height:1.85}.ash-story-copy p{font-size:11px;color:#d5b771;color:oklch(from var(--afaq-gold) calc(l + 0.077) calc(c - 0.026) h);margin:9px 0}.ash-story .button{background:var(--afaq-cream);color:var(--afaq-teal);font-size:14px;min-height:44px;padding:8px 16px}.ash-story-numbers{display:flex;justify-content:center;padding:20px 10px;gap:18px;text-align:center;grid-column:1;grid-row:1}.ash-story-numbers>span{font-size:23px;direction:ltr;border-left:1px solid #f5f0e433;border-left:1px solid rgb(from var(--afaq-cream) r g b / 0.2);padding-left:14px}.ash-story-numbers small{display:block;font-size:11px;direction:rtl;margin-top:7px}.ash-cta{position:relative;isolation:isolate;margin-top:20px;min-height:235px;display:grid;place-items:center;overflow:hidden;border-radius:13px;color:var(--afaq-cream)}.ash-cta>img{position:absolute;width:100%;height:auto;max-width:none;top:50%;left:0;transform:translateY(-55%);z-index:-1}.ash-cta>div{text-align:center;width:61%;padding:25px 0}.ash-cta h2{font-size:32px;line-height:1.6}.ash-cta p{font-size:16px;margin:6px 0 14px}.ash-light-outline{border:1px solid #eee5cc;border:1px solid oklch(from var(--afaq-paper) calc(l - 0.004) calc(c + 0.01) h);color:var(--afaq-cream)}.ash-demo{text-align:center;color:#73796b;color:oklch(from var(--afaq-sage) calc(l - 0.027) calc(c + 0.003) h);font-size:11px;line-height:1.8;margin:10px 0 25px}.ash-card:focus-within,.ash-day:focus-visible{outline:2px solid #bb9242;outline:2px solid oklch(from var(--afaq-mustard) calc(l + 0.018) calc(c - 0.011) h);outline-offset:3px}#ash-review-text{font-size:23px;font-weight:600;color:var(--afaq-teal)} @media(hover:hover){.ash-card:hover,.ash-reason:hover{transform:translateY(-5px);box-shadow:0 12px 25px #4e66551a;box-shadow:0 12px 25px oklch(from var(--afaq-sage) calc(l - 0.108) calc(c + 0.021) h / 0.101961);border-color:#baa374;border-color:oklch(from var(--afaq-gold) calc(l + 0.011) calc(c - 0.053) h)}.ash-reason:hover .ash-icon{transform:translateY(-3px) rotate(-6deg)}.ash-day:hover{transform:translateY(-4px);background:#e8e5d5;background:oklch(from var(--afaq-paper) calc(l - 0.007) calc(c - 0.003) h)}.ash-card:hover .ash-card-photo{filter:saturate(1.08)}} @media(max-width:1050px){.ash-hero-copy{padding-bottom:30px}.ash-hero p{font-size:15px}.ash-donation form{grid-template-columns:125px 1fr 150px;gap:12px}.ash-submit{padding-right:10px}.ash-card h3{font-size:16px}.ash-card .ash-icon{width:30px;height:30px}.ash-opportunities{gap:10px}.ash-card p{font-size:12px}.ash-days{gap:7px}.ash-day strong{font-size:14px}.ash-day:after{width:8px;left:-8px}.ash-story-numbers{gap:7px}.ash-story-numbers>span{font-size:18px;padding-left:6px}.ash-cta h2{font-size:26px}.ash-cta{min-height:200px}.ash-cta>div{width:60%}} @media(max-width:760px){.ash-hero-inner{display:block;padding-top:15px;min-height:650px}.ash-hero-copy{max-width:100%;padding-bottom:0}.ash-hero h1{font-size:45px;margin-bottom:9px}.ash-hero p{font-size:16px;max-width:470px;margin:0 auto 16px}.ash-hero-art{top:auto;bottom:0;height:330px;object-fit:cover;object-position:80% center;mask-image:linear-gradient(transparent,#000 40px)}.ash-trust{max-width:360px;margin:16px auto}.ash-donation form{grid-template-columns:1fr}.ash-currency{display:flex;align-items:center;gap:12px}.ash-currency select{width:auto;flex:1}.ash-submit{border:0;padding:0;grid-template-columns:1fr 1fr;align-items:center}.ash-donation{padding:17px}.ash-amount-row{grid-template-columns:repeat(3,1fr)}.ash-opportunities{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ash-card h3{font-size:19px}.ash-card p{font-size:14px}.ash-opportunities .ash-card:last-child{grid-column:1/-1;max-width:360px;justify-self:center;width:100%}.ash-impact{grid-template-columns:1fr 1.4fr}.ash-impact-art{display:none}.ash-impact-copy{padding:18px 14px}.ash-impact h2{font-size:20px}.ash-beneficiaries strong{font-size:29px}.ash-beneficiaries .ash-icon{width:30px}.ash-beneficiaries p{font-size:13px}.ash-totals strong{font-size:17px}.ash-days{grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.ash-day:nth-child(5):after{display:none}.ash-reasons{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ash-reason:last-child{grid-column:1/-1}.ash-story{grid-template-columns:1fr 1fr;padding-bottom:65px}.ash-story>img{width:49%;height:100%;object-position:25% center}.ash-story-copy{grid-column:1;font-size:14px;padding:18px 10px}.ash-story blockquote{font-size:15px}.ash-story-numbers{grid-column:1/-1;grid-row:2;position:absolute;bottom:0;right:0;left:0;background:#00666ad9;background:oklch(from var(--afaq-teal) calc(l - 0.023) calc(c - 0.004) h / 0.85098);padding:12px;gap:25px}.ash-story-numbers>span{font-size:20px}.ash-cta{background:#00666a;background:oklch(from var(--afaq-teal) calc(l - 0.023) calc(c - 0.004) h);min-height:240px}.ash-cta>img{height:100%;width:100%;object-fit:cover;transform:none;top:0;opacity:.27}.ash-cta>div{width:94%;padding:24px 12px}.ash-cta h2{font-size:27px}.ash-heading{font-size:25px}.ash-challenge h2{font-size:20px}.ash-trust small{font-size:10px}} @media(prefers-reduced-motion:reduce){.ashara-page *{scroll-behavior:auto!important}.ash-card,.ash-day,.ash-reason,.ash-icon{transition:none!important;transform:none!important}} html.motion-paused .ashara-page :is(.ash-card,.ash-day,.ash-reason,.ash-icon){transition:none!important;transform:none!important} @media(min-width:761px){.ash-hero-copy{max-width:400px;justify-self:end;transform:translateX(-12px)}.ash-hero h1{font-size:clamp(43px,4.3vw,63px)}} .ash-impact{margin-top:26px}.ash-story{margin-top:27px} /* Refined campaign panels: quiet paper depth and clearer selection states. */ .ash-trust{column-gap:13px}.ash-trust>span{padding:0 5px;gap:9px}.ash-trust small{line-height:1.7;white-space:nowrap} @media(min-width:761px){.ash-trust{transform:translateX(-32px);width:100%}} .ash-donation{padding:23px 27px;box-shadow:0 9px 25px #7258290c;box-shadow:0 9px 25px oklch(from var(--afaq-gold-ink) calc(l - 0.055) calc(c - 0.025) h / 0.0470588);border-color:#ceb98f;border-color:oklch(from var(--afaq-border) calc(l - 0.085) calc(c + 0.037) h);background-color:#fffaf28c;background-color:oklch(from var(--afaq-white) calc(l - 0.007) calc(c + 0.004) h / 0.54902)} .ash-donation form{grid-template-columns:145px minmax(0,1fr) 205px;gap:23px}.ash-donation h2{font-size:27px;margin-bottom:12px}.ash-currency{font-size:14px;line-height:2.1}.ash-currency select{background-color:#fffdf5a6;background-color:oklch(from var(--afaq-white) calc(l - 0.001) calc(c + 0.003) h / 0.65098)}.ash-amount-row{gap:9px}.ash-amount-row button{font-size:18px;font-weight:600;transition:background .2s,border-color .2s,box-shadow .2s;min-height:49px}.ash-amount-row input{font-size:19px!important;min-height:49px!important;font-variant-numeric:tabular-nums}.ash-amount-row button:hover{border-color:var(--afaq-teal);box-shadow:0 3px 8px #006d7210;box-shadow:0 3px 8px rgb(from var(--afaq-teal) r g b / 0.0627)}.ash-amount-row button[aria-pressed=true]{box-shadow:0 4px 10px #006d7226;box-shadow:0 4px 10px rgb(from var(--afaq-teal) r g b / 0.149)}.ash-amounts p{font-size:13px;text-align:right;margin-top:12px;line-height:1.8}.ash-submit{gap:13px}.ash-submit .button{font-size:19px;min-height:51px;box-shadow:0 5px 12px #006d721a;box-shadow:0 5px 12px rgb(from var(--afaq-teal) r g b / 0.102)}.ash-submit label{min-height:44px;font-size:13px} .ash-beneficiaries .ash-icon{width:68px;height:68px}.ash-beneficiaries strong{font-size:43px;gap:13px;margin:8px 0}.ash-beneficiaries{padding:21px 12px}.ash-beneficiaries p:first-child{color:var(--afaq-teal);font-weight:600} .ash-challenge{margin-top:29px;padding:0 0 7px}.ash-challenge .ash-heading{margin-bottom:22px}.ash-days{gap:12px}.ash-day{padding:14px 7px 13px;min-height:177px;background-color:#fffaf399;background-color:oklch(from var(--afaq-white) calc(l - 0.007) calc(c + 0.003) h / 0.6);border-color:#dbc8a6;border-color:oklch(from var(--afaq-border) calc(l - 0.038) calc(c + 0.026) h);box-shadow:0 5px 13px #76644509;box-shadow:0 5px 13px oklch(from var(--afaq-gold-ink) calc(l - 0.02) calc(c - 0.047) h / 0.0352941)}.ash-day small{color:#917037;color:oklch(from var(--afaq-gold-ink) calc(l + 0.033) calc(c - 0.012) h);font-size:12px;font-weight:600}.ash-day .ash-icon{width:37px;height:37px;margin:11px 0 10px;transition:transform .3s}.ash-day strong{font-size:18px;margin-bottom:5px}.ash-day span{font-size:13px;line-height:1.7}.ash-day:after{top:62px}.ash-day[aria-pressed=true]{border-color:var(--afaq-teal);background-color:#e5efdf;background-color:oklch(from var(--afaq-white) calc(l - 0.054) calc(c + 0.016) h);box-shadow:inset 0 3px 0 var(--afaq-teal),0 7px 15px #006d7212;box-shadow:inset 0 3px 0 var(--afaq-teal),0 7px 15px rgb(from var(--afaq-teal) r g b / 0.0706)}.ash-challenge>p{margin-top:19px;font-size:15px}.ash-day:hover .ash-icon{transform:translateY(-3px) rotate(-5deg)} .ash-story{grid-template-columns:1.15fr 1.2fr .8fr;min-height:278px;box-shadow:0 12px 26px #005e6321;box-shadow:0 12px 26px rgb(from var(--afaq-deep-teal) r g b / 0.1294);border:1px solid #157578;border:1px solid oklch(from var(--afaq-teal) calc(l + 0.027) calc(c - 0.001) h)}.ash-story-copy{padding:25px 15px}.ash-story h2{font-size:33px;font-weight:600;margin-bottom:12px}.ash-story blockquote{font-size:18px;line-height:1.95}.ash-story-copy p{margin:12px 0;font-size:12px}.ash-story-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:22px 10px}.ash-story-numbers>span{font-size:0;padding:15px 9px;border-left:1px solid #f2e0b740;border-left:1px solid oklch(from var(--afaq-paper) calc(l - 0.016) calc(c + 0.033) h / 0.25098);white-space:nowrap}.ash-story-numbers>span:last-child{border-left:0}.ash-story-numbers b{font-size:clamp(26px,2.6vw,38px);font-weight:600;color:#f4d99c;color:oklch(from var(--afaq-border) calc(l + 0.016) calc(c + 0.059) h);line-height:1.5;font-variant-numeric:tabular-nums}.ash-story-numbers b:after{content:'+';font-size:18px;margin-left:3px;color:#e9d6ac;color:oklch(from var(--afaq-border) calc(l + 0.003) calc(c + 0.034) h)}.ash-story-numbers small{font-size:13px;white-space:normal;line-height:1.8;margin-top:9px}.ash-story>img{width:36%;object-position:16% 50%} @media(max-width:1050px) and (min-width:761px){.ash-donation form{grid-template-columns:115px minmax(0,1fr) 150px;gap:12px}.ash-amount-row{gap:5px}.ash-amount-row button{font-size:15px;padding:6px}.ash-beneficiaries strong{font-size:32px;gap:6px}.ash-beneficiaries .ash-icon{width:51px;height:51px}.ash-day{min-height:171px;padding-inline:4px}.ash-day strong{font-size:15px}.ash-day span{font-size:12px}.ash-story-numbers b{font-size:25px}.ash-story-numbers>span{padding-inline:4px}.ash-story-numbers small{font-size:11px}} @media(max-width:760px){.ash-trust{gap:5px}.ash-trust small{font-size:10px}.ash-trust>span{padding:0 2px}.ash-donation{padding:19px 17px}.ash-donation form{grid-template-columns:1fr;gap:16px}.ash-donation h2{font-size:25px}.ash-submit{grid-template-columns:1fr;border-top:1px solid #d7c8ac;border-top:1px solid oklch(from var(--afaq-border) calc(l - 0.04) calc(c + 0.017) h);padding-top:16px;gap:4px}.ash-amount-row{grid-template-columns:repeat(3,minmax(0,1fr))}.ash-amounts p{text-align:center}.ash-beneficiaries strong{flex-direction:column;font-size:32px;gap:2px}.ash-beneficiaries .ash-icon{width:61px;height:61px}.ash-days{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ash-day{min-height:148px;display:grid;grid-template-columns:45px 1fr;text-align:right;padding:13px;column-gap:10px;align-content:center}.ash-day small{grid-column:1/-1;margin-bottom:5px}.ash-day .ash-icon{grid-column:1;grid-row:2/4;margin:0;width:40px;height:40px}.ash-day strong,.ash-day span{grid-column:2}.ash-day:after{display:none}.ash-day strong{font-size:18px}.ash-story{grid-template-columns:1fr;display:block;padding:0;min-height:0}.ash-story>img{width:100%;height:250px;top:0;object-position:left 44%;mask-image:linear-gradient(#000 78%,transparent);opacity:1}.ash-story-copy{padding:255px 23px 18px}.ash-story h2{font-size:30px}.ash-story blockquote{font-size:18px;line-height:1.85}.ash-story-numbers{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:15px 8px;background:var(--afaq-deep-teal);gap:0;border-bottom:1px solid #ffffff24}.ash-story-numbers>span{padding:7px 5px}.ash-story-numbers b{font-size:27px}.ash-story-numbers b:after{font-size:14px}.ash-story-numbers small{font-size:12px}.ash-story{display:flex;flex-direction:column}.ash-story-copy{order:0}.ash-story-numbers{order:1}} /* Keep dividers in the gaps, clear of the complete number and its plus sign. */ .ash-story-numbers{container-type:inline-size;column-gap:22px} .ash-story-numbers>span{position:relative;min-width:0;border:0;padding-inline:0;text-align:center} .ash-story-numbers>span:not(:last-child)::after{content:"";position:absolute;left:-11px;top:15%;height:70%;width:1px;background:#f2e0b740;background:oklch(from var(--afaq-paper) calc(l - 0.016) calc(c + 0.033) h / 0.25098);pointer-events:none} .ash-story-numbers b{display:inline-block;direction:ltr;white-space:nowrap;font-size:clamp(22px,7.7cqi,34px)} .ash-story-numbers b:after{font-size:.48em;margin-left:3px} .ash-story-numbers small{padding-inline:2px} @media(max-width:760px){.ash-story-numbers{column-gap:18px;padding-inline:14px}.ash-story-numbers>span:not(:last-child)::after{left:-9px}.ash-story-numbers b{font-size:clamp(20px,7.7cqi,29px)}} /* css/components/shared-editorial.css */ /* Shared presentation tokens; suitable for the future theme stylesheet. Page-specific composition, imagery and editable content remain in their templates. */ main :is(h2,h3){letter-spacing:0;text-wrap:pretty} main :is(.archive-heading,.giving-section-title,.ab-heading,.ash-heading,.ct-heading,.aq-section>h2,.news-section-heading h2){font-weight:600;font-size:var(--afaq-heading-section);line-height:var(--afaq-heading-leading);overflow:visible} main :is(.archive-heading,.ab-heading,.ash-heading,.ct-heading){gap:15px} main :is(.archive-heading,.ab-heading,.ash-heading,.ct-heading)::before, main :is(.archive-heading,.ab-heading,.ash-heading,.ct-heading)::after{opacity:.65} .news-section-heading{gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:18px} .news-section-heading h2{margin:0;padding-bottom:8px;border-bottom:3px solid var(--afaq-gold);width:fit-content} main :is(.program-card,.campaign-card,.project-tile,.impact-step,.giving-method,.news-card,.ab-card,.ct-card,.ash-card,.ash-reason){border-color:var(--afaq-card-edge);box-shadow:var(--afaq-card-shadow)} main :is(.program-card,.campaign-card,.project-tile,.giving-method,.news-card,.ab-card,.ct-card,.ash-card,.ash-reason){transition:box-shadow .28s,border-color .28s,transform .28s} main :is(.program-card,.project-tile,.giving-method,.news-card,.ct-card,.ash-card) :is(h2,h3){font-weight:600;line-height:1.65} .project-tile:not(.featured) .project-description{line-height:1.85} .giving-method>p,.news-card>p,.ct-card>p{line-height:1.85} .news-card h3{line-height:1.75;font-weight:600} .giving-method .button,.news-card .text-link,.program-card .text-link{min-height:44px} .ct-card h2{font-size:22px}.ct-card{padding-block:23px} .ab-impact .ab-card{border-color:#d9c8a6;border-color:oklch(from var(--afaq-border) calc(l - 0.04) calc(c + 0.025) h)}.ab-values h3{line-height:1.65} .giving-paper>h2,.ct-panel>h2,.aq-panel>h2{font-weight:600;line-height:1.6;margin-bottom:20px} /* Keyboard affordances match pointer affordances without shifting the card. */ main :is(.program-card,.campaign-card,.project-tile,.giving-method,.news-card,.ct-card,.ash-card):focus-within{border-color:#8fae9c;border-color:oklch(from var(--afaq-mist) calc(l + 0.013) calc(c + 0.007) h);box-shadow:0 0 0 2px #006d7214,var(--afaq-card-shadow-raised);box-shadow:0 0 0 2px rgb(from var(--afaq-teal) r g b / 0.0784),var(--afaq-card-shadow-raised)} main :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #a97926;outline:2px solid oklch(from var(--afaq-mustard) calc(l - 0.055) calc(c - 0.007) h);outline-offset:4px} @media(hover:hover) and (prefers-reduced-motion:no-preference){ html:not(.motion-paused) main :is(.program-card,.campaign-card,.project-tile,.giving-method,.news-card,.ab-card,.ct-card,.ash-card,.ash-reason):hover{border-color:#b9aa8b;border-color:oklch(from var(--afaq-gold) calc(l + 0.029) calc(c - 0.076) h);box-shadow:var(--afaq-card-shadow-raised)} } @media(max-width:640px){:root{--afaq-heading-section:26px} main :is(.archive-heading,.ab-heading,.ash-heading,.ct-heading){gap:10px} .news-section-heading{margin-bottom:15px;gap:10px}.news-section-heading h2{font-size:27px} .ct-card h2{font-size:21px}.giving-paper>h2,.ct-panel>h2,.aq-panel>h2{line-height:1.65} } @media(prefers-reduced-motion:reduce){main :is(.program-card,.campaign-card,.project-tile,.giving-method,.news-card,.ab-card,.ct-card,.ash-card,.ash-reason){transition:none}} html.motion-paused main :is(.program-card,.campaign-card,.project-tile,.giving-method,.news-card,.ab-card,.ct-card,.ash-card,.ash-reason){transition:none} /* Narrow card headings must wrap instead of colliding with their icon or portrait. */ .giving-contact h2{flex-wrap:wrap;column-gap:9px;row-gap:4px;white-space:normal} @media(max-width:960px){#main:has(.hero) .purpose-copy h2{font-size:27px}} @media(max-width:560px){.about-page .ab-beliefs{grid-template-columns:1fr}.about-page .ab-values{grid-row:auto}.about-page .ab-purpose{min-height:250px}.about-page .ab-vision .ab-purpose-art{left:-24%}.about-page .ab-vision .ab-purpose-copy{padding:19px 15px 19px 54%}.about-page .ab-vision p{font-size:16px;line-height:1.85}.about-page .ab-mission .ab-purpose-copy{padding:24px 18%}} /* css/components/decorations.css */ /* * Reusable decorations (template-parts/decorations/*). * The host section needs position: relative; decorations never take clicks. */ .afaq-deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; } /* Position (logical, RTL-aware) */ .afaq-deco--top-start { inset-block-start: 0; inset-inline-start: 0; } .afaq-deco--top-end { inset-block-start: 0; inset-inline-end: 0; } .afaq-deco--bottom-start { inset-block-end: 0; inset-inline-start: 0; } .afaq-deco--bottom-end { inset-block-end: 0; inset-inline-end: 0; } .afaq-deco--start { inset-block-start: 50%; inset-inline-start: 0; translate: 0 -50%; } .afaq-deco--end { inset-block-start: 50%; inset-inline-end: 0; translate: 0 -50%; } /* Size */ .afaq-deco--size-s { width: clamp(90px, 12vw, 160px); } .afaq-deco--size-m { width: clamp(140px, 18vw, 260px); } .afaq-deco--size-l { width: clamp(200px, 28vw, 420px); } /* Torn paper edge: full-width strip on the top or bottom edge. */ .afaq-deco--torn { inset-inline: 0; height: clamp(28px, 4vw, 64px); background: center / 100% 100% no-repeat; } .afaq-deco--torn.afaq-deco--top { inset-block-start: 0; transform: translateY(-60%); } .afaq-deco--torn.afaq-deco--bottom { inset-block-end: 0; transform: translateY(60%) scaleY(-1); } .afaq-deco--torn-ivory { background-image: var(--afaq-deco-torn-ivory, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-ivory.webp')); } .afaq-deco--torn-teal { background-image: var(--afaq-deco-torn-teal, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/torn-teal.webp')); } /* Flowers and mountains are images. */ .afaq-deco--flowers, .afaq-deco--mountains { height: auto; object-fit: contain; } .afaq-deco--mountains.afaq-deco--size-l { width: 100%; inset-inline: 0; } /* Gold disc + dotted orbit */ .afaq-deco--circles { aspect-ratio: 1; } .afaq-deco__disc { position: absolute; inset: 12%; border-radius: 50%; background: var(--afaq-gold) var(--afaq-deco-paper-grain, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/paper-grain.svg')); opacity: .9; } .afaq-deco__orbit { position: absolute; inset: 0; border: 2px dotted var(--afaq-teal); border-radius: 50%; opacity: .6; } /* Dots */ .afaq-deco--dots { aspect-ratio: 1; background-image: radial-gradient(circle, rgb(from var(--afaq-teal) r g b / .28) 1.6px, transparent 1.8px); background-size: 14px 14px; mask: radial-gradient(circle, #000 45%, transparent 72%); } @media (max-width: 640px) { .afaq-deco--size-l { width: clamp(150px, 45vw, 240px); } } /* css/components/shell-options.css */ /* * Header and footer options from "إعدادات آفاق". * * PHP adds allow-listed classes to .site-header / .site-footer; nothing here * applies without one of those classes, so the default design is untouched. */ /* Position */ .site-header.afaq-header--sticky { position: sticky; top: 0; } .site-header.afaq-header--static { position: relative; } /* Transparent before scroll */ .site-header.afaq-header--transparent:not(.is-scrolled) { background: transparent; } .site-header.afaq-header--transparent:not(.is-scrolled)::after { opacity: 0; } /* Background before scroll */ .site-header.afaq-header-bg--teal:not(.is-scrolled) { background: var(--afaq-teal); } .site-header.afaq-header-bg--deep-teal:not(.is-scrolled) { background: var(--afaq-deep-teal); } .site-header.afaq-header-bg--gold:not(.is-scrolled) { background: var(--afaq-gold); } .site-header.afaq-header-bg--mustard:not(.is-scrolled) { background: var(--afaq-mustard); } .site-header.afaq-header-bg--gold-ink:not(.is-scrolled) { background: var(--afaq-gold-ink); } .site-header.afaq-header-bg--cream:not(.is-scrolled) { background: var(--afaq-cream); } .site-header.afaq-header-bg--paper:not(.is-scrolled) { background: var(--afaq-paper); } .site-header.afaq-header-bg--white:not(.is-scrolled) { background: var(--afaq-white); } .site-header.afaq-header-bg--text:not(.is-scrolled) { background: var(--afaq-text); } .site-header.afaq-header-bg--sage:not(.is-scrolled) { background: var(--afaq-sage); } .site-header[class*="afaq-header-bg--"]:not(.is-scrolled)::after { opacity: 0; } /* Menu alignment (RTL: start is the right side) */ @media (min-width: 961px) { .site-header.afaq-nav-align--start .primary-nav { justify-content: flex-start; } .site-header.afaq-nav-align--end .primary-nav { justify-content: flex-end; } } /* Menu font family */ .site-header.afaq-nav-font--nav .primary-nav a { font-family: var(--afaq-font-nav); } .site-header.afaq-nav-font--ui .primary-nav a { font-family: var(--afaq-font-ui); } .site-header.afaq-nav-font--body .primary-nav a { font-family: var(--afaq-font-body); } .site-header.afaq-nav-font--display .primary-nav a { font-family: var(--afaq-font-display); } /* Menu link colour (the active pill keeps its own colours) */ .site-header.afaq-nav-color--teal .primary-nav a:not(.is-active) { color: var(--afaq-teal); } .site-header.afaq-nav-color--deep-teal .primary-nav a:not(.is-active) { color: var(--afaq-deep-teal); } .site-header.afaq-nav-color--gold .primary-nav a:not(.is-active) { color: var(--afaq-gold); } .site-header.afaq-nav-color--mustard .primary-nav a:not(.is-active) { color: var(--afaq-mustard); } .site-header.afaq-nav-color--gold-ink .primary-nav a:not(.is-active) { color: var(--afaq-gold-ink); } .site-header.afaq-nav-color--cream .primary-nav a:not(.is-active) { color: var(--afaq-cream); } .site-header.afaq-nav-color--paper .primary-nav a:not(.is-active) { color: var(--afaq-paper); } .site-header.afaq-nav-color--white .primary-nav a:not(.is-active) { color: var(--afaq-white); } .site-header.afaq-nav-color--text .primary-nav a:not(.is-active) { color: var(--afaq-text); } .site-header.afaq-nav-color--sage .primary-nav a:not(.is-active) { color: var(--afaq-sage); } /* Menu font size */ @media (min-width: 961px) { .site-header.afaq-nav-size--sm .primary-nav a { font-size: 12px; } .site-header.afaq-nav-size--base .primary-nav a { font-size: 14px; } .site-header.afaq-nav-size--lg .primary-nav a { font-size: 15px; } } /* Donate button outline variant */ .button-outline.header-donate { border-color: currentColor; } /* Separate phone menu (only when a "mobile" menu is assigned) */ @media (min-width: 961px) { .primary-nav .afaq-only-mobile { display: none !important; } } @media (max-width: 960px) { .primary-nav .afaq-only-desktop { display: none !important; } } /* Mobile logo swap */ .brand picture { display: contents; } /* Footer colour: redefine the footer's own teal inside its scope. */ .site-footer.afaq-footer-bg--teal { --afaq-deep-teal: var(--afaq-teal); } .site-footer.afaq-footer-bg--gold-ink { --afaq-deep-teal: var(--afaq-gold-ink); } .site-footer.afaq-footer-bg--text { --afaq-deep-teal: var(--afaq-text); } .site-footer.afaq-footer-bg--sage { --afaq-deep-teal: var(--afaq-sage); } /* * Footer recolour (review A4). The footer paper is a raster painted in the * original teal on both ::before (torn top edge) and ::after (panel). When the * footer colour changes, both layers keep that raster for its fibres and * shading (luminosity blend), take their hue from the live token, and are * clipped to the raster's own silhouette so no transparent or old-teal area * remains. Mask geometry mirrors the background geometry in shared-paper.css. */ html body .site-footer.afaq-footer-recolor::before, html body .site-footer.afaq-footer-recolor::after { background-color: var(--afaq-deep-teal); background-blend-mode: luminosity; -webkit-mask-image: var(--afaq-deco-footer-torn, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/07-footer-torn-teal.webp')); mask-image: var(--afaq-deco-footer-torn, url('https://wordpress-ldvf.srv1872071.hstgr.cloud/wp-content/themes/afaq-trust/assets/images/07-footer-torn-teal.webp')); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } html body .site-footer.afaq-footer-recolor::before { -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: 100% 33.333vw; mask-size: 100% 33.333vw; } html body .site-footer.afaq-footer-recolor::after { -webkit-mask-position: center 91%; mask-position: center 91%; -webkit-mask-size: 100% 350%; mask-size: 100% 350%; } /* Motion switched off in settings */ html.afaq-motion-off *, html.afaq-motion-off *::before, html.afaq-motion-off *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html.afaq-motion-off .motion-toggle, html.afaq-motion-off .hero-motion-controls { display: none; } /* css/pages/single.css */ /* * Single pages, plain pages, search and 404 (phase 6). Not in the prototype: * built from its language — cream paper, teal headings, gold accents, soft * cards — using tokens only. */ .afaq-single { overflow: clip; padding-block-end: var(--afaq-section-m); } /* Header: copy and funding beside the image. */ .afaq-single-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(28px, 4vw, 56px) var(--afaq-section-s); } .afaq-single-back { display: inline-flex; align-items: center; gap: var(--afaq-space-2xs); color: var(--afaq-teal); font-size: var(--afaq-fs-sm); font-weight: 600; margin-block-end: var(--afaq-space-sm); } .afaq-single-back .icon { width: 18px; height: 18px; transform: scaleX(-1); } .afaq-single-badge { display: inline-flex; align-items: center; gap: var(--afaq-space-2xs); padding: 4px 14px; border-radius: var(--afaq-radius-pill); background: var(--afaq-paper); color: #7a5518; color: oklch(from var(--afaq-gold-ink) calc(l - 0.06) c h); font-size: var(--afaq-fs-sm); font-weight: 600; } .afaq-single-badge .icon { width: 18px; height: 18px; } .afaq-single-hero h1, .afaq-page-hero h1, .afaq-notfound h1 { color: var(--afaq-teal); font-family: var(--afaq-font-display); font-size: var(--afaq-fs-h1); line-height: var(--afaq-lh-tight); margin-block: var(--afaq-space-xs); } .afaq-single-lead { font-size: var(--afaq-fs-lg); line-height: var(--afaq-lh-body); max-width: 60ch; } .afaq-single-meta { display: flex; flex-wrap: wrap; gap: var(--afaq-space-2xs) var(--afaq-space-md); margin-block: var(--afaq-space-sm) 0; padding: 0; list-style: none; color: var(--afaq-sage); font-size: var(--afaq-fs-sm); } .afaq-single-meta li + li::before { content: '•'; margin-inline-end: var(--afaq-space-md); color: var(--afaq-gold); } .afaq-single-funding { margin-block-start: var(--afaq-space-md); padding: var(--afaq-space-md); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-lg); background: var(--afaq-white); box-shadow: var(--afaq-shadow-sm); } .afaq-single-funding dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--afaq-space-sm); margin: var(--afaq-space-sm) 0 0; } .afaq-single-funding dt { color: var(--afaq-sage); font-size: var(--afaq-fs-xs); } .afaq-single-funding dd { margin: 0; color: var(--afaq-teal); font-size: var(--afaq-fs-lg); font-weight: 700; } .afaq-single-actions { display: flex; flex-wrap: wrap; gap: var(--afaq-space-xs); margin-block-start: var(--afaq-space-md); } .afaq-single-note { margin-block-start: var(--afaq-space-xs); color: var(--afaq-gold-ink); font-size: var(--afaq-fs-sm); } .afaq-single-media { margin: 0; border-radius: var(--afaq-radius-xl); overflow: hidden; box-shadow: var(--afaq-shadow-lg); aspect-ratio: 4 / 3; } .afaq-single-media img { width: 100%; height: 100%; object-fit: cover; } /* A project without a featured image shows its card artwork; with neither, the text takes the full width. */ .afaq-single-art > span { display: block; width: 100%; height: 100%; min-height: 0; border-radius: inherit; background-size: cover; background-position: center; -webkit-mask-image: none; mask-image: none; } .afaq-single-hero--text { grid-template-columns: minmax(0, 1fr); max-width: 900px; } /* Body and aside. */ .afaq-single-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; padding-block: var(--afaq-section-s); } .afaq-single-layout--single { grid-template-columns: minmax(0, 1fr); max-width: var(--afaq-width-narrow); } .afaq-entry { font-size: var(--afaq-fs-base); line-height: var(--afaq-lh-body); } .afaq-entry > * + * { margin-block-start: var(--afaq-space-sm); } .afaq-entry h2, .afaq-entry h3 { color: var(--afaq-teal); line-height: var(--afaq-lh-heading); margin-block-start: var(--afaq-space-lg); } .afaq-entry a { color: var(--afaq-teal); text-decoration: underline; text-underline-offset: 3px; } .afaq-entry img { border-radius: var(--afaq-radius-md); height: auto; } .afaq-entry ul, .afaq-entry ol { padding-inline-start: 1.4em; } .afaq-single-block { margin-block-start: var(--afaq-section-s); } .afaq-single-block > h2, .afaq-single-panel > h2 { color: var(--afaq-teal); font-size: var(--afaq-fs-h3); margin-block-end: var(--afaq-space-sm); } .afaq-stages { position: relative; display: grid; gap: var(--afaq-space-sm); margin: 0; padding: 0; list-style: none; } .afaq-stage { position: relative; padding: var(--afaq-space-sm) var(--afaq-space-md); padding-inline-start: calc(var(--afaq-space-md) + 18px); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-md); background: var(--afaq-white); } .afaq-stage::before { content: ''; position: absolute; inset-inline-start: var(--afaq-space-sm); top: 26px; width: 10px; height: 10px; border-radius: 50%; background: var(--afaq-border); } .afaq-stage--in_progress::before { background: var(--afaq-gold); box-shadow: 0 0 0 4px var(--afaq-paper); } .afaq-stage--done::before { background: var(--afaq-teal); } .afaq-stage h3 { font-size: var(--afaq-fs-base); color: var(--afaq-text); margin: 2px 0; } .afaq-stage time, .afaq-stage-status { font-size: var(--afaq-fs-xs); color: var(--afaq-sage); } .afaq-stage--done .afaq-stage-status { color: var(--afaq-teal); font-weight: 600; } .afaq-stage--in_progress .afaq-stage-status { color: var(--afaq-gold-ink); font-weight: 600; } .afaq-stage p { margin-block-start: var(--afaq-space-3xs); font-size: var(--afaq-fs-sm); } .afaq-single-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--afaq-space-xs); } .afaq-single-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--afaq-radius-md); } /* T13: goals, beneficiaries, impact, reports, campaigns — in the page's own palette and spacing. */ .afaq-single-goals { display: grid; gap: var(--afaq-space-2xs); margin: 0; padding: 0; list-style: none; } .afaq-single-goals li { display: flex; align-items: flex-start; gap: var(--afaq-space-2xs); line-height: var(--afaq-lh-body); } .afaq-single-goals .icon { flex: 0 0 auto; width: 20px; height: 20px; margin-block-start: 3px; color: var(--afaq-gold-ink); } .afaq-single-people-count { margin: 0 0 var(--afaq-space-2xs); color: var(--afaq-teal); font-size: var(--afaq-fs-h3); font-weight: 700; } .afaq-single-people-count span { font-size: var(--afaq-fs-base); font-weight: 600; } .afaq-single-benefits + .afaq-single-metrics { margin-block-start: var(--afaq-space-sm); } .afaq-single-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--afaq-space-sm); } a.afaq-single-metric { color: inherit; text-decoration: none; } a.afaq-single-metric:hover, a.afaq-single-metric:focus-visible { border-color: var(--afaq-gold); } .afaq-single-metric .afaq-impact-value { font-size: clamp(26px, 3vw, 34px); } .afaq-single-metric-label { color: var(--afaq-text); font-weight: 600; } .afaq-single-metric-period { color: var(--afaq-sage); font-size: var(--afaq-fs-xs); } .afaq-single-reports { display: grid; gap: var(--afaq-space-2xs); margin: 0; padding: 0; list-style: none; } .afaq-single-reports li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--afaq-space-xs); padding-block: var(--afaq-space-2xs); border-block-end: 1px dashed var(--afaq-border); } .afaq-single-reports a { display: inline-flex; align-items: center; gap: var(--afaq-space-2xs); color: var(--afaq-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .afaq-single-reports .icon { flex: 0 0 auto; width: 20px; height: 20px; } .afaq-single-reports small { color: var(--afaq-sage); font-size: var(--afaq-fs-xs); } .afaq-single-campaigns ul { display: grid; gap: var(--afaq-space-xs); margin: 0; padding: 0; list-style: none; } .afaq-single-campaigns li { display: grid; gap: var(--afaq-space-3xs); justify-items: start; } .afaq-single-campaigns a { color: var(--afaq-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .afaq-single-campaigns .campaign-state { display: inline-block; padding: 1px 10px; border: 1px solid var(--afaq-border); border-radius: 999px; color: var(--afaq-sage); font-size: var(--afaq-fs-xs); } .afaq-single-campaigns .campaign-state--active { border-color: var(--afaq-teal); color: var(--afaq-teal); font-weight: 600; } .afaq-single-faq details { border-block-end: 1px solid var(--afaq-border); padding-block: var(--afaq-space-xs); } .afaq-single-faq summary { cursor: pointer; font-weight: 600; color: var(--afaq-teal); } .afaq-single-aside { display: grid; gap: var(--afaq-space-md); position: sticky; top: 110px; } .afaq-single-panel { padding: var(--afaq-space-md); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-lg); background: var(--afaq-white); box-shadow: var(--afaq-shadow-sm); } .afaq-budget { width: 100%; border-collapse: collapse; font-size: var(--afaq-fs-sm); } .afaq-budget th, .afaq-budget td { padding-block: var(--afaq-space-2xs); border-block-end: 1px dashed var(--afaq-border); text-align: start; font-weight: 400; } .afaq-budget td { text-align: end; white-space: nowrap; } .afaq-budget tfoot th, .afaq-budget tfoot td { border: 0; font-weight: 700; color: var(--afaq-teal); } .afaq-single-story img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--afaq-radius-md); } .afaq-single-story h3 { font-size: var(--afaq-fs-base); margin-block: var(--afaq-space-xs); } .afaq-single-story h3 a { color: var(--afaq-teal); } .afaq-single-story blockquote, .afaq-single-quote { margin: 0; padding-inline-start: var(--afaq-space-sm); border-inline-start: 3px solid var(--afaq-gold); color: var(--afaq-text); font-size: var(--afaq-fs-lg); } .afaq-single-quote { margin-block-end: var(--afaq-space-lg); } .afaq-single-quote cite { display: block; margin-block-start: var(--afaq-space-2xs); font-size: var(--afaq-fs-sm); font-style: normal; color: var(--afaq-gold-ink); } .afaq-single-related { margin-block-start: var(--afaq-section-s); } .afaq-linked-project { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--afaq-space-md); align-items: center; } .afaq-linked-project img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--afaq-radius-md); } .afaq-linked-project h3 { font-size: var(--afaq-fs-h3); margin-block-end: var(--afaq-space-2xs); } .afaq-linked-project h3 a { color: var(--afaq-teal); } .afaq-linked-project .project-meter { margin-block: var(--afaq-space-sm); } /* Plain pages, listings, 404. */ .afaq-page { padding-block-end: var(--afaq-section-m); } .afaq-page-hero { padding-block: clamp(36px, 5vw, 72px) var(--afaq-space-lg); background: var(--afaq-paper); text-align: center; } .afaq-page-hero p { max-width: 62ch; margin: var(--afaq-space-xs) auto 0; font-size: var(--afaq-fs-lg); } .afaq-page-body { max-width: var(--afaq-width-narrow); padding-block-start: var(--afaq-section-s); } .afaq-results { display: grid; gap: var(--afaq-space-sm); margin-block-start: var(--afaq-space-md); } .afaq-result { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: var(--afaq-space-md); align-items: center; padding: var(--afaq-space-sm); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-md); background: var(--afaq-white); } .afaq-result:not(:has(.afaq-result-media)) { grid-template-columns: minmax(0, 1fr); } .afaq-result-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--afaq-radius-sm); } .afaq-result h2 { font-size: var(--afaq-fs-h3); margin-block: var(--afaq-space-3xs); } .afaq-result h2 a { color: var(--afaq-teal); } .afaq-empty { padding: var(--afaq-space-lg); text-align: center; color: var(--afaq-sage); } .afaq-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--afaq-space-2xs); margin-block-start: var(--afaq-space-lg); } .afaq-pagination .page-numbers { min-width: 42px; padding: 6px 12px; border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-sm); background: var(--afaq-white); color: var(--afaq-teal); text-align: center; } .afaq-pagination .page-numbers.current { background: var(--afaq-teal); border-color: var(--afaq-teal); color: var(--afaq-white); } /* Testimonials (T22): the story behind a quote, and more voices. */ .afaq-quote-story { display: inline-block; margin-inline-start: var(--afaq-space-2xs); color: var(--afaq-teal); font-size: var(--afaq-fs-sm); text-decoration: underline; text-underline-offset: 3px; } .afaq-quotes-more { margin: var(--afaq-space-sm) 0 0; } .afaq-quotes-more a { color: var(--afaq-teal); font-size: var(--afaq-fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Transparency and reports (T21). */ .afaq-transparency-block { margin-block-start: var(--afaq-section-s); } .afaq-transparency-block > h2 { color: var(--afaq-teal); font-size: var(--afaq-fs-h3); margin-block-end: var(--afaq-space-sm); } .afaq-report-list, .afaq-method-list { display: grid; gap: var(--afaq-space-sm); margin: 0; padding: 0; list-style: none; } .afaq-report { padding: var(--afaq-space-sm) var(--afaq-space-md); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-md); background: var(--afaq-white); } .afaq-report > a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--afaq-space-2xs) var(--afaq-space-sm); } .afaq-report-title { color: var(--afaq-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .afaq-report-meta { display: flex; gap: var(--afaq-space-sm); color: var(--afaq-sage); font-size: var(--afaq-fs-sm); } .afaq-report > p { margin: var(--afaq-space-3xs) 0 0; color: var(--afaq-text); font-size: var(--afaq-fs-sm); } .afaq-method-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); } .afaq-method { display: flex; align-items: center; gap: var(--afaq-space-2xs); padding: var(--afaq-space-sm); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-md); background: var(--afaq-white); } .afaq-method-logo { width: 42px; height: 42px; object-fit: contain; } .afaq-method small { color: var(--afaq-sage); } .afaq-facts { display: grid; gap: var(--afaq-space-2xs); margin: 0; } .afaq-facts > div { display: flex; flex-wrap: wrap; gap: 0 var(--afaq-space-2xs); } .afaq-facts dt { color: var(--afaq-sage); } .afaq-facts dt::after { content: ':'; } .afaq-facts dd { margin: 0; color: var(--afaq-text); font-weight: 600; } /* Vision and mission (T20): link from a short block to the full section. */ .afaq-identity-more { margin: var(--afaq-space-sm) 0 0; text-align: center; } .afaq-identity-more a { color: var(--afaq-teal); font-size: var(--afaq-fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Where we work (T19): countries under the collage. */ .afaq-where-countries { padding-block: var(--afaq-space-lg) var(--afaq-section-s); } /* Same look as the archive headings (pages/projects.css is not loaded on this page). */ .afaq-where-countries .archive-heading { margin: 0 0 18px; color: var(--afaq-teal); font-size: 28px; text-align: center; } .afaq-country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--afaq-space-md); margin: 0; padding: 0; list-style: none; } .afaq-country-card { position: relative; display: grid; gap: var(--afaq-space-2xs); height: 100%; padding: var(--afaq-space-md); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-lg); background: var(--afaq-white); box-shadow: var(--afaq-shadow-sm); } .afaq-country-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--afaq-radius-md); } .afaq-country-card h3 { margin: 0; font-size: var(--afaq-fs-h3); } .afaq-country-card h3 a { color: var(--afaq-teal); } /* The whole card opens the country page. */ .afaq-country-card h3 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .afaq-country-card:focus-within { outline: 3px solid var(--afaq-gold-ink); outline-offset: 3px; } .afaq-country-card p { margin: 0; color: var(--afaq-text); line-height: 1.8; } .afaq-country-card .afaq-country-counts { color: var(--afaq-teal); font-size: var(--afaq-fs-sm); font-weight: 600; } /* Impact page (T18): approved figures with period, source and approval. */ .afaq-impact-body { max-width: none; padding-block-end: var(--afaq-section-s); } .afaq-impact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--afaq-space-md); } .afaq-impact-card { display: grid; align-content: start; gap: var(--afaq-space-2xs); padding: var(--afaq-space-md); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-lg); background: var(--afaq-white); box-shadow: var(--afaq-shadow-sm); scroll-margin-top: 120px; } .afaq-impact-card:target { border-color: var(--afaq-gold); } .afaq-impact-value { margin: 0; color: var(--afaq-teal); font-size: clamp(32px, 4vw, 44px); font-weight: 700; line-height: 1.1; } .afaq-impact-value span { font-size: var(--afaq-fs-lg); font-weight: 600; } .afaq-impact-card h2 { margin: 0; color: var(--afaq-text); font-size: var(--afaq-fs-h3); } .afaq-impact-meta { display: grid; gap: var(--afaq-space-3xs); margin: var(--afaq-space-xs) 0 0; font-size: var(--afaq-fs-sm); } .afaq-impact-meta > div { display: flex; flex-wrap: wrap; gap: 0 var(--afaq-space-2xs); } .afaq-impact-meta dt { color: var(--afaq-sage); } .afaq-impact-meta dt::after { content: ':'; } .afaq-impact-meta dd { margin: 0; color: var(--afaq-text); } .afaq-impact-meta a { color: var(--afaq-teal); text-decoration: underline; text-underline-offset: 3px; } .afaq-impact-note { margin: var(--afaq-space-2xs) 0 0; color: var(--afaq-sage); font-size: var(--afaq-fs-sm); line-height: 1.8; } .real-impact-sources { display: inline-block; margin-block-start: var(--afaq-space-2xs); color: var(--afaq-teal); font-size: var(--afaq-fs-sm); text-decoration: underline; text-underline-offset: 3px; } /* Shown to editors only, where a section is hidden (e.g. the urgent strip without an open campaign). */ .afaq-editor-notice { margin-block: var(--afaq-space-sm); padding: var(--afaq-space-xs) var(--afaq-space-sm); border: 1px dashed var(--afaq-gold-ink); border-radius: var(--afaq-radius-sm); background: var(--afaq-white); color: var(--afaq-text); font-size: 14px; } /* Cause page (T16): goals as numbered cards (the impact steps' look) and the programme details. */ /* A cause description is longer than the archive's one line: keep it between the collage's sun and tower. */ @media (min-width: 641px) { .tax-cause .projects-banner p { max-width: 46ch; margin-inline: auto; line-height: 1.8; } } .afaq-cause-about { padding-block: 0; } /* Three stories fill the row on wide screens instead of three of the news page's five columns. */ @media (min-width: 1101px) { [aria-labelledby="cause-stories-title"] .news-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .afaq-cause-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--afaq-space-sm); margin: 0; padding: 0; list-style: none; counter-reset: afaq-goal; } .afaq-cause-goals li { counter-increment: afaq-goal; display: grid; gap: var(--afaq-space-3xs); padding: 18px; border: 1px solid var(--afaq-border); border-radius: 12px; background: var(--afaq-white); color: var(--afaq-text); line-height: 1.8; } .afaq-cause-goals li::before { content: counter(afaq-goal, decimal-leading-zero); color: var(--afaq-gold-ink); font-size: 28px; font-weight: 700; line-height: 1; } .afaq-cause-detail { max-width: 72ch; margin: var(--afaq-space-md) auto 0; color: var(--afaq-text); line-height: 1.9; } .afaq-cause-detail > :first-child { margin-block-start: 0; } /* Archive search (T15): keywords and country under the filter bar. */ .afaq-archive-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--afaq-space-2xs) var(--afaq-space-sm); margin-block-start: var(--afaq-space-sm); } .afaq-archive-search-field { display: grid; gap: 4px; flex: 1 1 220px; color: var(--afaq-teal); font-size: 14px; } .afaq-archive-search-field input, .afaq-archive-search-field select { width: 100%; min-height: 48px; padding-inline: var(--afaq-space-sm); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-sm); background: var(--afaq-white); color: var(--afaq-text); font: inherit; } .afaq-archive-search .button { min-height: 48px; } .afaq-archive-search-reset { align-self: center; color: var(--afaq-teal); text-decoration: underline; text-underline-offset: 3px; } .afaq-archive-search-count { flex-basis: 100%; margin: 0; color: var(--afaq-teal); font-size: 14px; } .project-pagination .page-gap, .news-pagination .page-gap { align-self: center; color: var(--afaq-teal); } /* Long archives have up to nine controls: wrap them on narrow screens instead of clipping. */ .project-pagination, .news-pagination { flex-wrap: wrap; row-gap: 8px; } .search-form { display: flex; gap: var(--afaq-space-2xs); max-width: 520px; margin-block: var(--afaq-space-sm); } .search-form label { flex: 1; } .search-form .search-field { width: 100%; min-height: 48px; padding-inline: var(--afaq-space-sm); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-sm); background: var(--afaq-white); font: inherit; } .search-form .search-submit { min-height: 48px; padding-inline: var(--afaq-space-md); border: 0; border-radius: var(--afaq-radius-sm); background: var(--afaq-teal); color: var(--afaq-white); font: inherit; font-weight: 600; cursor: pointer; } .afaq-notfound-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding-block: var(--afaq-section-m); } .afaq-notfound-code { font-size: clamp(64px, 9vw, 120px); font-weight: 700; line-height: 1; color: var(--afaq-gold-ink); } .afaq-notfound-art { width: 100%; border-radius: var(--afaq-radius-xl); box-shadow: var(--afaq-shadow-lg); } @media (max-width: 960px) { .afaq-single-hero, .afaq-single-layout, .afaq-notfound-inner { grid-template-columns: minmax(0, 1fr); } .afaq-single-media { order: -1; } .afaq-single-aside { position: static; } .afaq-linked-project { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .afaq-result { grid-template-columns: minmax(0, 1fr); } .search-form { flex-direction: column; } } /* Donation status, forms status and privacy lines (phase 7). */ .afaq-thanks { max-width: var(--afaq-width-narrow); margin-block: var(--afaq-section-s); padding: var(--afaq-space-xl) var(--afaq-space-lg); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-xl); background: var(--afaq-white); box-shadow: var(--afaq-shadow-sm); text-align: center; } .afaq-thanks h2 { color: var(--afaq-teal); font-size: var(--afaq-fs-h2); margin-block: var(--afaq-space-sm); } .afaq-thanks p { font-size: var(--afaq-fs-lg); } .afaq-thanks .afaq-single-actions { justify-content: center; } .afaq-thanks-reference { display: inline-flex; gap: var(--afaq-space-2xs); margin-block-start: var(--afaq-space-md); padding: var(--afaq-space-2xs) var(--afaq-space-md); border-radius: var(--afaq-radius-pill); background: var(--afaq-paper); font-weight: 700; color: var(--afaq-gold-ink); } .afaq-thanks-bank { margin-block-start: var(--afaq-space-md); padding: var(--afaq-space-md); border: 1px dashed var(--afaq-border); border-radius: var(--afaq-radius-md); text-align: start; font-size: var(--afaq-fs-sm); line-height: var(--afaq-lh-body); } .afaq-thanks--failed h2 { color: var(--afaq-gold-ink); } .afaq-form-status { margin-block-end: var(--afaq-space-sm); padding: var(--afaq-space-xs) var(--afaq-space-sm); border-inline-start: 3px solid var(--afaq-teal); border-radius: var(--afaq-radius-sm); background: var(--afaq-paper); font-weight: 600; } .afaq-form-status--error { border-inline-start-color: var(--afaq-gold); color: var(--afaq-gold-ink); } .afaq-form-consent { margin-block-start: var(--afaq-space-2xs); color: var(--afaq-sage); font-size: var(--afaq-fs-xs); } .afaq-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* WordPress content classes (images and captions placed in the editor). Logical sides, so they follow RTL. */ .afaq-entry .alignleft { float: left; margin: 0.4em 0 1em 1.5em; max-width: 50%; } .afaq-entry .alignright { float: right; margin: 0.4em 1.5em 1em 0; max-width: 50%; } .afaq-entry .aligncenter { display: block; margin-inline: auto; } .afaq-entry::after { content: ""; display: table; clear: both; } .afaq-entry .wp-caption, .afaq-entry figure { max-width: 100%; margin-block: 1.2em; } .afaq-entry img { max-width: 100%; height: auto; border-radius: var(--afaq-radius-md, 12px); } .afaq-entry .wp-caption-text, .afaq-entry figcaption, .afaq-entry .gallery-caption { margin-top: 0.5em; font-size: var(--afaq-fs-sm); color: var(--afaq-text); opacity: 0.8; text-align: center; } @media (max-width: 640px) { .afaq-entry .alignleft, .afaq-entry .alignright { float: none; margin: 1em auto; max-width: 100%; } } /* T14: choosing an amount on a campaign's page — the dialog's amount buttons, in a panel. */ .afaq-amount-picker { margin-block: var(--afaq-space-md) 0; padding: var(--afaq-space-md); border: 1px solid var(--afaq-border); border-radius: var(--afaq-radius-lg); background: var(--afaq-white); box-shadow: var(--afaq-shadow-sm); } .afaq-amount-picker[hidden] { display: none; } .afaq-amount-picker > h2 { margin: 0 0 var(--afaq-space-sm); color: var(--afaq-teal); font-size: var(--afaq-fs-h3); } .afaq-amount-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr)); gap: 9px; margin: 0 0 var(--afaq-space-sm); padding: 0; border: 0; } .afaq-amount-choices button { min-height: 46px; border: 1px solid var(--afaq-border); border-radius: 8px; background: var(--afaq-white); color: var(--afaq-teal); font: inherit; font-weight: 600; cursor: pointer; } .afaq-amount-choices button[aria-pressed=true] { background: var(--afaq-teal); color: var(--afaq-white); border-color: var(--afaq-teal); } .afaq-amount-choices button:focus-visible { outline: 2px solid var(--afaq-gold); outline-offset: 2px; } .afaq-amount-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--afaq-space-xs); } .afaq-amount-row label { font-weight: 600; } .afaq-amount-field { display: inline-flex; align-items: center; gap: var(--afaq-space-2xs); } .afaq-amount-field input { width: 9rem; min-height: 46px; padding-inline: 12px; border: 1px solid var(--afaq-border); border-radius: 8px; font: inherit; } .afaq-amount-picker .form-note { margin: var(--afaq-space-xs) 0 0; color: var(--afaq-sage); font-size: var(--afaq-fs-xs); } /* css/components/section-options.css */ /* * Section builder: shared options and sections that are not in the prototype (5.2, 5.16). * * Classes are added by afaq_section_apply_options() only when an option differs * from the design, so sections left on their defaults are untouched. * Spacing, backgrounds, alignment and visibility come from presets.css. */ /* Background image: the URL arrives as a custom property on the section. */ .afaq-bg-image { background-image: var(--afaq-section-image); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Container width on sections that are containers, and on the containers inside full-bleed sections. */ .container.afaq-width-narrow, .afaq-width-narrow .container { max-width: var(--afaq-width-narrow); } .container.afaq-width-normal, .afaq-width-normal .container { max-width: var(--afaq-width-normal); } .container.afaq-width-wide, .afaq-width-wide .container { max-width: var(--afaq-width-wide); } .container.afaq-width-full { width: 100%; max-width: none; } .afaq-width-full .container { max-width: none; } /* Decorations are positioned against their section. */ .afaq-has-deco { position: relative; isolation: isolate; } /* Centred link row between sections (projects archive). */ .afaq-link-row { text-align: center; margin: 12px auto; } /* Team (not in the prototype): the about page card language. */ .afaq-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--afaq-space-md); } .afaq-member { display: flex; flex-direction: column; align-items: center; } .afaq-member-photo { width: 128px; height: 128px; border-radius: var(--afaq-radius-pill); object-fit: cover; margin-bottom: var(--afaq-space-sm); box-shadow: var(--afaq-shadow-sm); } .afaq-member-role { color: var(--afaq-gold-ink); font-weight: 600; margin-bottom: var(--afaq-space-xs); } /* Section animations (assets/js/animations.js) never hide content before the script runs. */ html.motion-paused [data-animation], html.afaq-motion-off [data-animation] { opacity: 1 !important; transform: none !important; } /* css/components/header-compact.css */ /* Generated by tools/build-header-compact.py from the 960px header rules of: css/components/header.css, css/components/shell-options.css, css/pages/news.css. Do not edit. */ .afaq-nav-compact .header-inner{height:100px;align-items:center;padding-block:9px;gap:18px} .afaq-nav-compact .brand{width:91px;margin:0} .afaq-nav-compact .brand svg{height:83px} .afaq-nav-compact .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;width:44px;height:44px;margin-right:auto;padding:9px;z-index:3} .afaq-nav-compact .menu-toggle span{width:25px;height:2px;background:var(--afaq-teal);transition:transform .25s,opacity .25s} .afaq-nav-compact .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)} .afaq-nav-compact .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0} .afaq-nav-compact .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)} .afaq-nav-compact .header-donate{margin:0!important;min-height:44px;min-width:130px} .afaq-nav-compact .primary-nav{display:none;position:absolute;top:100%;right:var(--afaq-gutter);left:var(--afaq-gutter);flex-direction:column;align-items:stretch;padding:15px 24px;gap:0;background:var(--afaq-cream);border:1px solid var(--afaq-border);border-radius:14px;box-shadow:0 14px 30px #25333218;box-shadow:0 14px 30px rgb(from var(--afaq-text) r g b / 0.0941)} .afaq-nav-compact .primary-nav.is-open{display:flex} .afaq-nav-compact .primary-nav a,.afaq-nav-compact .nav-link{font-size:14px;text-align:right;min-height:47px;padding-block:10px} .afaq-nav-compact .primary-nav a::after,.afaq-nav-compact .nav-link::after{width:40px} .afaq-nav-compact .brand img{height:calc(74px * var(--afaq-logo-scale, 1))} .afaq-nav-compact .is-scrolled .brand img{height:calc(66px * var(--afaq-logo-scale, 1))} .afaq-nav-compact .primary-nav a,.afaq-nav-compact .nav-link{justify-content:flex-start;gap:12px;padding:10px 10px;border-radius:10px} .afaq-nav-compact .primary-nav a::after,.afaq-nav-compact .nav-link::after{right:10px;width:42px;bottom:6px} .afaq-nav-compact .nav-ico{width:19px;height:19px;opacity:.6} .afaq-nav-compact .primary-nav .afaq-only-desktop{display: none !important;} .afaq-nav-compact .news-page .primary-nav{color:var(--afaq-text)} .afaq-nav-compact .news-page .primary-nav .is-active{color:var(--afaq-teal)} .afaq-nav-compact .news-page .primary-nav a::after{background:var(--afaq-teal)} .afaq-nav-tight .header-inner{gap:12px} .afaq-nav-tight .primary-nav{gap:0} .afaq-nav-tight .primary-nav a,.afaq-nav-tight .nav-link{padding-inline:4px;gap:4px} .afaq-nav-tight .primary-nav a::after,.afaq-nav-tight .nav-link::after{right:4px;width:calc(100% - 8px)} .afaq-nav-measure .site-header,.afaq-nav-measure .site-header *{transition:none!important} /* css/presets.css */ /* * AFAQ Trust presets. * * Named, bounded options for the section builder and blocks (phase 5). * The admin picks a step (S/M/L/XL, narrow/normal/wide...). PHP maps the * choice to one of these classes from an allow-list; free CSS values are * never printed. Loaded last so a chosen preset wins over section defaults. * * All classes are prefixed afaq- and use logical properties for RTL. * Scales are defined in tokens.css. */ /* ------------------------------------------------------------------ */ /* Section spacing (task 1.4) */ /* ------------------------------------------------------------------ */ .afaq-space-top-none { padding-block-start: 0; } .afaq-space-top-s { padding-block-start: var(--afaq-section-s); } .afaq-space-top-m { padding-block-start: var(--afaq-section-m); } .afaq-space-top-l { padding-block-start: var(--afaq-section-l); } .afaq-space-top-xl { padding-block-start: var(--afaq-section-xl); } .afaq-space-bottom-none { padding-block-end: 0; } .afaq-space-bottom-s { padding-block-end: var(--afaq-section-s); } .afaq-space-bottom-m { padding-block-end: var(--afaq-section-m); } .afaq-space-bottom-l { padding-block-end: var(--afaq-section-l); } .afaq-space-bottom-xl { padding-block-end: var(--afaq-section-xl); } /* Gap inside a section's grid or stack. */ .afaq-gap-s { gap: var(--afaq-space-sm); } .afaq-gap-m { gap: var(--afaq-space-md); } .afaq-gap-l { gap: var(--afaq-space-lg); } .afaq-gap-xl { gap: var(--afaq-space-xl); } /* ------------------------------------------------------------------ */ /* Container width */ /* ------------------------------------------------------------------ */ .afaq-container { width: calc(100% - var(--afaq-gutter) * 2); max-width: var(--afaq-container-max, var(--afaq-width-wide)); margin-inline: auto; } .afaq-width-narrow { --afaq-container-max: var(--afaq-width-narrow); } .afaq-width-normal { --afaq-container-max: var(--afaq-width-normal); } .afaq-width-wide { --afaq-container-max: var(--afaq-width-wide); } .afaq-width-full { --afaq-container-max: none; } .afaq-width-full.afaq-container { width: 100%; } /* ------------------------------------------------------------------ */ /* Alignment of a section heading block */ /* ------------------------------------------------------------------ */ .afaq-align-start { text-align: start; } .afaq-align-center { text-align: center; } .afaq-align-end { text-align: end; } .afaq-align-center .afaq-heading-group { margin-inline: auto; } /* ------------------------------------------------------------------ */ /* Radius and elevation */ /* ------------------------------------------------------------------ */ .afaq-radius-none { border-radius: 0; } .afaq-radius-sm { border-radius: var(--afaq-radius-sm); } .afaq-radius-md { border-radius: var(--afaq-radius-md); } .afaq-radius-lg { border-radius: var(--afaq-radius-lg); } .afaq-radius-xl { border-radius: var(--afaq-radius-xl); } .afaq-radius-pill { border-radius: var(--afaq-radius-pill); } .afaq-shadow-none { box-shadow: none; } .afaq-shadow-sm { box-shadow: var(--afaq-shadow-sm); } .afaq-shadow-md { box-shadow: var(--afaq-shadow-md); } .afaq-shadow-lg { box-shadow: var(--afaq-shadow-lg); } /* ------------------------------------------------------------------ */ /* Section background surfaces */ /* ------------------------------------------------------------------ */ .afaq-bg-cream { background-color: var(--afaq-cream); color: var(--afaq-text); } .afaq-bg-paper { background-color: var(--afaq-paper); color: var(--afaq-text); } .afaq-bg-white { background-color: var(--afaq-white); color: var(--afaq-text); } .afaq-bg-teal { background-color: var(--afaq-teal); color: var(--afaq-white); } .afaq-bg-deep-teal { background-color: var(--afaq-deep-teal); color: var(--afaq-white); } .afaq-bg-transparent { background-color: transparent; } /* ------------------------------------------------------------------ */ /* Type scale (task 1.5) */ /* ------------------------------------------------------------------ */ .afaq-fs-xs { font-size: var(--afaq-fs-xs); } .afaq-fs-sm { font-size: var(--afaq-fs-sm); } .afaq-fs-base { font-size: var(--afaq-fs-base); } .afaq-fs-lg { font-size: var(--afaq-fs-lg); } .afaq-fs-h3 { font-size: var(--afaq-fs-h3); line-height: var(--afaq-lh-heading); } .afaq-fs-h2 { font-size: var(--afaq-fs-h2); line-height: var(--afaq-lh-heading); } .afaq-fs-h1 { font-size: var(--afaq-fs-h1); line-height: var(--afaq-lh-heading); } .afaq-fs-hero-s { font-size: var(--afaq-fs-hero-s); line-height: var(--afaq-lh-tight); } .afaq-fs-hero-m { font-size: var(--afaq-fs-hero-m); line-height: var(--afaq-lh-tight); } .afaq-fs-hero-l { font-size: var(--afaq-fs-hero-l); line-height: var(--afaq-lh-tight); } .afaq-fw-regular { font-weight: 400; } .afaq-fw-medium { font-weight: 500; } .afaq-fw-semibold { font-weight: 600; } .afaq-fw-bold { font-weight: 700; } .afaq-font-display { font-family: var(--afaq-font-display); } .afaq-font-body { font-family: var(--afaq-font-body); } .afaq-font-ui { font-family: var(--afaq-font-ui); } .afaq-color-teal { color: var(--afaq-teal); } .afaq-color-deep-teal { color: var(--afaq-deep-teal); } .afaq-color-gold { color: var(--afaq-gold); } .afaq-color-gold-ink { color: var(--afaq-gold-ink); } .afaq-color-text { color: var(--afaq-text); } .afaq-color-white { color: var(--afaq-white); } /* ------------------------------------------------------------------ */ /* Visibility */ /* ------------------------------------------------------------------ */ @media (max-width: 640px) { .afaq-hide-mobile { display: none !important; } } @media (min-width: 641px) { .afaq-hide-desktop { display: none !important; } }