/* ===================================================== ALGORIX SHARED NAVIGATION Astra desktop + tablet + mobile ===================================================== */ /* ===================================================== SHARED PAGE / ASTRA RESET ===================================================== */ body.has-algorix-page .entry-header, body.has-algorix-page .entry-title, body.has-algorix-page .page-title { display: none !important; } body.has-algorix-page .site-content, body.has-algorix-page .site-content > .ast-container, body.has-algorix-page #primary, body.has-algorix-page #main, body.has-algorix-page article.page, body.has-algorix-page .entry-content { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } body.has-algorix-page .site-content > .ast-container { display: block !important; } /* Home-specific content reset retained from homepage.css */ body.has-algorix-homepage .entry-content > .ax-home { margin: 0 !important; } /* ===================================================== DESKTOP / LAPTOP HEADER ===================================================== */ @media (min-width: 922px) { body.has-algorix-page #masthead { position: absolute; z-index: 100; top: 0; right: 0; left: 0; width: 100%; background: transparent !important; } body.has-algorix-page #masthead .ast-primary-header-bar, body.has-algorix-page #masthead .main-header-bar { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.has-algorix-page #masthead .site-primary-header-wrap { width: min(1120px, calc(100% - 48px)); max-width: 1120px; min-height: 68px; margin: 18px auto 0 !important; padding-right: 24px; padding-left: 24px; border-radius: 22px; background: rgba(43, 102, 117, .96); box-shadow: 0 10px 28px rgba(5, 34, 44, .10); } body.has-algorix-page #masthead .ast-builder-grid-row { min-height: 68px; } } /* ===================================================== DESKTOP MENU LINKS ===================================================== */ @media (min-width: 922px) { /* * Use the LI for the underline rather than the anchor's * pseudo-element so Astra's own link/submenu decoration * is not overwritten. */ body.has-algorix-page #masthead .main-header-menu > .menu-item { position: relative; } body.has-algorix-page #masthead .main-header-menu > .menu-item > .menu-link { position: relative; color: rgba(255, 255, 255, .91) !important; transition: color .22s ease, opacity .22s ease; } /* * Animated underline. */ body.has-algorix-page #masthead .main-header-menu > .menu-item::after { content: ""; position: absolute; right: 12px; bottom: 3px; left: 12px; height: 2px; border-radius: 999px; background: #a7ddea; transform: scaleX(0); transform-origin: center; opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; } /* * Hover. */ body.has-algorix-page #masthead .main-header-menu > .menu-item:hover > .menu-link, body.has-algorix-page #masthead .main-header-menu > .menu-item > .menu-link:focus-visible { color: #ffffff !important; } body.has-algorix-page #masthead .main-header-menu > .menu-item:hover::after, body.has-algorix-page #masthead .main-header-menu > .menu-item:focus-within::after { transform: scaleX(1); opacity: 1; } /* * Current / active page. */ body.has-algorix-page #masthead .main-header-menu > .current-menu-item > .menu-link, body.has-algorix-page #masthead .main-header-menu > .current_page_item > .menu-link, body.has-algorix-page #masthead .main-header-menu > .current-menu-parent > .menu-link, body.has-algorix-page #masthead .main-header-menu > .current-menu-ancestor > .menu-link, body.has-algorix-page #masthead .main-header-menu > .current_page_parent > .menu-link { color: #ffffff !important; } body.has-algorix-page #masthead .main-header-menu > .current-menu-item::after, body.has-algorix-page #masthead .main-header-menu > .current_page_item::after, body.has-algorix-page #masthead .main-header-menu > .current-menu-parent::after, body.has-algorix-page #masthead .main-header-menu > .current-menu-ancestor::after, body.has-algorix-page #masthead .main-header-menu > .current_page_parent::after { transform: scaleX(1); opacity: 1; } } /* ===================================================== TABLET / MOBILE HEADER ===================================================== */ @media (max-width: 921px) { body.has-algorix-page #masthead { position: absolute; z-index: 100; top: 0; right: 0; left: 0; width: 100%; background: transparent !important; } body.has-algorix-page #masthead .ast-primary-header-bar, body.has-algorix-page #masthead .main-header-bar { border: 0 !important; background: transparent !important; box-shadow: none !important; } body.has-algorix-page #masthead .site-primary-header-wrap { width: calc(100% - 28px); margin: 12px auto 0 !important; padding-inline: 16px; border-radius: 18px; background: rgba(43, 102, 117, .96); } /* * Hamburger icon remains visible against teal navbar. */ body.has-algorix-page #masthead .menu-toggle, body.has-algorix-page #masthead .ast-button-wrap .menu-toggle { color: #ffffff !important; } } /* ===================================================== ASTRA MOBILE / TABLET DROPDOWN MENU ===================================================== */ @media (max-width: 921px) { /* * The actual expanded Astra mobile menu used by this site. * This is the white area visible below the mobile header. */ body.has-algorix-page #ast-mobile-header .ast-mobile-header-content { background: linear-gradient( 145deg, #123f50 0%, #194f62 55%, #1b5b6e 100% ) !important; } /* * Remove Astra's default white backgrounds from * containers inside the expanded menu. */ body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile, body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-navigation, body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu, body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu > .menu-item { background: transparent !important; } /* * Mobile menu links. */ body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link { color: rgba(237, 249, 251, .92) !important; background: transparent !important; border-color: rgba(255, 255, 255, .10) !important; transition: color .2s ease, background .2s ease, box-shadow .2s ease; } /* * Hover / keyboard focus. */ body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:hover, body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu .menu-item > .menu-link:focus-visible { color: #ffffff !important; background: rgba(255, 255, 255, .08) !important; } /* * Current / active page. */ body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu .current-menu-item > .menu-link, body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu .current_page_item > .menu-link, body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu .current-menu-parent > .menu-link, body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu .current-menu-ancestor > .menu-link, body.has-algorix-page #ast-mobile-header .ast-builder-menu-mobile .main-header-menu .current_page_parent > .menu-link { color: #ffffff !important; background: rgba(255, 255, 255, .12) !important; box-shadow: inset 3px 0 0 #9ee3f0; } } /* ===================================================== SHARED STICKY / SCROLLED HEADER ===================================================== */ body.has-algorix-page #masthead.algorix-scrolled { position: fixed !important; top: 0; right: 0; left: 0; width: 100%; animation: algorix-navbar-in .4s cubic-bezier(.22, 1, .36, 1) both; will-change: transform, opacity; } /* Desktop — full-width sticky bar, centered content */ @media (min-width: 922px) { body.has-algorix-page #masthead.algorix-scrolled .ast-primary-header-bar, body.has-algorix-page #masthead.algorix-scrolled .main-header-bar { background: rgba(43, 102, 117, .98) !important; box-shadow: 0 8px 24px rgba(5, 34, 44, .10); } body.has-algorix-page #masthead.algorix-scrolled .site-primary-header-wrap { width: min( 1120px, calc(100% - 48px) ) !important; max-width: 1120px !important; min-height: 72px; margin: 0 auto !important; padding-right: 24px; padding-left: 24px; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.has-algorix-page #masthead.algorix-scrolled .ast-builder-grid-row { min-height: 72px; } } /* Mobile — preserve existing full-width sticky behavior */ @media (max-width: 921px) { body.has-algorix-page #masthead.algorix-scrolled .site-primary-header-wrap { width: 100% !important; margin: 0 !important; border-radius: 0 !important; } body.has-algorix-page #masthead.algorix-scrolled #ast-mobile-header { position: relative !important; top: -12px !important; margin-bottom: -12px !important; } } /* ===================================================== NAVBAR ENTRY ANIMATION ===================================================== */ @keyframes algorix-navbar-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ===================================================== ACCESSIBILITY ===================================================== */ @media (prefers-reduced-motion: reduce) { body.has-algorix-page #masthead.algorix-scrolled { animation: none; } body.has-algorix-page #masthead .main-header-menu > .menu-item::after { transition: none; } }