/* LazyNav front-end styles. Every selector below is scoped under .lazynav (either as a compound class on the header itself, or as a .lazynav ancestor combinator for elements inside it), and every declaration carries !important, so theme stylesheets loading after this one can't silently override the header's own settings-driven styling. The one unavoidable exception is `body.lazynav-menu-open`: the open mobile panel needs to lock page scroll on itself, which isn't a descendant of .lazynav, so it can't be scoped under it. Colors/sizes/positions come from CSS custom properties set inline by PHP from the saved settings (see LazyNav_Frontend::build_inline_css). Everything below just consumes those variables with sensible fallbacks, so this file never needs per-site edits. */ .lazynav { width: 100% !important; background: var(--lazynav-container-bg, #ffffff) !important; border-bottom: none !important; box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important; position: relative !important; z-index: 100 !important; transition: background-color 0.25s ease, box-shadow 0.25s ease !important; } .lazynav .lazynav__inner { max-width: 100% !important; margin: 0 auto !important; padding: var(--lazynav-container-padding-v, 16px) var(--lazynav-container-padding-h, 24px) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; } .lazynav.lazynav--container-boxed .lazynav__inner { max-width: var(--lazynav-boxed-width, 1200px) !important; } @media (max-width: 767px) { .lazynav .lazynav__inner { padding: var(--lazynav-container-padding-v-mobile, 12px) var(--lazynav-container-padding-h-mobile, 16px) !important; } } @media (min-width: 768px) and (max-width: 1024px) { .lazynav .lazynav__inner { padding: var(--lazynav-container-padding-v-tablet, 14px) var(--lazynav-container-padding-h-tablet, 20px) !important; } } /* Divider: a separate element inset by the container's own horizontal padding (so it lines up with the content, never runs edge to edge), with its own adjustable spacing above it. */ .lazynav.lazynav--divider .lazynav__inner { position: relative !important; padding-bottom: calc(var(--lazynav-container-padding-v, 16px) + var(--lazynav-divider-padding, 0px)) !important; } @media (max-width: 767px) { .lazynav.lazynav--divider .lazynav__inner { padding-bottom: calc(var(--lazynav-container-padding-v-mobile, 12px) + var(--lazynav-divider-padding, 0px)) !important; } } @media (min-width: 768px) and (max-width: 1024px) { .lazynav.lazynav--divider .lazynav__inner { padding-bottom: calc(var(--lazynav-container-padding-v-tablet, 14px) + var(--lazynav-divider-padding, 0px)) !important; } } .lazynav .lazynav__divider { position: absolute !important; left: var(--lazynav-divider-offset, 24px) !important; right: var(--lazynav-divider-offset, 24px) !important; bottom: 0 !important; border-bottom: var(--lazynav-divider-width, 1px) solid var(--lazynav-divider-color, #e5e5e5) !important; } @media (min-width: 768px) and (max-width: 1024px) { .lazynav .lazynav__divider { left: var(--lazynav-divider-offset-tablet, 20px) !important; right: var(--lazynav-divider-offset-tablet, 20px) !important; } } @media (max-width: 767px) { .lazynav .lazynav__divider { left: var(--lazynav-divider-offset-mobile, 16px) !important; right: var(--lazynav-divider-offset-mobile, 16px) !important; } } /* Overlay only: sits on top of the section behind it (e.g. a hero image), scrolls away with the page since it's positioned in the document, not pinned to the viewport. */ .lazynav.lazynav--overlay:not(.lazynav--sticky) { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: var(--lazynav-overlay-zindex, 10) !important; background-color: transparent !important; background-image: var(--lazynav-overlay-gradient, none) !important; border-bottom: none !important; } /* Sticky only: stays in normal flow (so it doesn't overlay anything) and pins to the top of the viewport once scrolled to. Plain CSS position:sticky, no JS-managed positioning. */ .lazynav.lazynav--sticky:not(.lazynav--overlay) { position: sticky !important; top: var(--lazynav-sticky-offset, 0) !important; z-index: var(--lazynav-sticky-zindex, 999) !important; } /* Overlay + Sticky together: the classic "transparent header over a hero that becomes solid and pinned once you scroll" pattern. This needs position:fixed rather than sticky, since it has to sit out of the document flow (to overlay the hero) while still tracking the viewport as the page scrolls, which sticky alone can't do outside of flow. */ .lazynav.lazynav--overlay.lazynav--sticky { position: fixed !important; top: var(--lazynav-sticky-offset, 0) !important; left: 0 !important; width: 100% !important; z-index: var(--lazynav-sticky-zindex, 999) !important; background-color: transparent !important; background-image: var(--lazynav-overlay-gradient, none) !important; border-bottom: none !important; } .lazynav.lazynav--scroll-shadow.lazynav--scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; } .lazynav.lazynav--scrolled { background: var(--lazynav-sticky-scroll-bg, #ffffff) !important; } /* Overlay + Sticky starts fully transparent (see the combined rule above), which outweighs the general scrolled-background rule on specificity alone. This repeats the same selector with the scrolled state added so the solid background actually takes over once the visitor scrolls past the threshold, instead of staying transparent forever in this specific combination. */ .lazynav.lazynav--overlay.lazynav--sticky.lazynav--scrolled { background: var(--lazynav-sticky-scroll-bg, #ffffff) !important; } .lazynav.lazynav--scrolled .lazynav__divider { display: none !important; } /* Logo */ .lazynav .lazynav__logo { display: inline-flex !important; align-items: center !important; text-decoration: none !important; flex-shrink: 0 !important; } .lazynav .lazynav__logo-img { width: var(--lazynav-logo-width, auto) !important; height: auto !important; max-height: 60px !important; display: block !important; } @media (max-width: 767px) { .lazynav .lazynav__logo-img { width: var(--lazynav-logo-width-mobile, var(--lazynav-logo-width, auto)) !important; } } .lazynav .lazynav__logo-text { font-size: 20px !important; font-weight: 700 !important; color: #0d0d0d !important; } /* Menu */ .lazynav .lazynav__menu { list-style: none !important; display: flex !important; align-items: center !important; gap: var(--lazynav-item-spacing, 32px) !important; margin: 0 !important; padding: 0 !important; } .lazynav .lazynav__menu-item { position: relative !important; } .lazynav .lazynav__menu-item a { position: relative !important; display: inline-flex !important; align-items: center !important; text-decoration: none !important; color: var(--lazynav-item-color, #0d0d0d) !important; font-size: var(--lazynav-item-size, 16px) !important; font-weight: var(--lazynav-item-weight, 500) !important; font-family: var(--lazynav-item-font, inherit) !important; transition: color 0.2s ease !important; } .lazynav .lazynav__menu-item a:hover { color: var(--lazynav-item-hover, #c45c1a) !important; } .lazynav .lazynav__menu-item--active a { color: var(--lazynav-item-active, #c45c1a) !important; } /* Underline effects (animated + static) share the same pseudo-element. */ .lazynav.lazynav--effect-underline_animate .lazynav__menu-item a::after, .lazynav.lazynav--effect-underline_static .lazynav__menu-item a::after { content: "" !important; position: absolute !important; left: 0 !important; bottom: -4px !important; width: 100% !important; height: var(--lazynav-underline-height, 2px) !important; background-color: var(--lazynav-underline-color, #c45c1a) !important; } .lazynav.lazynav--effect-underline_animate .lazynav__menu-item a::after { transform: scaleX(0) !important; transform-origin: left !important; transition: transform 0.3s ease !important; } .lazynav.lazynav--effect-underline_animate .lazynav__menu-item a:hover::after, .lazynav.lazynav--effect-underline_animate .lazynav__menu-item a:focus-visible::after { transform: scaleX(1) !important; } .lazynav.lazynav--effect-underline_animate.lazynav--effect-active .lazynav__menu-item--active a::after { transform: scaleX(1) !important; } .lazynav.lazynav--effect-underline_static .lazynav__menu-item a::after { opacity: 0 !important; transition: opacity 0.2s ease !important; } .lazynav.lazynav--effect-underline_static .lazynav__menu-item a:hover::after, .lazynav.lazynav--effect-underline_static .lazynav__menu-item a:focus-visible::after { opacity: 1 !important; } .lazynav.lazynav--effect-underline_static.lazynav--effect-active .lazynav__menu-item--active a::after { opacity: 1 !important; } /* Dot indicator, its own span appended after the link text. */ .lazynav .lazynav__dot { display: inline-block !important; width: var(--lazynav-dot-size, 6px) !important; height: var(--lazynav-dot-size, 6px) !important; border-radius: 50% !important; background-color: var(--lazynav-dot-color, #e8c547) !important; margin-left: 5px !important; opacity: 0 !important; transform: scale(0.4) !important; transition: opacity 0.2s ease, transform 0.2s ease !important; margin-bottom: 15px !important; } .lazynav.lazynav--effect-dot .lazynav__menu-item a:hover .lazynav__dot, .lazynav.lazynav--effect-dot .lazynav__menu-item a:focus-visible .lazynav__dot { opacity: 1 !important; transform: scale(1) !important; } .lazynav.lazynav--effect-dot.lazynav--effect-active .lazynav__menu-item--active .lazynav__dot { opacity: 1 !important; transform: scale(1) !important; } /* Button */ .lazynav .lazynav__button { display: inline-flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; font-size: var(--lazynav-button-size, 14px) !important; font-weight: var(--lazynav-button-weight, 600) !important; letter-spacing: var(--lazynav-button-letter-spacing, 0px) !important; color: var(--lazynav-button-color, #f5f5f0) !important; background: var(--lazynav-button-bg, #0d0d0d) !important; border: var(--lazynav-button-border-width, 0px) solid var(--lazynav-button-border-color, transparent) !important; border-radius: var(--lazynav-button-radius, 6px) !important; padding: var(--lazynav-button-padding, 10px 22px) !important; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; } .lazynav .lazynav__button:hover { color: var(--lazynav-button-color-hover, #f5f5f0) !important; background-color: var(--lazynav-button-bg-hover, #c45c1a) !important; } /* Mobile toggle (hamburger) */ .lazynav .lazynav__toggle { display: none !important; flex-direction: column !important; justify-content: center !important; gap: 5px !important; width: var(--lazynav-hamburger-size, 28px) !important; height: var(--lazynav-hamburger-size, 28px) !important; background: transparent !important; border: 0 !important; cursor: pointer !important; padding: 0 !important; } .lazynav .lazynav__toggle-bar { display: block !important; height: 2px !important; width: 100% !important; background-color: var(--lazynav-hamburger-color, #0d0d0d) !important; border-radius: 2px !important; transition: transform 0.25s ease, opacity 0.25s ease !important; } .lazynav .lazynav__toggle[aria-expanded="true"] .lazynav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } .lazynav .lazynav__toggle[aria-expanded="true"] .lazynav__toggle-bar:nth-child(2) { opacity: 0 !important; } .lazynav .lazynav__toggle[aria-expanded="true"] .lazynav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } /* Layout 1: logo left, menu + button grouped right */ .lazynav.lazynav--layout-1 .lazynav__group--right { display: flex !important; align-items: center !important; gap: var(--lazynav-item-spacing, 32px) !important; } /* Layout 2: left-menu + logo + right-menu cluster together as one centered group (a grid keeps this reliable regardless of how much space the button column needs), button + toggle pinned to the right. */ .lazynav.lazynav--layout-2 .lazynav__inner { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; } .lazynav.lazynav--layout-2 .lazynav__center-group { grid-column: 2 !important; display: flex !important; align-items: center !important; gap: var(--lazynav-logo-gap, 32px) !important; } .lazynav.lazynav--layout-2 .lazynav__group--right { grid-column: 3 !important; justify-self: end !important; display: flex !important; align-items: center !important; gap: 16px !important; } /* Layout 2 variant: button on the left, logo centered, full menu on the right instead of split around the logo. Reuses the same grid as above (.lazynav__group--right already lands in column 3), just adds the left-side button group and pins the bare logo link to the middle column explicitly, since without .lazynav__center-group wrapping it, grid auto-placement alone isn't guaranteed to put it there. */ .lazynav.lazynav--layout-2.lazynav--layout2-button-left .lazynav__group--left { grid-column: 1 !important; justify-self: start !important; display: flex !important; align-items: center !important; } .lazynav.lazynav--layout-2.lazynav--layout2-button-left .lazynav__logo { grid-column: 2 !important; justify-self: center !important; } .lazynav.lazynav--layout-2.lazynav--layout2-button-left .lazynav__group--right { gap: var(--lazynav-item-spacing, 32px) !important; } /* Layout 3: logo left, menu centered, button right */ .lazynav.lazynav--layout-3 .lazynav__inner { justify-content: space-between !important; } .lazynav.lazynav--layout-3 .lazynav__center { flex: 1 !important; display: flex !important; justify-content: center !important; } /* Mobile panel (shared markup for both hamburger states) */ .lazynav .lazynav__mobile-overlay { position: fixed !important; inset: 0 !important; background: rgba(0, 0, 0, 0.35) !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease !important; z-index: 9998 !important; } .lazynav.lazynav--menu-open .lazynav__mobile-overlay { opacity: 1 !important; visibility: visible !important; } .lazynav .lazynav__panel { position: fixed !important; top: 0 !important; bottom: 0 !important; width: var(--lazynav-panel-width, 280px) !important; max-width: 85vw !important; background-color: var(--lazynav-panel-bg, #0d0d0d) !important; z-index: 9999 !important; padding: 70px 32px 40px !important; transition: transform 0.35s ease !important; overflow-y: auto !important; } .lazynav.lazynav--panel-left .lazynav__panel { left: 0 !important; right: auto !important; transform: translateX(-100%) !important; } .lazynav.lazynav--panel-right .lazynav__panel { right: 0 !important; left: auto !important; transform: translateX(100%) !important; } .lazynav.lazynav--menu-open .lazynav__panel { transform: translateX(0) !important; } /* Full Screen panel style: overrides the side-drawer position/transform above (same specificity, later in source order) so Panel Position becomes irrelevant while this style is selected. The menu list centers itself both ways since the panel itself becomes a centering flex box. */ .lazynav.lazynav--panel-style-fullscreen .lazynav__panel { left: 0 !important; right: 0 !important; width: 100vw !important; max-width: 100vw !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; transform: none !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease !important; } .lazynav.lazynav--panel-style-fullscreen.lazynav--menu-open .lazynav__panel { opacity: 1 !important; visibility: visible !important; } .lazynav.lazynav--panel-style-fullscreen .lazynav__panel .lazynav__menu { flex: none !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; } .lazynav.lazynav--panel-style-fullscreen .lazynav__panel .lazynav__menu-item { width: auto !important; margin: 0 !important; text-align: center !important; } .lazynav .lazynav__panel-close { position: absolute !important; top: 24px !important; right: 24px !important; background: transparent !important; border: none !important; color: var(--lazynav-close-color, #f5f5f0) !important; cursor: pointer !important; padding: 4px !important; line-height: 0 !important; } .lazynav .lazynav__panel .lazynav__menu { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } .lazynav .lazynav__panel .lazynav__menu-item { width: 100% !important; margin: 0 0 20px !important; } .lazynav .lazynav__panel .lazynav__menu-item a { font-size: var(--lazynav-mobile-item-size, 18px) !important; color: var(--lazynav-mobile-item-color, #ffffff) !important; transition: color 0.2s ease !important; } .lazynav .lazynav__panel .lazynav__menu-item a:hover { color: var(--lazynav-mobile-item-hover, #e8c547) !important; } .lazynav .lazynav__panel .lazynav__menu-item--active a { color: var(--lazynav-mobile-item-active, #e8c547) !important; } .lazynav .lazynav__panel-empty { color: var(--lazynav-mobile-item-color, #f5f5f0) !important; opacity: 0.7 !important; margin: 0 !important; } /* Exception: locks scroll on while the mobile panel is open. is never a descendant of .lazynav, so this can't be scoped under it, but the class itself (lazynav-menu-open) is unique to this plugin and won't collide with theme styles. */ body.lazynav-menu-open { overflow: hidden !important; } @media (max-width: 767px) { .lazynav.lazynav--collapse-mobile .lazynav__inner > .lazynav__menu, .lazynav.lazynav--collapse-mobile .lazynav__group--right > .lazynav__menu, .lazynav.lazynav--collapse-mobile .lazynav__center > .lazynav__menu, .lazynav.lazynav--collapse-mobile .lazynav__center-group .lazynav__menu--left, .lazynav.lazynav--collapse-mobile .lazynav__center-group .lazynav__menu--right { display: none !important; } .lazynav.lazynav--collapse-mobile .lazynav__toggle { display: inline-flex !important; } .lazynav.lazynav--collapse-mobile.lazynav--hide-button-mobile > .lazynav__inner > .lazynav__button, .lazynav.lazynav--collapse-mobile.lazynav--hide-button-mobile .lazynav__group--right > .lazynav__button, .lazynav.lazynav--collapse-mobile.lazynav--hide-button-mobile .lazynav__group--left > .lazynav__button { display: none !important; } } @media (max-width: 1024px) { .lazynav.lazynav--collapse-tablet .lazynav__inner > .lazynav__menu, .lazynav.lazynav--collapse-tablet .lazynav__group--right > .lazynav__menu, .lazynav.lazynav--collapse-tablet .lazynav__center > .lazynav__menu, .lazynav.lazynav--collapse-tablet .lazynav__center-group .lazynav__menu--left, .lazynav.lazynav--collapse-tablet .lazynav__center-group .lazynav__menu--right { display: none !important; } .lazynav.lazynav--collapse-tablet .lazynav__toggle { display: inline-flex !important; } .lazynav.lazynav--collapse-tablet.lazynav--hide-button-mobile > .lazynav__inner > .lazynav__button, .lazynav.lazynav--collapse-tablet.lazynav--hide-button-mobile .lazynav__group--right > .lazynav__button, .lazynav.lazynav--collapse-tablet.lazynav--hide-button-mobile .lazynav__group--left > .lazynav__button { display: none !important; } }