/* =========================================================== AZ-style Mega Menu — production CSS - Full-width header & panels - Hover-to-open on desktop (JS adds .is-open / handles delay) - Written with logical properties -> works for LTR and RTL automatically based on the WordPress sets. =========================================================== */ :root{ --bg:#000000; --panel-bg:#050505; --text:#ffffff; --muted:rgba(255,255,255,.55); --border:rgba(255,255,255,.10); --accent1:#6E7BF2; --accent2:#B26BF5; --gradient:linear-gradient(90deg,var(--accent1),var(--accent2)); --header-h:88px; --content-max: 1400px; /* used only for INNER content alignment, header/panels stay 100% wide */ --font: "Poppins","Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif; } html[lang="fa"], html[dir="rtl"]{ --font: "Vazirmatn","Poppins",Tahoma,"Segoe UI",Arial,sans-serif; } *{box-sizing:border-box;} .mm-header{ position:sticky; top:0; z-index:999; width:100%; } .mm-wrap{ width:100%; min-height:var(--header-h); display:flex; align-items:center; gap:28px; padding-inline:32px; position:relative; } .mm-logo-block{ display:flex; flex-direction:column; line-height:1; margin-inline-end:auto; } .mm-logo{ font-size:34px; font-weight:700; letter-spacing:.5px; text-decoration:none; color:var(--text); white-space:nowrap; } .mm-tagline{ margin-top:6px; font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .mm-lang{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.3px; white-space:nowrap; color:var(--text); } .mm-lang svg{ width:18px; height:18px; opacity:.9; } .mm-nav{ display:flex; align-items:center; gap:14px; margin-inline-start:auto; white-space:nowrap; } .mm-item{ position:static; } /* panels are full-width, positioned from the header, not the item */ .mm-nav-btn, .mm-nav-link{ background:none; border:none; color:var(--text); font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; text-decoration:none; cursor:pointer; padding:6px 2px; display:flex; align-items:center; gap:4px; } .mm-nav-btn .mm-caret{ font-size:10px; transition:transform .25s ease; display:inline-block; } .mm-nav-btn[aria-expanded="true"] .mm-caret{ transform:rotate(180deg); } .mm-sep{ color:var(--muted); font-size:13px; } .mm-cta{ border:1px solid var(--accent1); color:var(--text); text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:12px 22px; border-radius:6px; white-space:nowrap; transition:background .2s ease; } .mm-cta:hover{ background:rgba(110,123,242,.15); } .mm-burger{ display:none; width:38px;height:38px; border:1px solid var(--border); border-radius:8px; background:transparent; cursor:pointer; position:relative; } .mm-burger span,.mm-burger::before,.mm-burger::after{ content:""; position:absolute; inset-inline:9px; height:2px; background:#fff; border-radius:2px; } .mm-burger::before{ top:13px; } .mm-burger span{ top:18px; } .mm-burger::after{ top:23px; } /* ============ FULL-WIDTH PANELS ============ */ .mm-panel{ position:absolute; top:100%; inset-inline:0; width:100%; background:var(--panel-bg); border-top:1px solid var(--border); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .22s ease, transform .22s ease, visibility .22s; max-height:calc(100vh - var(--header-h)); overflow:auto; } .mm-panel.is-open{ opacity:1; visibility:visible; transform:translateY(0); } .mm-panel-inner{ max-width:var(--content-max); margin:0 auto; padding:56px 32px 70px; position:relative; } .mm-panel::after{ content:""; position:absolute; inset-inline:8%; bottom:0; height:70px; background:var(--gradient); filter:blur(60px); opacity:.35; pointer-events:none; } /* ---- Services mega grid ---- */ .mm-services-grid{ display:grid; grid-template-columns:1fr 1fr 1.15fr; grid-template-rows:auto auto; gap:48px 56px; position:relative; z-index:1; } .mm-cat{ display:flex; flex-direction:column; } .mm-cat-head{ display:flex; align-items:center; gap:16px; margin-bottom:22px; } .mm-cat-icon{ width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center; } .mm-cat-icon svg{ width:100%; height:100%; stroke:#fff; fill:none; stroke-width:1.4; } .mm-cat-title{ font-size:30px; font-weight:500; letter-spacing:.2px; } .mm-cat ul{ list-style:none; margin:0; padding:0; } .mm-cat li{ margin-bottom:14px; } .mm-cat a{ text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--text); display:inline-flex; align-items:baseline; gap:8px; transition:opacity .15s ease, transform .15s ease; } .mm-cat a:hover{ opacity:.6; transform:translateX(4px); } html[dir="rtl"] .mm-cat a:hover{ transform:translateX(-4px); } .mm-cat a::before{ content:"✱"; font-size:11px; color:var(--muted); } .mm-sub-col{ grid-row:1 / 3; } .mm-sub-title{ font-size:30px; font-weight:500; background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; text-decoration:none; display:block; margin-bottom:26px; max-width:220px; line-height:1.25; } .mm-sub-thumb{ border-radius:18px; background:linear-gradient(160deg,#15151c,#05050a 60%); border:1px solid var(--border); min-height:230px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; letter-spacing:.3px; text-transform:uppercase; overflow:hidden; } .mm-sub-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } /* ---- Simple dropdown (Company-style) ---- */ .mm-company-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; position:relative; z-index:1; } .mm-company-links a{ display:block; font-size:38px; font-weight:500; text-decoration:none; color:var(--text); margin-bottom:22px; transition:opacity .15s ease, transform .15s ease; } .mm-company-links a:hover{ opacity:.6; transform:translateX(4px); } html[dir="rtl"] .mm-company-links a:hover{ transform:translateX(-4px); } .mm-company-thumb{ border-radius:18px; background:linear-gradient(160deg,#15151c,#05050a 60%); border:1px solid var(--border); min-height:260px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; letter-spacing:.3px; text-transform:uppercase; overflow:hidden; } .mm-company-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } /* ============ MOBILE ============ */ @media (max-width: 980px){ .mm-nav, .mm-cta, .mm-tagline{ display:none; } .mm-burger{ display:block; } .mm-wrap{ padding-inline:20px; } .mm-panel{ position:fixed; top:0; bottom:0; max-height:none; } .mm-panel-inner{ padding:28px 24px 40px; } .mm-services-grid{ grid-template-columns:1fr; gap:36px; } .mm-sub-col{ grid-row:auto; } .mm-cat-title{ font-size:24px; } .mm-sub-title{ font-size:24px; max-width:none; } .mm-company-grid{ grid-template-columns:1fr; gap:24px; } .mm-company-links a{ font-size:28px; } .mm-mobile-nav{ display:none; position:fixed; top:0; inset-inline:0; bottom:0; background:var(--bg); padding:12px 20px 30px; overflow:auto; z-index:998; } .mm-mobile-nav.is-open{ display:block; } .mm-mobile-nav a, .mm-mobile-nav button{ display:flex; justify-content:space-between; width:100%; text-align:start; background:none; border:none; border-bottom:1px solid var(--border); color:var(--text); font-family:inherit; font-size:16px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; padding:18px 4px; cursor:pointer; } }