/* * AUTOOL Product Reviews & Quote — modernisation layer. * * Load order (Frontend\Assets, wp_enqueue_scripts priority 120): * * 1. autool-single-product-runtime.css the monolith's shared review styles * 2. per-product `_autool_de_inline_css` any product-specific overrides (prio 100) * 3. reviews-popup.css the Customer Reviews popup design * 4. THIS FILE corrections + cross-popup consistency * * 120 is deliberate: autool-direct-edit prints the per-post copies at 100, and until * this plugin moved past that point those copies won every tie — which is why 136 * products looked one way and 23 looked another. * * What belongs here: things the shared stylesheet and the shipped design genuinely * lack, plus the accessibility/scroll behaviour that brings both popups up to current * practice. What does NOT belong here: re-declaring anything runtime.css or * reviews-popup.css already sets. A previous version of this file duplicated the * rating-bar rules and the copies silently changed the bar tracks to * `overflow:hidden` and narrowed each one by ~4px. Grep before you add. */ /* ---------------------------------------------------------------- */ /* Summary actions */ /* ---------------------------------------------------------------- */ .autool-product-reviews-aside .autool-reviews-view-more, .autool-product-reviews-aside .autool-reviews-leave { display: block; width: 100%; text-align: center; cursor: pointer; } /* ---------------------------------------------------------------- */ /* Review form handoff */ /* ---------------------------------------------------------------- */ /* * Visually removed but still rendered, focusable and movable: reviews.js MOVES this * element into the popup rather than cloning it, because a clone would create a * second #commentform with duplicate ids and WordPress's comment-reply script binds * to the original. display:none would also drop it from the layout entirely, which * makes the move visibly janky. */ .autool-review-form-offscreen { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Inside the popup it is a normal block again. */ .autool-write-modal-body .autool-product-review-form-block { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } /* * Two rules that Blocksy only supplies under a `.woocommerce-Reviews` ANCESTOR. * The popup sits outside #reviews, so they stop applying once the form is moved * in — the raw file input reappears and the + button stretches to the full row. * * Declared here rather than by adding `woocommerce-Reviews` to a popup container: * that class also imports the review SECTION's layout, which measured as * gap:40px on the popup and pushed every block apart. * * Note the legacy build had BOTH of these defects (measured: file input * inline-block, + button 642px wide), so this is a deliberate improvement on * the original rather than a reproduction of it. */ .autool-product-modal-backdrop .ct-review-upload-section input[type="file"] { display: none; } .autool-product-modal-backdrop .ct-review-upload-section .ct-upload-button { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0; border: 2px dashed var(--theme-border-color, #d1d5db); border-radius: 2px; cursor: pointer; } .autool-product-modal-backdrop .ct-review-upload-section .ct-upload-button:hover { color: var(--autool-popup-yellow-dark, #d4960d); border-color: var(--autool-popup-yellow, #feb511); } /* ---------------------------------------------------------------- */ /* Reviews popup: filter bars — intentionally NOT styled here */ /* ---------------------------------------------------------------- */ /* * autool-single-product-runtime.css already styles every one of * .autool-reviews-popup__bars / __bar-row / __bar-track / __bar-fill / __mono / * __bar-star / __filter-reset / __filter-state / __loading. * * An earlier version of this file duplicated them, from back when the popup used * its own __filters / __list class names. Now that the markup reproduces the * legacy contract those copies only caused drift — measured against the * pre-extraction build they changed the bar track to overflow:hidden and, via a * min-width:3ch on __mono, narrowed every track by ~4px. Deleted so the shared * stylesheet governs and the popup renders exactly as it used to. * * Only add a rule here for something the shared stylesheet genuinely lacks. */ /* The popup list reuses the card styles, so it must not inherit the initial visible-count cut applied to the in-page list. The container class is .autool-product-all-reviews-grid because the DB-stored photo-filter module and the per-product inline CSS both key off that name — see reviews.js. */ .autool-product-all-reviews-grid .autool-review-hidden { display: block; } .autool-product-all-reviews-grid [hidden] { display: none; } /* ---------------------------------------------------------------- */ /* Modal focus ring */ /* ---------------------------------------------------------------- */ /* * Focus is trapped in JS (the monolith's modals had no trap at all), so the panel * itself can receive focus. Suppress the outline only for the programmatic case. */ .autool-product-modal-panel:focus:not(:focus-visible) { outline: none; } /* * A note on corners: the shipped design and the rules below ask for a 14px radius, * but the theme sets `--theme-border-radius: 0px` and a blanket * `:where(button, input, ...) { border-radius: var(--theme-border-radius) !important }` * reset wins over all of it. Square corners are therefore the site-wide look, and * measuring the pre-extraction build confirms the panel was already 0px. The radius * declarations are left in place as a faithful record of intent; do not escalate them * to !important to "fix" them — that would make this one dialog inconsistent with * every other surface on the site. */ /* ================================================================ */ /* Shared popup behaviour — current practice */ /* ================================================================ */ /* * Sourced from the WAI-ARIA APG dialog pattern, web.dev's "Building a dialog * component", and a11y-dialog's guidance. Applied to ALL three popups (reviews, * write-review, request-quote) so they behave identically; the shipped reviews * design in reviews-popup.css already does some of this for its own panel, and * these rules bring the other two up to the same level without fighting it. */ /* Scroll containment: without this, reaching the end of the popup's scroll area hands the momentum to the page behind it and the background creeps. */ .autool-product-modal-backdrop .autool-product-modal-body, .autool-product-modal-backdrop .autool-product-all-reviews-grid, .autool-product-modal-backdrop .autool-write-modal-body, .autool-product-modal-backdrop .autool-request-quote-popup { overscroll-behavior-y: contain; } /* * Cap the panel to the DYNAMIC viewport. `vh` is wrong on mobile: it measures the * viewport as if the browser chrome were hidden, so a popup sized to 90vh gets its * footer cut off behind the address bar. `dvh` tracks the visible area. * The vh line stays first as the fallback for browsers without dvh. */ .autool-product-modal-backdrop .autool-product-modal-panel--write-review, .autool-product-modal-backdrop .autool-product-modal-panel--request-quote { max-height: min(90vh, 100%); max-height: min(90dvh, 100%); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } /* The header is row 1 and must not shrink; the body is row 2 and scrolls. */ .autool-product-modal-backdrop .autool-product-modal-panel--write-review > .autool-product-modal-body, .autool-product-modal-backdrop .autool-product-modal-panel--request-quote > .autool-product-modal-body { min-height: 0; overflow-y: auto; /* Reserve the scrollbar so showing it cannot reflow the form. */ scrollbar-gutter: stable; } /* * Lock the page behind the popup. `:has()` keeps this declarative — no class to add * and, more importantly, none to forget to remove if a script throws mid-open. * The html.autool-review-modal-open rule is the fallback for older engines and is * what reviews.js already toggles. */ html:has(.autool-product-modal-backdrop.open), html.autool-review-modal-open { overflow: hidden; } /* * Motion is opt-in. Default is a plain opacity fade, and the transform/scale is only * added when the visitor has not asked for reduced motion — the order recommended in * the web.dev article, rather than an @media block that tries to switch it off again. */ .autool-product-modal-backdrop { opacity: 0; visibility: hidden; transition: opacity 0.18s ease, visibility 0s linear 0.18s; } .autool-product-modal-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.18s ease, visibility 0s; } @media (prefers-reduced-motion: no-preference) { .autool-product-modal-backdrop .autool-product-modal-panel { transform: translateY(8px) scale(0.995); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .autool-product-modal-backdrop.open .autool-product-modal-panel { transform: none; } } /* Focus visibility: keyboard users must be able to see where they are. The panel itself takes programmatic focus on open, which should not paint a ring. */ .autool-product-modal-backdrop .autool-product-modal-panel:focus:not(:focus-visible) { outline: none; } .autool-product-modal-backdrop :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--autool-popup-yellow-dark, #d4960d); outline-offset: 2px; } /* Close button: give it a comfortable hit target on touch without changing its look (WCAG 2.5.8 asks for 24px minimum; 36px is the painted size already). */ .autool-product-modal-backdrop .autool-product-modal-close { flex: 0 0 auto; touch-action: manipulation; } /* ================================================================ */ /* Write-review popup — same design language as the reviews popup */ /* ================================================================ */ /* * The shipped design in reviews-popup.css only ever targeted * [data-autool-modal-id="reviews"], so the write popup never received the same * surface treatment: it sat on the bare runtime styles on every product. These rules * reuse the same tokens so the two popups read as one system. */ .autool-product-modal-backdrop[data-autool-modal-id="write-review"] .autool-product-modal-panel--write-review { --autool-review-card-border: #e3e7ec; --autool-review-card-muted: #657184; --autool-review-card-surface: #ffffff; --autool-review-card-soft: #f5f7f9; width: min(720px, calc(100vw - 32px)); border: 1px solid rgba(26, 31, 37, 0.14); border-radius: 14px; background: var(--autool-review-card-soft); box-shadow: 0 28px 80px rgba(18, 24, 32, 0.24); } .autool-product-modal-backdrop[data-autool-modal-id="write-review"] .autool-product-modal-header { position: relative; min-height: 64px; padding-inline: 18px; border-bottom-width: 3px; background: rgba(255, 255, 255, 0.98); } .autool-product-modal-backdrop[data-autool-modal-id="write-review"] .autool-write-modal-body { padding: 18px; background: var(--autool-review-card-soft); } .autool-product-modal-backdrop[data-autool-modal-id="write-review"] .autool-product-review-form-block { padding: 18px; border: 1px solid var(--autool-review-card-border); border-radius: 12px; background: var(--autool-review-card-surface); } /* ================================================================ */ /* Request-quote popup — same surface */ /* ================================================================ */ .autool-product-modal-backdrop[data-autool-modal-id="request-quote"] .autool-product-modal-panel--request-quote { --autool-review-card-border: #e3e7ec; --autool-review-card-surface: #ffffff; --autool-review-card-soft: #f5f7f9; border: 1px solid rgba(26, 31, 37, 0.14); border-radius: 14px; background: var(--autool-review-card-surface); box-shadow: 0 28px 80px rgba(18, 24, 32, 0.24); } .autool-product-modal-backdrop[data-autool-modal-id="request-quote"] .autool-product-modal-header { position: relative; min-height: 64px; padding-inline: 18px; border-bottom-width: 3px; background: rgba(255, 255, 255, 0.98); } /* ================================================================ */ /* Narrow screens */ /* ================================================================ */ @media (max-width: 689.98px) { /* * Phones: let the write and quote popups use the full width, matching what the * shipped reviews design already does for its own panel in its 899.98px query. * * Scoped to those two popups ONLY. The reviews panel is the design's business and * overriding it here would fight the file that owns it. * * The selectors repeat the [data-autool-modal-id] attribute on purpose: a plain * `.autool-product-modal-backdrop .autool-product-modal-panel` is (0,2,0) and * loses to the per-popup rules above at (0,3,0), so the write popup stayed at * min(720px, 100vw - 32px) = 358px on a 390px phone. Specificity beats source * order, media query or not. */ .autool-product-modal-backdrop[data-autool-modal-id="write-review"] .autool-product-modal-panel--write-review, .autool-product-modal-backdrop[data-autool-modal-id="request-quote"] .autool-product-modal-panel--request-quote { width: 100%; max-width: 100%; max-height: 100dvh; border-inline: 0; } .autool-product-modal-backdrop[data-autool-modal-id="write-review"] .autool-write-modal-body, .autool-product-modal-backdrop[data-autool-modal-id="write-review"] .autool-product-review-form-block { padding: 12px; } .autool-product-modal-backdrop .autool-product-modal-header { padding-inline: 12px; } } /* ================================================================ */ /* Reviews popup performance */ /* ================================================================ */ /* * Rating filtering is done in CSS off a single attribute on the grid. * * reviews.js used to hide cards one by one. On a 274-review product that wrote ~548 * inline styles per click (the old selector matched each card twice) and measured * 207 ms from click to paint. One attribute write plus these two rules does the same * job in a single style recalculation. */ .autool-product-modal-backdrop .autool-product-all-reviews-grid[data-autool-filter] > * { display: none; } .autool-product-modal-backdrop .autool-product-all-reviews-grid[data-autool-filter="1"] > [data-autool-rating="1"], .autool-product-modal-backdrop .autool-product-all-reviews-grid[data-autool-filter="2"] > [data-autool-rating="2"], .autool-product-modal-backdrop .autool-product-all-reviews-grid[data-autool-filter="3"] > [data-autool-rating="3"], .autool-product-modal-backdrop .autool-product-all-reviews-grid[data-autool-filter="4"] > [data-autool-rating="4"], .autool-product-modal-backdrop .autool-product-all-reviews-grid[data-autool-filter="5"] > [data-autool-rating="5"] { display: block; } /* * Skip rendering cards that are scrolled out of view. * * The popup carries the whole review list — measured 10,243 nodes, 284 images and * 1,109 SVGs on a 274-review product, which roughly doubles the document. Scrolling * it ran at about 35 fps. `content-visibility: auto` lets the browser skip layout and * paint for off-screen cards; `contain-intrinsic-size: auto 220px` gives it a size to * reserve so the scrollbar does not jump, and the `auto` keyword makes it remember * each card's real height once measured. * * Scoped to the popup grid only: the in-page list shows three cards and would gain * nothing. */ .autool-product-modal-backdrop .autool-product-all-reviews-grid > .autool-product-review-card { content-visibility: auto; contain-intrinsic-size: auto 220px; } /* * The backdrop blur is the shipped design's (blur(10px) saturate(1.05)). This layer * used to add a second, weaker blur(3px) that simply lost — removed rather than left * as a misleading declaration. Compositing a full-viewport blur is not free, so there * should only ever be one. */ /* ================================================================ */ /* Write-review form details */ /* ================================================================ */ /* * Centre the `+` in its dashed box. * * The upload control is a