/* ============================================================================= PAGES.CSS — shared styles for all main site pages ----------------------------------------------------------------------------- STRUCTURE 1. TOKENS ................ palette, alpha channels, external deps 2. SHARED PRIMITIVES ..... patterns used by 2+ page families 3. PAGE SECTIONS ......... alphabetical, each self-contained 4. GLOBAL MOTION & PRINT . reduced-motion + print rules CONVENTIONS - One rule per line. Media queries live at the END of their own section, sorted DESCENDING by breakpoint so the cascade resolves predictably. - Selector grouping (not renaming) is used to remove duplication, so this file is a drop-in replacement: no HTML changes are required. - Anything marked FIXME is pre-existing behaviour preserved on purpose. See the accompanying notes before changing it. ============================================================================= */ /* ============================================================================= 1. TOKENS ============================================================================= */ /* Consumed from the global stylesheet, NOT defined here: --g1 --g2 --nav --muted --shadow --border --txt --text FIXME: --txt (sitemap) and --text (book buttons) are both used exactly once. One of them is almost certainly a typo — confirm against the global sheet. FIXME: @keyframes ayaGeo is referenced by .orgmap-section .aya-geometry but is not defined in this file. Confirm it exists in the global sheet. NOTE: --brand below duplicates the global --g1. Merge them once the global sheet can be edited; until then they must stay in sync. */ :root{ /* greens */ --brand:#0f5132; --brand-deep:#0A3B2A; --brand-mid:#198754; /* golds */ --gold:#d4af37; --gold-soft:#E3C77E; --gold-dark:#8a6d1d; --gold-deep:#b8901f; /* neutrals */ --ivory:#FAF6EC; --ink:#1c2a22; --body:#41524a; --soft:#4a5a50; --quiet:#6b7a72; --brand-ink:#082b21; /* near-black green: deepest surface tier */ /* channel triplets — for rgb(var(--x) / N%) alpha variants */ --brand-rgb:15 81 50; --brand-mid-rgb:25 135 84; --deep-rgb:10 59 42; --gold-rgb:212 175 55; --gold-soft-rgb:227 199 126; --white-rgb:255 255 255; --slate-rgb:15 23 42; --ivory-rgb:250 246 236; /* ---- design scales (added; nothing consumes these yet) ------------------- Derived from actual usage in this file. See snap-report.md for the list of rules that would move when these are adopted. */ /* radius — replaces 23 ad-hoc values; max shift 5px */ --r-xs:10px; --r-sm:14px; --r-md:18px; --r-lg:22px; --r-xl:26px; --r-pill:999px; /* elevation — replaces 89 distinct shadows; all tinted from one ink */ --e-1:0 8px 20px rgb(var(--deep-rgb)/8%); /* resting card */ --e-2:0 12px 32px rgb(var(--deep-rgb)/9%); /* raised card */ --e-3:0 20px 44px rgb(var(--deep-rgb)/14%); /* hover */ --e-4:0 38px 84px rgb(var(--deep-rgb)/34%); /* modal / overlay */ /* motion — replaces 19 durations and 6 hover-lift heights */ --t-fast:.2s; --t-base:.3s; --t-slow:.5s; --lift-sm:translateY(-2px); --lift-lg:translateY(-4px); /* uppercase micro-label (kicker / tag / badge / eyebrow) */ --label-size:.68rem; --label-track:.12em; --label-weight:800; } /* Back-compat aliases. The flier calendar was authored against --fc-*. Kept so any inline styles or JS referencing them keep working. */ :root{ --fc-g1:var(--brand); --fc-g2:var(--brand-deep); --fc-gold:var(--gold); --fc-gold2:var(--gold-soft); --fc-ivory:var(--ivory); --fc-ink:var(--ink); --fc-soft:var(--soft); } /* ============================================================================= 2. SHARED PRIMITIVES Used by the ABOUT (.aw-), DONATIONS (.dn-), DU'A (.du-), IMAMS (.im-), JUMU'AH (.jm-) and 99 NAMES (.nm-) page families. Page-specific overrides live in their own sections below. ============================================================================= */ /* --- 2.1 Patterned page shell ------------------------------------------- */ .aw-page,.dn-page,.du-page,.jm-page{position:relative;min-height:70vh;overflow-x:hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%230f5132' stroke-width='1.5' opacity='.11'%3E%3Cpath d='M70 10 L94.7 45.3 L130 70 L94.7 94.7 L70 130 L45.3 94.7 L10 70 L45.3 45.3 Z'/%3E%3Cpath d='M70 28 L99.7 70 L70 112 L40.3 70 Z'/%3E%3Cpath d='M28 70 L70 40.3 L112 70 L70 99.7 Z'/%3E%3Ccircle cx='70' cy='70' r='14'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(1000px 500px at 50% -8%,#fbf7ea 0%,transparent 60%), linear-gradient(180deg,#f9f4e6,#f4efe2 55%,#efe8d4); background-size:140px 140px,auto,auto} .aw-page,.dn-page{padding-bottom:80px} .du-page,.jm-page{padding-bottom:70px} .aw-page:before,.dn-page:before,.du-page:before,.jm-page:before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 70% at 50% 12%,rgba(253,252,248,.75),rgba(244,239,226,.35) 60%,rgba(244,239,226,.15))} .aw-page>*,.dn-page>*,.du-page>*,.jm-page>*{position:relative} /* --- 2.2 Page hero + gold rule ------------------------------------------ */ .du-hero,.jm-hero{position:relative;text-align:center;padding:clamp(30px,5vw,56px) 18px 8px} .aw-thread,.du-hero:after,.jm-hero:after,.st-hero::after{height:2.5px;opacity:.85; background:linear-gradient(90deg,transparent,var(--gold) 28%,var(--gold-soft) 50%,var(--gold) 72%,transparent)} .du-hero:after,.jm-hero:after{content:"";position:absolute;left:14%;right:14%;bottom:-4px;pointer-events:none} .aw-kicker,.du-kicker,.jm-kicker,.nm-kicker,.st-eyebrow{display:inline-block;margin-bottom:10px;padding:6px 15px;border-radius:999px;background:rgb(var(--brand-rgb)/8%);border:1px solid rgb(var(--gold-rgb)/45%);color:var(--gold-dark);font-size:.66rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase} .du-hero h1,.jm-hero h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:clamp(1.9rem,4.5vw,3rem);color:var(--brand-deep)} .du-hero h1{margin:0} /* --- 2.3 Ivory card surface --------------------------------------------- */ .du-card,.jm-card,.st-crosslink{background:rgb(var(--white-rgb)/94%);backdrop-filter:blur(2px);border:1px solid rgb(var(--gold-rgb)/28%);border-radius:18px;box-shadow:var(--e-2)} .du-card,.jm-card{padding:clamp(16px,3vw,24px);height:100%;box-sizing:border-box} .dn-go-card,.dn-info-card,.dn-method{background:rgb(var(--white-rgb)/94%);border:1px solid rgb(var(--gold-rgb)/28%);border-radius:18px;box-shadow:var(--e-2)} /* --- 2.4 Search + filter controls --------------------------------------- */ #duSearch,#jmSearch,#nmSearch{width:min(460px,92%);padding:12px 20px;border-radius:999px;border:1px solid rgb(var(--brand-rgb)/20%);background:#fff;font:600 .95rem/1 Inter,sans-serif;color:var(--ink);outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)} #duSearch:focus,#jmSearch:focus,#nmSearch:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgb(var(--gold-rgb)/15%)} .du-controls,.jm-controls{margin-top:26px;display:flex;flex-direction:column;gap:11px;align-items:center} .du-filters,.jm-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0 12px} .du-filters{align-items:center} /* --- 2.5 Scroll-snap carousel ------------------------------------------- */ .du-car-section,.jm-car-section{margin-top:24px} .dn-car-wrap,.du-car-wrap,.jm-car-wrap{position:relative;max-width:1220px;margin:0 auto} .dn-car-wrap{margin-top:22px} .du-slide,.jm-slide{flex:0 0 min(540px,92vw);scroll-snap-align:start} .du-slide.hiddenx,.jm-slide.hiddenx,.nm-cell.hiddenx{display:none} /* --- 2.6 Counts, empty states, tags ------------------------------------- */ .du-count,.jm-count{text-align:center;font-weight:800;font-size:.76rem;color:var(--gold-dark);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px} .du-empty,.im-empty,.jm-empty{text-align:center;font-weight:700;color:var(--quiet)} .du-empty,.jm-empty{padding:24px 0} .im-empty{grid-column:1/-1;padding:30px 0} .du-tag,.jm-tag,.st-cite{padding:4px 11px;border-radius:999px;background:rgb(var(--brand-rgb)/6%);border:1px solid rgb(var(--brand-rgb)/14%);color:var(--brand);font-size:.68rem;font-weight:800} .du-tags,.jm-tags{display:flex;flex-wrap:wrap;gap:6px} .jm-tags{margin-top:12px} .du-tags{margin-top:14px} /* --- 2.7 Dark medallion placeholder ------------------------------------- */ .du-num,.im-photo-ph,.jm-chip-ph,.nm-medal,.st-medallion{place-items:center;background:radial-gradient(circle at 38% 30%,var(--brand),var(--brand-ink))} .du-num,.im-photo-ph,.jm-chip-ph,.st-medallion{color:var(--gold-soft)} .du-num,.jm-chip-ph,.st-medallion{display:grid} .im-photo-ph{display:inline-grid;font-size:2.2rem} /* --- 2.9 Uppercase micro-label (eyebrow / ref / caption) ------------------ */ .du-ref,.jm-date,.story-col h3,.story-col li span,.st-locus,.st-ref,.st-source{font-size:var(--label-size);letter-spacing:var(--label-track);font-weight:var(--label-weight);text-transform:uppercase} /* --- 2.8 Dark pill link -------------------------------------------------- */ .dn-btn,.im-link,.st-btn{display:inline-block;border-radius:999px;text-decoration:none;font-weight:800;color:var(--ivory);background:linear-gradient(135deg,var(--brand),var(--brand-deep));box-shadow:var(--e-1);transition:transform var(--t-fast)} .dn-btn{align-self:flex-start;padding:11px 24px;font-size:.85rem} .im-link{margin-top:14px;padding:9px 20px;font-size:.78rem} .st-btn{flex:0 0 auto;padding:13px 22px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase} .dn-btn:hover,.im-link:hover,.st-btn:hover{transform:var(--lift-sm)} /* ============================================================================= 3. PAGE SECTIONS ============================================================================= */ /* ----------------------------------------------------------------------------- ABOUT THIS WEBSITE (.aw-) Page shell, kicker and gold hairline come from section 2. -------------------------------------------------------------------------- */ .aw-page{min-height:60vh} .aw-shell{max-width:1020px;margin:0 auto;padding:clamp(34px,5vw,60px) 18px 0;text-align:center} /* NOTE: near-identical to the .du-/.im-/.jm- hero h1 rule, but 4.6vw vs 4.5vw. Unify if the difference is unintentional. */ .aw-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:clamp(1.9rem,4.6vw,3rem);color:var(--brand-deep)} .aw-card{margin-top:26px;text-align:left;background:rgb(var(--white-rgb)/94%);backdrop-filter:blur(2px); border:1px solid rgb(var(--gold-rgb)/32%);border-radius:22px;padding:clamp(26px,5vw,48px); box-shadow:var(--e-3)} .aw-lead{font-size:clamp(1rem,2.4vw,1.12rem);line-height:1.9;color:#33443b} .aw-lead:first-of-type::first-letter{float:left;padding:6px 10px 0 0;color:var(--brand);font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:3.4em;line-height:.8} .aw-label{margin:-8px 0 14px;text-align:center;font-size:.68rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dark)} .aw-thread{margin:26px 12%} .aw-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:9px;justify-content:center} .aw-links a{padding:8px 17px;border-radius:999px;text-decoration:none;font-size:.78rem;font-weight:800; color:var(--brand);background:rgb(var(--white-rgb)/85%);border:1px solid rgb(var(--gold-rgb)/40%);transition:all var(--t-fast)} .aw-links a:hover{border-color:var(--gold);transform:var(--lift-sm)} /* ----------------------------------------------------------------------------- ALBUM MAP -------------------------------------------------------------------------- */ .album-map-section{padding:34px 0;background:#f7fbf8} .album-map-wrap{overflow:hidden;border:1px solid rgb(var(--brand-rgb)/14%);border-radius:22px;background:#fff;box-shadow:var(--e-2)} #albumMap{width:100%;height:430px} /* Leaflet override — scoped to this map so other Leaflet instances are untouched. */ .album-map-wrap .leaflet-popup-content{max-height:360px;overflow-y:auto;overflow-x:hidden} .album-map-popup{width:310px;max-height:340px;overflow-y:auto;overflow-x:hidden;padding-right:4px} .album-map-popup h3{position:sticky;top:0;z-index:2;margin:0 0 10px;padding:0 0 10px;background:#fff;border-bottom:1px solid rgb(var(--brand-rgb)/12%);color:var(--brand);font-size:1.05rem} .album-map-popup-item{display:grid;grid-template-columns:78px 1fr;gap:10px;padding:10px 0;border-top:1px solid rgb(var(--brand-rgb)/12%)} .album-map-popup-item:first-of-type{border-top:0} .album-map-popup-item img{width:78px;height:62px;object-fit:cover;border-radius:10px;background:#eef7f1} .album-map-popup-item strong{display:block;color:var(--brand);font-size:.92rem;line-height:1.25} .album-map-popup-item span{display:block;margin-top:3px;color:#60756b;font-size:.78rem} .album-map-popup-item p{margin:5px 0;color:#31463c;font-size:.8rem;line-height:1.35} .album-map-popup-item a{display:inline-flex;margin-top:4px;padding:6px 10px;border-radius:999px;background:var(--brand);color:#fff!important;text-decoration:none;font-weight:800;font-size:.75rem} .album-map-popup::-webkit-scrollbar{width:7px} .album-map-popup::-webkit-scrollbar-track{background:#eef7f1;border-radius:999px} .album-map-popup::-webkit-scrollbar-thumb{background:var(--brand);border-radius:999px} @media(max-width:700px){ #albumMap{height:360px} .album-map-wrap .leaflet-popup-content{max-height:300px} .album-map-popup{width:260px;max-height:285px} .album-map-popup-item{grid-template-columns:68px 1fr} .album-map-popup-item img{width:68px;height:56px} } /* ----------------------------------------------------------------------------- ALIBOT -------------------------------------------------------------------------- */ .alibot-page{background:#fff} .alibot-hero{padding:64px 0;background:linear-gradient(135deg,#fff8e1,#fff,#e9f6ef)} .alibot-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center} .alibot-hero-copy h1{margin:12px 0 14px;color:var(--brand);font-size:clamp(2.4rem,5vw,4.8rem);line-height:.98;letter-spacing:-.04em} .alibot-hero-copy p{max-width:680px;margin:0;color:var(--brand-deep);font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.55;font-weight:700} .alibot-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .alibot-hero-art{display:flex;justify-content:center;align-items:center} .alibot-hero-art img{width:min(360px,90%);height:auto;object-fit:contain;filter:drop-shadow(0 24px 34px rgb(var(--brand-rgb)/18%))} .alibot-info{padding:56px 0} .alibot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .alibot-card{padding:24px 20px;border-radius:22px;background:#fff;border:1px solid rgb(var(--brand-rgb)/12%);box-shadow:var(--e-2);transition:var(--t-base) ease} .alibot-card:hover{transform:var(--lift-lg);border-color:rgb(var(--gold-rgb)/45%);box-shadow:var(--e-3)} .alibot-card-icon{width:56px;height:56px;margin-bottom:16px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--brand),var(--brand-mid));color:#fff;font-size:1.6rem} .alibot-card h3{margin:0 0 8px;color:var(--brand);font-size:1.18rem} .alibot-card p{margin:0;color:#5d7068;line-height:1.55;font-weight:600} .alibot-notice{padding:0 0 64px} .alibot-notice-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;border-radius:26px;background:#fff8e1;border:1px solid rgb(var(--gold-rgb)/35%);box-shadow:var(--e-2)} .alibot-notice-card h2{margin:12px 0 8px;color:var(--brand);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.05} .alibot-notice-card p{max-width:850px;margin:0;color:var(--brand-deep);font-weight:600;line-height:1.6} .alibot-media-section{padding:32px 0;background:#fff} .alibot-media-card{max-width:420px;margin:auto;padding:14px;border-radius:22px;background:#fff;border:1px solid rgb(var(--brand-rgb)/12%);box-shadow:var(--e-2)} .alibot-media-card img{display:block;width:100%;height:auto;border-radius:18px} @media(max-width:1000px){ .alibot-hero-grid{grid-template-columns:1fr;text-align:center} .alibot-hero-copy p{margin:auto} .alibot-actions{justify-content:center} .alibot-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .alibot-hero{padding:44px 0} .alibot-grid{grid-template-columns:1fr} .alibot-notice-card{display:block;text-align:center} .alibot-notice-card .btn{margin-top:18px} } @media(max-width:600px){ .alibot-media-section{padding:24px 0} .alibot-media-card{max-width:320px;padding:10px;border-radius:18px} .alibot-media-card img{border-radius:14px} } /* ----------------------------------------------------------------------------- BOOKS / LIBRARY -------------------------------------------------------------------------- */ .books-shell{max-width:1100px;margin:0 auto;padding:32px 20px 56px} .books-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start} .book-sidebar,.book-actions{display:grid;gap:18px} .book-actions{gap:12px} .book-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700} .book-btn.primary{background:var(--g1);color:#fff} .book-btn.secondary{background:rgb(var(--white-rgb)/80%);color:var(--text);border:1px solid rgba(22,163,74,.18)} .book-btn:hover{transform:var(--lift-sm)} .book-list{margin:0;padding-left:18px;line-height:1.8} .muted-sm{font-size:.95rem;opacity:.88} .library-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px} .library-tile{padding:16px;border-radius:14px;background:#fff;border:1px solid rgba(22,163,74,.12);box-shadow:var(--e-1)} .library-tile h4{margin:0 0 6px;font-size:1rem} .library-tile p{margin:0;font-size:.95rem;line-height:1.65;color:var(--muted)} .books-note{margin-top:18px;padding:14px 16px;border-left:4px solid #22c55e;background:rgba(34,197,94,.08);border-radius:10px} .books-note p{margin:0} /* ----------------------------------------------------------------------------- BUILDING PAGE — hero, intro, door signs, aya cards -------------------------------------------------------------------------- */ .building-page{background:#f7fbf8} .building-hero{padding:28px 0 14px;background:linear-gradient(135deg,#f7fbf8,#eef7f1)} .building-hero-card{position:relative;overflow:hidden;padding:clamp(28px,5vw,54px);border-radius:26px;background:linear-gradient(135deg,rgb(var(--brand-rgb)/94%),rgb(var(--brand-mid-rgb)/88%));color:#fff;box-shadow:var(--shadow)} .building-hero-card:before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 15% 20%,rgb(var(--white-rgb)/13%),transparent 28%),radial-gradient(circle at 88% 82%,rgb(var(--gold-rgb)/22%),transparent 34%)} .building-hero-card>*{position:relative;z-index:1} .building-badge{display:inline-flex;width:max-content;margin-bottom:12px;padding:7px 11px;border-radius:999px;background:#dcfce7;color:#166534;font-size:.8rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase} .building-badge.light{background:rgb(var(--white-rgb)/16%);color:#fff;border:1px solid rgb(var(--white-rgb)/22%)} .building-hero h1{max-width:850px;margin:0 0 14px;color:#fff;font-size:clamp(2.2rem,5vw,4.6rem);line-height:1;letter-spacing:-.045em} .building-hero p{max-width:850px;margin:0;color:rgb(var(--white-rgb)/90%);font-size:1.15rem;line-height:1.75} .building-intro-section{padding:18px 0} .building-intro-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:stretch} .building-intro-copy,.building-intro-note{padding:18px;border-radius:22px;background:#fff;border:1px solid rgb(var(--brand-rgb)/12%);box-shadow:var(--e-2)} .building-intro-copy h2{margin:0 0 10px;color:var(--nav);font-size:clamp(1.5rem,3vw,2.35rem);line-height:1.12} .building-intro-copy p{margin:0;color:var(--muted);font-size:1.08rem;line-height:1.7} .building-intro-note{display:flex;flex-direction:column;justify-content:center;background:var(--brand);color:#fff} .building-intro-note strong{font-size:1.25rem;line-height:1.2} .building-intro-note span{margin-top:8px;color:rgb(var(--white-rgb)/86%);line-height:1.5} .building-signs-section{padding:24px 0 34px} .building-message-section{padding:10px 0 34px} .building-message-card{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--brand-mid));color:#fff;box-shadow:var(--shadow)} .building-message-card h2{margin:0 0 10px;color:#fff;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.1} .building-message-card p{max-width:760px;margin:0;color:rgb(var(--white-rgb)/88%);line-height:1.7} .building-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:11px 16px;border-radius:999px;background:#fff;color:var(--brand);font-weight:900;text-decoration:none} /* Door signs — full-width horizontal cards */ /* Door aya cards. The !important here fights a global paragraph rule — keep it. */ .door-aya-card{margin:12px auto 0;padding:12px;border-radius:14px;text-align:center;background:#f7fbf8;border:1px solid rgb(var(--brand-rgb)/12%);text-align:center} .door-aya-arabic{margin:0 auto 8px!important;color:var(--brand)!important;font-family:"Amiri","Noto Naskh Arabic","Scheherazade New",serif;font-size:1.15rem!important;line-height:1.8!important;text-align:center;direction:rtl} .door-aya-translation{margin:0 auto 8px!important;color:#31463c!important;font-size:.88rem!important;line-height:1.55!important;text-align:center} .door-aya-reference{display:inline-flex;justify-content:center;padding:5px 9px;border-radius:999px;background:#dcfce7;color:#166534;font-size:.75rem;font-weight:900} @media(max-width:760px){ .building-intro-grid{grid-template-columns:1fr} .building-message-card{display:block} .building-btn{margin-top:16px} .building-hero-card{border-radius:22px} } /* ----------------------------------------------------------------------------- BUILDING — entrance sign carousel Replaces the old .door-sign-grid, which had six overlapping declarations (four unreachable) and ~28 !important overrides scoped to a .building-page wrapper that no longer exists in the markup. -------------------------------------------------------------------------- */ .sitemap-carousel .door-card{flex:0 0 min(340px,84vw)} .door-card .door-card-image{position:relative;height:104px;padding:10px;box-sizing:border-box} .door-card .door-card-image img{width:100%;height:100%;object-fit:contain} .door-card .door-card-image span{position:absolute;left:10px;top:10px;padding:4px 9px;border-radius:var(--r-pill);background:rgb(var(--brand-rgb)/88%);color:#fff;font-size:.68rem;font-weight:900} .door-card .featured-body{text-align:center} /* ----------------------------------------------------------------------------- CALENDAR — embedded iframe + reviews -------------------------------------------------------------------------- */ .calendar-wrap{margin:18px auto 0;max-width:1100px;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--e-1)} .calendar-frame{width:100%;height:760px;border:0;display:block} .reviews-wrap{max-width:1000px;margin:18px auto;padding:0} @media(max-width:768px){ .calendar-wrap,.reviews-wrap{max-width:100%} .calendar-frame{height:620px} .reviews-wrap{margin:14px auto} } /* ----------------------------------------------------------------------------- CALENDAR — flier grid (was /css/calendar_grid.css) -------------------------------------------------------------------------- */ .fcal-section{position:relative;overflow:hidden;padding:clamp(28px,4vw,52px) 14px;background:linear-gradient(180deg,#fdfcf8,#f4efe2)} .fcal-geo{position:absolute;inset:-25%;width:150%;height:150%;opacity:.05;pointer-events:none;animation:fcalGeo 160s linear infinite;transform-origin:center} @keyframes fcalGeo{to{transform:rotate(360deg)}} .fcal-shell{position:relative;z-index:1;width:min(1120px,100%);margin:0 auto} /* header / month nav */ .fcal-head{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:22px} .fcal-month{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--fc-g2);min-width:min(9em,60vw);text-align:center} .fcal-nav{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgb(var(--gold-rgb)/50%);cursor:pointer;font-size:1.5rem;line-height:1;color:var(--fc-g1);background:#fff;box-shadow:var(--e-1);transition:transform var(--t-fast),background var(--t-fast),color var(--t-fast)} .fcal-nav:hover:not(:disabled){transform:var(--lift-sm);background:linear-gradient(135deg,var(--fc-g1),var(--fc-g2));color:#fff} .fcal-nav:disabled{opacity:.35;cursor:default} /* grid */ .fcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .fcal-grid[hidden]{display:none} .fcal-dow{text-align:center;padding:8px 0;font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--fc-soft)} /* cells: taller than square, so title + time fit under the flier */ .fcal-cell{position:relative;min-height:120px;border-radius:10px;background:#fff;border:1px solid rgb(var(--brand-rgb)/8%);padding:6px;display:flex;flex-direction:column;transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)} .fcal-empty{background:transparent;border:0;min-height:0} .fcal-daynum{font-size:.8rem;font-weight:700;color:var(--fc-soft);line-height:1;margin-bottom:4px} .fcal-cell.is-past{opacity:.9} .fcal-cell.is-today{border-color:var(--fc-gold);box-shadow:0 0 0 2px rgb(var(--gold-rgb)/35%)} .fcal-cell.is-today .fcal-daynum{color:var(--fc-g1)} .fcal-cell.has-events{cursor:pointer;border-color:rgb(var(--gold-rgb)/45%)} .fcal-cell.has-events:hover,.fcal-cell.has-events:focus-visible{transform:var(--lift-lg);box-shadow:var(--e-2);outline:none;z-index:2} /* event block inside a cell: whole flier image + label */ .fcal-cell-event{margin-top:auto;display:flex;flex-direction:column;gap:4px;min-height:0} .fcal-thumb{display:block;width:100%;border-radius:10px;overflow:hidden;background:#f4efe2;box-shadow:inset 0 0 0 1px rgb(var(--gold-rgb)/40%)} .fcal-thumb img{display:block;width:100%;height:auto;max-height:84px;object-fit:contain;background:#faf7ef} .fcal-thumb-ph{display:flex;align-items:center;justify-content:center;min-height:44px;background:linear-gradient(135deg,var(--fc-g1),var(--fc-g2));color:var(--fc-gold2);font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.1rem} .fcal-thumb-ph.is-jum{background:linear-gradient(135deg,var(--fc-gold),var(--gold-deep));color:#3a2f10} /* title + time label under the flier */ .fcal-ev-label{display:flex;flex-direction:column;line-height:1.15} .fcal-ev-t{font-size:.64rem;font-weight:800;color:var(--fc-g2);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .fcal-ev-hr{font-size:.6rem;font-weight:700;color:var(--fc-gold);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fcal-more{font-size:.56rem;font-weight:800;color:var(--fc-g1);background:rgb(var(--gold-rgb)/18%);border-radius:999px;padding:1px 7px;align-self:flex-start} .fcal-hint{margin-top:16px;text-align:center;font-size:.8rem;color:var(--fc-soft)} /* holiday ribbons — Islamic (gold, from FCNA-derived holidays.json) */ .fcal-holiday{display:block;margin-bottom:3px;padding:2px 6px;border-radius:10px;font-size:.56rem;font-weight:800;line-height:1.2;color:#5b4a12;background:linear-gradient(135deg,rgb(var(--gold-rgb)/28%),rgb(var(--gold-soft-rgb)/22%));border:1px solid rgb(var(--gold-rgb)/50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fcal-cell:has(.fcal-holiday){background:linear-gradient(180deg,#fffdf6,#fbf4dd)} .fcal-ev-tag.is-holiday{background:linear-gradient(135deg,rgb(var(--gold-rgb)/20%),rgb(var(--gold-soft-rgb)/16%));border-color:rgb(var(--gold-rgb)/50%);color:var(--gold-dark)} /* holiday ribbons — US federal (blue, distinct from Islamic gold) */ .fcal-usholiday{color:#1e3a5f;background:linear-gradient(135deg,rgba(37,99,160,.16),rgba(37,99,160,.1));border-color:rgba(37,99,160,.4)} .fcal-cell:has(.fcal-usholiday):not(:has(.fcal-holiday)){background:linear-gradient(180deg,#fbfdff,#eef4fb)} .fcal-ev-tag.is-usholiday{background:linear-gradient(135deg,rgba(37,99,160,.14),rgba(37,99,160,.1));border-color:rgba(37,99,160,.4);color:#1e5aa0} /* detail panel */ .fcal-panel{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px} .fcal-panel[hidden]{display:none} .fcal-panel-backdrop{position:absolute;inset:0;background:rgba(10,30,20,.62);backdrop-filter:blur(3px)} .fcal-panel-inner{position:relative;z-index:1;width:min(560px,100%);max-height:88vh;overflow-y:auto;background:linear-gradient(180deg,#fff,#fdfaf1);border-radius:22px;border:1px solid rgb(var(--gold-rgb)/50%);box-shadow:var(--e-4);padding:26px 24px} .fcal-panel-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;border-radius:50%;background:rgb(var(--brand-rgb)/8%);color:var(--fc-g1);font-size:1.4rem;line-height:1;cursor:pointer;transition:background var(--t-fast)} .fcal-panel-close:hover{background:rgb(var(--brand-rgb)/16%)} .fcal-panel-date{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.35rem;color:var(--fc-g2);margin-bottom:16px;padding-right:34px} .fcal-ev{display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid rgb(var(--brand-rgb)/10%)} .fcal-ev:first-child{padding-top:0;border-top:0} .fcal-ev-flier{border-radius:14px;overflow:hidden;border:1px solid rgb(var(--gold-rgb)/40%);box-shadow:var(--e-2);background:#faf7ef} .fcal-ev-flier img{display:block;width:100%;height:auto} .fcal-ev-tag{display:inline-block;padding:3px 11px;border-radius:999px;background:rgb(var(--brand-rgb)/8%);border:1px solid rgb(var(--gold-rgb)/40%);color:var(--fc-g1);font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px} .fcal-ev-info h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.3rem;color:var(--fc-g2);line-height:1.15} .fcal-ev-meta{margin-top:6px;font-size:.9rem;color:var(--fc-soft);font-weight:600} .fcal-ev-time{color:var(--fc-g1);font-weight:800} .fcal-ev-addr{margin-top:2px;font-size:.82rem;color:var(--fc-soft)} .fcal-ev-desc{margin-top:10px;font-size:.95rem;line-height:1.6;color:#2c3a32} .fcal-ev-actions{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px} .fcal-ev-add,.fcal-ev-link{display:inline-block;padding:9px 18px;border-radius:999px;font-size:.82rem;font-weight:800;text-decoration:none;transition:transform var(--t-fast),box-shadow var(--t-fast)} .fcal-ev-add{background:linear-gradient(135deg,var(--fc-g1),var(--fc-g2));color:#fff;box-shadow:var(--e-1)} .fcal-ev-add:hover{transform:var(--lift-sm)} .fcal-ev-link{background:rgb(var(--gold-rgb)/16%);color:var(--gold-dark)} .fcal-ev-link:hover{background:rgb(var(--gold-rgb)/28%)} @media(max-width:640px){ .fcal-grid{gap:3px} .fcal-cell{min-height:150px;border-radius:10px;padding:3px} .fcal-daynum{font-size:.62rem} .fcal-thumb img{max-height:44px} .fcal-ev-t{font-size:.56rem;-webkit-line-clamp:1} .fcal-ev-hr{font-size:.54rem} .fcal-dow{font-size:.54rem} .fcal-panel-inner{padding:22px 16px} .fcal-holiday{font-size:.5rem;padding:1px 4px} } /* ----------------------------------------------------------------------------- COMMUNITY PARTNERS -------------------------------------------------------------------------- */ .partners-page{padding:clamp(28px,4vw,56px) 0} .partners-wrap{max-width:1180px;margin:auto;padding:0 18px} .partners-section{margin:0 0 clamp(28px,4vw,46px)} .partners-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px} .partner-card{background:#fff;border:1px solid rgb(var(--brand-rgb)/12%);border-radius:22px;padding:22px;box-shadow:var(--e-2)} .partner-card h2,.partner-card h3{margin:0 0 10px;color:var(--brand-deep)} .partner-card p{margin:0 0 12px;color:#51645b;line-height:1.65} .partner-card ul{margin:14px 0 0;padding-left:18px;color:#51645b;line-height:1.7} .partner-card li{margin:4px 0} .span-12{grid-column:span 12} .span-8{grid-column:span 8} .span-6{grid-column:span 6} .span-4{grid-column:span 4} .span-3{grid-column:span 3} .partner-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:7px 12px;border-radius:999px;background:#e9f6ef;color:var(--brand);font-weight:800;font-size:.82rem} .campaign-card{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--brand),var(--brand-mid));color:#fff} .campaign-card h2,.campaign-card p{color:#fff} .campaign-card p{opacity:.92} .campaign-stat{display:flex;align-items:flex-end;gap:12px;margin:18px 0 12px} .campaign-stat strong{font-size:clamp(2.4rem,6vw,4.2rem);line-height:1} .campaign-stat span{font-weight:800;opacity:.9;margin-bottom:8px} .progress-shell{height:14px;background:rgb(var(--white-rgb)/22%);border-radius:999px;overflow:hidden;margin:14px 0} .progress-fill{height:100%;width:54%;background:var(--gold);border-radius:999px} .campaign-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .partner-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:999px;font-weight:800;text-decoration:none;border:1px solid transparent} .partner-btn.primary{background:var(--gold);color:var(--brand-deep)} .partner-btn.secondary{background:rgb(var(--white-rgb)/12%);color:#fff;border-color:rgb(var(--white-rgb)/28%)} .partner-btn.light{background:var(--brand);color:#fff} .tier-amount{font-size:1.35rem;font-weight:900;color:var(--brand);margin:6px 0 10px} .program-icon{font-size:2rem;margin-bottom:12px} .directory-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px} .directory-tags span{padding:9px 12px;border-radius:999px;background:#f4faf7;border:1px solid rgb(var(--brand-rgb)/12%);color:var(--brand);font-weight:800;font-size:.9rem} .policy-note{background:#fffbef;border-color:rgb(var(--gold-rgb)/35%)} .policy-note h3{color:#6d5411} .recognition-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px} .recognition-list div{padding:12px;border-radius:14px;background:#f7fbf9;border:1px solid rgb(var(--brand-rgb)/10%);color:#385247;font-weight:700} @media(max-width:850px){ .span-8,.span-6,.span-4,.span-3{grid-column:span 12} .recognition-list{grid-template-columns:1fr} .partner-card{padding:18px} } /* ----------------------------------------------------------------------------- DAWA — video gallery (.dw-video-, .dw-play, .dw-badge) NOTE: shares the .dw- prefix with the Quran distribution band. Two different features in one namespace — worth splitting when the HTML can change. The click-to-play script that belongs with this lives in dawa-video-player.js. -------------------------------------------------------------------------- */ .dw-video-section{position:relative;overflow:hidden;padding:80px 0;background:linear-gradient(160deg,var(--brand-ink) 0%,var(--brand-deep) 55%,var(--brand) 100%)} /* soft geometric glow, evoking a mihrab arch */ .dw-video-section::before{content:"";position:absolute;top:-220px;left:50%;width:720px;height:720px;transform:translateX(-50%);pointer-events:none; background:radial-gradient(circle at center,rgb(var(--gold-rgb)/14%) 0%,rgb(var(--gold-rgb)/0%) 62%)} .dw-video-heading h2{color:#ffffff} .dw-video-heading p{color:rgb(var(--white-rgb)/72%);max-width:640px;margin-left:auto;margin-right:auto} .dw-video-tag{display:inline-block;padding:4px 14px;border-radius:999px;color:var(--gold);border:1px solid rgb(var(--gold-rgb)/45%);background:rgb(var(--gold-rgb)/8%)} .dw-video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px} .dw-video-card{background:rgb(var(--white-rgb)/5%);border:1px solid rgb(var(--white-rgb)/12%);border-radius:18px;overflow:hidden;backdrop-filter:blur(4px);transition:transform var(--t-base) ease,box-shadow var(--t-base) ease,border-color var(--t-base) ease} .dw-video-card:hover{transform:var(--lift-lg);border-color:rgb(var(--gold-rgb)/50%);box-shadow:var(--e-3)} .dw-video-thumb{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;background:#000;aspect-ratio:16/9;overflow:hidden} .dw-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:transform var(--t-slow) ease,opacity var(--t-base) ease} .dw-video-card:hover .dw-video-thumb img{transform:scale(1.06);opacity:1} .dw-video-thumb:focus-visible{outline:3px solid var(--gold);outline-offset:-3px} .dw-video-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .dw-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;background:rgb(var(--gold-rgb)/92%);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgb(var(--gold-rgb)/50%);animation:dwPulse 2.4s infinite;transition:transform var(--t-base) ease,background var(--t-base) ease} .dw-video-card:hover .dw-play{transform:translate(-50%,-50%) scale(1.1);background:var(--gold)} .dw-play svg{width:32px;height:32px;fill:var(--brand-ink);margin-left:4px} @keyframes dwPulse{0%{box-shadow:0 0 0 0 rgb(var(--gold-rgb)/45%)}70%{box-shadow:0 0 0 22px rgb(var(--gold-rgb)/0%)}100%{box-shadow:0 0 0 0 rgb(var(--gold-rgb)/0%)}} .dw-badge{position:absolute;top:14px;right:14px;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);background:var(--gold)} .dw-video-body{padding:22px 24px 26px} .dw-video-body h3{color:#ffffff;margin:0 0 8px;font-size:1.15rem} .dw-video-body p{color:rgb(var(--white-rgb)/70%);margin:0;font-size:.95rem;line-height:1.6} @media(max-width:820px){ .dw-video-section{padding:56px 0} .dw-video-grid{grid-template-columns:1fr} } /* ----------------------------------------------------------------------------- DONATION METHODS — card grid used on the info pages (.method) -------------------------------------------------------------------------- */ .methods-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch} .method{display:flex;flex-direction:column;gap:10px;height:100%;padding:16px;border:1px solid rgb(var(--brand-rgb)/12%);border-radius:18px;background:#fff;box-shadow:var(--e-1);transition:var(--t-fast) ease} .method:hover{transform:var(--lift-lg);box-shadow:var(--e-3)} .method .row{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center} .method img,.method-icon img{width:36px!important;height:36px!important;object-fit:contain;display:block} .method-icon img{width:46px;height:46px} .method h3{margin:6px 0 0;line-height:1.2} .method .muted{line-height:1.5} .method-body{flex:1} .method .button,.method a{margin-top:auto} .action{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 14px;border-radius:999px;border:1px solid rgb(var(--brand-rgb)/12%);background:#fff;color:inherit;text-decoration:none;font-size:13px;font-weight:900;white-space:nowrap} .action.primary{background:var(--g1);color:#fff;border-color:transparent} .action:hover{filter:brightness(.96)} .action.primary:hover{color:#fff;background:var(--g2)} .copyline{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px} .code{display:inline-block;padding:8px 10px;border-radius:10px;background:#f8fff9;color:var(--g1);border:1px dashed rgb(var(--brand-rgb)/25%);font-weight:800;word-break:break-word} .donation-methods-card .section-head.compact{text-align:left;margin:0 0 18px} .donation-methods-card .section-head.compact h2{margin:6px 0;color:var(--nav)} .donation-methods-card .section-head.compact p{margin:0} @media(max-width:900px){ .methods-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .method .row{grid-template-columns:42px 1fr} .method .action,.method .copyline,.method .row>p{grid-column:1/-1;width:100%;margin-top:8px} .method .action{display:flex;white-space:normal;text-align:center} } @media(max-width:768px){ .info-page .card{padding:18px} .methods-grid{grid-template-columns:1fr;gap:14px} .method{border-radius:18px} .method .row{grid-template-columns:44px 1fr;gap:12px;align-items:start} .method img{width:38px!important;height:38px!important} .method h3{font-size:1.05rem} .method .muted{font-size:.92rem} .method .action{min-height:44px;padding:11px 14px;font-size:.94rem} .copyline{justify-content:center} .code{width:100%;text-align:center;padding:10px 12px;border-radius:10px} } /* ----------------------------------------------------------------------------- DONATIONS — main page (.dn-) Shell, hero and carousel come from section 2. -------------------------------------------------------------------------- */ .dn-trustbar{max-width:720px;margin:clamp(18px,3vw,28px) auto 0;text-align:center;padding:11px 20px;border-radius:999px;font-size:.78rem;font-weight:700;color:#6b5a1d;letter-spacing:.03em; background:linear-gradient(135deg,rgb(var(--gold-soft-rgb)/28%),rgb(var(--gold-rgb)/16%));border:1px solid rgb(var(--gold-rgb)/50%)} .dn-trustbar strong{color:var(--brand-deep)} .dn-step{max-width:960px;margin:0 auto;padding:clamp(26px,4vw,40px) 16px 0} .dn-step-wide{max-width:none;padding-left:0;padding-right:0} .dn-step-head{display:flex;align-items:center;gap:12px;justify-content:center} .dn-step-n{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--brand-deep); background:linear-gradient(135deg,var(--gold-soft),var(--gold));box-shadow:var(--e-1)} .dn-step-head h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:clamp(1.4rem,3.4vw,2rem);color:var(--brand-deep)} .dn-step-sub{text-align:center;max-width:640px;margin:8px auto 0;color:var(--soft);line-height:1.6;font-size:.94rem} .dn-intents{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .dn-intent{text-align:left;padding:16px 18px;border-radius:14px;cursor:pointer;font-family:inherit; background:rgb(var(--white-rgb)/94%);border:1.5px solid rgb(var(--gold-rgb)/30%);transition:all var(--t-fast);box-shadow:var(--e-1)} .dn-intent:hover{transform:var(--lift-sm);border-color:var(--gold)} .dn-intent.on{background:linear-gradient(135deg,var(--brand),var(--brand-deep));border-color:transparent;box-shadow:var(--e-2)} .dn-intent strong{display:block;font-size:1rem;color:var(--brand-deep)} .dn-intent span{display:block;margin-top:4px;font-size:.78rem;font-weight:600;color:#5a6a60;line-height:1.45} .dn-intent span a{color:var(--gold-dark);font-weight:800} .dn-intent.on strong{color:var(--ivory)} .dn-intent.on span{color:rgba(250,246,236,.8)} .dn-intent.on span a{color:var(--gold-soft)} .dn-memo{margin:16px auto 0;max-width:520px;text-align:center;padding:11px 18px;border-radius:999px;font-size:.85rem;font-weight:700;color:#6b5a1d; background:linear-gradient(135deg,rgb(var(--gold-soft-rgb)/30%),rgb(var(--gold-rgb)/18%));border:1px solid rgb(var(--gold-rgb)/55%)} .dn-memo strong{color:var(--brand-deep)} .dn-methods{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .dn-method{position:relative;padding:20px;display:flex;flex-direction:column;gap:10px} .dn-method-star{grid-column:1/-1;border:1.5px solid rgb(var(--gold-rgb)/60%); background:linear-gradient(135deg,rgb(var(--white-rgb)/97%),rgba(249,244,230,.95))} .dn-fee-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 16px;border-radius:999px; background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:var(--brand-deep);font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--e-1)} .dn-method-head{display:flex;align-items:center;gap:12px} .dn-method-head img{width:42px;height:42px;object-fit:contain} .dn-method-head h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.3rem;color:var(--brand-deep)} .dn-method p{font-size:.88rem;line-height:1.55;color:var(--body)} .dn-method-memo{font-size:.78rem;font-weight:700;color:var(--gold-dark)} .dn-method-memo strong{color:var(--brand-deep)} .dn-copyline{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .dn-code{padding:10px 16px;border-radius:10px;background:var(--brand-deep);color:var(--gold-soft);font-weight:800;font-size:.95rem;letter-spacing:.02em} .dn-copy{padding:10px 20px;border:0;border-radius:999px;cursor:pointer;font:800 .85rem Inter,sans-serif;color:var(--brand-deep); background:linear-gradient(135deg,var(--gold-soft),var(--gold));box-shadow:var(--e-1);transition:transform var(--t-fast)} .dn-copy:hover{transform:var(--lift-sm)} .dn-go-card{flex:0 0 min(320px,86vw);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden;transition:transform var(--t-base),box-shadow var(--t-base)} .dn-go-card:hover{transform:var(--lift-lg);box-shadow:var(--e-3)} .dn-go-card img{width:100%;aspect-ratio:16/10;object-fit:cover} .dn-go-card h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.25rem;color:var(--brand-deep);padding:14px 18px 0;line-height:1.15} .dn-go-card p{padding:8px 18px 0;font-size:.86rem;line-height:1.6;color:var(--body);flex:1} .dn-go-card p a{color:var(--gold-dark);font-weight:800} .dn-go-tags{display:block;padding:12px 18px 16px;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)} .dn-orgs{margin:14px auto 0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center} .dn-orgs-label{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);width:100%;text-align:center} .dn-orgs a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:.8rem;font-weight:700;color:var(--brand-deep); padding:6px 14px 6px 8px;border-radius:999px;background:rgb(var(--white-rgb)/85%);border:1px solid rgb(var(--gold-rgb)/35%);transition:border-color var(--t-fast)} .dn-orgs a:hover{border-color:var(--gold)} .dn-orgs img{width:26px;height:26px;object-fit:contain} /* receipts ticker */ .dn-ticker{margin-top:clamp(20px,3vw,30px);overflow:hidden;position:relative;padding:13px 0; border-top:1px solid rgb(var(--gold-rgb)/50%);border-bottom:1px solid rgb(var(--gold-rgb)/50%); background:linear-gradient(90deg,rgb(var(--brand-rgb)/5%),rgb(var(--gold-soft-rgb)/12%),rgb(var(--brand-rgb)/5%))} .dn-ticker-inner{display:inline-flex;white-space:nowrap;animation:dnTick 38s linear infinite} .dn-ticker:hover .dn-ticker-inner{animation-play-state:paused} .dn-ticker-run{display:inline-flex;align-items:center;gap:.55em;padding-right:.55em;font-size:.78rem;font-weight:700;color:var(--body);letter-spacing:.03em} .dn-ticker-run strong{color:var(--brand-deep)} .dn-ticker-run i{font-style:normal;color:var(--gold)} .dn-ticker-run a{color:var(--gold-dark);font-weight:800} @keyframes dnTick{from{transform:translateX(0)}to{transform:translateX(-50%)}} .dn-info-card{padding:22px} .dn-info-card h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:1.35rem;color:var(--brand-deep);margin-bottom:8px} .dn-info-card p{font-size:.88rem;line-height:1.6;color:var(--body);margin-top:6px} .dn-info-card a{color:var(--gold-dark);font-weight:800} /* ----------------------------------------------------------------------------- DU'A LIBRARY (.du-) Shell, hero, controls, carousel, card surface come from section 2. -------------------------------------------------------------------------- */ .du-hero-ar{margin:12px auto 6px;color:var(--gold-dark);font-family:"Noto Naskh Arabic","Traditional Arabic",Tahoma,serif; font-size:clamp(1.25rem,3.2vw,1.9rem);line-height:1.7} .du-hero-copy{max-width:640px;margin:0 auto;font-size:.92rem;color:var(--body)} .du-random{padding:8px 16px;border-radius:999px;border:1px solid rgb(var(--gold-rgb)/60%);cursor:pointer; background:linear-gradient(135deg,rgb(var(--gold-soft-rgb)/35%),rgb(var(--gold-rgb)/20%));color:#6b5a1d; font:800 .74rem Inter,sans-serif;letter-spacing:.06em;transition:all var(--t-fast)} .du-random:hover{background:linear-gradient(135deg,rgb(var(--gold-soft-rgb)/55%),rgb(var(--gold-rgb)/35%));transform:var(--lift-sm)} .du-card{position:relative;display:flex;flex-direction:column;transition:box-shadow var(--t-base)} .du-card.flash{box-shadow:0 0 0 3px var(--gold),0 12px 34px rgb(var(--deep-rgb)/8%)} .du-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between} .du-ref{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)} .du-ref-link{display:inline-flex;align-items:center;gap:5px;text-decoration:none;border-bottom:1px solid rgb(var(--gold-rgb)/40%); padding-bottom:1px;transition:color var(--t-fast),border-color var(--t-fast)} .du-ref-link:hover,.du-ref-link:focus-visible{color:var(--gold-dark);border-bottom-color:var(--gold)} .du-ref-ico{font-size:.7em;opacity:.7} .du-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:clamp(1.15rem,3vw,1.45rem);color:var(--brand-deep);line-height:1.15;margin-top:2px} .du-num{flex:none;width:34px;height:34px;border-radius:50%;font:800 .72rem Inter,sans-serif} .du-ar{margin-top:14px;padding:16px 18px;border-radius:14px;text-align:right;direction:rtl; font-family:"Noto Naskh Arabic","Traditional Arabic",Tahoma,serif;font-size:clamp(1.3rem,3.4vw,1.7rem);line-height:2.05;color:var(--brand-deep); background:linear-gradient(135deg,rgb(var(--gold-soft-rgb)/28%),rgb(var(--gold-rgb)/14%));border:1px solid rgb(var(--gold-rgb)/50%)} .du-meaning{margin-top:12px;font-size:.9rem;line-height:1.7;color:var(--body)} .du-speaker{margin-top:8px;font-size:.78rem;font-weight:700;color:var(--brand)} .du-context{margin-top:10px;font-size:.8rem;line-height:1.6;color:#6b5a1d;font-style:italic} .du-context strong{font-style:normal;font-weight:800} .du-tag-type{background:linear-gradient(135deg,rgb(var(--gold-soft-rgb)/40%),rgb(var(--gold-rgb)/20%));border-color:rgb(var(--gold-rgb)/55%);color:#6b5a1d} .du-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px} .du-act{flex:1 1 auto;padding:9px 14px;border-radius:10px;border:1px solid rgb(var(--brand-rgb)/20%);background:#fff;color:var(--brand); font:800 .74rem Inter,sans-serif;text-align:center;text-decoration:none;cursor:pointer;transition:all var(--t-fast)} .du-act:hover{border-color:var(--gold);transform:var(--lift-sm)} .du-act-primary{background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:var(--gold-soft);border-color:transparent} .du-note{max-width:680px;margin:8px auto 0;padding:0 18px;text-align:center;font-size:.74rem;line-height:1.7;color:var(--quiet)} .du-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);z-index:60;padding:11px 22px;border-radius:999px; background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:var(--gold-soft);font:800 .78rem Inter,sans-serif; box-shadow:var(--e-3);opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast)} .du-toast.show{opacity:1;transform:translate(-50%,0)} @media(max-width:700px){ .du-actions .du-act{flex:1 1 100%} } /* ----------------------------------------------------------------------------- EID — growth of services journey Milestone cards reuse .featured-card + .sitemap-card. Unlike the sitemap's contained logos these hold photographs, so the image band is taller and the picture fills it. The extra class outranks .sitemap-card-image img, which is defined later in this file. -------------------------------------------------------------------------- */ .journey-card .journey-card-image{height:170px} .journey-card .journey-card-image img{width:100%;height:100%;object-fit:cover} .journey-card .featured-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .journey-card .featured-body h3{margin:0} .journey-card .featured-body p{margin:0;line-height:1.6} .journey-card.is-featured{border-color:rgb(var(--gold-rgb)/60%);box-shadow:var(--e-3)} .journey-card.is-featured .badge{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:var(--brand-deep)} /* ----------------------------------------------------------------------------- EVENTS — meta blocks, cards, embedded maps, visit panel -------------------------------------------------------------------------- */ .event-meta-block{margin:12px 0;display:grid;gap:12px} .event-org-section,.event-partners-section{background:#f8fafc;border:1px solid rgba(34,197,94,.15);border-radius:14px;padding:8px} .event-meta-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#15803d;margin-bottom:6px} .event-org-row,.event-partner-card{display:flex;align-items:center;gap:10px} .event-partners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .event-partner-card{background:#fff;border:1px solid rgb(var(--slate-rgb)/8%);border-radius:10px;padding:10px} .event-meta-logo{width:40px;height:40px;object-fit:contain;border-radius:10px;background:#fff;border:1px solid rgb(var(--slate-rgb)/8%);padding:4px;flex-shrink:0} .event-meta-name{font-size:10px;font-weight:600;color:#0f172a;line-height:1.35} .event-status-pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;background:#e9f6ef;color:var(--brand);font-size:.75rem;font-weight:800} .event-card.is-upcoming{border-top:4px solid var(--brand-mid)} .event-card.is-past{opacity:.78} .map-embed iframe{width:100%;height:320px;border:0;border-radius:14px;box-shadow:var(--e-1)} .map-card{padding:18px 18px 16px} .map-card--narrow{max-width:760px;margin:0 auto;padding:16px} .map-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .map-header h2{margin:0;font-size:18px} .map-header .badge{font-size:10px;padding:4px 8px} .visit-card{padding:28px} .visit-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center} .visit-map iframe{width:100%;height:350px;border:0;border-radius:14px;box-shadow:var(--e-1)} /* ----------------------------------------------------------------------------- FAMILY GAME NIGHT (.fg-, .iciv-) NOTE: two prefixes in one page. .iciv-* is carried over from cities.php, so these rules may also exist in that page's stylesheet — check before editing. NOTE: this page uses its own greens (#17352d / #071711) and golds (#b99122 / #6d5312) rather than the site tokens. Deliberate sub-brand, or drift? -------------------------------------------------------------------------- */ .fg-page{background:#f8f5ee;color:#24342f;overflow:hidden} .fg-hero{position:relative;padding:clamp(70px,9vw,120px) 22px 54px;border-bottom:1px solid rgb(var(--gold-rgb)/35%); background:radial-gradient(circle at 12% 8%,rgb(var(--gold-rgb)/22%),transparent 32%),radial-gradient(circle at 86% 18%,rgba(23,53,45,.12),transparent 30%),linear-gradient(180deg,#fff8e6 0%,#f8f5ee 100%)} .fg-hero-inner{max-width:1220px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:34px;align-items:end} .fg-kicker,.iciv-story-kicker{display:inline-flex;padding:8px 13px;border-radius:999px;background:rgb(var(--gold-rgb)/16%);color:var(--gold-dark);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase} .fg-title{margin:18px 0 12px;color:var(--brand-deep);font-size:clamp(42px,6vw,82px);line-height:.92;letter-spacing:-.055em} .fg-title span{display:block;color:var(--gold-deep)} .fg-lead{max-width:760px;margin:0;color:#3d4b46;font-size:clamp(17px,2vw,21px);line-height:1.65} .fg-hero-card{border:1px solid rgb(var(--gold-rgb)/42%);border-radius:26px;background:rgba(255,252,244,.88);box-shadow:var(--e-3);padding:24px;backdrop-filter:blur(12px)} .fg-hero-card strong{display:block;color:var(--brand-deep);font-size:clamp(24px,3vw,38px);line-height:1} .fg-hero-card p{margin:12px 0 0;color:#586761;line-height:1.55;font-weight:700} .fg-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px} .fg-stat{border:1px solid rgba(23,53,45,.12);border-radius:18px;background:#fff;padding:14px} .fg-stat strong{display:block;color:var(--brand-deep);font-size:22px;line-height:1.1} .fg-stat span{display:block;color:#6e7a75;font-size:12px;margin-top:5px;font-weight:800} /* story carousel — fourth scroll-snap carousel in this file, and the only one with a visible scrollbar and snap-align:start. Not folded into the section 2 carousel primitive for that reason. */ .iciv-stories{position:relative;overflow:hidden;background:#f8f5ee;padding:70px 0 90px} .iciv-stories:before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 15% 10%,rgb(var(--gold-rgb)/16%),transparent 28%),radial-gradient(circle at 90% 20%,rgba(23,53,45,.08),transparent 30%)} .iciv-story-shell{position:relative;max-width:1220px;margin:0 auto} .iciv-story-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px;padding:0 22px} .iciv-story-head h2{margin:14px 0 0;color:var(--brand-deep);font-size:clamp(32px,4vw,54px);line-height:1;letter-spacing:-.04em} .iciv-story-head p{margin:0;max-width:440px;color:#586761;font-size:17px;line-height:1.6} .iciv-carousel-actions{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin:0 22px 18px} .iciv-carousel-count{color:#6b7772;font-size:13px;font-weight:800} .iciv-carousel-wrap{position:relative;max-width:1220px;margin:0 auto} .dn-car-btn,.du-car-btn,.iciv-carousel-btn,.jm-car-btn{width:44px;height:44px;border-radius:999px;border:1px solid rgb(var(--gold-rgb)/48%);background:linear-gradient(180deg,#fffdf6,#f5ead0);color:var(--brand-deep);font-size:27px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:var(--e-2);transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease,background var(--t-fast) ease} .iciv-carousel-btn:hover{box-shadow:var(--e-3);background:#fff8e4} .dn-car-btn,.du-car-btn,.iciv-carousel-side,.jm-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:52px;height:52px;background:linear-gradient(180deg,#fffdf6,#f5ead0);border:1px solid rgb(var(--gold-rgb)/65%);box-shadow:var(--e-2)} .dn-car-btn:hover,.du-car-btn:hover,.iciv-carousel-side:hover,.jm-car-btn:hover{transform:translateY(-50%) scale(1.06)} .dn-car-prev,.du-prev,.iciv-carousel-prev,.jm-prev{left:6px} .dn-car-next,.du-next-btn,.iciv-carousel-next,.jm-next-btn{right:6px} /* One carousel geometry for the whole site. gap MUST stay 20px: carousel.js computes its scroll step as card width + 20. */ .dn-car-track,.du-track,.iciv-story-carousel,.jm-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:4px 78px 22px;overscroll-behavior-x:contain} .iciv-story-carousel::-webkit-scrollbar{height:10px} .iciv-story-carousel::-webkit-scrollbar-track{background:#eee5d2;border-radius:999px;margin:0 22px} .iciv-story-carousel::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--gold-deep),var(--gold));border-radius:999px;border:2px solid #eee5d2} .iciv-story-card{position:relative;overflow:hidden;flex:0 0 min(360px,82vw);scroll-snap-align:start;border:1px solid rgba(23,53,45,.12);border-radius:26px;background:#fff;box-shadow:var(--e-2);cursor:pointer;transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease,border-color var(--t-fast) ease} .iciv-story-card:hover{transform:var(--lift-lg);box-shadow:var(--e-3);border-color:rgb(var(--gold-rgb)/55%)} .iciv-story-card.is-featured{border-color:rgb(var(--gold-rgb)/75%);box-shadow:var(--e-3)} .iciv-story-card a{color:inherit;text-decoration:none} .iciv-story-img{position:relative;height:205px;overflow:hidden;background:linear-gradient(135deg,var(--brand-deep),var(--brand-ink))} .iciv-story-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--t-base) ease} .iciv-story-card:hover .iciv-story-img img{transform:scale(1.05)} .fg-img-fallback{position:absolute;inset:0;display:grid;place-items:center;color:#fff8e4;text-align:center;padding:22px; background:radial-gradient(circle at 30% 18%,rgb(var(--gold-rgb)/34%),transparent 30%),linear-gradient(135deg,var(--brand-deep),var(--brand-ink))} .fg-img-fallback span{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:rgba(255,248,228,.12);border:1px solid rgb(var(--gold-rgb)/55%);font-size:38px;box-shadow:var(--e-3)} /* Carousel image fix. These !important flags are NOT fighting anything in this file — the base rules above are lower specificity and would lose anyway. They are defending against something external (a lazy-loader setting opacity or visibility on img, most likely). Left in place; if you find and fix the real source, this whole block can go. The redundant .fg-page .iciv-story-img rule that duplicated the base was removed. */ .fg-page .iciv-story-img img{position:relative;z-index:2;display:block!important;width:100%;height:100%;object-fit:cover;opacity:1!important;visibility:visible!important;transform:none} .fg-page .iciv-story-card:hover .iciv-story-img img{opacity:1!important;visibility:visible!important;transform:scale(1.05)} .fg-page .fg-img-fallback{position:absolute;inset:0;z-index:1} /* hide the fallback only once the image has actually loaded */ .fg-page .iciv-story-img.has-image .fg-img-fallback{display:none} .iciv-story-body{padding:20px} .iciv-story-top{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:10px} .iciv-story-title strong{display:block;color:var(--brand-deep);font-size:23px;line-height:1.1} .iciv-story-title em{display:block;margin-top:8px;color:var(--gold-deep);font-style:normal;font-weight:900;font-size:28px;line-height:1.15} .iciv-story-badge{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:#fff8e4;border:1px solid rgb(var(--gold-rgb)/50%);color:var(--gold-dark);font-size:11px;font-weight:900;text-transform:uppercase} .iciv-story-summary{margin:10px 0 16px;color:#52625d;line-height:1.6;font-size:15px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .iciv-story-meta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px} .iciv-story-meta span{display:block;padding:10px;border-radius:14px;background:#f8f5ee;border:1px solid rgba(23,53,45,.08);color:#6b7772;font-size:12px;font-weight:800} .iciv-story-meta strong{display:block;color:var(--brand-deep);font-size:16px;margin-bottom:3px} .iciv-story-action{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(23,53,45,.08);color:var(--brand-deep);font-weight:900} .iciv-story-action span:last-child{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--brand-deep);color:#fff} @media(max-width:980px){ .fg-hero-inner{grid-template-columns:1fr} .iciv-story-head{display:block} .iciv-story-head p{margin-top:16px} } @media(max-width:640px){ .fg-hero{padding-top:48px} .fg-stats{grid-template-columns:1fr} .iciv-stories{padding:46px 0 70px} .iciv-story-head{padding:0 14px} .iciv-carousel-actions{margin-left:14px;margin-right:14px} .dn-car-btn,.du-car-btn,.iciv-carousel-side,.jm-car-btn{width:42px;height:42px;font-size:24px} .dn-car-prev,.du-prev,.iciv-carousel-prev,.jm-prev{left:4px} .dn-car-next,.du-next-btn,.iciv-carousel-next,.jm-next-btn{right:4px} .iciv-story-carousel{padding-left:58px;padding-right:58px} .iciv-story-img{height:210px} .iciv-story-title em{font-size:25px} } /* ----------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq-toolbar{padding:22px 0 8px} .faq-toolbar-card{display:grid;gap:18px;padding:22px} .faq-toolbar-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px} .faq-toolbar-top p,.faq-updated{margin:0;color:var(--muted)} .faq-search-wrap{position:relative} .faq-search{width:100%;min-height:56px;border-radius:14px;border:1px solid rgb(var(--slate-rgb)/12%);background:#fff;padding:0 18px 0 52px;font:inherit;font-size:1rem;color:#0f172a;box-shadow:var(--e-1)} .faq-search:focus{outline:none;border-color:var(--brand-mid);box-shadow:var(--e-2)} .faq-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:1.05rem;opacity:.7} .faq-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;font:inherit;font-size:.92rem;color:var(--brand-mid);cursor:pointer;padding:8px 10px;border-radius:10px;display:none} .faq-search-clear.show{display:inline-flex;align-items:center;justify-content:center} .faq-filter-row{display:flex;flex-wrap:wrap;gap:10px} .faq-filter-btn{appearance:none;border:1px solid rgb(var(--slate-rgb)/10%);background:#fff;color:#0f172a;border-radius:999px;padding:10px 14px;font:inherit;font-size:.95rem;line-height:1;cursor:pointer;box-shadow:var(--e-1)} .faq-filter-btn:hover,.faq-filter-btn:focus{outline:none;transform:var(--lift-sm);border-color:rgb(var(--brand-mid-rgb)/35%);box-shadow:var(--e-1)} .faq-filter-btn.active{background:var(--g1);color:#fff;border-color:transparent} .faq-filter-count{opacity:.72;margin-left:6px;font-size:.85em} .faq-list,.faq-accordion{max-width:850px;margin:24px auto 0;display:grid;gap:12px} .faq-accordion{max-width:none;margin:0;gap:14px} .faq-item{background:#fff;border:1px solid rgb(var(--slate-rgb)/8%);border-radius:22px;box-shadow:var(--e-1);overflow:hidden;scroll-margin-top:110px} .faq-item:hover{transform:var(--lift-sm);border-color:rgb(var(--brand-mid-rgb)/22%);box-shadow:var(--e-2)} .faq-item.active{border-color:rgb(var(--brand-mid-rgb)/30%);box-shadow:var(--e-2)} .faq-item:focus-within{border-color:rgb(var(--brand-mid-rgb)/34%);box-shadow:0 0 0 4px rgb(var(--brand-mid-rgb)/8%),0 18px 34px rgb(var(--slate-rgb)/8%)} .faq-question{width:100%;border:0;background:transparent;padding:20px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;text-align:left;cursor:pointer;font:inherit} .faq-question:focus{outline:none} .faq-question-main{display:flex;align-items:flex-start;gap:14px;min-width:0;flex:1} .faq-question-icon{flex:0 0 auto;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:rgb(var(--brand-rgb)/8%);color:var(--brand);font-weight:700;font-size:.95rem;margin-top:1px} .faq-question-text{min-width:0;flex:1} .faq-question-text h3{margin:0;font-size:1.06rem;line-height:1.45;color:#0f172a} .faq-question-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px} .faq-mini-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(2,132,199,.08);color:#0c4a6e;font-size:.82rem;font-weight:700;line-height:1} .faq-toggle{flex:0 0 auto;width:42px;height:42px;border-radius:999px;background:rgb(var(--slate-rgb)/4%);display:inline-flex;align-items:center;justify-content:center;position:relative} .faq-toggle::before,.faq-toggle::after{content:"";position:absolute;background:var(--brand);border-radius:999px} .faq-toggle::before{width:16px;height:2px} .faq-toggle::after{width:2px;height:16px} .faq-item.active .faq-toggle{background:rgb(var(--brand-mid-rgb)/10%);transform:rotate(180deg)} .faq-item.active .faq-toggle::after{opacity:0;transform:scaleY(.4)} .faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-base) ease} .faq-item.active .faq-answer{grid-template-rows:1fr} .faq-answer-inner{min-height:0;overflow:hidden} .faq-answer-content{padding:0 22px 22px 74px;color:#334155;line-height:1.75;border-top:1px solid rgb(var(--slate-rgb)/6%)} .faq-answer-content .faq-answer-text{margin-top:16px} .faq-more-link{color:var(--brand-mid);text-decoration:none;font-weight:700} .faq-more-link:hover{text-decoration:underline} .faq-no-results{display:none;padding:16px 0 0} .faq-no-results.show{display:block} .faq-no-results-card,.faq-empty-card{padding:28px;text-align:center} .faq-no-results-card h3,.faq-empty-card h2{margin:0 0 10px} .faq-no-results-card p{margin:0 auto 16px;max-width:660px;color:var(--muted)} mark.faq-highlight{background:#fff3bf;color:inherit;padding:0 .12em;border-radius:.2em} @media(max-width:600px){ /* FIXME: the accordion is built from