/*! * AQELTech_UnifiedReviews - Breeze styles for the unified reviews PDP block. * * Organic v4.3 redesign (2026-07): re-skin of the v3 navy/gold system onto a * warm, rounded "Organic" surface - native-palette tokens (every colour * traces to the live Breeze brand navy #014e83 / CTA gold #fdab18 / star * gold #e3a008 family, NOT the old solid-navy inverted summary panel), a * serif display type role (Georgia stack; self-host a Fraunces/Lora-class * webfont later - see project asset pipeline) for headings/titles/author * names/the pull-quote, a 3-sub-card aggregate summary (score / breakdown / * mentions+quote, each its own tinted panel), mention pills, a gold-tinted * quote card, visibly rounder cards (20px/12px radii vs v3's 12px/8px), the * REVIEWS.io attribution relocated to the card footer (opposite Helpful, * off the report-flag corner), two admin-configurable layouts (list_layout: * list|grid-2|grid-3, summary_layout: stacked|sided), and the v4.3 compact * "merged stat card" mobile summary. Ease-out motion throughout, respecting * prefers-reduced-motion. * * Design source: reviews-organic-v4-mockup.html (v4.3). That file is a * literal CSS re-skin authored against these exact real selectors; frame- * scoped `.aqr-frame--mobile` overrides there are reproduced below as real * `@media` rules. A few real selectors the mockup does not address (see * "Preserved, not part of the Organic re-skin" below) are kept from v3 with * only their token references remapped to the new names - dropping them * would leave the write-a-review form and two conditionally-rendered card * elements unstyled. * * Plain CSS (Breeze does not compile LESS at runtime). Keyed to the ACTUAL * server-rendered markup - every selector below matches a class emitted by * AQELTech_UnifiedReviews's product/view/*.phtml templates. Renaming any of * these classes here without updating the templates breaks the listing. * * The horizontal rating-breakdown bar grid sits on the * .__aggregate-bar-toggle anchor (the clickable filter link is the real * 3-column row wrapper) - styling the outer
  • .__aggregate-bar instead * leaves the label/track/count stacked as inline text. */ /* ── Shared base ──────────────────────────────────────────────────── */ .aqeltech-unifiedreviews, .aqeltech-unifiedreviews *, .aqeltech-unifiedreviews *::before, .aqeltech-unifiedreviews *::after { box-sizing: border-box; } .aqeltech-unifiedreviews [hidden] { display: none !important; } /* Fix 3 (v4.3 live-feedback pass): body scroll lock while the write-review modal is open. Necessarily a top-level (non-.aqeltech-unifiedreviews- scoped) rule since is an ancestor of this section, not a descendant - Breeze/unified-reviews.js's modal controller toggles this exact class name on on open/close. */ body.aqeltech-unifiedreviews-modal-open { overflow: hidden; } /* ========================================================================== ORGANIC v4.3 TOKENS (native-palette revision) - every value traces to a verified native source: the live brand navy #014e83 (root --brand-color / theme @theme__brand-color), its live hover #013f6a, the live CTA gold #fdab18 / star gold #e3a008 family, and the v3 tokens this replaces (navy-soft/panel/ink/body/line/ok all live-computed on the PDP). WCAG AA verified: text pairs >=4.5:1, non-text >=3:1 on every surface they're used against (recomputed programmatically against these exact hexes). Fix 1 (2026-07 live-feedback pass): the FIRST Organic v4.3 ship over- darkened --aqr-accent-strong to #9a6d05 and --aqr-quote-ink to #845d05 chasing a blanket 4.5:1-everywhere reading - user-visible as "mustard", not gold. This pass restores the NATIVE BRIGHT star gold #e3a008 for every decorative-with-a-real-text-equivalent consumer (stars/bars/glyphs/form stars - see --aqr-accent-strong's own comment below) and computes the correct PER-USAGE threshold for the two real-text consumers (the "5.0" numeral qualifies as WCAG large text at its clamp() size, so needs only 3:1; the pull-quote is held to the stricter 4.5:1 since it sits just under the large-text size cutoff) rather than over-constraining both to the worst case. Three gold-filled controls that carry WHITE text (pager-current / guest-btn--primary / form-submit) and two ring/outline indicators governed by WCAG 1.4.11 (focus-visible, the pressed histogram toggle) are individually re-pointed at --aqr-ink / --aqr-accent instead of inheriting the brighter fill - seeing full contrast numbers inline at each of those selectors. ========================================================================== */ .aqeltech-unifiedreviews { /* User batch: the reviews root holds NO background, margin, or padding, and no custom font-family - it inherits the theme font and sits flush inside the theme's native tab-content wrapper. */ color: var(--aqr-ink); /* User batch: no custom font-family anywhere in the reviews UI - every region inherits the active theme font. The --aqr-font* tokens and all font-family declarations were removed. */ /* ---- Surfaces (Modern: WHITE cards floating on a light neutral page) ---- The blue-gray wash is gone. --aqr-page is the light-neutral backdrop the reviews block sits on (mockup body #f7f9fb); every REGION (summary cards, Customers-say, spotlight, toolbar, review cards) is a crisp WHITE card on top of it - hence --aqr-surface AND --aqr-panel are now both #fff. Field chrome (selects/inputs) is white too; progress-bar/track fills use the dedicated --aqr-track step so they stay visible on a white card. */ --aqr-page: #f7f9fb; /* light-neutral page backdrop behind the cards */ --aqr-panel: #ffffff; /* summary sub-card / mentions / sidebar - now white */ --aqr-surface: #ffffff; /* review card, select, input, form bg - now white */ --aqr-track: #eef2f7; /* progress-bar track / inset field fill on a white card */ --aqr-quote-bg: #fff6e6; /* pull-quote card bg - 11% CTA gold tint over white */ --aqr-line: #e2e8f1; /* card/region hairline border (mockup card border) */ --aqr-line-2: #cbd5e2; /* stronger border: selects, outline chips */ /* ---- Ink ---- */ --aqr-ink: #1a3350; /* headings, card titles, reviewer names */ /* Round-3 fidelity fix #6: nudged darker (#53667e -> #47586d, ~15% darker) - Codex flagged the muted/secondary copy as a hair too light against the target's navy hierarchy. Still comfortably AA on every surface here (darker only improves contrast over the prior value). */ --aqr-muted: #47586d; /* dates, counts, uppercase labels, attribution */ --aqr-body: #40536b; /* review body copy */ /* Fix 1 (2026-07 live-feedback pass): big average numeral + pull-quote text. This is REAL text (not exempt), so it cannot simply match the bright #e3a008 star gold below - #e3a008 on this token's own backgrounds (--aqr-panel behind the numeral, --aqr-quote-bg behind the quote) computes to ~1.8:1 / ~2.1:1, nowhere near AA. #8f6905 is the brightest gold at the same hue/saturation family as #e3a008 that still clears BOTH real thresholds: >=3:1 against --aqr-panel (the numeral is clamp(2.6rem..3.1rem)/700 - unambiguously WCAG "large text", 3:1 suffices there) and the stricter >=4.5:1 against --aqr-quote-bg (the pull-quote is 1.15rem/700 = 18.4px, just under the 18.66px large-text bold threshold, so it is held to the conservative 4.5:1 normal-text bar). Verified: #8f6905 vs panel = 3.95:1, vs quote-bg = 4.67:1 (both computed programmatically). This replaces the prior #845d05, which was already within ~0.2 of the panel's 4.5:1 ceiling at that hue - i.e. #845d05 was close to the brightest possible AA-passing shade if held to 4.5:1 everywhere; using the numeral's correct 3:1 large-text floor instead is what buys the extra headroom here. */ --aqr-quote-ink: #8f6905; /* ---- Brand accent family (navy text/UI vs gold fills) ---- */ --aqr-accent: #014e83; /* text-safe - Helpful-default outline, links - live brand navy */ --aqr-accent-dark: #013f6a; /* hover/active - live brand hover */ /* Fix 1 (2026-07 live-feedback pass): restored to the NATIVE BRIGHT Breeze star gold #e3a008 (was over-darkened to mustard #9a6d05 by a prior AA pass). #e3a008 is used below ONLY for elements that are either (a) aria-hidden decorative glyphs/fills with a real adjacent text equivalent (aggregate/card stars, bar fill, bar glyph - the numeric rating/count is always separately rendered as real text), or (b) the form star-rating selector, whose selection state is carried by aria-checked for AT users and - as of Fix 3 - a live "N/5 stars" text indicator for sighted users, so its fill is likewise a decorated state, not the sole state carrier. Every OTHER consumer of this token (large gold-filled buttons/pills carrying their own text, and the focus-visible/pressed-state rings governed by WCAG 1.4.11 non-text contrast) was audited individually and re-pointed at a passing token below (--aqr-ink for on-fill text, --aqr-accent for rings) rather than inheriting the brighter value, since #e3a008 computes <2.1:1 against every real surface in this file (page/surface/panel) and against white text - see the individual selectors below for the fix. */ --aqr-accent-strong: #e3a008; /* fill-safe (decorative-with-text-equivalent only) - stars, histogram bar fill, form stars */ --aqr-accent-soft: rgba(1, 78, 131, .10); --aqr-star-empty: #d8dfe9; /* unfilled star glyph / bar track */ /* ---- Verified green family (verified / mentions / avatar) ---- */ --aqr-green-bg: #e7f4ed; --aqr-green-ink: #0e7a52; --aqr-mention-ink: #0d6e4a; /* mention-pill ink - shade of green-ink for pill-density text */ /* ---- Voted (filled) Helpful chip ---- */ --aqr-voted-fill: #014e83; --aqr-voted-ink: #ffffff; /* ---- Status ---- */ --aqr-err: #b91c1c; /* ---- Radii (Modern: crisp 14px cards, matches mockup card radius) ---- */ --aqr-radius: 14px; --aqr-radius-sm: 10px; --aqr-radius-pill: 999px; --aqr-radius-thumb: 12px; /* ---- Card padding (mockup: ~22px 24px on a review/summary card) ---- */ --aqr-card-pad: 1.375rem 1.5rem; /* ---- Elevation + motion (Modern: subtle single-layer lift, mockup value) ---- */ /* Fidelity fix #12: lightened one notch from the prior values (spread shortened, alpha reduced) - the previous pair read slightly "dirty"/ heavy next to the mockup's restrained elevation. */ --aqr-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px -18px rgba(20, 45, 80, .18); --aqr-shadow-hov: 0 2px 4px rgba(16, 24, 40, .06), 0 14px 26px -18px rgba(20, 45, 80, .22); --aqr-ease: cubic-bezier(.16, 1, .3, 1); } /* User batch: the tab-content table override is removed by request - the reviews block now sits inside the theme's native .data.item.content wrapper with the theme's own padding/frame, and carries no compensating override. */ /* Fix 1: focus rings are a WCAG 1.4.11 non-text/UI-component contrast case, not decoration - #e3a008 (now --aqr-accent-strong) computes <2.1:1 against every real surface in this file (page/surface/panel), which would silently regress keyboard-focus visibility. --aqr-accent (the live brand navy) clears 6.8-8.0:1 against the same surfaces, so the ring stays on the navy "text/UI" token instead of the "fill" token, per this file's own documented brand-accent-family split above. */ :where(.aqeltech-unifiedreviews) :is(a, button, select, input, textarea):focus-visible { outline: 2px solid var(--aqr-accent); outline-offset: 2px; } /* ========================================================================== CANONICAL CARD CHROME (Modern re-skin) - the one white-card recipe every region uses. Add `.aqr-card` to any new region container (the pane agents' "Customers say" AI card, the "Most helpful / Most critical" spotlight pair, etc.) to inherit the exact mockup chrome: white surface, 1px hairline, 14px radius, subtle single-layer shadow, ~22/24px padding. The existing region containers (gallery / aggregate / toolbar / review card) already carry these same four declarations inline via the same tokens, so they stay in sync if a token changes. Use `.aqr-card--tight` for a denser pad (toolbar-class rows). ========================================================================== */ .aqeltech-unifiedreviews .aqr-card { background: var(--aqr-surface); border: 1px solid var(--aqr-line); border-radius: var(--aqr-radius); box-shadow: var(--aqr-shadow); padding: var(--aqr-card-pad); } /* Round-3 fidelity fix #5: tightened from .9rem - Codex + Fable both flagged the toolbar row as a touch tall. */ .aqeltech-unifiedreviews .aqr-card--tight { padding: .7rem 1rem; } /* ── Header: editorial masthead topline (Wave 7) ────────────────────────── Direction A / Editorial: the section reads like a magazine masthead - a small-caps kicker + folio on one line, a double rule underneath, then the score/breakdown/mentions grid (stacked layout) or nothing (sided layout, where the grid moves into the sidebar - see .__body--sided below). A second single rule closes the masthead before the photo story (added inline in list.phtml, only in the stacked branch). ──────────── */ .aqeltech-unifiedreviews__header { display: block; margin-bottom: 0; } /* Modern re-skin - the masthead is now a single flex row: a large sans "Customer reviews" heading + muted "N reviews" on the left, and the navy "Write a review" pill pushed to the right (moved here from the toolbar). The old uppercase micro-title + newspaper double-rule spine are gone. */ .aqeltech-unifiedreviews__topline { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem 1rem; /* Round-3 fidelity fix #2: tightened from 1.125rem - Codex flagged the gap between the "Customer reviews" header row and the summary cards as too big. */ margin-bottom: .75rem; } .aqeltech-unifiedreviews__title { font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; text-transform: none; color: var(--aqr-ink); margin: 0; } .aqeltech-unifiedreviews__folio { font-style: normal; font-weight: 400; font-size: .875rem; color: var(--aqr-muted); } /* Navy "Write a review" pill sits at the far right of the masthead row. */ .aqeltech-unifiedreviews__topline-cta { margin-left: auto; } /* The newspaper spine: a bold rule with a thin hairline riding just under it (double-rule) opens the masthead; a single hairline (reused for the masthead close + the pre-toolbar divider) is thinner still. */ .aqeltech-unifiedreviews__rule-double, .aqeltech-unifiedreviews__rule { border: 0; margin: 0; } .aqeltech-unifiedreviews__rule-double { border-top: 2px solid var(--aqr-ink); position: relative; margin-bottom: 6px; } .aqeltech-unifiedreviews__rule-double::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1px solid var(--aqr-ink); } .aqeltech-unifiedreviews__rule { border-top: 1px solid var(--aqr-line-2); } /* ── Gallery-above section (Wave 5, Part 2) - "Customer photos & videos", a horizontally-scrollable rail above the review list/toolbar. Reuses the real .review-card__media-button/-thumb thumbnail contract (styled in Breeze's review-lightbox.css, which also carries the larger 104x80 gallery-row-scoped override and the shared .media-play/.media-duration video-badge rules) - only the section chrome (label/count/hint row + the scrollable rail wrapper) is new here. ─────────────────────────── */ /* Modern re-skin (density pass, fidelity fix #2): the mockup renders this rail as an OPEN strip sitting directly on the page background - NO card chrome (no border/shadow/surface fill), unlike every other region here. */ .aqeltech-unifiedreviews__gallery { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin-bottom: 1.25rem; } .aqeltech-unifiedreviews__gallery-head { display: flex; align-items: baseline; gap: .6rem; /* Round-3 fidelity fix #4: tightened from .625rem - the rail sat a bit too far below its "Customer photos & videos" heading. */ margin-bottom: .4rem; flex-wrap: wrap; } .aqeltech-unifiedreviews__gallery-lab { font-weight: 800; font-size: .8125rem; color: var(--aqr-ink); } /* Fidelity fix #2: replaces the old numeric pill badge - a plain muted "N items · from all reviews" caption, matching the mockup exactly. */ .aqeltech-unifiedreviews__gallery-count { font-size: .78125rem; font-weight: 400; color: var(--aqr-muted); background: none; border-radius: 0; padding: 0; font-variant-numeric: tabular-nums; } /* Fidelity fix #2: "See all" link pinned to the right, replaces the old "Tap to enlarge" hint text. */ .aqeltech-unifiedreviews__gallery-hint, .aqeltech-unifiedreviews__gallery-seeall { margin-left: auto; font-size: .8125rem; font-weight: 600; color: var(--aqr-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; } .aqeltech-unifiedreviews__gallery-seeall:hover, .aqeltech-unifiedreviews__gallery-seeall:focus-visible { color: var(--aqr-accent-dark); } .aqeltech-unifiedreviews__gallery-row { display: flex; gap: .65rem; overflow-x: auto; padding: .15rem .15rem .5rem; scrollbar-width: thin; } /* Modern: rail overflow - items beyond the visible cap stay in the DOM (so the product-scope lightbox still collects them) but are visually removed; the "+N view all" tile opens the viewer at the first hidden item. */ .aqeltech-unifiedreviews__gallery-hidden { display: none; } .aqeltech-unifiedreviews__gallery-viewall { flex: 0 0 auto; width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; background: var(--aqr-ink); color: #fff; border: 1px solid var(--aqr-ink); border-radius: var(--aqr-radius-thumb); cursor: zoom-in; transition: transform .16s var(--aqr-ease); } .aqeltech-unifiedreviews__gallery-viewall:hover { transform: translateY(-2px); } .aqeltech-unifiedreviews__gallery-viewall:focus-visible { outline: 2px solid var(--aqr-accent); outline-offset: 2px; } .aqeltech-unifiedreviews__gallery-viewall-n { font-size: 1.15rem; font-weight: 800; line-height: 1; } .aqeltech-unifiedreviews__gallery-viewall-lab { font-size: .66rem; font-weight: 600; letter-spacing: .02em; } @media (max-width: 768px) { .aqeltech-unifiedreviews__gallery-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; overflow: visible; padding: .15rem 0 .2rem; } /* Wave 6 bug fix: was aspect-ratio 4/3 (a rectangle) - the mobile grid cell's thumb must stay a SQUARE like every other breakpoint's thumb, just responsively sized to the grid column's own width. */ .aqeltech-unifiedreviews__gallery-row .review-card__media-button { width: 100%; height: auto; aspect-ratio: 1 / 1; } } /* ── Aggregate: editorial masthead grid (score / breakdown / mentions) ──── Direction A / Editorial (Wave 7): the three sub-sections are no longer tinted panel "cards" - they are hairline-separated columns of a single hairline-free grid (newspaper masthead), each introduced by a small-caps quiet label. Same
    /