:root{color-scheme:light;--bg:#e9f5fd;--surface:#fff;--ink:#0b2a4a;--muted:#46627f;--accent:#1677b8;--line:#b9dcf3;--on:#fff;--glow:#fff;--tintA:rgba(22,119,184,.12);--tintB:rgba(225,29,72,.06);--card1:#fff;--card2:#f4faff;--chip:#fff;--hi:#fff;--day:#2b4865;--shc:rgba(22,119,184,.45);--shk:rgba(22,119,184,.6);--imgf:none;--cb:transparent} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#07131f;--surface:#0d1f33;--ink:#e6f1fb;--muted:#9fb7ce;--accent:#4cb2f2;--line:#22425f;--on:#04121f;--glow:#12304a;--tintA:rgba(76,178,242,.1);--tintB:rgba(255,92,127,.07);--card1:#10263d;--card2:#0b1c2f;--chip:#12304b;--hi:rgba(255,255,255,.07);--day:#bcd3e8;--shc:rgba(0,0,0,.65);--shk:rgba(0,0,0,.55);--pop:#ff5c7f;--imgf:invert(1) hue-rotate(180deg);--cb:rgba(255,255,255,.1)}} :root[data-theme="dark"]{color-scheme:dark;--bg:#07131f;--surface:#0d1f33;--ink:#e6f1fb;--muted:#9fb7ce;--accent:#4cb2f2;--line:#22425f;--on:#04121f;--glow:#12304a;--tintA:rgba(76,178,242,.1);--tintB:rgba(255,92,127,.07);--card1:#10263d;--card2:#0b1c2f;--chip:#12304b;--hi:rgba(255,255,255,.07);--day:#bcd3e8;--shc:rgba(0,0,0,.65);--shk:rgba(0,0,0,.55);--pop:#ff5c7f;--imgf:invert(1) hue-rotate(180deg);--cb:rgba(255,255,255,.1)} *{box-sizing:border-box} html{scroll-padding-top:4rem} body{margin:0;background:var(--bg);color:var(--ink);font-family:"Reem Kufi","Noto Kufi Arabic","Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;line-height:1.9;font-size:1rem} a{color:var(--accent)} a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .wrap{max-width:44rem;margin-inline:auto;padding-inline:1rem} header{background:var(--surface);border-bottom:1px solid var(--line)} header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;min-height:3.75rem} .brand{--lh:1.75rem;--ah:calc(var(--lh)*2.4);position:relative;display:grid;place-items:center;flex:none;line-height:0;height:var(--ah);margin-block:.35rem} .brand img{display:block;height:var(--lh);width:auto} .langs{display:flex;gap:.5rem} .ctrl button{font:inherit;font-size:.95rem;min-width:2.75rem;min-height:2.75rem;padding:0 .75rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:.5rem;cursor:pointer} .ctrl button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on)} .hero{text-align:center;padding-block:2rem 1rem} .hero .cal{display:block;width:min(100%,22rem);height:auto;margin:0 auto 1rem} h1{margin:0;line-height:0} h1 img{width:min(100%,384px);height:auto} .role{margin:1rem auto 0;font-size:1.125rem;max-width:30rem} .loc{margin:.25rem 0 0;color:var(--muted)} section{background:var(--surface);border:1px solid var(--line);border-radius:.5rem;padding:1.25rem;margin-block:1rem} h2{margin:0 0 .75rem;font-size:1.375rem;line-height:1.5} section p{margin:0 0 .75rem} section p:last-child{margin-bottom:0} .proj{padding-block:.875rem;border-top:1px solid var(--line)} .proj:first-of-type{border-top:0;padding-top:0} .proj:last-child{padding-bottom:0} .proj h3{margin:0;font-size:1.125rem;line-height:1.6;direction:ltr;text-align:start} [dir="rtl"] .proj h3{text-align:right} .meta{color:var(--muted)} dl{margin:0} dt{font-weight:700;margin-top:.75rem} dt:first-child{margin-top:0} dd{margin:.25rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem;direction:ltr} [dir="rtl"] dd{justify-content:flex-end} dd span{padding:.125rem .875rem;border:1px solid var(--line);border-radius:2rem;background:var(--bg);line-height:1.8} .links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.75rem} .links li:first-child{grid-column:1/-1} .links a{display:flex;align-items:center;gap:.75rem;min-height:3rem;padding:.5rem 1rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--ink);text-decoration:none;font-weight:600;overflow-wrap:anywhere} .links a:hover{border-color:var(--accent)} .links svg{flex:none;width:1.5rem;height:1.5rem;fill:currentColor} .links .ml svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ml svg{color:var(--accent)}.x svg,.tt svg{color:#000}.tg svg{color:#26a5e4}.fb svg{color:#1877f2} .mail span{direction:ltr} footer{margin-top:1.5rem;padding-block:1.5rem;border-top:1px solid var(--line);background:var(--surface);text-align:center;color:var(--muted);font-size:.9375rem} footer p{margin:0 auto} footer .brandline{color:var(--ink);font-weight:700;direction:ltr;unicode-bidi:isolate} @media (min-width:40rem){.wrap{padding-inline:1.5rem}section{padding:1.5rem}.proj{display:grid;grid-template-columns:9rem 1fr;gap:.25rem 1.5rem}.proj .meta{grid-column:2}} @media (max-width:22rem){.links{grid-template-columns:1fr}} #intro{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;animation:introOut 2.4s linear forwards} #intro .bloom{position:absolute;width:min(100vw,44rem);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(30,140,230,.45) 0%,rgba(30,140,230,0) 62%);opacity:0;transform:scale(.6);animation:bloom 2.4s ease-out forwards;will-change:transform,opacity} #intro .logo{position:relative;width:min(70vw,30rem);opacity:0;transform:scale(.94);animation:logoIn 2.4s cubic-bezier(.3,.7,.2,1) forwards;will-change:transform,opacity} #intro .logo img{display:block;width:100%;height:auto} @keyframes logoIn{0%{opacity:0;transform:scale(.94)}30%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}} @keyframes bloom{0%{opacity:0;transform:scale(.6)}35%{opacity:.9;transform:scale(1)}100%{opacity:.7;transform:scale(1.15)}} @keyframes introOut{0%,80%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}} @media (prefers-reduced-motion:reduce){#intro{display:none}} /* عناوين الأقسام: خط خطّي + توسيط + تأثير الكتابة */ section>h2{font-family:"Aref Ruqaa Ink","Aref Ruqaa","Katibeh","Reem Kufi",serif;font-weight:700;font-size:clamp(2.25rem,9vw,3.25rem);line-height:1.4;text-align:center;width:fit-content;max-width:100%;margin:0 auto .5rem;padding:.35em .45em;color:var(--pop)} html:lang(en) section>h2,html:lang(fr) section>h2{font-family:"Dancing Script","Segoe Script","Brush Script MT",cursive;font-weight:600} html.wr section>h2{-webkit-mask-image:linear-gradient(to left,#000 45%,transparent 55%);mask-image:linear-gradient(to left,#000 45%,transparent 55%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0} html.wr[dir="ltr"] section>h2{-webkit-mask-image:linear-gradient(to right,#000 45%,transparent 55%);mask-image:linear-gradient(to right,#000 45%,transparent 55%);-webkit-mask-position:100% 0;mask-position:100% 0} html.wr section>h2.go{animation:wrRtl 1.9s cubic-bezier(.4,.1,.3,1) forwards} html.wr[dir="ltr"] section>h2.go{animation-name:wrLtr} @keyframes wrRtl{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}} @keyframes wrLtr{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}} :root{--pop:#e11d48} #about{--shape:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MjAgNTY1IiB3aWR0aD0iNTIwIiBoZWlnaHQ9IjU2NSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNODkuOCw1MzguMkM3OC42LDUyNi41IDcyLjksNTAzLjMgNzUuMSw0NzguNkM3Ni40LDQ2NC42IDgwLjQsNDQ1LjIgODMuMCw0NDAuM0M4NC4xLDQzOC4yIDg1LjAsNDM1LjggODUuMCw0MzUuMEM4NS4wLDQzNC4yIDg2LjUsNDI5LjIgODguNCw0MjMuOUMxMDQuOSwzNzcuOCAxMzUuNywzMzQuMyAxNzcuNSwyOTguM0MyMTQuNywyNjYuMiAyODQuOCwyMjAuNyAzNDQuNSwxODkuOUMzNTIuOCwxODUuNyAzNjMuOCwxODAuMyAzNjkuMCwxNzguMEMzNzQuMiwxNzUuOCAzNzkuNCwxNzMuNCAzODAuNCwxNzIuOUMzODEuNCwxNzIuMyAzODQuNiwxNzEuMCAzODcuNCwxNzAuMEMzOTAuMiwxNjkuMCAzOTQuNSwxNjcuNCAzOTcuMCwxNjYuNUM0MDEuOSwxNjQuNiA0MDYuMywxNjQuNCA0MTguNSwxNjUuNUM0MzMuMiwxNjYuOCA0MzguOSwxNjMuNCA0NDkuMCwxNDYuOUM0NTIuNCwxNDEuNCA0NTguNiwxMzIuOCA0NjIuOCwxMjcuOUM0NjcuMSwxMjIuOSA0NzIuOCwxMTUuNyA0NzUuNSwxMTEuN0M0ODEuOCwxMDIuNyA0ODMuNiwxMDIuMiA0ODkuNSwxMDguMEM0OTkuMSwxMTcuNSA1MDEuMywxMjkuNiA0OTUuNiwxNDEuNEM0OTEuMSwxNTAuNiA0ODYuNSwxNTMuNCA0NzcuMCwxNTIuNUM0NTguNywxNTAuOCA0NTUuNSwxNTMuMCA0NDAuNSwxNzcuNEM0MzQuMiwxODcuNyA0MjguMiwxOTMuMyA0MjEuMCwxOTUuOUM0MTYuNiwxOTcuNSA0MTQuNiwxOTkuMCA0MTIuNSwyMDIuMEM0MDguNywyMDcuNSA0MDcuMCwyMDcuNyAzOTkuNiwyMDMuNkMzOTAuOCwxOTguNyAzOTAuNiwxOTguNyAzNjkuNSwyMDcuM0MzNDQuMywyMTcuNSAyODcuMCwyNDguMiAyNTcuMCwyNjcuNUMxNzUuNiwzMTkuOCAxMjkuNywzNjAuOCAxMDIuNCw0MDUuNkM5MC45LDQyNC41IDg2LjUsNDM2LjYgODQuOCw0NTQuMEM4Mi40LDQ3Ny41IDg1LjYsNDg3LjcgOTkuMyw1MDAuOUMxMDMuNiw1MDUuMSAxMDcuNiw1MDkuNSAxMDguMSw1MTAuN0MxMDguOSw1MTMuMCAxMDEuMyw1MzcuNiA5OC44LDU0MC44Qzk2LjksNTQzLjAgOTMuNSw1NDIuMSA4OS44LDUzOC4yWk01MS4wLDM1OS4xQzQzLjUsMzU3LjYgMzIuOCwzNTIuNyAyOC45LDM0OS4wQzI0LjgsMzQ1LjEgMjMuNiwzNDIuMiAyNi44LDM0My42QzI3LjcsMzQ0LjAgMzcuMCwzNDQuNSA0Ny41LDM0NC43TDY2LjUsMzQ1LjFMNzcuMCwzNDEuNkM5NC40LDMzNS45IDEwNi41LDMyOC43IDEyMS40LDMxNS40QzEzMy4wLDMwNS4wIDEzMy45LDMwMy40IDEzMS42LDI5OC4xQzEzMC42LDI5NS45IDEyOS4yLDI5My45IDEyOC41LDI5My42QzEyNi40LDI5Mi44IDEyMC4zLDI4MC45IDExNy41LDI3Mi4wQzExMi45LDI1Ny4zIDExMy4xLDIyMy41IDExNy45LDIxMS4zQzExOC45LDIwOC42IDEyMC4wLDIwNC4wIDEyMC40LDIwMC45QzEyMC44LDE5Ny44IDEyMS44LDE5NC40IDEyMi41LDE5My40QzEyNC43LDE5MC41IDEyNC41LDE5Ny4zIDEyMi4xLDIwNC4xQzExOS42LDIxMS40IDExOC40LDI0Mi4wIDEyMC4wLDI1Ny41QzEyMS4xLDI2OC43IDEyNS4wLDI4Mi41IDEyOS4zLDI5MC41QzEzMi40LDI5Ni4yIDEzNy42LDI5Ni43IDE0MS40LDI5MS43QzE1Ny43LDI3MC40IDE2Mi43LDI0Ny4xIDE2NS4xLDE4My4wQzE2Ny4wLDEzMC4xIDE2NS40LDEyNC44IDE1MS42LDEzOC42QzE0NS41LDE0NC44IDE0NC43LDE0NC40IDE0OC40LDEzNy4xQzE1NC4wLDEyNi4xIDE2OC41LDExMS4wIDE3My41LDExMS4wQzE4Mi44LDExMS4wIDE4My43LDE0NS4zIDE3Ni4wLDIwNi4wQzE3MC43LDI0Ny42IDE1Mi4zLDI5OS40IDEzNi4zLDMxNy41QzExMi4xLDM0NC45IDczLjcsMzYzLjYgNTEuMCwzNTkuMVpNNjEuNSwyOTcuMUM0Ni4yLDI4Ny42IDQyLjMsMjY2LjQgNDguMCwyMjUuMEM0OC41LDIyMS40IDQ5LjQsMjE0LjIgNTAuMCwyMDkuMEM1My41LDE3OS4wIDYwLjQsMTM0LjIgNjMuMSwxMjQuM0M2NS45LDExNC4xIDcxLjgsMTAxLjQgNzMuMSwxMDIuN0M3NC4xLDEwMy43IDczLjMsMTExLjQgNjguMCwxNTMuNUM2My40LDE4OS4yIDYxLjgsMjIxLjYgNjQuMCwyMzIuMEM2OC43LDI1NC40IDkxLjEsMjU4LjMgMTAwLjAsMjM4LjNDMTAxLjEsMjM1LjcgMTAyLjUsMjM0LjAgMTAzLjYsMjM0LjBDMTA3LjUsMjM0LjAgMTAxLjksMjYxLjAgOTUuMCwyNzUuNkM4Ni4wLDI5NC4zIDcxLjcsMzAzLjUgNjEuNSwyOTcuMVpNMzY3LjksMTEzLjVDMzYxLjYsMTA4LjMgMzU2LjEsMTAzLjEgMzU1LjYsMTAyLjFDMzU0LjMsOTkuMiAzNzMuMyw2Ni43IDM3Ny4wLDY1LjVDMzgwLjYsNjQuNCAzOTIuMiw3Mi44IDM5OC4yLDgxLjBDNDA1LjYsOTEuMCAzOTkuMSwxMTAuMSAzODQuNywxMjAuN0MzODAuMywxMjQuMCAzODAuNCwxMjQuMCAzNjcuOSwxMTMuNVpNMTU3LjAsODcuMkMxNTcuMCw4Ni44IDE1Ny43LDg1LjYgMTU4LjUsODQuNkMxNjEuMCw4MS4zIDE2MC40LDc3LjMgMTU3LjAsNzQuOEMxNTMuMCw3MS45IDE1My4yLDY4LjkgMTU3LjYsNjQuMEMxNjEuNyw1OS41IDE2My4zLDU5LjEgMTY1LjMsNjIuMEMxNjcuNCw2NS4wIDE3My43LDY3LjIgMTc4LjksNjYuOEMxODQuMyw2Ni40IDE4NS4wLDY4LjAgMTgwLjgsNzAuOEMxNzkuMyw3MS43IDE3My40LDc2LjAgMTY3LjYsODAuMkMxNjEuNyw4NC41IDE1Ny4wLDg3LjcgMTU3LjAsODcuMlpNMTE1LjksNzQuM0MxMTEuOSw3MS42IDk5LjcsNjEuNSA5OC4xLDU5LjdDOTYuMyw1Ny41IDk2LjUsNTcuMSAxMDkuMSwzOC4wQzEyMi41LDE3LjcgMTIyLjcsMTcuNSAxMzIuNCwyNi4xQzE0Ny4wLDM5LjAgMTQ2LjcsNTEuNyAxMzEuMiw2OC4wQzEyMy43LDc1LjkgMTIwLjMsNzcuMyAxMTUuOSw3NC4zWk0xNzAuMiw1NC40QzE2NS43LDUyLjQgMTczLjksNDYuOSAxNzguOCw0OC42QzE4MC43LDQ5LjMgMTgxLjUsNTAuMiAxODEuNSw1Mi4wQzE4MS41LDU0LjMgMTgxLjEsNTQuNSAxNzYuNSw1NC43QzE3My44LDU0LjggMTcwLjksNTQuNyAxNzAuMiw1NC40WiIvPjwvc3ZnPg==");--ar:520 / 565} section>h2.cal{position:relative} html:lang(ar) section>h2.cal::before{content:"";display:block;width:min(62vw,14rem);aspect-ratio:var(--ar);background:var(--pop);-webkit-mask:var(--shape) center/contain no-repeat;mask:var(--shape) center/contain no-repeat} html:lang(ar) section>h2.cal>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} section>h2{cursor:pointer;-webkit-tap-highlight-color:transparent} /* ===== تجميل: الخلفية والبطاقات والعناوين ===== */ body{background:radial-gradient(48rem 24rem at 50% 0,var(--glow),transparent 70%),radial-gradient(38rem 28rem at 100% 65%,var(--tintA),transparent 70%),radial-gradient(30rem 24rem at 0 35%,var(--tintB),transparent 70%),var(--bg)} main>section{position:relative;margin-block:1.5rem;padding:2rem 1.25rem;border-radius:1.25rem;border:1px solid var(--line);background:linear-gradient(180deg,var(--card1),var(--card2));box-shadow:0 1px 0 var(--hi) inset,0 18px 38px -22px var(--shc)} main>section::before{content:"";position:absolute;top:-1px;left:50%;width:5rem;height:3px;margin-left:-2.5rem;border-radius:3px;background:var(--pop)} main>section>h2{margin:0 auto .75rem} section>h2::after{content:"";display:block;width:55%;height:3px;margin:.05em auto 0;border-radius:3px;background:linear-gradient(90deg,transparent,var(--pop),transparent);opacity:.85} section>h2.cal{isolation:isolate} html:lang(ar) main>section>h2.cal::before{width:min(38vw,8.5rem)} html:lang(ar) section>h2.cal::after{position:absolute;inset:-8% -18%;width:auto;height:auto;margin:0;z-index:-1;border-radius:0;background:radial-gradient(closest-side,rgba(225,29,72,.18),transparent 70%);opacity:1} /* من أنا */ #about{text-align:center} #about p{font-size:1.125rem;line-height:2.05;max-width:34rem;margin-inline:auto} #about p:first-of-type{font-weight:600} @media (min-width:40rem){ #about{display:grid;grid-template-columns:auto 1fr;column-gap:2.5rem;align-items:center;padding:2.25rem 2rem} #about>h2{grid-row:1/3;margin:0} #about p{text-align:start;margin-inline:0} } /* المشاريع والتقنيات والتواصل */ .proj h3{color:var(--ink);font-weight:700} .proj .meta{width:fit-content;padding:0 .9rem;border:1px solid var(--pop);border-radius:2rem;color:var(--pop);font-size:.9rem;line-height:2} .proj .meta a{display:inline-block;padding-block:.4rem;color:var(--pop);font-weight:700;text-decoration:none} dd span{border-color:var(--line);background:var(--chip);font-weight:600} .links a{background:var(--chip);transition:border-color .2s,box-shadow .2s,transform .2s} .links a:hover{border-color:var(--pop);box-shadow:0 8px 18px -10px rgba(225,29,72,.45);transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){.links a{transition:none}.links a:hover{transform:none}} /* ===== التواصل: زجاج (glassmorphism) ===== */ #contact .links{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:.75rem;padding:1.1rem;border-radius:1.25rem;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 12% 18%,rgba(30,144,255,.55),transparent 42%),radial-gradient(circle at 88% 28%,rgba(225,29,72,.45),transparent 40%),radial-gradient(circle at 50% 105%,rgba(34,211,238,.35),transparent 50%),#06182c;box-shadow:0 20px 40px -24px rgba(6,24,44,.8)} #contact .links li{grid-column:auto;display:flex;min-width:0} #contact .links a{--b:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:8rem;padding:.85rem .6rem;text-align:center;color:#fff;font-weight:600;text-decoration:none;border-radius:1rem;border:1px solid rgba(255,255,255,.32);background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.09));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 24px -14px rgba(0,0,0,.7);transition:transform .25s,box-shadow .25s,border-color .25s} #contact .links a::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(255,255,255,.35),transparent 38%);opacity:.6;pointer-events:none} #contact .links a:hover{transform:translateY(-3px);border-color:var(--b);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 14px 30px -10px var(--b)} #contact .links a:focus-visible{outline-color:#fff} #contact .links .tx{align-items:center;max-width:100%} #contact .links .tx b{font-size:1rem;line-height:1.45;overflow-wrap:anywhere} #contact .links .tx small{margin-top:.1rem;font-size:.75rem;line-height:1.5;font-weight:400;overflow-wrap:anywhere} .ic{position:relative;flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 6px 14px -6px rgba(0,0,0,.6)} .tx{display:flex;flex-direction:column;line-height:1.5;min-width:0} .tx small{font-weight:400;opacity:.85} .wa svg{color:#25d366} #contact .links .wa{--b:#25d366}#contact .links .mail{--b:#38bdf8}#contact .links .x{--b:#e5e7eb}#contact .links .tt{--b:#fe2c55}#contact .links .tg{--b:#26a5e4}#contact .links .fb{--b:#1877f2} @media (max-width:36rem){#contact .links{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:22rem){#contact .links{padding:.8rem;gap:.6rem}#contact .links a{min-height:7.5rem;padding-inline:.4rem}#contact .links .tx b{font-size:.92rem}#contact .links .tx small{font-size:.7rem}} @media (prefers-reduced-motion:reduce){#contact .links a{transition:none}#contact .links a:hover{transform:none}} /* ===== الساعة والتاريخ واسم اليوم ===== */ .now{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:0 auto 1.5rem} .now .day{font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-weight:700;font-size:clamp(2.25rem,10.5vw,3.5rem);line-height:1.35;color:var(--day);white-space:nowrap} html:lang(fr) .now .day,html:lang(en) .now .day{letter-spacing:.2em;font-size:clamp(1.75rem,8vw,2.6rem)} .clock{direction:ltr;display:flex;align-items:center;gap:.35rem;font-weight:700;font-size:clamp(1.9rem,8.5vw,2.6rem);line-height:1} .clock .t{min-width:2.3ch;padding:.28em .3em;text-align:center;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--chip);border:1px solid var(--line);border-radius:.6rem;box-shadow:0 8px 18px -12px var(--shk),inset 0 1px 0 var(--hi)} .clock .s{color:var(--pop);border-color:rgba(225,29,72,.35)} .clock i{font-style:normal;color:var(--accent)} @media (prefers-reduced-motion:no-preference){.clock i{animation:blink 1s steps(2,start) infinite}} @keyframes blink{50%{opacity:.25}} .dates{margin:.3rem 0 0;display:flex;flex-direction:column;gap:.1rem;line-height:1.7} .dates b{font-weight:700;color:var(--ink)} .dates span{color:var(--muted)} /* سناب شات */ .sc .ic{background:#fffc00} .sc svg{fill:#fff;stroke:#000;stroke-width:.6;stroke-linejoin:round} #contact .links .sc{--b:#fffc00} /* ===== لوغو NOXILIS: حرفا N و Z يفتحان ويغلقان ===== */ .door{position:relative} .door img{visibility:hidden} .door .lg,.door .gl{position:absolute;pointer-events:none} .door .lg{inset:0;background:var(--logo) center/100% 100% no-repeat} .door .mid{clip-path:inset(0 12.0% 0 12.0%)} .door .nl,.door .nr,.door .zl,.door .zr{animation:5s ease-in-out 6} .door .nl{clip-path:inset(0 93.6% 0 0.0%);transform-origin:0.0% 50%;animation-name:doorL} .door .nr{clip-path:inset(0 88.0% 0 5.6%);transform-origin:12.0% 50%;animation-name:doorR} .door .zl{clip-path:inset(0 5.6% 0 88.0%);transform-origin:88.0% 50%;animation-name:doorL;animation-delay:.35s} .door .zr{clip-path:inset(0 0.0% 0 93.6%);transform-origin:100.0% 50%;animation-name:doorR;animation-delay:.35s} .door .gl{top:6%;bottom:6%;background:radial-gradient(closest-side,var(--pop),rgba(225,29,72,0));opacity:0;animation:glowDoor 5s ease-in-out 6} .door .gn{left:0.0%;width:12.0%} .door .gz{left:88.0%;width:12.0%;animation-delay:.35s} @keyframes doorL{0%,36%{transform:scaleX(1)}52%,66%{transform:scaleX(.14)}82%,100%{transform:scaleX(1)}} @keyframes doorR{0%,36%{transform:scaleX(1)}52%,66%{transform:scaleX(.14)}82%,100%{transform:scaleX(1)}} @keyframes glowDoor{0%,36%{opacity:0}52%,66%{opacity:.9}82%,100%{opacity:0}} /* ===== أزرار التحكم: الوضع الداكن واللغة ===== */ .ctrl{display:flex;align-items:center;gap:.5rem} .ctrl button{display:inline-flex;align-items:center;justify-content:center} .theme svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .theme[aria-pressed="true"] svg{fill:currentColor} @media (max-width:26rem){.brand{--lh:1.5rem}.ctrl,.langs{gap:.375rem}.ctrl button{min-width:2.5rem;min-height:2.5rem;padding:0 .5rem}} /* ===== الوضع الداكن: الصور والتفاصيل ===== */ .hero img.cal,h1 img,.brand img,.brand .lg{filter:var(--imgf)} #contact .links{border:1px solid var(--cb)} #contact .links .ml svg{color:#1677b8} /* ===== الصلاة القادمة ===== */ .pray{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.1rem .65rem;margin-top:.7rem;padding:.45rem 1.1rem;border:1px solid var(--line);border-radius:2rem;background:var(--chip);box-shadow:inset 0 1px 0 var(--hi),0 8px 18px -14px var(--shk);font-size:.975rem;line-height:1.7} .pray[hidden]{display:none} .pray .pl{color:var(--muted)} .pray b{font-weight:700;color:var(--ink)} .pray bdi{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums} .pray .pc{color:var(--pop);font-weight:700} /* ===== الآية القرآنية المتجددة أعلى الساعة: توسيط وخط كوفي ===== */ .dhk{max-width:44rem;margin:0 auto 1.1rem;padding:1rem 1.1rem 1.05rem;border-bottom:1px solid var(--line);text-align:center} .dhk[hidden],.dhk .dk-t[hidden],.dhk .dk-r[hidden]{display:none} .dhk .dk-a{max-width:40rem;margin:0 auto;font-family:"Reem Kufi","Noto Kufi Arabic","Segoe UI",sans-serif;font-size:clamp(1.2rem,3.6vw,1.7rem);font-weight:600;line-height:2.05;text-align:center;text-wrap:balance;overflow-wrap:anywhere;color:var(--ink)} .dhk .dk-a.long{font-size:clamp(1rem,3vw,1.35rem);line-height:2.1} .dhk .dk-t{margin:.1rem auto 0;font-size:.9375rem;line-height:1.7;color:var(--muted)} .dhk .dk-r{margin:.3rem auto 0;font-family:"Reem Kufi","Noto Kufi Arabic","Segoe UI",sans-serif;font-size:.875rem;line-height:1.7;color:var(--accent);font-weight:600} @media (max-width:28rem){.dhk{padding-inline:.35rem}.dhk .dk-a{font-size:1.15rem;line-height:2}.dhk .dk-a.long{font-size:1rem}} /* ===== بطاقة ذكر يومية مصغّرة: خط كوفي واضح ومتناسق ===== */ .adhkar-widget{position:relative;max-width:33rem;margin:0 auto .95rem;padding:.55rem clamp(.65rem,2.2vw,.95rem) .6rem;border:1px solid var(--line);border-radius:1rem;text-align:center;background:linear-gradient(145deg,var(--surface),var(--card2));box-shadow:0 1px 0 var(--hi) inset,0 10px 24px -22px var(--shc);overflow:hidden} .adhkar-widget::before{content:"";position:absolute;inset:0 30% auto;height:2px;margin:auto;background:linear-gradient(90deg,transparent,var(--pop),transparent);opacity:.72} .adhkar-heading-wrap{margin:0 auto .3rem} .adhkar-flourish{display:block;color:var(--pop);font-size:.85rem;line-height:1.1;opacity:.9} .adhkar-widget .adhkar-heading-wrap h2{margin:.08rem 0 0;padding:0;color:var(--pop);font-family:"Reem Kufi","Segoe UI",sans-serif;font-size:clamp(1rem,3.8vw,1.2rem);font-weight:700;line-height:1.5;text-wrap:balance} .adhkar-widget .adhkar-heading-wrap h2::after{content:"";display:block;width:3.8rem;max-width:38%;height:1px;margin:.12rem auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--pop),transparent);opacity:.65} .adhkar-content{position:relative;margin:.35rem 0 .45rem;padding:.38rem clamp(.45rem,2vw,.7rem) .42rem;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:.72rem;background:color-mix(in srgb,var(--bg) 72%,transparent)} .adhkar-category{margin:0 auto .05rem;color:var(--accent);font-size:.68rem;font-weight:700;line-height:1.4} .adhkar-name{margin:0 auto .1rem;color:var(--ink);font-family:"Reem Kufi","Segoe UI",sans-serif;font-size:.82rem;font-weight:700;line-height:1.45} /* Reem Kufi بدل الخط الرقعي السابق؛ واضح ومختلف مع بقاء التشكيل العربي مقروءًا. */ .adhkar-text{position:relative;max-height:4.6rem;overflow:auto;overscroll-behavior:contain;margin:0 auto;padding:.02rem .1rem .12rem;color:var(--ink);font-family:"Reem Kufi","Noto Kufi Arabic","Segoe UI",sans-serif;font-size:clamp(1rem,3.3vw,1.2rem);font-weight:500;line-height:1.85;text-align:center;text-wrap:pretty;overflow-wrap:anywhere;scrollbar-color:var(--line) transparent;scrollbar-width:thin} .adhkar-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.1rem .5rem;margin-top:.15rem;color:var(--muted);font-size:.66rem;line-height:1.45} .adhkar-repeat{color:var(--accent);font-weight:700} .adhkar-source{max-width:100%;overflow-wrap:anywhere} .adhkar-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.35rem} .adhkar-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:1.95rem;padding:.25rem .75rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background .18s ease} .adhkar-next{border-color:var(--pop);background:var(--pop);color:#fff;box-shadow:0 4px 12px -9px var(--pop)} .adhkar-btn:hover{transform:translateY(-1px);border-color:var(--pop)} .adhkar-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .adhkar-feedback{min-height:.7rem;margin:.08rem 0 0;color:var(--muted);font-size:.68rem;line-height:1.3} .adhkar-copy-buffer{position:fixed!important;top:0;left:0;width:1px;height:1px;padding:0;border:0;opacity:.01;pointer-events:none;z-index:-1} @media (max-width:28rem){.adhkar-widget{margin-inline:.1rem;padding:.48rem .5rem .5rem;border-radius:.85rem}.adhkar-content{padding:.32rem .35rem}.adhkar-text{font-size:1rem;line-height:1.8;max-height:4.1rem}.adhkar-meta{font-size:.62rem}.adhkar-btn{min-height:1.85rem;padding-inline:.65rem}} @media (prefers-reduced-motion:reduce){.adhkar-btn{transition:none}} /* ===== شعار الترويسة: لاتيني ⇄ عربي (خط الديواني) بحركة كتابة وتوهّج ===== */ :root{--glowc:rgba(225,29,72,.38)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glowc:rgba(255,92,127,.55)}} :root[data-theme="dark"]{--glowc:rgba(255,92,127,.55)} .brand .bf{grid-area:1/1;display:block;position:relative} .bf-ar{display:none;place-items:center} .brand.run .bf-ar{display:grid} .bf-ar .wr{grid-area:1/1;display:block;-webkit-mask-image:linear-gradient(to left,#000 46%,transparent 54%);mask-image:linear-gradient(to left,#000 46%,transparent 54%);-webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0} .bf-ar .sheen{-webkit-mask-image:linear-gradient(105deg,transparent 40%,#000 50%,transparent 60%);mask-image:linear-gradient(105deg,transparent 40%,#000 50%,transparent 60%)} .bf-ar svg{display:block;height:var(--ah);width:auto;overflow:visible} .bf-ar .ink svg{fill:#0b0b0b;filter:var(--imgf)} .bf-ar .sheen svg{fill:var(--pop)} @media (prefers-reduced-motion:no-preference){ .brand.run .bf-lat{animation:nxLat 10s cubic-bezier(.45,0,.2,1) 3} .brand.run .bf-ar{animation:nxAr 10s cubic-bezier(.45,0,.2,1) 3} .brand.run .bf-ar .ink{animation:nxWr 10s cubic-bezier(.5,.05,.25,1) 3} .brand.run .bf-ar .sheen{animation:nxShn 10s ease-in-out 3} } @keyframes nxLat{ 0%,40%{opacity:1;transform:none} 46%{opacity:0;transform:translateY(-34%) scale(.92)} 46.01%,92%{opacity:0;transform:translateY(34%) scale(.92)} 100%{opacity:1;transform:none} } @keyframes nxAr{ 0%,47%{opacity:0;transform:translateY(10%) scale(1.07)} 50%{opacity:1;transform:translateY(8%) scale(1.06)} 64%{opacity:1;transform:none} 82%,88%{opacity:1;transform:none} 94%{opacity:0;transform:translateY(-34%) scale(.92)} 100%{opacity:0;transform:translateY(10%) scale(1.07)} } @keyframes nxWr{0%,48%{-webkit-mask-position:0 0;mask-position:0 0}66%,100%{-webkit-mask-position:100% 0;mask-position:100% 0}} @keyframes nxShn{0%,68%{-webkit-mask-position:0 0;mask-position:0 0}80%,100%{-webkit-mask-position:100% 0;mask-position:100% 0}} /* ===== منع تحديد النص (ضغط مطوّل / نقر مزدوج) ===== */ html,body,body *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none} html{-webkit-tap-highlight-color:transparent} ::selection{background:transparent} ::-moz-selection{background:transparent} /* ===== روابط الشروط والخصوصية ===== */ footer .legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.25rem;margin:0 auto .75rem} footer .legal a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid transparent} footer .legal a:hover{border-bottom-color:var(--pop)} /* آية/ذكر اليوم في الأعلى */ main>.dhk{margin-top:1.25rem} /* ===== أداء: لا رسم للأقسام خارج الشاشة، وإيقاف الحركات عند الخروج من الصفحة ===== */ main>section{content-visibility:auto;contain-intrinsic-size:auto 20rem} html.off .brand,html.off .brand *{animation-play-state:paused!important} img{-webkit-user-drag:none} /* ===== مشروع سجرارة: الشعار والصور ===== */ .phead{display:flex;align-items:center;gap:.75rem} .plogo{display:block;width:3.25rem;height:3.25rem;flex:none;border-radius:.9rem;box-shadow:0 8px 18px -10px var(--shk)} .shots{grid-column:1/-1;display:flex;justify-content:safe center;gap:.75rem;margin:.75rem 0 0;padding:.25rem .125rem .5rem;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch} .shots::-webkit-scrollbar{display:none} .shot{flex:0 0 auto;width:min(56%,10.5rem);margin:0;padding:0;border:1px solid var(--line);border-radius:1.1rem;background:var(--chip);overflow:hidden;cursor:zoom-in;scroll-snap-align:center;box-shadow:0 10px 22px -16px var(--shk)} .shot img{display:block;width:100%;height:auto;aspect-ratio:1163/2350} .shotcap{grid-column:1/-1;margin:.1rem 0 0!important;text-align:center;color:var(--muted);font-size:.9rem} #lb{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.88);cursor:zoom-out} #lb[hidden]{display:none} #lb img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:1.1rem;background:#fff} @media (min-width:40rem){.phead{flex-direction:column;align-items:flex-start;gap:.5rem}.shot{width:10.5rem}} /* ===== راسل المطوّر: نموذج زجاجي داخل قسم التواصل ===== */ .mailbox{position:relative;margin-top:1rem;padding:1.5rem 1.1rem 1.25rem;border-radius:1.25rem;overflow:hidden;isolation:isolate;color:#fff;border:1px solid var(--cb);background:radial-gradient(circle at 12% 0,rgba(30,144,255,.55),transparent 45%),radial-gradient(circle at 92% 32%,rgba(225,29,72,.4),transparent 42%),radial-gradient(circle at 50% 112%,rgba(34,211,238,.32),transparent 52%),#06182c;box-shadow:0 20px 40px -24px rgba(6,24,44,.8)} .mb-h{margin:0 auto .15rem;width:fit-content;max-width:100%;text-align:center;font-family:"Aref Ruqaa Ink","Aref Ruqaa","Katibeh","Reem Kufi",serif;font-weight:700;font-size:clamp(1.9rem,7vw,2.5rem);line-height:1.4;color:#ff5c7f} html:lang(en) .mb-h,html:lang(fr) .mb-h{font-family:"Dancing Script","Segoe Script","Brush Script MT",cursive;font-weight:600} .mb-h::after{content:"";display:block;width:55%;height:3px;margin:.05em auto 0;border-radius:3px;background:linear-gradient(90deg,transparent,#ff5c7f,transparent);opacity:.85} .mailbox .mb-sub{margin:.5rem auto 1.1rem;max-width:30rem;text-align:center;color:rgba(255,255,255,.85);font-size:.97rem;line-height:1.8} .mb-form{position:relative;display:grid;gap:.9rem} .mb-row{display:grid;grid-template-columns:1fr;gap:.9rem} @media (min-width:36rem){.mb-row{grid-template-columns:1fr 1fr}} .mb-f{display:flex;flex-direction:column;gap:.3rem;min-width:0} .mb-f>label{font-weight:600;font-size:.93rem;line-height:1.6;color:rgba(255,255,255,.92)} .mailbox input[type=text],.mailbox input[type=email],.mailbox textarea,.mailbox select{-webkit-user-select:text;-moz-user-select:text;user-select:text;-webkit-touch-callout:default;appearance:none;-webkit-appearance:none;width:100%;min-height:3rem;margin:0;padding:.6rem .95rem;font:inherit;font-size:1rem;line-height:1.7;color:#fff;color-scheme:dark;text-align:start;border-radius:.9rem;border:1px solid rgba(255,255,255,.32);background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px -14px rgba(0,0,0,.7);transition:border-color .2s,box-shadow .2s,background-color .2s} .mailbox textarea{min-height:9rem;resize:vertical} .mailbox input#mb-email{direction:ltr} .mailbox ::placeholder{color:rgba(255,255,255,.58);opacity:1} .mailbox input:focus,.mailbox textarea:focus,.mailbox select:focus{outline:3px solid #fff;outline-offset:2px;border-color:#38bdf8;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 4px rgba(56,189,248,.28)} .mailbox input::selection,.mailbox textarea::selection{background:rgba(56,189,248,.55);color:#fff} .mailbox input::-moz-selection,.mailbox textarea::-moz-selection{background:rgba(56,189,248,.55);color:#fff} .mailbox input:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #0b2a4a inset;transition:background-color 9999s} .mailbox select{padding-inline-end:2.6rem;cursor:pointer;background-repeat:no-repeat,no-repeat;background-image:url("data:image/svg+xml;utf8,"),linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));background-size:1.1rem,auto;background-position:right .85rem center,0 0} [dir="rtl"] .mailbox select{background-position:left .85rem center,0 0} .mailbox select option{background:#0b2a4a;color:#fff} .mailbox select:invalid{color:rgba(255,255,255,.58)} .mailbox input[aria-invalid="true"],.mailbox textarea[aria-invalid="true"],.mailbox select[aria-invalid="true"]{border-color:#ff6b8a;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 3px rgba(255,107,138,.25)} .mb-err{min-height:0;margin:0;font-size:.86rem;line-height:1.6;color:#ffc2cf} .mb-err:empty{display:none} .mb-hp{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none;white-space:nowrap} .mailbox .mb-priv{margin:0;text-align:center;font-size:.86rem;line-height:1.8;color:rgba(255,255,255,.78)} .mailbox .mb-priv a{color:#fff;font-weight:700;text-underline-offset:3px} .mailbox .mb-priv a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:.25rem} .mb-send{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;width:100%;min-height:3.25rem;padding:.65rem 1.25rem;font:inherit;font-size:1.05rem;font-weight:700;color:#fff;cursor:pointer;border-radius:1rem;border:1px solid rgba(255,255,255,.45);background:linear-gradient(135deg,#e11d48,#be123c);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 28px -14px #e11d48;transition:transform .25s,box-shadow .25s,filter .25s} .mb-send:hover{transform:translateY(-2px);filter:brightness(1.08)} .mb-send:focus-visible{outline:3px solid #fff;outline-offset:3px} .mb-send[disabled]{cursor:progress;filter:saturate(.7) brightness(.92);transform:none} .mb-send svg{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} [dir="rtl"] .mb-send .mb-ico{transform:scaleX(-1)} .mb-spin{display:none;width:1.2rem;height:1.2rem;flex:none;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;animation:mbspin .8s linear infinite} .mb-send[aria-busy="true"] .mb-spin{display:inline-block} .mb-send[aria-busy="true"] .mb-ico{display:none} @keyframes mbspin{to{transform:rotate(360deg)}} .mb-status{display:flex;align-items:flex-start;gap:.7rem;padding:.8rem 1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);font-weight:600;line-height:1.75;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);animation:mbin .35s ease-out} .mb-status[hidden]{display:none} .mb-status svg{width:1.4rem;height:1.4rem;flex:none;margin-top:.2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .mb-status.ok{color:#dcfce7;border-color:rgba(74,222,128,.6);background:rgba(34,197,94,.2)} .mb-status.err{color:#ffe4e8;border-color:rgba(255,107,138,.65);background:rgba(244,63,94,.2)} .mb-status.info{color:#fef3c7;border-color:rgba(251,191,36,.6);background:rgba(245,158,11,.18)} @keyframes mbin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.mb-send,.mailbox input,.mailbox textarea,.mailbox select{transition:none}.mb-send:hover{transform:none}.mb-status{animation:none}.mb-spin{animation-duration:1.6s}} @media (max-width:30rem){.mailbox{padding-inline:.85rem}} /* ===== حماية الشعارات: منع الحفظ والسحب والنسخ والطباعة ===== */ img,.brand svg,.bf-ar,.door .lg,.door .gl{pointer-events:none;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none} .shot,.shot img,#lb img{-webkit-touch-callout:none} @media print{#intro,.brand,.hero img,h1 img,.plogo,.shots,#lb{display:none!important}} /* ===== راسل المطوّر: عدّاد الأحرف، الموافقة، بدائل الإرسال ===== */ .mb-count{display:flex;justify-content:space-between;gap:.5rem;margin:0;font-size:.82rem;line-height:1.6;color:rgba(255,255,255,.75)} .mb-count.low{color:#ffd27a} .mb-count.ok{color:#bbf7d0} .mb-count bdi{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums} .mailbox .mb-agree{display:flex;align-items:flex-start;gap:.7rem;min-height:2.75rem;padding:.2rem 0;color:rgba(255,255,255,.92);font-weight:600;font-size:.93rem;line-height:1.8;cursor:pointer} .mb-agree input{flex:none;width:1.4rem;height:1.4rem;margin:.2rem 0 0;accent-color:#e11d48;cursor:pointer} .mb-agree input:focus-visible,.mb-agree a:focus-visible{outline:3px solid #fff;outline-offset:2px} .mb-agree a{color:#fff;font-weight:700;text-underline-offset:3px;border-radius:.25rem} .mb-alt{display:grid;gap:.6rem} .mb-alt[hidden]{display:none} .mb-alt p{margin:0;text-align:center;font-size:.88rem;line-height:1.7;color:rgba(255,255,255,.85)} .mb-alt-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem} .mb-alt a{display:flex;align-items:center;justify-content:center;min-height:3rem;padding:.5rem .75rem;border-radius:.9rem;border:1px solid rgba(255,255,255,.4);background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;text-align:center} .mb-alt a:hover{border-color:#fff} .mb-alt a:focus-visible{outline:3px solid #fff;outline-offset:2px} @media (max-width:26rem){.mb-alt-row{grid-template-columns:1fr}} .mb-status small{display:block;margin-top:.3rem;font-weight:400;font-size:.76rem;line-height:1.5;opacity:.8;direction:ltr;text-align:start;overflow-wrap:anywhere} /* ===== زر «قيد التطوير» + نافذة «قريبًا» ===== */ .proj .meta.soon{padding:0;border:0;border-radius:0} .soon-btn{font:inherit;font-size:.9rem;font-weight:700;line-height:2;display:inline-flex;align-items:center;gap:.55rem;padding:.4rem 1rem;border:1px solid var(--pop);border-radius:2rem;background:transparent;color:var(--pop);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s,transform .2s} .soon-btn:hover{background:var(--pop);color:var(--on);box-shadow:0 8px 18px -10px var(--pop);transform:translateY(-1px)} .soon-btn:active{transform:none} .soon-dot{position:relative;flex:none;width:.5rem;height:.5rem;border-radius:50%;background:currentColor} .soon-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:soonPing 1.9s cubic-bezier(0,0,.2,1) infinite} @keyframes soonPing{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.9);opacity:0}} html.soon-open{overflow:hidden} .soon-dlg{width:min(26rem,calc(100% - 2rem));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible} .soon-dlg::backdrop{background:radial-gradient(60% 55% at 50% 40%,rgba(22,119,184,.38),rgba(3,12,22,.8));} .soon-dlg[open]{animation:soonIn .45s cubic-bezier(.2,.9,.25,1.05) both} .soon-dlg[open]::backdrop{animation:soonFade .35s ease both} .soon-dlg.out{animation:soonOut .22s ease forwards} .soon-dlg.out::backdrop{animation:soonFadeOut .22s ease forwards} @keyframes soonIn{from{opacity:0;transform:translateY(1.6rem) scale(.92)}to{opacity:1;transform:none}} @keyframes soonOut{to{opacity:0;transform:translateY(.75rem) scale(.96)}} @keyframes soonFade{from{opacity:0}to{opacity:1}} @keyframes soonFadeOut{to{opacity:0}} .soon-card{position:relative;isolation:isolate;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow-x:hidden;overflow-y:auto;text-align:center;padding:2.75rem 1.5rem 1.5rem;border-radius:1.75rem;border:1px solid var(--line);background:linear-gradient(180deg,var(--card1),var(--card2));box-shadow:0 1px 0 var(--hi) inset,0 44px 90px -34px rgba(0,0,0,.65)} .soon-card::before{content:"";position:absolute;inset:-35% -25% auto;height:75%;z-index:-1;background:radial-gradient(closest-side,rgba(22,119,184,.24),transparent 72%),radial-gradient(closest-side at 78% 30%,rgba(225,29,72,.17),transparent 70%);pointer-events:none} .soon-card::after{content:"";position:absolute;top:0;left:50%;width:6rem;height:3px;margin-left:-3rem;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--accent),var(--pop))} .soon-x{position:absolute;top:.7rem;inset-inline-end:.7rem;z-index:3;width:2.75rem;height:2.75rem;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--chip);color:var(--ink);cursor:pointer;transition:border-color .2s,transform .25s} .soon-x:hover{border-color:var(--pop);transform:rotate(90deg)} .soon-x svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .soon-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .soon-art{position:relative;width:8rem;height:8rem;margin:0 auto 1.35rem;display:grid;place-items:center} .soon-ring{position:absolute;border-radius:50%;border:1px solid var(--accent);inset:0;opacity:.4;animation:soonPulse 3.2s ease-out infinite} .soon-ring.r2{inset:-1rem;border-color:var(--pop);opacity:.2;animation-delay:-1.6s} @keyframes soonPulse{0%{transform:scale(.88);opacity:.55}100%{transform:scale(1.12);opacity:0}} .soon-orbit{position:absolute;inset:.1rem;border-radius:50%;animation:soonSpin 9s linear infinite} .soon-orbit.o2{inset:-.9rem;animation-duration:14s;animation-direction:reverse} .soon-orbit i{position:absolute;top:-.28rem;left:50%;width:.56rem;height:.56rem;margin-left:-.28rem;border-radius:50%;background:var(--pop);box-shadow:0 0 14px var(--pop)} .soon-orbit.o2 i{background:var(--accent);box-shadow:0 0 14px var(--accent)} @keyframes soonSpin{to{transform:rotate(360deg)}} .soon-icon{position:relative;z-index:2;width:4.9rem;height:4.9rem;display:grid;place-items:center;border-radius:1.5rem;background:linear-gradient(135deg,var(--accent),var(--pop));box-shadow:0 20px 32px -14px rgba(225,29,72,.6),0 0 0 1px rgba(255,255,255,.28) inset,0 2px 0 rgba(255,255,255,.4) inset;animation:soonFloat 4.2s ease-in-out infinite} .soon-icon::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(140deg,rgba(255,255,255,.45),transparent 46%);pointer-events:none} .soon-icon svg{position:relative;width:2.9rem;height:2.9rem;fill:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.28))} .soon-star{transform-box:fill-box;transform-origin:center;animation:soonTwinkle 3s ease-in-out infinite} .soon-star.sm{animation-delay:-1.2s} @keyframes soonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-.4rem)}} @keyframes soonTwinkle{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.86);opacity:.8}} .soon-spark{position:absolute;z-index:1;width:.6rem;height:.6rem;background:var(--accent);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:soonTwinkle 2.6s ease-in-out infinite} .soon-spark.s1{top:4%;left:6%} .soon-spark.s2{top:14%;right:2%;background:var(--pop);animation-delay:-.8s;width:.8rem;height:.8rem} .soon-spark.s3{bottom:10%;left:0;background:var(--pop);animation-delay:-1.4s} .soon-spark.s4{bottom:2%;right:12%;animation-delay:-2s} .soon-badge{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 .75rem;padding:.1rem 1rem;border:1px solid var(--pop);border-radius:2rem;background:rgba(225,29,72,.07);color:var(--pop);font-size:.85rem;font-weight:700;line-height:2} .soon-card h2{margin:0 0 .5rem;font-family:"Aref Ruqaa Ink","Aref Ruqaa","Katibeh","Reem Kufi",serif;font-weight:700;font-size:clamp(1.65rem,6.5vw,2.1rem);line-height:1.6;color:var(--pop);text-wrap:balance} html:lang(en) .soon-card h2,html:lang(fr) .soon-card h2{font-family:"Dancing Script","Segoe Script","Brush Script MT",cursive;font-weight:600} .soon-p{margin:0 auto 1rem;max-width:21rem;color:var(--muted);font-size:1.05rem;line-height:1.95} .soon-stay{display:flex;align-items:center;justify-content:center;gap:.8rem;width:fit-content;margin:0 auto 1.5rem;font-size:1.25rem;font-weight:700;line-height:1.6;color:var(--accent);background:linear-gradient(90deg,var(--accent),var(--pop));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .soon-stay::before,.soon-stay::after{content:"";width:2.2rem;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--pop));-webkit-text-fill-color:initial} .soon-stay::after{background:linear-gradient(270deg,transparent,var(--accent))} .soon-ok{font:inherit;font-size:1.05rem;font-weight:700;width:100%;min-height:3.25rem;padding:.6rem 1.25rem;border:0;border-radius:1rem;background:linear-gradient(135deg,var(--accent),var(--pop));color:var(--on);cursor:pointer;box-shadow:0 14px 26px -14px var(--pop),0 1px 0 rgba(255,255,255,.35) inset;transition:transform .2s,box-shadow .2s,filter .2s} .soon-ok:hover{transform:translateY(-2px);filter:saturate(1.1) brightness(1.05)} .soon-ok:active{transform:none} .soon-ok:focus-visible,.soon-x:focus-visible{outline:3px solid var(--ink);outline-offset:3px} @media (forced-colors:active){.soon-stay{-webkit-text-fill-color:currentColor;background:none;color:CanvasText}.soon-ok{border:1px solid ButtonText}} @media (max-width:22rem){.soon-card{padding-inline:1rem}} @media (prefers-reduced-motion:reduce){.soon-dlg[open],.soon-dlg.out,.soon-dlg[open]::backdrop,.soon-dlg.out::backdrop,.soon-icon,.soon-star,.soon-ring,.soon-orbit,.soon-spark,.soon-dot::after,.soon-btn,.soon-x,.soon-ok{animation:none!important;transition:none!important}.soon-btn:hover,.soon-x:hover,.soon-ok:hover{transform:none}} /* ===== راسل المطوّر: شارة البريد وعلامة الحقول المطلوبة ===== */ .mb-badge{display:grid;place-items:center;width:3.25rem;height:3.25rem;margin:0 auto .5rem;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 8px 18px -8px rgba(0,0,0,.65),0 0 0 4px rgba(255,92,127,.22)} .mb-badge svg{width:1.6rem;height:1.6rem;fill:none;stroke:#e11d48;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #mbForm label[for="mb-name"]::after,#mbForm label[for="mb-email"]::after,#mbForm label[for="mb-subject"]::after,#mbForm label[for="mb-type"]::after,#mbForm label[for="mb-message"]::after{content:" *";color:#ff8fa8;font-weight:700} /* ===== آيات من القرآن الكريم (data/ayat_1000.json) — في الوسط بخط أميري قرآن ===== */ #ayat.ayat{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:1.6rem 1.1rem 1.3rem;border-radius:1.25rem;border:1px solid var(--cb);color:#fff;background:radial-gradient(circle at 12% 0,rgba(30,144,255,.5),transparent 45%),radial-gradient(circle at 92% 30%,rgba(225,29,72,.34),transparent 42%),radial-gradient(circle at 50% 112%,rgba(34,211,238,.28),transparent 52%),#06182c;box-shadow:0 20px 40px -24px rgba(6,24,44,.8)} #ayat>h2{color:#ff5c7f} .ay-fig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;max-width:36rem;min-height:10rem;margin:.9rem auto .25rem;transition:opacity .2s ease} .ay-fig.swap{opacity:0} .ay-q{margin:0;padding:0;font-family:"Amiri Quran","Scheherazade New","Noto Naskh Arabic","Amiri",serif;font-size:clamp(1.65rem,6.4vw,2.3rem);font-weight:400;line-height:2.4;word-spacing:.06em;color:#fff7e0;text-shadow:0 2px 18px rgba(251,191,36,.28);text-wrap:balance;text-rendering:optimizeLegibility} .ay-q::before{content:"\FD3F";margin-inline-end:.35em;color:#fbbf24} .ay-q::after{content:"\FD3E";margin-inline-start:.35em;color:#fbbf24} .ay-q.lg{font-size:clamp(1.4rem,5.3vw,1.9rem);line-height:2.35} .ay-q.xl{font-size:clamp(1.2rem,4.5vw,1.55rem);line-height:2.3;text-wrap:pretty} .ay-q.ay-st{font-family:inherit;font-size:1rem;line-height:1.9;color:rgba(255,255,255,.85);text-shadow:none} .ay-q.ay-st::before,.ay-q.ay-st::after{content:none} .ay-r{display:inline-flex;align-items:center;gap:.7rem;margin:0;font-family:"Aref Ruqaa Ink","Aref Ruqaa","Reem Kufi",serif;font-weight:700;font-size:1.15rem;line-height:1.7;color:#fbbf24} .ay-r:empty{display:none} .ay-r::before,.ay-r::after{content:"";width:2rem;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(251,191,36,.85))} .ay-r::after{background:linear-gradient(270deg,transparent,rgba(251,191,36,.85))} html:lang(en) .ay-r,html:lang(fr) .ay-r{font-family:"Reem Kufi","Segoe UI",sans-serif;font-weight:600;font-size:1rem} .ay-ctl{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.1rem} .ay-b{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:2.75rem;min-height:2.75rem;margin:0;padding:.4rem 1.05rem;font:inherit;font-size:.95rem;font-weight:700;color:#fff;cursor:pointer;border-radius:.9rem;border:1px solid rgba(255,255,255,.4);background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.07));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px -14px rgba(0,0,0,.7);transition:transform .2s,border-color .2s} .ay-b:hover{border-color:#fbbf24;transform:translateY(-2px)} .ay-b:focus-visible{outline:3px solid #fff;outline-offset:3px} .ay-rnd{border-color:rgba(255,255,255,.45);background:linear-gradient(135deg,#e11d48,#be123c);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 28px -14px #e11d48} .ay-b svg{width:1.1rem;height:1.1rem;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} [dir="rtl"] .ay-ico{transform:scaleX(-1)} .ay-src{margin:1rem 0 0;font-size:.78rem;line-height:1.7;color:rgba(255,255,255,.72)} .ay-src a{color:#fff;font-weight:700;text-underline-offset:3px} .ay-src a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:.25rem} @media (max-width:30rem){.ay-nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.ay-nav{padding-inline:.6rem}} @media (prefers-reduced-motion:reduce){.ay-fig,.ay-b{transition:none}.ay-b:hover{transform:none}} /* ===== ترقية الحجم: بطاقات التواصل ونموذج راسل المطوّر ===== */ #contact .links{ gap:.5rem; padding:.75rem; border-radius:1rem; } #contact .links a{ min-height:5.35rem; gap:.35rem; padding:.55rem .45rem; border-radius:.8rem; } #contact .links .ic{ width:2rem; height:2rem; } #contact .links .ic svg, #contact .links svg{ width:1.1rem; height:1.1rem; } #contact .links .tx b{ font-size:.88rem; line-height:1.35; } #contact .links .tx small{ margin-top:.05rem; font-size:.68rem; line-height:1.35; } #contact .mailbox{ margin-top:.75rem; padding:1rem .9rem .9rem; border-radius:1rem; } #contact .mb-badge{ width:2.35rem; height:2.35rem; margin-bottom:.35rem; box-shadow:0 5px 12px -7px rgba(0,0,0,.65),0 0 0 3px rgba(255,92,127,.18); } #contact .mb-badge svg{ width:1.2rem; height:1.2rem; } #contact .mb-h{ margin-bottom:.1rem; font-size:clamp(1.45rem,5vw,1.9rem); line-height:1.35; } #contact .mb-h::after{ height:2px; } #contact .mailbox .mb-sub{ max-width:28rem; margin:.35rem auto .75rem; font-size:.86rem; line-height:1.65; } #contact .mb-form{ gap:.65rem; } #contact .mb-row{ gap:.65rem; } #contact .mb-f{ gap:.2rem; } #contact .mb-f>label{ font-size:.85rem; line-height:1.5; } #contact .mailbox input[type=text], #contact .mailbox input[type=email], #contact .mailbox textarea, #contact .mailbox select{ min-height:2.75rem; padding:.45rem .75rem; font-size:.9rem; line-height:1.55; border-radius:.7rem; } #contact .mailbox textarea{ min-height:6.25rem; } #contact .mb-err{ font-size:.78rem; } #contact .mb-count{ font-size:.74rem; } #contact .mailbox .mb-agree{ gap:.55rem; min-height:2.35rem; font-size:.83rem; line-height:1.65; } #contact .mb-agree input{ width:1.2rem; height:1.2rem; } #contact .mailbox .mb-priv{ font-size:.78rem; line-height:1.65; } #contact .mb-send{ min-height:2.8rem; padding:.5rem .9rem; font-size:.93rem; border-radius:.75rem; } #contact .mb-alt{ gap:.45rem; } #contact .mb-alt p{ font-size:.8rem; } #contact .mb-alt-row{ gap:.45rem; } #contact .mb-alt a{ min-height:2.75rem; padding:.4rem .6rem; font-size:.86rem; border-radius:.7rem; } @media (max-width:36rem){ #contact .links{gap:.45rem;padding:.65rem} #contact .links a{min-height:5.5rem;padding:.5rem .35rem} #contact .links .tx b{font-size:.84rem} #contact .links .tx small{font-size:.66rem} #contact .mailbox{padding:.85rem .7rem .75rem} } @media (max-width:22rem){ #contact .links{gap:.35rem;padding:.5rem} #contact .links a{min-height:5.4rem;padding:.45rem .25rem} #contact .links .ic{width:1.8rem;height:1.8rem} #contact .links .tx b{font-size:.8rem} #contact .links .tx small{font-size:.62rem} } /* ===== NOXILIS DZ v7: PWA, quick actions and accessibility ===== */ [hidden]{display:none!important} .skip-link{position:fixed;z-index:1000;top:.6rem;inset-inline-start:.6rem;transform:translateY(-160%);padding:.5rem .9rem;border:2px solid var(--accent);border-radius:.65rem;background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;box-shadow:0 8px 24px var(--shk);transition:transform .16s ease} .skip-link:focus{transform:translateY(0);outline:3px solid var(--pop);outline-offset:2px} #top:focus{outline:2px solid var(--accent);outline-offset:3px}#top:focus:not(:focus-visible){outline:none} .pwa-install{display:inline-flex;align-items:center;justify-content:center;gap:.35rem} .pwa-install svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pwa-install span{white-space:nowrap} .network-banner{width:min(44rem,calc(100% - 2rem));margin:.55rem auto 0;padding:.45rem .8rem;display:flex;align-items:center;justify-content:center;gap:.55rem;border:1px solid var(--line);border-radius:.8rem;background:var(--chip);color:var(--muted);font-size:.82rem;line-height:1.6;text-align:center;box-shadow:0 5px 15px -14px var(--shk)} .network-banner[hidden]{display:none!important} .network-dot{width:.48rem;height:.48rem;flex:none;border-radius:50%;background:var(--pop);box-shadow:0 0 0 .2rem var(--tintB)} .utility-dock{position:fixed;z-index:45;inset-inline-end:max(.75rem,env(safe-area-inset-right,0px));bottom:calc(.85rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.45rem;align-items:center} .utility-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;width:2.8rem;height:2.8rem;padding:0;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--surface) 91%,transparent);color:var(--ink);box-shadow:0 8px 25px -12px var(--shk);cursor:pointer;transition:transform .18s ease,border-color .18s ease} .utility-btn svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .utility-btn:hover{transform:translateY(-2px);border-color:var(--accent)} .utility-btn:focus-visible{outline:3px solid var(--pop);outline-offset:3px} .utility-btn[hidden]{display:none!important} @media(max-width:26rem){.pwa-install{min-width:2.5rem!important;min-height:2.5rem!important;padding:0 .45rem!important}.pwa-install span{font-size:.78rem}.utility-dock{inset-inline-end:.45rem;bottom:calc(.55rem + env(safe-area-inset-bottom,0px))}.utility-btn{width:2.55rem;height:2.55rem}} @media(prefers-reduced-motion:reduce){.skip-link,.utility-btn{transition:none}.utility-btn:hover{transform:none}} /* Version number and release notes */ .site-version-line{margin:.55rem 0 0!important;text-align:center} .site-version-trigger{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:999px;padding:.42rem .8rem;background:var(--chip);color:var(--muted);font:inherit;font-size:.78rem;line-height:1.5;cursor:pointer;transition:color .18s ease,border-color .18s ease,background .18s ease} .site-version-trigger:hover,.site-version-trigger:focus-visible{color:var(--ink);border-color:var(--accent);outline:none} .site-version-trigger:focus-visible{box-shadow:0 0 0 3px var(--tintB)} .site-version-dialog{width:min( min(92vw, 34rem), calc(100% - 2rem));max-height:min(82vh,42rem);padding:0;border:1px solid var(--line);border-radius:1.2rem;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px -24px var(--shk)} .site-version-dialog::backdrop{background:rgba(7,12,24,.58);} .site-version-panel{position:relative;padding:1.5rem;overflow:auto;max-height:min(82vh,42rem)} .site-version-close{position:absolute;inset-block-start:.7rem;inset-inline-end:.7rem;width:2.25rem;height:2.25rem;border:1px solid var(--line);border-radius:50%;background:var(--chip);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer} .site-version-panel h2{margin:0 2.4rem .4rem 0;font-size:1.25rem;line-height:1.5} .site-version-current{margin:.35rem 0 1rem;color:var(--accent);font-weight:800} .site-version-notes{margin:0;padding-inline-start:1.35rem;line-height:1.9} .site-version-notes li{padding-inline-start:.2rem;margin:.35rem 0} @media(prefers-reduced-motion:reduce){.site-version-trigger{transition:none}} /* NOXILIS DZ v7.5.0 — MUSHAFI liquid RGB + release notice */ /* v7.6 — compact MUSHAFI card */ #mushafi-project.mushafi-liquid-card{padding:clamp(12px,2.5vw,19px)!important;min-height:0!important;gap:8px!important;overflow:hidden} #mushafi-project.mushafi-liquid-card h3{font-size:clamp(1.05rem,3.5vw,1.35rem)!important;margin:0 0 4px!important;letter-spacing:.08em} #mushafi-project.mushafi-liquid-card p{font-size:.88rem!important;line-height:1.55!important;margin:4px 0!important} #mushafi-project .mushafi-liquid-status{min-height:34px!important;padding:6px 12px!important;font-size:.82rem!important;border-radius:999px!important} #mushafi-project .mushafi-liquid-aura{opacity:.6!important} /* Cartoon-inspired release history panel */ .site-version-dialog{border:0;padding:0;background:transparent;max-width:min(92vw,520px);width:100%;overflow:visible;color:#f7fff9} .site-version-dialog::backdrop{background:rgba(2,12,20,.72);} .site-version-panel{position:relative;overflow:hidden;padding:24px 20px 20px;border:2px solid #8cf7d7;border-radius:28px;background:radial-gradient(circle at 15% 10%,#f6caff38,transparent 32%),radial-gradient(circle at 90% 0%,#76ffe73b,transparent 35%),linear-gradient(145deg,#112d35,#111b35 65%,#251943);box-shadow:0 18px 65px #0008,inset 0 0 0 5px #ffffff09} .site-version-panel:before{content:'✦ ✧ ✦';position:absolute;top:8px;left:14px;color:#ffe58b;font-size:20px;transform:rotate(-8deg)} .site-version-panel h2{font-size:clamp(1.2rem,4vw,1.65rem);text-align:center;margin:18px 0 8px;color:#b7ffe9;text-shadow:0 2px 0 #113b41} .site-version-panel h2:before{content:'🚀 ';} .site-version-current{width:max-content;max-width:100%;margin:0 auto 14px;padding:6px 13px;border:1px solid #f6d68c;border-radius:999px;background:#f6d68c18;color:#ffe7a4;font-weight:800} .site-version-notes{list-style:none;padding:0;margin:0;display:grid;gap:9px} .site-version-notes li{position:relative;padding:10px 38px 10px 12px;border:1px solid #b5f8e52b;border-radius:16px;background:linear-gradient(100deg,#c2fff00c,#ffffff08);line-height:1.7;font-size:.91rem} .site-version-notes li:before{content:'✓';position:absolute;right:10px;top:10px;width:21px;height:21px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(135deg,#72f4cb,#b5a2ff);color:#122b35;font-weight:900} .site-version-close{position:absolute;z-index:2;top:10px;right:10px;width:35px;height:35px;border:1px solid #ffffff40;border-radius:12px;background:#ffffff15;color:#fff;font-size:25px;cursor:pointer} .site-version-panel:after{content:'✧';position:absolute;bottom:4px;left:12px;color:#a5f9e7;font-size:32px;pointer-events:none} /* Prayer notification opt-in */ .prayer-alert-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:12px auto 0;padding:11px 13px;max-width:460px;border:1px solid #5eead477;border-radius:18px;background:linear-gradient(135deg,#0d94881c,#818cf81a);color:inherit;font-size:.88rem} .prayer-alert-card .prayer-alert-icon{font-size:1.45rem;line-height:1} .prayer-alert-card p{margin:0;flex:1;min-width:150px;line-height:1.5} .prayer-alert-card button{border:1px solid #73e8d5;border-radius:12px;padding:8px 12px;background:linear-gradient(120deg,#34d39935,#818cf835);color:inherit;font:inherit;font-weight:800;cursor:pointer} .prayer-alert-card button:disabled{opacity:.65;cursor:default} .prayer-alert-status{flex-basis:100%;font-size:.78rem;opacity:.82;text-align:center} @media(prefers-reduced-motion:reduce){.site-version-panel *{scroll-behavior:auto!important}} /* v7.7 clean MUSHAFI card, cartoon update history, and in-page prayer reminder */ #mushafi-project.mushafi-card{padding:clamp(12px,2.5vw,18px)!important;min-height:0!important;gap:8px!important;border:1px solid var(--line)!important;border-radius:20px!important;background:var(--surface)!important;box-shadow:0 8px 26px rgba(0,0,0,.08)!important;animation:none!important;} #mushafi-project h3{font-size:clamp(1.05rem,3.5vw,1.32rem)!important;margin:0 0 4px!important;letter-spacing:.04em} #mushafi-project p{font-size:.88rem!important;line-height:1.55!important;margin:4px 0!important} #mushafi-project .mushafi-status{min-height:32px!important;padding:6px 12px!important;font-size:.82rem!important;border-radius:999px!important;box-shadow:none!important;animation:none!important} .mushafi-liquid-aura,.mushafi-status-shine{display:none!important} /* The dialog's top layer prevents background interaction; this also prevents page scroll behind it. */ body:has(dialog[open]){overflow:hidden!important;overscroll-behavior:none} .site-version-dialog[open]{position:fixed;inset:0;margin:auto;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y} .site-version-panel{max-height:none!important;overflow:visible!important} .site-update-notice[open]{position:fixed;inset:0;margin:auto;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y} .site-update-panel{max-height:none!important;overflow:visible!important} .prayer-inpage-reminder{position:fixed;z-index:99999;inset:auto 12px 16px;margin:0 auto;width:min(560px,calc(100vw - 24px));box-sizing:border-box;padding:20px 18px 16px;border:1px solid #69d8b6;border-radius:24px;background:linear-gradient(145deg,#f2fff9,#e4f8ef 58%,#f4f0ff);color:#15382d;box-shadow:0 18px 60px #001d1840;font-family:inherit;animation:prayerReminderIn .35s ease-out} .prayer-inpage-icon{display:grid;place-items:center;width:46px;height:46px;margin-bottom:8px;border-radius:16px;background:#d2f4e5;font-size:25px} .prayer-inpage-reminder strong{display:block;font-size:1.1rem;font-weight:900;color:#087653;margin:0 0 6px} .prayer-inpage-reminder p{margin:0 0 12px;line-height:1.65} .prayer-inpage-reminder blockquote{margin:0;padding:12px 14px;border-right:3px solid #15966c;border-radius:12px;background:#ffffffa8;font-size:.95rem;line-height:2;text-align:right} .prayer-inpage-reminder small{display:block;margin-top:7px;color:#4d7668;font-weight:800} .prayer-inpage-close{position:absolute;left:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:#d8efe5;color:#14513c;font-size:25px;line-height:1;cursor:pointer} @keyframes prayerReminderIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){.prayer-inpage-reminder{animation:none}} /* NOXILIS 7.8 — ساعة أنيقة وبطاقات مضغوطة وواجهة قراءة كاملة */ .now{gap:.18rem;margin:0 auto .8rem;padding:.3rem .5rem .45rem} .now .day{order:2;margin:.08rem 0 0;font-size:clamp(1.15rem,5.1vw,1.75rem);line-height:1.35;letter-spacing:.035em;text-shadow:0 2px 16px color-mix(in srgb,var(--pop) 18%,transparent)} .clock{order:0;gap:.12rem;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace;font-size:clamp(1.45rem,6.3vw,2.15rem);font-weight:800;letter-spacing:.035em} .clock .t{min-width:2.1ch;padding:.08em .12em;border:0;border-radius:.35rem;background:transparent;box-shadow:none;color:var(--ink);font-variant-numeric:tabular-nums} .clock .s{color:var(--pop)}.clock i{font-size:.8em;opacity:.65} .clock-zone{order:1;margin:0;color:var(--muted);font-family:"Reem Kufi",sans-serif;font-size:.68rem;letter-spacing:.04em} .dates{order:3;margin:.05rem 0 0;gap:0;font-size:.7rem;line-height:1.5}.dates b{font-size:.72rem}.dates span{font-size:.67rem} /* Remove all animated RGB/liquid effects from prayer and adhkar cards */ .pray,.adhkar-widget{animation:none!important;background:var(--surface)!important;background-image:none!important;border:1px solid var(--line)!important;box-shadow:0 5px 18px -16px var(--shk)!important;} .pray:before,.pray:after,.adhkar-widget:before,.adhkar-widget:after{content:none!important;display:none!important;animation:none!important} .adhkar-widget{max-width:29rem;margin:0 auto .55rem;padding:.35rem .55rem .4rem;border-radius:.8rem!important;overflow:visible} .adhkar-heading-wrap{margin:0 auto .12rem}.adhkar-flourish{font-size:.65rem;line-height:1}.adhkar-widget .adhkar-heading-wrap h2{font-size:.9rem;line-height:1.3}.adhkar-widget .adhkar-heading-wrap h2:after{margin-top:.08rem} .adhkar-content{margin:.22rem 0 .3rem;padding:.28rem .45rem .3rem;border-radius:.6rem}.adhkar-category{font-size:.62rem}.adhkar-name{font-size:.75rem;line-height:1.35}.adhkar-text{max-height:3.3rem;font-size:.91rem;line-height:1.7;overscroll-behavior:contain}.adhkar-meta{font-size:.59rem;margin-top:.1rem;gap:.05rem .35rem}.adhkar-actions{gap:.25rem}.adhkar-btn{min-height:1.65rem;padding:.18rem .58rem;font-size:.7rem}.adhkar-feedback{min-height:0;font-size:.62rem;margin:0}.adhkar-read-full{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;margin:.22rem auto 0;min-height:1.55rem;padding:.15rem .65rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--pop) 9%,var(--surface));color:var(--ink);font:inherit;font-size:.68rem;font-weight:800;cursor:pointer}.adhkar-read-full span{color:var(--pop)} .adhkar-reader{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:contain} .adhkar-reader::backdrop{background:rgba(2,12,20,.72);} .adhkar-reader[open]{display:flex;flex-direction:column} .adhkar-reader-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(env(safe-area-inset-top) + .8rem) 1rem .75rem;border-bottom:1px solid var(--line);background:var(--surface);flex:none} .reader-kicker{font-family:"Reem Kufi",sans-serif;font-size:.8rem;color:var(--pop);font-weight:800}.reader-close{width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:50%;background:var(--card2);color:var(--ink);font-size:1.65rem;line-height:1;cursor:pointer} .adhkar-reader-body{width:min(100%,48rem);margin:0 auto;padding:1.25rem 1rem 2rem;overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0;-webkit-overflow-scrolling:touch} .reader-category{margin:0 0 .45rem;color:var(--pop);font-size:.78rem;font-weight:800}.adhkar-reader-body h2{margin:0 0 1.25rem;font-family:"Reem Kufi",sans-serif;font-size:clamp(1.2rem,4.8vw,1.8rem);line-height:1.5}.reader-text{margin:0;padding:1rem .85rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface);font-family:"Amiri Quran","Aref Ruqaa Ink",serif;font-size:clamp(1.35rem,5.3vw,2rem);line-height:2.15;white-space:pre-wrap;overflow-wrap:anywhere;text-align:justify}.reader-source,.reader-repeat{font-size:.82rem;line-height:1.8;color:var(--muted);overflow-wrap:anywhere}.reader-source{margin:1rem 0 .2rem}.reader-repeat{margin:.2rem 0 0}.adhkar-reader-actions{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;padding:.7rem 1rem calc(env(safe-area-inset-bottom) + .8rem);border-top:1px solid var(--line);background:var(--surface);flex:none} html.reader-open,body.reader-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none} @media(max-width:28rem){.adhkar-widget{margin-inline:.05rem;padding:.3rem .4rem .35rem}.adhkar-text{max-height:3rem;font-size:.86rem}.adhkar-read-full{font-size:.65rem}.clock{font-size:1.55rem}.now .day{font-size:1.2rem}} /* NOXILIS v7.9 — clock, weekday and dates promoted to the very top */ .top-clock-panel{width:100%;margin:0 auto 1rem;padding:.85rem .75rem 1rem;display:flex;justify-content:center;border:1px solid var(--line);border-radius:1.35rem;background:var(--surface);box-shadow:0 12px 30px -25px var(--shk)} .top-clock-panel .now{width:100%;gap:.35rem;margin:0 auto;padding:.25rem .25rem .35rem} .top-clock-panel .clock{order:0;gap:.14em;font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-size:clamp(2.5rem,12vw,4.6rem);font-weight:800;letter-spacing:.015em;line-height:1.15} .top-clock-panel .clock .t{min-width:2.05ch;padding:.02em .07em;border-radius:.25em;background:transparent;border:0;box-shadow:none;color:var(--ink);font-variant-numeric:tabular-nums} .top-clock-panel .clock .s{color:var(--pop)} .top-clock-panel .clock-zone{order:1;font-size:clamp(.8rem,2.8vw,1rem);font-weight:700;letter-spacing:.025em;margin:.05rem 0 .25rem} .top-clock-panel .now .day{order:2;margin:.05rem 0;font-size:clamp(1.8rem,7.5vw,2.8rem);line-height:1.45;letter-spacing:.06em;font-weight:800} .top-clock-panel .dates{order:3;display:flex;flex-direction:column;gap:.18rem;align-items:center;margin:.2rem 0 .35rem;font-size:clamp(.95rem,3.4vw,1.2rem);line-height:1.7} .top-clock-panel .dates b{font-size:1.08em;color:var(--ink);font-weight:800} .top-clock-panel .dates span{font-size:1em;color:var(--muted);font-weight:650} .top-clock-panel .pray{width:min(100%,28rem);margin:.45rem auto 0;padding:.65rem .85rem;border-radius:1rem!important} .prayer-alert-card{display:none!important} @media(max-width:28rem){.top-clock-panel{padding:.65rem .4rem .8rem;border-radius:1rem}.top-clock-panel .clock{font-size:clamp(2.25rem,12vw,3.2rem)}.top-clock-panel .now .day{font-size:clamp(1.65rem,8vw,2.1rem)}.top-clock-panel .dates{font-size:.95rem}} /* NOXILIS v7.10 — flag labels and Abdelillah-inspired date typography */ .ctrl .langs{display:flex;align-items:stretch;gap:.4rem} .ctrl .langs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;min-width:3.15rem;min-height:3.2rem;padding:.3rem .5rem;border-radius:.7rem;line-height:1.1;font-weight:800} .lang-label{display:block;font-size:.88rem;letter-spacing:.035em} .lang-flag{display:block;font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif;font-size:1.15rem;line-height:1.1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))} .top-clock-panel .now .day{font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-weight:900;letter-spacing:0;text-shadow:0 2px 0 color-mix(in srgb,var(--pop) 13%,transparent),0 7px 22px color-mix(in srgb,var(--accent) 15%,transparent)} .top-clock-panel .dates{width:min(100%,32rem);gap:.3rem;margin:.35rem auto .45rem;font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-weight:800} .top-clock-panel .dates b,.top-clock-panel .dates span{display:block;width:100%;padding:.24rem .75rem;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:.65rem;background:color-mix(in srgb,var(--bg) 62%,var(--surface));font-size:clamp(.95rem,3.5vw,1.16rem);line-height:1.8;text-align:center;text-shadow:0 1px 0 color-mix(in srgb,var(--pop) 10%,transparent)} .top-clock-panel .dates b{color:var(--ink)} .top-clock-panel .dates span{color:var(--muted)} @media(max-width:28rem){.ctrl .langs{gap:.25rem}.ctrl .langs button{min-width:2.65rem;min-height:2.9rem;padding:.25rem .35rem}.lang-flag{font-size:1.05rem}.top-clock-panel .now .day{font-size:clamp(1.7rem,8.5vw,2.25rem)}.top-clock-panel .dates b,.top-clock-panel .dates span{padding:.2rem .35rem;font-size:.92rem}} /* NOXILIS DZ v7.11: swipeable image viewer and richer About section */ #about p{max-width:48rem} #about p[data-i18n="about3"],#about p[data-i18n="about4"],#about p[data-i18n="about5"],#about p[data-i18n="about6"]{margin-top:.8rem} body.lb-open{overflow:hidden;overscroll-behavior:none} #lb{touch-action:pan-y;gap:.5rem} #lb img{max-width:min(78vw,900px);max-height:86vh;object-fit:contain;touch-action:pan-y;user-select:none;-webkit-user-select:none} .lb-nav,.lb-close{position:absolute;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);color:#fff;background:rgba(12,24,32,.72);cursor:pointer;z-index:2;min-width:44px;min-height:44px;border-radius:999px;font:inherit;font-size:2rem;line-height:1} .lb-nav:disabled{opacity:.4} .lb-prev{left:max(1rem,env(safe-area-inset-left))} .lb-next{right:max(1rem,env(safe-area-inset-right))} .lb-close{top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));font-size:1.8rem} .lb-counter{position:absolute;bottom:max(1rem,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:.45rem .85rem;border-radius:999px;background:rgba(12,24,32,.72);color:#fff;font:600 .9rem/1.2 system-ui,sans-serif} @media(max-width:520px){#lb{padding:.5rem}#lb img{max-width:calc(100vw - 5rem);max-height:80vh}.lb-prev{left:.4rem}.lb-next{right:.4rem}} /* v7.12 — prayer time moment + compact prayer learning */ .prayer-learning{margin:1rem auto 1.25rem;padding:1rem;border:1px solid var(--line);border-radius:1.25rem;background:var(--surface);box-shadow:0 12px 30px -25px var(--shk)} .prayer-learning-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.8rem}.prayer-learning-head>span{display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:.9rem;background:color-mix(in srgb,var(--pop) 13%,var(--surface));color:var(--pop);font-size:1.7rem}.prayer-learning-head h2{margin:0;font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-size:1.25rem}.prayer-learning-head p{margin:.15rem 0 0;color:var(--muted);font-size:.84rem}.prayer-learning-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}.prayer-lesson{display:flex;min-width:0;flex-direction:column;align-items:center;gap:.25rem;padding:.7rem .25rem;border:1px solid var(--line);border-radius:.9rem;background:var(--card2);color:var(--ink);font:inherit;cursor:pointer;transition:transform .18s,border-color .18s}.prayer-lesson:active{transform:scale(.97)}.prayer-lesson>span{font-size:1.3rem}.prayer-lesson b{font-size:.92rem}.prayer-lesson small{font-size:.7rem;color:var(--muted);text-align:center;line-height:1.5}.prayer-learning-note{margin:.75rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.7} .prayer-stage-overlay{position:fixed;inset:0;z-index:100100;display:flex;align-items:flex-end;justify-content:center;padding:1rem;padding-bottom:calc(env(safe-area-inset-bottom) + 1rem);background:rgba(3,19,16,.45);animation:prayerOverlayFade .35s ease-out}.prayer-stage-card{position:relative;width:min(100%,38rem);max-height:90dvh;overflow:auto;padding:1.5rem 1.15rem 1.35rem;border:1px solid #a6e6ce;border-radius:1.6rem;background:linear-gradient(150deg,#f4fff9,#e5f8ee 60%,#f5f2ff);color:#153b2e;text-align:center;box-shadow:0 24px 80px #001a1645;animation:prayerRise .65s cubic-bezier(.2,.75,.2,1)}.prayer-stage-close{position:absolute;left:.75rem;top:.75rem;width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:#d8efe5;color:#14513c;font-size:1.6rem;cursor:pointer}.prayer-stage-icon{display:grid;place-items:center;width:4rem;height:4rem;margin:0 auto .6rem;border-radius:1.3rem;background:#d7f4e6;font-size:2rem}.prayer-stage-kicker{margin:0 0 .3rem;color:#17805c;font-size:.83rem;font-weight:900}.prayer-stage-card h2{margin:.1rem 0 .55rem;font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-size:clamp(1.35rem,5vw,1.9rem);line-height:1.65}.prayer-stage-body{margin:.4rem 0 .8rem;line-height:1.9}.prayer-stage-arabic{margin:.7rem 0;padding:1rem .8rem;border:1px solid #c3e7d6;border-radius:1rem;background:#ffffffb8;font-family:"Amiri Quran","Amiri",serif;font-size:clamp(1.25rem,4.8vw,1.65rem);line-height:2;text-align:center}.prayer-stage-foot{margin:.6rem 0 0;color:#52776a;font-size:.8rem;line-height:1.7}.prayer-stage-action{margin-top:.85rem;padding:.75rem 1.2rem;border:0;border-radius:1rem;background:#147b59;color:#fff;font:inherit;font-weight:850;cursor:pointer}.prayer-lesson-dialog{position:fixed;inset:0;z-index:100110;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--ink);overflow:hidden}.prayer-lesson-dialog::backdrop{background:rgba(1,14,12,.72);}.prayer-lesson-dialog[open]{display:flex;flex-direction:column}.prayer-lesson-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(env(safe-area-inset-top) + .8rem) 1rem .75rem;background:var(--surface);border-bottom:1px solid var(--line)}.prayer-lesson-head h2{margin:0;font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-size:1.25rem}.prayer-lesson-body{width:min(100%,46rem);margin:0 auto;padding:1rem;overflow-y:auto;overscroll-behavior:contain;flex:1;line-height:1.9}.prayer-lesson-body h3{font-size:1rem;color:var(--pop);margin:1.1rem 0 .3rem}.prayer-lesson-body p,.prayer-lesson-body li{line-height:2}.prayer-lesson-body ul,.prayer-lesson-body ol{padding-right:1.35rem}.prayer-lesson-close{width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:50%;background:var(--card2);color:var(--ink);font-size:1.6rem;cursor:pointer} html.prayer-stage-open,body.prayer-stage-open,html.prayer-lesson-open,body.prayer-lesson-open{overflow:hidden!important;overscroll-behavior:none!important} @keyframes prayerRise{from{opacity:0;transform:translateY(100px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes prayerOverlayFade{from{opacity:0}to{opacity:1}} @media(max-width:32rem){.prayer-learning{padding:.75rem}.prayer-learning-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.prayer-lesson small{font-size:.72rem}.prayer-stage-card{padding:1.25rem .85rem 1rem;border-radius:1.3rem}} @media(prefers-reduced-motion:reduce){.prayer-stage-overlay,.prayer-stage-card{animation:none}.prayer-lesson{transition:none}} /* v7.13.0 — MUSHAFI coming-soon announcement */ #mushafi-project .mushafi-coming-soon{display:flex;align-items:flex-start;gap:.85rem;margin:.7rem 0;padding:1rem;border:1px solid rgba(28,150,108,.28);border-radius:1.1rem;background:linear-gradient(135deg,rgba(19,128,91,.09),rgba(213,179,93,.09));text-align:right} #mushafi-project .mushafi-coming-icon{display:grid;place-items:center;flex:0 0 2.65rem;width:2.65rem;height:2.65rem;border-radius:.85rem;background:rgba(25,128,91,.13);color:var(--accent);font-size:1.8rem} #mushafi-project .mushafi-coming-soon strong{display:block;margin:0 0 .25rem;color:var(--accent);font-weight:900} #mushafi-project .mushafi-coming-soon p{margin:.2rem 0 .45rem;line-height:1.85} #mushafi-project .mushafi-coming-soon small{display:inline-block;font-size:.78rem;font-weight:800;opacity:.8} .prayer-stage-arabic{white-space:pre-line;overflow-wrap:anywhere} .site-update-version{display:inline-block;margin:.2rem 0 .6rem;padding:.4rem .7rem;border-radius:999px;background:rgba(20,123,89,.12);font-weight:850} @media(max-width:420px){#mushafi-project .mushafi-coming-soon{gap:.6rem;padding:.8rem}#mushafi-project .mushafi-coming-icon{flex-basis:2.2rem;width:2.2rem;height:2.2rem}} /* v7.14 — Services ribbon and richer learning surfaces */ .services-strip{margin:1rem auto 1.1rem;padding:1rem;border:1px solid var(--line);border-radius:1.25rem;background:linear-gradient(130deg,color-mix(in srgb,var(--pop) 7%,var(--surface)),var(--surface) 62%,color-mix(in srgb,#c5a45a 8%,var(--surface)));box-shadow:0 12px 30px -26px var(--shk)} .services-strip-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem}.services-mark{display:grid;place-items:center;flex:0 0 2.65rem;height:2.65rem;border-radius:.9rem;background:color-mix(in srgb,var(--pop) 13%,var(--surface));color:var(--pop);font-size:1.55rem}.services-strip-head h2{margin:0;font-family:"Reem Kufi","Noto Kufi Arabic",sans-serif;font-size:1.2rem}.services-strip-head p{margin:.12rem 0 0;color:var(--muted);font-size:.8rem} .services-strip-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.service-chip{display:flex;align-items:center;gap:.7rem;min-width:0;padding:.8rem;border:1px solid var(--line);border-radius:1rem;background:var(--card2);color:var(--ink);text-decoration:none;transition:transform .18s,border-color .18s,background .18s}.service-chip:focus-visible{outline:3px solid var(--pop);outline-offset:3px}.service-chip:active{transform:scale(.985)}.service-chip>span:first-child{display:grid;place-items:center;flex:0 0 2.5rem;height:2.5rem;border-radius:.8rem;background:color-mix(in srgb,var(--pop) 11%,var(--surface));font-size:1.35rem}.service-chip>span:nth-child(2){display:flex;flex:1;flex-direction:column;gap:.2rem;min-width:0}.service-chip b{font-size:.9rem;line-height:1.5}.service-chip small{font-size:.72rem;line-height:1.65;color:var(--muted)}.service-arrow{font-size:1.1rem;color:var(--pop)}.service-soon-pill{font-size:.68rem;font-weight:800;white-space:nowrap;padding:.25rem .45rem;border-radius:999px;background:color-mix(in srgb,#c5a45a 17%,var(--surface));color:var(--ink)}.service-coming{cursor:default}.service-chip:hover{border-color:color-mix(in srgb,var(--pop) 45%,var(--line))} .mushafi-roadmap{margin:.5rem 0;padding-inline-start:1.2rem;line-height:1.9}.mushafi-roadmap li::marker{color:var(--accent)} .prayer-lesson-dialog .prayer-lesson-body h3{margin-top:1.15rem}.lesson-steps{display:grid;gap:.6rem;list-style:none;padding:0;margin:.7rem 0}.lesson-steps li{padding:.7rem .8rem;border:1px solid var(--line);border-radius:.8rem;background:var(--card2);line-height:1.8}.lesson-step-number{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;margin-inline-end:.35rem;border-radius:50%;background:color-mix(in srgb,var(--pop) 14%,var(--surface));color:var(--pop);font-weight:900}.lesson-copy{display:inline-flex;align-items:center;justify-content:center;margin:.3rem 0;padding:.45rem .7rem;border:1px solid var(--line);border-radius:.65rem;background:var(--surface);color:var(--ink);font:inherit;font-size:.82rem;cursor:pointer}.lesson-copy:focus-visible{outline:2px solid var(--pop);outline-offset:2px}.lesson-tip{padding:.8rem;border-inline-start:3px solid var(--pop);background:color-mix(in srgb,var(--pop) 6%,var(--surface));border-radius:.5rem;line-height:1.8} @media(max-width:42rem){.services-strip{padding:.8rem}.services-strip-items{grid-template-columns:1fr;gap:.5rem}.service-chip{padding:.7rem}.service-chip small{font-size:.75rem}.services-strip-head h2{font-size:1.1rem}} /* v7.16.0 — polished, cleaner layout without removing existing sections or features */ :root{--bg:#f2f7f5;--surface:#ffffff;--ink:#142d2a;--muted:#607773;--accent:#087f63;--line:#d8e7e1;--card1:#fff;--card2:#f6faf8;--chip:#f0f7f3;--tintA:rgba(8,127,99,.08);--tintB:rgba(197,164,90,.07);--shc:rgba(13,91,71,.14);--shk:rgba(13,91,71,.12)} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#091714;--surface:#10231e;--ink:#e6f4ee;--muted:#a6c1b6;--accent:#59c5a1;--line:#29483e;--card1:#142a24;--card2:#0d201a;--chip:#18352b;--tintA:rgba(89,197,161,.1);--tintB:rgba(197,164,90,.06)}} :root[data-theme="dark"]{--bg:#091714;--surface:#10231e;--ink:#e6f4ee;--muted:#a6c1b6;--accent:#59c5a1;--line:#29483e;--card1:#142a24;--card2:#0d201a;--chip:#18352b;--tintA:rgba(89,197,161,.1);--tintB:rgba(197,164,90,.06)} html{scroll-behavior:smooth;scroll-padding-top:5rem} body{line-height:1.85;letter-spacing:0; background-image:radial-gradient(ellipse at 4% 0%,rgba(8,127,99,.055),transparent 36%),radial-gradient(ellipse at 100% 25%,rgba(197,164,90,.05),transparent 30%)} .wrap{max-width:49rem;padding-inline:clamp(1rem,3.5vw,1.6rem)} header{position:relative;z-index:50;background:color-mix(in srgb,var(--surface) 91%,transparent);border-bottom:1px solid var(--line);box-shadow:0 5px 24px rgba(14,48,38,.045)} header .wrap{min-height:4.5rem;gap:.6rem 1rem;padding-block:.35rem} .brand{margin:.25rem 0} .ctrl{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.45rem} .ctrl button{border-radius:.85rem!important;transition:transform .18s ease,border-color .18s ease,background .18s ease;} .ctrl button:hover{transform:translateY(-1px);border-color:var(--accent)} .langs{gap:.35rem} .langs button{min-width:3.15rem!important;min-height:3rem!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;padding:.25rem .45rem!important;line-height:1.2} .langs .lang-label{font-size:.78rem;font-weight:800}.langs .lang-flag{font-size:.95rem;line-height:1.1} main.wrap{padding-top:.55rem;padding-bottom:2rem} section{border:1px solid var(--line);border-radius:1.15rem;padding:clamp(1rem,3vw,1.45rem);margin-block:1rem;background:var(--surface);box-shadow:0 10px 32px -28px rgba(10,65,49,.42)} .hero{padding:clamp(1.3rem,4vw,2.25rem) 1rem 1.2rem} .hero .cal{margin-bottom:.85rem} .role{font-size:clamp(1rem,2.4vw,1.18rem);font-weight:650;line-height:1.8} .loc{font-size:.92rem} h2{font-size:clamp(1.2rem,3vw,1.45rem);letter-spacing:0;margin-bottom:.8rem} section p{line-height:1.95} #about p{margin-block:.45rem .8rem;max-width:70ch} #about p:last-child{margin-bottom:0} #projects .proj{padding-block:1rem;border-top:1px solid var(--line)} #projects .proj:first-of-type{padding-top:.3rem} .phead{gap:.85rem} .plogo{border-radius:1rem;box-shadow:0 6px 20px rgba(0,0,0,.08)} .shots{gap:.65rem;margin-top:.8rem} .shot{border-radius:.9rem;overflow:hidden;border:1px solid var(--line);background:var(--card2);box-shadow:0 6px 20px rgba(0,0,0,.055)} .shot img{transition:transform .25s ease}.shot:hover img{transform:scale(1.025)} .shotcap{font-size:.82rem;color:var(--muted)} #tech dl dd{display:flex;flex-wrap:wrap;gap:.45rem;margin:.35rem 0 .8rem} #tech dl dd span{border:1px solid var(--line);border-radius:999px;padding:.2rem .7rem;background:var(--card2);font-size:.86rem;font-weight:700} .links{gap:.6rem} .links a{border-radius:.95rem!important;border:1px solid var(--line);box-shadow:none;transition:transform .18s,border-color .18s} .links a:hover{transform:translateY(-2px);border-color:var(--accent)} footer{margin-top:1.5rem;padding:1rem 0 1.5rem;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 55%,transparent);text-align:center} footer p{line-height:1.8} .site-version-trigger{border-radius:999px!important;padding:.45rem .85rem!important;border:1px solid var(--line)!important;background:var(--surface)!important} .network-banner{border-radius:0 0 1rem 1rem;max-width:49rem;margin-inline:auto} :focus-visible{outline-color:var(--accent)!important;outline-offset:3px} @media(max-width:520px){header .wrap{align-items:center;min-height:auto;padding-block:.5rem}.brand img{max-width:145px;height:auto}.ctrl{gap:.3rem}.ctrl button{min-width:2.5rem!important;min-height:2.65rem!important;padding-inline:.45rem!important}.langs button{min-width:2.55rem!important;min-height:2.65rem!important;padding:.2rem .3rem!important}.langs .lang-label{font-size:.7rem}.langs .lang-flag{font-size:.82rem}section{border-radius:1rem;margin-block:.8rem}.hero{padding-inline:.4rem}.shots{gap:.4rem}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}} /* ========================================================================== NOXILIS DZ v7.17 — Lite: أخف وأجمل - بلا زجاج متحرك ولا تمويه خلفية دائم (أكبر سبب للتقطّع أثناء التمرير). - حركة الشعار تتوقف بعد دورات قليلة وتعود للحالة الثابتة. - ألوان موحّدة: زمردي + ذهبي. لإرجاع اللون الوردي القديم غيّر --pop إلى #e11d48 (وفي الوضع الداكن إلى #ff5c7f). ========================================================================== */ :root{--pop:#8a6a1e;--on-pop:#fff;--glowc:rgba(138,106,30,.32);--r-card:1.25rem} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--pop:#e3c47d;--on-pop:#1c1608;--glowc:rgba(227,196,125,.45)}} :root[data-theme="dark"]{--pop:#e3c47d;--on-pop:#1c1608;--glowc:rgba(227,196,125,.45)} html{scrollbar-color:var(--line) transparent;scrollbar-width:thin;-webkit-text-size-adjust:100%} a,button,summary,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .brand.run .bf-ar{opacity:0} /* الشريط العلوي: سطح صلب بدل التمويه */ header{background:var(--surface);box-shadow:0 1px 0 var(--line),0 10px 22px -20px var(--shc)} .utility-btn{background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 6px 16px -10px var(--shk)} .ctrl button:active,.utility-btn:active,.adhkar-btn:active{transform:scale(.96)} /* البطاقات: إطار هادئ وظل واحد موحّد */ main>section{border-radius:var(--r-card);padding:clamp(1.15rem,3.4vw,1.85rem) clamp(1rem,3.4vw,1.6rem);border-color:color-mix(in srgb,var(--line) 88%,transparent);box-shadow:0 1px 0 var(--hi) inset,0 16px 34px -28px var(--shc)} main>section::before{width:4rem;margin-left:-2rem;height:3px;background:linear-gradient(90deg,var(--accent),var(--pop))} section>h2::after{width:42%;height:2px} .top-clock-panel{border-radius:1.5rem;background:radial-gradient(70% 90% at 50% 0,var(--tintA),transparent 72%),var(--surface);box-shadow:0 1px 0 var(--hi) inset,0 18px 36px -28px var(--shc)} .top-clock-panel .clock{contain:layout style} .top-clock-panel .clock .s,.pray .pc{color:var(--pop)} .dhk{border-bottom:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pop) 60%,transparent),transparent) bottom center/min(60%,16rem) 1px no-repeat} .adhkar-next{color:var(--on-pop)} /* الصلاة القادمة والأذكار: أساسيات كانت داخل الطبقات المحذوفة */ .pray,.adhkar-widget{position:relative;isolation:isolate} .pray{overflow:hidden;padding:.8rem 1rem} .pray :is(button,a),.adhkar-widget :is(button,a){position:relative;z-index:3} /* زر «زيارة موقع سجرارة»: حدّ متدرّج ثابت بدل الزجاج المتحرك */ .site-status-rgb{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.45rem .75rem;width:100%;min-height:4.4rem;margin:.9rem 0 1.1rem;padding:.9rem 1.25rem;border:1px solid transparent;border-radius:1.1rem;text-decoration:none;text-align:center;font-weight:700;color:var(--ink);background:linear-gradient(var(--card1),var(--card2)) padding-box,linear-gradient(120deg,var(--accent),var(--pop)) border-box;box-shadow:0 12px 26px -22px var(--shc);transition:transform .2s ease,box-shadow .2s ease} .site-status-rgb:hover{transform:translateY(-2px);box-shadow:0 18px 30px -22px var(--shc)} .site-status-rgb:active{transform:none} .site-status-rgb:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .status-orb{width:.65rem;height:.65rem;flex:none;border-radius:50%;background:var(--accent);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--accent) 22%,transparent)} .status-title{color:var(--ink)} .status-divider{width:1px;height:1.4rem;background:var(--line)} .status-label{color:var(--muted);font-size:.92rem;font-weight:600} @media(max-width:26rem){.site-status-rgb{padding:.8rem .9rem;min-height:4rem;gap:.35rem .55rem}.status-label{font-size:.84rem}} /* خلفية النوافذ المنبثقة: تعتيم أوضح بدل التمويه */ .site-version-dialog::backdrop,.site-update-notice::backdrop,.adhkar-reader::backdrop,.prayer-lesson-dialog::backdrop,.soon-dlg::backdrop{background:rgba(2,12,20,.78)} .prayer-stage-overlay{background:rgba(2,12,20,.8)} /* الأجهزة اللمسية: لا حالات تحويم عالقة بعد النقر */ @media(hover:none){.ctrl button:hover,.links a:hover,#contact .links a:hover,.utility-btn:hover,.adhkar-btn:hover,.site-status-rgb:hover{transform:none}.shot:hover img{transform:none}} /* ========================================================================== v7.17.1 — رأس الصفحة: الشعار وأزرار اللغة في شريط واحد، والخدمات شريط رقيق تحته. الرأس لم يعد ثابتًا: يتحرك مع الصفحة فلا يغطي أي جزء من المحتوى عند التمرير. ========================================================================== */ html{scroll-padding-top:.75rem} header .wrap{display:grid;grid-template-columns:auto auto;justify-content:space-between;align-items:center;gap:.4rem .6rem;min-height:0;padding-block:.45rem .55rem} .brand{margin:0} .ctrl{flex-wrap:nowrap;gap:.3rem} .services-row{grid-column:1/-1;display:flex;align-items:stretch;gap:.4rem} .services-strip{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:.55rem;min-height:2.35rem;padding:.25rem .8rem;border:1px solid color-mix(in srgb,var(--pop) 42%,var(--line));border-radius:.8rem;background:color-mix(in srgb,var(--pop) 9%,var(--card2));color:var(--ink);font-size:.9rem;font-weight:800;line-height:1.3;text-decoration:none;transition:border-color .18s ease,transform .18s ease} .services-strip:hover{border-color:var(--pop)} .services-strip:active{transform:scale(.985)} .services-strip:focus-visible{outline:3px solid var(--accent);outline-offset:2px} .svc-ic{flex:none;width:1.1rem;height:1.1rem;fill:currentColor;color:var(--pop)} .svc-label{flex:none} .svc-new{flex:none;padding:.02rem .5rem;border-radius:999px;background:var(--pop);color:var(--on-pop);font-size:.7rem;font-weight:800;line-height:1.6} .svc-hint{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.8rem;font-weight:600} .svc-chev{flex:none;width:1rem;height:1rem;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} html[dir="ltr"] .svc-chev{transform:scaleX(-1)} .services-row .pwa-install{flex:none;min-height:2.35rem;padding:.25rem .7rem;border:1px solid var(--line);border-radius:.8rem;background:var(--card2);color:var(--ink);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer} @media(max-width:23.5rem){.brand img{max-width:118px}.ctrl,.langs{gap:.22rem}.ctrl button{min-width:2.2rem!important;padding-inline:.3rem!important}.langs button{min-width:2.25rem!important;padding-inline:.2rem!important}.svc-hint{font-size:.74rem}} @media(hover:none){.services-strip:hover{border-color:color-mix(in srgb,var(--pop) 42%,var(--line))}} /* ========================================================================== v7.18.0 — أعلام ترفرف تحت أزرار اللغة · «من أنا» بطاقة تُطوى وتُفتح · سطر «مشروعنا الجديد» فوق «قيد التطوير». الأعلام شرائح CSS (تحريك transform/opacity فقط = خفيفة على الهاتف)، بلا JavaScript وبلا صور خارجية. ========================================================================== */ /* ---- أعلام اللغة ---- */ .wf{--w:1.8rem;--h:1.2rem;display:flex;flex:none;width:var(--w);height:var(--h);margin:.12rem auto .05rem;direction:ltr;line-height:0;font-size:0} .wf-dz{--fl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect width='15' height='20' fill='%23006233'/%3E%3Ccircle cx='15' cy='10' r='5' fill='%23d21034'/%3E%3Ccircle cx='16.25' cy='10' r='4' fill='%23fff'/%3E%3Cpolygon points='18.07,7.62 18.11,9.41 19.80,10.00 18.11,10.59 18.07,12.38 16.99,10.95 15.28,11.47 16.30,10.00 15.28,8.53 16.99,9.05' fill='%23d21034'/%3E%3C/svg%3E")} .wf-fr{--fl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Crect width='10' height='20' fill='%230055a4'/%3E%3Crect x='10' width='10' height='20' fill='%23fff'/%3E%3Crect x='20' width='10' height='20' fill='%23ef4135'/%3E%3C/svg%3E")} .wf-us{--fl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect y='0.000' width='30' height='1.558' fill='%23b22234'/%3E%3Crect y='3.077' width='30' height='1.558' fill='%23b22234'/%3E%3Crect y='6.154' width='30' height='1.558' fill='%23b22234'/%3E%3Crect y='9.231' width='30' height='1.558' fill='%23b22234'/%3E%3Crect y='12.308' width='30' height='1.558' fill='%23b22234'/%3E%3Crect y='15.385' width='30' height='1.558' fill='%23b22234'/%3E%3Crect y='18.462' width='30' height='1.558' fill='%23b22234'/%3E%3Crect width='12' height='10.769' fill='%233c3b6e'/%3E%3Ccircle cx='1.10' cy='1.05' r='.36' fill='%23fff'/%3E%3Ccircle cx='3.10' cy='1.05' r='.36' fill='%23fff'/%3E%3Ccircle cx='5.10' cy='1.05' r='.36' fill='%23fff'/%3E%3Ccircle cx='7.10' cy='1.05' r='.36' fill='%23fff'/%3E%3Ccircle cx='9.10' cy='1.05' r='.36' fill='%23fff'/%3E%3Ccircle cx='11.10' cy='1.05' r='.36' fill='%23fff'/%3E%3Ccircle cx='2.10' cy='2.13' r='.36' fill='%23fff'/%3E%3Ccircle cx='4.10' cy='2.13' r='.36' fill='%23fff'/%3E%3Ccircle cx='6.10' cy='2.13' r='.36' fill='%23fff'/%3E%3Ccircle cx='8.10' cy='2.13' r='.36' fill='%23fff'/%3E%3Ccircle cx='10.10' cy='2.13' r='.36' fill='%23fff'/%3E%3Ccircle cx='1.10' cy='3.21' r='.36' fill='%23fff'/%3E%3Ccircle cx='3.10' cy='3.21' r='.36' fill='%23fff'/%3E%3Ccircle cx='5.10' cy='3.21' r='.36' fill='%23fff'/%3E%3Ccircle cx='7.10' cy='3.21' r='.36' fill='%23fff'/%3E%3Ccircle cx='9.10' cy='3.21' r='.36' fill='%23fff'/%3E%3Ccircle cx='11.10' cy='3.21' r='.36' fill='%23fff'/%3E%3Ccircle cx='2.10' cy='4.29' r='.36' fill='%23fff'/%3E%3Ccircle cx='4.10' cy='4.29' r='.36' fill='%23fff'/%3E%3Ccircle cx='6.10' cy='4.29' r='.36' fill='%23fff'/%3E%3Ccircle cx='8.10' cy='4.29' r='.36' fill='%23fff'/%3E%3Ccircle cx='10.10' cy='4.29' r='.36' fill='%23fff'/%3E%3Ccircle cx='1.10' cy='5.37' r='.36' fill='%23fff'/%3E%3Ccircle cx='3.10' cy='5.37' r='.36' fill='%23fff'/%3E%3Ccircle cx='5.10' cy='5.37' r='.36' fill='%23fff'/%3E%3Ccircle cx='7.10' cy='5.37' r='.36' fill='%23fff'/%3E%3Ccircle cx='9.10' cy='5.37' r='.36' fill='%23fff'/%3E%3Ccircle cx='11.10' cy='5.37' r='.36' fill='%23fff'/%3E%3Ccircle cx='2.10' cy='6.45' r='.36' fill='%23fff'/%3E%3Ccircle cx='4.10' cy='6.45' r='.36' fill='%23fff'/%3E%3Ccircle cx='6.10' cy='6.45' r='.36' fill='%23fff'/%3E%3Ccircle cx='8.10' cy='6.45' r='.36' fill='%23fff'/%3E%3Ccircle cx='10.10' cy='6.45' r='.36' fill='%23fff'/%3E%3Ccircle cx='1.10' cy='7.53' r='.36' fill='%23fff'/%3E%3Ccircle cx='3.10' cy='7.53' r='.36' fill='%23fff'/%3E%3Ccircle cx='5.10' cy='7.53' r='.36' fill='%23fff'/%3E%3Ccircle cx='7.10' cy='7.53' r='.36' fill='%23fff'/%3E%3Ccircle cx='9.10' cy='7.53' r='.36' fill='%23fff'/%3E%3Ccircle cx='11.10' cy='7.53' r='.36' fill='%23fff'/%3E%3Ccircle cx='2.10' cy='8.61' r='.36' fill='%23fff'/%3E%3Ccircle cx='4.10' cy='8.61' r='.36' fill='%23fff'/%3E%3Ccircle cx='6.10' cy='8.61' r='.36' fill='%23fff'/%3E%3Ccircle cx='8.10' cy='8.61' r='.36' fill='%23fff'/%3E%3Ccircle cx='10.10' cy='8.61' r='.36' fill='%23fff'/%3E%3Ccircle cx='1.10' cy='9.69' r='.36' fill='%23fff'/%3E%3Ccircle cx='3.10' cy='9.69' r='.36' fill='%23fff'/%3E%3Ccircle cx='5.10' cy='9.69' r='.36' fill='%23fff'/%3E%3Ccircle cx='7.10' cy='9.69' r='.36' fill='%23fff'/%3E%3Ccircle cx='9.10' cy='9.69' r='.36' fill='%23fff'/%3E%3Ccircle cx='11.10' cy='9.69' r='.36' fill='%23fff'/%3E%3C/svg%3E")} .wf>i{position:relative;display:block;flex:0 0 calc(var(--w)/8);width:calc(var(--w)/8);height:var(--h);background-image:var(--fl);background-size:var(--w) var(--h);background-repeat:no-repeat;box-shadow:inset 0 1px 0 rgba(0,0,0,.22),inset 0 -1px 0 rgba(0,0,0,.22);animation:wfWave 1.7s ease-in-out infinite} .wf>i:first-child{border-start-start-radius:2px;border-end-start-radius:2px;box-shadow:inset 0 1px 0 rgba(0,0,0,.22),inset 0 -1px 0 rgba(0,0,0,.22),inset 1px 0 0 rgba(0,0,0,.22)} .wf>i:last-child{border-start-end-radius:2px;border-end-end-radius:2px;box-shadow:inset 0 1px 0 rgba(0,0,0,.22),inset 0 -1px 0 rgba(0,0,0,.22),inset -1px 0 0 rgba(0,0,0,.22)} .wf>i::after{content:"";position:absolute;inset:0;background:#000;opacity:0;animation:wfShade 1.7s ease-in-out infinite} .wf>i:nth-child(1){background-position:calc(var(--w)*-0/8) 0;animation-delay:calc(-.17s*0);--a:0.15px} .wf>i:nth-child(1)::after{animation-delay:calc(-.17s*0)} .wf>i:nth-child(2){background-position:calc(var(--w)*-1/8) 0;animation-delay:calc(-.17s*1);--a:0.35px} .wf>i:nth-child(2)::after{animation-delay:calc(-.17s*1)} .wf>i:nth-child(3){background-position:calc(var(--w)*-2/8) 0;animation-delay:calc(-.17s*2);--a:0.6px} .wf>i:nth-child(3)::after{animation-delay:calc(-.17s*2)} .wf>i:nth-child(4){background-position:calc(var(--w)*-3/8) 0;animation-delay:calc(-.17s*3);--a:0.85px} .wf>i:nth-child(4)::after{animation-delay:calc(-.17s*3)} .wf>i:nth-child(5){background-position:calc(var(--w)*-4/8) 0;animation-delay:calc(-.17s*4);--a:1.05px} .wf>i:nth-child(5)::after{animation-delay:calc(-.17s*4)} .wf>i:nth-child(6){background-position:calc(var(--w)*-5/8) 0;animation-delay:calc(-.17s*5);--a:1.2px} .wf>i:nth-child(6)::after{animation-delay:calc(-.17s*5)} .wf>i:nth-child(7){background-position:calc(var(--w)*-6/8) 0;animation-delay:calc(-.17s*6);--a:1.3px} .wf>i:nth-child(7)::after{animation-delay:calc(-.17s*6)} .wf>i:nth-child(8){background-position:calc(var(--w)*-7/8) 0;animation-delay:calc(-.17s*7);--a:1.35px} .wf>i:nth-child(8)::after{animation-delay:calc(-.17s*7)} @keyframes wfWave{0%,100%{transform:translateY(calc(var(--a,1px)*-1))}50%{transform:translateY(var(--a,1px))}} @keyframes wfShade{0%,100%{opacity:0}50%{opacity:.2}} .langs .lang-flag.wf{font-size:0;line-height:0;filter:none} .langs button .lang-label{position:relative;z-index:1} @media(max-width:23.5rem){.wf{--w:1.5rem;--h:1rem}} @media(prefers-reduced-motion:reduce){.wf>i,.wf>i::after{animation:none}} /* ---- من أنا: بطاقة انطوائية ---- */ #about .about-body{min-width:0} #about .about-more p:first-of-type{font-weight:inherit} #about.about-ready .about-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s ease} #about.about-ready .about-more.open{grid-template-rows:1fr} #about.about-ready .about-more-in{min-height:0;overflow:hidden;transition:visibility 0s linear .38s} #about.about-ready .about-more:not(.open) .about-more-in{visibility:hidden} #about.about-ready .about-more.open .about-more-in{visibility:visible;transition-delay:0s} .about-toggle{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;margin:.5rem auto 0;padding:.3rem 1.25rem;border:1px solid var(--pop);border-radius:2rem;background:transparent;color:var(--pop);font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,transform .2s} .about-toggle[hidden]{display:none} .about-toggle:hover{background:var(--pop);color:var(--on-pop)} .about-toggle:active{transform:scale(.97)} .about-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px} .about-toggle[aria-expanded="false"] .about-t-close,.about-toggle[aria-expanded="true"] .about-t-open{display:none} .about-chev{flex:none;width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease} .about-toggle[aria-expanded="true"] .about-chev{transform:rotate(180deg)} @media(min-width:40rem){#about>h2{grid-row:auto}.about-toggle{margin-inline:0}} @media(hover:none){.about-toggle:hover{background:transparent;color:var(--pop)}} @media(prefers-reduced-motion:reduce){#about.about-ready .about-more,#about.about-ready .about-more-in,.about-chev,.about-toggle{transition:none}} /* ---- سطر «مشروعنا الجديد» فوق «قيد التطوير» ---- */ .proj .meta.soon.mushafi-status{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;width:fit-content;margin-top:.6rem} .soon-tease{display:block;color:var(--ink);font-size:1rem;font-weight:700;line-height:1.7}