/* ── fabmenu-01 · قائمة عائمة (FAB) بدل درج البرجر ── مسحوبة من `site/index.html` (موقع أحمد) — مجرَّبة على الإنتاج ومفحوصة على آيفون. الشكل هناك مأخوذ عن `ntlofnyc`، والأيقونات SVG جوّانية. 🔴 **ليش هالقسم موجود أصلاً — الدرج القديم كان مكسوراً:** `header-01` عنده `backdrop-filter:blur(14px)`، وهاي الخاصية **بتخلّي الهيدر هو الـcontaining block لأي `position:fixed` جوّاه**. فالدرج اللي مكتوب عليه `inset:0` ما كان يغطّي الشاشة — كان **ينحبس بصندوق الهيدر (مقيس: H=88px)** فتتراكب بنوده مع محتوى الصفحة (بلاغ أحمد 2026-09-10). 🔑 **القاعدة: أي overlay/drawer/modal لازم يكون ابن `` مباشرة.** هالقسم بيلتزم فيها — `.fab01` و`.scrim01` **برّا الهيدر**. 🔑 المكان: **يمين فيزيائي** (`right` لا `inset-inline-end`) — بالعربي `inset-inline-end` بتنقلب لليسار، وزر عائم مكانه ثابت أريح للإبهام. 🔴 **و`align-items` كمان بتنقلب مع الاتجاه** — وهاد باغ انمسك بلقطة الإنجليزي (2026-09-10): `flex-start` بالعربي = يمين ✅، وبالإنجليزي = **يسار** ⇒ الزر والكبسولات انزاحوا لجوّا الشاشة بدل ما يلزقوا بالزاوية. ⇒ الأساس `flex-end` (يمين بالـLTR) و`flex-start` بالـRTL صراحةً. 🔑 **نفس عائلة باغ اتجاه الكاروسيل: أي محاذاة منطقية جوّا حاوية مثبَّتة فيزيائياً لازم تُقاس بالاتجاهين، لا تُراجَع بالعين على لغة وحدة.** */ /* 🔴🔴 **`pointer-events:none` على الحاوية إلزامية — باغ مقيس 2026-09-14.** بلاغ أحمد: «الكاروسيل ما بينسحب إلا لما أضغط على أماكن معينة». السبب: `.fmenu` مخفية بـ`visibility:hidden` — وهاي **بتحتفظ بمساحتها بالتخطيط** ⇒ صندوق `.fab01` بيمتد **فوق** الزر بمقدار القائمة كلها. المقيس على عرض ٥٠٠: الحاوية **٢٠٦×٣٨١** بينما الزر **٥٦×٥٦** بس (`.fmenu` لحالها 206×313 وهي مخفية). والحاوية `visibility:visible` وبلا خلفية ⇒ **شفافة للعين، صلبة للمس**: بتبلع كل ضغطة بربع الشاشة الأسفل-يمين. `elementFromPoint` رجّعت `DIV.fab01` بثلاث نقاط فوق الكاروسيل. 🔑 **القاعدة: أي حاوية `fixed` فيها ابن مخفي بـ`visibility` لازم `pointer-events:none`، واللمس يُعاد للأبناء الفعليين وحدهم.** ولا نرجّعها لـ`.fmenu` نفسها عمداً — الفراغ بين الكبسولات بيمرّ للسكرِم فالضغط جنب حبّة بيسكّر القائمة. */ .fab01{position:fixed;right:16px;left:auto;bottom:16px;z-index:80; display:flex;flex-direction:column;align-items:flex-end;gap:12px; pointer-events:none} .fab01 .fbtn,.fab01 .fmenu a{pointer-events:auto} [dir="rtl"] .fab01,[dir="rtl"] .fab01 .fmenu{align-items:flex-start} /* الزر — ٥٦px، فوق حدّ اللمس (٤٤) بمريح */ .fab01 .fbtn{flex:none;width:56px;height:56px;border-radius:50%;border:0; background:var(--accent);color:var(--on-accent); display:grid;place-items:center;box-shadow:var(--shadow-2); transition:transform .26s cubic-bezier(.2,.8,.25,1)} .fab01 .fbtn:active{transform:scale(.94)} .fab01 .fbtn svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.2; fill:none;stroke-linecap:round;grid-area:1/1; transition:opacity .2s ease,transform .26s ease} .fab01 .fbtn .ix{opacity:0;transform:rotate(-90deg)} .fab01 .fbtn[aria-expanded="true"]{transform:rotate(90deg)} .fab01 .fbtn[aria-expanded="true"] .ix{opacity:1;transform:rotate(-90deg)} .fab01 .fbtn[aria-expanded="true"] .ib{opacity:0;transform:rotate(90deg)} /* 🔑 `visibility` لا `display` على القائمة: الحركة بدها العنصر مرسوماً، و`visibility:hidden` كمان بتشيل الروابط من ترتيب التاب وهي مسكّرة. */ .fab01 .fmenu{display:flex;flex-direction:column;align-items:flex-end;gap:10px; visibility:hidden;transition:visibility 0s linear .3s} .fab01 .fmenu.open{visibility:visible;transition-delay:0s} .fab01 .fmenu a{display:flex;align-items:center;gap:11px;min-height:48px; padding:11px 18px 11px 14px;border-radius:999px; background:var(--bg);border:1px solid var(--accent-line); color:var(--fg);font-size:16.5px;font-weight:700; white-space:nowrap;box-shadow:var(--shadow-1); opacity:0;transform:translateY(12px) scale(.94); transition:opacity .26s ease, transform .3s cubic-bezier(.2,.8,.25,1)} /* الظهور واحد ورا التاني — التأخير من `--i` المكتوب على كل عنصر بالـHTML. الترتيب بالكود من فوق لتحت، و`--i` بتنقص ⇒ أقرب حبّة للزر بتطلع أول. */ .fab01 .fmenu.open a{opacity:1;transform:none; transition-delay:calc(var(--i) * 45ms)} .fab01 .fmenu a .fi{flex:none;width:30px;height:30px;border-radius:50%; display:grid;place-items:center;background:var(--accent-dim); border:1px solid var(--accent-line)} .fab01 .fmenu a .fi svg{width:16px;height:16px;stroke:var(--accent); stroke-width:2;fill:none;stroke-linecap:round; stroke-linejoin:round} /* الحبّة الفعّالة والـCTA — نفس المعالجة، تعبئة بلون التمييز */ .fab01 .fmenu a.on,.fab01 .fmenu a.fcta{background:var(--accent); color:var(--on-accent);border-color:var(--accent)} .fab01 .fmenu a.on .fi,.fab01 .fmenu a.fcta .fi{background:var(--scrim); border-color:var(--accent-line)} .fab01 .fmenu a.on .fi svg,.fab01 .fmenu a.fcta .fi svg{stroke:var(--on-accent)} /* ── التعتيم ورا القائمة ── 🔴🔴 `display:none` لا `visibility:hidden` — والسبب **مش تنظيف كود**: سفاري 26 (Liquid Glass) بيلوّن شريطه السفلي من `background-color` لأقرب عنصر `fixed`/`sticky` لحافة الشاشة. سكرِم `inset:0` مخفي بـ`visibility` **بيضل يُقرأ** ⇒ سفاري بياخد لونه ويرسم شريطاً مصمتاً بخط قطع. مع `display:none` بيختفي من الحساب. `allow-discrete` بتخلّي التلاشي شغّالاً رغم `display`. (الدرس مدفوع بموقع أحمد — لا يُعاد اكتشافه.) */ .scrim01{position:fixed;inset:0;z-index:75;background:var(--scrim); opacity:0;display:none; transition:opacity .28s ease,display .28s allow-discrete} .scrim01.open{opacity:1;display:block} @starting-style{ .scrim01.open{opacity:0} } body.locked{overflow:hidden} /* على الديسكتوب النافيغيشن بالهيدر ظاهر ⇒ القائمة العائمة تكرار */ @media(min-width:900px){ .fab01,.scrim01{display:none} } @media(prefers-reduced-motion:reduce){ .fab01 .fmenu a,.fab01 .fbtn,.fab01 .fbtn svg,.scrim01{ transition-duration:.01ms!important;transition-delay:0s!important} .fab01 .fmenu a{transform:none} }