/* ========================================================================= Hamantech Mega Menu همه چیز با خاصیت‌های Logical CSS نوشته شده (inset-inline-start، margin-inline، border-inline ...) تا با تغییر جهت صفحه (dir="rtl" برای فارسی/عربی، dir="ltr" برای انگلیسی — که خودِ وردپرس/Polylang روی ست می‌کنن) خودکار درست بشه. تنها استثنا، ترفند "تمام‌عرض" مگامنو با left:50% + transform هست که چون فقط برای وسط‌چین کردن یک باکس تمام‌ویوپورت استفاده شده، به جهت متن ربطی نداره و در RTL/LTR یکسان درست کار می‌کنه. ========================================================================= */ :root { --hmm-accent: #7c4dff; --hmm-text: #1f2430; --hmm-text-soft: #666c7a; --hmm-border: #ececef; --hmm-bg: #ffffff; --hmm-hover-bg: #f6f5ff; --hmm-radius: 10px; --hmm-header-h: 72px; /* اگه ارتفاع هدر شما فرق داره، همین متغیر رو عوض کنید */ } .hmm-nav, .hmm-nav *, .hmm-nav *::before, .hmm-nav *::after { box-sizing: border-box; } .hmm-nav { width: 100%; position: relative; } .hmm-menu { list-style: none; display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; } .hmm-menu li { position: relative; } .hmm-menu > li > a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 2px; color: var(--hmm-text); text-decoration: none; font-weight: 500; white-space: nowrap; cursor: pointer; } .hmm-menu > li.current-menu-item > a, .hmm-menu > li.hmm-open > a { color: var(--hmm-accent); } /* فلش کوچیک برای هر آیتمی که زیرمنو/مگامنو داره — با CSS خالص */ .hmm-menu > li.menu-item-has-children > a::after { content: ""; inline-size: 7px; block-size: 7px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); margin-block-start: -4px; opacity: 0.6; transition: transform 0.2s ease; } .hmm-menu > li.menu-item-has-children.hmm-open > a::after { transform: rotate(225deg); margin-block-start: 2px; } /* ---------- ساب‌منوی معمولی (آیتم‌هایی که کلاس mega-menu ندارن) ---------- */ .hmm-menu .sub-menu { position: absolute; inset-inline-start: 0; top: 100%; min-width: 220px; margin: 0; padding: 8px; list-style: none; background: var(--hmm-bg); border: 1px solid var(--hmm-border); border-radius: var(--hmm-radius); box-shadow: 0 12px 32px rgba(20, 20, 40, 0.12); display: none; z-index: 60; } .hmm-menu .sub-menu .sub-menu { top: 0; inset-inline-start: 100%; } /* باز شدن با کلیک (نه هاور) — کلاس hmm-open با جاوااسکریپت اضافه میشه */ .hmm-menu > li.hmm-open > .sub-menu, .hmm-menu li.hmm-open > .sub-menu { display: block; } .hmm-menu .sub-menu li a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--hmm-text); text-decoration: none; font-size: 14px; } .hmm-menu .sub-menu li a:hover, .hmm-menu .sub-menu li a:focus-visible { background: var(--hmm-hover-bg); color: var(--hmm-accent); } /* ================================================================ مگامنو — دسکتاپ: پنل تمام‌عرض صفحه (edge-to-edge)، دو ستونه ================================================================ */ .hmm-mega-panel { display: none; position: fixed; inset-inline-start: 0; inset-inline-end: 0; top: var(--hmm-header-h); /* پیش‌فرض؛ با جاوااسکریپت روی هر باز شدن دقیق‌تر ست میشه */ max-height: 80vh; overflow-y: auto; background: var(--hmm-bg); border-block-start: 1px solid var(--hmm-border); box-shadow: 0 24px 48px rgba(20, 20, 40, 0.12); z-index: 70; } li.mega-menu.hmm-open > .hmm-mega-panel { display: block; } .hmm-mega-panel-inner { position: relative; display: flex; min-height: 260px; max-width: 1200px; margin-inline: auto; padding-inline: 24px; } .hmm-mega-groups { list-style: none; margin: 0; padding: 20px 0; flex: 0 0 320px; inline-size: 320px; } /* ستون رسانه (عکس/گیف/ویدیوی سبک) — فقط وقتی آیتم سطح‌اول کلاس mega-menu-media داره */ .hmm-mega-media { flex: 0 0 300px; inline-size: 300px; padding: 20px; padding-inline-end: 0; } .hmm-mega-media-el { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--hmm-radius); display: block; } .hmm-mega-group + .hmm-mega-group { margin-block-start: 2px; } .hmm-mega-group { position: static; /* پنل تو در توش باید نسبت به .hmm-mega-panel-inner جای‌گذاری بشه، نه نسبت به خودش */ } .hmm-mega-group-toggle, .hmm-mega-group-link-anchor { display: flex; align-items: center; gap: 14px; padding: 14px 12px; border-radius: 8px; text-decoration: none; color: var(--hmm-text); cursor: pointer; } .hmm-mega-group.is-active > .hmm-mega-group-toggle, .hmm-mega-group-toggle:hover, .hmm-mega-group-link-anchor:hover { background: var(--hmm-hover-bg); } .hmm-mega-group-title { font-weight: 600; flex: 1; } .hmm-mega-chevron { inline-size: 8px; block-size: 8px; border-inline-end: 2px solid var(--hmm-accent); border-block-end: 2px solid var(--hmm-accent); transform: rotate(-45deg); transition: transform 0.2s ease; flex-shrink: 0; } /* شورون رو به سمت "باز" (رو به بالا/فعال) بچرخون وقتی گروه انتخاب شده */ .hmm-mega-group.is-active > .hmm-mega-group-toggle .hmm-mega-chevron { transform: rotate(45deg); } .hmm-mega-goto { color: var(--hmm-accent); font-size: 16px; flex-shrink: 0; } /* پنل سمت راستِ هر گروه: توی دسکتاپ همه روی هم قرار می‌گیرن (absolute)، فقط اونی که is-active داره دیده میشه. چون absolute نسبت به نزدیک‌ترین جد position:relative میشه (یعنی .hmm-mega-panel-inner)، مهم نیست خودِ
چقدر تو در توی
  • باشه — همیشه سرجای درست می‌شینه. */ .hmm-mega-group-panel { display: none; position: absolute; top: 20px; bottom: 20px; inset-inline-start: 344px; /* عرض ستون گروه‌ها + یه فاصله */ inset-inline-end: 0; overflow-y: auto; border-inline-start: 1px solid var(--hmm-border); padding-inline-start: 24px; } /* وقتی ستون رسانه هم هست، پنل باید بعد از اون هم رد بشه */ .hmm-mega-panel.has-media .hmm-mega-group-panel { inset-inline-start: 644px; /* عرض رسانه + عرض ستون گروه‌ها */ } .hmm-mega-group-panel.is-active { display: block; } .hmm-mega-col-list { list-style: none; margin: 0; padding: 0; } .hmm-mega-list-item { border-block-end: 1px solid var(--hmm-border); } .hmm-mega-list-item:last-child { border-block-end: none; } .hmm-mega-list-link { display: flex; align-items: center; gap: 12px; padding: 13px 12px; text-decoration: none; color: var(--hmm-text); font-weight: 500; } .hmm-mega-list-link:hover, .hmm-mega-list-link:focus-visible { color: var(--hmm-accent); } .hmm-icon-wrap { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--hmm-hover-bg); color: var(--hmm-accent); flex-shrink: 0; } .hmm-icon-wrap-lg { inline-size: 40px; block-size: 40px; } .hmm-icon-wrap-lg .dashicons { font-size: 20px; inline-size: 20px; block-size: 20px; } .hmm-icon-wrap-sm { inline-size: 28px; block-size: 28px; } .hmm-icon-wrap-sm .dashicons { font-size: 15px; inline-size: 15px; block-size: 15px; } /* ================================================================ دکمه همبرگر + overlay موبایل — توی دسکتاپ کاملاً بی‌اثرن ================================================================ */ .hmm-mobile-toggle { display: none !important; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 8px; color: var(--hmm-text); } .hmm-hamburger { display: block; inline-size: 22px; block-size: 16px; position: relative; } .hmm-hamburger span { position: absolute; inset-inline-start: 0; inline-size: 100%; block-size: 2px; background: currentColor; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .hmm-hamburger span:nth-child(1) { top: 0; } .hmm-hamburger span:nth-child(2) { top: 7px; } .hmm-hamburger span:nth-child(3) { top: 14px; } .hmm-mobile-toggle[aria-expanded="true"] .hmm-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hmm-mobile-toggle[aria-expanded="true"] .hmm-hamburger span:nth-child(2) { opacity: 0; } .hmm-mobile-toggle[aria-expanded="true"] .hmm-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hmm-mobile-toggle-label { font-size: 13px; font-weight: 500; } .hmm-mobile-overlay { display: contents; /* توی دسکتاپ کاملاً بی‌اثر: