/* Ember Elementor Menu - Frontend */ /* Widget wrapper (stays in header / layout flow) */ .eem-scope { position: relative; display: inline-block; } /* Trigger */ .eem-trigger { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; padding: 8px; line-height: 1; cursor: pointer; color: inherit; } .eem-trigger:focus-visible, .eem-close:focus-visible, .eem-submenu-toggle:focus-visible, .eem-sub-back:focus-visible { outline: 2px solid rgba(0,0,0,0.25); outline-offset: 2px; border-radius: 10px; } /* Hard enforce hidden (prevents FOUC even if theme overrides [hidden]) */ .eem-overlay[hidden], .eem-canvas[hidden] { display: none !important; } /* When JS unhides, these are the intended displays */ .eem-overlay:not([hidden]) { display: block; } .eem-canvas:not([hidden]) { display: flex; } /* ========================================================= OFF-CANVAS LAYERS (ported to ) ========================================================= */ /* Overlay (hidden by default; JS should toggle .eem-open on it too) */ .eem-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 9998; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 0s linear 220ms; } .eem-overlay.eem-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 220ms ease; } /* Canvas root */ .eem-canvas { /* Sizing vars (overridden by direction rules below) */ --eem-w: min(86vw, 380px); --eem-h: min(82vh, 720px); position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; /* default for bottom */ justify-content: flex-start; /* default for left */ /* ✅ IMPORTANT: do NOT hide with visibility, or close animation can’t be seen */ pointer-events: none; } .eem-canvas.eem-open { pointer-events: auto; } /* Inner wrapper that we animate */ .eem-canvas-inner { width: 100%; display: flex; overflow: hidden; /* CRITICAL: prevents “half of panel 2” showing */ } /* Two-panel slider (main + sub) */ .eem-panels { display: flex; width: 200%; transform: translateX(0%); transition: transform 260ms ease; will-change: transform; } /* Panel base */ .eem-panel { width: 50%; max-height: var(--eem-h); overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.22); position: relative; background: #fff; pointer-events: auto; } /* ========================================================= Direction / sizing rules IMPORTANT: after portaling, direction classes must live on .eem-canvas ========================================================= */ /* LEFT */ .eem-canvas.eem-dir-left { justify-content: flex-start; align-items: stretch; --eem-w: min(86vw, 380px); --eem-h: 100vh; } .eem-canvas.eem-dir-left .eem-canvas-inner { height: 100%; width: var(--eem-w); } .eem-canvas.eem-dir-left .eem-panel { width: var(--eem-w); max-height: 100vh; border-radius: 0; } .eem-canvas.eem-dir-left .eem-panels { width: calc(var(--eem-w) * 2); } /* RIGHT */ .eem-canvas.eem-dir-right { justify-content: flex-end; align-items: stretch; --eem-w: min(86vw, 380px); --eem-h: 100vh; } .eem-canvas.eem-dir-right .eem-canvas-inner { height: 100%; width: var(--eem-w); } .eem-canvas.eem-dir-right .eem-panel { width: var(--eem-w); max-height: 100vh; border-radius: 0; } .eem-canvas.eem-dir-right .eem-panels { width: calc(var(--eem-w) * 2); } /* BOTTOM */ .eem-canvas.eem-dir-bottom { align-items: flex-end; justify-content: center; /* bottom sheet max width */ --eem-w: min(100vw, 560px); --eem-h: min(82vh, 720px); } .eem-canvas.eem-dir-bottom .eem-canvas-inner { width: var(--eem-w); } .eem-canvas.eem-dir-bottom .eem-panel { width: var(--eem-w); border-radius: 18px 18px 0 0; max-height: var(--eem-h); } .eem-canvas.eem-dir-bottom .eem-panels { width: calc(var(--eem-w) * 2); } /* Handle / close */ .eem-handle { width: 56px; height: 5px; border-radius: 999px; background: rgba(0,0,0,0.18); margin: 10px auto 8px auto; } .eem-close { position: absolute; top: 10px; right: 12px; width: 38px; height: 38px; border-radius: 12px; border: 0; background: rgba(0,0,0,0.06); cursor: pointer; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; } /* Menu list */ .eem-menu, .eem-submenu { list-style: none; margin: 0; padding: 0; } .eem-item { border-bottom: 1px solid rgba(0,0,0,0.06); } .eem-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; } /* ✅ IMPORTANT: Typography is controlled by Elementor (don’t hard-code font sizes here) */ .eem-link { text-decoration: none; color: #111; letter-spacing: -0.02em; font: inherit; /* inherits family/size/weight/line-height */ } .eem-submenu-toggle { border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 12px; color: rgba(0,0,0,0.45); } .eem-submenu { display: none; /* Nested UL hidden; JS clones into sub-panel */ } /* Auth row */ .eem-auth { padding: 14px 18px 18px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: antiquewhite; } .eem-auth-user { font-size: 16px; font-weight: 600; font-family: poppins; color: black; } .eem-auth-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); background: #111; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; } /* Sub panel */ .eem-panel-sub { background: #fff; } .eem-sub-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; background: inherit; z-index: 2; } .eem-sub-back { border: 0; background: rgba(0,0,0,0.06); width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; } .eem-sub-title { font-size: 14px; font-weight: 700; color: rgba(0,0,0,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================= Animation states IMPORTANT: after portaling, open/sub-open classes must live on .eem-canvas ========================================================= */ /* Animate in/out per direction */ .eem-canvas.eem-dir-left .eem-canvas-inner, .eem-canvas.eem-dir-right .eem-canvas-inner, .eem-canvas.eem-dir-bottom .eem-panel { transform: translateX(0) translateY(0); transition: transform 260ms ease; } /* Closed positions */ .eem-canvas.eem-dir-left .eem-canvas-inner { transform: translateX(-105%); } .eem-canvas.eem-dir-right .eem-canvas-inner { transform: translateX(105%); } .eem-canvas.eem-dir-bottom .eem-panel { transform: translateY(105%); } /* Open positions */ .eem-canvas.eem-open.eem-dir-left .eem-canvas-inner { transform: translateX(0); } .eem-canvas.eem-open.eem-dir-right .eem-canvas-inner { transform: translateX(0); } .eem-canvas.eem-open.eem-dir-bottom .eem-panel { transform: translateY(0); } /* Submenu slide */ .eem-canvas.eem-sub-open .eem-panels { transform: translateX(-50%); } /* Hide widget on desktop (default) */ @media (min-width: 1025px) { .eem-hide-desktop { display: none !important; } } /* ========================================================= Desktop menu (standard navigation) ========================================================= */ .eem-desktop-nav { display: block; } .eem-mobile-ui { display: none; } .eem-desktop-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 22px; } .eem-desktop-menu li { position: relative; margin: 0; padding: 0; } .eem-desktop-menu a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .eem-desktop-menu ul { list-style: none; margin: 0; padding: 10px 0; position: absolute; left: 0; top: 100%; min-width: 220px; background: #fff; border: 1px solid rgba(0,0,0,0.10); border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,0.16); display: none; z-index: 9999; } .eem-desktop-menu li:hover > ul { display: block; } .eem-desktop-menu ul li { width: 100%; } /* Close button: transparent in all states */ .eem-close, .eem-close:hover, .eem-close:active, .eem-close:focus, .eem-close:focus-visible { background: transparent !important; color: #000; } /* Trigger button: transparent in all states */ .eem-trigger, .eem-trigger:hover, .eem-trigger:active, .eem-trigger:focus, .eem-trigger:focus-visible { background: transparent !important; } /* Submenu toggle styled exactly like back button (match .eem-sub-back) */ .eem-submenu-toggle, .eem-submenu-toggle:hover, .eem-submenu-toggle:active, .eem-submenu-toggle:focus, .eem-submenu-toggle:focus-visible { border: 0; background: rgba(0,0,0,0.06); width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; color: inherit; padding: 0; } .eem-desktop-menu ul a { display: block; width: 100%; padding: 10px 14px; white-space: nowrap; } .eem-desktop-menu ul ul { top: 0; left: 100%; } /* Responsive: tablet + mobile use off-canvas UI */ @media (max-width: 1024px) { .eem-desktop-nav { display: none; } .eem-mobile-ui { display: inline-block; } } /* ========================================================= Premium stagger animation (menu items) ========================================================= */ @keyframes eemItemIn { 0% { opacity: 0; transform: translateY(14px) scale(0.98); } 60% { opacity: 1; transform: translateY(-4px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* When menu opens, animate items one-by-one */ .eem-canvas.eem-open .eem-panel-main .eem-item, .eem-canvas.eem-open.eem-sub-open .eem-panel-sub .eem-submenu--cloned > li { opacity: 0; animation: eemItemIn 520ms cubic-bezier(.18,.9,.2,1) both; animation-delay: var(--eem-item-delay, 0ms); will-change: transform, opacity; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .eem-canvas.eem-open .eem-panel-main .eem-item, .eem-canvas.eem-open.eem-sub-open .eem-panel-sub .eem-submenu--cloned > li { animation: none !important; opacity: 1 !important; } } /* Force submenu icon to render on real mobiles (SVG + FontAwesome) */ .eem-submenu-toggle { color: rgba(0,0,0,0.70) !important; /* don’t rely on inherit */ -webkit-text-fill-color: currentColor; /* iOS Safari quirk */ } .eem-submenu-toggle svg, .eem-submenu-toggle i { display: block !important; width: 20px !important; height: 20px !important; font-size: 20px !important; line-height: 1 !important; } /* SVG icons: make sure they actually draw */ .eem-submenu-toggle svg { fill: currentColor !important; stroke: currentColor !important; }