/* ===================================================================== LeadsNimble Pricing 2 — the REWRITTEN "Simple pricing for every market." Ported 1:1 from the CURRENT leadsnimble_html reference: src/html/partials/pricing.html src/css/components/pricing.css (#pricing, .toggle, .plan*, .pricing__included) src/css/components/risk.css (#pricing .risk — now standalone PILLS) src/css/components/buttons.css (.btn, .btn--primary, .btn--ghost) src/css/base/1-reset.css (type baseline, h2 metrics, button reset) src/css/base/2-layout.css (.wrap, .section, .section__head, .eyebrow) src/css/base/3-utilities.css (.reveal stagger, reduced motion) src/css/base/4-responsive.css (gutter / section padding / head spacing) src/css/themes/aurora-nightfall/ (tokens + overrides, resolved to literals) SHIPS ALONGSIDE lnew-pricing.css, which is the EARLIER generation of the same section and is untouched. The two share no class prefix, no --token namespace, no CSS and no JS — see the widget class docblock for what changed between them (4 plans incl. a prose "Custom" tier, a lighter 19/42px price scale, a card hover lift, the "every plan includes" line, and a trust bar rebuilt from one divided panel into four standalone coloured pills). Same conventions as lnew-solution2.css / lnew-why.css: the theme's tokens are resolved to literal values and re-scoped under --lnpr2-*, LIGHT is the default mode, and [data-mode="dark"] flips the palette (the switch the nav writes). The dark palette control section is emitted at [data-mode="dark"] {{WRAPPER}} .lnew-pricing2 so it outranks the light controls on specificity, not source order. SIX things the reference cascade does that a naive copy would get wrong — all reproduced here as their COMPUTED result, all documented: 1. `.plan { padding: 26px 22px }` (<=760px) and `.plan { padding: 26px 20px }` + `.plan__amt { font-size: 42px }` (<=460px) live in base/4-responsive.css, which build.sh concatenates BEFORE components/pricing.css. Both files target `.plan` / `.plan__amt` at (0,1,0), so pricing.css — being later — wins at every width and those three "responsive" rules never apply. The card therefore keeps its 30px/24px padding and its fluid clamp() amount on a 320px phone. That computed result is what is authored below; the dead steps are not resurrected. Same for `@media (hover:none) .plan:hover { transform: none }`, which components/pricing.css out-orders at equal specificity. (Style-tab controls can add real responsive steps if you want them.) 2. THE PLAN HOVER IS HALF-DEAD IN LIGHT MODE. components/pricing.css says `.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--accent-soft-border) }` at (0,2,0). The theme's overrides.css — concatenated LAST — says `[data-mode="light"] .plan { box-shadow: var(--shadow-sm); border-color: var(--line) }`, also (0,2,0). Tie on specificity, so source order decides and the override wins: in LIGHT the card only lifts, its shadow and border never change. In DARK the competing rule is the (0,1,0) glass rule, so the full hover applies. Reproduced via --lnpr2-plan-hover-shadow / --lnpr2-plan-hover-border, whose light defaults are the RESTING values. Set them to the md shadow / accent border in the Style tab if you want the hover the CSS implies. 3. The featured card and the trust pills are scoped under `#pricing` in the reference purely so they outrank that same `[data-mode="light"]` override. There is no competing rule here, so the featured card's specificity is rebuilt with a plain descendant pair instead (see the block below) and the anchor stays a free control — no ID is load-bearing. 4. The featured card's REST transform must lose to its own :hover and win over the generic `.plan:hover`. In the reference that falls out of #pricing (1,1,0) vs .plan:hover (0,2,0) vs #pricing .plan--featured:hover (1,2,0). Here the same three-way ordering is rebuilt as `.lnew-pricing2 .lnew-pricing2__plan--featured` (0,2,0, declared after the generic hover) and `… --featured:hover` (0,3,0). Consequence, faithful to the reference: the <=600px `transform: none` still loses to the featured :hover, so a mouse hovering a phone-width featured card lifts it. 5. The trust pill's blur is NOT reset in dark. risk.css's `#pricing .risk__item` sets background / border / box-shadow but never touches backdrop-filter, so the theme's glass blur survives on the pill in dark and is switched off in light by `[data-mode="light"] .risk__item`. That is why --lnpr2-glass-blur is applied to the pill as well as the card. 6. OVERFLOW GUARDS, the only intentional additions. The reference is authored against exactly the copy it ships; a widget's copy is whatever the editor types. So: `.plans` uses minmax(0, 1fr) rather than the reference's bare `1fr` (= minmax(auto, 1fr)) and the card carries `min-width: 0`, so a long feature line cannot blow its track wider than its share; the feature row carries `overflow-wrap: break-word`; and the price row is `flex-wrap: wrap` where the reference is nowrap, so an over-long amount + suffix wraps instead of spilling out of a 228px-wide 4-up card. All four are inert at the reference's own copy — a full computed-style diff against the template at 13 widths in both modes finds NOTHING else, and flex-wrap is the only one of them that shows up as a differing computed value. One more thing the diff reports and that is NOT a difference: this file writes the section gradient as `linear-gradient(180deg, 0%, )` because light mode needs the 60% midpoint as a control, so the computed value serialises with explicit stops where the reference's two-stop dark gradient does not. Same rendering, different string. ===================================================================== */ /* Local reset. Wrapped in :where() so it carries ZERO specificity — see [[nav-widget-feature]] for the four cascade traps this avoids. Do not unwrap: a bare `.lnew-pricing2 svg {}` is (0,1,1) and would outrank the component rules it is meant to sit under. */ .lnew-pricing2, .lnew-pricing2 *, .lnew-pricing2 *::before, .lnew-pricing2 *::after { box-sizing: border-box; } :where(.lnew-pricing2) :where(a) { color: inherit; text-decoration: none; } :where(.lnew-pricing2) :where(p) { margin: 0; } :where(.lnew-pricing2) :where(ul, ol) { margin: 0; padding: 0; list-style: none; } :where(.lnew-pricing2) :where(li) { margin: 0; } :where(.lnew-pricing2) :where(svg) { display: block; } :where(.lnew-pricing2) :where(h1, h2, h3, h4, h5) { margin: 0; } :where(.lnew-pricing2) :where(b, strong) { font-weight: 700; } :where(.lnew-pricing2) :where(i, em) { font-style: normal; } .lnew-pricing2 { /* ---- motion ---- */ --lnpr2-ease: cubic-bezier(.22,1,.36,1); --lnpr2-rv-dist: 70px; --lnpr2-rv-dur: 1.2s; --lnpr2-rv-step: 70ms; /* ---- geometry ---- */ --lnpr2-maxw: 1360px; --lnpr2-gutter: 28px; --lnpr2-head-align: center; --lnpr2-title-size: clamp(31px, 3.6vw, 47px); --lnpr2-lead-size: 18px; --lnpr2-toggles-gap: 14px; --lnpr2-toggles-mb: 40px; --lnpr2-toggle-pad: 4px; --lnpr2-toggle-btn-pad-y: 9px; --lnpr2-toggle-btn-pad-x: 18px; --lnpr2-toggle-size: 14px; /* 18, not the reference's 28 — reclaims width for the 5-up grid. Still enough clearance for the featured card's -16px rest lift and its -13px badge tab. See the class docblock's point 6. */ --lnpr2-stage-pad: 18px; /* 5, not the reference's 4 — LeadsNimble's default content adds a Free tier (see the class docblock's point 6). The column count and every responsive step below are therefore AUTHORED for five cards, not ported from the reference. So is every size on this page from here down to --lnpr2-feat-size: the reference tuned these for a 4-up card; tightened here so a 5-up one doesn't read as cramped. */ --lnpr2-cols: 5; --lnpr2-gap: 14px; --lnpr2-radius-lg: 24px; --lnpr2-plan-pad-y: 22px; --lnpr2-plan-pad-x: 18px; --lnpr2-lift: -16px; /* the featured card's raise, at rest */ --lnpr2-hover-lift: -6px; /* every other card, on hover */ --lnpr2-featured-hover-lift: -20px; --lnpr2-featured-ring: 2px; --lnpr2-name-size: 17px; --lnpr2-best-size: 13px; --lnpr2-best-min-h: 40px; /* keeps every card's price on one baseline */ --lnpr2-price-min-h: 38px; /* ditto for the CTA under a 1- vs 2-line price */ --lnpr2-price-gap: 3px; --lnpr2-cur-size: 16px; --lnpr2-amt-size: clamp(22px, 2vw, 34px); --lnpr2-per-size: 12px; --lnpr2-contact-size: 22px; --lnpr2-was-size: 12px; --lnpr2-cta-gap: 20px; --lnpr2-feats-h-size: 11px; --lnpr2-feats-gap: 12px; --lnpr2-feat-size: 13px; --lnpr2-check: 18px; --lnpr2-check-glyph: 10px; --lnpr2-check-gap: 10px; --lnpr2-badge-size: 12px; --lnpr2-full-cta-top: 36px; --lnpr2-included-top: 26px; --lnpr2-included-maxw: 760px; --lnpr2-included-size: 14px; --lnpr2-btn-size: 15.5px; --lnpr2-btn-pad-y: 13px; --lnpr2-btn-pad-x: 22px; --lnpr2-btn-radius: 13px; --lnpr2-risk-top: 48px; --lnpr2-risk-gap: 12px; --lnpr2-risk-pad: 9px 18px 9px 9px; --lnpr2-risk-item-gap: 10px; --lnpr2-risk-ic: 30px; --lnpr2-risk-ic-glyph: 16px; --lnpr2-risk-b-size: 13.5px; --lnpr2-risk-s-size: 12px; --lnpr2-risk-sep: "· "; /* ---- type ---- */ --lnpr2-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --lnpr2-font-head: 'Parkinsans', 'DM Sans', sans-serif; /* ---- palette · LIGHT (the site's default mode) ---- */ --lnpr2-bg-1: #d7e0ef; --lnpr2-bg-2: #f0f4fb; --lnpr2-bg-stop: 60%; --lnpr2-ink: #12122a; --lnpr2-body: #454a63; --lnpr2-muted: #6b7089; --lnpr2-muted-2: #9498b0; --lnpr2-line: #e7e9f4; --lnpr2-line-2: #f0f1f8; --lnpr2-surface: #ffffff; --lnpr2-eyebrow-bg: #eef0ff; --lnpr2-eyebrow-ink: #5b46e0; --lnpr2-eyebrow-border: #e0e3ff; --lnpr2-grad-1: #6366f1; --lnpr2-grad-2: #a855f7; --lnpr2-grad-3: #22d3ee; --lnpr2-accent-grad: linear-gradient(100deg, var(--lnpr2-grad-1) 0%, var(--lnpr2-grad-2) 52%, var(--lnpr2-grad-3) 100%); --lnpr2-accent: #6d5cf5; --lnpr2-accent-ink: #ffffff; --lnpr2-accent-halo: rgba(139,124,255,.28); --lnpr2-accent-soft-bg: #eef0ff; --lnpr2-accent-soft-border: #e0e3ff; --lnpr2-toggle-bg: #cfd7ee; --lnpr2-toggle-active-bg: #ffffff; --lnpr2-toggle-active-ink: #12122a; /* plan card — light is a flat white slab (the theme's glass is dark-only) */ --lnpr2-glass-blur: none; --lnpr2-glass-hi: transparent; --lnpr2-plan-bg: #ffffff; /* The featured card's base fill is its OWN token, not --lnpr2-plan-bg: in the reference the plain cards sit on the theme's glass fill while the featured one sits on the plain surface, and in dark those are two different alphas (.045 vs .035). Identical in light, where both are white. */ --lnpr2-featured-bg: #ffffff; --lnpr2-featured-wash-1: rgba(109,92,245,.22); --lnpr2-featured-wash-2: rgba(34,211,238,.16); /* the four trust pills carry one curated hue each (indigo / teal / rose / amber) — literals in the reference, so they are mode-INDEPENDENT and are declared once, here, with no dark counterpart. */ --lnpr2-risk-1-bg: #e7e4fb; --lnpr2-risk-1-ink: #6a4ff0; --lnpr2-risk-2-bg: #d8f0f3; --lnpr2-risk-2-ink: #0e97a8; --lnpr2-risk-3-bg: #fde2e7; --lnpr2-risk-3-ink: #e5486d; --lnpr2-risk-4-bg: #fceed4; --lnpr2-risk-4-ink: #cf7d13; /* ---- shadows ---- Composed from colour tokens so the Style tab can recolour each layer while the geometry (which the theme changes between modes) stays authored here. */ --lnpr2-sh-sm-1: rgba(30,30,80,.05); --lnpr2-sh-sm-2: rgba(30,30,80,.05); --lnpr2-sh-md: rgba(30,30,80,.10); --lnpr2-sh-lg: rgba(30,30,80,.16); --lnpr2-sh-accent: rgba(99,102,241,.28); --lnpr2-sh-accent-hover: rgba(99,102,241,.36); --lnpr2-btn-glow: rgba(139,124,255,.45); --lnpr2-btn-shimmer: rgba(255,255,255,.55); --lnpr2-shadow-sm: 0 1px 2px var(--lnpr2-sh-sm-1), 0 2px 6px var(--lnpr2-sh-sm-2); --lnpr2-shadow-md: 0 12px 34px var(--lnpr2-sh-md); --lnpr2-shadow-lg: 0 30px 70px var(--lnpr2-sh-lg); --lnpr2-shadow-accent: 0 16px 40px var(--lnpr2-sh-accent); --lnpr2-shadow-accent-hover: 0 20px 50px var(--lnpr2-sh-accent-hover); --lnpr2-plan-shadow: var(--lnpr2-shadow-sm); --lnpr2-risk-shadow: var(--lnpr2-shadow-sm); /* departure #2 — in LIGHT the theme's override cancels the hover shadow and the hover border, so both resolve back to the resting values. */ --lnpr2-plan-hover-shadow: var(--lnpr2-plan-shadow); --lnpr2-plan-hover-border: var(--lnpr2-line); position: relative; overflow-x: clip; padding-top: 112px; padding-bottom: 112px; background: linear-gradient(180deg, var(--lnpr2-bg-1) 0%, var(--lnpr2-bg-2) var(--lnpr2-bg-stop)); font-family: var(--lnpr2-font-sans); color: var(--lnpr2-body); font-size: 17px; line-height: 1.6; letter-spacing: normal; -webkit-font-smoothing: antialiased; } /* ---- palette · DARK ([data-mode="dark"] on , written by the nav) ---- The theme's dark values: the `.section--soft` gradient for the band, glass for the cards and the trust pills (a translucent fill + blur + inset highlight), and a deeper, longer shadow ramp. */ [data-mode="dark"] .lnew-pricing2 { --lnpr2-bg-1: #0c0c18; --lnpr2-bg-2: #090910; --lnpr2-bg-stop: 100%; --lnpr2-ink: #f5f6ff; --lnpr2-body: #b8bed6; --lnpr2-muted: #949bbb; --lnpr2-muted-2: #6d7398; --lnpr2-line: rgba(255,255,255,.10); --lnpr2-line-2: rgba(255,255,255,.06); --lnpr2-surface: rgba(255,255,255,.035); --lnpr2-eyebrow-bg: rgba(255,255,255,.05); --lnpr2-eyebrow-ink: #cdc6ff; --lnpr2-eyebrow-border: rgba(255,255,255,.12); --lnpr2-accent: #8b7cff; --lnpr2-accent-soft-bg: rgba(139,124,255,.12); --lnpr2-accent-soft-border: rgba(139,124,255,.24); --lnpr2-toggle-bg: #10101d; --lnpr2-toggle-active-bg: rgba(255,255,255,.12); --lnpr2-toggle-active-ink: #ffffff; --lnpr2-glass-blur: blur(14px) saturate(150%); --lnpr2-glass-hi: rgba(255,255,255,.10); --lnpr2-plan-bg: rgba(255,255,255,.045); --lnpr2-featured-bg: rgba(255,255,255,.035); --lnpr2-sh-sm-1: rgba(0,0,0,.4); --lnpr2-sh-sm-2: transparent; --lnpr2-sh-md: rgba(0,0,0,.5); --lnpr2-sh-lg: rgba(0,0,0,.62); --lnpr2-sh-accent: rgba(99,102,241,.4); --lnpr2-sh-accent-hover: rgba(99,102,241,.5); --lnpr2-btn-shimmer: rgba(255,255,255,.42); /* geometry differs between the two ramps, so these are re-composed whole. --lnpr2-shadow-sm in particular is a SINGLE layer here (the reference's own dark --shadow-sm), not the light ramp's two-layer composition — a second 0-alpha layer would paint nothing, but it is still a real difference from the reference's shadow list. --lnpr2-sh-sm-2 stays a live Style-tab control (it feeds the light ramp and is harmless orphaned here) for a consistent control surface across modes. */ --lnpr2-shadow-sm: 0 1px 2px var(--lnpr2-sh-sm-1); --lnpr2-shadow-lg: 0 34px 74px var(--lnpr2-sh-lg); --lnpr2-shadow-accent: 0 16px 44px var(--lnpr2-sh-accent); --lnpr2-shadow-accent-hover: 0 22px 54px var(--lnpr2-sh-accent-hover); /* the glass inset highlight rides ON TOP of the small shadow for the CARD. The trust pill does NOT get it: risk.css's #pricing rule replaces the override's whole box-shadow list (departure #5). */ --lnpr2-plan-shadow: inset 0 1px 0 var(--lnpr2-glass-hi), var(--lnpr2-shadow-sm); --lnpr2-risk-shadow: var(--lnpr2-shadow-sm); /* departure #2 — in DARK the full hover applies. */ --lnpr2-plan-hover-shadow: var(--lnpr2-shadow-md); --lnpr2-plan-hover-border: var(--lnpr2-accent-soft-border); } /* ===================================================================== Layout shell ===================================================================== */ .lnew-pricing2__wrap { width: 100%; max-width: var(--lnpr2-maxw); margin-inline: auto; padding-inline: var(--lnpr2-gutter); } .lnew-pricing2__head { max-width: none; margin-inline: auto; margin-bottom: 56px; text-align: var(--lnpr2-head-align); } /* ===================================================================== Eyebrow — the dim indicator lamp. Kept dim on purpose: a continuous sine pulse reads as decoration, a lit/unlit cycle reads as a status light. ===================================================================== */ .lnew-pricing2__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--lnpr2-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--lnpr2-eyebrow-ink); background: var(--lnpr2-eyebrow-bg); border: 1px solid var(--lnpr2-eyebrow-border); padding: 7px 14px; border-radius: 100px; } .lnew-pricing2__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lnpr2-accent); box-shadow: 0 0 0 4px var(--lnpr2-accent-halo); opacity: .45; animation: lnpr2-dot-lamp 5.2s ease-in-out infinite; } @keyframes lnpr2-dot-lamp { 0% { opacity: .35; box-shadow: 0 0 0 4px var(--lnpr2-accent-halo), 0 0 0 0 transparent; } 8% { opacity: 1; box-shadow: 0 0 0 4px var(--lnpr2-accent-halo), 0 0 7px 1px var(--lnpr2-accent); } 22% { opacity: 1; box-shadow: 0 0 0 4px var(--lnpr2-accent-halo), 0 0 7px 1px var(--lnpr2-accent); } 40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnpr2-accent-halo), 0 0 0 0 transparent; } } /* ===================================================================== Title + lead ===================================================================== */ .lnew-pricing2__title { font-family: var(--lnpr2-font-head); font-weight: 500; font-size: var(--lnpr2-title-size); margin-top: 18px; line-height: 1.12; letter-spacing: -0.02em; color: var(--lnpr2-ink); text-wrap: balance; } .lnew-pricing2__lead { margin-top: 18px; font-size: var(--lnpr2-lead-size); color: var(--lnpr2-muted); line-height: 1.65; text-wrap: balance; } .lnew-pricing2__accent { background: var(--lnpr2-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===================================================================== Billing / currency toggles — two segmented pills ===================================================================== */ .lnew-pricing2__toggles { display: flex; flex-wrap: wrap; gap: var(--lnpr2-toggles-gap); justify-content: center; margin-bottom: var(--lnpr2-toggles-mb); } /* A switched-off group is still in the DOM (the script reads the selected period + currency off these buttons) — `hidden` must therefore beat the display declarations below, which a UA `[hidden]{display:none}` cannot. */ .lnew-pricing2__toggles[hidden], .lnew-pricing2__toggle[hidden] { display: none; } .lnew-pricing2__toggle { display: inline-flex; background: var(--lnpr2-toggle-bg); border: 1px solid var(--lnpr2-line); border-radius: 100px; padding: var(--lnpr2-toggle-pad); } /* (0,2,0) on purpose — a theme's own `button` styling must not reach in here */ .lnew-pricing2__toggle .lnew-pricing2__toggle-btn { font-family: inherit; padding: var(--lnpr2-toggle-btn-pad-y) var(--lnpr2-toggle-btn-pad-x); border: none; border-radius: 100px; background: none; font-size: var(--lnpr2-toggle-size); font-weight: 600; /* `normal`, NOT the section's 1.6 — a