/* ===================================================================== LeadsNimble "More than a CRM" — paired scroll showcase. Ported 1:1 from leadsnimble_html: src/css/components/more-band.css (.mpair stage/track, .mcard, .badge-new) src/css/base/2-layout.css (.wrap, .band-head, .eyebrow, titles) src/css/base/3-utilities.css (.reveal stagger, reduced motion) src/css/themes/aurora-nightfall/ (tokens resolved to literal values) The theme's design tokens are resolved to literal values and re-scoped under --lnm-*, 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 and .lnew-nav/.lnew-hero/.lnew-problem); [data-mode="dark"] on flips the palette, same switch the nav's mode toggle writes. Every --lnm-* token below is writable from the widget's Style tab (see register_palette_section() in class-more-widget.php). The dark controls are emitted at [data-mode="dark"] {{WRAPPER}} .lnew-more so they outrank the light ones on SPECIFICITY, not source order — Elementor's generated CSS loads after this stylesheet, so a same-specificity dark rule here would otherwise lose to a light control. PROGRESSIVE ENHANCEMENT (inherited from the reference): the default state — no JS, narrow viewport, or reduced motion — is a plain stacked column of every pair, all cards readable. lnew-more.js adds .is-pinned to opt into the vertical-scroll-drives-horizontal-slide showcase. ===================================================================== */ /* Local reset. Wrapped in :where() so it carries ZERO specificity — a bare `.lnew-more p` would be (0,1,1) and would outrank every (0,1,0) component class below it. See [[hero-widget-feature]] / [[nav-widget-feature]] for the cascade traps this avoids. Do not unwrap. */ .lnew-more, .lnew-more *, .lnew-more *::before, .lnew-more *::after { box-sizing: border-box; } :where(.lnew-more) :where(a) { color: inherit; text-decoration: none; } :where(.lnew-more) :where(p) { margin: 0; } :where(.lnew-more) :where(ul) { margin: 0; padding: 0; list-style: none; } :where(.lnew-more) :where(svg) { display: block; } :where(.lnew-more) :where(h1, h2, h3) { margin: 0; } /* Elementor's own `.elementor img { max-width:100% }` + border-radius resets would otherwise fight the framed mockup. Neutralise locally, zero-specificity. */ :where(.lnew-more) :where(img) { max-width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; } :where(.lnew-more) :where(button) { font: inherit; color: inherit; background: none; border: 0; } .lnew-more { /* ---- motion / geometry ---- */ --lnm-ease: cubic-bezier(.22,1,.36,1); --lnm-rv-dist: 70px; --lnm-rv-dur: 1.2s; --lnm-rv-step: 70ms; --lnm-maxw: 1360px; --lnm-gutter: 28px; --lnm-grid-gap: 18px; --lnm-track-gap: 26px; --lnm-pair-pad-x: 16px; --lnm-pair-pad-top: 14px; --lnm-pair-pad-bottom: 42px; --lnm-card-radius: 26px; --lnm-card-pad: 12px; --lnm-media-radius: 18px; --lnm-media-ratio: 16 / 10; --lnm-stage-radius: 30px; /* Slide travel. The reference eased this out to a longer, softer glide in v0.3.0 (.6s/(.22,1,.36,1) -> .85s/(.16,1,.3,1)); the slower curve is what makes a full-bleed 16:10 mockup read as gliding rather than snapping. */ --lnm-slide-dur: .85s; --lnm-slide-ease: cubic-bezier(.16, 1, .3, 1); --lnm-title-size: clamp(31px, 3.6vw, 47px); /* pinned-mode scroll budget: total height = stages * + 100vh */ --lnm-stage-scroll: 40vh; /* Height the header bar occupies in normal flow — .lnew-nav2's --lnav2-h, and the reference's :root --nav-flow, are both 76px. The pinned viewport sticks 24px below it (reference: calc(var(--nav-flow) + 24px) = 100px). */ --lnm-nav-flow: 76px; --lnm-sticky-top: calc(var(--lnm-nav-flow) + 24px); --lnm-head-gap: 50px; /* .band-head bottom margin (unpinned) */ --lnm-head-gap-pinned: 30px; /* ---- type ---- */ --lnm-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --lnm-font-head: 'Parkinsans', 'DM Sans', sans-serif; /* ---- palette · LIGHT (the site's default mode) ---- #more is a plain `.section` in the reference — it paints no background of its own and simply shows the page's `--bg` through. A WP page has no such shared body colour (the active theme paints white), so like every sibling widget this one resolves `--bg` and paints it itself. #dde2f4 is the v0.3.0 value; leaving this transparent dropped the band onto flat white between Features (#cfd7ee) and How It Works. */ --lnm-bg: #dde2f4; --lnm-surface: #ffffff; --lnm-ink: #12122a; --lnm-body: #454a63; --lnm-muted: #6b7089; --lnm-line: #e7e9f4; --lnm-eyebrow-bg: #eef0ff; --lnm-eyebrow-ink: #5b46e0; --lnm-eyebrow-border: #e0e3ff; --lnm-grad-1: #6366f1; --lnm-grad-2: #a855f7; --lnm-grad-3: #22d3ee; --lnm-accent-grad: linear-gradient(100deg, var(--lnm-grad-1) 0%, var(--lnm-grad-2) 52%, var(--lnm-grad-3) 100%); --lnm-accent: #6d5cf5; --lnm-accent-halo: rgba(139,124,255,.28); /* card chrome */ --lnm-card-shadow: 0 2px 8px rgba(30,25,60,.06), 0 16px 48px -12px rgba(30,25,60,.20); --lnm-card-shadow-hover: 0 4px 12px rgba(30,25,60,.08), 0 28px 66px -14px rgba(30,25,60,.26); --lnm-card-lift: -6px; --lnm-frame-hi: rgba(255,255,255,.55); --lnm-media-bg: #0d0b1c; --lnm-media-border: rgba(255,255,255,.14); --lnm-media-shadow: 0 18px 36px -16px rgba(10,8,30,.5); /* Universal, display-independent lift for the mockups. These screenshots run low-contrast grey type on a near-black panel, which sits right at the threshold where display gamma decides whether it is readable; the reference applies the same filter for the same reason. */ --lnm-media-filter: contrast(1.15) brightness(1.1); /* placeholder tile (shown when a card has no image) */ --lnm-ph-glow-1: rgba(139,124,255,.24); --lnm-ph-glow-2: rgba(34,211,238,.14); --lnm-ph-bg-1: #18142f; --lnm-ph-bg-2: #100e22; /* Deliberately the DARK --muted in both modes, not the light one. The tile behind this label is a fixed near-black gradient regardless of mode, so the reference's `color: var(--muted)` renders dark-grey-on-near-black in light mode — unreadable. Only visible on a card with no image set. */ --lnm-ph-ink: #949bbb; --lnm-ph-ic-bg: rgba(139,124,255,.16); --lnm-ph-ic-ink: #b7a8ff; --lnm-ph-ic-border: rgba(139,124,255,.3); /* "New" glass status pill */ --lnm-badge-bg: rgba(12,10,24,.5); --lnm-badge-ink: #ffffff; --lnm-badge-border: rgba(255,255,255,.2); --lnm-badge-dot: #34d399; /* derived, so recolouring the dot recolours its halo */ --lnm-badge-dot-halo: color-mix(in srgb, var(--lnm-badge-dot) 28%, transparent); /* dot rail — real circles, not elongating pill segments: the active dot grows slightly and fills with the accent gradient, staying round throughout. */ --lnm-dot-bg: rgba(18,18,42,.20); --lnm-dot-bg-hover: rgba(18,18,42,.38); --lnm-dot-size: 9px; --lnm-dot-scale-active: 1.35; --lnm-dot-gap: 12px; position: relative; overflow-x: clip; padding-top: 112px; padding-bottom: 112px; background: var(--lnm-bg); font-family: var(--lnm-font-sans); color: var(--lnm-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; /* The reference's body reset. text-rendering and -webkit-text-size-adjust are copied straight from base/1-reset.css; font-weight and letter-spacing are NOT in that file — they are the UA defaults there, so nothing overrides them. Under a WP theme something does: twentytwentyfive puts font-weight 300 and letter-spacing -0.1px on the document, which inherited straight into the lead and every card description and rendered the body copy a whole weight lighter and tighter than the template. Asserting the UA values locally is what makes the widget theme-proof. Same reason for text-wrap: the theme's `pretty` changes where paragraphs break. */ font-weight: 400; letter-spacing: normal; text-wrap: wrap; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ---- palette · DARK ([data-mode="dark"] on , written by the nav) ---- */ [data-mode="dark"] .lnew-more { --lnm-surface: rgba(255,255,255,.035); --lnm-ink: #f5f6ff; --lnm-body: #b8bed6; --lnm-muted: #949bbb; --lnm-line: rgba(255,255,255,.10); --lnm-eyebrow-bg: rgba(255,255,255,.05); --lnm-eyebrow-ink: #cdc6ff; --lnm-eyebrow-border: rgba(255,255,255,.12); --lnm-accent: #8b7cff; --lnm-card-shadow: 0 2px 8px rgba(0,0,0,.4), 0 16px 48px -12px rgba(0,0,0,.55); --lnm-card-shadow-hover: 0 4px 12px rgba(0,0,0,.45), 0 28px 66px -14px rgba(0,0,0,.62); --lnm-frame-hi: rgba(255,255,255,.14); --lnm-ph-ink: #949bbb; --lnm-dot-bg: rgba(245,246,255,.20); --lnm-dot-bg-hover: rgba(245,246,255,.38); /* the dark `--bg`; see the light block's note on why the band paints its own */ --lnm-bg: #0a0a12; } /* ===================================================================== Layout shell (.wrap) ===================================================================== */ .lnew-more__wrap { width: 100%; max-width: var(--lnm-maxw); margin-inline: auto; padding-inline: var(--lnm-gutter); } /* ===================================================================== Section head (.band-head — centred, balanced) ===================================================================== */ .lnew-more__head { text-align: center; max-width: none; margin: 0 auto var(--lnm-head-gap); } .lnew-more__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--lnm-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--lnm-eyebrow-ink); background: var(--lnm-eyebrow-bg); border: 1px solid var(--lnm-eyebrow-border); padding: 7px 14px; border-radius: 100px; } /* Dim indicator lamp — lit/unlit cycle with a long dark hold, so it reads as a status light rather than decoration. */ .lnew-more__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--lnm-accent); box-shadow: 0 0 0 4px var(--lnm-accent-halo); opacity: .45; animation: lnm-dot-lamp 5.2s ease-in-out infinite; } @keyframes lnm-dot-lamp { 0% { opacity: .35; box-shadow: 0 0 0 4px var(--lnm-accent-halo), 0 0 0 0 transparent; } 8% { opacity: 1; box-shadow: 0 0 0 4px var(--lnm-accent-halo), 0 0 7px 1px var(--lnm-accent); } 22% { opacity: 1; box-shadow: 0 0 0 4px var(--lnm-accent-halo), 0 0 7px 1px var(--lnm-accent); } 40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnm-accent-halo), 0 0 0 0 transparent; } } .lnew-more__title { font-family: var(--lnm-font-head); font-size: var(--lnm-title-size); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; color: var(--lnm-ink); margin-top: 18px; text-wrap: balance; } .lnew-more__title-accent { background: var(--lnm-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lnew-more__lead { margin-top: 18px; font-size: 18px; color: var(--lnm-muted); line-height: 1.65; text-wrap: balance; } /* ===================================================================== Track + pairs — the DEFAULT (unpinned) state is a plain stacked grid ===================================================================== */ .lnew-more__track { display: flex; flex-direction: column; gap: var(--lnm-track-gap); } /* Each pair carries its own padding so card shadows live INSIDE the pair box; the stage then clips at that box edge without slicing the shadow, and the next slide stays fully hidden (no peek). Do not move this to the stage. */ .lnew-more__pair { display: grid; grid-template-columns: repeat(var(--lnm-cols, 2), 1fr); gap: var(--lnm-grid-gap); padding: var(--lnm-pair-pad-top) var(--lnm-pair-pad-x) var(--lnm-pair-pad-bottom); } /* A trailing partial row (e.g. the 9th of 9 cards) is centred, keeping its single-column width instead of stretching across the full stage. */ .lnew-more__pair--solo { display: flex; justify-content: center; } .lnew-more__pair--solo .lnew-more-card { width: calc( (100% - (var(--lnm-cols, 2) - 1) * var(--lnm-grid-gap)) / var(--lnm-cols, 2) ); } .lnew-more__dots { display: none; } /* only meaningful when pinned */ /* ---- Static Grid mode — every card at once, no pinning, no stage ---- A separate container rather than a restyled .lnew-more__pair, so the two modes never fight over grid-template-columns at a breakpoint. */ .lnew-more__grid { display: grid; grid-template-columns: repeat(var(--lnm-grid-cols, 3), 1fr); gap: var(--lnm-grid-gap); /* room for the card shadows, which would otherwise clip against the section */ padding: var(--lnm-pair-pad-top) 0 var(--lnm-pair-pad-bottom); } /* ===================================================================== The card — framed mockup on top, centred title + line below ===================================================================== */ .lnew-more-card { position: relative; display: flex; flex-direction: column; padding: var(--lnm-card-pad); /* mat around the floating screen */ background: var(--lnm-surface); border: 1px solid var(--lnm-line); border-radius: var(--lnm-card-radius); /* natural, rounded floating-panel shadow (soft falloff — not a square halo) */ box-shadow: var(--lnm-card-shadow); transition: transform .3s var(--lnm-ease), box-shadow .3s var(--lnm-ease); } .lnew-more-card:hover { transform: translateY(var(--lnm-card-lift)); box-shadow: var(--lnm-card-shadow-hover); } /* When the whole card is a link, keep the text colours the reset would eat. */ a.lnew-more-card { display: flex; color: inherit; } /* the screenshot as a floating device screen: lit top edge + depth shadow */ .lnew-more-card__media { position: relative; display: block; aspect-ratio: var(--lnm-media-ratio); overflow: hidden; border-radius: var(--lnm-media-radius); border: 1px solid var(--lnm-media-border); background: var(--lnm-media-bg); box-shadow: inset 0 1px 0 var(--lnm-frame-hi), var(--lnm-media-shadow); } /* object-position:top anchors the cover-crop to the top, trimming any bottom generator watermark off a 4:3 source in this 16:10 frame. */ .lnew-more-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--lnm-media-position, top); border-radius: 0; filter: var(--lnm-media-filter, none); } /* placeholder tile — shown whenever a card has no image set */ .lnew-more-card__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 12px; background: radial-gradient(70% 80% at 28% 18%, var(--lnm-ph-glow-1), transparent 60%), radial-gradient(70% 80% at 82% 92%, var(--lnm-ph-glow-2), transparent 60%), linear-gradient(160deg, var(--lnm-ph-bg-1), var(--lnm-ph-bg-2)); color: var(--lnm-ph-ink); } .lnew-more-card__ph-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--lnm-ph-ic-bg); color: var(--lnm-ph-ic-ink); border: 1px solid var(--lnm-ph-ic-border); flex: none; } .lnew-more-card__ph-ic svg { width: 24px; height: 24px; } .lnew-more-card__ph-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; } .lnew-more-card__body { padding: 18px 14px 12px; text-align: center; } .lnew-more-card__t { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .lnew-more-card__t h3 { font-family: var(--lnm-font-head); font-size: 18.5px; font-weight: 500; /* 1.12 is the reference's global heading line-height (base/1-reset.css) — measured, not guessed: 1.25 renders the card 2px taller than the template. */ line-height: 1.12; letter-spacing: -0.01em; color: var(--lnm-ink); /* Re-asserted per element, not just inherited from .lnew-more: a theme rule on the bare `h3` / `p` element beats an inherited value no matter how specific the ancestor rule is. twentytwentyfive ships text-wrap: pretty, which moves where these lines break. */ text-wrap: wrap; } .lnew-more-card__body p { margin-top: 7px; font-size: 14.5px; color: var(--lnm-muted); line-height: 1.55; text-wrap: wrap; } /* "New" — a clean glass status pill with a live dot */ .lnew-more-card__badge { position: absolute; top: 18px; left: 18px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-family: var(--lnm-font-head); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lnm-badge-ink); padding: 5px 11px 5px 9px; border-radius: 100px; background: var(--lnm-badge-bg); border: 1px solid var(--lnm-badge-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lnew-more-card__badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lnm-badge-dot); box-shadow: 0 0 0 2px var(--lnm-badge-dot-halo); flex: none; } /* ===================================================================== Pinned mode (class added by lnew-more.js) — vertical scroll drives the horizontal/vertical slide through the pairs. ===================================================================== */ .lnew-more__pin { position: relative; height: calc(var(--lnm-stages, 5) * var(--lnm-stage-scroll) + 100vh); } .lnew-more__pin.is-pinned .lnew-more__vp { position: sticky; top: var(--lnm-sticky-top); } .lnew-more__pin.is-pinned .lnew-more__head { margin-bottom: var(--lnm-head-gap-pinned); } /* The stage clips to one slide; the track is a vertical column that slides UP. Stage height + the per-slide translateY are measured in lnew-more.js, so variable slide heights stay pixel-accurate. */ .lnew-more__pin.is-pinned .lnew-more__stage { overflow: hidden; border-radius: var(--lnm-stage-radius); } .lnew-more__pin.is-pinned .lnew-more__track { position: relative; flex-direction: column; gap: 30px; transition: transform var(--lnm-slide-dur) var(--lnm-slide-ease); will-change: transform; } .lnew-more__pin.is-pinned .lnew-more__pair { flex: none; } /* Height is only meaningful once pinned — before that the element must be auto-height so the stacked fallback flows normally. */ .lnew-more__pin:not(.is-pinned) { height: auto; } /* ---- dot rail ---- Round dots, sized by ONE token: the active state grows via transform, never by widening, so the dot cannot morph into a pill mid-transition. align-items keeps the scaled dot centred on the rail instead of stretching the row. */ .lnew-more__pin.is-pinned .lnew-more__dots { display: flex; justify-content: center; align-items: center; gap: var(--lnm-dot-gap); margin-top: 30px; } .lnew-more__dot { width: var(--lnm-dot-size); height: var(--lnm-dot-size); flex: none; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--lnm-dot-bg); transition: background .55s var(--lnm-ease), transform .55s var(--lnm-ease); } .lnew-more__dot:hover { background: var(--lnm-dot-bg-hover); } .lnew-more__dot.is-active { transform: scale(var(--lnm-dot-scale-active)); background: var(--lnm-accent-grad); } .lnew-more__dot:focus-visible { outline: 2px solid var(--lnm-accent); outline-offset: 3px; } /* Short viewports: reclaim the top offset + head spacing before it clips. The reference goes from nav-flow + 24px to nav-flow + 8px here, i.e. 16px less — expressed as a subtraction so it keeps tracking the Style-tab's Sticky Top Offset instead of hard-coding the default. At the default 100px that lands on the reference's 84px exactly. */ @media (max-height: 820px) { .lnew-more__pin.is-pinned .lnew-more__vp { top: calc(var(--lnm-sticky-top) - 16px); } .lnew-more__pin.is-pinned .lnew-more__head { margin-bottom: 18px; } } /* ===================================================================== Scroll reveal — --i is assigned by lnew-more.js (index within parent) ===================================================================== */ .lnew-more .lnew-reveal { opacity: 0; transform: translate3d(0, var(--lnm-rv-dist), 0); transition: opacity var(--lnm-rv-dur) var(--lnm-ease), transform var(--lnm-rv-dur) var(--lnm-ease); transition-delay: calc(var(--i, 0) * var(--lnm-rv-step)); } .lnew-more .lnew-reveal.is-in { opacity: 1; transform: none; } /* In the editor the section is never "scrolled into view" the way it is on the front end — show everything so the canvas is never mysteriously blank. */ .elementor-editor-active .lnew-more .lnew-reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lnew-more .lnew-reveal { opacity: 1; transform: none; transition: none; } .lnew-more__eyebrow-dot { animation: none !important; opacity: 1; } .lnew-more-card { transition: none !important; } .lnew-more__pin.is-pinned .lnew-more__track { transition: none !important; } .lnew-more__dot { transition: none !important; } } /* ===================================================================== Responsive (mirrors base/4-responsive.css + more-band.css breakpoints) ===================================================================== */ /* The reference's shared step (base/4-responsive.css) drops every .section to 84px here; the widget only carried the gutter half of it, so the band kept a 112px block on tablet while Features / Why / FAQ next to it went to 84px. On a real page the padding_* controls' tablet_default emits the same 84px at Elementor's 1024px breakpoint and wins on specificity — this keeps the stylesheet correct on its own (editor preview, standalone use). */ @media (max-width: 1040px) { .lnew-more { --lnm-gutter: 24px; padding-top: 84px; padding-bottom: 84px; } } /* Below the pin threshold (lnew-more.js: data-min-width, default 921) the slides are just a stacked list — nothing is sticky and the stage does not clip, so the pair's 42px bottom padding, which exists only to keep card shadows inside the clipped stage, is dead space. Left in, the nine stacked cards alternated 18px / 82px gaps: an accidental rhythm that reads as a layout bug rather than as pairing. Zero the vertical padding and match the track gap to the card gap so every gap is identical. Scoped to :not(.is-pinned) so lowering the pin threshold can never hit the real pinned layout. */ @media (max-width: 920px) { .lnew-more__pin:not(.is-pinned) { --lnm-track-gap: var(--lnm-grid-gap); } /* Set on the pair itself, not inherited down: the 460px block below also writes --lnm-pair-pad-bottom on .lnew-more__pair, and a value set on the consuming element always beats an inherited one no matter the order. At (0,3,0) this outranks it. */ .lnew-more__pin:not(.is-pinned) .lnew-more__pair { --lnm-pair-pad-top: 0px; --lnm-pair-pad-bottom: 0px; } } @media (max-width: 760px) { .lnew-more { --lnm-gutter: 20px; padding-top: 64px; padding-bottom: 64px; } .lnew-more__head { margin-bottom: 34px; } .lnew-more__lead { font-size: 16.5px; } /* Single column below 760px — matches the reference exactly. */ .lnew-more__pair { grid-template-columns: 1fr; } .lnew-more__pair--solo .lnew-more-card { width: 100%; } .lnew-more-card__body { padding: 16px 10px 10px; } } @media (max-width: 600px) { /* Grid mode has its own responsive control, but never let it drop below a readable single column on a phone. */ .lnew-more__grid { grid-template-columns: 1fr; } } @media (max-width: 460px) { .lnew-more { --lnm-gutter: 16px; padding-top: 54px; padding-bottom: 54px; } .lnew-more__head { margin-bottom: 28px; } .lnew-more__pair { --lnm-pair-pad-x: 6px; --lnm-pair-pad-bottom: 30px; } .lnew-more-card__t h3 { font-size: 17px; } } /* Coarse-pointer: drop the hover lift, which misfires as a sticky state on touch */ @media (hover: none) { .lnew-more-card:hover { transform: none; box-shadow: var(--lnm-card-shadow); } }