/* ===================================================================== LeadsNimble Showcase — auto-advancing vertical tabs + cross-fading product screens ("See it work"). Ported 1:1 from leadsnimble_html: src/html/partials/showcase.html src/css/components/showcase.css (base tabs / wipe / panel stack) src/js/modules/showcase.js (animationend-driven advance) dist/aurora-nightfall/styles.css (the AURORA #showcase override — REVE-style icon pills, the deep indigo stage, and the travelling caption sparkle. That override is the design that ships, so the two layers are FLATTENED here with aurora winning.) src/css/base/2-layout.css (.wrap, .section__head, .eyebrow) src/css/base/3-utilities.css (.reveal stagger, reduced motion) The theme's design tokens are resolved to literal values and re-scoped under --lnsc-*, 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 SECTION palette — note the stage itself is deliberately dark in BOTH modes, exactly as the reference build is, so its colours live in a single mode-independent token group. Every --lnsc-* token below is writable from the widget's Style tab (see register_style_controls() in class-showcase-widget.php). The dark controls are emitted at [data-mode="dark"] {{WRAPPER}} .lnew-showcase so they outrank the light ones on specificity, not source order — Elementor's generated CSS loads after this stylesheet. PROGRESS MECHANICS (do not "simplify"): the per-tab .lnew-showcase__fill animates `lnsc-fill` and its `animationend` is the ONLY advance path, so the timer and the visible bar can never desync and `animation-play-state` pauses both together. In the default (caption) progress mode the fill is transparent and the VISIBLE progress is drawn on the caption's pseudo-elements over the same --lnsc-dur. The fill must keep running in every mode or the rotation stops dead. ===================================================================== */ /* Local reset. Wrapped in :where() so it carries ZERO specificity — a bare `.lnew-showcase 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 traps this avoids. Do not unwrap. */ .lnew-showcase, .lnew-showcase *, .lnew-showcase *::before, .lnew-showcase *::after { box-sizing: border-box; } :where(.lnew-showcase) :where(a) { color: inherit; text-decoration: none; } :where(.lnew-showcase) :where(p) { margin: 0; } :where(.lnew-showcase) :where(figure) { margin: 0; } :where(.lnew-showcase) :where(svg) { display: block; } :where(.lnew-showcase) :where(h1, h2, h3) { margin: 0; } /* Deliberately NOT `font: inherit`: that shorthand also resets line-height, and the browser's own `button { font: … }` leaves it at `normal`. Inheriting the section's 1.6 instead makes every tab label's line box 3px taller, which compounds down the stack and drifts the whole pill column off the reference. Enumerate the font longhands and leave line-height alone. */ :where(.lnew-showcase) :where(button) { margin: 0; color: inherit; background: none; border: 0; font-family: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; -webkit-appearance: none; appearance: none; } .lnew-showcase { /* ---- motion / geometry ---- */ --lnsc-ease: cubic-bezier(.22,1,.36,1); --lnsc-rv-dist: 70px; --lnsc-rv-dur: 1.2s; --lnsc-rv-step: 70ms; --lnsc-maxw: 1360px; --lnsc-gutter: 28px; --lnsc-pad-t: 112px; --lnsc-pad-b: 112px; --lnsc-head-gap: 56px; --lnsc-title-size: clamp(31px, 3.6vw, 47px); --lnsc-dur: 4600ms; /* one slide's dwell — drives BOTH the fill and the caption line */ --lnsc-fade: 420ms; /* panel cross-fade */ --lnsc-col-tabs: 0.8fr; --lnsc-col-panels: 1.2fr; --lnsc-stage-gap: 34px; --lnsc-stage-pad: 32px; --lnsc-stage-radius: 28px; --lnsc-tab-gap: 8px; --lnsc-tab-pad: 12px 14px; --lnsc-tab-radius: 13px; --lnsc-tab-ic-size: 36px; --lnsc-tab-ic-radius: 10px; --lnsc-tab-ic-glyph: 18px; --lnsc-panel-gap: 18px; --lnsc-shot-radius: 24px; --lnsc-glow-op: .3; --lnsc-glow-blur: 52px; --lnsc-glow-radius: 48px; --lnsc-cap-bar-h: 2px; --lnsc-spark-size: 17px; /* ---- type ---- */ --lnsc-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --lnsc-font-head: 'Parkinsans', 'DM Sans', sans-serif; /* ---- SECTION palette · LIGHT (the site's default mode) ---- */ --lnsc-bg-tint: #f0f4fb; --lnsc-ink: #12122a; --lnsc-body: #454a63; --lnsc-muted: #6b7089; --lnsc-eyebrow-bg: #eef0ff; --lnsc-eyebrow-ink: #5b46e0; --lnsc-eyebrow-border: #e0e3ff; --lnsc-grad-1: #6366f1; --lnsc-grad-2: #a855f7; --lnsc-grad-3: #22d3ee; --lnsc-accent-grad: linear-gradient(100deg, var(--lnsc-grad-1) 0%, var(--lnsc-grad-2) 52%, var(--lnsc-grad-3) 100%); --lnsc-accent: #6d5cf5; --lnsc-accent-halo: rgba(139,124,255,.28); --lnsc-shadow-md: 0 12px 34px rgba(30,30,80,.1); /* ---- STAGE palette · mode-INDEPENDENT ------------------------------ The reference's aurora stage is the same deep indigo slab in light and dark mode (it is a #showcase-scoped override, not a token remap), so these deliberately do NOT have a [data-mode="dark"] counterpart. */ --lnsc-stage-base: #14122e; --lnsc-stage-g1: rgba(139,124,255,.36); --lnsc-stage-g2: rgba(168,85,247,.30); --lnsc-stage-g3: rgba(99,102,241,.32); --lnsc-stage-g4: rgba(34,211,238,.14); --lnsc-stage-lin-1: #1b1642; --lnsc-stage-lin-2: #120f27; --lnsc-stage-border: rgba(255,255,255,.08); --lnsc-stage-shadow: 0 30px 70px rgba(0,0,0,.45); --lnsc-tab-bg: rgba(255,255,255,.04); --lnsc-tab-border: rgba(255,255,255,.07); --lnsc-tab-hover-bg: rgba(255,255,255,.07); --lnsc-tab-hover-border: rgba(139,124,255,.4); --lnsc-tab-active-glow: rgba(99,102,241,.42); --lnsc-tab-ink: rgba(255,255,255,.86); --lnsc-tab-ink-active: #ffffff; --lnsc-tab-desc-ink: rgba(255,255,255,.58); --lnsc-tab-ic-bg: rgba(255,255,255,.07); --lnsc-tab-ic-ink: #cdc2ff; --lnsc-tab-ic-bg-active: rgba(255,255,255,.22); --lnsc-tab-ic-ink-active: #ffffff; --lnsc-shot-bg: #0c0c16; /* The screenshot frame carries --shadow-md, which IS mode-dependent — the `0 26px 60px rgba(0,0,0,.5)` in the reference belongs to the .mock inside the old markup, not to .showcase__shot. Left as an indirection so the dark palette's --lnsc-shadow-md flows through without a second token. */ --lnsc-shot-shadow: var(--lnsc-shadow-md); --lnsc-cap-ink: #e7e4f6; --lnsc-cap-line: rgba(255,255,255,.12); --lnsc-spark-glow: rgba(149,96,252,.7); /* the base (non-aurora) tab wipe — only used in the "wipe" progress mode */ --lnsc-wipe: linear-gradient(90deg, rgba(139,124,255,.10) 0%, rgba(139,124,255,.30) 62%, rgba(34,211,238,.34) 100%); position: relative; overflow-x: clip; padding-top: var(--lnsc-pad-t); padding-bottom: var(--lnsc-pad-b); background: var(--lnsc-bg-tint); font-family: var(--lnsc-font-sans); color: var(--lnsc-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ---- SECTION palette · DARK ([data-mode="dark"] on , written by the nav's mode toggle). The stage tokens above are intentionally absent. ---- */ [data-mode="dark"] .lnew-showcase { --lnsc-bg-tint: #0d0d18; --lnsc-ink: #f5f6ff; --lnsc-body: #b8bed6; --lnsc-muted: #949bbb; --lnsc-eyebrow-bg: rgba(255,255,255,.05); --lnsc-eyebrow-ink: #cdc6ff; --lnsc-eyebrow-border: rgba(255,255,255,.12); --lnsc-accent: #8b7cff; --lnsc-accent-halo: rgba(139,124,255,.28); --lnsc-shadow-md: 0 12px 34px rgba(0,0,0,.5); --lnsc-glow-op: .5; } /* ===================================================================== Layout shell ===================================================================== */ .lnew-showcase__wrap { width: 100%; max-width: var(--lnsc-maxw); margin-inline: auto; padding-inline: var(--lnsc-gutter); } .lnew-showcase__head { max-width: none; margin-inline: auto; margin-bottom: var(--lnsc-head-gap); text-align: center; } /* ===================================================================== Eyebrow ===================================================================== */ .lnew-showcase__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--lnsc-font-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--lnsc-eyebrow-ink); background: var(--lnsc-eyebrow-bg); border: 1px solid var(--lnsc-eyebrow-border); padding: 7px 14px; border-radius: 100px; } .lnew-showcase__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lnsc-accent); box-shadow: 0 0 0 4px var(--lnsc-accent-halo); opacity: .45; /* The reference offsets each section's lamp (`.section:nth-of-type(4n+N)`) so the several on screen at once never blink in unison — a synchronised blink reads as a rendering glitch. Elementor widgets have no equivalent sibling context, so the offset is a control instead: see "Eyebrow Lamp Offset" in the Section Head style section. */ animation: lnsc-dot-lamp 5.2s ease-in-out infinite; animation-delay: var(--lnsc-dot-delay, 0s); } @keyframes lnsc-dot-lamp { 0% { opacity: .35; box-shadow: 0 0 0 4px var(--lnsc-accent-halo), 0 0 0 0 transparent; } 8% { opacity: 1; box-shadow: 0 0 0 4px var(--lnsc-accent-halo), 0 0 7px 1px var(--lnsc-accent); } 22% { opacity: 1; box-shadow: 0 0 0 4px var(--lnsc-accent-halo), 0 0 7px 1px var(--lnsc-accent); } 40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnsc-accent-halo), 0 0 0 0 transparent; } } /* ===================================================================== Title + lead ===================================================================== */ .lnew-showcase__title { font-family: var(--lnsc-font-head); font-weight: 500; font-size: var(--lnsc-title-size); margin-top: 18px; line-height: 1.12; letter-spacing: -0.02em; color: var(--lnsc-ink); text-wrap: balance; } .lnew-showcase__title-accent { background: var(--lnsc-accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .lnew-showcase__lead { margin-top: 18px; font-size: 18px; color: var(--lnsc-muted); line-height: 1.65; text-wrap: balance; } /* ===================================================================== The stage — a soft aurora slab drawn entirely in CSS (layered radial glows over a deep indigo base), so there is no external image to manage. ===================================================================== */ .lnew-showcase__inner { position: relative; display: grid; grid-template-columns: var(--lnsc-col-tabs) var(--lnsc-col-panels); gap: var(--lnsc-stage-gap); align-items: center; padding: var(--lnsc-stage-pad); border-radius: var(--lnsc-stage-radius); background-color: var(--lnsc-stage-base); background-image: radial-gradient(70% 88% at 16% 10%, var(--lnsc-stage-g1), transparent 60%), radial-gradient(62% 78% at 90% 6%, var(--lnsc-stage-g2), transparent 62%), radial-gradient(85% 95% at 78% 104%, var(--lnsc-stage-g3), transparent 64%), radial-gradient(58% 70% at 34% 110%, var(--lnsc-stage-g4), transparent 60%), linear-gradient(158deg, var(--lnsc-stage-lin-1) 0%, var(--lnsc-stage-lin-2) 72%); border: 1px solid var(--lnsc-stage-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--lnsc-stage-shadow); } /* ===================================================================== Left column — REVE-style icon pills ===================================================================== */ .lnew-showcase__tabs { display: flex; flex-direction: column; gap: var(--lnsc-tab-gap); } /* Double-classed (0,2,0): a button is the one element themes and Elementor most aggressively reset, and a single (0,1,0) class loses to a theme's `.elementor button`. Elementor's own generated control CSS is also (0,2,0) but loads later, so Style-tab controls still win — as intended. */ .lnew-showcase .lnew-showcase__tab { position: relative; width: 100%; text-align: left; cursor: pointer; display: grid; grid-template-columns: var(--lnsc-tab-ic-size) 1fr; align-items: center; column-gap: 12px; padding: var(--lnsc-tab-pad); border-radius: var(--lnsc-tab-radius); background: var(--lnsc-tab-bg); border: 1px solid var(--lnsc-tab-border); color: var(--lnsc-tab-ink); font-family: inherit; /* Pinned rather than left to the UA so a theme that styles buttons can't change the pill height — see the button reset at the top of this file. */ line-height: normal; overflow: hidden; /* clips the progress wipe to the pill */ transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; } .lnew-showcase .lnew-showcase__tab:hover { background: var(--lnsc-tab-hover-bg); border-color: var(--lnsc-tab-hover-border); } .lnew-showcase .lnew-showcase__tab.is-active { background: var(--lnsc-accent-grad); border-color: transparent; box-shadow: 0 12px 30px var(--lnsc-tab-active-glow); } /* offset MUST be negative — the overflow:hidden above would clip an outset ring and keyboard focus would become invisible. */ .lnew-showcase .lnew-showcase__tab:focus-visible { outline: 2px solid var(--lnsc-accent); outline-offset: -2px; } .lnew-showcase__tab-ic { display: grid; place-items: center; position: relative; z-index: 1; width: var(--lnsc-tab-ic-size); height: var(--lnsc-tab-ic-size); border-radius: var(--lnsc-tab-ic-radius); background: var(--lnsc-tab-ic-bg); color: var(--lnsc-tab-ic-ink); transition: background .2s ease, color .2s ease; } .lnew-showcase__tab-ic svg { width: var(--lnsc-tab-ic-glyph); height: var(--lnsc-tab-ic-glyph); } .lnew-showcase__tab.is-active .lnew-showcase__tab-ic { background: var(--lnsc-tab-ic-bg-active); color: var(--lnsc-tab-ic-ink-active); } .lnew-showcase__tab-t { grid-column: 2; position: relative; z-index: 1; display: block; font-family: var(--lnsc-font-head); /* -0.02em, not the -0.01em you get from reading showcase.css alone: the base rule is `letter-spacing: var(--head-tracking, -0.01em)` and aurora's :root sets --head-tracking to -0.02em, so the fallback never applies. */ font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--lnsc-tab-ink); } .lnew-showcase__tab.is-active .lnew-showcase__tab-t { color: var(--lnsc-tab-ink-active); } /* REVE pills are single-label, so the description is OFF by default. The widget's "Show Tab Descriptions" switch adds --descs to opt back in to the base template's two-line pill. */ .lnew-showcase__tab-d { display: none; } .lnew-showcase--descs .lnew-showcase__tab-d { grid-column: 2; position: relative; z-index: 1; display: block; margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--lnsc-tab-desc-ink); } /* ---- the timer ------------------------------------------------------- Always runs, in every progress mode — `animationend` on lnsc-fill is the only thing that advances the rotation. Visibility is what changes. */ .lnew-showcase__track { display: none; position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .lnew-showcase__tab.is-active .lnew-showcase__track { display: block; } .lnew-showcase__fill { display: block; position: absolute; inset: 0 auto 0 0; width: 0; height: 100%; background: transparent; } .lnew-showcase__fill.is-running { animation: lnsc-fill var(--lnsc-dur) linear forwards; } @keyframes lnsc-fill { from { width: 0; } to { width: 100%; } } /* ---- progress mode: WIPE (the base template's treatment) -------------- Fills the whole pill rather than a 3px rail, and animates `width` rather than scaleX deliberately — the head-of-wipe markers are pinned to the fill's right edge and ride along UNDISTORTED, which a transform would squash without an inverse counter-scale CSS cannot express here. */ .lnew-showcase--prog-wipe .lnew-showcase__fill { background: var(--lnsc-wipe); } .lnew-showcase--prog-wipe .lnew-showcase__fill::before { content: ""; position: absolute; right: -40px; top: 0; bottom: 0; width: 96px; background: linear-gradient(90deg, transparent, var(--lnsc-accent-halo) 55%, transparent); filter: blur(10px); opacity: .9; } .lnew-showcase--prog-wipe .lnew-showcase__fill::after { content: ""; position: absolute; right: -1px; top: 8%; bottom: 8%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, transparent, var(--lnsc-accent) 22%, var(--lnsc-accent) 78%, transparent); box-shadow: 0 0 18px 3px var(--lnsc-accent-halo); } /* ---- pause: hover, keyboard focus, or scrolled out of view (JS toggles .is-paused). Hover is scoped to hover-capable pointers so a sticky :hover after a tap on mobile can't permanently freeze the rotation. ---- */ .lnew-showcase.is-paused .lnew-showcase__fill.is-running { animation-play-state: paused; } .lnew-showcase__inner:focus-within .lnew-showcase__fill.is-running { animation-play-state: paused; } @media (hover: hover) { .lnew-showcase--hover-pause .lnew-showcase__inner:hover .lnew-showcase__fill.is-running { animation-play-state: paused; } } /* ===================================================================== Right column — cross-fading panel stack. Every panel shares one grid cell so there is no layout jump. The ambient bloom lives on the CONTAINER, not the panel, so it stays lit through the cross-fade instead of blinking out with each swap. `isolation` keeps it behind the panels without a negative z-index escaping the section. ===================================================================== */ .lnew-showcase__panels { position: relative; isolation: isolate; display: grid; grid-template-areas: "stack"; } .lnew-showcase__panels::before { content: ""; position: absolute; inset: 8% 3% -4% 3%; z-index: 0; background: var(--lnsc-accent-grad); border-radius: var(--lnsc-glow-radius); filter: blur(var(--lnsc-glow-blur)); opacity: var(--lnsc-glow-op); pointer-events: none; } .lnew-showcase__panel { grid-area: stack; position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--lnsc-panel-gap); padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; opacity: 0; visibility: hidden; transform: translateY(24px); filter: blur(4px); transition: opacity var(--lnsc-fade) ease, transform var(--lnsc-fade) cubic-bezier(.2,.7,.2,1), filter var(--lnsc-fade) ease, visibility 0s linear var(--lnsc-fade); } .lnew-showcase__panel.is-active { opacity: 1; visibility: visible; transform: none; filter: blur(0); transition-delay: 0s; } .lnew-showcase__panel:focus-visible { outline: 2px solid var(--lnsc-accent); outline-offset: 6px; } /* ---- framed product screenshots --------------------------------------- Shown in FULL at their natural ratio — no cover-crop, so nothing is cut off the top or bottom. Give every screen the same aspect ratio and the panels stay the same height for a clean cross-fade. ---- */ .lnew-showcase__shot { margin: 0; border-radius: var(--lnsc-shot-radius); overflow: hidden; background: var(--lnsc-shot-bg); box-shadow: var(--lnsc-shot-shadow); } /* Double-classed (0,2,1): beats a theme's or Elementor's `.elementor img` reset, which is (0,1,1) — see [[nav-widget-feature]] cascade trap #1. */ .lnew-showcase .lnew-showcase__shot img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 0; box-shadow: none; border: 0; } /* ---- caption band: description + progress line + travelling sparkle ---- */ .lnew-showcase__cap { display: block; position: relative; margin: 0; padding: 22px 24px 0; text-align: center; font-size: 14.5px; line-height: 1.55; color: var(--lnsc-cap-ink); border-top: 1px solid var(--lnsc-cap-line); } /* the accent FILL line growing left -> right (the progress) */ .lnew-showcase__cap::after { content: ""; position: absolute; top: -1px; left: 0; height: var(--lnsc-cap-bar-h); width: 0; background: var(--lnsc-accent-grad); border-radius: 2px; } /* the 4-point SPARKLE that travels along the line */ .lnew-showcase__cap::before { content: ""; position: absolute; top: -1px; left: 0; transform: translate(-50%, -50%); width: var(--lnsc-spark-size); height: var(--lnsc-spark-size); background: var(--lnsc-accent-grad); clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); filter: drop-shadow(0 0 6px var(--lnsc-spark-glow)); } @keyframes lnsc-cap-line { from { width: 0; } to { width: 100%; } } @keyframes lnsc-cap-spark { from { left: 0%; } to { left: 100%; } } /* Only the caption mode paints them; the other two modes hide both marks but keep the caption text and its hairline. */ .lnew-showcase--prog-wipe .lnew-showcase__cap::before, .lnew-showcase--prog-wipe .lnew-showcase__cap::after, .lnew-showcase--prog-none .lnew-showcase__cap::before, .lnew-showcase--prog-none .lnew-showcase__cap::after { content: none; } .lnew-showcase--prog-caption .lnew-showcase__panel.is-active .lnew-showcase__cap::after { animation: lnsc-cap-line var(--lnsc-dur) linear forwards; } .lnew-showcase--prog-caption .lnew-showcase__panel.is-active .lnew-showcase__cap::before { animation: lnsc-cap-spark var(--lnsc-dur) linear forwards; } /* pause the travelling sparkle with the rotation */ .lnew-showcase.is-paused .lnew-showcase__panel.is-active .lnew-showcase__cap::before, .lnew-showcase.is-paused .lnew-showcase__panel.is-active .lnew-showcase__cap::after, .lnew-showcase__inner:focus-within .lnew-showcase__panel.is-active .lnew-showcase__cap::before, .lnew-showcase__inner:focus-within .lnew-showcase__panel.is-active .lnew-showcase__cap::after { animation-play-state: paused; } @media (hover: hover) { .lnew-showcase--hover-pause .lnew-showcase__inner:hover .lnew-showcase__panel.is-active .lnew-showcase__cap::before, .lnew-showcase--hover-pause .lnew-showcase__inner:hover .lnew-showcase__panel.is-active .lnew-showcase__cap::after { animation-play-state: paused; } } /* ===================================================================== Scroll reveal — --i is assigned by lnew-showcase.js (index within parent) ===================================================================== */ .lnew-showcase .lnew-reveal { opacity: 0; transform: translate3d(0, var(--lnsc-rv-dist), 0); transition: opacity var(--lnsc-rv-dur) var(--lnsc-ease), transform var(--lnsc-rv-dur) var(--lnsc-ease); transition-delay: calc(var(--i, 0) * var(--lnsc-rv-step)); } /* horizontal travel is deliberately 0.7x so it stays inside the gutter (the section is overflow-x: clip) */ .lnew-showcase .lnew-reveal--left { transform: translate3d(calc(var(--lnsc-rv-dist) * -.7), 0, 0); } .lnew-showcase .lnew-reveal--right { transform: translate3d(calc(var(--lnsc-rv-dist) * .7), 0, 0); } .lnew-showcase .lnew-reveal.is-in { opacity: 1; transform: none; } .elementor-editor-active .lnew-showcase .lnew-reveal { opacity: 1; transform: none; } /* ---- reduced motion: auto-advancing content is a behavioural concern (WCAG 2.2.2 Pause, Stop, Hide), so lnew-showcase.js also refuses to start the rotation. The rail would then only ever sit empty — hide it rather than imply a timer that isn't running. Tabs stay fully clickable. ---- */ @media (prefers-reduced-motion: reduce) { .lnew-showcase .lnew-reveal { opacity: 1; transform: none; transition: none; } .lnew-showcase__fill { animation: none !important; } .lnew-showcase__tab.is-active .lnew-showcase__track { display: none; } .lnew-showcase__cap::before, .lnew-showcase__cap::after { animation: none !important; content: none; } .lnew-showcase__panel { transition: none; } .lnew-showcase__eyebrow-dot { animation: none !important; opacity: 1; } } /* ===================================================================== Responsive — mirrors base/4-responsive.css + showcase.css breakpoints. Two different techniques on purpose: · STRUCTURE (the stack at 920px) sets grid-template-columns outright, so it beats a desktop-only Style-tab control at equal specificity through source order. This is why the column ratio control writes a TOKEN and the stacked layout does not — the reverse would leave phones in two columns, since a rule without a media query still wins on specificity. · SIZING that a control owns is written as a TOKEN override. Elementor's own tablet/mobile rules are (0,2,0) inside their own media queries and always outrank these, so this block is the fallback that keeps the widget correctly responsive if the generated CSS is ever absent. Deliberately NOT ported — three base-template rules that the reference never actually applies, because its aurora override is #showcase-scoped i.e. (1,1,0) and beats a (0,1,0) rule no matter what media query it sits in. Measured against the real build, not read off the source: · `@media (max-width:460px) .showcase__tab { padding: 14px 15px }` — loses to `#showcase .showcase__tab { padding: 12px 14px }`. · `@media (max-width:920px) .showcase__inner { gap: 30px }` — loses to `#showcase .showcase__inner { gap: 34px }`. Only the `grid-template-columns: 1fr` in that rule survives, which is why the stack below sets ONLY that. · the `.sc-card__body` rules, whose markup aurora replaced entirely. ===================================================================== */ @media (max-width: 1040px) { .lnew-showcase { --lnsc-gutter: 24px; --lnsc-pad-t: 84px; --lnsc-pad-b: 84px; --lnsc-head-gap: 44px; } } @media (max-width: 920px) { .lnew-showcase__inner { grid-template-columns: 1fr; } } @media (max-width: 760px) { .lnew-showcase { --lnsc-gutter: 20px; --lnsc-pad-t: 64px; --lnsc-pad-b: 64px; --lnsc-head-gap: 34px; } .lnew-showcase__lead { font-size: 16.5px; } } @media (max-width: 460px) { .lnew-showcase { --lnsc-gutter: 16px; --lnsc-pad-t: 54px; --lnsc-pad-b: 54px; --lnsc-head-gap: 28px; } } /* Coarse-pointer: a tap leaves a sticky :hover, so drop the hover tint */ @media (hover: none) { .lnew-showcase .lnew-showcase__tab:hover { background: var(--lnsc-tab-bg); border-color: var(--lnsc-tab-border); } .lnew-showcase .lnew-showcase__tab.is-active:hover { background: var(--lnsc-accent-grad); border-color: transparent; } }