/** * Homepage Reviews/Testimonials + Featured Captures "Shop All" closing CTA * -- Phase 4C. * * SCOPE: `body.home .elementor-element-`, the same established * per-widget scoping convention already used by shop-by-category.css and * featured-captures.css -- these auto-generated Elementor IDs are live- * verified, not guessed, and stable (they only change if the widget is * deleted and rebuilt in the Elementor editor). * * ARCHITECTURE (audited before writing anything): * - Reviews are three genuine Elementor "Testimonial" widgets * (`elementor-widget-testimonial`) with content authored directly in * the Elementor editor -- NOT dynamic WooCommerce reviews. Confirmed * via the enqueued `widget-testimonial.min.css`. Left as static * editorial content, per the brief -- wording/names/roles untouched. * - Each "card" is one Elementor Container * (`elementor-element-206deca` / `-4e510a6` / `-f3001e1`), each holding * one Star Rating widget (`elementor-widget-star-rating`, Font Awesome * icon glyphs via the `eicons`/`elementor-star-full` class -- an icon * widget, not plain text or a custom component) and one Testimonial * widget as children -- confirmed via live DOM ancestor-chain * inspection, not assumed from HTML source order (source order alone * was actively misleading here). * - Parent (`elementor-element-2a3b1e9`) is a `display:flex` row of * those 3 containers. Live-confirmed already wraps to one full-width * card per row somewhere between 400-767px via Elementor's OWN * responsive container settings -- not touched here, already correct * per the brief's "no horizontal carousel, one card per row on * mobile" requirement. * * STAR COLOR DISCREPANCY (flagging, not silently overriding the premise): * live-measured BEFORE this change, the stars computed to `rgb(204, 214, * 223)` -- a muted blue-gray -- not the bright orange/yellow the brief * described. Possibly a stale cached view, or an earlier phase's CSS * change unintentionally cascading here. Restyled to the sitewide * restrained review-star convention regardless (matching product-card.css * `.tsc-product-rating__stars`, `--tsc-text-muted-light`), since neither * the pre-existing blue-gray nor a hypothetical orange was the deliberate * TSC treatment. * * NO SECTION HEADING EXISTS: confirmed via live DOM/source inspection -- * nothing (no heading widget of any kind) sits between the "Shop All" * button and the first testimonial card. The brief's proposed "CUSTOMER * STORIES / TRUSTED IN THE STUDIO" heading cannot be added from this file * -- CSS cannot inject genuine, crawlable/accessible heading text, and * this project's own principles (established across every prior phase) * treat generated `content:` text as decorative-only, never a stand-in for * real content. Adding a real heading needs an Elementor edit (a Heading * widget) -- flagged in the Phase 4C report, not silently worked around. * * EXCESS WHITESPACE ROOT CAUSE (audited, not guessed): the gap between * "Shop All" and the cards is a 50px Spacer widget * (`elementor-element-8a19912`) PLUS the reviews container's own 20px * margin-top (70px total) -- not egregious on its own. The real * contributor is each card's own internal padding, live-measured at 94px * on every side before this change -- more than four times this design * system's largest spacing token. Reduced below to `--tsc-space-7`, * bringing total dead space before visible card content down * substantially without collapsing the section rhythm to zero. */ /* ============================================================ * 1. "SHOP ALL" CLOSING CTA * ============================================================ * Black background / white text at rest (Astra's own generic button * treatment, confirmed live -- same button language already relied on * sitewide, e.g. product-card.css). Legacy Oswald font-family replaced; * color untouched. * * RADIUS (micro-polish pass): live-audited against "View Plugin" (the * other black primary CTA on this same homepage, elementor-button widget * in the Audio Plugins section) -- confirmed computed border-radius: 4px * there, vs this button's 0px. Matched exactly so both black primary CTAs * share one consistent shape language; no other button/geometry touched. */ body.home .elementor-element-9d5eeb6 .elementor-button { font-family: var(--tsc-font-body); font-weight: 600; letter-spacing: 0.02em; border-radius: 4px; } /* Spacer widget reduced, not removed -- still a deliberate, intentional gap between the CTA and Reviews, just no longer stacking with the cards' own (now much smaller) padding to create excessive dead space. */ body.home .elementor-element-8a19912 .elementor-spacer-inner { height: var(--tsc-space-6) !important; /* Elementor sets inline height="50" via its own editor-configured px value on this exact element -- confirmed live; a class-level rule alone cannot win against a same-element inline style, so this narrowly-scoped exception is evidenced, not a default habit. */ } /* ============================================================ * 2. REVIEW CARDS * ============================================================ * Flat white surface, thin neutral border, square corners, no shadow -- * the same card language established across every other redesigned area * of this site. Padding reduced from a live-measured 94px to * `--tsc-space-7` (a ~50% reduction) -- comfortable internal breathing * room without the disproportionate "oversized pale block" the old value * produced around a handful of short lines of text. */ body.home .elementor-element-206deca, body.home .elementor-element-4e510a6, body.home .elementor-element-f3001e1 { background-color: var(--tsc-surface-light) !important; /* Elementor's own container background setting is applied as a same-element inline-style-equivalent (its own generated CSS rule targets this exact ID with the same specificity a plain ID selector would carry) -- confirmed live via the Elementor editor's own `background_background:"classic"` per-widget setting; overriding it here is the same evidenced exception already used for the spacer above, not a blanket habit. */ border: 1px solid var(--tsc-border-light); border-radius: 0; padding: var(--tsc-space-7) !important; } /* ============================================================ * 3. STAR RATING * ============================================================ * Restrained, matches the sitewide review-star convention (product- * card.css `.tsc-product-rating__stars`) rather than either the * previously-measured blue-gray or the brief's described orange/yellow -- * see this file's header comment for the full discrepancy note. * * CORRECTIVE PASS: the rule below (targeting `.elementor-star-full` * itself) DOES correctly win on that element's own `color` -- confirmed * live -- but that was never the layer actually painting the visible * glyph. Elementor's own plugin CSS (widget-star-rating.min.css, a base * plugin file, not Astra, not dynamic Customizer CSS) renders the star * shape via a `content` glyph on the `::before` PSEUDO-ELEMENT: * .elementor-star-rating i:before { color: #f0ad4e; content: "\e934"; ... } * A pseudo-element's `color` does NOT inherit from its host once a rule * targets the pseudo-element directly -- confirmed live via * getComputedStyle(star, '::before').color independently returning * rgb(240,173,78) (=#f0ad4e) even while the host `` itself correctly * computed the intended gray. Two separate rendering layers, no cascade * conflict between them -- the fix below targets the actual layer. * `-webkit-text-fill-color` set alongside `color` defensively (currently * mirrors `color` with no independent value found live, but this is the * exact glyph-fill property WebKit uses when present, so setting both * closes that path rather than assuming it stays unset). */ body.home .elementor-element-206deca .elementor-star-full, body.home .elementor-element-4e510a6 .elementor-star-full, body.home .elementor-element-f3001e1 .elementor-star-full { color: var(--tsc-text-muted-light) !important; /* Elementor's star-rating widget sets its own fill color via a same-specificity generated rule per widget instance -- same evidenced-exception reasoning as sections 1-2 above. */ } body.home .elementor-element-206deca .elementor-star-full::before, body.home .elementor-element-4e510a6 .elementor-star-full::before, body.home .elementor-element-f3001e1 .elementor-star-full::before { color: var(--tsc-text-muted-light) !important; /* THE actual fix: overrides Elementor's own widget-star-rating.min.css `.elementor-star-rating i:before { color: #f0ad4e }` -- the real source of the visible orange pixels (see comment above). */ -webkit-text-fill-color: var(--tsc-text-muted-light) !important; } body.home .elementor-element-206deca .elementor-star-rating__wrapper, body.home .elementor-element-4e510a6 .elementor-star-rating__wrapper, body.home .elementor-element-f3001e1 .elementor-star-rating__wrapper { margin-bottom: var(--tsc-space-4); } /* ============================================================ * 4. TESTIMONIAL TYPOGRAPHY * ============================================================ * Legacy Oswald (condensed display face) replaced with Inter across the * quote and the name/role line -- the brief's explicit "remove legacy * condensed-display typography from testimonial body text". No giant * decorative quotation marks added (none existed before; none introduced * now) -- the words stay the visual focus, per the brief. */ body.home .elementor-element-206deca .elementor-testimonial-content, body.home .elementor-element-4e510a6 .elementor-testimonial-content, body.home .elementor-element-f3001e1 .elementor-testimonial-content { font-family: var(--tsc-font-body); font-size: 1rem; line-height: var(--tsc-lh-body); color: var(--tsc-text-light); } body.home .elementor-element-206deca .elementor-testimonial-name, body.home .elementor-element-4e510a6 .elementor-testimonial-name, body.home .elementor-element-f3001e1 .elementor-testimonial-name { margin-top: var(--tsc-space-4); font-family: var(--tsc-font-body); font-size: 0.8125rem; font-weight: 600; color: var(--tsc-text-muted-light); } /* ============================================================ * 5. SECTION RHYTHM * ============================================================ * The parent flex row's own 20px margin-top (see header comment) widened * slightly to a full TSC token, now that it is the ONLY intentional gap * left between the CTA and the cards (the oversized card padding that * used to dominate this space is fixed in section 2 above). */ body.home .elementor-element-2a3b1e9 { margin-top: var(--tsc-space-8) !important; /* Elementor sets this element's own margin via an inline/generated rule at the same specificity as this ID selector -- same evidenced-exception pattern as sections 1-3. */ } @media (max-width: 767px) { body.home .elementor-element-206deca, body.home .elementor-element-4e510a6, body.home .elementor-element-f3001e1 { padding: var(--tsc-space-6) !important; } }