/* ============================================================ THEME TOKENS ============================================================ */ :root{ --primary:#1a5632; /* Primary Dark Green */ --primary-light:#2d7a4f; /* Light Green */ --gold:#c5a044; /* Gold / Accent */ --bg:#fdf8f0; /* Cream Background */ --bg-alt:#f5efe3; /* Warm Ivory */ --text:#1a1a2e; /* Text Dark */ --text-light:#5a5a6e; /* Text Light */ --card-bg:#fff; /* Card/panel surface */ /* derived */ --primary-deep:#123f24; --gold-deep:#a5822f; --gold-soft:rgba(197,160,68,.32); --gold-tint:rgba(197,160,68,.10); --green-glass:rgba(26,86,50,.06); --line:rgba(26,86,50,.12); --font-en:'Mulish', sans-serif; --font-bn:'Noto Sans Bengali', sans-serif; --font-ar:'Amiri', serif; --font-logo:'Cinzel', serif; --shadow-sm:0 4px 14px -6px rgba(26,26,46,.14); --shadow-md:0 16px 40px -18px rgba(26,26,46,.24); --shadow-lg:0 30px 70px -30px rgba(26,86,50,.40); --radius:20px; --radius-sm:14px; --wrap:1240px; --nav-h:78px; } /* Opt-in dark mode — toggled via the header's theme button, persisted in localStorage, applied by an early inline script (before first paint) as data-theme on . Brand colors (--primary/--gold and their variants) stay the same in both themes; only the neutral surface/text tokens flip. */ :root[data-theme="dark"]{ --bg:#0f1a13; --bg-alt:#16231b; --text:#eef1ec; --text-light:#a8b3ab; --card-bg:#16231b; --gold-soft:rgba(197,160,68,.4); --gold-tint:rgba(197,160,68,.16); --green-glass:rgba(255,255,255,.05); --line:rgba(255,255,255,.14); --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5); --shadow-md:0 16px 40px -18px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.7); } /* ============================================================ RESET / BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip} body{ font-family:var(--font-en), var(--font-bn), var(--font-ar); color:var(--text); background:var(--bg); line-height:1.65; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:var(--primary);text-decoration:none;transition:color .25s ease} a:hover{color:var(--gold-deep)} button{font-family:inherit} ul{list-style:none} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} ::selection{background:var(--gold-soft);color:var(--primary-deep)} /* subtle page geometric texture */ body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1100px 600px at 80% -8%, rgba(197,160,68,.10), transparent 60%), radial-gradient(900px 700px at -5% 20%, rgba(26,86,50,.05), transparent 55%), var(--bg); } body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23c5a044' stroke-width='0.6' stroke-opacity='0.14'%3E%3Cpath d='M30 0l30 30-30 30L0 30z'/%3E%3Ccircle cx='30' cy='30' r='11'/%3E%3C/g%3E%3C/svg%3E"); background-size:60px 60px; } .bn{font-family:var(--font-bn)} .ar{font-family:var(--font-ar);direction:rtl} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:26px} .eng{font-family:var(--font-en)} /* ============================================================ ICON SPRITE ============================================================ */ .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none} /* ============================================================ NAV ============================================================ */ .nav{ position:sticky;top:0;z-index:55; background:linear-gradient(90deg,var(--primary-deep),var(--primary) 55%,var(--primary-deep)); border-bottom:1px solid rgba(197,160,68,.35); transition:box-shadow .35s ease, border-color .35s ease; } .nav.scrolled{ box-shadow:0 10px 30px -18px rgba(0,0,0,.45); border-bottom-color:rgba(197,160,68,.6); } .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:20px} .nav .brand-name{color:#fff} .nav .brand-tag{color:var(--gold)} .nav .menu > a,.nav .has-drop > a{color:#e9dfc4} .nav .menu > a:hover,.nav .has-drop > a:hover{color:#fff;background:rgba(255,255,255,.09)} .nav .menu > a.active,.nav .has-drop > a.active{color:#fff} .nav .icon-btn{background:rgba(255,255,255,.08);border-color:rgba(197,160,68,.45);color:var(--gold)} .nav .icon-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold)} /* logo */ .brand{display:flex;align-items:center;gap:14px;flex:none} .brand-mark{width:auto;height:52px;flex:none;display:grid;place-items:center} .brand-mark img{height:52px;width:auto;display:block} /* menu */ .menu{display:flex;align-items:center;gap:3px} .menu a{ font-family:var(--font-bn);font-weight:500;font-size:15.5px;color:var(--text); padding:9px 12px;border-radius:10px;position:relative;transition:.22s;white-space:nowrap; } .menu a:hover{color:var(--primary);background:var(--green-glass)} .menu a.active{color:var(--primary);font-weight:600} .menu a.active::after{ content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2.5px;border-radius:2px; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); } .has-drop{position:relative} .has-drop>a{display:inline-flex;align-items:center;gap:5px} .has-drop>a .ic{width:15px;height:15px;transition:transform .25s} .has-drop:hover>a .ic{transform:rotate(180deg)} .drop{ position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px); background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--gold-soft);border-radius:14px;box-shadow:var(--shadow-md); padding:8px;min-width:190px;opacity:0;visibility:hidden;transition:.25s;z-index:70; } .has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .drop a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:15px} .drop a .ic{width:18px;height:18px;stroke:var(--gold-deep)} .drop a:hover{background:var(--green-glass)} .nav-tools{display:flex;align-items:center;gap:8px} .icon-btn{ width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%; background:var(--bg-alt);border:1px solid var(--gold-soft);color:var(--primary);cursor:pointer;transition:.25s; } .icon-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold);transform:translateY(-1px)} .hamburger{display:none} /* search overlay */ .search-pop{ position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;padding-top:16vh; background:rgba(18,63,36,.5);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.3s; } .search-pop.open{opacity:1;visibility:visible} .search-box{ width:min(640px,90vw);background:var(--card-bg);border-radius:18px;box-shadow:var(--shadow-lg); border:1px solid var(--gold-soft);padding:10px 12px;display:flex;align-items:center;gap:12px; transform:translateY(-14px);transition:.3s; } .search-pop.open .search-box{transform:none} .search-box .ic{stroke:var(--gold-deep)} .search-box input{flex:1;border:none;font-size:18px;font-family:var(--font-en);color:var(--text);padding:14px 4px;background:transparent} .search-box input:focus{outline:none} .search-box input::placeholder{color:var(--text-light)} .search-box kbd{font-size:12px;color:var(--text-light);border:1px solid var(--line);border-radius:6px;padding:3px 7px;font-family:var(--font-en)} /* mobile menu */ .mobile-menu{ position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);z-index:95; background:linear-gradient(180deg,var(--primary-deep),var(--primary)); color:#f3e9cf;transform:translateX(105%);transition:transform .4s cubic-bezier(.4,0,.2,1); box-shadow:-20px 0 60px -20px rgba(0,0,0,.5);padding:24px 22px;overflow-y:auto; display:flex;flex-direction:column;gap:6px; } .mobile-menu.open{transform:translateX(0)} .mm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:16px;border-bottom:1px solid rgba(197,160,68,.3)} .mm-head .brand-name{color:#fff;font-size:19px} .mm-close{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(197,160,68,.4);color:var(--gold);display:grid;place-items:center;cursor:pointer} .mobile-menu .mm-link{ font-family:var(--font-bn);font-size:17px;color:#eddfb8;padding:13px 12px;border-radius:10px; display:flex;align-items:center;justify-content:space-between;transition:.2s; width:100%;border:none;background:none;text-align:left;cursor:pointer; } .mobile-menu .mm-link:hover{background:rgba(197,160,68,.16);color:#fff} .mobile-menu .mm-link.active{background:rgba(197,160,68,.22);color:#fff} .mobile-menu .mm-group-toggle .mm-chev{width:16px;height:16px;flex:none;transition:transform .25s ease} .mobile-menu .mm-group-toggle[aria-expanded="true"] .mm-chev{transform:rotate(180deg)} .mm-subgroup{max-height:0;overflow:hidden;transition:max-height .3s ease;display:flex;flex-direction:column} .mobile-menu .mm-sub{padding-left:24px;font-size:15px !important;opacity:.85;justify-content:flex-start;gap:10px} .mobile-menu .mm-sub .ic{width:16px;height:16px;stroke:var(--gold,#c5a044);flex:none} .overlay{position:fixed;inset:0;background:rgba(18,26,20,.5);z-index:92;opacity:0;visibility:hidden;transition:.35s} .overlay.open{opacity:1;visibility:visible} /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer; font-family:var(--font-en);font-weight:700;font-size:15.5px;letter-spacing:.01em; padding:15px 28px;border-radius:13px;border:1.5px solid transparent;transition:.28s ease;text-decoration:none; } .btn .ic{width:20px;height:20px} .btn-primary{background:linear-gradient(180deg,var(--primary-light),var(--primary));color:#fff;box-shadow:0 14px 30px -12px rgba(26,86,50,.6)} .btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(26,86,50,.7);filter:brightness(1.05)} .btn-ghost{background:rgba(255,255,255,.4);color:var(--primary);border-color:var(--gold)} .btn-ghost:hover{background:var(--gold-tint);color:var(--primary-deep);transform:translateY(-2px);border-color:var(--gold-deep)} .btn-gold{background:linear-gradient(180deg,#e0bc60,var(--gold));color:#3c300f;box-shadow:0 12px 26px -12px rgba(197,160,68,.7)} .btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05);color:#3c300f} .btn-sm{padding:11px 20px;font-size:14px;border-radius:11px} /* ============================================================ SECTION HELPERS ============================================================ */ section{scroll-margin-top:96px} .sec{padding:88px 0} .sec-head{text-align:center;max-width:720px;margin:0 auto 52px} .eyebrow{ display:inline-flex;align-items:center;gap:12px;font-family:var(--font-en); font-size:12.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px; } .eyebrow::before,.eyebrow::after{content:"";width:26px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold))} .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)} .sec-title{font-family:var(--font-bn);font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.25;color:var(--primary-deep)} .sec-sub{font-family:var(--font-bn);color:var(--text-light);font-size:16.5px;margin-top:12px} .flourish{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;color:var(--gold)} .flourish .line{width:60px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold))} .flourish .line.r{background:linear-gradient(90deg,var(--gold),transparent)} .flourish .dot{width:8px;height:8px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 0 4px var(--gold-tint)} .head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap} .head-row .sec-head{text-align:left;margin:0} .head-row .eyebrow::before{display:none} .head-row .eyebrow{margin-bottom:10px} .see-all{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-bn);font-weight:600;font-size:15px;color:var(--primary);padding:9px 16px;border-radius:10px;border:1px solid var(--gold-soft);transition:.25s} .see-all:hover{background:var(--gold);color:#fff;border-color:var(--gold);gap:12px} .see-all .ic{width:17px;height:17px} /* ============================================================ HERO ============================================================ */ .hero{position:relative;overflow:hidden;padding-top:52px; background-image:url("/images/hero-bg-01.png");background-size:cover;background-position:center 30%;background-repeat:no-repeat; } .hero-bgpattern{position:absolute;inset:0;z-index:0;opacity:.32;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%231a5632' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M40 4l36 36-36 36L4 40z'/%3E%3Cpath d='M40 20l20 20-20 20-20-20z'/%3E%3C/g%3E%3C/svg%3E"); background-size:80px 80px; } .hero .wrap{position:relative;z-index:2} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;min-height:min(760px,80vh);padding-bottom:40px} .hero-eyebrow{margin-bottom:20px} .hero h1{font-family:var(--font-en);font-weight:800;line-height:1.02;letter-spacing:-.015em;margin-bottom:22px} .hero h1 .l1{display:block;font-size:clamp(40px,6vw,72px);color:var(--primary)} .hero h1 .l2{display:block;font-size:clamp(30px,4.4vw,54px);color:var(--gold-deep);font-weight:700} .hero-sub{font-family:var(--font-bn);font-size:clamp(16px,1.4vw,19px);color:var(--text-light);max-width:540px;line-height:1.85;margin-bottom:34px} .hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:8px} /* hero verse strip */ .hero-verse{ display:none; margin-top:40px;align-items:center;gap:20px;flex-wrap:wrap; padding:18px 24px;border-radius:16px; background:linear-gradient(90deg, rgba(255,255,255,.6), rgba(245,239,227,.35)); border:1px solid var(--gold-soft);box-shadow:var(--shadow-sm);max-width:560px; } .hero-verse .v-ar{font-family:var(--font-ar);direction:rtl;font-size:27px;color:var(--primary);line-height:1.6;white-space:nowrap} .hero-verse .v-tr{font-family:var(--font-bn);font-size:14px;color:var(--text-light)} .hero-verse .v-tr b{color:var(--gold-deep);font-weight:600;display:block;font-size:13px;margin-top:2px} .hero-verse .v-div{width:1px;align-self:stretch;background:var(--gold-soft)} /* hero visual: the Green Dome image */ .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:580px} .hv-l{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .hv-domewrap{z-index:3} .hv-dome{width:min(920px,168%);opacity:0;transform:translateX(-1.5%) translateY(46px) scale(.955); transition:opacity 1s ease .25s, transform 1.35s cubic-bezier(.2,.85,.3,1) .25s} .hero-visual.ready .hv-dome{opacity:1;transform:translateX(-1.5%)} .hv-dome img{width:100%;height:auto;filter:drop-shadow(0 34px 44px rgba(22,54,35,.28))} /* lanterns */ .lantern{position:absolute;top:-52px;z-index:3;width:64px;animation:floatY 5.5s ease-in-out infinite} .lantern.l{left:2%} .lantern.r{right:3%;top:-40px;width:56px;animation-duration:6.5s;animation-delay:.6s} .lantern .glow{filter:drop-shadow(0 0 14px rgba(197,160,68,.6))} /* scroll cue */ .scroll-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:4; width:52px;height:52px;border-radius:50%;background:var(--card-bg);border:1px solid var(--gold-soft); display:grid;place-items:center;color:var(--primary);box-shadow:var(--shadow-md);animation:bob 2.2s ease-in-out infinite} .scroll-cue:hover{color:var(--gold-deep)} /* ============================================================ CATEGORIES ============================================================ */ .cats{background:linear-gradient(180deg,transparent,var(--bg-alt) 30%,var(--bg-alt) 70%,transparent)} .cat-carousel{ position:relative;overflow-x:auto;overflow-y:hidden;scroll-behavior:auto; scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch; padding:20px 0 40px;margin:-20px 0 -40px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent); mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent); } .cat-carousel::-webkit-scrollbar{display:none} .cat-track{display:flex;gap:22px;width:max-content} .cat-stage{position:relative} .cat-nav{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:transparent;color:var(--gold-deep);cursor:pointer;padding:0;border:none; transition:transform .3s cubic-bezier(.34,1.4,.5,1), background .25s ease, color .25s ease; } .cat-nav .ic{width:19px;height:19px;stroke-width:2.2} .cat-nav-prev{left:-2px} .cat-nav-prev .ic{transform:rotate(180deg)} .cat-nav-next{right:-2px} .cat-nav:hover{background:rgba(255,255,255,.9);color:var(--primary);transform:translateY(-50%) scale(1.06)} .cat-nav:active{transform:translateY(-50%) scale(.92)} .cat-nav:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px} .cat-cta{display:flex;justify-content:center;margin-top:44px} .cat-viewall{ display:inline-flex;align-items:center;gap:10px;cursor:pointer; font-family:var(--font-en);font-weight:700;font-size:15.5px;letter-spacing:.01em;color:var(--primary-deep); padding:14px 26px;border-radius:12px;background:rgba(255,255,255,.5);border:1.5px solid var(--gold-soft); transition:.28s ease; } .cat-viewall .ic{width:18px;height:18px;transition:transform .3s ease} .cat-viewall:hover{background:var(--primary-deep);color:#fff;border-color:var(--primary-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .cat-viewall:hover .ic{transform:translateX(5px)} .cat-card{ position:relative;flex:0 0 232px;width:232px;background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);padding:30px 22px 26px;text-align:center; box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.34,1.4,.5,1), box-shadow .35s, border-color .35s; overflow:hidden; } .cat-card::after{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:1px; background:linear-gradient(160deg,var(--gold-soft),transparent 40%);pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .cat-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-md);border-color:var(--gold-soft)} .cat-ico{ width:82px;height:82px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 34% 30%,#fff,var(--bg-alt)); border:2px solid var(--gold);color:var(--primary);position:relative; box-shadow:inset 0 0 0 5px rgba(255,255,255,.7), 0 10px 22px -14px rgba(26,86,50,.5);transition:.35s; } .cat-ico::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed var(--gold-soft);opacity:0;transform:scale(.9);transition:.4s} .cat-card:hover .cat-ico{background:linear-gradient(180deg,var(--primary-light),var(--primary));color:#fff;border-color:var(--gold-deep);box-shadow:inset 0 0 0 5px rgba(255,255,255,.14),0 16px 30px -14px rgba(26,86,50,.7)} .cat-card:hover .cat-ico::before{opacity:1;transform:scale(1)} .cat-ico .ic{width:38px;height:38px;stroke-width:1.5} .cat-name{font-family:var(--font-bn);font-weight:600;font-size:18px;color:var(--primary-deep)} .cat-en{font-family:var(--font-en);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin-top:5px} /* ============================================================ PORTALS — quick-access badges (books, blogs, videos…) ============================================================ */ .portals{position:relative} .portal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:46px 34px;max-width:1000px;margin:0 auto} .portal-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:19px;text-decoration:none} .portal-badge{position:relative;width:132px;height:132px;flex:none;display:grid;place-items:center;border-radius:50%;transition:transform .45s cubic-bezier(.34,1.4,.5,1)} .portal-badge::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold-soft);transition:border-color .4s} .portal-badge::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px dashed var(--gold-soft);animation:portalSpin 34s linear infinite;transition:border-color .4s} .portal-disc{position:absolute;inset:12px;border-radius:50%;display:grid;place-items:center;color:var(--primary);z-index:2;background:radial-gradient(circle at 34% 28%,#fff,var(--bg-alt));border:3px solid var(--gold);box-shadow:inset 0 0 0 5px rgba(255,255,255,.65),0 10px 24px -6px rgba(26,86,50,.18);transition:background .4s,color .4s,border-color .4s,box-shadow .4s} .portal-disc .ic{width:46px;height:46px;stroke-width:1.5;transition:transform .5s cubic-bezier(.34,1.4,.5,1)} .portal-label{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%} .portal-plaque{position:relative;width:100%;max-width:154px;padding:2px;border-radius:17px;background:linear-gradient(180deg,#e2c069,var(--gold-deep));box-shadow:0 10px 22px -14px rgba(26,86,50,.55);transition:transform .45s cubic-bezier(.34,1.4,.5,1),filter .4s} .portal-plaque-in{display:block;padding:9px 12px;text-align:center;border-radius:15px;background:linear-gradient(180deg,var(--primary-light),var(--primary-deep));transition:background .4s} .portal-name{font-family:var(--font-bn);font-weight:600;font-size:16.5px;color:#f6ecd3;line-height:1.2;white-space:nowrap} .portal-en{font-family:var(--font-en);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);font-weight:700} .portal-item:hover .portal-badge{transform:translateY(-9px)} .portal-item:hover .portal-badge::before{border-color:var(--gold)} .portal-item:hover .portal-badge::after{border-color:var(--gold);animation-duration:7s} .portal-item:hover .portal-disc{background:linear-gradient(180deg,var(--primary-light),var(--primary));color:#fff;border-color:var(--gold-deep);box-shadow:inset 0 0 0 5px rgba(255,255,255,.14),0 16px 30px -8px rgba(26,86,50,.34)} .portal-item:hover .portal-disc .ic{transform:scale(1.14) rotate(-5deg)} .portal-item:hover .portal-plaque{transform:translateY(-4px);filter:brightness(1.07)} .portal-item:hover .portal-plaque-in{background:linear-gradient(180deg,var(--primary),var(--primary-deep))} .portal-item:focus-visible{outline:none} .portal-item:focus-visible .portal-disc{border-color:var(--primary);box-shadow:inset 0 0 0 5px rgba(255,255,255,.65),0 0 0 4px var(--gold-tint)} @keyframes portalSpin{to{transform:rotate(360deg)}} @media (max-width:1000px){ .portal-grid{grid-template-columns:repeat(2,1fr);gap:38px 26px;max-width:520px} } @media (max-width:440px){ .portal-grid{gap:30px 16px;max-width:420px} .portal-badge{width:112px;height:112px} .portal-disc{inset:10px} .portal-disc .ic{width:40px;height:40px} .portal-plaque-in{padding:8px 12px} .portal-name{font-size:14.5px} } /* ============================================================ DONATION ============================================================ */ .donate{background:linear-gradient(180deg,transparent,var(--bg-alt) 22%,var(--bg-alt) 78%,transparent)} .donate-card{ position:relative;background:rgba(255,255,255,.68);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.75);border-radius:26px;padding:44px;box-shadow:var(--shadow-lg); } .donate-card::before{content:"";position:absolute;inset:9px;border:1px solid var(--gold-soft);border-radius:20px;pointer-events:none;opacity:.6} .donate-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .85fr;gap:44px} .donate-label{font-family:var(--font-bn);font-weight:700;font-size:15.5px;color:var(--primary-deep);margin-bottom:14px} .donate-main .donate-label:not(:first-child){margin-top:28px} .amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .amount-btn{ padding:16px 10px;border-radius:13px;border:1.5px solid var(--line);background:var(--card-bg);cursor:pointer; font-family:var(--font-en);font-weight:800;font-size:16.5px;color:var(--primary-deep);transition:.22s;text-align:center; } .amount-btn:hover{border-color:var(--gold);background:var(--gold-tint)} .amount-btn.active{background:linear-gradient(180deg,var(--primary-light),var(--primary));border-color:var(--primary);color:#fff;box-shadow:0 10px 22px -12px rgba(26,86,50,.55)} .amount-custom{ grid-column:1 / -1;display:flex;align-items:center;gap:12px;background:var(--card-bg); border:1.5px solid var(--line);border-radius:13px;padding:4px 18px; } .amount-custom span{font-family:var(--font-bn);font-size:14px;color:var(--text-light);white-space:nowrap} .amount-custom input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--font-en);font-weight:700;font-size:16px;color:var(--primary-deep);padding:12px 0} .amount-custom input:focus{outline:none} .amount-custom input::placeholder{color:#b8b3bd;font-weight:500} .method-tabs{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap} .method-tab{ display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;cursor:pointer; font-family:var(--font-en);font-weight:700;font-size:14.5px;color:var(--primary-deep); background:var(--card-bg);border:1.5px solid var(--line);transition:.22s; } .method-tab .ic{width:19px;height:19px;stroke-width:1.6} .method-tab:hover{border-color:var(--gold)} .method-tab.active{background:var(--primary-deep);border-color:var(--primary-deep);color:#fff} .method-panel{ display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--gold-tint); border:1px dashed var(--gold-soft);border-radius:14px;padding:18px 20px;margin-bottom:8px; } .mp-ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--card-bg);display:grid;place-items:center;color:var(--primary);box-shadow:var(--shadow-sm)} .mp-ic .ic{width:24px;height:24px;stroke:var(--gold-deep)} .mp-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:160px} .mp-info small{font-family:var(--font-bn);font-size:12.5px;color:var(--text-light)} .mp-value{font-family:var(--font-en);font-weight:700;font-size:17px;color:var(--primary-deep);letter-spacing:.02em} .copy-btn{ display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;cursor:pointer; font-family:var(--font-bn);font-weight:600;font-size:13.5px;color:var(--primary); background:var(--card-bg);border:1px solid var(--gold-soft);transition:.22s;flex:none; } .copy-btn .ic{width:16px;height:16px} .copy-btn:hover{background:var(--gold);color:#fff;border-color:var(--gold)} .copy-btn.copied{background:var(--primary);color:#fff;border-color:var(--primary)} .donate-summary{font-family:var(--font-bn);font-size:15px;color:var(--text);margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .donate-summary b{color:var(--gold-deep);font-family:var(--font-en)} .donate-note{font-family:var(--font-bn);font-size:13px;color:var(--text-light);margin-top:8px} .donate-aside{display:flex;flex-direction:column;gap:20px;justify-content:center;border-left:1px solid var(--line);padding-left:40px} .di-item{display:flex;align-items:flex-start;gap:14px} .di-ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--bg-alt);border:1px solid var(--gold-soft);display:grid;place-items:center;color:var(--primary)} .di-ic .ic{width:22px;height:22px;stroke:var(--gold-deep)} .di-item h4{font-family:var(--font-bn);font-weight:700;font-size:15.5px;color:var(--primary-deep);margin-bottom:3px} .di-item p{font-family:var(--font-bn);font-size:13.5px;color:var(--text-light);line-height:1.6} /* ============================================================ PUBLICATIONS ============================================================ */ .pubs{background:transparent} .pub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .pub-card{ background:var(--card-bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; box-shadow:var(--shadow-sm);transition:transform .35s, box-shadow .35s;display:flex;flex-direction:column; } .pub-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)} .pub-thumb-link{display:block} .pub-thumb{height:190px;position:relative;overflow:hidden;display:grid;place-items:center} .pub-thumb .ph-ico{width:64px;height:64px;color:#fff;opacity:.9;z-index:2} .pub-thumb .ph-ico .ic{width:64px;height:64px;stroke-width:1.2} .pub-thumb::before{content:"";position:absolute;inset:0;background-size:34px 34px;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M17 0l17 17-17 17L0 17z' fill='none' stroke='%23ffffff' stroke-opacity='0.35'/%3E%3C/svg%3E")} .pub-thumb.has-image::before{content:none} .pub-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s} .pub-card:hover .pub-thumb img{transform:scale(1.05)} .tag{position:absolute;top:14px;left:14px;z-index:3;font-family:var(--font-bn);font-size:12.5px;font-weight:600; background:rgba(255,255,255,.92);color:var(--primary);padding:5px 12px;border-radius:999px;box-shadow:var(--shadow-sm)} .pub-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} /* Title clamps to 2 lines and summary to 3 so cards in a row stay the same shape no matter how long the copy is; min-height keeps the "আরও পড়ুন" row aligned across a row when one title happens to be short. The admin editor shows a matching hint. */ .pub-body h3{font-family:var(--font-bn);font-weight:600;font-size:20px;color:var(--primary-deep);line-height:1.4;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em} .pub-body h3 a{color:inherit;text-decoration:none} .pub-body h3 a:hover{color:var(--gold-deep)} /* min-height reserves the full 3 lines even for a short summary, so cards in a row end up identical instead of the grid leaving one of them short. */ .pub-body p{font-family:var(--font-bn);color:var(--text-light);font-size:14.5px;line-height:1.7;margin-bottom:18px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:5.1em} .pub-meta{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)} .pub-date{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-bn);font-size:13px;color:var(--text-light)} .pub-date .ic{width:16px;height:16px;stroke:var(--gold-deep)} .read-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-bn);font-weight:600;font-size:14px;color:var(--primary)} .read-more .ic{width:16px;height:16px;transition:transform .25s} .read-more:hover{color:var(--gold-deep)} .read-more:hover .ic{transform:translateX(4px)} /* ============================================================ VIDEOS ============================================================ */ .videos{background:linear-gradient(160deg,var(--primary-deep),var(--primary) 70%);color:#fff;position:relative;overflow:hidden} .videos::before{content:"";position:absolute;inset:0;opacity:.12;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23c5a044' stroke-width='1'%3E%3Cpath d='M35 3l32 32-32 32L3 35z'/%3E%3Ccircle cx='35' cy='35' r='13'/%3E%3C/g%3E%3C/svg%3E");background-size:70px 70px} .videos .wrap{position:relative;z-index:2} .videos .eyebrow{color:var(--gold)} .videos .sec-title{color:#fff} .videos .sec-sub{color:#d9c68e} .videos .see-all{color:#f3e9cf;border-color:rgba(197,160,68,.5)} .videos .see-all:hover{background:var(--gold);color:var(--primary-deep)} .vid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .vid-card{background:rgba(255,255,255,.06);border:1px solid rgba(197,160,68,.28);border-radius:var(--radius);overflow:hidden;transition:.35s} .vid-card:hover{transform:translateY(-6px);border-color:var(--gold);background:rgba(255,255,255,.09)} .vid-thumb{height:200px;position:relative;display:grid;place-items:center;overflow:hidden} .vid-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(18,63,36,.55))} .play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(4px); border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;z-index:3;transition:.3s;position:relative} .play::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(197,160,68,.6);opacity:0;transition:.35s} .vid-card:hover .play{background:var(--gold);border-color:var(--gold);transform:scale(1.08)} .vid-card:hover .play::after{opacity:1;inset:-12px} .play svg{width:26px;height:26px;margin-left:4px;fill:#fff;stroke:none} .vid-card:hover .play svg{fill:var(--primary-deep)} .vid-dur{position:absolute;bottom:12px;right:12px;z-index:4;font-family:var(--font-en);font-size:12.5px;font-weight:600;background:rgba(0,0,0,.6);color:#fff;padding:3px 9px;border-radius:6px} .vid-body{padding:18px 20px 20px} .vid-body h3{font-family:var(--font-bn);font-weight:600;font-size:18px;color:#fff;line-height:1.4} .vid-body .vid-meta{display:flex;align-items:center;gap:8px;font-family:var(--font-bn);font-size:13px;color:#c9b984;margin-top:8px} .vid-body .vid-meta .ic{width:15px;height:15px;stroke:var(--gold)} /* ============================================================ DAILY VERSE / HADITH ============================================================ */ .daily{position:relative;overflow:hidden; background:linear-gradient(180deg,var(--bg-alt) 0%,var(--bg-alt) 55%,var(--bg) 100%)} .daily::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:url("/images/daily-bg.png") center / cover no-repeat} .daily::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(640px 480px at 6% 20%,rgba(197,160,68,.16),transparent 70%), radial-gradient(680px 520px at 96% 30%,rgba(26,86,50,.07),transparent 72%), radial-gradient(720px 560px at 50% 96%,rgba(197,160,68,.10),transparent 70%)} .daily .wrap{position:relative;z-index:1} .daily-panel{position:relative;max-width:660px;margin:0 auto;padding:58px 64px 52px;text-align:center;border-radius:28px; background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.06) 55%,rgba(255,255,255,.16)); backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%); border:1px solid rgba(255,255,255,.5);overflow:hidden; box-shadow:0 30px 64px -28px rgba(18,63,36,.3),inset 0 1px 0 rgba(255,255,255,.55); transition:box-shadow .5s,transform .5s cubic-bezier(.22,1,.36,1)} .daily-panel:hover{box-shadow:0 38px 74px -26px rgba(18,63,36,.38),inset 0 1px 0 rgba(255,255,255,.65)} .dp-corner{position:absolute;width:46px;height:46px;color:var(--gold);z-index:2;opacity:.85} .dp-corner.tl{top:20px;left:20px} .dp-corner.br{bottom:20px;right:20px;transform:scale(-1)} .daily-tabs{position:relative;z-index:2;display:inline-flex;gap:6px;padding:6px;margin-bottom:36px; background:rgba(255,255,255,.45);border:1px solid var(--gold-soft);border-radius:999px} .daily-tab{appearance:none;border:none;cursor:pointer;white-space:nowrap;font-family:var(--font-bn);font-weight:600;font-size:14.5px; padding:12px 28px;border-radius:999px;color:var(--primary-deep);background:transparent; transition:background .35s,color .35s,box-shadow .35s} .daily-tab.is-active{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#f6ecd3; box-shadow:0 12px 24px -10px rgba(18,63,36,.55)} .daily-panes{position:relative;z-index:2} .daily-pane{display:none} .daily-pane.is-active{display:block;animation:dpFade .55s cubic-bezier(.2,.7,.3,1)} @keyframes dpFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .daily-ar{font-family:var(--font-ar);direction:rtl;font-size:clamp(26px,3vw,34px);line-height:1.9;color:var(--primary-deep);margin-bottom:18px} .daily-tr{font-family:var(--font-bn);font-size:17px;color:var(--text);line-height:1.85;max-width:440px;margin:0 auto 16px} .daily-ref{font-family:var(--font-bn);font-size:14.5px;font-weight:600;color:var(--gold-deep)} .daily-sep{width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 18px} /* ============================================================ CONTACT ============================================================ */ .contact{background:linear-gradient(180deg,transparent,var(--bg-alt));position:relative;overflow:hidden} .contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:stretch} .contact-aside{display:flex;flex-direction:column;justify-content:center} .contact-aside .eyebrow{margin-bottom:14px} .contact-aside h2{font-family:var(--font-bn);font-weight:700;font-size:clamp(28px,3.4vw,40px);color:var(--primary-deep);line-height:1.3;margin-bottom:16px} .contact-aside p{font-family:var(--font-bn);color:var(--text-light);font-size:16px;line-height:1.85;margin-bottom:28px;max-width:420px} .contact-list{display:flex;flex-direction:column;gap:16px} .ci{display:flex;align-items:center;gap:15px} .ci-ic{width:50px;height:50px;flex:none;border-radius:14px;background:var(--card-bg);border:1px solid var(--gold-soft); display:grid;place-items:center;color:var(--primary);box-shadow:var(--shadow-sm)} .ci-ic .ic{width:22px;height:22px;stroke:var(--gold-deep)} .ci-txt small{font-family:var(--font-bn);font-size:12.5px;color:var(--text-light);display:block} .ci-txt span,.ci-txt a{font-family:var(--font-en);font-weight:600;font-size:16px;color:var(--primary-deep);text-decoration:none} .ci-txt a:hover{color:var(--gold-deep);text-decoration:underline} .contact-social{display:flex;gap:12px;margin-top:28px} .contact-social a{width:46px;height:46px;border-radius:12px;background:var(--card-bg);border:1px solid var(--gold-soft);display:grid;place-items:center;color:var(--primary);transition:.25s} .contact-social a:hover{background:var(--primary);color:#fff;border-color:var(--primary);transform:translateY(-3px)} .contact-form{ background:rgba(255,255,255,.62);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.75);border-radius:24px;padding:36px;box-shadow:var(--shadow-lg);position:relative; } .contact-form::before{content:"";position:absolute;inset:8px;border:1px solid var(--gold-soft);border-radius:18px;pointer-events:none;opacity:.6} .form-inner{position:relative;z-index:2} .form-title{font-family:var(--font-bn);font-weight:700;font-size:22px;color:var(--primary-deep);margin-bottom:6px} .form-note{font-family:var(--font-bn);font-size:14px;color:var(--text-light);margin-bottom:24px} .field{margin-bottom:18px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field label{display:block;font-family:var(--font-bn);font-size:13.5px;font-weight:600;color:var(--primary-deep);margin-bottom:7px} .field input,.field textarea{ width:100%;font-family:var(--font-en);font-size:15px;color:var(--text); background:rgba(255,255,255,.7);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;transition:.25s; } .field textarea{resize:vertical;min-height:120px;font-family:var(--font-bn)} .field input::placeholder,.field textarea::placeholder{color:#a7a2b0} .field input:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:var(--card-bg);box-shadow:0 0 0 4px var(--gold-tint)} .form-btn{width:100%;margin-top:6px} .form-status{font-family:var(--font-bn);font-size:14.5px;text-align:center;margin-top:16px;padding:12px;border-radius:12px;display:none} .form-status.show{display:block} .form-status.ok{background:rgba(45,122,79,.12);color:var(--primary);border:1px solid rgba(45,122,79,.3)} .form-status.err{background:rgba(180,60,50,.1);color:#a33;border:1px solid rgba(180,60,50,.3)} /* ============================================================ FOOTER ============================================================ */ .foot-skyline-wrap{background:var(--bg-alt);overflow:hidden;line-height:0;position:relative} .foot-skyline-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--primary-deep)} /* Whatever section sits directly above the skyline needs the same --bg-alt shade, or the seam between it and the skyline wrap shows as a visible hard line (only some pages' last section happened to already use --bg-alt; this makes it universal). */ *:has(+ .foot-skyline-wrap){background:var(--bg-alt)} .foot-skyline{display:block;width:100%;height:auto;margin-bottom:-1px;pointer-events:none;transform:scale(1.05);transform-origin:bottom center} footer{background:linear-gradient(180deg,var(--primary-deep),#0e2f1c);color:#d9cfb8;position:relative;overflow:hidden} footer::before{content:"";position:absolute;inset:0;opacity:.06;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0l30 30-30 30L0 30z' fill='none' stroke='%23c5a044'/%3E%3C/svg%3E");background-size:60px 60px} .foot-top{position:relative;z-index:2;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding:64px 0 44px} .foot-brand p{font-family:var(--font-bn);font-size:14.5px;line-height:1.85;color:#bcae90;margin:20px 0 22px;max-width:340px} .foot-social{display:flex;gap:11px} .foot-social a{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid rgba(197,160,68,.3);display:grid;place-items:center;color:var(--gold);transition:.25s} .foot-social a:hover{background:var(--gold);color:var(--primary-deep);transform:translateY(-3px)} .foot-col h4{font-family:var(--font-bn);font-weight:700;font-size:17px;color:#fff;margin-bottom:20px;position:relative;padding-bottom:12px} .foot-col h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--gold)} .foot-col ul{display:flex;flex-direction:column;gap:11px} .foot-col a{font-family:var(--font-bn);font-size:14.5px;color:#bcae90;display:inline-flex;align-items:center;gap:8px;transition:.2s} .foot-col a::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:var(--gold);opacity:.6;transition:.2s} .foot-col a:hover{color:#fff} .foot-col a:hover::before{opacity:1;transform:rotate(45deg) scale(1.4)} .foot-contact li{display:flex;align-items:flex-start;gap:11px;font-family:var(--font-bn);font-size:14px;color:#bcae90;margin-bottom:14px;line-height:1.6} .foot-contact .ic{width:18px;height:18px;stroke:var(--gold);flex:none;margin-top:2px} .foot-contact a::before{content:none} .foot-bottom{position:relative;z-index:2;border-top:1px solid rgba(197,160,68,.2);padding:22px 0; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px} .foot-bottom p{font-family:var(--font-bn);font-size:13.5px;color:#a99c7f} .foot-bottom .made{font-family:var(--font-ar);color:var(--gold);font-size:16px;text-align:center} .foot-credit-wrap{text-align:right} .foot-credit{color:#a99c7f;text-decoration:none;border-bottom:1px dotted rgba(197,160,68,.4);transition:.2s} .foot-credit:hover{color:var(--gold);border-bottom-color:var(--gold)} /* ============================================================ REVEAL ANIMATIONS ============================================================ */ [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0)*90ms)} [data-reveal].in-view{opacity:1;transform:none} [data-reveal="left"]{transform:translateX(-36px)} [data-reveal="right"]{transform:translateX(36px)} [data-reveal="scale"]{transform:scale(.94)} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} @keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}} @keyframes glowPulse{0%,100%{opacity:.75}50%{opacity:1}} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .cat-card{flex-basis:210px;width:210px} .hero h1 .l1{font-size:clamp(38px,7vw,58px)} } /* nav collapses to hamburger before the full desktop menu can overflow (~933px content) */ @media (max-width:1000px){ .menu{display:none} .hamburger{display:grid} } @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;text-align:center;gap:20px;min-height:auto;padding-top:20px} .hero-text{display:flex;flex-direction:column;align-items:center} .hero-cta{justify-content:center} .hero-visual{order:-1;min-height:440px;margin-bottom:10px} .hv-dome{width:min(680px,150%)} .hero-verse{max-width:100%} .contact-grid,.donate-grid{grid-template-columns:1fr} .donate-aside{border-left:none;padding-left:0;padding-top:22px;border-top:1px solid var(--line)} .pub-grid,.vid-grid{grid-template-columns:repeat(2,1fr)} .foot-top{grid-template-columns:1fr 1fr;gap:34px} .foot-brand{grid-column:1 / -1} .foot-bottom{grid-template-columns:1fr;text-align:center;gap:8px} .foot-bottom .made,.foot-credit-wrap{text-align:center} } @media (max-width:720px){ .sec{padding:64px 0} .cat-track{gap:16px} .cat-card{flex-basis:188px;width:188px;padding:26px 18px 22px} .cat-nav{width:36px;height:36px} .cat-nav .ic{width:17px;height:17px} .amount-grid{grid-template-columns:repeat(2,1fr)} .donate-card{padding:30px 24px} .pub-grid,.vid-grid{grid-template-columns:1fr} .field-row{grid-template-columns:1fr} .hero-verse .v-ar{font-size:23px;white-space:normal} .head-row{align-items:flex-start} } @media (max-width:420px){ .wrap{padding-inline:18px} .hero-visual{min-height:370px} .hv-dome{width:min(580px,158%)} .brand-mark{height:46px} .brand-mark img{height:46px} .cat-track{gap:12px} .cat-card{flex-basis:166px;width:166px;padding:22px 14px 18px} .cat-nav{width:32px;height:32px} .cat-nav .ic{width:15px;height:15px} .cat-ico{width:70px;height:70px} .contact-form{padding:24px 20px} .daily-panel{padding:40px 26px 34px} .donate-card{padding:24px 16px} } @media (prefers-reduced-motion:reduce){ *{animation:none !important} [data-reveal]{transition:opacity .4s ease} html{scroll-behavior:auto} }