/* ========================================================================== Kennedy Mortgage - Site Header & Navigation ========================================================================== Persistent header on every page. Includes logo, primary navigation, Multifamily dropdown, Residential mega-menu, and mobile hamburger menu. Mobile menu toggle and accordion expansion require a small piece of JS; the CSS-only behaviors here cover desktop hover dropdowns and keyboard focus state. Mobile menu open/close state is managed via the `.mobile-menu-open` class on , toggled by JS. ========================================================================== */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background-color: var(--color-navy); color: var(--color-white); height: 80px; display: flex; align-items: center; box-shadow: var(--shadow-sm); } .site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* Logo */ .site-logo { display: flex; align-items: center; flex-shrink: 0; } .site-logo img, .site-logo svg { height: 60px; width: auto; } @media (max-width: 639px) { .site-header { height: 64px; } .site-logo img, .site-logo svg { height: 44px; } } /* ========================================================================== PRIMARY NAVIGATION (desktop) ========================================================================== */ .site-nav { display: flex; align-items: center; } .site-nav-list { display: flex; align-items: center; gap: var(--space-xl); list-style: none; margin: 0; padding: 0; } .site-nav-list > li { position: relative; margin: 0; } .site-nav-list > li > a { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-md) 0; color: var(--color-white); font-size: 15px; font-weight: var(--weight-medium); text-decoration: none; transition: color var(--transition); white-space: nowrap; } .site-nav-list > li > a:hover, .site-nav-list > li > a:focus-visible { color: var(--color-blue-100); text-decoration: none; } /* Active page indicator */ .site-nav-list > li.is-active > a { color: var(--color-blue); position: relative; } .site-nav-list > li.is-active > a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 12px; height: 2px; background-color: var(--color-blue); } /* Dropdown indicator chevron */ .site-nav-list > li.has-dropdown > a::after, .site-nav-list > li.has-mega-menu > a::after { content: ''; display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transform-origin: center; margin-left: 2px; margin-bottom: 3px; transition: transform var(--transition); } .site-nav-list > li.has-dropdown:hover > a::after, .site-nav-list > li.has-dropdown:focus-within > a::after, .site-nav-list > li.has-mega-menu:hover > a::after, .site-nav-list > li.has-mega-menu:focus-within > a::after { transform: rotate(225deg) translate(-2px, -2px); } /* ========================================================================== DROPDOWN (Multifamily, 8 items) ========================================================================== */ .dropdown { position: absolute; top: 100%; left: -16px; min-width: 320px; background-color: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-sm) 0; margin-top: -8px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown ul { list-style: none; margin: 0; padding: 0; } .dropdown li { margin: 0; } .dropdown a { display: block; padding: 10px var(--space-md); color: var(--color-gray-700); font-size: var(--text-body-sm); font-weight: var(--weight-medium); text-decoration: none; transition: background-color var(--transition), color var(--transition); } .dropdown a:hover, .dropdown a:focus-visible { background-color: var(--color-blue-50); color: var(--color-navy); text-decoration: none; } /* Dropdown header item (pillar link at top of dropdown) */ .dropdown .dropdown-header > a { font-weight: var(--weight-bold); color: var(--color-navy); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-gray-200); margin-bottom: var(--space-xs); } /* ========================================================================== MEGA-MENU (Residential, 14 items in 4 columns) ========================================================================== */ .mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-8px); width: 900px; max-width: calc(100vw - var(--space-xl)); background-color: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-lg) var(--space-xl); margin-top: -8px; opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .has-mega-menu:hover .mega-menu, .has-mega-menu:focus-within .mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .mega-menu-header { border-bottom: 1px solid var(--color-gray-200); padding-bottom: var(--space-sm); margin-bottom: var(--space-md); } .mega-menu-header a { display: inline-block; font-weight: var(--weight-bold); color: var(--color-navy); font-size: var(--text-body); text-decoration: none; } .mega-menu-header a:hover { color: var(--color-blue); text-decoration: none; } .mega-menu-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); } .mega-menu-column h4 { font-family: var(--font-body); font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-blue); margin-bottom: var(--space-sm); } .mega-menu-column ul { list-style: none; padding: 0; margin: 0; } .mega-menu-column li { margin-bottom: 4px; } .mega-menu-column a { display: block; padding: 6px 0; color: var(--color-gray-700); font-size: var(--text-body-sm); text-decoration: none; transition: color var(--transition); } .mega-menu-column a:hover, .mega-menu-column a:focus-visible { color: var(--color-blue); text-decoration: none; } /* ========================================================================== MOBILE MENU TOGGLE (hamburger button) ========================================================================== */ .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--space-sm); width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .mobile-menu-toggle span { display: block; width: 24px; height: 2px; background-color: var(--color-white); border-radius: 1px; transition: transform var(--transition), opacity var(--transition); } /* Animate to X when menu is open */ body.mobile-menu-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.mobile-menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; } body.mobile-menu-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== MOBILE NAVIGATION (slide-in from right, full-screen overlay) ========================================================================== */ @media (max-width: 1023px) { .mobile-menu-toggle { display: flex; } .site-nav { position: fixed; top: 0; right: 0; width: min(360px, 85vw); height: 100vh; background-color: var(--color-navy); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3); transform: translateX(100%); transition: transform var(--transition); overflow-y: auto; padding: 80px var(--space-lg) var(--space-lg); z-index: calc(var(--z-sticky) - 1); } body.mobile-menu-open .site-nav { transform: translateX(0); } .site-nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .site-nav-list > li { border-bottom: 1px solid var(--color-navy-600); } .site-nav-list > li > a { padding: var(--space-md) 0; font-size: var(--text-body); width: 100%; justify-content: space-between; } /* Mobile expandable dropdown and mega-menu */ .dropdown, .mega-menu { position: static; transform: none; width: 100%; max-width: 100%; background: transparent; box-shadow: none; padding: 0 0 var(--space-md) var(--space-md); opacity: 1; visibility: visible; margin: 0; border-radius: 0; display: none; } .has-dropdown.is-open .dropdown, .has-mega-menu.is-open .mega-menu { display: block; } .dropdown a, .mega-menu-column a { color: var(--color-blue-100); padding: var(--space-sm) 0; } .dropdown a:hover, .mega-menu-column a:hover { color: var(--color-white); background: transparent; } .dropdown .dropdown-header > a { color: var(--color-white); border-bottom-color: var(--color-navy-600); } .mega-menu-columns { grid-template-columns: 1fr; gap: var(--space-md); } .mega-menu-header { border-bottom-color: var(--color-navy-600); } .mega-menu-header a { color: var(--color-white); } .mega-menu-column h4 { color: var(--color-blue); } /* Body scroll lock when mobile menu is open */ body.mobile-menu-open { overflow: hidden; } } /* ========================================================================== MOBILE MENU FOOTER (contact info shown at bottom of mobile slide-out) ========================================================================== */ .mobile-nav-footer { display: none; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-navy-600); color: var(--color-blue-100); font-size: var(--text-body-sm); } .mobile-nav-footer a { color: var(--color-white); display: block; padding: var(--space-xs) 0; } @media (max-width: 1023px) { .mobile-nav-footer { display: block; } } /* ========================================================================== WORDPRESS MENU INTEGRATION Styles WordPress's default wp_nav_menu() output to display as dropdowns. WP outputs
  • with