/** * Site chrome — modern header / navigation. * Loaded from layouts.partials.head so it applies on every page. * (Styles for the header cannot live in a @push from the navbar partial: * the body renders after , so the stack is already flushed.) */ /* ========================================================================== Shared design tokens The `--ln-` prefix is historical (it started life in landing.css, which still re-declares the same values on .ln-page). Any page stylesheet can use these. ========================================================================== */ :root { --ln-navy: #0a2464; --ln-navy-700: #123a8f; --ln-blue: #1a6dff; --ln-blue-dark: #0d4fd8; --ln-blue-soft: #5b95ff; --ln-blue-tint: #e8f1ff; --ln-sky: #f5f9ff; --ln-sky-2: #eef4ff; --ln-ink: #475569; --ln-muted: #7183a1; --ln-line: #e5edfb; --ln-green: #10b981; --ln-amber: #f59e0b; --ln-r-sm: 12px; --ln-r: 18px; --ln-r-lg: 26px; --ln-r-xl: 34px; --ln-sh-xs: 0 2px 10px rgba(10, 36, 100, .05); --ln-sh-sm: 0 6px 20px rgba(10, 36, 100, .07); --ln-sh: 0 14px 38px rgba(10, 36, 100, .10); --ln-sh-lg: 0 28px 70px rgba(10, 36, 100, .16); --ln-grad: linear-gradient(135deg, #1a6dff 0%, #0a2464 100%); --ln-grad-soft: linear-gradient(135deg, #5b95ff 0%, #1a6dff 100%); --ln-ease: cubic-bezier(.4, 0, .2, 1); } /* ========================================================================== Header shell ========================================================================== */ .header { background-color: transparent !important; box-shadow: none !important; border-bottom: 1px solid transparent; transition: background-color .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s cubic-bezier(.4, 0, .2, 1), border-color .4s cubic-bezier(.4, 0, .2, 1) !important; } .scrolled .header { background-color: rgba(255, 255, 255, .95) !important; backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 8px 30px rgba(10, 36, 100, .08) !important; border-bottom-color: rgba(26, 109, 255, .08) !important; } /* Inner pages have a solid backdrop so the dark nav text stays readable. */ body:not(.index-page) .header { background-color: rgba(255, 255, 255, .95) !important; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 6px 24px rgba(10, 36, 100, .07) !important; } /* `dark-hero` pages open with a deep blue banner: let it run behind the header and flip the nav to white until the user scrolls, at which point the normal white-glass header takes over again. */ body.dark-hero:not(.scrolled) .header { background-color: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important; border-bottom-color: transparent !important; } body.dark-hero:not(.scrolled) .header .topbar { background: rgba(255, 255, 255, .1) !important; border-bottom: 1px solid rgba(255, 255, 255, .12); } body.dark-hero:not(.scrolled) .navmenu a, body.dark-hero:not(.scrolled) .navmenu a:focus { color: #fff !important; } body.dark-hero:not(.scrolled) .navmenu a:hover, body.dark-hero:not(.scrolled) .navmenu li:hover > a, body.dark-hero:not(.scrolled) .navmenu .active { color: #cfe0ff !important; } body.dark-hero:not(.scrolled) .mobile-nav-toggle { color: #fff !important; } /* The dropdown panel is still a white card, so its links stay dark. */ body.dark-hero:not(.scrolled) .navmenu .dropdown ul a { color: #475569 !important; } body.dark-hero:not(.scrolled) .navmenu .dropdown ul a:hover, body.dark-hero:not(.scrolled) .navmenu .dropdown ul li:hover > a { color: #1a6dff !important; } /* ========================================================================== Topbar ========================================================================== */ .header .topbar { background: linear-gradient(100deg, #0a2464 0%, #1a6dff 100%) !important; height: 42px !important; font-size: 13px; color: #fff; overflow: hidden; transition: height .35s cubic-bezier(.4, 0, .2, 1), opacity .25s cubic-bezier(.4, 0, .2, 1) !important; } /* Collapse the topbar on scroll. The height above needs !important to beat main.css, so the collapsed state needs it too or the bar keeps its 42px and leaves an empty band above the nav. */ .scrolled .header .topbar { height: 0 !important; opacity: 0; } .header .topbar .contact-info i { color: rgba(255, 255, 255, .95) !important; font-size: 13px; } .header .topbar .contact-info i a, .header .topbar .contact-info i span { color: rgba(255, 255, 255, .95) !important; font-weight: 500; font-size: 13px; } .header .topbar .contact-info i a:hover { color: #fff !important; } .header .topbar .social-links a { display: inline-flex; color: rgba(255, 255, 255, .75) !important; font-size: 13px; margin-left: 16px; transition: color .25s ease, transform .25s ease; } .header .topbar .social-links a:hover { color: #fff !important; transform: translateY(-2px); } @media (max-width: 575.98px) { .header .topbar { height: 38px !important; } .header .topbar .contact-info i, .header .topbar .contact-info i a, .header .topbar .contact-info i span { font-size: 11.5px; } } /* ========================================================================== Branding row ========================================================================== */ .header .branding { min-height: 74px; padding: 10px 0; transition: min-height .3s ease, padding .3s ease; } .scrolled .header .branding { min-height: 64px; padding: 6px 0; } .header .logo img { max-height: 46px; width: auto; margin-right: 0; transition: max-height .3s ease; } .scrolled .header .logo img { max-height: 40px; } @media (max-width: 575.98px) { .header .logo img { max-height: 36px; } } /* ========================================================================== Nav links ========================================================================== */ .navmenu a, .navmenu a:focus { color: #0a2464 !important; font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif !important; font-weight: 600 !important; font-size: 14.5px !important; letter-spacing: -.01em; transition: color .25s ease, background-color .25s ease !important; } .navmenu a:hover, .navmenu li:hover > a, .navmenu .active, .navmenu .active:focus { color: #1a6dff !important; } @media (min-width: 1200px) { .navmenu > ul > li { padding: 14px 13px; } .navmenu > ul > li > a:before { height: 3px !important; bottom: -4px !important; border-radius: 3px !important; background: linear-gradient(90deg, #1a6dff, #5b95ff) !important; } .navmenu .dropdown ul { min-width: 240px; padding: 10px !important; border-radius: 16px !important; border: 1px solid rgba(26, 109, 255, .08) !important; box-shadow: 0 18px 44px rgba(10, 36, 100, .13) !important; background: #fff !important; } .navmenu .dropdown ul li { min-width: 220px; } .navmenu .dropdown ul a { padding: 9px 14px !important; font-size: 13.5px !important; font-weight: 600 !important; border-radius: 10px !important; color: #475569 !important; white-space: normal !important; } .navmenu .dropdown ul a:hover, .navmenu .dropdown ul li:hover > a { background-color: #eef4ff !important; color: #1a6dff !important; } } /* ========================================================================== Emergency call CTA ========================================================================== */ .hdr-emergency { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px; background: #fff; border: 1px solid rgba(26, 109, 255, .14); box-shadow: 0 6px 18px rgba(10, 36, 100, .07); text-decoration: none; flex-shrink: 0; transition: transform .25s ease, box-shadow .25s ease; } .hdr-emergency:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(26, 109, 255, .2); } .hdr-emergency-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #1a6dff, #0a2464); color: #fff; font-size: 14px; flex: 0 0 34px; } .hdr-emergency-text small { display: block; font-size: 10px; line-height: 1.2; color: #7183a1; font-weight: 600; } .hdr-emergency-text strong { display: block; font-size: 13px; line-height: 1.25; color: #0a2464; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; } /* ========================================================================== Mobile navigation (< 1200px) ========================================================================== */ @media (max-width: 1199.98px) { /* Keep the visual order: logo | emergency CTA | burger */ .header .branding .navmenu { order: 3; } .header .branding .hdr-emergency { order: 2; margin-left: auto; margin-right: 8px; } .mobile-nav-toggle { color: #0a2464 !important; font-size: 30px !important; margin-right: 0 !important; } .mobile-nav-active .navmenu { background: rgba(10, 36, 100, .55) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .navmenu ul { inset: 122px 16px auto 16px !important; max-height: calc(100vh - 150px); padding: 12px !important; border-radius: 20px !important; border: 1px solid rgba(26, 109, 255, .1) !important; box-shadow: 0 24px 60px rgba(10, 36, 100, .25) !important; } .scrolled .navmenu ul { inset: 74px 16px auto 16px !important; max-height: calc(100vh - 100px); } .navmenu a, .navmenu a:focus { padding: 12px 14px !important; font-size: 15px !important; border-radius: 12px !important; } .navmenu a:hover, .navmenu .active { background-color: #eef4ff !important; } .navmenu a i, .navmenu a:focus i { background-color: #eef4ff !important; color: #1a6dff !important; } .navmenu .active i, .navmenu .active:focus i { background: linear-gradient(135deg, #1a6dff, #0a2464) !important; color: #fff !important; } .navmenu .dropdown ul { inset: auto !important; margin: 6px 8px !important; padding: 6px !important; border-radius: 14px !important; background-color: #f5f9ff !important; border: none !important; box-shadow: none !important; max-height: none; } .navmenu .dropdown ul a { font-size: 13.5px !important; font-weight: 600 !important; white-space: normal !important; } .mobile-nav-active .mobile-nav-toggle { color: #fff !important; top: 18px; right: 18px; } } @media (max-width: 767.98px) { .hdr-emergency { padding: 6px; gap: 0; } .hdr-emergency-text { display: none; } } @media (max-width: 575.98px) { .navmenu ul { inset: 112px 12px auto 12px !important; } .scrolled .navmenu ul { inset: 70px 12px auto 12px !important; } }