/* ===================================================================== LeadsNimble Solution 2 — the rewritten "one platform (hub) → three stages" section. Ported 1:1 from the CURRENT leadsnimble_html reference: src/html/partials/solution.html (head, hub, gborder frame, wires, 3 pillars + their fixed mockups) src/css/components/solution.css (#solution rise, .flow dark island, hub/frame/wires/pillars/art) src/css/base/1-reset.css (h1-h3 line-height:1.12 — see note) src/css/base/2-layout.css (.wrap, .section, .section__head, .eyebrow + its indicator lamp) src/css/base/3-utilities.css (.reveal stagger, .gborder ring, reduced motion) src/css/themes/aurora-nightfall/ (tokens resolved to literals; the tokens.css + overrides.css shared `.pillar { glass }` rule in overrides.css concatenates LAST in build.sh, so where it disagrees with components/solution.css the OVERRIDE is what ships and is what is flattened in here.) --------------------------------------------------------------------- THIS IS THE SECOND SOLUTION SECTION. `lnew_solution` (--lns-*, .lnew-solution) is the earlier design — light-default palette, a shallow-V card lean, a 320px halo — and is untouched. The two share no class prefix, no token namespace, no CSS and no JS, exactly like lnew_hero / lnew_hero2. --------------------------------------------------------------------- HALF-LOCKED PALETTE. The reference's `.flow` block redeclares every mode-dependent token its descendants read with the site's DARK literals — the same "dark island" technique .hero uses — so the hub + frame + pillars stay dark whatever [data-mode] the nav writes on . But the section SHELL around it (background, eyebrow, title, lead) is NOT locked and does follow the mode. So this file has: · --lns2-* shell tokens, with a [data-mode="dark"] override pair (light is the default, matching the site's default mode — same convention as every other lnew-* widget) · --lns2-fl-* flow-island tokens, declared ONCE, mode-independent Only TWO things inside the island are still mode-dependent in the reference, and both are reproduced below rather than "cleaned up": 1. --dark-bg-grad's end stop (the frame's base fill) is #06060d in dark and #0a0a16 in light — .flow does not redeclare that token. 2. overrides.css paints .pillar as glass (translucent + backdrop blur + inset highlight) in dark, and as a flat --surface card with no blur in light. Inside .flow both resolve to near-identical dark values, so the difference is subtle by design — but it is the shipped behaviour. ===================================================================== */ /* Local reset. Wrapped in :where() so it carries ZERO specificity — a bare `.lnew-solution2 p` would be (0,1,1) and would outrank every (0,1,0) component class below it. See [[hero-widget-feature]] / [[nav-widget-feature]] / [[solution-widget-feature]]. Do not unwrap. */ .lnew-solution2, .lnew-solution2 *, .lnew-solution2 *::before, .lnew-solution2 *::after { box-sizing: border-box; } :where(.lnew-solution2) :where(a) { color: inherit; text-decoration: none; } :where(.lnew-solution2) :where(p) { margin: 0; } :where(.lnew-solution2) :where(ul, ol) { margin: 0; padding: 0; list-style: none; } :where(.lnew-solution2) :where(svg) { display: block; } :where(.lnew-solution2) :where(h1, h2, h3) { margin: 0; } .lnew-solution2 { /* ---- motion / geometry ---- */ --lns2-ease: cubic-bezier(.22,1,.36,1); --lns2-rv-dist: 70px; --lns2-rv-dur: 1.2s; --lns2-rv-step: 70ms; --lns2-maxw: 1360px; --lns2-gutter: 28px; --lns2-grid-gap: 18px; --lns2-radius-md: 18px; --lns2-radius-lg: 24px; --lns2-radius-2xl: 40px; --lns2-house-skew: -18deg; /* the rounded lip: the section pulls itself UP by its own corner radius so the page "rises" over the dark band above it (the hero). A flat top edge with only the two corners curved — not a dome. Set to 0 from the Style tab when this section does not sit directly under a darker one. */ --lns2-rise: 36px; --lns2-head-gap: 56px; --lns2-flow-gap: 34px; --lns2-hub-size: 118px; --lns2-halo-size: 420px; --lns2-halo-blur: 48px; --lns2-hub-overlap: 59px; --lns2-frame-pad-top: 62px; --lns2-frame-pad-x: 22px; --lns2-frame-pad-bottom: 24px; --lns2-frame-dot: 24px; --lns2-wires-h: 132px; --lns2-pillar-pad-y: 26px; --lns2-pillar-pad-x: 24px; --lns2-pillar-copy-min: 4.8em; --lns2-art-h: 240px; --lns2-art-pad: 18px; --lns2-title-size: clamp(31px, 3.6vw, 47px); /* ---- type ---- */ --lns2-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --lns2-font-head: 'Parkinsans', 'DM Sans', sans-serif; /* ---- shell palette · LIGHT (the site's default mode) ---- */ --lns2-bg: #dde2f4; --lns2-ink: #12122a; --lns2-body: #454a63; --lns2-muted: #6b7089; --lns2-eyebrow-bg: #eef0ff; --lns2-eyebrow-ink: #5b46e0; --lns2-eyebrow-border: #e0e3ff; --lns2-eyebrow-dot: #6d5cf5; /* the frame's opaque base — --dark-bg-grad's end stop, the one island value the reference leaves mode-dependent */ --lns2-frame-base: #0a0a16; /* ---- accent gradient (constant in the reference — neither mode redeclares --accent-grad / --accent-ink / --accent-halo) ---- */ --lns2-grad-1: #6366f1; --lns2-grad-2: #a855f7; --lns2-grad-3: #22d3ee; --lns2-accent-grad: linear-gradient(100deg, var(--lns2-grad-1) 0%, var(--lns2-grad-2) 52%, var(--lns2-grad-3) 100%); --lns2-accent-ink: #ffffff; --lns2-accent-halo: rgba(139,124,255,.28); /* ---- flow island · DARK-LOCKED (see the palette note above) ---- */ --lns2-fl-surface: rgba(255,255,255,.035); --lns2-fl-ink: #f5f6ff; --lns2-fl-muted: #949bbb; --lns2-fl-muted-2: #6d7398; --lns2-fl-line: rgba(255,255,255,.10); --lns2-fl-line-2: rgba(255,255,255,.06); --lns2-fl-bg-tint: #0d0d18; --lns2-fl-accent: #8b7cff; --lns2-fl-accent-2: #22d3ee; --lns2-fl-accent-soft-bg: rgba(139,124,255,.12); --lns2-fl-accent-soft-ink: #c3b8ff; --lns2-fl-accent-soft-border: rgba(139,124,255,.24); --lns2-fl-green-ink: #6ee7b7; --lns2-fl-green-soft-bg: rgba(52,211,153,.13); --lns2-fl-green-soft-border: rgba(52,211,153,.26); --lns2-fl-glass-bg: rgba(255,255,255,.045); --lns2-fl-glass-blur: blur(14px) saturate(150%); --lns2-fl-glass-hi: rgba(255,255,255,.10); --lns2-fl-dot: rgba(255,255,255,.05); --lns2-fl-frame-glow: #1a1740; --lns2-fl-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --lns2-fl-shadow-md: 0 12px 34px rgba(0,0,0,.5); --lns2-fl-shadow-lg: 0 34px 74px rgba(0,0,0,.62); --lns2-fl-shadow-accent: 0 16px 44px rgba(99,102,241,.4); /* the gradient-masked hairline ring on the frame (--border-grad) */ --lns2-gb-1: rgba(139,124,255,.9); --lns2-gb-2: rgba(34,211,238,.45); --lns2-gb-3: rgba(255,255,255,.05); --lns2-gb-w: 1.5px; --lns2-gb-op: .7; /* per-well tint glows on the three illustration screens */ --lns2-fl-glow-cap: rgba(37,211,102,.45); --lns2-fl-glow-rsp: rgba(139,124,255,.5); --lns2-fl-glow-cv: rgba(34,211,238,.45); position: relative; overflow-x: clip; padding-top: 112px; padding-bottom: 112px; margin-top: calc(var(--lns2-rise) * -1); border-radius: var(--lns2-rise) var(--lns2-rise) 0 0; background: var(--lns2-bg); font-family: var(--lns2-font-sans); color: var(--lns2-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ---- shell palette · DARK ([data-mode="dark"] on , written by the nav's mode toggle). Emitted as a descendant pair so it outranks the light block on SPECIFICITY, never on source order. ---- */ [data-mode="dark"] .lnew-solution2 { --lns2-bg: #0a0a12; --lns2-ink: #f5f6ff; --lns2-body: #b8bed6; --lns2-muted: #949bbb; --lns2-eyebrow-bg: rgba(255,255,255,.05); --lns2-eyebrow-ink: #cdc6ff; --lns2-eyebrow-border: rgba(255,255,255,.12); --lns2-eyebrow-dot: #8b7cff; --lns2-frame-base: #06060d; } /* ===================================================================== Layout shell ===================================================================== */ .lnew-solution2__wrap { width: 100%; max-width: var(--lns2-maxw); margin-inline: auto; padding-inline: var(--lns2-gutter); } .lnew-solution2__head { max-width: none; margin-inline: auto; margin-bottom: var(--lns2-head-gap); text-align: center; } /* ===================================================================== Eyebrow — pill + the dim indicator lamp ===================================================================== */ .lnew-solution2__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--lns2-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--lns2-eyebrow-ink); background: var(--lns2-eyebrow-bg); border: 1px solid var(--lns2-eyebrow-border); padding: 7px 14px; border-radius: 100px; } .lnew-solution2__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lns2-eyebrow-dot); box-shadow: 0 0 0 4px var(--lns2-accent-halo); opacity: .45; animation: lns2-dot-lamp 5.2s ease-in-out infinite; } @keyframes lns2-dot-lamp { 0% { opacity: .35; box-shadow: 0 0 0 4px var(--lns2-accent-halo), 0 0 0 0 transparent; } 8% { opacity: 1; box-shadow: 0 0 0 4px var(--lns2-accent-halo), 0 0 7px 1px var(--lns2-eyebrow-dot); } 22% { opacity: 1; box-shadow: 0 0 0 4px var(--lns2-accent-halo), 0 0 7px 1px var(--lns2-eyebrow-dot); } 40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lns2-accent-halo), 0 0 0 0 transparent; } } /* ===================================================================== Title + lead ===================================================================== */ .lnew-solution2__title { font-family: var(--lns2-font-head); font-weight: 500; font-size: var(--lns2-title-size); margin-top: 18px; line-height: 1.12; letter-spacing: -0.02em; color: var(--lns2-ink); text-wrap: balance; } .lnew-solution2__title-accent { background: var(--lns2-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lnew-solution2__lead { margin-top: 18px; font-size: 18px; color: var(--lns2-muted); line-height: 1.65; text-wrap: balance; } /* ===================================================================== Flow — hub + frame + wires + pillars (the dark island) ===================================================================== */ .lnew-solution2__flow { position: relative; margin-top: var(--lns2-flow-gap); } /* ---- hub: the "one platform" core ---- */ .lnew-solution2__hub { position: relative; z-index: 2; display: flex; justify-content: center; } .lnew-solution2__halo { position: absolute; top: 50%; left: 50%; width: var(--lns2-halo-size); height: var(--lns2-halo-size); transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0; /* a real bloom, spread wide like a live light source */ background: radial-gradient(circle, var(--lns2-accent-halo), transparent 62%); filter: blur(var(--lns2-halo-blur)); animation: lns2-hub-pulse 5s ease-in-out infinite; } .lnew-solution2__core { position: relative; z-index: 1; width: var(--lns2-hub-size); height: var(--lns2-hub-size); display: grid; place-items: center; border-radius: 50%; background: var(--lns2-accent-grad); color: var(--lns2-accent-ink); box-shadow: 0 0 0 10px var(--lns2-fl-accent-soft-bg), var(--lns2-fl-shadow-accent), inset 0 2px 10px rgba(255,255,255,.4); /* the core itself breathes light, not just the halo behind it */ animation: lns2-core-glow 3.4s ease-in-out infinite; } .lnew-solution2__spark { width: 52px; height: 52px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); } .lnew-solution2__spark--sm { position: absolute; width: 20px; height: 20px; top: 30px; right: 30px; opacity: .95; } @keyframes lns2-core-glow { 0%, 100% { box-shadow: 0 0 0 10px var(--lns2-fl-accent-soft-bg), var(--lns2-fl-shadow-accent), inset 0 2px 10px rgba(255,255,255,.4), 0 0 55px 12px var(--lns2-accent-halo); } 50% { box-shadow: 0 0 0 10px var(--lns2-fl-accent-soft-bg), var(--lns2-fl-shadow-accent), inset 0 2px 10px rgba(255,255,255,.4), 0 0 100px 30px var(--lns2-accent-halo); } } @keyframes lns2-hub-pulse { 0%, 100% { opacity: .8; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } } /* ---- the frame: one authored dark enclosure the hub straddles. A dot-grid texture + the accent glow layered over an OPAQUE base, so it reads as one solid dark rounded panel and never tints whatever page colour sits behind it. (--lns2-fl-glass-bg is deliberately absent from this stack: a plain rgba() colour can only be the trailing background-color of the LAST layer, and the base gradient is already opaque, so it would add nothing.) */ .lnew-solution2__frame { position: relative; margin-top: calc(var(--lns2-hub-overlap) * -1); padding: var(--lns2-frame-pad-top) var(--lns2-frame-pad-x) var(--lns2-frame-pad-bottom); border-radius: var(--lns2-radius-2xl) var(--lns2-radius-2xl) var(--lns2-radius-lg) var(--lns2-radius-lg); background-image: radial-gradient(var(--lns2-fl-dot) 1px, transparent 1.6px), radial-gradient(120% 90% at 50% 0%, var(--lns2-fl-accent-soft-bg), transparent 62%), radial-gradient(120% 120% at 50% -10%, var(--lns2-fl-frame-glow) 0%, var(--lns2-frame-base) 56%); background-size: var(--lns2-frame-dot) var(--lns2-frame-dot), auto, auto; border: 1px solid var(--lns2-fl-line); box-shadow: var(--lns2-fl-shadow-lg); -webkit-backdrop-filter: var(--lns2-fl-glass-blur); backdrop-filter: var(--lns2-fl-glass-blur); overflow: visible; /* Safari would clip the straddling hub otherwise */ } /* the gradient-masked hairline ring (.gborder in the reference). THREE GOTCHAS, do not "tidy" these away: 1. the -webkit-mask SHORTHAND resets -webkit-mask-composite, so the composite lines MUST come after it — reversed, you get a solid filled rectangle instead of a ring; 2. `xor` (WebKit legacy) and `exclude` (standard) are NOT aliases, both lines are required; 3. border-radius:inherit only works because the host declares a radius. */ .lnew-solution2__frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--lns2-gb-w); background: linear-gradient(135deg, var(--lns2-gb-1) 0%, var(--lns2-gb-2) 42%, var(--lns2-gb-3) 78%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: var(--lns2-gb-op); transition: opacity .45s var(--lns2-ease); } .lnew-solution2__frame:hover::before, .lnew-solution2__frame:focus-within::before { opacity: 1; } /* ring switched off from the Content tab */ .lnew-solution2__frame--no-ring::before { content: none; } /* hiding the hub removes the thing the negative margin + the tall top padding exist for — collapse both back to a plain, non-overlapping box */ .lnew-solution2__flow--no-hub .lnew-solution2__frame { margin-top: 0; padding-top: var(--lns2-frame-pad-bottom); } /* ---- connector wires: hub -> three cards ---- */ .lnew-solution2__wires { display: block; width: 100%; height: var(--lns2-wires-h); margin-top: -6px; overflow: visible; filter: drop-shadow(0 0 5px var(--lns2-accent-halo)); } .lnew-solution2__wire { fill: none; stroke: var(--lns2-fl-accent-soft-border); stroke-width: 2; vector-effect: non-scaling-stroke; } .lnew-solution2__node { fill: var(--lns2-fl-accent); } /* ===================================================================== Stage cards — equal thirds The reference dropped its old 1fr 1.12fr 1fr "shallow V lean" so the three read as truly uniform slots (the mockup wells must be identical), which also lands .lnew-solution2__wires (hardcoded at 16.7 / 50 / 83.3% of its viewBox) precisely on the card centres. ===================================================================== */ .lnew-solution2__pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--lns2-grid-gap); } .lnew-solution2__pillar { position: relative; display: flex; flex-direction: column; border: 1px solid var(--lns2-fl-line); border-radius: var(--lns2-radius-lg); padding: var(--lns2-pillar-pad-y) var(--lns2-pillar-pad-x); overflow: hidden; transition: transform .25s var(--lns2-ease), border-color .25s ease, box-shadow .25s ease; } .lnew-solution2__pillar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lns2-fl-accent-soft-border), transparent); } .lnew-solution2__pillar:hover { transform: translateY(-4px); border-color: var(--lns2-fl-accent-soft-border); box-shadow: var(--lns2-fl-shadow-md); } /* light mode: a flat --surface card, no blur (overrides.css's [data-mode="light"] .pillar rule) */ .lnew-solution2__pillar { background: var(--lns2-fl-surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--lns2-fl-shadow-sm); } /* dark mode: translucent glass with a real backdrop blur + inset highlight (overrides.css's shared .pillar glass rule) */ [data-mode="dark"] .lnew-solution2__pillar { background: var(--lns2-fl-glass-bg); backdrop-filter: var(--lns2-fl-glass-blur); -webkit-backdrop-filter: var(--lns2-fl-glass-blur); box-shadow: inset 0 1px 0 var(--lns2-fl-glass-hi), var(--lns2-fl-shadow-sm); } .lnew-solution2__pillar-top { text-align: left; } .lnew-solution2__pillar-k { position: relative; display: inline-block; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--lns2-fl-accent-soft-ink); text-transform: uppercase; } .lnew-solution2__pillar-k::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 24px; height: 2px; background: var(--lns2-accent-grad); transform: skewX(var(--lns2-house-skew)); } /* line-height 1.12 is the reference's GLOBAL h1-h3 rule (base/1-reset.css). The card title has no local line-height, so without restating it here the widget's own 1.6 would be inherited and every card's copy would drift ~5px down, compounding. See [[solution-widget-feature]]. */ .lnew-solution2__pillar-top h3 { font-family: var(--lns2-font-head); font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; color: var(--lns2-fl-ink); font-size: 21px; margin: 12px 0 10px; text-align: left; } /* min-height reserves room for the LONGEST copy (Convert, 3 lines) so all three tops occupy identical vertical space regardless of actual wrap count — otherwise `margin-top:auto` lands the illustration at a different y on each card even though the cards themselves are equal height. */ .lnew-solution2__pillar-top p { font-size: 14.5px; color: var(--lns2-fl-muted); line-height: 1.6; text-align: left; min-height: var(--lns2-pillar-copy-min); } /* the mini-illustration reads as a recessed device "screen" — a real depth cue (inset shadow + hairline), not a near-invisible dark-glass tint. A fixed PIXEL height, not aspect-ratio, so all three wells are identical regardless of column width. justify-content:flex-start (not center) anchors every illustration to the SAME top inset, so Capture's 2-row mockup and Convert's 3-row one don't read as different densities. */ .lnew-solution2__pillar-art { margin-top: auto; padding: var(--lns2-art-pad); border-radius: var(--lns2-radius-md); background: var(--lns2-fl-bg-tint); border: 1px solid var(--lns2-fl-line-2); height: var(--lns2-art-h); display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; box-shadow: inset 0 1px 4px rgba(0,0,0,.45), inset 0 1px 0 var(--lns2-fl-glass-hi); } /* per-well tinted glow, distinct per pillar. These share specificity with the rule above, so each one restates the base insets before appending its glow — box-shadow is replaced wholesale, never merged. */ .lnew-solution2__art-cap { box-shadow: inset 0 1px 4px rgba(0,0,0,.45), inset 0 1px 0 var(--lns2-fl-glass-hi), 0 10px 30px -14px var(--lns2-fl-glow-cap); } .lnew-solution2__art-rsp { box-shadow: inset 0 1px 4px rgba(0,0,0,.45), inset 0 1px 0 var(--lns2-fl-glass-hi), 0 10px 30px -14px var(--lns2-fl-glow-rsp); } .lnew-solution2__art-cv { box-shadow: inset 0 1px 4px rgba(0,0,0,.45), inset 0 1px 0 var(--lns2-fl-glass-hi), 0 10px 30px -14px var(--lns2-fl-glow-cv); } /* ===================================================================== Illustration · Capture (channels -> one inbox) — fixed reference art ===================================================================== */ /* space-between (not center) spreads the 4 chips across the FULL frame width, matching how Respond's bubbles and Convert's pipeline already run edge to edge — a centred cluster read as a "smaller" mockup than its neighbours. */ .lnew-solution2__art-cap-chips { display: flex; gap: 10px; justify-content: space-between; } .lnew-solution2__chip { width: 46px; height: 46px; border-radius: 14px 14px 14px 5px; display: grid; place-items: center; color: #fff; box-shadow: var(--lns2-fl-shadow-sm); } .lnew-solution2__chip svg { width: 24px; height: 24px; } .lnew-solution2__chip--wa { background: #25d366; } .lnew-solution2__chip--ms { background: linear-gradient(135deg, #0a7cff, #9d36ff); } .lnew-solution2__chip--ig { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); } .lnew-solution2__chip--form { background: var(--lns2-fl-accent-soft-bg); border: 1px solid var(--lns2-fl-accent-soft-border); color: var(--lns2-fl-accent-soft-ink); box-shadow: none; } .lnew-solution2__art-cap-inbox { position: relative; margin-top: 18px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 13px 13px 13px 5px; background: var(--lns2-fl-accent-soft-bg); border: 1px solid var(--lns2-fl-accent-soft-border); } .lnew-solution2__art-cap-inbox::before { content: ""; position: absolute; left: 50%; top: -18px; width: 2px; height: 18px; transform: translateX(-50%); background: linear-gradient(transparent, var(--lns2-fl-accent-soft-border)); } .lnew-solution2__art-cap-ic { display: grid; place-items: center; width: 26px; height: 26px; color: var(--lns2-fl-accent-soft-ink); } .lnew-solution2__art-cap-ic svg { width: 20px; height: 20px; } .lnew-solution2__art-cap-label { font-size: 13px; font-weight: 600; color: var(--lns2-fl-ink); } .lnew-solution2__art-cap-badge { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--lns2-accent-ink); background: var(--lns2-accent-grad); padding: 3px 9px; border-radius: 100px; } /* ===================================================================== Illustration · Respond (AI reply) — fixed reference art ===================================================================== */ .lnew-solution2__art-rsp { display: flex; flex-direction: column; gap: 10px; } .lnew-solution2__bubble { font-size: 12.5px; line-height: 1.45; padding: 9px 12px; border-radius: 14px; max-width: 84%; } .lnew-solution2__bubble--in { align-self: flex-start; background: var(--lns2-fl-surface); border: 1px solid var(--lns2-fl-line); color: var(--lns2-fl-ink); border-bottom-left-radius: 4px; box-shadow: var(--lns2-fl-shadow-sm); } .lnew-solution2__art-rsp-out { display: flex; align-items: flex-end; gap: 8px; align-self: flex-end; max-width: 94%; } .lnew-solution2__art-rsp-ai { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--lns2-accent-ink); background: var(--lns2-accent-grad); box-shadow: 0 0 14px var(--lns2-accent-halo); } .lnew-solution2__bubble--out { background: var(--lns2-accent-grad); color: var(--lns2-accent-ink); border-bottom-right-radius: 4px; box-shadow: var(--lns2-fl-shadow-sm); } .lnew-solution2__tick { opacity: .8; font-size: 10px; margin-left: 3px; } .lnew-solution2__art-rsp-meta { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--lns2-fl-muted-2); } .lnew-solution2__dots { display: inline-flex; gap: 3px; } .lnew-solution2__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--lns2-fl-accent-soft-ink); animation: lns2-rsp-dot 1.2s ease-in-out infinite; } .lnew-solution2__dots i:nth-child(2) { animation-delay: .15s; } .lnew-solution2__dots i:nth-child(3) { animation-delay: .3s; } @keyframes lns2-rsp-dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* ===================================================================== Illustration · Convert (pipeline -> revenue) — fixed reference art ===================================================================== */ .lnew-solution2__art-cv { display: flex; flex-direction: column; gap: 12px; } .lnew-solution2__art-cv-pipe { display: flex; gap: 6px; } .lnew-solution2__stage { flex: 1; font-size: 10.5px; font-weight: 600; text-align: center; padding: 7px 4px; border-radius: 9px; background: var(--lns2-fl-surface); border: 1px solid var(--lns2-fl-line); color: var(--lns2-fl-muted); } .lnew-solution2__stage--won { background: var(--lns2-fl-green-soft-bg); border-color: var(--lns2-fl-green-soft-border); color: var(--lns2-fl-green-ink); } .lnew-solution2__art-cv-invoice { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: var(--lns2-fl-surface); border: 1px solid var(--lns2-fl-line); box-shadow: var(--lns2-fl-shadow-sm); } .lnew-solution2__art-cv-ic { display: grid; place-items: center; color: var(--lns2-fl-accent-soft-ink); } .lnew-solution2__art-cv-ic svg { width: 18px; height: 18px; } .lnew-solution2__art-cv-label { font-size: 12.5px; font-weight: 600; color: var(--lns2-fl-ink); } .lnew-solution2__art-cv-paid { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--lns2-fl-green-ink); background: var(--lns2-fl-green-soft-bg); border: 1px solid var(--lns2-fl-green-soft-border); padding: 3px 9px; border-radius: 100px; } .lnew-solution2__art-cv-chart { display: flex; align-items: flex-end; gap: 7px; height: 48px; } .lnew-solution2__art-cv-chart i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--lns2-fl-accent), var(--lns2-grad-1)); opacity: .85; } .lnew-solution2__art-cv-chart i:nth-child(1) { height: 42%; } .lnew-solution2__art-cv-chart i:nth-child(2) { height: 64%; } .lnew-solution2__art-cv-chart i:nth-child(3) { height: 52%; } .lnew-solution2__art-cv-chart i:nth-child(4) { height: 80%; } .lnew-solution2__art-cv-chart i:nth-child(5) { height: 100%; background: linear-gradient(180deg, var(--lns2-fl-accent-2), var(--lns2-grad-1)); opacity: 1; } /* ===================================================================== Scroll reveal — --i is assigned by lnew-solution2.js (index within parent) ===================================================================== */ .lnew-solution2 .lnew-reveal { opacity: 0; transform: translate3d(0, var(--lns2-rv-dist), 0); transition: opacity var(--lns2-rv-dur) var(--lns2-ease), transform var(--lns2-rv-dur) var(--lns2-ease); transition-delay: calc(var(--i, 0) * var(--lns2-rv-step)); } .lnew-solution2 .lnew-reveal.is-in { opacity: 1; transform: none; } .elementor-editor-active .lnew-solution2 .lnew-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lnew-solution2 .lnew-reveal { opacity: 1; transform: none; transition: none; } .lnew-solution2__halo, .lnew-solution2__core, .lnew-solution2__dots i { animation: none !important; } .lnew-solution2__eyebrow-dot { animation: none !important; opacity: 1; } .lnew-solution2__frame::before { transition: none !important; } } /* ===================================================================== Responsive ===================================================================== */ @media (max-width: 1040px) { .lnew-solution2 { --lns2-gutter: 24px; padding-top: 84px; padding-bottom: 84px; } .lnew-solution2__head { margin-bottom: 44px; } } /* the stacking breakpoint: the fan only reads as a fan when the three cards sit side by side, so below this the wires go and the frame flattens */ @media (max-width: 920px) { .lnew-solution2__pillars { grid-template-columns: 1fr; } .lnew-solution2__wires { display: none; } .lnew-solution2__hub { margin-bottom: 12px; } .lnew-solution2__frame { margin-top: 0; padding: 20px; border-radius: var(--lns2-radius-lg); } /* stacked single-column cards don't need cross-card alignment */ .lnew-solution2__pillar-top p { min-height: 0; } } @media (max-width: 760px) { /* NOTE: the reference's base/4-responsive.css narrows .pillar to 26px 22px here and kills .pillar:hover under (hover: none), but build.sh concatenates base/ BEFORE components/, and components/solution.css re-declares both at equal specificity — so neither rule ever renders. Matching the shipped result, not the dead source. See [[solution-widget-feature]]. */ .lnew-solution2 { --lns2-gutter: 20px; padding-top: 64px; padding-bottom: 64px; } .lnew-solution2__head { margin-bottom: 34px; } .lnew-solution2__lead { font-size: 16.5px; } } @media (max-width: 460px) { .lnew-solution2 { --lns2-gutter: 16px; padding-top: 54px; padding-bottom: 54px; } .lnew-solution2__head { margin-bottom: 28px; } }