/* ============================================================ Aura Mega Menu — Frontend Styles Desktop only — mobile is untouched. ============================================================ */ :root { --aura-mm-accent: #1a1a1a; --aura-mm-bg: #ffffff; --aura-mm-border: #ebebeb; --aura-mm-heading-clr: #7b5962; --aura-mm-link-clr: #3a3a3a; --aura-mm-link-hover: #000000; --aura-mm-img-radius: 6px; --aura-mm-shadow: 0 8px 40px rgba(0, 0, 0, 0.12); --aura-mm-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); --aura-mm-panel-z: 99999; --aura-mm-panel-top: 80px; --aura-mm-panel-max-height: 70vh; } body.aura-mm-active .ct-header-aura-mega-menu, body.aura-mm-active .aura-mega-menu-nav { position: relative; z-index: 5; } body.aura-mm-active .aura-mega-menu-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } body.aura-mm-active .aura-mega-menu-list > li.has-aura-mega-panel { position: relative; } body .aura-mm-trigger { display: flex; align-items: center; gap: 2px; height: 100%; } body.aura-mm-active li.has-aura-mega-panel > .aura-mm-trigger > a.ct-menu-link, body.aura-mm-active li.has-aura-mega-panel > a.ct-menu-link { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 14px; height: 100%; min-height: 44px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aura-mm-accent); text-decoration: none; white-space: nowrap; transition: color var(--aura-mm-transition); } body.aura-mm-active li.has-aura-mega-panel > .aura-mm-trigger > a.ct-menu-link:hover, body.aura-mm-active li.has-aura-mega-panel > a.ct-menu-link:hover { color: #78555e; } .ct-header-aura-mega-menu .ct-menu-link span { text-transform: uppercase; } .aura-mm-arrow { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 44px; margin: 0; padding: 0 6px 0 2px; border: 0; background: transparent; color: inherit; cursor: pointer; flex-shrink: 0; line-height: 1; transition: transform var(--aura-mm-transition); } .aura-mm-arrow svg { width: 10px; height: 6px; display: block; fill: none !important; pointer-events: none; transition: transform var(--aura-mm-transition); } body.aura-mm-active li.has-aura-mega-panel.menu-open > .aura-mm-trigger .aura-mm-arrow svg, body.aura-mm-can-hover li.has-aura-mega-panel:hover > .aura-mm-trigger .aura-mm-arrow svg { transform: rotate(180deg); } /* Panels are moved to by JS so sticky header transforms cannot hide them */ .aura-mega-panel { position: fixed; left: 0; right: 0; top: var(--aura-mm-panel-top, 80px); width: 100%; max-height: var(--aura-mm-panel-max-height, 70vh); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--aura-mm-bg); border-top: 1px solid var(--aura-mm-border); border-bottom: 1px solid var(--aura-mm-border); z-index: var(--aura-mm-panel-z); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity var(--aura-mm-transition), visibility var(--aura-mm-transition), transform var(--aura-mm-transition); } body.aura-mm-active .aura-mega-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .aura-mega-panel__inner { display: grid; grid-template-columns: repeat(var(--aura-mm-cols, 4), minmax(0, 1fr)); gap: 0; max-width: 100%; margin: 0 auto; padding: 32px 24px 28px; } .aura-mega-col { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; } .aura-mega-col:first-child { padding-left: 0; } .aura-mega-col:last-child { padding-right: 0; border-right: none; } .aura-mega-col__heading { font-size: 18px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aura-mm-heading-clr); } .aura-mega-col__heading a { color: inherit; text-decoration: none; } .aura-mega-col__heading a:hover { text-decoration: underline; } .aura-mega-col__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .aura-mega-col__links li a { display: block; padding: 6px 0; font-size: 16px; color: var(--aura-mm-link-clr); text-decoration: none; transition: color var(--aura-mm-transition), padding-left var(--aura-mm-transition); } .aura-mega-col__links li a:hover { color: var(--aura-mm-link-hover); padding-left: 4px; } .aura-mega-col__image-card { display: flex; margin-top: auto; border-radius: var(--aura-mm-img-radius); overflow: hidden; text-decoration: none; position: relative; flex-direction: column; } .aura-mega-col__image-card img { width: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; height: 100%; max-height: clamp(210px, 15vw, 300px); } .aura-mega-col__image-card:hover img { transform: scale(1.04); } .aura-mega-col__image-label { display: block; text-align: center; font-size: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aura-mm-heading-clr); padding: 15px 4px 0; } /* Keep mobile untouched: styles only activate with body.aura-mm-active */ body:not(.aura-mm-active) .aura-mega-panel { display: none !important; }