/* ===================================================================== LeadsNimble Footer Widget — a 1:1 port of the leadsnimble_html template's closing sequence (src/html/partials/footer.html + src/css/components/footer.css): 1. NEWSLETTER — light, centred signup block with avatar cluster, 2. PROMO — dark CTA card floating on the light page + aurora orb, 3. FOOTER — dark panel: brand/contact + link columns + copyright bar. The theme's design tokens are resolved to literal values and re-scoped under --lnf-*, so the widget renders identically regardless of the active WP theme and never leaks variables into the rest of the page. LIGHT is the default mode (matching the site, .lnew-nav and .lnew-hero); [data-mode="dark"] on flips the palette — the same switch the nav's mode toggle writes. Every --lnf-* token below is writable from the widget's Style tab. The dark-mode controls are emitted at [data-mode="dark"] {{WRAPPER}} .lnew-footer so they outrank the light ones on specificity rather than source order. Type: Parkinsans (display) + DM Sans (body) — matches the template exactly. ===================================================================== */ .lnew-footer { /* ---- geometry (template :root) ---- */ --lnf-maxw: 1360px; --lnf-gutter: 28px; --lnf-btn-radius: 13px; --lnf-rv-ease: cubic-bezier(.22, 1, .36, 1); --lnf-rv-dist: 70px; --lnf-rv-dur: 1.2s; --lnf-rv-step: 70ms; /* ---- type ---- */ --lnf-font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --lnf-font-head: "Parkinsans", "DM Sans", system-ui, sans-serif; /* ---- light-mode surfaces & ink (template [data-mode="light"]) ---- */ --lnf-bg: #e5ebf6; --lnf-surface: #ffffff; --lnf-ink: #12122a; --lnf-body: #454a63; --lnf-muted: #6b7089; --lnf-muted-2: #9498b0; --lnf-line: #e7e9f4; /* ---- accent (aurora) ---- */ --lnf-accent: #6d5cf5; --lnf-accent-2: #22d3ee; --lnf-accent-ink: #ffffff; --lnf-accent-grad: linear-gradient(100deg, #6366f1 0%, #a855f7 52%, #22d3ee 100%); --lnf-accent-halo: rgba(139, 124, 255, .28); --lnf-accent-soft-bg: #eef0ff; --lnf-accent-soft-border: rgba(139, 124, 255, .4); /* ---- dark sections (promo card + footer panel) ---- */ --lnf-dark-bg-grad: radial-gradient(120% 120% at 50% -10%, #1a1740 0%, #0a0a16 56%); --lnf-dark-ink: #ffffff; --lnf-dark-body: #c4cae2; --lnf-dark-muted: #8b93b8; --lnf-dark-line: rgba(255, 255, 255, .1); --lnf-footer-body: #9aa2c2; /* ---- shadows ---- */ --lnf-shadow-sm: 0 1px 2px rgba(30, 30, 80, .05), 0 2px 6px rgba(30, 30, 80, .05); --lnf-shadow-lg: 0 30px 70px rgba(30, 30, 80, .16); --lnf-shadow-accent: 0 16px 40px rgba(99, 102, 241, .28); --lnf-shadow-accent-hover: 0 20px 50px rgba(99, 102, 241, .36); --lnf-btn-shimmer: rgba(255, 255, 255, .55); /* ---- per-section spacing / shape (Style-tab controlled) ---- */ --lnf-nl-pad-top: 84px; --lnf-nl-pad-bottom: 46px; --lnf-promo-pad-top: 30px; --lnf-promo-pad-bottom: 46px; --lnf-promo-radius: 28px; --lnf-promo-pad: 50px; --lnf-footer-pad-top: 56px; --lnf-footer-pad-bottom: 38px; --lnf-footer-radius: 36px; --lnf-grid-gap: 40px; --lnf-brand-col: 1.7fr; position: relative; width: 100%; /* The newsletter and promo blocks are transparent in the template — they sit directly on the page background. Painting that same token here (as .lnew-hero does with --lnh-bg) keeps the widget self-sufficient: it reads correctly in BOTH modes even when dropped on a page whose own background is not themed, and stays seamless when it is, because this is the very token the page background is built from. The dark footer panel paints over it, and its rounded top corners let it show through. */ background: var(--lnf-bg); /* Base typography the template sets on (base/1-reset.css). Declared here so descendants inherit the same 17px/1.6 rhythm they do in the template — without it the WP theme's own body type leaks in and every line box in the footer comes out short. */ font-family: var(--lnf-font-sans); font-size: 17px; line-height: 1.6; color: var(--lnf-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; box-sizing: border-box; } /* ---- palette · DARK ([data-mode="dark"] on , written by the nav's mode toggle — the same switch .lnew-nav and .lnew-hero listen to) ---- */ [data-mode="dark"] .lnew-footer { --lnf-bg: #0a0a12; --lnf-surface: rgba(255, 255, 255, .035); --lnf-ink: #f5f6ff; --lnf-body: #b8bed6; --lnf-muted: #949bbb; --lnf-muted-2: #6d7398; --lnf-line: rgba(255, 255, 255, .10); --lnf-accent: #8b7cff; --lnf-accent-soft-bg: rgba(139, 124, 255, .12); --lnf-accent-soft-border: rgba(139, 124, 255, .4); --lnf-dark-bg-grad: radial-gradient(120% 120% at 50% -10%, #1a1740 0%, #06060d 56%); --lnf-footer-body: #9aa2c2; --lnf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --lnf-shadow-lg: 0 34px 74px rgba(0, 0, 0, .62); --lnf-shadow-accent: 0 16px 44px rgba(99, 102, 241, .4); --lnf-shadow-accent-hover: 0 22px 54px rgba(99, 102, 241, .5); --lnf-btn-shimmer: rgba(255, 255, 255, .42); } .lnew-footer *, .lnew-footer *::before, .lnew-footer *::after { box-sizing: border-box; } /* Reset the handful of element defaults the template's 1-reset.css supplies, scoped to the widget so nothing leaks into the rest of the page. Wrapped in :where() so the whole block carries ZERO specificity, exactly like the bare `p{margin:0}` it stands in for. Written as plain descendant selectors it would score 0,0,1,1 and silently out-rank every single-class rule below it — margin-top on .lnew-footer__nl-sub / __promo-sub would be swallowed and the vertical rhythm would collapse. */ :where(.lnew-footer) :where(h2, h3, p) { margin: 0; } :where(.lnew-footer) :where(a) { text-decoration: none; color: inherit; } :where(.lnew-footer) :where(img) { max-width: 100%; } .lnew-footer__wrap { width: 100%; max-width: var(--lnf-maxw); margin-inline: auto; padding-inline: var(--lnf-gutter); } /* ===================================================================== Buttons — the template's .btn system (components/buttons.css) ===================================================================== */ .lnew-footer__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--lnf-font-sans); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; padding: 13px 22px; border: 0; border-radius: var(--lnf-btn-radius); cursor: pointer; white-space: nowrap; transition: transform .22s var(--lnf-rv-ease), box-shadow .3s var(--lnf-rv-ease), background .22s ease, border-color .22s ease, color .22s ease; /* isolation + overflow contain the shimmer sweep — see the stacking note below. */ position: relative; overflow: hidden; isolation: isolate; } .lnew-footer__btn svg { width: 15px; height: 15px; transition: transform .4s var(--lnf-rv-ease); } .lnew-footer__btn:hover svg { transform: translateX(4px); } .lnew-footer__btn--primary { background: var(--lnf-accent-grad); color: var(--lnf-accent-ink); box-shadow: var(--lnf-shadow-accent); background-size: 130% 70%; background-position: 0% 50%; animation: lnf-gradientLoop 7s ease-in-out infinite; } .lnew-footer__btn--primary:hover { transform: translateY(-2px); box-shadow: var(--lnf-shadow-accent-hover); } @keyframes lnf-gradientLoop { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* "Melt" shimmer sweep, fires once per hover. STACKING NOTE: :hover applies a transform, which creates a stacking context. Inside it a z-index:-1 pseudo would paint ABOVE the element's background — a hover-only flicker. Hence isolation:isolate above plus a POSITIVE z-index here. Do not "simplify" this to a negative z-index. */ .lnew-footer__btn--primary::before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -45%; width: 45%; background: linear-gradient(100deg, transparent, var(--lnf-btn-shimmer), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .lnew-footer__btn--primary:hover::before { opacity: 1; animation: lnf-btnMelt .85s var(--lnf-rv-ease); } @keyframes lnf-btnMelt { from { left: -45%; } to { left: 120%; } } .lnew-footer__btn > * { position: relative; z-index: 2; } .lnew-footer__btn--ondark { background: rgba(255, 255, 255, .08); color: var(--lnf-dark-ink); border: 1px solid rgba(255, 255, 255, .18); } .lnew-footer__btn--ondark:hover { background: rgba(255, 255, 255, .14); transform: translateY(-2px); } .lnew-footer__btn:focus-visible { outline: 2px solid var(--lnf-accent); outline-offset: 3px; } /* ===================================================================== 1 · Newsletter (light) ===================================================================== */ .lnew-footer__nl { padding: var(--lnf-nl-pad-top) 0 var(--lnf-nl-pad-bottom); text-align: center; } .lnew-footer__nl-inner { max-width: 620px; margin-inline: auto; } .lnew-footer__nl-title { font-family: var(--lnf-font-head); font-weight: 500; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; color: var(--lnf-ink); letter-spacing: -0.02em; } .lnew-footer__nl-sub { margin-top: 14px; font-size: 16px; color: var(--lnf-muted); line-height: 1.6; } .lnew-footer__nl-form { display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap; } .lnew-footer__nl-field { display: flex; align-items: center; gap: 10px; flex: 0 1 340px; background: var(--lnf-surface); border: 1px solid var(--lnf-line); border-radius: var(--lnf-btn-radius); padding: 0 14px; box-shadow: var(--lnf-shadow-sm); transition: border-color .2s ease, box-shadow .2s ease; } .lnew-footer__nl-field:focus-within { border-color: var(--lnf-accent); box-shadow: 0 0 0 3px var(--lnf-accent-soft-bg); } .lnew-footer__nl-mail { width: 18px; height: 18px; color: var(--lnf-muted-2); flex: none; } .lnew-footer__nl-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 13px 0; font-family: var(--lnf-font-sans); font-size: 15px; color: var(--lnf-ink); } .lnew-footer__nl-input::placeholder { color: var(--lnf-muted-2); opacity: 1; } .lnew-footer__nl-btn { padding-inline: 26px; } .lnew-footer__nl-help { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; } .lnew-footer__nl-help-txt { font-size: 13.5px; color: var(--lnf-muted); } .lnew-footer__nl-avs { display: inline-flex; } .lnew-footer__nl-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-family: var(--lnf-font-head); font-weight: 700; font-size: 11px; color: #fff; letter-spacing: .02em; background: linear-gradient(150deg, hsl(var(--h, 265) 72% 62%), hsl(calc(var(--h, 265) + 26) 74% 47%)); border: 2px solid var(--lnf-bg); box-shadow: var(--lnf-shadow-sm); } .lnew-footer__nl-av + .lnew-footer__nl-av { margin-left: -10px; } .lnew-footer__nl-av img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Submit feedback. */ .lnew-footer__nl-btn.is-done { cursor: default; } /* Loading — a small spinner sits alongside the label while the native handler's request is in flight. */ .lnew-footer__nl-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: lnew-footer-nl-spin .7s linear infinite; } .lnew-footer__nl-form.is-sending .lnew-footer__nl-btn { cursor: progress; opacity: .85; } .lnew-footer__nl-form.is-sending .lnew-footer__nl-spin { display: inline-block; } @keyframes lnew-footer-nl-spin { to { transform: rotate(360deg); } } /* Honeypot — off-screen; bots fill it, humans never see it. */ .lnew-footer__nl-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Error note — shown once the native handler rejects the request (invalid email, rate limit, expired nonce). */ .lnew-footer__nl-note { display: none; flex: 1 0 100%; margin: 12px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; text-align: center; } .lnew-footer__nl-note--err { color: var(--lnf-err, #d64550); } .lnew-footer__nl-form.is-error .lnew-footer__nl-note--err { display: block; } /* ===================================================================== 2 · Closing promo — its own dark panel, floating on the light page ===================================================================== */ .lnew-footer__promo { padding: var(--lnf-promo-pad-top) 0 var(--lnf-promo-pad-bottom); } .lnew-footer__promo-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: 24px; border-radius: var(--lnf-promo-radius); padding: var(--lnf-promo-pad); background: radial-gradient(120% 130% at 100% 0%, rgba(139, 124, 255, .20), transparent 55%), linear-gradient(120deg, #15122e 0%, #0b0a1c 62%); border: 1px solid var(--lnf-dark-line); box-shadow: var(--lnf-shadow-lg); color: var(--lnf-dark-body); } .lnew-footer__promo-title { font-family: var(--lnf-font-head); font-weight: 500; font-size: clamp(26px, 3vw, 40px); color: #fff; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; } .lnew-footer__promo-sub { margin-top: 14px; font-size: 16px; color: var(--lnf-dark-muted); max-width: 430px; line-height: 1.6; } .lnew-footer__promo-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; } .lnew-footer__promo-art { position: relative; display: grid; place-items: center; min-height: 220px; } /* ---- aurora dotted orb ---- */ .lnew-footer__orb { position: relative; width: min(300px, 92%); aspect-ratio: 1; } .lnew-footer__orb::before { /* aurora bloom behind */ content: ""; position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(closest-side at 72% 26%, color-mix(in srgb, var(--lnf-accent-2) 60%, transparent), transparent 60%), radial-gradient(closest-side at 28% 80%, color-mix(in srgb, var(--lnf-accent) 48%, transparent), transparent 62%); filter: blur(12px); opacity: .7; } .lnew-footer__orb::after { /* dot-grid sphere */ content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(206, 193, 255, .92) 1px, transparent 1.5px) 0 0 / 12px 12px; -webkit-mask: radial-gradient(circle at 60% 40%, #000 46%, rgba(0, 0, 0, .35) 70%, transparent 82%); mask: radial-gradient(circle at 60% 40%, #000 46%, rgba(0, 0, 0, .35) 70%, transparent 82%); opacity: .62; } .lnew-footer__orb-arc { /* glowing rim arc, top-right */ position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: conic-gradient(from 205deg, transparent 30deg, var(--lnf-accent-2) 96deg, var(--lnf-accent) 148deg, transparent 188deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .85; filter: drop-shadow(0 0 6px var(--lnf-accent-halo)); } /* The orb comes alive on hover — dotted sphere drifts, rim arc sweeps. */ @media (hover: hover) { .lnew-footer__promo-card:hover .lnew-footer__orb::after { animation: lnf-orb-drift 5s linear infinite; } .lnew-footer__promo-card:hover .lnew-footer__orb-arc { animation: lnf-orb-spin 9s linear infinite; } } @keyframes lnf-orb-drift { to { background-position: 12px 12px; } } @keyframes lnf-orb-spin { to { transform: rotate(360deg); } } /* ===================================================================== 3 · Footer (dark) ===================================================================== */ .lnew-footer__panel { position: relative; background: var(--lnf-dark-bg-grad); color: var(--lnf-footer-body); border-radius: var(--lnf-footer-radius) var(--lnf-footer-radius) 0 0; padding: var(--lnf-footer-pad-top) 0 var(--lnf-footer-pad-bottom); } /* hairline light seam across the footer's top edge */ .lnew-footer__panel::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--lnf-accent-soft-border), transparent); } .lnew-footer__grid { display: grid; grid-template-columns: var(--lnf-brand-col) 1fr 1fr 1fr; gap: var(--lnf-grid-gap); padding-bottom: 40px; border-bottom: 1px solid var(--lnf-dark-line); } .lnew-footer__brand { display: flex; align-items: center; margin-bottom: 16px; } .lnew-footer__logo-img { display: block; height: 30px; width: auto; } .lnew-footer__logo-img.is-inverted { filter: brightness(0) invert(1); } .lnew-footer__tag { font-size: 14.5px; color: var(--lnf-dark-muted); max-width: 300px; line-height: 1.6; } .lnew-footer__contact { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; } .lnew-footer__c-row { display: flex; gap: 44px; flex-wrap: wrap; } .lnew-footer__c { display: flex; flex-direction: column; gap: 4px; } .lnew-footer__c-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--lnf-dark-muted); opacity: .72; } .lnew-footer__c-v { font-size: 14px; color: var(--lnf-dark-body); line-height: 1.5; } a.lnew-footer__c-v { transition: color .16s; } /* The phone and email values are real tel:/mailto: links but only render 21px tall, well under a comfortable touch target. Pad the hit area on coarse pointers and pull the padding straight back out with an equal negative margin, so the target grows to ~39px without shifting the footer by a pixel. */ @media (pointer: coarse) { a.lnew-footer__c-v { display: inline-block; padding-block: 9px; margin-block: -9px; } } a.lnew-footer__c-v:hover, a.lnew-footer__c-v:focus-visible { color: var(--lnf-dark-ink); outline: none; } .lnew-footer__col h3 { position: relative; font-family: var(--lnf-font-head); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--lnf-dark-ink); margin-bottom: 16px; } .lnew-footer__col h3::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 18px; height: 2px; border-radius: 2px; background: var(--lnf-accent-grad); opacity: .75; } .lnew-footer__col a { display: block; font-size: 14.5px; color: var(--lnf-dark-muted); padding: 6px 0; transition: color .16s ease, padding-left .16s ease; } .lnew-footer__col a:hover, .lnew-footer__col a:focus-visible { color: var(--lnf-dark-ink); padding-left: 5px; outline: none; } .lnew-footer--no-seam .lnew-footer__panel::before, .lnew-footer--no-col-underline .lnew-footer__col h3::after { display: none; } .lnew-footer__col a:focus-visible, a.lnew-footer__c-v:focus-visible { outline: 2px solid var(--lnf-accent); outline-offset: 2px; border-radius: 3px; } /* ---- copyright ---- */ .lnew-footer__base { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 26px; font-size: 13.5px; color: var(--lnf-dark-muted); flex-wrap: wrap; } .lnew-footer__base-note { opacity: .7; } /* ===================================================================== Scroll reveal — mirrors the template's .reveal utility. The pre-hidden state applies only while JS has not yet claimed the widget (`.lnew-footer--rv` is added by PHP and `is-in` by footer-widget.js), so with JS disabled the