/* ============================================================ JustBE Aesthetics — post-mirror overrides Loaded AFTER all WP/Elementor CSS so declarations here win. ============================================================ */ /* ----------------------------------------------------------- 1) Announcement bar — phone number as a link ----------------------------------------------------------- */ .announcement-phone, .announcement-phone:link, .announcement-phone:visited { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 500; transition: opacity 200ms ease-in-out; } .announcement-phone:hover, .announcement-phone:focus { opacity: 0.8; text-decoration: underline; } /* ----------------------------------------------------------- 2) Sticky navbar with hero-transparent / scrolled-glass states Layout: contains two rows: - .elementor-element-ae8edda → burgundy announcement bar (unchanged) - .elementor-element-aeb7afc → main nav row (logo + menu + CTA) Behavior: - Over hero (top of page): main nav row is fully transparent - Once scrolled: nav row adopts the footer's navy rgb(26, 37, 48) at 95% with a light backdrop-blur for a subtle liquid-glass feel The `.is-scrolled` class is toggled by the inline script at the bottom of index.html (on scroll past 24px). ----------------------------------------------------------- */ /* Sticky header. The theme's reset.css includes `* { background-color: transparent !important }` which fights any per-element bg rule we'd add to the nav row, so we apply the scrolled glass-navy bg on the HEADER itself (which the reset doesn't touch the same way via its element-type specificity) and let the announcement bar's own explicit burgundy bg layer on top, leaving the nav row portion showing through. */ .elementor-location-header { position: sticky; top: 0; z-index: 999; transition: background-color 280ms ease-in-out, backdrop-filter 280ms ease-in-out, -webkit-backdrop-filter 280ms ease-in-out, box-shadow 280ms ease-in-out; } .elementor-location-header.is-scrolled { background-color: rgba(26, 37, 48, 0.95) !important; -webkit-backdrop-filter: saturate(140%) blur(10px) !important; backdrop-filter: saturate(140%) blur(10px) !important; box-shadow: 0 6px 24px rgba(26, 37, 48, 0.18) !important; } /* The main nav row itself stays transparent so the header bg shows through in both states. Also force full opacity — Elementor's fade-in animation can leave the row stuck at opacity:0 on pages where the header is already sticky/pinned when the animation fires (common on non-homepage templates). */ .elementor-location-header > .elementor-element:not(.elementor-hidden-mobile) { background-color: transparent !important; background-image: none !important; opacity: 1 !important; visibility: visible !important; } /* Also clear any lingering fade-in animation that could re-hide it */ .elementor-location-header > .elementor-element:not(.elementor-hidden-mobile).animated, .elementor-location-header > .elementor-element:not(.elementor-hidden-mobile).elementor-invisible { animation: none !important; opacity: 1 !important; } /* "Book A Session" (and any other) CTA in the nav: when the nav row is its default navy, a navy button disappears. Invert the pill to cream-on-navy when scrolled, with a smooth transition both ways. */ .elementor-location-header > .elementor-element:not(.elementor-hidden-mobile) .elementor-button { transition: background-color 280ms ease-in-out, color 280ms ease-in-out, border-color 280ms ease-in-out, box-shadow 280ms ease-in-out !important; } .elementor-location-header.is-scrolled > .elementor-element:not(.elementor-hidden-mobile) .elementor-button { background-color: #fffdfa !important; /* cream / off-white */ color: rgb(26, 37, 48) !important; border-color: #fffdfa !important; } .elementor-location-header.is-scrolled > .elementor-element:not(.elementor-hidden-mobile) .elementor-button:hover, .elementor-location-header.is-scrolled > .elementor-element:not(.elementor-hidden-mobile) .elementor-button:focus { background-color: rgba(255, 253, 250, 0.88) !important; color: rgb(26, 37, 48) !important; } /* No text-shadow on nav links — it looked harsh on cream-bg pages that don't sit behind a hero image. Brand nav colors already work on both states per-page. */ /* When scrolled, force nav links + logo to cream — but ONLY on DESKTOP where the glass-navy bg is visible. On mobile the hamburger-opened panel is a separate light-colored ui, so cream text would become invisible there. Breakpoint matches Elementor's default 1024px mobile menu cutoff. */ @media (min-width: 1025px) { .elementor-location-header.is-scrolled .elementor-nav-menu > li > a.elementor-item { color: rgb(255, 253, 250) !important; } .elementor-location-header.is-scrolled .elementor-nav-menu a.elementor-item svg, .elementor-location-header.is-scrolled .elementor-nav-menu .sub-arrow svg { color: rgb(255, 253, 250) !important; fill: rgb(255, 253, 250) !important; } /* Logo: Elementor filters it to navy on non-homepage templates; flip to pure white over the navy glass. */ .elementor-location-header.is-scrolled .elementor-widget-image img { filter: brightness(0) invert(1) !important; transition: filter 280ms ease-in-out; } /* Smooth color transition for desktop only */ .elementor-location-header .elementor-nav-menu a.elementor-item, .elementor-location-header .elementor-widget-image img { transition: color 280ms ease-in-out, filter 280ms ease-in-out; } } /* Hamburger icon ALWAYS follows the scrolled state — on mobile the hamburger is shown over the glass-navy sticky header. Keep this outside the desktop media query. */ .elementor-location-header.is-scrolled .elementor-menu-toggle, .elementor-location-header.is-scrolled .elementor-menu-toggle svg { color: rgb(255, 253, 250) !important; fill: rgb(255, 253, 250) !important; } /* Logo ALSO follows the scrolled state at ALL widths (supersedes the desktop-only rule above). On non-homepage templates Elementor tints the logo navy, which is correct at the top of the page but invisible on the navy glass header once scrolled — on MOBILE the white-flip was missing. The logo sits in the header bar (never in the light dropdown panel), so white-on-scrolled is safe on mobile too. */ .elementor-location-header.is-scrolled .elementor-widget-image img { filter: brightness(0) invert(1) !important; transition: filter 280ms ease-in-out; } /* ----------------------------------------------------------- 3) Services dropdown — DESKTOP only, CSS-only hover fallback. Independent of Elementor's SmartMenus JS (which doesn't always bind on the static mirror). Uses display:none/block for reliability and min-width:max-content so long labels like "Nutrition & Lifestyle coaching" never overflow or appear outside the panel. ----------------------------------------------------------- */ @media (min-width: 1025px) { .elementor-location-header .elementor-nav-menu > li.menu-item-has-children { position: relative; } .elementor-location-header .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu { display: none !important; position: absolute; top: 100%; left: 0; min-width: max-content; margin: 0; padding: 6px 0; background-color: #fffdfa; border-radius: 6px; box-shadow: 0 10px 32px rgba(26, 37, 48, 0.18); z-index: 9998; list-style: none; /* small visual gap below the trigger — implemented with padding-top on the UL itself (not margin-top) so the hover target stays connected and the dropdown doesn't flicker between label/menu */ padding-top: 18px; background-clip: padding-box; } /* Cover the 18px gap so the pointer never falls into dead space */ .elementor-location-header .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 19px; background: transparent; } .elementor-location-header .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu, .elementor-location-header .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu, .elementor-location-header .elementor-nav-menu > li.menu-item-has-children.jbe-dropdown-open > ul.sub-menu { display: block !important; } .elementor-location-header .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu li { display: block; list-style: none; margin: 0; padding: 0; width: auto; } .elementor-location-header .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu a.elementor-sub-item { display: block; padding: 12px 22px; white-space: nowrap; color: rgb(26, 37, 48); font-size: 15px; line-height: 1.4; transition: background-color 120ms ease, color 120ms ease; } .elementor-location-header .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu a.elementor-sub-item:hover { background-color: rgba(26, 37, 48, 0.06); } /* Active/current dropdown sub-item (e.g. "Dermal Fillers" when you are on /treatment-dermal-fillers/): Elementor paints it navy-on-navy = invisible. Force a visible state. */ .elementor-location-header .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu a.elementor-sub-item.elementor-item-active, .elementor-location-header .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu .current-menu-item > a.elementor-sub-item, .elementor-location-header .elementor-nav-menu > li.menu-item-has-children > ul.sub-menu .current_page_item > a.elementor-sub-item { background-color: rgba(26, 37, 48, 0.08) !important; color: rgb(26, 37, 48) !important; font-weight: 500 !important; border-left: 3px solid rgb(122, 40, 59); padding-left: 19px !important; } } /* ----------------------------------------------------------- 4) Services / card hover — smoother transitions "Meet Dr. Marchuk" card lift (.box-hover) ----------------------------------------------------------- */ .box-hover, .box-hover:hover { transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out, background-color 300ms ease-in-out !important; } .service-box { transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out, background-color 300ms ease-in-out !important; } /* "One Practice. Two Pillars." cards Original markup toggles .service-list with display:none → block, which makes the opacity transition a no-op (display changes are instant). Override to use opacity + visibility + max-height so the list reveals smoothly. */ @media (min-width: 766px) { .service-box .service .service-list { display: block !important; opacity: 0 !important; visibility: hidden; max-height: 0; overflow: hidden; margin-top: 0; transform: translateY(8px); transition: opacity 320ms ease-in-out, max-height 360ms ease-in-out, margin-top 360ms ease-in-out, transform 320ms ease-in-out, visibility 0s linear 360ms; /* flip visibility at the end on close */ will-change: opacity, max-height, transform; } .service-box:hover .service .service-list { opacity: 1 !important; visibility: visible; max-height: 400px; /* enough to fit the longest list */ margin-top: 12px; transform: translateY(0); transition: opacity 320ms ease-in-out, max-height 420ms ease-in-out, margin-top 360ms ease-in-out, transform 320ms ease-in-out, visibility 0s linear 0s; /* show immediately on hover */ } /* Smooth the parent flex layout shift that accompanies the reveal */ .service-box .service, .service-box:hover .service { transition: justify-content 320ms ease-in-out, gap 320ms ease-in-out !important; } } /* ----------------------------------------------------------- 5) Success stories videos — prevent distortion. Both Elementor's widget-video.min.css and each post-*.css set `object-fit: cover` on hosted videos, which crops the frame to fill the container. On vertical phone-shot videos (480×854) displayed in a wider container this looks stretched/cropped. Force `contain` so the native aspect ratio is preserved; letterbox with black bars. ----------------------------------------------------------- */ .elementor-widget-video .e-hosted-video .elementor-video, .elementor-widget-video .elementor-wrapper video, .elementor-widget-video video.elementor-video { object-fit: contain !important; background-color: #000 !important; } .elementor-widget-video .elementor-video { cursor: pointer; } .elementor-widget-video .e-hosted-video { border-radius: 6px; overflow: hidden; } /* ----------------------------------------------------------- 6) Mobile hamburger menu — FULL-SCREEN POPUP Hidden by default; when the hamburger is tapped our inline JS adds `.elementor-active` to the nav container. The container escapes any parent widget-width constraint with `position: fixed` and becomes a full-viewport overlay below the sticky header. ----------------------------------------------------------- */ @media (max-width: 1024px) { /* Collapsed state */ .elementor-location-header nav.elementor-nav-menu--dropdown { display: none; } /* Opened state — full-width popup that opens BELOW the header so the logo + hamburger/X stay visible. The JS sets a CSS variable `--jbe-header-h` with the measured header height. We offset up by 4px so the top of the popup overlaps the bottom of the header, eliminating the visible seam. */ .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active { display: block !important; position: fixed !important; top: calc(var(--jbe-header-h, 72px) - 2px); left: 0; right: 0; width: 100vw; max-width: 100vw; height: auto; max-height: calc(100vh - var(--jbe-header-h, 72px) + 2px); padding: 4px 0 32px; background-color: #fffdfa; /* no top shadow — would add a dark seam; keep side + bottom only */ box-shadow: 0 8px 24px rgba(26, 37, 48, 0.12); z-index: 9998; /* under the header (9999) so logo stays on top */ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* While the popup is open, kill the sticky header's scrolled-state drop-shadow — it would draw a dark band between header + popup. */ body.jbe-menu-open .elementor-location-header.is-scrolled { box-shadow: none !important; } /* Ensure inner UL takes full width and is vertical */ .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active > ul { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; display: block !important; } .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active > ul > li, .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active .sub-menu > li { width: 100% !important; display: block !important; } /* Readable items on the cream popup regardless of Elementor's template color overrides (homepage sets items cream for the hero). */ .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active .elementor-item, .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active .elementor-sub-item { color: rgb(26, 37, 48) !important; display: block !important; width: 100% !important; padding: 18px 24px !important; font-size: 18px !important; font-weight: 400 !important; border-bottom: 1px solid rgba(26, 37, 48, 0.08); text-align: left; } .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active .elementor-item:hover, .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active .elementor-sub-item:hover { background-color: rgba(26, 37, 48, 0.04); } /* Active/current page item: Elementor paints it with the accent color (navy) as background. Combined with navy text that makes it invisible on the cream popup. Force it to the cream bg + navy text + a subtle left-accent to still show it as the current page. */ .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active a.elementor-item.elementor-item-active, .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active a.elementor-sub-item.elementor-item-active, .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active .current-menu-item > a.elementor-item { background-color: rgba(26, 37, 48, 0.06) !important; color: rgb(26, 37, 48) !important; border-left: 3px solid rgb(122, 40, 59); padding-left: 21px !important; /* 24 - 3 border */ font-weight: 500 !important; } /* Sub-menu inside the popup — collapsed by default; expanded via `.jbe-mobile-open` class our JS toggles on tap of the parent. */ .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active .sub-menu { display: none; background-color: rgba(26, 37, 48, 0.04); padding: 0 !important; margin: 0 !important; list-style: none !important; } .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active li.jbe-mobile-open > .sub-menu { display: block; } .elementor-location-header nav.elementor-nav-menu--dropdown.elementor-active .elementor-sub-item { padding-left: 48px !important; font-size: 16px !important; } /* Keep the hamburger toggle itself above the popup so users can close */ .elementor-menu-toggle { position: relative; z-index: 10000 !important; } /* Icon swap on active */ .elementor-menu-toggle .elementor-menu-toggle__icon--close { display: none; } .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open { display: none; } .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close { display: inline-block; } /* When the popup is open, lock page scroll behind it */ body.jbe-menu-open { overflow: hidden; } } /* Remove the nav hover/active pointer indicator (the accent "dot"/underline) from the header menu — desktop and dropdown. */ .elementor-location-header .elementor-nav-menu .elementor-item:after, .elementor-location-header .elementor-nav-menu .elementor-item:before { display: none !important; } /* Consistent slight border-radius on all content photos (Elementor image widgets) so framed images + their texture blocks match site-wide. Logos are transparent PNGs so this has no visible effect on them; the hero and before/after videos are background-image/video, not image widgets. */ .elementor-widget-image img { border-radius: 10px !important; } /* Contact page — tighten the 3 info boxes (Address / Social / Contact): space-between + a 395px min-height created a big gap under each title. */ .elementor-element-1c9def8, .elementor-element-b35ff0f, .elementor-element-f5003be { justify-content: center !important; min-height: auto !important; } /* Contact form section — keep "Hours" directly under the "Ready to Begin" copy instead of pushed to the bottom of the column. */ .elementor-element-7ade4c61 { justify-content: flex-start !important; } /* Decorative "shape" blocks behind images (Elementor spacers with a color/image background) must share the 10px image radius. Some shipped sharp (0/none). */ .elementor-element-8117e8b, .elementor-element-d4ff7b3, .elementor-element-4627818, .elementor-element-59fb30e, .elementor-element-f1a1a5a, .elementor-element-33a84fe, .elementor-element-4d504ee, .elementor-element-728fe82 { border-radius: 10px !important; } /* Homepage About-Us "shape behind the image". The maroon must be a rounded block offset DOWN + RIGHT behind the photo, so its top/left edges tuck behind the image (image's top-left corner exposed) and it peeks on the bottom-right — a true diagonal offset, not a flush frame. Since the image is a CHILD of this container, padding can't expose the image past the box; instead we drop the container's own background and paint the maroon as a ::before layer that is shifted down-right behind the photo. */ .elementor-element-72706cc { position: relative !important; background-image: none !important; background-color: transparent !important; /* Reserve 32px on the right + bottom so the offset maroon stays INSIDE this block's own footprint (overflowing would let the neighbouring column paint over it). The photo fills the remaining content box at the top-left. */ padding: 0 15px 15px 0 !important; overflow: visible !important; } .elementor-element-72706cc::before { content: "" !important; position: absolute !important; top: 15px !important; left: 15px !important; right: 0 !important; bottom: 0 !important; background-color: rgb(122, 40, 59) !important; border-radius: 10px !important; z-index: 0 !important; } /* Image fills the box and sits above the maroon layer. */ .elementor-element-72706cc > * { position: relative !important; z-index: 1 !important; } .elementor-element-eb8a581 { text-align: start !important; width: 100% !important; } .elementor-element-eb8a581 img { width: 100% !important; } /* Accessibility — color contrast. The decorative section "eyebrow" kickers were #999 (var --e-global-color-ed9ab60), only ~2.65:1 on the cream background. That variable is ALSO used by the footer contact-box titles (on the dark footer, where they're fine), so we can't darken it globally — instead we target just the converted eyebrows (.jbe-eyebrow, see tools/a11y-fix.mjs) and darken them to #6b6b6b (~4.9:1 on cream). */ .elementor-heading-title.jbe-eyebrow { color: #6b6b6b !important; } /* Testimonials — uniform card height. Clamp each review to 5 lines so long Google reviews trail off with an ellipsis instead of making one card much taller than the others (Swiper stretches the shorter slides to match). The full review text stays in the DOM for SEO / screen readers. */ .jbe-review { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } /* Testimonials: the reviewer avatar was removed, but its container (an empty flex column) still reserved ~56px + gap and pushed the name/service right. Hide the whole avatar container so the name + service align flush-left with the review text. */ .swiper-slide:has(.jbe-credit) .e-con:has(> .elementor-widget-image) { display: none !important; } /* "Success Stories" → Instagram reel thumbnails. Portrait (9:16) covers that link out to each reel. Replaces the old self-hosted