/* Bald Mobile Menu - base structural styles. Colors, backgrounds, typography, and positioning are controlled via Elementor Style controls. */ .bald-mmenu-wrap { position: relative; } /* Persistent top bar logo - sits at the top of the widget and scrolls with the page */ .bald-mmenu-topbar { position: absolute; top: 30px; left: 30px; z-index: 10000; } .bald-mmenu-logo-topbar { display: inline-block; font-size: 24px; font-weight: 700; color: #ffffff; line-height: 1; text-decoration: none; } .bald-mmenu-logo-topbar:hover { color: #ffffff; } .bald-mmenu-logo-topbar img { display: block; width: 140px; height: auto; } /* Burger button */ .bald-mmenu-burger { position: absolute; top: 30px; right: 30px; left: auto; width: 32px; height: 32px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; background: transparent; border: none; padding: 0; cursor: pointer; z-index: 9998; } .bald-mmenu-burger span { display: block; width: 100%; height: 2px; background-color: #ffffff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; } .bald-mmenu-wrap.is-open .bald-mmenu-burger { opacity: 0; visibility: hidden; pointer-events: none; } /* Panel */ .bald-mmenu-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #2b1c47; display: flex; flex-direction: column; z-index: 9999; overflow: hidden; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s; } .bald-mmenu-wrap.is-open .bald-mmenu-panel { opacity: 1; visibility: visible; transform: translateY(0); } /* Header row: logo + close button */ .bald-mmenu-header { display: flex; align-items: flex-start; justify-content: flex-end; position: relative; z-index: 2; } .bald-mmenu-close { background: transparent; border: none; cursor: pointer; font-size: 28px; line-height: 1; color: #ffffff; padding: 0; margin-left: auto; } /* Navigation links */ .bald-mmenu-nav { position: relative; z-index: 2; display: flex; flex-direction: column; margin-top: 60px; } .bald-mmenu-link { display: inline-block; color: #ffffff; text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 40px; transition: color 0.2s ease; width: fit-content; } .bald-mmenu-nav[style*="text-align: center"] .bald-mmenu-link, .bald-mmenu-nav[style*="text-align: right"] .bald-mmenu-link { width: auto; } .bald-mmenu-link:hover { color: #ff5a1f; } /* Buttons */ .bald-mmenu-buttons { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; margin-top: auto; padding-top: 40px; } .bald-mmenu-btn { display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 50px; padding: 18px 30px; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; } .bald-mmenu-btn-1 { background-color: #ff5a1f; color: #ffffff; } .bald-mmenu-btn-2 { background-color: #5aa9f0; color: #ffffff; } /* Decorative vector graphic, anchored bottom right of the panel */ .bald-mmenu-vector { position: absolute; bottom: 0; right: 0; z-index: 0; pointer-events: none; line-height: 0; } .bald-mmenu-vector img { display: block; width: 70%; height: auto; margin-left: auto; } /* Lock body scroll while menu is open (toggled via JS on ) */ html.bald-mmenu-lock { overflow: hidden; } /* Elementor editor: always show panel so it can be styled without clicking the burger */ .elementor-editor-active .bald-mmenu-panel { position: relative; opacity: 1; visibility: visible; transform: none; min-height: 640px; } .elementor-editor-active .bald-mmenu-burger { position: absolute; } .elementor-editor-active .bald-mmenu-topbar { position: absolute; }