/* * "Programs" nav dropdown — desktop mega panel + mobile off-canvas list. * Markup is synthesized by inc/programs-nav-menu.php (see that file for * why); this only styles it. Selectors deliberately include the extra * `.astra-megamenu` / `.exegypt-programs-menu*` classes so they win the * cascade against Astra's own base .sub-menu rules on specificity alone, * regardless of stylesheet load order. */ /* ========================================================================== Desktop mega panel ========================================================================== */ .main-header-menu .sub-menu.astra-megamenu { width: min(760px, calc(100vw - 40px)); padding: 8px; background-color: var(--exegypt-navy-glass, rgba(10, 22, 41, 0.78)); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--exegypt-gold-hairline, rgba(201, 162, 75, 0.25)); border-radius: 16px; box-shadow: 0 20px 50px -20px rgba(3, 8, 17, 0.65); overflow: hidden; } /* * Astra reveals submenus via `left:0` on hover/focus/toggled-on (base * hidden state sits at `left:-999em`). Override left only in that revealed * state so the panel starts centered under the "Programs" link without * fighting Astra's own show/hide mechanism. `top:100%` stays flush (no * gap) so the hover chain from link to panel isn't broken by a dead zone. * * `left` here is a pre-JS fallback only (centers on the LI itself, which * is narrow — an approximation). js/nav-programs-menu.js overwrites it * with an exact pixel value on open/scroll/resize: it centers the panel * on the link, then clamps that so the panel's edges never cross the * viewport margin, which is what actually keeps it out of the clipping * region created by `overflow-x: hidden` on — simply centering in * CSS alone let the panel's right edge cross the viewport edge, since * "Programs" sits right-of-center in this 5-item nav. */ .main-header-menu .menu-item:hover > .sub-menu.astra-megamenu, .main-header-menu .menu-item.focus > .sub-menu.astra-megamenu, .main-header-menu .menu-item > .sub-menu.astra-megamenu.toggled-on, .main-header-menu .menu-item > .sub-menu.astra-megamenu.astra-megamenu-focus { left: 50%; transform: translateX(-50%); visibility: visible; animation: exegypt-header-settle 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } .main-header-menu .menu-item > .sub-menu.astra-megamenu.exegypt-positioned { transform: none; } .exegypt-programs-menu__wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px; } .exegypt-programs-menu__tile { border-radius: 12px; } .exegypt-programs-menu__link { display: flex; flex-direction: column; height: 100%; padding: 10px; border-radius: 12px; text-decoration: none; transition: background-color 0.2s ease; } .exegypt-programs-menu__link:hover, .exegypt-programs-menu__link:focus-visible { background-color: rgba(255, 255, 255, 0.06); } .exegypt-programs-menu__media { display: block; aspect-ratio: 4 / 3; margin-bottom: 12px; background-color: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; } .exegypt-programs-menu__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--exegypt-ease-out, ease); } .exegypt-programs-menu__link:hover .exegypt-programs-menu__media img { transform: scale(1.04); } .exegypt-programs-menu__body { display: flex; flex: 1; flex-direction: column; gap: 4px; } .exegypt-programs-menu__eyebrow { color: var(--exegypt-gold, #c9a24b); font-family: "Inter", sans-serif; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; } .exegypt-programs-menu__title { color: #fff; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 1rem; line-height: 1.3; } .exegypt-programs-menu__description { color: var(--exegypt-body-text-muted, #8b96a8); font-family: "Inter", sans-serif; font-size: 0.82rem; line-height: 1.5; } .exegypt-programs-menu__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; color: var(--exegypt-gold, #c9a24b); font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.82rem; } .exegypt-programs-menu__cta svg { width: 14px; height: 14px; transition: transform 0.25s var(--exegypt-ease-out, ease); } .exegypt-programs-menu__link:hover .exegypt-programs-menu__cta svg { transform: translateX(3px); } .exegypt-programs-menu__tile--all { grid-column: 1 / -1; } .exegypt-programs-menu__tile--all .exegypt-programs-menu__link { justify-content: center; border: 1px dashed var(--exegypt-gold-hairline, rgba(201, 162, 75, 0.25)); } .exegypt-programs-menu__body--all { flex-direction: row; align-items: center; justify-content: center; gap: 8px; } .exegypt-programs-menu__body--all .exegypt-programs-menu__cta { margin-top: 0; padding-top: 0; } @media (prefers-reduced-motion: reduce) { .main-header-menu .menu-item:hover > .sub-menu.astra-megamenu, .main-header-menu .menu-item.focus > .sub-menu.astra-megamenu, .main-header-menu .menu-item > .sub-menu.astra-megamenu.toggled-on, .main-header-menu .menu-item > .sub-menu.astra-megamenu.astra-megamenu-focus { animation: none; } .exegypt-programs-menu__link, .exegypt-programs-menu__media img, .exegypt-programs-menu__cta svg { transition: none; } } /* ========================================================================== Mobile off-canvas: minimal title-only list, nested under "Programs" ========================================================================== */ #ast-mobile-popup .main-header-menu .sub-menu.exegypt-programs-menu-mobile { display: none; flex-direction: column; padding: 0 0 0.25rem 1rem; background-color: transparent; } #ast-mobile-popup .main-header-menu .sub-menu.exegypt-programs-menu-mobile .menu-item { border-bottom: 1px solid var(--exegypt-gold-hairline); opacity: 1; transform: none; } #ast-mobile-popup .main-header-menu .sub-menu.exegypt-programs-menu-mobile .menu-item:last-child { border-bottom: 0; } #ast-mobile-popup .exegypt-programs-menu-mobile__link { display: flex; align-items: center; min-height: 44px; color: var(--exegypt-body-text); font-family: "Montserrat", sans-serif; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.01em; } #ast-mobile-popup .exegypt-programs-menu-mobile__link:hover, #ast-mobile-popup .exegypt-programs-menu-mobile__link:focus-visible { color: var(--exegypt-gold); } #ast-mobile-popup .exegypt-programs-menu-mobile__link--all { color: var(--exegypt-gold); font-weight: 600; } /* Rotate the auto-injected dropdown arrow when the Programs item is expanded */ #ast-mobile-popup .dropdown-menu-toggle svg { transition: transform 0.25s ease; } #ast-mobile-popup .dropdown-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { #ast-mobile-popup .dropdown-menu-toggle svg { transition: none; } }