/* Enhancements: lighter glass everywhere, logo, motion. Loaded after theme-light.css */ /* ---------- Background that shows through the glass ---------- */ .ambient{background:linear-gradient(180deg,#FBFCFE 0%,#F3F6FA 50%,#EEF2F8 100%);overflow:hidden} .ambient::before{content:"";position:absolute;inset:-20%; background: radial-gradient(34vw 34vw at 12% 18%, rgba(118,160,222,.38), transparent 62%), radial-gradient(30vw 30vw at 88% 12%, rgba(176,198,230,.55), transparent 62%), radial-gradient(38vw 38vw at 78% 70%, rgba(128,170,230,.30), transparent 62%), radial-gradient(30vw 30vw at 18% 86%, rgba(190,205,228,.55), transparent 62%); filter:blur(10px);animation:drift 26s ease-in-out infinite alternate} @keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3%,2%,0) scale(1.06)}100%{transform:translate3d(3%,-2%,0) scale(1.02)}} .ambient::after{opacity:.09;filter:invert(1); mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 80%); -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 80%)} /* ---------- Lighter, shinier glass ---------- */ .glass{ --mx:50%;--my:-30%; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 45%), linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.4) 100%); border:1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(11,25,44,.04), 0 18px 50px -24px rgba(24,52,94,.28); -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%); } .site-header .nav{background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.38))} .stats{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:0 18px 50px -26px rgba(24,52,94,.3)} .stat{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.25));-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%)} .gen.current{background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 45%), linear-gradient(135deg,rgba(44,90,148,.16),rgba(255,255,255,.35))} .cred.top{background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 45%), linear-gradient(135deg,rgba(44,90,148,.16),rgba(255,255,255,.35))} .service:hover,.social:hover{background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.75), transparent 45%), linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.4))} .hero-badge,.masjid-card,.yt-feature .cap,.email-row{background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.45))} .strip figcaption{background:rgba(255,255,255,.7)!important} .chip,.branches span,.topics label > span{background:rgba(255,255,255,.5)} .field input,.field textarea{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .field input:focus,.field textarea:focus{background:rgba(255,255,255,.9)} .btn-ghost{background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.4));border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 10px 26px -16px rgba(24,52,94,.4)} .btn-primary{background:linear-gradient(180deg,#1E3D63 0%,#0B192C 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 28px -12px rgba(11,25,44,.55)} .step .node{background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.6));border-color:rgba(255,255,255,.9);box-shadow:0 8px 20px -12px rgba(24,52,94,.4)} .service .ico{background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(44,90,148,.08))} footer{border-top:1px solid rgba(255,255,255,.8);background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.6));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} /* ---------- Logo ---------- */ .brand{flex-direction:row;align-items:center;gap:12px;padding-inline:6px 10px} .brand-mark{height:44px;width:auto;flex:none} .brand-text{display:flex;flex-direction:column;line-height:1} .brand small{letter-spacing:.1em;font-size:8.5px;white-space:nowrap;margin-top:7px} .foot{align-items:flex-end} .foot-logo{display:flex;flex-direction:column;gap:12px;text-decoration:none} .foot-logo img{width:112px;height:auto} .foot-logo small{font:600 10.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} @media (max-width:1360px){ .brand small{display:none} } @media (max-width:1240px){ .nav-links a{padding:8px 9px;font-size:13.5px} } @media (max-width:1020px){ .brand small{display:block} } .lang-mobile{display:none} @media (max-width:640px){ .brand small{display:none} .brand-mark{height:38px} .nav > .lang{display:none} .lang-mobile{display:flex;justify-content:center;margin-top:8px} .lang-mobile button{flex:1;padding:12px 8px;font-size:13px} } /* ---------- Interactive motion ---------- */ .fx{transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background .35s ease;transform-style:preserve-3d;will-change:transform} .fx.is-hover{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 60px -28px rgba(24,52,94,.45)} .fx.is-press{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-1px) scale(.975);transition-duration:.15s} .fx-img{overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease} .fx-img img,.fx-img video{transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .6s ease} .fx-img.is-hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(24,52,94,.5)} .fx-img.is-hover img,.fx-img.is-hover video{transform:scale(1.05);filter:saturate(1.08) brightness(1.03)} .fx-img.is-press{transform:scale(.975);transition-duration:.15s} .fx-img{position:relative} .fx-img > .shine{position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%); transform:translateX(-120%);transition:transform 1s cubic-bezier(.2,.8,.2,1)} .fx-img.is-hover > .shine{transform:translateX(120%)} /* ---------- Scroll reveal: every time, both directions, one card after another ---------- */ html.reveal-on .reveal{animation:none; transition:opacity .35s ease, translate .35s ease, scale .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background .35s ease} html.reveal-on .reveal:not(.in){opacity:0;translate:0 44px;scale:.97} html.reveal-on .reveal.from-top:not(.in){translate:0 -44px} html.reveal-on .reveal.in{opacity:1;translate:0 0;scale:1; transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms), translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms), scale .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms), transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, background .35s ease} @media (prefers-reduced-motion: reduce){ .ambient::before{animation:none} html.reveal-on .reveal:not(.in){opacity:1;translate:none;scale:none} .fx.is-hover,.fx.is-press,.fx-img.is-hover,.fx-img.is-press{transform:none} } /* ================= Review 2 ================= */ :root{--gold:#C2A36B;--gold-2:#D9C08F;--gold-soft:rgba(194,163,107,.35)} /* Names that must never break */ .nw{white-space:nowrap} /* Background: "network of light" (chosen set 2, option 10), very light, slow drift */ @keyframes bgDrift{from{background-position:0 0}to{background-position:320px 160px}} .ambient::after{ opacity:.15;filter:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cg%20fill%3D%27none%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M103.73%2022.72L80.00%2046.00M103.73%2022.72L104.04%2055.96%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M80.00%2046.00L80%2080%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M137.28%2056.27L104.04%2055.96M137.28%2056.27L114.00%2080.00%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M104.04%2055.96L80%2080%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M137.28%20103.73L114.00%2080.00M137.28%20103.73L104.04%20104.04%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M114.00%2080.00L80%2080%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M103.73%20137.28L104.04%20104.04M103.73%20137.28L80.00%20114.00%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M104.04%20104.04L80%2080%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M56.27%20137.28L80.00%20114.00M56.27%20137.28L55.96%20104.04%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M80.00%20114.00L80%2080%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M22.72%20103.73L55.96%20104.04M22.72%20103.73L46.00%2080.00%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M55.96%20104.04L80%2080%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M22.72%2056.27L46.00%2080.00M22.72%2056.27L55.96%2055.96%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M46.00%2080.00L80%2080%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%27.6%27%2F%3E%3Cpath%20d%3D%27M56.27%2022.72L55.96%2055.96M56.27%2022.72L80.00%2046.00%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.75%27%20stroke-width%3D%27.8%27%2F%3E%3Cpath%20d%3D%27M55.96%2055.96L80%2080%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.18%27%20stroke-width%3D%27.6%27%2F%3E%3Cpolygon%20points%3D%2780.00%2C46.00%20104.04%2C55.96%20114.00%2C80.00%20104.04%2C104.04%2080.00%2C114.00%2055.96%2C104.04%2046.00%2C80.00%2055.96%2C55.96%27%20stroke%3D%27%230B192C%27%20stroke-opacity%3D%27.28%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M80%200V18M80%20142V160M0%2080H18M142%2080H160%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.45%27%20stroke-width%3D%27.7%27%20stroke-dasharray%3D%272%204%27%2F%3E%3Ccircle%20cx%3D%27103.73%27%20cy%3D%2722.72%27%20r%3D%272.4%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%27137.28%27%20cy%3D%2756.27%27%20r%3D%272.4%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%27137.28%27%20cy%3D%27103.73%27%20r%3D%272.4%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%27103.73%27%20cy%3D%27137.28%27%20r%3D%272.4%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%2756.27%27%20cy%3D%27137.28%27%20r%3D%272.4%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%2722.72%27%20cy%3D%27103.73%27%20r%3D%272.4%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%2722.72%27%20cy%3D%2756.27%27%20r%3D%272.4%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%2756.27%27%20cy%3D%2722.72%27%20r%3D%272.4%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%2780.00%27%20cy%3D%2746.00%27%20r%3D%271.5%27%20fill%3D%27%230B192C%27%20fill-opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%27104.04%27%20cy%3D%2755.96%27%20r%3D%271.5%27%20fill%3D%27%230B192C%27%20fill-opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%27114.00%27%20cy%3D%2780.00%27%20r%3D%271.5%27%20fill%3D%27%230B192C%27%20fill-opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%27104.04%27%20cy%3D%27104.04%27%20r%3D%271.5%27%20fill%3D%27%230B192C%27%20fill-opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%2780.00%27%20cy%3D%27114.00%27%20r%3D%271.5%27%20fill%3D%27%230B192C%27%20fill-opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%2755.96%27%20cy%3D%27104.04%27%20r%3D%271.5%27%20fill%3D%27%230B192C%27%20fill-opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%2746.00%27%20cy%3D%2780.00%27%20r%3D%271.5%27%20fill%3D%27%230B192C%27%20fill-opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%2755.96%27%20cy%3D%2755.96%27%20r%3D%271.5%27%20fill%3D%27%230B192C%27%20fill-opacity%3D%27.45%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%2780%27%20r%3D%273.2%27%20fill%3D%27%23C2A36B%27%2F%3E%3Ccircle%20cx%3D%2780%27%20cy%3D%2780%27%20r%3D%279%27%20stroke%3D%27%23C2A36B%27%20stroke-opacity%3D%27.4%27%20stroke-width%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%271.6%27%20fill%3D%27%23C2A36B%27%20fill-opacity%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%270%27%20r%3D%271.6%27%20fill%3D%27%23C2A36B%27%20fill-opacity%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%27160%27%20r%3D%271.6%27%20fill%3D%27%23C2A36B%27%20fill-opacity%3D%27.7%27%2F%3E%3Ccircle%20cx%3D%27160%27%20cy%3D%27160%27%20r%3D%271.6%27%20fill%3D%27%23C2A36B%27%20fill-opacity%3D%27.7%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size:160px 160px; animation:bgDrift 90s linear infinite; mask-image:radial-gradient(140% 110% at 50% 20%,#000 30%,transparent 90%); -webkit-mask-image:radial-gradient(140% 110% at 50% 20%,#000 30%,transparent 90%)} @media (prefers-reduced-motion: reduce){.ambient::after{animation:none}} /* Champagne gold accents */ .glass{border-top-color:rgba(194,163,107,.55)} .eyebrow{color:#9A7B42} .eyebrow::before{background:linear-gradient(90deg,var(--gold),var(--gold-2));opacity:1;height:1.5px} .hadith{border-color:rgba(194,163,107,.55)} .hadith .ar{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid;border-image:linear-gradient(90deg,transparent,var(--gold),transparent) 1} .stat b{position:relative;display:inline-block} .stat b::after{content:"";position:absolute;left:0;right:10%;bottom:-6px;height:1.5px;background:linear-gradient(90deg,var(--gold),transparent)} .step.now .node{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--gold-soft),0 8px 20px -10px rgba(24,52,94,.5)} .step .node{color:#9A7B42} .cred.top{border-color:rgba(194,163,107,.7)} .cred.top .flag{background:linear-gradient(135deg,#D6BC87,#B08F55);color:#fff} .fx.is-hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(194,163,107,.35),0 30px 60px -28px rgba(24,52,94,.45)} .service .ico{color:#9A7B42;border-color:rgba(194,163,107,.35)} .tagline span+span::before{background:var(--gold)} .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(194,163,107,.25),0 12px 28px -12px rgba(11,25,44,.55)} .foot-logo small{position:relative;padding-top:10px} .foot-logo small::before{content:"";position:absolute;left:0;top:0;width:60px;height:1.5px;background:linear-gradient(90deg,var(--gold),transparent)} .topics input:checked + span{box-shadow:0 0 0 2px var(--gold-soft)} :focus-visible{outline-color:var(--gold)} /* Credential cards: fully bilingual, same in every language */ .cred{min-height:0;gap:8px} .cred h3{font-size:20px;line-height:1.3} .cred .cred-ar{font-family:var(--arabic);font-size:18px;line-height:1.7;color:var(--silver);direction:rtl;text-align:right;margin:2px 0 4px} .cred .inst{margin-top:auto;padding-top:12px;border-top:1px solid;border-image:linear-gradient(90deg,var(--gold-soft),transparent) 1;display:grid;gap:2px} .cred .inst p{color:var(--muted);font-size:13.5px;margin:0} .cred .inst .ar{font-family:var(--arabic);direction:rtl;text-align:right;font-size:15px} /* Masjid caption below the photo */ .masjid-hero{min-height:0;aspect-ratio:16/9;border-bottom-left-radius:18px;border-bottom-right-radius:18px} .masjid-hero::after{background:none} .masjid-caption{margin-top:12px;display:flex;align-items:center;gap:22px;padding:18px 26px;border-radius:22px;flex-wrap:wrap} .masjid-caption .ar{font-family:var(--arabic);font-size:clamp(24px,2.6vw,30px);line-height:1.5;direction:rtl;margin:0} .masjid-caption .sep{width:1.5px;align-self:stretch;min-height:40px;background:linear-gradient(180deg,transparent,var(--gold),transparent)} .masjid-caption h3{font-size:clamp(20px,2.2vw,24px)} .masjid-caption .loc{display:flex;align-items:center;gap:8px;color:var(--silver);font-size:14px;margin-top:4px} .masjid-caption .loc svg{width:16px;height:16px;color:var(--gold);flex:none} @media (max-width:640px){ .masjid-caption{flex-direction:column;align-items:flex-start;gap:10px} .masjid-caption .sep{width:60px;min-height:1.5px;height:1.5px;background:linear-gradient(90deg,var(--gold),transparent)} .masjid-hero{aspect-ratio:4/3} } /* Two fallback video cards fill the row */ .videos:has(> :nth-child(2):last-child){grid-template-columns:1fr 1fr} @media (max-width:560px){ .videos:has(> :nth-child(2):last-child){grid-template-columns:1fr} } /* Mobile hero order: hadith first, then photo, then name, titles and buttons */ @media (max-width: 860px){ .hero-grid{row-gap:0} .hero .intro{display:contents} .hero .intro > .hadith{order:1;margin-bottom:26px!important} .hero .hero-photo-wrap{order:2} .hero .intro > h1{order:3;margin-top:30px} .hero .intro > .tagline{order:4} .hero .intro > .hero-actions{order:5} }