.mnm-root{ --mnm-bg:#ffffff; --mnm-text:#15151a; --mnm-muted:#6b6b70; --mnm-border:rgba(0,0,0,.08); font-family: var(--awb-fusion-font-family-typography) !important; } .mnm-root *{box-sizing:border-box;} /* ===== Trigger button ===== */ .mnm-topbar{ display:flex; align-items:center; justify-content:flex-end; } .mnm-burger{ width:32px;height:32px; background:none;border:none; display:flex;flex-direction:column;justify-content:center;gap:6px; cursor:pointer; padding:0; } .mnm-burger span{ display:block;height:2px;width:100%;background:#15151a; transition:transform .3s ease, opacity .3s ease; } .mnm-burger.active span:nth-child(1){transform:translateY(8px) rotate(45deg);} .mnm-burger.active span:nth-child(2){opacity:0;} .mnm-burger.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} /* ===== Menu overlay ===== */ .mnm-overlay{ position:fixed; top:0;left:0;right:0;bottom:0; background:var(--mnm-bg); z-index:99999; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .45s cubic-bezier(.65,0,.35,1); overflow:hidden; visibility:hidden; box-shadow:0 0 30px rgba(0,0,0,.12); } .mnm-overlay.open{ transform:translateY(0); visibility:visible; } .mnm-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; flex-shrink:0; } .mnm-header .mnm-logo{font-size:22px;font-weight:600;color:var(--mnm-text);letter-spacing:.5px;} .mnm-header .mnm-actions{display:flex;gap:18px;align-items:center;} .mnm-icon-btn{ background:none;border:none;color:var(--mnm-text);cursor:pointer; display:flex;align-items:center;justify-content:center; width:28px;height:28px; padding:0; } .mnm-icon-btn svg{width:22px;height:22px;} /* ===== Panels container (slides left/right) ===== */ .mnm-panels{ position:relative; flex:1; overflow:hidden; } .mnm-panel{ position:absolute; top:0;left:0; width:100%;height:100%; overflow-y:auto; padding:10px 20px 40px; transform:translateX(0); transition:transform .4s cubic-bezier(.65,0,.35,1); background:var(--mnm-bg); } .mnm-panel.mnm-sub{ transform:translateX(100%); } .mnm-panel.mnm-sub.active{ transform:translateX(0); } .mnm-panel.mnm-main.shift{ transform:translateX(-100%); } .mnm-back-btn{ display:flex; align-items:center; gap:8px; color:var(--mnm-muted); background:none;border:none; font-size:13px; letter-spacing:1px; text-transform:uppercase; padding:14px 0; cursor:pointer; } .mnm-back-btn svg{ width:40px; height:40px; } .mnm-sub-title{ color:var(--mnm-text); font-size:26px; font-weight:600; padding:10px 0 16px; } .mnm-list{list-style:none;margin:0;padding:0;} .mnm-list li{ border-bottom:1px solid var(--mnm-border); } .mnm-link{ display:flex; align-items:center; justify-content:space-between; color:var(--mnm-text); text-decoration:none; font-size:28px; padding:20px 0; background:none; border:none; width:100%; text-align:left; cursor:pointer; font-family: var(--awb-fusion-font-family-typography) !important; } .mnm-link svg{width:22px;height:22px;flex-shrink:0;color:var(--mnm-text);} .mnm-sub-list{ list-style:none; margin:0; padding:0; border-bottom: 1px solid #ddd; } .mnm-sub-list li{padding:0;} .mnm-sub-list a{ display:block; color:var(--mnm-muted); text-decoration:none; font-size:19px; padding:14px 0; } /* ===== Language switcher (inside menu header) ===== */ .mnm-lang{ display:inline-flex; align-items:center; height:40px; background:#f4f4f4; border-radius:999px; padding:3px; box-sizing:border-box; overflow:hidden; } .mnm-lang__en{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:none; background:#ebebeb; color:#15151a; font-size:14px; font-weight:700; letter-spacing:.02em; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease; } .mnm-lang__en:hover{background:#e0e0e0;} .mnm-lang__options{ display:flex; align-items:center; gap:14px; width:0; opacity:0; overflow:hidden; white-space:nowrap; margin-left:0; padding-right:0; transition:width .35s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1), margin-left .35s cubic-bezier(.4,0,.2,1), padding-right .35s cubic-bezier(.4,0,.2,1); } .mnm-lang.is-open .mnm-lang__options{ opacity:1; margin-left:12px; padding-right:10px; /* width is set inline by JS to the exact content width, so the transition has no dead time */ } .mnm-lang__item{ font-size:14px; font-weight:700; text-decoration:none; letter-spacing:.02em; opacity:.9; transition:opacity .2s ease; } .mnm-lang__item:hover{opacity:1; color: #000 !important} .mnm-lang__item--es{color:#8c2f2f;} .mnm-lang__item--fr{color:#1c2b52;} .mnm-lang__item--de{color:#2f6b52;} .mnm-lang__item--it{color:#c0432f;} .mnm-lang__close{ display:flex; align-items:center; justify-content:center; width:18px; height:18px; border:none; background:transparent; color:#15151a; cursor:pointer; padding:0; opacity:.85; transition:opacity .2s ease, transform .2s ease; } .mnm-lang__close:hover{opacity:1;transform:scale(1.1);} (function(){ var burgerBtn = document.getElementById('mnmBurgerBtn'); var closeBtn = document.getElementById('mnmCloseBtn'); var overlay = document.getElementById('mnmOverlay'); var mainPanel = document.getElementById('mnmMainPanel'); if(!burgerBtn || !overlay) return; function openMenu(){ overlay.classList.add('open'); burgerBtn.classList.add('active'); document.body.style.overflow = 'hidden'; } function closeMenu(){ overlay.classList.remove('open'); burgerBtn.classList.remove('active'); document.body.style.overflow = ''; setTimeout(function(){ mainPanel.classList.remove('shift'); document.querySelectorAll('.mnm-panel.mnm-sub').forEach(function(p){ p.classList.remove('active'); }); }, 450); } burgerBtn.addEventListener('click', function(){ if(overlay.classList.contains('open')){ closeMenu(); } else { openMenu(); } }); if(closeBtn) closeBtn.addEventListener('click', closeMenu); document.querySelectorAll('.mnm-link[data-target]').forEach(function(btn){ btn.addEventListener('click', function(){ var targetId = btn.getAttribute('data-target'); var target = document.getElementById(targetId); mainPanel.classList.add('shift'); target.classList.add('active'); }); }); document.querySelectorAll('[data-back]').forEach(function(btn){ btn.addEventListener('click', function(){ var sub = btn.closest('.mnm-panel.mnm-sub'); sub.classList.remove('active'); mainPanel.classList.remove('shift'); }); }); // ===== Language switcher inside menu header ===== var langRoot = document.getElementById('mnmLang'); var langToggle = document.getElementById('mnmLangToggle'); var langClose = document.getElementById('mnmLangClose'); var langOptions = document.getElementById('mnmLangOptions'); if(langRoot && langToggle && langOptions){ function openLang(){ // measure the natural width of the content first (still 0 visually since width:0 is set) langOptions.style.width = 'auto'; var natural = langOptions.scrollWidth; langOptions.style.width = '0px'; // force reflow so the browser registers the 0px before we animate to natural width langOptions.offsetWidth; langRoot.classList.add('is-open'); langToggle.setAttribute('aria-expanded', 'true'); requestAnimationFrame(function(){ langOptions.style.width = natural + 'px'; }); } function closeLang(){ langRoot.classList.remove('is-open'); langToggle.setAttribute('aria-expanded', 'false'); langOptions.style.width = '0px'; } langToggle.addEventListener('click', function(e){ e.stopPropagation(); if(langRoot.classList.contains('is-open')){ closeLang(); } else { openLang(); } }); if(langClose){ langClose.addEventListener('click', function(e){ e.stopPropagation(); closeLang(); }); } document.addEventListener('click', function(e){ if(!langRoot.contains(e.target)) closeLang(); }); } })();
Go to Top