/* * مگامنو — راست‌چین (تب‌ها) + پنل بازشونده کنارشان با هاور. * بازطراحی v3 — دقیقاً مطابق سبک بصری مگامنوی دیجی‌کالا: یک کارت واحد و * یکپارچه (نه دو باکس جدا با فاصله)، لیست تب‌ها هم‌ارتفاع با پنل باز * (نه یک باکس کوتاه‌تر که پشتش خالی/شکسته دیده شود)، ردیف «همه {دسته}» * بالای هر پنل، و ستون‌های جداشده با خط عمودی که هرگز از باکس بیرون * نمی‌زنند. * * چرا CSS Grid به‌جای flex+position:absolute (تصمیم کلیدی این نسخه): * نسخه‌ی قبلی پنل را با position:absolute بیرون از جریان عادی می‌گذاشت تا * چند پنل بتوانند روی هم «شناور» بمانند؛ اما چون تب‌ها (در جریان عادی) و * پنل (absolute) دو ارتفاع کاملاً مستقل داشتند، هرکدام کوتاه‌تر بود، زیر * محتوایش خالی/شکسته می‌ماند و پس‌زمینه‌ی واقعی صفحه (اسلایدر هدر) از آن * زیر دیده می‌شد — دقیقاً باگ گزارش‌شده. چون همیشه فقط یک پنل هم‌زمان * `display:flex` است (بقیه `display:none` و صفر ارتفاع دارند)، اصلاً نیازی * به position:absolute نبود — یک grid دوستونه با `align-items:stretch` * (پیش‌فرض گرید) به‌صورت خودکار هر دو ستون (تب‌ها + پنل) را هم‌ارتفاع با * بلندترین‌شان می‌کند، بدون هیچ جاوااسکریپت اضافه برای اندازه‌گیری دستی. */ .wbkb-mm { position: relative; /* یک stacking context محلی مستقل — تا بک‌دراپ position:fixed داخلش * (پایین همین فایل) همیشه دقیقاً زیر تب‌ها/پنل بماند و روی محتوای * عادی صفحه هم بنشیند، مستقل از هر z-index دیگری در قالب/تم سایت. */ z-index: 20; display: grid; /* اولین ستون تعریف‌شده (۲۵۰px) تحت direction:rtl سمت راست می‌نشیند — * دقیقاً همان جایی که اولین فرزند DOM (لیست تب‌ها) قرار می‌گیرد. */ grid-template-columns: 250px minmax( 0, 1fr ); align-items: stretch; font-size: 14px; /* هیچ محتوایی (حتی اگر ستون‌ها/آیتم‌ها بیش از حد باشند) اجازه‌ی بیرون * زدن از این جعبه‌ی گردشده را ندارد — سدی سخت در برابر «محتوا روی * پس‌زمینه‌ی واقعی صفحه بریزد» مستقل از علت دقیق سرریز. */ overflow: hidden; } /* * ابعاد کلی ثابت — عرض همیشه ۹۸۰px (یا کمتر روی صفحه‌های باریک‌تر) است. * ارتفاع پیش‌فرض ۹۵vh — یک مقدار **قطعی** (نه max-height)، عمداً: با * CSS Grid + align-items:stretch، فقط یک ارتفاع قطعی تضمین می‌کند که * تب‌ها/پنل هر دو دقیقاً به همین اندازه کش بیایند و اسکرول *داخلی*شان * (overflow-y/overflow) درست وقتی محتوای‌شان از این اندازه بیشتر شود * فعال شود؛ max-height این‌جا مشکل‌ساز است چون با محتوای خیلی بلند، اندازه‌ی * ردیف گرید بر پایه‌ی «حداکثر محتوای مورد نیاز» محاسبه می‌شود نه سقف * تعیین‌شده، و نتیجه دقیقاً برعکس چیزی می‌شد که می‌خواهیم (بزرگ‌تر از سقف، * نه کوچک‌تر). * * این مقدار ۹۵vh فقط یک **پیش‌فرض/fallback** است (برای لحظه‌ی اول رندر یا * محیط بدون جاوااسکریپت) — چون یک ارتفاع ثابت نسبت به viewport، مستقل از * این‌که خودِ ویجت چقدر پایین‌تر از بالای صفحه (زیر هدر/بنر) قرار گرفته، * می‌تواند از پایین صفحه بیرون بزند (باگ گزارش‌شده‌ی «صفحه اسکرول می‌شود»). * megamenu.js با تابع adjustHeight() این مقدار را در لحظه‌ی هاور/تغییر * اندازه‌ی پنجره با یک عدد دقیق (فاصله‌ی واقعی از بالای ویجت تا پایین * viewport، حداکثر تا همین سقف ۹۵٪) جایگزین می‌کند — همیشه دقیقاً داخل * صفحه‌ی فعلی می‌ماند، مستقل از این‌که ویجت خودش کجای صفحه نشسته است. */ @media ( min-width: 783px ) { .wbkb-mm { width: 980px; max-width: 100%; height: 95vh; } } /* * قفل اسکرول صفحه‌ی پشت مگامنو — کلاسی که megamenu.js روی اضافه/حذف * می‌کند (mouseenter/mouseleave روی .wbkb-mm، فقط دسکتاپ). عمداً روی * html *و* body هر دو اعمال می‌شود چون بسته به قالب/مرورگر، context * اسکرول واقعی صفحه می‌تواند هرکدام از این دو باشد. */ html.wbkb-mm-scroll-lock, html.wbkb-mm-scroll-lock body { overflow: hidden; } .wbkb-mm-tabs { list-style: none; margin: 0; padding: 6px 0; background: #fff; overflow-y: auto; border: 1px solid #ebedf0; border-left: none; border-radius: 0 10px 10px 0; box-shadow: 0 8px 24px rgba( 0, 0, 0, .08 ); z-index: 2; } .wbkb-mm-tabs::-webkit-scrollbar { width: 6px; } .wbkb-mm-tabs::-webkit-scrollbar-thumb { background: #dcdfe3; border-radius: 6px; } .wbkb-mm-tab { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; cursor: pointer; transition: background-color .12s ease, color .12s ease; } .wbkb-mm-tab.is-active, .wbkb-mm-tab:hover { background: var( --wbkb-color-primary, #093c75 ); color: #fff; } .wbkb-mm-tab-inner { display: flex; align-items: center; gap: 8px; min-width: 0; } .wbkb-mm-tab-icon { width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; } .wbkb-mm-tab-title { color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wbkb-mm-tab-arrow { font-size: 13px; line-height: 1; opacity: .55; flex: 0 0 auto; transition: transform .15s ease, opacity .15s ease; } .wbkb-mm-tab.is-active .wbkb-mm-tab-arrow, .wbkb-mm-tab:hover .wbkb-mm-tab-arrow { opacity: 1; } /* * این کانتینر خودش grid item دوم است (پنل فعال را در بر می‌گیرد). چون * `min-width:0` صریح لازم است — بدون آن، آیتم‌های grid به‌طور پیش‌فرض * `min-width:auto` دارند (یعنی هرگز از عرض محتوای داخلی‌شان کوچک‌تر * نمی‌شوند) که می‌توانست باعث سرریز کل ردیف/صفحه شود اگر محتوای پنل خیلی * عریض باشد. */ .wbkb-mm-panels { position: relative; min-width: 0; z-index: 1; } /* * پس‌زمینه‌ی تیره‌ی شیشه‌ای (glass) زیر مگامنو — از لبه‌ی بالای خودِ مگامنو * تا پایین صفحه را می‌پوشاند (نه از راس صفحه/y=0)، دقیقاً رفتار مگامنوی * دیجی‌کالا که بقیه‌ی محتوای *پایین‌تر از منو* را کم‌رنگ/محو نشان می‌دهد. * `top:0` این‌جا فقط یک fallback است — megamenu.js با * `adjustMegamenuHeight()` مقدار `top` را روی لبه‌ی واقعی بالای `.wbkb-mm` * تنظیم می‌کند (`getBoundingClientRect().top`)، تا هدر/نوار دسته‌بندی‌های * *بالای* منو (که این ویجت معمولاً زیرشان می‌نشیند) هرگز زیر بک‌دراپ قرار * نگیرند — این روش کاملاً مستقل از z-index قالب سایت کار می‌کند (حتی اگر * z-index هدر قالب به هر دلیلی بی‌اثر باشد، مثلاً چون خودِ آن عنصر * `position` ندارد و z-indexاش اصلاً اعمال نمی‌شود)، چون فیزیکاً آن ناحیه * از صفحه اصلاً زیر بک‌دراپ نیست. * فقط دسکتاپ — در حالت آکاردئون موبایل، منو در جریان عادی صفحه است، نه * یک کارت شناور روی محتوای دیگر، پس بک‌دراپ تمام‌صفحه معنی ندارد. */ .wbkb-mm-backdrop { display: none; } @media ( min-width: 783px ) { .wbkb-mm-backdrop { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; background: rgba( 10, 12, 16, .3 ); backdrop-filter: blur( 6px ); -webkit-backdrop-filter: blur( 6px ); } } .wbkb-mm-panel { display: none; flex-direction: column; /* دیگر position:absolute نیست — چون همیشه فقط یک پنل هم‌زمان نمایش * داده می‌شود (بقیه display:none هستند)، جریان عادی صفحه برای پر کردن * کامل ارتفاع هم‌ارتفاع‌شده‌ی گرید (ر.ک. توضیح بالا) کافی است. */ height: 100%; box-sizing: border-box; background: #fff; border: 1px solid #ebedf0; border-right: none; box-shadow: 0 8px 24px rgba( 0, 0, 0, .08 ); border-radius: 10px 0 0 10px; padding: 16px 20px; overflow: auto; } .wbkb-mm-panel.is-active { display: flex; } .wbkb-mm-panel-all { display: flex; align-items: center; gap: 4px; align-self: flex-start; flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var( --wbkb-color-primary, #093c75 ); text-decoration: none; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid #eef0f2; width: 100%; } .wbkb-mm-panel-all:hover { text-decoration: underline; } .wbkb-mm-panel-all-arrow { font-size: 12px; } /* * `flex-wrap:wrap` یک شبکه‌ی ایمنی است، نه رفتار عادی — با ستون‌های * `flex-basis` معقول (پایین) و `max-width` سخاوتمندانه‌ی پنل، تعداد * معمول ستون‌ها (۲ تا ۶) همیشه در یک ردیف جا می‌شوند؛ فقط برای دسته‌هایی * با تعداد ستون خیلی زیاد، به‌جای سرریز‌کردن بیرون از باکس (باگ گزارش‌شده‌ی * قبلی)، به ردیف بعدی داخل همان باکس منتقل می‌شوند. */ .wbkb-mm-panel-columns { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 12px; } .wbkb-mm-column { /* flex-shrink مجاز و بدون min-width سخت — دقیقاً همان چیزی که نبودش * در نسخه‌ی قبلی باعث می‌شد ستون‌های بیش از حد (مثلاً ۶ ستون) از عرض * واقعی پنل بیرون بزنند، چون هرکدام حداقل ۱۵۰px اجباری داشت. */ flex: 0 1 170px; max-width: 200px; padding-left: 16px; margin-left: 16px; border-left: 1px solid #eef0f2; } /* * :last-child یعنی آخرین ستونِ همان تب در آرایه‌ی داده — چون این پنل * direction:rtl را از صفحه به ارث می‌برد، اولین فرزند در فلکس RTL سمت * راست می‌نشیند و فرزندان بعدی به سمت چپ می‌روند؛ پس آخرین ستون همیشه * چپ‌ترین ستون بصری است و نیازی به خط جداکننده‌ی سمت چپش (که چیزی * دیگری آن‌طرف نیست) ندارد. (اگر ستون‌ها به ردیف دوم بشکنند، این فقط * برای واقعاً آخرین ستون صدق می‌کند — یک محدودیت بصری جزئی و قابل‌قبول * برای همان حالت لبه‌ای نادر.) */ .wbkb-mm-column:last-child { padding-left: 0; margin-left: 0; border-left: none; } .wbkb-mm-column-title { font-weight: 700; font-size: 14px; color: #1d2129; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #eef0f2; } .wbkb-mm-item-list { list-style: none; margin: 0; padding: 0; } .wbkb-mm-item-list li { margin-bottom: 2px; } .wbkb-mm-item-list a { display: block; color: #4b5563; text-decoration: none; font-size: 13.5px; padding: 3px 0; line-height: 1.4; transition: color .12s ease; } .wbkb-mm-item-list a:hover { color: var( --wbkb-color-primary, #093c75 ); } /* * موبایل — به‌جای فلای‌اوت کنار تب‌ها (که روی صفحه‌ی باریک موبایل جا نمی‌شود * و لایوت را می‌شکند)، کل ردیف اصلی (.wbkb-mm) از grid دوستونه به یک ستون * عمودی تبدیل می‌شود: لیست کامل تب‌ها بالا، تمام‌عرض، و پنل تب فعال دقیقاً * زیرش (نه کنارش) در جریان عادی صفحه — دقیقاً همان چیزی که با کلیک روی هر * تب (که خودِ megamenu.js از قبل هم برای هاور هم برای کلیک/لمس فعال * می‌کند) باز/بسته می‌شود، فقط این‌بار به‌شکل یک آکاردئون عمودی. */ @media ( max-width: 782px ) { .wbkb-mm { display: flex; flex-direction: column; align-items: stretch; } .wbkb-mm-tabs { max-height: none; border-radius: 10px; border-left: 1px solid #ebedf0; } .wbkb-mm-panel { width: 100%; height: auto; box-shadow: none; border: 1px solid #ebedf0; border-radius: 10px; margin-top: 10px; } .wbkb-mm-panel-columns { gap: 18px 0; } /* خطوط جداکننده‌ی ستون‌ها فقط برای یک ردیف افقی واحد (دسکتاپ) معنی * دارند؛ در چیدمان گرید دوستونه‌ی موبایل که ممکن است ستون‌ها به چند * ردیف بشکنند، حذف می‌شوند تا خط اضافه/بی‌جا کنار ستون‌های وسط دیده * نشود. */ .wbkb-mm-column { flex: 1 1 45%; max-width: none; min-width: 45%; padding-left: 0; margin-left: 0; border-left: none; } /* روی دسکتاپ فلش سمت راست را نشان می‌دهد («فلای‌اوت این‌طرف باز می‌شود»)؛ * در حالت آکاردئون عمودی، برای تب فعال به سمت پایین می‌چرخد («محتوا * همین‌جا زیرش باز است») — راهنمای بصری هماهنگ با چیدمان تازه. */ .wbkb-mm-tab.is-active .wbkb-mm-tab-arrow { transform: rotate( 90deg ); } }