/** * Mega menu styles for the Hello Elementor Child Mega Menu theme. * * Hand-compiled from the original SCSS demo with these changes: * - All dark-mode rules removed (feature deleted). * - Global reset / html / body base styles / body grid background removed. * - Every selector is scoped under #mm-header to avoid collisions with * WordPress, Hello Elementor, and Elementor styles. * - .switch styles removed; overlay external cursor image removed. * - --border-color variable defined (was referenced but undefined). * - Mega menu columns use flexible flex sizing instead of fixed 25%. * - Contact Us button styles added. * - Breakpoints expanded: $breakpoint = 768px, $breakpoint + 208 = 976px. */ /* Kept unscoped on purpose: applied to by the menu script. */ body.scroll-lock { overflow: hidden !important; touch-action: none; overscroll-behavior: none; } .elementor-widget-text-editor p { margin-top: 0; } /* Explicit list resets inside the header (WP/Elementor may add list styles). */ #mm-header .menu__inner, #mm-header ul.submenu, #mm-header .submenu__list { list-style: none; list-style-type: none; margin: 0; padding: 0; } /* Header Section */ #mm-header { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 100; margin: 0 auto; background-color: var(--e-global-color-07d4848); /* border-bottom: 1px solid #eee; */ } #mm-header .menu__link { font-family: "DM Sans", sans-serif; font-size: 17px; font-weight: 400; line-height: 24px; color: #303030; text-align: center; text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Offset the fixed header below the WordPress admin bar. */ body.admin-bar #mm-header { top: 32px; } @media (max-width: 782px) { body.admin-bar #mm-header { top: 46px; } } #mm-header .navbar { display: flex; /* flex-wrap: wrap; */ align-content: center; align-items: center; justify-content: space-between; /* width: 100%; */ height: 65px; margin: 0 auto; } #mm-header .navbar__left { display: flex; align-items: center; } #mm-header .navbar__center { display: flex; } #mm-header .navbar__right { display: flex; align-items: center; justify-content: flex-end; } @media (max-width: 767px) { #mm-header .navbar__left { flex: 0 0 auto; } #mm-header .navbar__center { flex: 0 0 100%; order: 3; align-items: center; } #mm-header .navbar__right { flex: 0 0 auto; align-items: center; } } /* Brand / logo */ #mm-header .brand { display: flex; align-items: center; order: 1; font-size: 20px; font-weight: 700; color: #000; text-decoration: none; } #mm-header .brand:hover { color: var(--primary-color); } #mm-header .brand svg { width: 60px; height: 60px; } #mm-header .brand .custom-logo-link { display: flex; align-items: center; } #mm-header .brand .custom-logo, #mm-header .brand img { display: block; max-height: 63px; width: auto; height: auto; } /* Contact Us button (replaces the dark/light switch). */ #mm-header .contact-btn { display: inline-flex; align-items: center; padding: 10px 22px; background: var(--primary-color); color: #fff; font-weight: 600; border-radius: 6px; text-decoration: none; transition: background 0.3s ease; white-space: nowrap; } #mm-header .contact-btn:hover { background: #a01d28; color: #fff; } @media (max-width: 900px) { #mm-header .contact-btn { padding: 8px 14px; font-size: 13px; } #mm-header .navbar { flex-wrap: wrap; } } @media (max-width: 1100px) { #mm-header .elementor-button { padding: 12px 20px; font-size: 16px; width: max-content; } #mm-header .menu__link { font-size: 16px; } } /* Mobile slide-in menu panel */ @media (max-width: 900px) { #mm-header .menu { position: fixed; top: 0; left: 0; width: 350px; max-width: 100%; height: 100vh; z-index: 100; overflow-x: hidden; overflow-y: auto; background-color: #fff; transform: translate(-100%); transition: all 0.4s ease-in-out; -webkit-overflow-scrolling: touch; } #mm-header .menu.is-active { transform: translate(0%); } } /* Top-level menu list */ @media (min-width: 901px) { #mm-header .menu .menu__inner { display: flex; gap: 5px; transform: none !important; } } @media (max-width: 900px) { #mm-header .menu .menu__inner { position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; padding-top: 30px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0); -ms-overflow-style: -ms-autohiding-scrollbar; scrollbar-width: none; } #mm-header .menu .menu__inner.is-current-slide { display: flex; flex-flow: column; gap: 10px; } #mm-header .menu .menu__inner.is-sliding { transform: translateX(-100%); } } #mm-header .menu .menu__inner .menu__item { position: relative; } /* Mega menu panels span the full header width (kept as :has(), modern browsers). */ @media (min-width: 901px) { #mm-header .menu .menu__inner .menu__item:has(.megamenu__text), #mm-header .menu .menu__inner .menu__item:has(.megamenu__image) { position: static; } #mm-header .menu .menu__inner .menu__item:hover>.submenu { opacity: 1; visibility: visible; z-index: 99; } } /* Menu links */ #mm-header .menu__link { color: #000; text-decoration: none; transition: all 0.3s ease; cursor: pointer; pointer-events: auto; } #mm-header .menu__link:hover { color: var( --e-global-color-429dcc1 ); } #mm-header .menu__link i { font-size: 18px; transition: transform 0.3s ease; } #mm-header .menu .menu__inner .menu__item .menu__link { display: flex; align-items: center; justify-content: space-between; } @media (min-width: 901px) { #mm-header .menu .menu__inner .menu__item .menu__link { padding: 10px; } } @media (max-width: 900px) { #mm-header .menu .menu__inner .menu__item .menu__link { font-size: 16px; padding: 10px 15px; } #mm-header .menu .menu__inner .menu__item .menu__link i { transform: rotate(-90deg); } } /* Mobile back button (injected by the script). */ #mm-header .menu__item.back-btn { display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid #eee; margin-bottom: 10px; position: sticky; top: 0; background-color: #fff; } #mm-header .menu__item.back-btn .menu__link { padding: 15px; font-weight: 500; } #mm-header .menu__item.back-btn .menu__link:hover { color: var(--primary-color); } #mm-header .menu__item.back-btn .menu__link i { margin-right: 8px; transform: rotate(0); } @media (min-width: 901px) { #mm-header .menu .menu__inner .menu__item:hover>.menu__link i { transform: rotate(-180deg); } } /* Submenus: desktop dropdown panel */ @media (min-width: 901px) { #mm-header .submenu { position: absolute; z-index: 1000; top: 100%; left: 50%; min-width: 255px; padding: 15px; background: #fff; border-radius: 5px; border-top: 2px solid var( --e-global-color-accent ); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateX(-50%); transition: all 0.3s ease; } #mm-header .submenu.is-current-slide { opacity: 1; visibility: visible; transform: translateY(0); } /* Sub menu level 3, 4, 5... fly out to the right. */ #mm-header .submenu .submenu { top: 0; left: 100%; transform: translateX(-5px); } } /* Submenus: mobile full-height sliding panels */ @media (max-width: 900px) { #mm-header .submenu { position: fixed; z-index: 2000; left: 100%; top: 0; display: none; width: 100%; height: 100vh; padding: 0; opacity: 1; visibility: visible; pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0); background-color: #fff; } #mm-header .submenu.is-current-slide { pointer-events: auto; z-index: 2010; opacity: 1; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; } #mm-header .submenu.is-current-parent { display: block; z-index: 2005; } } /* Chevron direction inside desktop dropdowns */ @media (min-width: 901px) { #mm-header .submenu .menu__item .menu__link i { transform: rotate(-90deg) !important; } #mm-header .submenu .menu__item:hover>.menu__link i { transform: rotate(90deg) !important; } } /* Regular first-level dropdown */ @media (min-width: 901px) { #mm-header .submenu.megamenu__normal { max-width: 350px; width: 100%; height: auto; margin: 0 auto; top: calc(100% + 12px); padding: 15px 5px; } } /* Mega menu panels (text columns / image columns) */ @media (min-width: 901px) { #mm-header .submenu.megamenu__text, #mm-header .submenu.megamenu__image { display: flex; flex-wrap: wrap; width: 100%; height: auto; margin: 0 auto; } } @media (min-width: 976px) { #mm-header .submenu.megamenu__text, #mm-header .submenu.megamenu__image { max-width: 992px; } } /* Mega menu columns: flexible sizing, any number of columns works. */ #mm-header .submenu.megamenu__text .submenu__inner, #mm-header .submenu.megamenu__image .submenu__inner { flex: 1 1 0; min-width: 160px; padding: 0 15px; } @media (max-width: 900px) { #mm-header .submenu.megamenu__text .submenu__inner, #mm-header .submenu.megamenu__image .submenu__inner { flex: none; width: 100%; padding: 0 15px; } #mm-header .submenu.megamenu__text .submenu__inner:first-of-type, #mm-header .submenu.megamenu__image .submenu__inner:first-of-type { padding-top: 15px; } } #mm-header .submenu.megamenu__text .submenu__inner .submenu__title, #mm-header .submenu.megamenu__image .submenu__inner .submenu__title { margin: 0 0 5px; font-size: 16px; font-weight: 500; color: var(--primary-color); text-transform: uppercase; transition: all 0.3s ease; } #mm-header .submenu__title a { color: inherit; text-decoration: none; } #mm-header .submenu__title a:hover { color: var(--primary-color); } @media (max-width: 900px) { #mm-header .submenu.megamenu__text .submenu__list, #mm-header .submenu.megamenu__image .submenu__list { margin-bottom: 20px; } } #mm-header .submenu.megamenu__text .submenu__list li, #mm-header .submenu.megamenu__image .submenu__list li { display: block; line-height: 1; margin: 0 auto; } #mm-header .submenu.megamenu__text .submenu__list li .menu__link, #mm-header .submenu.megamenu__image .submenu__list li .menu__link { padding: 10px 0 !important; } /* Image mega menu variant */ #mm-header .submenu.megamenu__image .submenu__inner a { display: flex; flex-flow: column; align-items: center; } #mm-header .submenu.megamenu__image .submenu__inner a img { display: block; width: 100%; height: 150px; margin-bottom: 15px; object-fit: cover; border-radius: 10px; } @media (max-width: 900px) { #mm-header .submenu.megamenu__image .submenu__inner a { flex-flow: row; align-items: center; padding-bottom: 20px; } #mm-header .submenu.megamenu__image .submenu__inner a img { width: 30%; height: 80px; margin-bottom: 0; margin-right: 15px; } } /* Mobile overlay backdrop */ #mm-header .overlay { position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.7); transition: all 0.45s ease-in-out; pointer-events: none; } @media (max-width: 900px) { #mm-header .overlay { cursor: default; pointer-events: visible; } #mm-header .overlay.is-active { opacity: 1; visibility: visible; } } /* Burger button */ #mm-header .burger { position: relative; cursor: pointer; width: 25px; height: 15px; margin-right: 15px; display: none; } @media (max-width: 900px) { #mm-header .burger { display: block; } } #mm-header .burger .burger-line { position: absolute; display: block; left: 0; width: 100%; height: 2px; opacity: 1; border-radius: 15px; background: #000; } #mm-header .burger .burger-line:nth-child(1) { top: 0; } #mm-header .burger .burger-line:nth-child(2) { top: 8px; width: 70%; } #mm-header .burger .burger-line:nth-child(3) { top: 16px; } /* Container (scoped so it does not affect the rest of the site). */ #mm-header .container { max-width: 1400px; height: auto; margin-inline: auto; padding: 12px 20px; }