/* site-nav.css * Shared top-bar + sticky white nav, identical on every page. * Loaded by every main page; site-nav.js injects the nav HTML * (and removes any legacy

/ .mobile-menu). * * !important is used liberally so that legacy page CSS (e.g. * services.html still has rules for the old `.nav-links` / `.nav-phone` * classes from the previous design) can't bleed into the new nav. */ /* Variables — scoped so we don't fight whatever the host page sets. */ .site-nav-root { --sn-navy: #0a1628; --sn-sky: #1461F5; --sn-sky-light: #4085FF; --sn-sky-glow: rgba(20, 97, 245, 0.18); --sn-gold: #f0a500; --sn-green: #4ade80; --sn-white: #ffffff; --sn-gray-1: #e8edf3; --sn-text: #2d4158; --sn-display: 'Bebas Neue', sans-serif; --sn-body: 'DM Sans', sans-serif; } /* Hide any legacy nav on pages that haven't been updated yet. The new nav is injected by site-nav.js at the top of . */ body > header#site-header, body > .mobile-menu, body > #mobile-menu { display: none !important; } /* Reset wrapper so page typography doesn't bleed in */ .site-nav-root, .site-nav-root *, .site-nav-root *::before, .site-nav-root *::after { box-sizing: border-box !important; margin: 0; padding: 0; font-family: var(--sn-body) !important; letter-spacing: normal; } /* ── Ticker bar ──────────────────────────────────────────── */ .site-nav-root .top-bar { background: var(--sn-navy) !important; color: rgba(255,255,255,0.72) !important; font-size: 12px !important; overflow: hidden !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } .site-nav-root .ticker { display: flex !important; gap: 56px !important; padding: 9px 0 !important; white-space: nowrap !important; animation: sn-ticker 38s linear infinite !important; animation-duration: 38s !important; animation-iteration-count: infinite !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; width: max-content; } .site-nav-root .ticker span { display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; color: rgba(255,255,255,0.72); } .site-nav-root .ticker .dot { width: 5px !important; height: 5px !important; border-radius: 50% !important; background: var(--sn-green) !important; } .site-nav-root .ticker .gold-dot { background: var(--sn-gold) !important; } @keyframes sn-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Sticky nav ──────────────────────────────────────────── */ .site-nav-root .nav { position: sticky !important; top: 0 !important; z-index: 50 !important; background: rgba(255,255,255,0.92) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--sn-gray-1) !important; height: auto !important; width: auto !important; padding: 0 !important; margin: 0 !important; /* Defensive resets — some legacy pages have bare `nav { ... }` rules that turn the nav into a flex container and break the inner grid layout. Force block + neutral alignment. */ display: block !important; align-items: stretch !important; gap: 0 !important; flex-direction: row !important; } .site-nav-root .nav-inner { max-width: 1380px !important; margin: 0 auto !important; padding: 16px 56px !important; display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; gap: 36px !important; height: auto !important; } .site-nav-root .logo { display: flex !important; align-items: center !important; gap: 11px !important; font-family: var(--sn-display) !important; font-size: 24px !important; color: var(--sn-navy) !important; letter-spacing: 0.02em !important; text-decoration: none !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; width: auto !important; } .site-nav-root .logo-mark { width: 34px !important; height: 34px !important; border-radius: 9px !important; background: linear-gradient(135deg, var(--sn-sky) 0%, var(--sn-sky-light) 100%) !important; color: #fff !important; display: grid !important; place-items: center !important; font-family: var(--sn-display) !important; font-size: 20px !important; box-shadow: 0 4px 12px var(--sn-sky-glow) !important; } .site-nav-root .logo strong { color: var(--sn-sky) !important; font-weight: 400 !important; font-family: var(--sn-display) !important; } .site-nav-root .nav-links { display: flex !important; align-items: center !important; gap: 32px !important; justify-content: center !important; list-style: none !important; padding: 0 !important; margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; background: none !important; } .site-nav-root .nav-links li { list-style: none !important; margin: 0 !important; padding: 0 !important; position: static !important; background: none !important; display: flex !important; align-items: center !important; } .site-nav-root .nav-links a { color: var(--sn-text) !important; position: relative !important; padding: 6px 0 !important; margin: 0 !important; text-decoration: none !important; font-size: 14px !important; font-weight: 500 !important; font-family: var(--sn-body) !important; letter-spacing: normal !important; text-transform: none !important; background: none !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; border: 0 !important; display: inline !important; line-height: inherit !important; } .site-nav-root .nav-links a:hover { color: var(--sn-navy) !important; background: none !important; transform: none !important; box-shadow: none !important; } /* "More" dropdown */ .site-nav-root .nav-more { position: relative !important; } .site-nav-root .nav-more-trigger { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: var(--sn-text) !important; padding: 6px 0 !important; font: inherit !important; font-size: 14px !important; font-weight: 500 !important; font-family: var(--sn-body) !important; background: none !important; border: 0 !important; cursor: pointer !important; letter-spacing: normal !important; line-height: inherit !important; text-transform: none !important; } .site-nav-root .nav-more-trigger:hover { color: var(--sn-navy) !important; } .site-nav-root .nav-more-trigger svg { transition: transform .18s ease !important; opacity: 0.6 !important; display: inline-block !important; flex-shrink: 0 !important; } .site-nav-root .nav-more:hover .nav-more-trigger svg, .site-nav-root .nav-more-trigger[aria-expanded="true"] svg { transform: rotate(180deg) !important; opacity: 1 !important; } .site-nav-root .nav-dd { position: absolute !important; top: calc(100% + 10px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; min-width: 200px !important; background: #fff !important; border: 1px solid var(--sn-gray-1) !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(10,22,40,0.14) !important; list-style: none !important; padding: 6px !important; margin: 0 !important; display: none !important; z-index: 60 !important; flex-direction: column !important; gap: 0 !important; font-size: 14px !important; } .site-nav-root .nav-more:hover .nav-dd, .site-nav-root .nav-more-trigger[aria-expanded="true"] + .nav-dd { display: flex !important; } /* Hover bridge so the menu doesn't close when you cross the gap */ .site-nav-root .nav-more::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 12px; width: 200px; pointer-events: none; } .site-nav-root .nav-more:hover::after { pointer-events: auto; } .site-nav-root .nav-dd li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; } .site-nav-root .nav-dd a { display: block !important; padding: 10px 14px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--sn-text) !important; border-radius: 8px !important; text-decoration: none !important; background: none !important; border: 0 !important; } .site-nav-root .nav-dd a:hover { background: var(--sn-gray-1) !important; color: var(--sn-navy) !important; } .site-nav-root .nav-cta { display: flex !important; align-items: center !important; gap: 14px !important; flex-direction: row !important; padding: 0 !important; background: none !important; border: 0 !important; } .site-nav-root .nav-phone { font-family: var(--sn-display) !important; font-size: 32px !important; color: var(--sn-navy) !important; letter-spacing: 0.02em !important; text-decoration: none !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--sn-navy) !important; animation: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; display: inline !important; flex-direction: row !important; font-weight: 400 !important; line-height: 1 !important; text-transform: none !important; transition: color .15s ease !important; } .site-nav-root .nav-phone:hover { color: var(--sn-sky) !important; -webkit-text-fill-color: var(--sn-sky) !important; } .site-nav-root .sn-btn { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 15px 26px !important; border-radius: 999px !important; font-weight: 700 !important; font-size: 14px !important; background: var(--sn-sky) !important; background-image: none !important; color: #fff !important; box-shadow: 0 10px 28px rgba(20,97,245,0.36) !important; transition: transform .2s ease, box-shadow .2s ease !important; text-decoration: none !important; border: 0 !important; cursor: pointer !important; font-family: var(--sn-body) !important; letter-spacing: normal !important; text-transform: none !important; text-shadow: none !important; animation: none !important; overflow: visible !important; } .site-nav-root .sn-btn::before { content: none !important; display: none !important; } .site-nav-root .sn-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 14px 36px rgba(20,97,245,0.5) !important; background: var(--sn-sky) !important; scale: none !important; border-color: transparent !important; } .site-nav-root .nav-hamburger { display: none; flex-direction: column !important; gap: 4px !important; padding: 10px !important; background: none !important; border: 0 !important; cursor: pointer !important; } .site-nav-root .nav-hamburger span { display: block !important; width: 22px !important; height: 2px !important; background: var(--sn-navy) !important; border-radius: 2px !important; transition: transform .2s, opacity .2s !important; } .site-nav-root .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; } .site-nav-root .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; } .site-nav-root .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; } @media (max-width: 700px) { .site-nav-root .nav-inner { grid-template-columns: auto auto auto !important; gap: 12px !important; padding: 12px 24px !important; } .site-nav-root .nav-links { display: none !important; } .site-nav-root .nav-hamburger { display: flex !important; } .site-nav-root .nav-cta { gap: 8px !important; } .site-nav-root .nav-cta .nav-phone { display: none !important; } .site-nav-root .nav.menu-open .nav-links { display: flex !important; flex-direction: column !important; gap: 0 !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; background: #fff !important; padding: 8px 24px 16px !important; border-bottom: 1px solid var(--sn-gray-1) !important; box-shadow: 0 10px 24px rgba(10,22,40,0.08) !important; } .site-nav-root .nav.menu-open .nav-links a { padding: 14px 0 !important; border-top: 1px solid var(--sn-gray-1) !important; font-size: 16px !important; } /* Flatten the More dropdown into the main list on mobile */ .site-nav-root .nav-more-trigger { display: none !important; } .site-nav-root .nav-dd { position: static !important; display: flex !important; flex-direction: column !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; } .site-nav-root .nav-dd a { padding: 14px 0 !important; border-top: 1px solid var(--sn-gray-1) !important; border-radius: 0 !important; font-size: 16px !important; background: none !important; } .site-nav-root .nav-more::after { display: none !important; } .site-nav-root .top-bar { font-size: 11px !important; } .site-nav-root .ticker span { font-size: 11px !important; } }