/* * MLX-198 — gradient fade + toggle affordance for the collapsed product/model description * (ported from agropiese.MD, AGR-150). * * Loaded site-wide from site/layout.blade.php. It MUST stay in the document : * readmore.js measures `.more` at document.ready, and a stylesheet arriving later would * make it measure an unstyled element and clip the expanded text. * * Scoping rules — every selector here is deliberately narrow. Do not widen them: * - Qualified with [data-readmore]: readmore.js adds it only when it actually collapses * a block. Short descriptions never get it, so they never get a fade. * - Scoped under .detail-text, and never `.detail-text` alone: containers that render * content in full (e.g. the SEO text block) must stay untouched. * * No max-height anywhere: readmore.js drives an inline `height`; a CSS clamp would fight it. */ /* * Containing block for the overlay + the plugin's own block CSS, restated. * readmore.js injects `[data-readmore]{overflow:hidden;transition:…}` built from * jQuery's `this.selector`, which was REMOVED in jQuery 3 (the site runs 3.7.1) — the * injected rule becomes `undefined[data-readmore]{…}` and matches nothing. * * `transition` is load-bearing: readmore flips aria-expanded ONLY on transitionend, and this * is the only transition that fires it. Never set `transition: none` here (not even under * prefers-reduced-motion), or the fade would stay over the expanded text. */ .detail-text .more[data-readmore] { position: relative; display: block; width: 100%; overflow: hidden; transition: height 100ms; } /* * The fade. Gated on [aria-expanded="false"], which the plugin flips on toggle — the * overlay disappears on expand with no JavaScript of ours. * (0,3,0) outscores the plugin's runtime-injected `.more[data-readmore]` (0,2,0). */ .detail-text .more[data-readmore][aria-expanded="false"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%); pointer-events: none; } /* * The toggle link. readmore.js recreates it via replaceWith() on every click, so it can * never carry a class of ours — [data-readmore-toggle] is the only stable hook. * Colors follow the Master Lux brand red (--rcolor in site/css/style.css). */ .detail-text .more + [data-readmore-toggle] { display: inline-block; padding-top: 4px; font-weight: 600; color: var(--rcolor, #fc3232); } .detail-text .more + [data-readmore-toggle]:hover, .detail-text .more + [data-readmore-toggle]:focus { color: #d62424; text-decoration: underline; } .detail-text .more + [data-readmore-toggle]:focus-visible { outline: 2px solid var(--rcolor, #fc3232); outline-offset: 2px; }