/* ========================================================================== DexaFit Cincinnati — Custom CSS Overrides Site-wide manual overrides layered on top of the Squarespace template CSS. Loaded last in on every page so these rules win the cascade. ========================================================================== */ /* --------------------------------------------------------------------- Primary navigation — tighten spacing, give dropdowns a proper elevated "card" treatment instead of the stock flat/bordered box. #header prefix raises specificity so these reliably beat the theme's own header-nav rules. --------------------------------------------------------------------- */ /* Cap the gap between top-level items so it can't sprawl on very wide screens (the theme's default spacing is viewport-relative with no upper bound), and trim the nav's font-size down from the body-copy size it inherited by default. With 6 dropdowns plus "Contact" plus the CTA button all sharing one header row, the looser defaults were overflowing onto a second line at common desktop widths (e.g. "Contact" wrapping below at ~1440px) — tightening both closes that gap with room to spare. */ #header .header-nav-item { font-size: 1rem; } #header .header-nav-item:not(:first-child):not(.header-actions-action--cart) { margin-left: clamp(0.5rem, 0.9vw, 0.8rem); } #header .header-nav-item:not(:last-child) { margin-right: clamp(0.5rem, 0.9vw, 0.8rem); } /* Dropdown panel: sharp shadow + a crisp border + slightly rounded corners instead of a flat white box with a hard 1px border sitting flush under the header — pushed further (bigger blur, more opacity, a hairline border) so it reads as clearly lifted off the page. Items are left-aligned (was center-aligned) so the list reads like a proper menu rather than a stack of centered labels. */ #header .header-nav-item--folder .header-nav-folder-content { padding: 0.5em 0; background-color: hsla(var(--white-hsl), 1); border: 1px solid hsla(var(--black-hsl), 0.08); border-radius: 8px; text-align: left; box-shadow: 0 24px 48px hsla(var(--black-hsl), 0.22), 0 4px 14px hsla(var(--black-hsl), 0.1); } /* Small pointer arrow centered under the primary item itself (not the panel, which is left-anchored and a different width) so it lines up with the middle of "Services", "About", etc. Lives on the item, not the panel, so it can be centered independently and only shows while the dropdown is open — sits just above the panel's top edge, with a z-index above the panel so the seam looks seamless. */ #header .header-nav-item--folder { position: relative; } #header .header-nav-item--folder::before { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid hsla(var(--white-hsl), 1); opacity: 0; transition: opacity 0.15s ease; z-index: 11; } #header .header-nav-item--folder:hover::before, #header .header-nav-item--folder:has(> button[aria-expanded='true'])::before { opacity: 1; } /* Secondary (dropdown) items: each becomes a full-width, left-aligned row — previously only the text itself was clickable/hoverable and centered. Hover gives a soft fill plus a slight rightward nudge for sharp, tactile feedback instead of relying solely on the underline sweep. */ #header .header-nav-folder-content .header-nav-folder-item a { display: block; text-align: left; padding: 0.55em 1.5em; border-radius: 6px; transition: background-color 0.15s ease, padding-left 0.15s ease; } #header .header-nav-folder-content .header-nav-folder-item a:hover { background-color: hsla(var(--black-hsl), 0.06); /* padding-left: 1.75em;*/ } /* Primary (top-level) items: same soft grey hover fill as the dropdown rows, so "Concierge Primary Care", "Services", etc. — and standalone links like "Contact" — give the same feedback instead of only reacting once a dropdown opens. Painted via an inset ::before rather than real padding, so the hover pill doesn't add to the item's box size — the nav is tightly fit to one row, and expanding the actual element would risk wrapping again. ::after stays free for the dropdown chevron below. */ #header .header-nav-item > a, #header .header-nav-item--folder > button.header-nav-folder-title { position: relative; } #header .header-nav-item > a::before, #header .header-nav-item--folder > button.header-nav-folder-title::before { content: ''; position: absolute; inset: -0.5em -0.6em; background-color: hsla(var(--black-hsl), 0.06); border-radius: 6px; opacity: 0; transition: opacity 0.15s ease; z-index: -1; } #header .header-nav-item > a:hover::before, #header .header-nav-item--folder:hover > button.header-nav-folder-title::before { opacity: 1; } /* Dropdown indicator: a small chevron on every primary item that opens a dropdown (Concierge Primary Care, Services, Memberships, About, Resources) — but not on plain links like "Contact" — so it's clear at a glance which items reveal a submenu. Flips upside down on hover/open to reinforce the state. */ #header .header-nav-item--folder > button.header-nav-folder-title::after { content: ''; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.45em; margin-bottom: 0.08em; border-right: 0.13em solid currentColor; border-bottom: 0.13em solid currentColor; border-radius: 0 0 1px 0; vertical-align: middle; transform: rotate(45deg); transition: transform 0.2s ease; } #header .header-nav-item--folder:hover > button.header-nav-folder-title::after, #header .header-nav-item--folder > button.header-nav-folder-title[aria-expanded='true']::after { transform: rotate(225deg); } /* Header "Book Appointment" CTA: smaller footprint than the default primary-button size, freeing up horizontal room in the header row. Scoped to the header CTA only (via the padding custom properties' fallback pattern) so buttons elsewhere on the site are untouched. */ #header .header-actions-action--cta { --primary-button-padding-x: 0.9rem; --primary-button-padding-y: 0.55rem; } #header .header-actions-action--cta .sqs-button-element--primary { font-size: 0.85rem; } /* --------------------------------------------------------------------- Homepage-only nav redesign — Services mega-menu columns + grouped Health Insights dropdown (desktop), and matching group labels in the mobile drill-down panes. Scoped to `body.homepage` (unlike the generic #header rules above, which are pre-existing and already apply site-wide): this nav content restructure is index.html-only per the brief, but custom-overrides.css loads on every page, so these new selectors would otherwise be inert noise elsewhere anyway — scoping keeps that explicit and matches the pattern used for the mobile-button-width fix earlier in this file. --------------------------------------------------------------------- */ /* Services dropdown: widen the panel and lay its three groups out as a 2-column grid (DEXA & Body Composition / Performance side by side), with Health Optimization spanning the full width below — matches the brief's example layout. Health Insights reuses .nav-mega-group / .nav-mega-group-title for its heading style but stays single-column (only 2 items per group; no need for the grid). */ body.homepage #header .header-nav-folder-content--mega { min-width: 34rem; padding-left: 0.5em; padding-right: 0.5em; } body.homepage #header .header-nav-folder-content--mega .nav-mega-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; } body.homepage #header .header-nav-folder-content--mega .nav-mega-group-title, body.homepage #header .header-nav-folder-content--mega .nav-mega-group--wide { grid-column: 1 / -1; } /* Group heading: an eyebrow label, not a link — smaller, spaced-out caps, muted so it reads as a section divider rather than another clickable row. Shared by the Services grid and the Health Insights single-column groups. */ body.homepage #header .nav-mega-group-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: hsla(var(--black-hsl), 0.5); padding: 0.9em 1.5em 0.3em; } body.homepage #header .header-nav-folder-item:first-child, body.homepage #header .nav-mega-group-title:first-child { padding-top: 0.4em; } /* Mobile menu panes: same group-label treatment, inserted as plain (non-tappable) rows between a folder's actual links. Doesn't touch Squarespace's own folder-toggle JS contract — it only cares about .header-menu-nav-folder[data-folder] / [data-folder-id], not what else lives inside a pane's .header-menu-nav-folder-content. Turns out this theme's mobile overlay renders "light" (dark text on a light panel, confirmed live) rather than the dark-on-navy I'd assumed — muted dark to match, same formula as the desktop .nav-mega-group-title above. Bonus finding while testing: tapping a folder here expands its pane inline in place (tap again to collapse) rather than sliding to a separate full-screen pane — genuine expand/collapse, not drill-down. */ body.homepage .header-menu-nav-group-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: hsla(var(--black-hsl), 0.5); padding: 1.1em 1.25em 0.4em; } /* --------------------------------------------------------------------- Homepage hero — stronger, more deliberate scrim + type/button polish so the headline reads reliably over the photo instead of depending on that specific image's tones, and the CTA feels more intentional. --------------------------------------------------------------------- */ /* Tried a cleaner approach here first: adding a plain

as a sibling grid item inside .fluid-engine, positioned with a plain `grid-area` matching the union of the eyebrow/heading/paragraph/ button blocks' own row/column lines (visible in the page's own