/* ═══════════════════════════════════════════════════════════════ MEGA MENU · Ascendion · Figma 681:4649 (default) / 681:4584 (active) 681:4713 (mobile) / 681:4773 (mobile dropdown) One markup serves both layouts: · Desktop ≥1024px — L1 list (left) + vertical rule + the active L1's L2 panel (absolutely placed into the middle column) + two featured article cards (right). · Mobile ≤1023px — full-width accordion: tapping an L1 item with a panel expands its L2 list inline; article cards are hidden. Reuses home.css atoms: .pixel-arrow, .cta-primary*. ═══════════════════════════════════════════════════════════════ */ .mega { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--neutral-deep-black); color: var(--neutral-white); overflow-y: auto; -webkit-overflow-scrolling: touch; /* Desktop geometry · used by the absolute panel + article offset. */ --mega-pad-x: 60px; --mega-pad-y: var(--space-80); --mega-l1-w: 427px; --mega-gap: var(--space-20); --mega-rule-w: 1px; --mega-panel-w: 406px; } .mega[hidden] { display: none; } /* ── Embedded mode (home.html) ─────────────────────────────────── The page already has a fixed site header, so the overlay must NOT draw its own bar or shift the layout. It sits *under* the site nav (which keeps z-index:10) and pads its content below the nav. Scroll is not locked on , so the scrollbar never disappears → no header/layout shift. */ .mega--embedded { z-index: 9; } .mega--embedded .mega__bar { display: none; } /* Nav hamburger ⇄ ✕ swap · JS toggles .is-open on the menu button when the embedded mega opens, so the header icon flips to a close cross. */ .nav__icon--menu .nav__close { display: none; } .nav__icon--menu.is-open .nav__hamburger { display: none; } .nav__icon--menu.is-open .nav__close.nav__icon-desktop { display: block; } @media (max-width: 719px) { .nav__icon--menu.is-open .nav__close.nav__icon-desktop { display: none; } .nav__icon--menu.is-open .nav__close.nav__icon-mobile { display: block; } } .mega--embedded .mega__content { padding-top: calc(var(--mega-nav-h, 76px) + var(--space-32)); } /* keep the absolute middle panel aligned with the pushed-down content top */ .mega--embedded .mega__panel { top: calc(var(--mega-nav-h, 76px) + var(--space-32)); } /* ── Top bar ─────────────────────────────────────────────────── */ .mega__bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-20); padding: var(--responsive-spacing-12) var(--margin-margin); border-bottom: 1px solid var(--neutral-slate-grey); } .mega__logo { display: inline-flex; align-items: center; color: var(--neutral-white); } .mega__logo svg { width: 156px; height: auto; display: block; fill: currentColor; } .mega__actions { display: flex; align-items: center; gap: 10px; } /* Search chip · the inline SVG carries its own translucent chassis. */ .mega__icon { display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; } .mega__icon svg { width: 52px; height: 52px; display: block; } /* Close · mint square with a black ✕ */ .mega__close { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; padding: 0; cursor: pointer; background: var(--brand-neural-mint); color: var(--neutral-black); } .mega__close svg { display: block; } /* ── Content area ────────────────────────────────────────────── */ .mega__content { position: relative; flex: 1; min-height: 0; display: flex; align-items: stretch; gap: var(--mega-gap); padding: var(--mega-pad-y) var(--mega-pad-x); } /* Left column (427px) = menu (hugs its content) + divider, spaced apart. The divider therefore sits at the column's right edge, matching Figma. */ .mega__l1col { flex: 0 0 var(--mega-l1-w); display: flex; justify-content: space-between; align-items: stretch; } .mega__l1 { display: flex; flex-direction: column; align-items: stretch; gap: 36px; } .mega__item { width: 100%; } .mega__l1-link { display: flex; align-items: center; justify-content: space-between; gap: 36px; width: 100%; background: transparent; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular); font-size: var(--font-h3); line-height: var(--lh-h3); letter-spacing: -0.32px; color: var(--neutral-white); transition: color 200ms ease; } /* .mega__l1-link:hover { color: var(--brand-neural-mint); } */ .mega__item.is-active > .mega__l1-link { color: var(--brand-neural-mint); font-weight: var(--weight-plain-ultrabold); } .mega__l1-arrow { flex-shrink: 0; width: 10px; /* Figma Desktop-arrow · 10×20 */ color: currentColor; transition: transform 200ms ease; } /* Vertical divider + mint corner pixel between L1 and the panel/articles */ .mega__rule { flex: 0 0 var(--mega-rule-w); align-self: stretch; position: relative; background: var(--neutral-slate-grey); } .mega__rule-pixel { position: absolute; top: 0; left: 0; width: var(--space-20); height: var(--space-20); background: var(--brand-neural-mint); } /* ── L2 panels · absolutely placed into the middle column on desktop ── */ .mega__panel { display: none; position: absolute; top: var(--mega-pad-y); bottom: var(--mega-pad-y); /* after the 427 left column + 20 gap + 20 inner pad → middle column */ left: calc(var(--mega-pad-x) + var(--mega-l1-w) + var(--mega-gap) + var(--mega-gap)); width: var(--mega-panel-w); } .mega__item.is-active > .mega__panel { display: flex; } /* Promo panel (AAVA) */ .mega__panel--promo { flex-direction: column; justify-content: space-between; gap: var(--space-24); } .mega__promo-head { display: flex; flex-direction: column; gap: var(--space-24); } .mega__promo-title { margin: 0; font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular); font-size: var(--font-h2); line-height: var(--lh-h2); letter-spacing: -0.52px; color: var(--neutral-white); } .mega__promo-sub { margin: 0; font-family: var(--typeface-primary); font-weight: var(--weight-plain-regular); font-size: var(--font-h6); line-height: var(--lh-h6); letter-spacing: -0.24px; color: var(--neutral-white); } .mega__sup { font-size: 0.645em; vertical-align: super; line-height: 0; } .mega__promo-cta { align-self: flex-start; } /* Resting state in the menu shows the mint arrow chip (Figma "Dark-CTA Hover"). */ .mega__promo-cta .cta-primary__arrow { background: var(--brand-neural-mint); color: var(--neutral-black); } /* List panel (What We Deliver / Who We Are / Newsroom) */ .mega__panel--list { flex-direction: column; list-style: none; margin: 0; padding: 0; gap: var(--space-16); } .mega__panel--list a { font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_l); line-height: var(--lh-body_l); color: var(--neutral-light-grey); white-space: nowrap; transition: color 200ms ease; } header.mega__bar a.cta-primary.cta-primary--light.mega__connect span.cta-primary__arrow span.pixel-arrow { color: #fff; } /* .mega__panel--list li:first-child a { color: var(--brand-neural-mint); } */ .mega__panel--list a:hover { color: var(--brand-neural-mint); } /* ── Featured article cards (right column · desktop) ──────────── */ .mega__articles { flex: 1; min-width: 0; /* clear the absolutely-positioned middle panel: 20 pad + 406 panel + 20 gap */ margin-left: 30%; display: flex; flex-direction: column; justify-content: space-between; } .mega__article { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-16); } .mega__article-media { position: relative; flex: 1; min-height: 0; overflow: hidden; max-height: 163px; } .mega__article-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mega__article-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.7) 100%); pointer-events: none; } .mega__article-foot { display: flex; flex-direction: column; gap: var(--space-16); flex-shrink: 0; } .mega__article-text { margin: 0; font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_xxs); line-height: var(--lh-body_xxs); color: var(--neutral-soft-grey); } .mega__article-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--typeface-secondary); font-weight: var(--weight-regular); font-size: var(--font-body_xxs); line-height: var(--lh-body_xxs); color: var(--neutral-white); transition: color 200ms ease; } .mega__article-cta:hover { color: var(--brand-neural-mint); } .mega__article-divider { flex-shrink: 0; margin: var(--space-16) 0; border: 0; border-top: 1px solid var(--neutral-slate-grey); } /* ═══════════════════════════════════════════════════════════════ MOBILE / TABLET ≤1023px — full-width accordion ═══════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { .mega__bar { padding: var(--space-20) var(--space-20) var(--space-16); border-bottom: 0; } .mega__logo svg { width: 118px; } .mega__icon svg { width: 40px; height: 40px; } .mega__close { width: 40px; height: 40px; } .mega__connect { display: none; } /* Connect CTA hidden on mobile */ .mega__content { position: static; flex-direction: column; gap: 0; padding: var(--space-48) var(--space-20); } .mega--embedded .mega__content { padding-top: calc(var(--mega-nav-h, 64px) + var(--space-20)); } .mega__rule, .mega__articles { display: none; } .mega__l1col { flex: none; display: block; width: 100%; } .mega__l1 { flex: none; width: 100%; gap: 0; } .mega__item { width: 100%; border-bottom: 1px solid var(--neutral-charcoal); } .mega__l1-link { padding: var(--space-16) 0; font-size: 20px; line-height: 28px; letter-spacing: -0.2px; } /* Active L1 grows to the mint ultrabold headline + rotated arrow. */ .mega__item.is-active > .mega__l1-link { font-size: 32px; line-height: 40px; letter-spacing: -0.32px; } .mega__item.is-active .mega__l1-arrow { transform: rotate(90deg); } /* Panels flow inline (accordion) on mobile. */ .mega__panel { position: static; width: 100%; display: none; padding-bottom: var(--space-24); } .mega__item.is-active > .mega__panel { display: flex; } /* AAVA's promo panel is desktop-only — on mobile AAVA is a plain link, never an enlarged/active accordion header. */ .mega__panel--promo { display: none !important; } .mega__item--promo.is-active > .mega__l1-link { font-size: 20px; line-height: 28px; letter-spacing: -0.2px; font-weight: var(--weight-plain-regular); color: var(--neutral-white); } .mega__panel--list { justify-content: flex-start; gap: 14px; } .mega__panel--list a { font-size: var(--font-body_xs); line-height: 28px; color: var(--neutral-medium-grey); white-space: normal; } /* On mobile every L2 item is medium-grey (no mint first item). */ .mega__panel--list li:first-child a { color: var(--neutral-medium-grey); } } /* ── Demo launcher page (mega-menu.html only) ────────────────── */ .mega-demo { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; background: var(--neutral-black); } .mega-demo__open { font-family: var(--typeface-secondary); font-weight: var(--weight-medium); font-size: var(--font-cta); line-height: var(--lh-cta); color: var(--neutral-black); background: var(--brand-neural-mint); border: 0; padding: var(--space-16) var(--space-24); cursor: pointer; }