/* ===================================================================== LeadsNimble Nav 2 — full-width flat dark bar. Ported 1:1 from leadsnimble_html v0.3.0 (src/html/partials/nav.html + src/css/components/nav.css), with everything the reference inherits from OUTSIDE that component file resolved to literals and re-scoped under --lnav2-*: · base/1-reset.css element resets (a / svg / img / button / box-sizing) · base/2-layout.css .wrap (max-width + gutter) and .accent-text · base/3-utilities.css the prefers-reduced-motion block · base/4-responsive.css the --gutter cascade (1040 / 760 / 460) · components/buttons.css .btn + .btn--primary (the "Get started" CTA) · themes/aurora-nightfall/tokens.css + overrides.css This is the SECOND nav widget in the plugin and is deliberately independent of the first (lnew_nav, the floating glass pill): different class prefix, different token prefix, its own stylesheet and script. Either can be used as the site Header via LeadsNimble → Site Parts without touching the other. Unlike lnew_nav, this bar is DARK-LOCKED: the reference redeclares every token a nav descendant reads to the site's dark defaults so the bar reads correctly regardless of [data-mode] and stays dark as it stays pinned over the light page below on scroll. There is therefore no light/dark variant and no mode toggle here — that is the reference design, not an omission. ===================================================================== */ /* --------------------------------------------------------------------------- STICKY CONTAINING-BLOCK FIX — do not remove. In the reference, `.nav` is a direct child of , so the sticky bar can travel the whole page. Under Elementor it is buried in wrapper divs: [.lnew-site-header] > [.elementor] > .elementor-element--widget > .elementor-widget-container > header.lnew-nav2 A sticky element can only travel inside its containing block, and every one of those wrappers shrink-wraps the nav — so the bar would simply scroll away with the page instead of pinning. Dissolving them with display:contents removes them from the box tree without changing the visual result, handing the nav as its containing block, exactly as in the reference. Trade-off: Elementor's own wrapper-level styling (widget margin / padding / z-index from the Advanced tab) no longer applies to this widget — size and spacing come from the nav's own Style controls instead. --------------------------------------------------------------------------- */ .lnew-site-header, .lnew-site-header > .elementor, .elementor-widget-lnew_nav2, .elementor-widget-lnew_nav2 > .elementor-widget-container { display: contents; } /* …but keep real boxes inside the editor canvas, or the widget has no hit area and becomes impossible to select or drag. */ body.elementor-editor-active .elementor-widget-lnew_nav2, body.elementor-editor-active .elementor-widget-lnew_nav2 > .elementor-widget-container { display: block; } /* Local reset — the reference's bare `a {}` / `svg {}` / `button {}` element rules, scoped to this widget. These MUST stay wrapped in :where() so each lands at (0,0,1), the same specificity those element rules have. Written unwrapped as `.lnew-nav2 a`, they'd be (0,1,1) and OUTRANK the component rules below that are supposed to override them — e.g. `a {color:inherit}` would beat `.lnew-nav2__cta {color:…}` and the CTA label would inherit the host theme's ink instead of white. Do not "simplify" the :where() away. */ :where(.lnew-nav2), :where(.lnew-nav2) *, :where(.lnew-nav2) *::before, :where(.lnew-nav2) *::after { box-sizing: border-box; } :where(.lnew-nav2) a { color: inherit; text-decoration: none; } :where(.lnew-nav2) svg { display: block; } :where(.lnew-nav2) img { max-width: 100%; display: block; } :where(.lnew-nav2) button { font-family: inherit; cursor: pointer; border: none; background: none; } .lnew-nav2 { /* ---- motion / shape ---- */ --lnav2-ease: cubic-bezier(.22,1,.36,1); --lnav2-radius-pill: 100px; --lnav2-radius-lg: 24px; --lnav2-btn-radius: 13px; /* ---- geometry (Style tab overrides these) ---- --lnav2-h is the RESTING height only. The scrolled height is a separate token assigned by the `.is-scrolled` block below via the `height` property, never by reassigning --lnav2-h — the mobile drawer's `top` offset reads --lnav2-h and, exactly as in the reference (where :root's --nav-h stays 76px while `.nav.is-scrolled` sets `height:64px`), that offset must NOT move when the bar shrinks. */ --lnav2-h: 76px; --lnav2-h-scrolled: 64px; --lnav2-maxw: 1360px; --lnav2-gutter: 28px; /* How far the following section is pulled up under the bar. 0 = the reference behaviour (the bar is a normal-flow sticky bar and reserves its own height). Raise it to let the next section start underneath the bar. */ --lnav2-overlap: 0px; /* ---- dark-locked palette (aurora-nightfall's dark defaults, resolved) ---- */ --lnav2-bg: rgba(6,6,14,.86); --lnav2-blur: saturate(180%) blur(16px); --lnav2-border: rgba(255,255,255,.08); --lnav2-scrolled-shadow: 0 8px 28px rgba(0,0,0,.28); --lnav2-surface: rgba(255,255,255,.035); --lnav2-ink: #f5f6ff; --lnav2-body: #b8bed6; --lnav2-muted: #949bbb; --lnav2-line: rgba(255,255,255,.10); --lnav2-line-2: rgba(255,255,255,.06); --lnav2-menu-hover-bg: rgba(255,255,255,.06); /* The mobile drawer's shadow. This one is deliberately the LIGHT palette's --shadow-lg, not the dark one: the reference's nav dark-lock block lists --shadow-sm / --shadow-md / --shadow-accent / --shadow-accent-hover but NOT --shadow-lg, so the drawer resolves it from the page — and the page ships data-mode="light". Using the dark value here was a 34px/74px/.62 black bloom where the reference renders a 30px/70px/.16 blue-grey one. */ --lnav2-shadow-lg: 0 30px 70px rgba(30,30,80,.16); /* Accent gradient — one token feeding both the brand's "Nimble" and the CTA fill, mirroring the reference's single --accent-grad. The three stops are split into their own vars so each can be a separate Style-tab colour control (a control can only write one declaration). */ --lnav2-accent-1: #6366f1; --lnav2-accent-2: #a855f7; --lnav2-accent-3: #22d3ee; --lnav2-accent-grad: linear-gradient(100deg, var(--lnav2-accent-1) 0%, var(--lnav2-accent-2) 52%, var(--lnav2-accent-3) 100%); --lnav2-accent-ink: #ffffff; --lnav2-shadow-accent: 0 16px 44px rgba(99,102,241,.4); --lnav2-shadow-accent-hover: 0 22px 54px rgba(99,102,241,.5); --lnav2-cta-glow: 0 0 34px 3px rgba(139,124,255,.45); --lnav2-btn-shimmer: rgba(255,255,255,.42); /* ---- type ---- */ --lnav2-mark: 26px; --lnav2-mark-scrolled: 23px; --lnav2-brand-size: 19px; --lnav2-brand-tracking: -0.02em; /* :root's --head-tracking, not the -0.01em fallback */ --lnav2-menu-size: 15px; --lnav2-signin-size: 15px; --lnav2-cta-size: 15px; --lnav2-logo-h: 30px; position: sticky; top: 0; z-index: 100; height: var(--lnav2-h); margin-bottom: calc(-1 * var(--lnav2-overlap)); background: var(--lnav2-bg); -webkit-backdrop-filter: var(--lnav2-blur); backdrop-filter: var(--lnav2-blur); border-bottom: 1px solid var(--lnav2-border); transition: height .3s var(--lnav2-ease), box-shadow .3s ease, background .3s ease; /* Type baseline pinned to the reference's body reset (17px / 1.6 unitless / normal tracking / DM Sans) instead of inheriting the host WP theme's — Twenty Twenty-Five hands down 22px/1.4/-0.1px, which would make every control in the bar a few px off the reference. line-height MUST stay unitless so children scale it against their own font-size. */ font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; line-height: 1.6; letter-spacing: normal; color: var(--lnav2-body); } .lnew-nav2.is-scrolled { height: var(--lnav2-h-scrolled); box-shadow: var(--lnav2-scrolled-shadow); } /* Non-sticky variant (Style tab switch), for headers that should scroll away. */ .lnew-nav2--static { position: relative; } /* `.wrap` + `.nav__inner` folded into one box: a max-width, gutter-padded content row on a full-bleed bar. Equal 1fr side tracks keep the menu dead centre regardless of how wide the brand or the action cluster get. */ .lnew-nav2__inner { position: relative; height: 100%; width: 100%; max-width: var(--lnav2-maxw); margin-inline: auto; padding-inline: var(--lnav2-gutter); display: grid; align-items: center; grid-template-columns: 1fr auto 1fr; column-gap: 20px; } /* ----- brand ------------------------------------------------------------ Drawn live (inline SVG mark + real text), not the raster wordmark PNG — that PNG's "Nimble" is a multi-stop blue gradient, and forcing it white for the dark bar with filter:brightness(0) invert(1) crushes the gradient's internal anti-aliasing and leaves visible seams inside the bowls of "b" and "e". Vector + text has no such failure mode and stays crisp at any size; the two-tone look (white "Leads" + gradient "Nimble") is recreated with .lnew-nav2__accent instead of relying on a pre-baked image. An image logo is still available as an opt-in via the Brand controls. --------------------------------------------------------------------- */ .lnew-nav2__brand { justify-self: start; display: flex; align-items: center; gap: 10px; } .lnew-nav2__mark { display: block; width: var(--lnav2-mark); height: var(--lnav2-mark); flex: none; transition: width .3s var(--lnav2-ease), height .3s var(--lnav2-ease); } .lnew-nav2.is-scrolled .lnew-nav2__mark { width: var(--lnav2-mark-scrolled); height: var(--lnav2-mark-scrolled); } .lnew-nav2__brand-t { font-family: 'Parkinsans', 'DM Sans', sans-serif; font-weight: 700; font-size: var(--lnav2-brand-size); letter-spacing: var(--lnav2-brand-tracking); color: var(--lnav2-ink); } .lnew-nav2__brand-t b { font-weight: 700; } .lnew-nav2__accent { background: var(--lnav2-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Image-logo variant. Descendant-scoped on purpose: Elementor's frontend.css ships `.elementor img{height:auto}` at (0,1,1), which outranks a bare `.lnew-nav2__logo-img` (0,1,0) and lets the logo fall back to its natural ratio. Keep this selector at (0,2,0) or higher. */ .lnew-nav2 .lnew-nav2__logo-img { display: block; height: var(--lnav2-logo-h); width: auto; transition: height .3s var(--lnav2-ease); } .lnew-nav2.is-scrolled .lnew-nav2__logo-img { height: calc(var(--lnav2-logo-h) - 3px); } /* ----- primary menu ---------------------------------------------------- */ .lnew-nav2__menu { justify-self: center; display: flex; align-items: center; gap: 4px; } .lnew-nav2__menu a { padding: 9px 14px; border-radius: 9px; font-size: var(--lnav2-menu-size); font-weight: 500; color: var(--lnav2-muted); transition: color .16s ease, background .16s ease; } /* `.is-active` is a WordPress addition (the current-page highlight), styled to match the reference's hover state so it never introduces a new look. */ .lnew-nav2__menu a:hover, .lnew-nav2__menu a.is-active { color: var(--lnav2-ink); background: var(--lnav2-menu-hover-bg); } /* ----- actions --------------------------------------------------------- */ .lnew-nav2__actions { justify-self: end; display: flex; align-items: center; gap: 26px; flex: none; } .lnew-nav2__menu a, .lnew-nav2__signin, .lnew-nav2__actions .lnew-nav2__cta { white-space: nowrap; } .lnew-nav2__signin { font-size: var(--lnav2-signin-size); font-weight: 600; color: var(--lnav2-ink); transition: opacity .18s ease; } .lnew-nav2__signin:hover { opacity: .8; } /* ----- CTA button (".btn.btn--primary" in the reference) ---------------- Inlined here scoped to the nav, since this plugin has no shared buttons.css. Descendant-scoped (0,2,0) for the same reason as the logo above: Elementor ships `.elementor a{box-shadow:none}` at (0,1,1), which would strip the resting accent glow while the (0,2,0) :hover rule kept its own — giving a button that only has a shadow while hovered. These are the BASE `.btn` metrics (15.5px / 13px 22px / 13px radius). The bar's own cluster narrows them just below; the mobile drawer's copy keeps them, which is exactly what the reference renders. */ .lnew-nav2 .lnew-nav2__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; padding: 13px 22px; border-radius: var(--lnav2-btn-radius); background: var(--lnav2-accent-grad); color: var(--lnav2-accent-ink); border: none; cursor: pointer; white-space: nowrap; /* Second slot is a zero-size, fully transparent shadow — invisible at rest, it exists so the hover glow below has something to interpolate FROM (a shadow list can only animate slot-for-slot). Ported from the reference theme's `.btn--primary` aurora override. */ box-shadow: var(--lnav2-shadow-accent), 0 0 0 0 rgba(139,124,255,0); background-size: 130% 70%; background-position: 0% 50%; animation: lnew-nav2-gradient-loop 7s ease-in-out infinite; /* isolation + overflow contain the shimmer sweep — see the ::before note. */ overflow: hidden; isolation: isolate; transition: transform .22s var(--lnav2-ease), box-shadow .3s var(--lnav2-ease), background .22s ease; } /* Inside the bar's action cluster the CTA becomes a compact pill — the reference's `.nav__actions .btn` override. Deliberately NOT folded into the rule above: the drawer's copy must keep the base metrics. */ .lnew-nav2__actions .lnew-nav2__cta { border-radius: var(--lnav2-radius-pill); padding: 10px 22px; font-size: var(--lnav2-cta-size); } .lnew-nav2 .lnew-nav2__cta:hover { transform: translateY(-2px); box-shadow: var(--lnav2-shadow-accent-hover), var(--lnav2-cta-glow); } .lnew-nav2__cta svg { width: 15px; height: 15px; position: relative; z-index: 2; transition: transform .4s var(--lnav2-ease); } .lnew-nav2 .lnew-nav2__cta:hover svg { transform: translateX(4px); } @keyframes lnew-nav2-gradient-loop { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* "melt" shimmer sweep, fires once per hover. Positive z-index + isolation on the host (not a negative-z pseudo) — the :hover rule above applies a translateY, which creates a stacking context that a negative-z child would paint ABOVE, causing a hover-only flicker that is miserable to debug. */ .lnew-nav2__cta::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -45%; width: 45%; background: linear-gradient(100deg, transparent, var(--lnav2-btn-shimmer), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .lnew-nav2 .lnew-nav2__cta:hover::before { opacity: 1; animation: lnew-nav2-btn-melt .85s var(--lnav2-ease); } @keyframes lnew-nav2-btn-melt { from { left: -45%; } to { left: 120%; } } /* ----- burger ---------------------------------------------------------- The `padding: 1px 6px` is Chrome's UA default for