/** * Elementor header, design-faithful polish. * * Styles the Site Header template (nav dropdowns, hover, caret, animation, * top bar, button lift) to match the Fox Valley design system. Tokens come * from colors_and_type.css (loaded globally by the theme). */ /* ---------------- Top utility bar (988) ---------------- The section itself needs NO vertical padding, the widget-wrap already contributes 10px top/bottom, so the bar sits at ~38px like the design. (Removing the earlier extra 7px that made it too tall.) */ .fv-topbar { padding-top: 1px !important; padding-bottom: 1px !important; } .fv-topbar .elementor-widget-text-editor, .fv-topbar p { margin: 0; font-size: 13.5px; line-height: 1.35; } /* Design's sage "life buoy" crisis icon before the top-bar text (this is the focus-aperture-icon shape in assets/icons). Masked so it takes the sage-400 tint on the navy bar; sits inline before the centred text. */ .fv-topbar p::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; background-color: var(--sage-400, #9DBEB0); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='4.93' y1='4.93' x2='9.17' y2='9.17'/%3E%3Cline x1='14.83' y1='14.83' x2='19.07' y2='19.07'/%3E%3Cline x1='14.83' y1='9.17' x2='19.07' y2='4.93'/%3E%3Cline x1='4.93' y1='19.07' x2='9.17' y2='14.83'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='4.93' y1='4.93' x2='9.17' y2='9.17'/%3E%3Cline x1='14.83' y1='14.83' x2='19.07' y2='19.07'/%3E%3Cline x1='14.83' y1='9.17' x2='19.07' y2='4.93'/%3E%3Cline x1='4.93' y1='19.07' x2='9.17' y2='14.83'/%3E%3C/svg%3E") no-repeat center / contain; } /* ---------------- Header background follows the Direction switcher ---------------- Elementor strips var() from a section's background color, so drive it here instead: --linen is retinted by the [data-fv-theme] switcher (navy top bar stays constant since navy doesn't change across directions). */ .fv-header { /* Keep the header (and therefore its downward-opening dropdown) above the content that follows it in the DOM even when NOT sticky. Without this, at the top of the page the header sits in normal flow with no stacking order, so the next section paints over the open dropdown and eats its clicks, the dropdown only becomes clickable once Elementor's sticky adds a z-index on scroll. Positioning + z-index here fixes it in every scroll state. */ position: relative; z-index: 100; /* Driven by variables so `.fv-scrolled` only needs to change the vars, no background-color override battle with Elementor's per-element rule. */ background-color: var(--fv-hbg, var(--linen, #FEF9F4)) !important; border-bottom: 1px solid var(--fv-hborder, transparent) !important; box-shadow: var(--fv-hshadow, none) !important; /* Header shrinks on scroll (design: 84 → 72). Padding drives the height. */ padding-top: var(--fv-hpad, 12px) !important; padding-bottom: var(--fv-hpad, 12px) !important; /* blur is always on (design); it only shows once the bg is translucent on scroll */ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 0.22s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)), border-color 0.22s ease, box-shadow 0.22s ease, padding 0.22s ease; } /* Logo shrinks on scroll (design: 56 → 48). Controlled by real HEIGHT (not a transform) so the logo's layout box shrinks and the nav, flexed right after it, slides left with it, like the design's compacting logo+nav cluster. width:auto keeps the lockup aspect. */ .fv-header .elementor-widget-image img { height: 56px !important; width: auto !important; transition: height 0.22s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); } /* Scrolled state, driven by Elementor's native sticky-effects class `.elementor-sticky--effects` (Elementor manages it on scroll, so these CSS rules aren't reverted). Design: header 84→72, logo 56→48, translucent white + hairline border + soft shadow. */ .fv-header.elementor-sticky--effects { background-color: rgba(255, 255, 255, 0.92) !important; border-bottom-color: var(--ink-200, #DCE3E9) !important; box-shadow: 0 2px 6px rgba(20, 34, 46, 0.07) !important; padding-top: 8px !important; /* logo 56 + 2*8 = 72 */ padding-bottom: 8px !important; } /* Scrolled: logo height 56 → 48; the shrinking box pulls the nav leftward. */ .fv-header.elementor-sticky--effects .elementor-widget-image img { height: 48px !important; } /* ---------------- Header layout: logo left, nav+buttons grouped right ---------------- Columns become content-width; margin-left:auto on the nav pushes the whole nav+buttons cluster to the right, leaving the gap after the logo. */ .fv-header > .elementor-container { display: flex; align-items: center; flex-wrap: nowrap; } .fv-header > .elementor-container > .elementor-column { width: auto !important; flex: 0 0 auto !important; } /* Zero the columns' default widget-wrap side padding so the column margins below equal the REAL visual gaps (Elementor adds 10px each side otherwise). */ .fv-header > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; } /* Explicit logo→nav gap that shrinks on scroll (design compacts the left side). margin-left:auto lives on the CTA so the buttons stay right-anchored while the logo + nav tighten together on scroll. */ .fv-header > .elementor-container > .elementor-column:nth-child(2) { margin-left: 42px; /* logo → nav (widened per client 2026-07-23, was 18) */ transition: margin-left 0.22s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); } /* Scrolled: gap tightens with the shrinking logo (was 18→10; now 42→26). */ .fv-header.elementor-sticky--effects > .elementor-container > .elementor-column:nth-child(2) { margin-left: 26px; } .fv-header > .elementor-container > .elementor-column:nth-child(3) { margin-left: auto; } /* push CTA right */ .fv-header > .elementor-container > .elementor-column:nth-child(4) { margin-left: 12px; } /* Verify → phone (design gap) */ /* ---------------- Top-level nav items ---------------- Item spacing (15px) is set on the widget itself, Nav Menu → Style → Main Menu → Space Between. */ .elementor-location-header .elementor-nav-menu .elementor-item { font-family: "Hanken Grotesk", -apple-system, sans-serif; font-size: 15px; font-weight: 500; color: var(--ink-700, #33485A); border-radius: var(--radius-sm, 8px); transition: color 0.18s ease, background-color 0.18s ease; } .elementor-location-header .elementor-nav-menu > ul > li:hover > .elementor-item, .elementor-location-header .elementor-nav-menu .elementor-item:hover, .elementor-location-header .elementor-nav-menu .elementor-item.elementor-item-active { color: var(--navy-700, #1F4E79); background: transparent; } /* ---------------- Caret: thin chevron, rotates on open ---------------- Elementor renders the indicator as an inline SVG (.e-font-icon-svg), not an font icon, and its own CSS gives .sub-arrow a 10px left padding and a 1em currentColor icon, too far, too big, too dark vs the design (Header.jsx: chevron 14px box, stroke ink-400, 5px gap). Override all three; keep the selectors for icon-font rendering modes. */ .elementor-location-header .elementor-nav-menu .sub-arrow { /* vertical 10px keeps Elementor's generous hover hit-area; 5px = design gap */ padding: 10px 0 10px 5px; margin-left: 0; } /* `svg.` prefix is load-bearing: Elementor's chevron-specific `.elementor-nav-menu .sub-arrow .e-font-icon-svg.fa-svg-chevron-down` (4 classes) would otherwise tie these rules and shrink the icon to .7em. */ .elementor-location-header .elementor-nav-menu .sub-arrow i, .elementor-location-header .elementor-nav-menu .sub-arrow svg.e-font-icon-svg { font-size: 11px; width: 11px; height: 11px; color: var(--ink-400, #92A2AE); fill: var(--ink-400, #92A2AE); transition: transform 0.2s var(--ease-out, ease), color 0.2s ease, fill 0.2s ease; } .elementor-location-header .elementor-nav-menu li.menu-item-has-children:hover > a .sub-arrow i, .elementor-location-header .elementor-nav-menu li.elementor-item-has-children:hover > a .sub-arrow i, .elementor-location-header .elementor-nav-menu li.menu-item-has-children:hover > a .sub-arrow svg.e-font-icon-svg, .elementor-location-header .elementor-nav-menu li.elementor-item-has-children:hover > a .sub-arrow svg.e-font-icon-svg { transform: rotate(180deg); color: var(--navy-700, #1F4E79); fill: var(--navy-700, #1F4E79); } /* ---------------- Dropdown panel ---------------- */ .elementor-location-header .elementor-nav-menu--dropdown, .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu--dropdown { min-width: 250px; padding: 8px; background: #fff; border: 1px solid var(--ink-200, #DCE3E9); border-radius: var(--radius-md, 12px); box-shadow: 0 14px 34px rgba(20, 34, 46, 0.12); /* fade + rise in */ animation: fvFade 0.16s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } /* Elementor's default adds `border-inline-start: 8px solid transparent` to every dropdown link (normal + hover + focus), override the exact same selector + logical property with !important so there's no 8px left gap. */ .elementor-location-header ul.elementor-nav-menu--dropdown a, .elementor-location-header ul.elementor-nav-menu--dropdown a:focus, .elementor-location-header ul.elementor-nav-menu--dropdown a:hover { border-inline-start: 0 !important; border-inline-start-width: 0 !important; border: 0 !important; } @keyframes fvFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Dropdown links */ .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item { /* !important: Elementor's `.elementor-nav-menu a:hover{padding:13px 20px}` ties this rule's specificity and would otherwise win on hover, making the item jump size. Force the design's 10px 14px in every state. */ padding: 10px 14px !important; font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14.5px; font-weight: 500; color: var(--ink-700, #33485A); border-radius: var(--radius-xs, 4px); transition: background-color 0.15s ease, color 0.15s ease; } /* Cover EVERY highlighted state, not just :hover. Elementor's widget-nav-menu.min.css paints dropdown items dark (#3F444B + white) on :hover, :focus, .highlighted and .elementor-item-active. SmartMenus keeps a parent item `.highlighted` (and focused) while its 2nd-level flyout is open, so leaving the parent dropped :hover but left the dark default showing. Match all of them so nested-submenu parents stay on the sage design tint. */ .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover, .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:focus, .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item.highlighted, .elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active { background: var(--sage-50, #F4F9F6) !important; color: var(--sage-800, #3E5F52) !important; } /* ---------------- Button hover lift (design) ---------------- */ .elementor-location-header .elementor-button { transition: background-color 0.2s var(--ease-standard, ease), color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .elementor-location-header .elementor-button:hover { transform: translateY(-1px); } /* Icon spacing inside buttons */ .elementor-location-header .elementor-button .elementor-button-icon { font-size: 14px; } /* Anchor-link offset: the header is sticky (≈84px, 72px shrunk), so jumping to an in-page anchor must leave room or the target heading hides behind it. #careers → the About page "Care begins with our people" section. */ #careers { scroll-margin-top: 100px; }