/* * ID-106 — gradient fade + toggle affordance for the collapsed model/product description * (ported from agropiese.MD, AGR-150). * * Loaded site-wide from layout/app.blade.php. It MUST stay in : readmore.js measures * `.more` at document.ready; a stylesheet arriving later makes 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 .product-description: `.text` is also used by listing cards, which have * their own truncate widget (truncateTexts() in /js/my.js). * - Never style `.product-description` alone: short descriptions must render 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 injected rule becomes * `undefined[data-readmore]{…}` and matches nothing, so the text is never clipped. * anvelope.md runs jQuery 3.7.1, so this rule is what actually clips the text. */ .product-description .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. */ .product-description .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. * Colours follow the existing "read more" affordance on listing cards (#24afdb) and the * description link colour (#0b55a0) on hover. The .product-inf prefix gives (0,4,0), which * outscores style.css `.product-container .product-inf div .text a` (0,3,2). */ .product-inf .product-description .more + [data-readmore-toggle] { display: inline-block; margin-top: 6px; padding: 4px 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: #24afdb; text-decoration: none; cursor: pointer; } .product-inf .product-description .more + [data-readmore-toggle]:hover, .product-inf .product-description .more + [data-readmore-toggle]:focus { color: #0b55a0; text-decoration: underline; } .product-inf .product-description .more + [data-readmore-toggle]:focus-visible { outline: 2px solid #24afdb; outline-offset: 2px; }