/* MB MEDIA — Built for MOHAMAD BASSEM MEFTAH — mftahbassem@gmail.com */ /* ============================================================ mb-nav.css — القائمة الرئيسية والفوتر (للصفحات التعريفية) ⚠️ مختلفة تماماً عن mb-bar (شريط الأدوات والديموهات). الاثنان يتعايشان. الطبقة الزجاجية قابلة للضبط من متغيرين فقط: --mb-nav-blur شدة الضبابية بالديسكتوب --mb-nav-blur-sm شدة الضبابية بالموبايل (أخف — للأداء) --mb-nav-bg-alpha شفافية الخلفية ============================================================ */ /* تعويض ارتفاع القائمة — يضعه mb-nav.js على */ body.mb-nav-host { padding-block-start: var(--mb-nav-h); } /* ============================ الشريط ============================ */ .mb-nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--mb-nav-z); display: flex; align-items: center; gap: var(--mb-s-4); min-block-size: var(--mb-nav-h); padding-inline: var(--mb-s-4); background-color: var(--mb-nav-bg); color: var(--mb-nav-fg); -webkit-backdrop-filter: blur(var(--mb-nav-blur)) saturate(var(--mb-nav-saturate)); backdrop-filter: blur(var(--mb-nav-blur)) saturate(var(--mb-nav-saturate)); /* الزجاج: ظلّان خارجيان + لمعة علوية + انكسار سفلي + حلقة ١ بكسل */ box-shadow: 0 40px 80px -20px var(--mb-nav-glass-shadow), 0 10px 30px -10px var(--mb-nav-glass-shadow), inset 0 2px 3px -1px var(--mb-nav-highlight), inset 0 -2px 4px -1px var(--mb-nav-caustic), inset 0 0 0 1px var(--mb-nav-ring); transition: background-color var(--mb-dur-liquid) var(--mb-ease), box-shadow var(--mb-dur-liquid) var(--mb-ease); isolation: isolate; } /* انعكاس علوي ناعم — نصف ارتفاع الشريط */ .mb-nav::before { content: ""; position: absolute; inset-block-start: 1px; inset-inline: 1px; block-size: 46%; background: linear-gradient(180deg, var(--mb-nav-reflection) 0%, transparent 100%); pointer-events: none; z-index: 0; transition: background var(--mb-dur-liquid) var(--mb-ease); } /* وهج يتبع الفأرة — الإحداثيات يضبطها mb-nav.js */ .mb-nav__glare { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; overflow: hidden; background: radial-gradient(circle 90px at var(--mb-glare-x, 50%) var(--mb-glare-y, 50%), var(--mb-nav-glare) 0%, transparent 100%); mix-blend-mode: overlay; transition: opacity var(--mb-dur-slow) var(--mb-ease); } .mb-nav:hover .mb-nav__glare { opacity: 1; } @media (hover: none) { .mb-nav__glare { display: none; } } /* احتياط: متصفح بلا backdrop-filter يحصل على خلفية صلبة بدل الشفافية */ @supports not (backdrop-filter: blur(1px)) { @supports not (-webkit-backdrop-filter: blur(1px)) { .mb-nav { background-color: var(--mb-nav-solid); } } } /* بعد التمرير: تصير أوضح قليلاً */ .mb-nav[data-scrolled="true"] { --mb-nav-bg-alpha: 0.88; } /* كل عناصر الشريط فوق طبقتَي الانعكاس والوهج */ .mb-nav > * { position: relative; z-index: 3; } /* ---------- اللوغو ---------- */ .mb-nav__brand { display: inline-flex; align-items: center; min-block-size: var(--mb-tap); padding-inline: var(--mb-s-2); font-family: var(--mb-font-en); font-size: var(--mb-t-lg); font-weight: var(--mb-w-bold); letter-spacing: var(--mb-ls-wide); color: var(--mb-nav-fg); text-decoration: none; flex: none; direction: ltr; unicode-bidi: isolate; /* ⚠️ قرار محسوم: اسم MB MEDIA ثابت بلا أي حركة */ } .mb-nav__brand b { color: var(--mb-cyan-400); font-weight: inherit; } [data-theme="light"] .mb-nav__brand b { color: var(--mb-cyan-700); } /* ---------- الروابط (ديسكتوب) ---------- */ .mb-nav__links { position: relative; display: flex; align-items: center; gap: var(--mb-nav-gap); margin: 0; padding: 0; list-style: none; flex: 1 1 auto; justify-content: center; min-inline-size: 0; } .mb-nav__item { position: relative; } .mb-nav__link { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: var(--mb-s-2); min-block-size: var(--mb-tap); padding-inline: var(--mb-s-5); border-radius: var(--mb-nav-radius); color: var(--mb-nav-muted); font-size: var(--mb-t-sm); font-weight: var(--mb-w-semibold); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color var(--mb-dur-slow) var(--mb-ease), scale var(--mb-dur-base) var(--mb-ease-press); } .mb-nav__link:hover { color: var(--mb-nav-fg); } .mb-nav__link:active { scale: 0.92; } .mb-nav__link[aria-current="page"] { color: var(--mb-nav-fg); } /* الكبسولة المتنقّلة بين الروابط */ .mb-nav__indicator { position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: 0; z-index: 1; border-radius: var(--mb-nav-radius); background-color: var(--mb-nav-pill); box-shadow: var(--mb-nav-pill-shadow); opacity: 0; pointer-events: none; transition: translate var(--mb-dur-liquid) var(--mb-ease-liquid), inline-size var(--mb-dur-liquid) var(--mb-ease-liquid), background-color var(--mb-dur-liquid) var(--mb-ease), box-shadow var(--mb-dur-liquid) var(--mb-ease), opacity var(--mb-dur-base) var(--mb-ease); } .mb-nav__indicator[data-on="true"] { opacity: 1; } /* أول رسم: بلا انزلاق من الحافة */ .mb-nav__indicator[data-init="true"] { transition: none; } /* ---------- قائمة فرعية ---------- */ .mb-nav__sub { position: absolute; inset-block-start: calc(100% + var(--mb-s-2)); inset-inline-start: 0; z-index: var(--mb-z-dropdown); min-inline-size: 200px; margin: 0; padding: var(--mb-s-2); list-style: none; background-color: var(--mb-bg-elevated); border: 1px solid var(--mb-border); border-radius: var(--mb-r-lg); box-shadow: var(--mb-shadow-lg); display: none; } .mb-nav__item[data-open="true"] > .mb-nav__sub { display: block; } .mb-nav__sub .mb-nav__link { display: flex; inline-size: 100%; justify-content: flex-start; color: var(--mb-fg-muted); border-radius: var(--mb-r-md); } .mb-nav__sub .mb-nav__link:hover { background-color: var(--mb-bg-sunken); color: var(--mb-fg); } /* ---------- أدوات اليمين ---------- */ .mb-nav__tools { display: flex; align-items: center; gap: var(--mb-s-1); flex: none; margin-inline-start: auto; } .mb-nav__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mb-s-1); min-inline-size: var(--mb-tap); min-block-size: var(--mb-tap); padding-inline: var(--mb-s-2); border: 1px solid transparent; border-radius: var(--mb-nav-radius); background: none; color: var(--mb-nav-muted); font: inherit; font-size: var(--mb-t-sm); cursor: pointer; transition: background-color var(--mb-dur-fast) var(--mb-ease), color var(--mb-dur-fast) var(--mb-ease); } .mb-nav__btn:hover { background-color: var(--mb-nav-pill); color: var(--mb-nav-fg); } .mb-nav__btn[aria-expanded="true"] { background-color: var(--mb-nav-pill); color: var(--mb-nav-fg); } .mb-nav__btn-label { font-family: var(--mb-font-mono); font-size: var(--mb-t-xs); } .mb-nav__btn { -webkit-tap-highlight-color: transparent; } /* فاصل رفيع بين المجموعات */ .mb-nav__divider { inline-size: 1px; block-size: 24px; margin-inline: var(--mb-s-1); background-color: var(--mb-nav-ring); flex: none; } /* ---------- زر الوضع: الشمس والقمر يتبادلان بدوران ---------- */ .mb-nav__theme { border-radius: var(--mb-r-full); } .mb-nav__icons { position: relative; inline-size: var(--mb-icon-size); block-size: var(--mb-icon-size); pointer-events: none; transition: scale var(--mb-dur-base) var(--mb-ease-press); } .mb-nav__theme:active .mb-nav__icons { scale: 0.8; } .mb-nav__icons .mb-icon { position: absolute; inset-block-start: 0; inset-inline-start: 0; transition: rotate var(--mb-dur-liquid) var(--mb-ease-liquid), scale var(--mb-dur-liquid) var(--mb-ease-liquid), opacity var(--mb-dur-slow) var(--mb-ease); } /* الوضع الفاتح: الشمس ظاهرة */ .mb-nav__icons .mb-nav__sun { opacity: 1; rotate: 0deg; scale: 1; } .mb-nav__icons .mb-nav__moon { opacity: 0; rotate: -90deg; scale: 0; } /* الوضع الداكن: القمر ظاهر */ [data-theme="dark"] .mb-nav__icons .mb-nav__sun { opacity: 0; rotate: 90deg; scale: 0; } [data-theme="dark"] .mb-nav__icons .mb-nav__moon { opacity: 1; rotate: 0deg; scale: 1; } @media (prefers-reduced-motion: reduce) { .mb-nav__icons .mb-icon { transition: opacity 1ms; rotate: 0deg; scale: 1; } .mb-nav__indicator { transition: opacity 1ms; } .mb-nav__link:active { scale: 1; } } /* قائمة اللغات */ .mb-nav__langbox { position: relative; } .mb-nav__langmenu { position: absolute; inset-block-start: calc(100% + var(--mb-s-2)); inset-inline-end: 0; z-index: var(--mb-z-dropdown); min-inline-size: 160px; margin: 0; padding: var(--mb-s-2); list-style: none; background-color: var(--mb-bg-elevated); border: 1px solid var(--mb-border); border-radius: var(--mb-r-lg); box-shadow: var(--mb-shadow-lg); } .mb-nav__langmenu[hidden] { display: none; } .mb-nav__langitem { display: flex; align-items: center; gap: var(--mb-s-2); inline-size: 100%; min-block-size: var(--mb-tap); padding-inline: var(--mb-s-3); border: none; border-radius: var(--mb-r-md); background: none; color: var(--mb-fg-muted); font: inherit; text-align: start; cursor: pointer; } .mb-nav__langitem:hover { background-color: var(--mb-bg-sunken); color: var(--mb-fg); } .mb-nav__langitem[aria-current="true"] { color: var(--mb-accent); font-weight: var(--mb-w-semibold); } /* زر الدعوة بالقائمة */ .mb-nav__cta { display: inline-flex; align-items: center; gap: var(--mb-s-2); min-block-size: var(--mb-tap); padding-inline: var(--mb-s-4); border-radius: var(--mb-nav-radius); background-color: var(--mb-cta); color: var(--mb-cta-fg); font-weight: var(--mb-w-bold); font-size: var(--mb-t-sm); text-decoration: none; white-space: nowrap; transition: background-color var(--mb-dur-fast) var(--mb-ease); } .mb-nav__cta:hover { background-color: var(--mb-cta-hover); color: var(--mb-cta-fg); } .mb-nav__cta[data-style="whatsapp"] { background-color: var(--mb-success); color: var(--mb-white); } .mb-nav__cta[data-style="whatsapp"]:hover { filter: brightness(1.12); } .mb-nav__cta[data-style="ghost"] { background: none; border: 1px solid var(--mb-accent); color: var(--mb-accent); } .mb-nav :focus-visible { outline: var(--mb-ring-w) solid var(--mb-focus-ring); outline-offset: 2px; } /* ---------- زر الهامبرغر ---------- */ .mb-nav__burger { display: none; } /* ============================ الموبايل ============================ */ @media (max-width: 1024px) { /* ⚠️ backdrop-filter ثقيل على أندرويد المتوسط — نخفّف القيمة ولا نلغي التأثير */ .mb-nav { --mb-nav-blur: var(--mb-nav-blur-sm); --mb-nav-saturate: 140%; --mb-nav-bg-alpha: 0.82; } .mb-nav__burger { display: inline-flex; } .mb-nav__links, .mb-nav__cta, .mb-nav__lang-desktop { display: none; } .mb-nav__tools { margin-inline-start: auto; } } /* ---------- اللوحة العمودية كاملة الشاشة ---------- */ /* ⚠️ قرار محسوم: قائمة عمودية كاملة، لا شريط أفقي قابل للسحب */ .mb-nav-panel { position: fixed; inset: 0; z-index: var(--mb-nav-panel-z); display: flex; flex-direction: column; padding: var(--mb-s-4); padding-block-start: calc(var(--mb-nav-h) + var(--mb-s-4)); background-color: var(--mb-bg); color: var(--mb-fg); overflow-y: auto; opacity: 0; translate: 0 -12px; transition: opacity var(--mb-dur-base) var(--mb-ease), translate var(--mb-dur-base) var(--mb-ease); } .mb-nav-panel[hidden] { display: none; } .mb-nav-panel[data-open="true"] { opacity: 1; translate: 0 0; } .mb-nav-panel__list { display: flex; flex-direction: column; gap: var(--mb-s-1); margin: 0; padding: 0; list-style: none; } .mb-nav-panel__link { display: flex; align-items: center; justify-content: space-between; gap: var(--mb-s-3); min-block-size: 56px; padding-inline: var(--mb-s-4); border-radius: var(--mb-r-lg); color: var(--mb-fg); font-size: var(--mb-t-lg); font-weight: var(--mb-w-medium); text-decoration: none; border-block-end: 1px solid var(--mb-border); } .mb-nav-panel__link:hover { background-color: var(--mb-bg-elevated); } .mb-nav-panel__link[aria-current="page"] { color: var(--mb-accent); } .mb-nav-panel__sub { margin: 0; padding: 0 0 var(--mb-s-2); list-style: none; padding-inline-start: var(--mb-s-5); } .mb-nav-panel__sub .mb-nav-panel__link { min-block-size: var(--mb-tap); font-size: var(--mb-t-base); color: var(--mb-fg-muted); border-block-end: none; } .mb-nav-panel__foot { padding-block-start: var(--mb-s-6); display: flex; flex-direction: column; gap: var(--mb-s-3); } .mb-nav-panel__foot .mb-nav__cta { display: inline-flex; justify-content: center; } @media (prefers-reduced-motion: reduce) { .mb-nav-panel { transition: none; translate: none; } .mb-nav__indicator { transition: opacity 1ms; } } /* ============================ الفوتر ============================ */ /* ⚠️ قرار محسوم: مضغوط قصير الارتفاع، لا طويل ممتد */ .mb-footer { border-block-start: 1px solid var(--mb-border); background-color: var(--mb-bg-sunken); color: var(--mb-fg-muted); padding-block: var(--mb-footer-pad); font-size: var(--mb-t-sm); } .mb-footer__inner { inline-size: 100%; max-inline-size: var(--mb-width-page); margin-inline: auto; padding-inline: var(--mb-s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-s-4) var(--mb-s-5); } .mb-footer__brand { display: inline-flex; align-items: center; gap: var(--mb-s-2); font-family: var(--mb-font-en); font-weight: var(--mb-w-bold); color: var(--mb-fg); text-decoration: none; flex: none; direction: ltr; unicode-bidi: isolate; } .mb-footer__brand b { color: var(--mb-accent); font-weight: inherit; } .mb-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mb-s-2) var(--mb-s-4); margin: 0; padding: 0; list-style: none; } .mb-footer__link { display: inline-flex; align-items: center; min-block-size: var(--mb-tap); color: var(--mb-fg-muted); text-decoration: none; } .mb-footer__link:hover { color: var(--mb-accent); } .mb-footer__social { display: flex; gap: var(--mb-s-1); } .mb-footer__social a { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--mb-tap); block-size: var(--mb-tap); border-radius: var(--mb-r-full); color: var(--mb-fg-muted); } .mb-footer__social a:hover { background-color: var(--mb-bg-elevated); color: var(--mb-accent); } .mb-footer__copy { margin-inline-start: auto; font-size: var(--mb-t-xs); color: var(--mb-fg-subtle); } @media (max-width: 768px) { .mb-footer__inner { flex-direction: column; align-items: center; justify-content: center; text-align: center; } .mb-footer__copy { margin-inline-start: 0; } }