/* ========================================================================== Header / Navigation ========================================================================== */ /* --- Site Header — fixed green bar at top of every page --- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; /* below flash messages (2000) and modals (5000) */ background-color: var(--color-primary); transition: box-shadow var(--transition-med); } /* The dev-data banner (partials/dev_banner.php) is position:fixed at top:0 (z 99999). Without this the fixed header's top utility bar (County HUD / DART) would sit underneath it. When dev mode is active the layout adds .has-dev-banner to ; drop the header by the banner's height so the topbar clears it. 28px matches dart.css's .dart-body--devbanner offset. */ body.has-dev-banner .site-header { top: 28px; } /* JS adds this class on scroll to give the header depth */ .site-header--scrolled { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } /* --- Topbar — contact info row above main navigation --- */ .site-header__topbar { border-bottom: none; } .site-header__topbar-inner { max-width: 1400px; /* wider than content container for visual breathing room */ margin: 0 auto; padding: 12px 2rem; display: flex; align-items: center; justify-content: space-between; } /* Phone/email links with inline SVG icons */ .site-header__contact-link { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 17px; font-weight: 400; color: var(--color-white); text-decoration: none; transition: color var(--transition-fast); } .site-header__contact-link:hover { color: #5a9e7c; } /* muted green highlight */ .site-header__icon { flex-shrink: 0; } /* prevents SVG icons from collapsing */ /* Right-side utility links (e.g. Client Login) */ .site-header__utility { display: flex; align-items: center; gap: var(--space-lg); } .site-header__utility-link { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 400; color: var(--color-white); text-decoration: none; transition: color var(--transition-fast); } .site-header__utility-link:hover { color: #5a9e7c; } /* --- Blue Divider — thin navy accent line between topbar and main nav --- */ .site-header__divider { background-color: var(--color-secondary); height: 4px; width: 100%; } /* --- Main Nav Bar — 3-column flex layout: logo | nav links | action buttons --- */ .site-header__main { padding: 0; } .site-header__main-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 80px; } /* --- Logo — left column, shrink-proof so it never collapses --- */ .site-header__logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; flex: 1; /* takes equal space with nav and actions for balanced centering */ } .site-header__logo-img { max-width: 200px; height: auto; } /* --- Navigation Links — centered middle column --- */ .site-nav { display: flex; align-items: center; justify-content: center; flex: 1; } .site-nav__list { display: flex; align-items: center; gap: var(--space-xl); } .site-nav__link { font-family: var(--font-heading); font-weight: 500; font-size: 1.5rem; color: var(--color-white); text-transform: none; letter-spacing: 2px; padding: var(--space-sm) 0; position: relative; /* anchor for the underline pseudo-element */ transition: color var(--transition-fast); white-space: nowrap; } /* Animated underline — grows from left on hover */ .site-nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #5a9e7c; transition: width var(--transition-med); } .site-nav__link:hover { color: #5a9e7c; } .site-nav__link:hover::after { width: 100%; } /* --- Action Buttons — right column (e.g. "Get Started", "Contact") --- */ .site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 1; /* matches logo flex:1 so nav stays centered */ flex-shrink: 0; } /* White pill buttons that invert to transparent on hover */ .site-header__action-btn { display: inline-block; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.2; color: var(--color-primary); background-color: var(--color-white); border: 3px solid var(--color-white); border-radius: 5px; padding: 6px 18px; text-decoration: none; white-space: nowrap; cursor: pointer; box-sizing: border-box; vertical-align: middle; transition: background-color var(--transition-fast), color var(--transition-fast); } .site-header__action-btn:hover { background-color: transparent; color: var(--color-white); } /* --- Hamburger — hidden on desktop, shown via responsive.css at <= 992px --- */ .site-header__hamburger { display: none; /* toggled to flex in responsive.css */ flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; padding: 0; } /* Three horizontal bars that animate into an X when open */ .hamburger-bar { display: block; width: 100%; height: 3px; background-color: var(--color-white); border-radius: 2px; transition: transform var(--transition-med), opacity var(--transition-med); } /* Open state: top bar rotates down, middle fades, bottom rotates up */ .site-header__hamburger--open .hamburger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .site-header__hamburger--open .hamburger-bar:nth-child(2) { opacity: 0; } .site-header__hamburger--open .hamburger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* --- Mobile Slide-Down Menu — revealed when hamburger is toggled --- */ .site-mobile-menu { display: none; /* JS toggles via --open modifier */ flex-direction: column; background-color: var(--color-primary); padding: 0 2rem var(--space-md); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .site-mobile-menu a { display: block; padding: var(--space-sm) 0; color: var(--color-white); font-family: var(--font-heading); font-size: 1rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* subtle separators */ transition: color var(--transition-fast); } .site-mobile-menu a:last-child { border-bottom: none; } .site-mobile-menu a:hover { color: #5a9e7c; } .site-mobile-menu--open { display: flex; }