/* * cls-fix.css — CLS (Cumulative Layout Shift) safeguard. * Loaded LAST in (after media.css) so it can override only where intended. * * FINDING: Nicepage already reserves space for every image on this page: * - .u-image-N -> explicit width + height set in CSS per breakpoint, object-fit:cover * - .u-back-image -> CSS background images (cannot cause CLS) * - icon -> wrapped in sized .u-icon-N / .u-file-icon spans (img width/height:100%) * Measured CLS on the live page = 0.0002 at 1440 and 390 (threshold for "good" is 0.1). * * Therefore NO forced aspect-ratio is applied (forcing it would risk conflicting with the * already-set explicit heights and could CREATE shifts). The rules below are zero-/low-risk * GUARDS only, using :where() (specificity 0) so they can never override existing Nicepage * width/height declarations — they only take effect if an image ever ships without a CSS size. */ /* Guard 1: keep lazyload images from collapsing to 0 height before the asset decodes. :where() = specificity 0, so any explicit .u-section-N .u-image-N height always wins. */ :where(img.lazyload) { min-height: 1px; /* prevents 0px collapse flash; no visible effect on sized images */ } /* Guard 2: content images keep their intrinsic ratio ONLY as a last-resort fallback. :where() specificity 0 means Nicepage's explicit width+height (specificity >=2) always wins; this line is inert for every current image and only engages if width/height were ever removed. */ :where(img.u-image) { aspect-ratio: auto; }