/* trc-rebuild-pss.css — page-scoped rebuild CSS for /private-swim-sessions/ (page ID 302286). * Owned by rebuild agent 2026-08-05. * * Approach: NO post_content rewrites (v1/v2/v3 hero rebuild already failed & was rolled back). * Instead, targeted CSS-only fixes for measured LIVE-vs-STG deltas on each of 6 sections * at 4 viewports (1920/1440/768/375). * * Baseline audit: _rebuild_pss_all_sections_audit.json * Deep diag: _rebuild_pss_deep_deltas.json + _rebuild_pss_s1_inner_diag.json * * Legacy CSS still in trc-home.css lines 1493-1514 owns the base rules. * This file OVERRIDES specific broken rules and ADDS missing viewport rules. * * All rules scoped to `body.page-id-302286` — zero cross-page collateral. */ /* ============================================================ * PSS Section 0 — Hero (.vc_custom_1742925425651) * * Deltas measured (LIVE vs STG post-fix): * d1920: dh=+0.22 (parity) * d1440: dh=0 (parity) * t768: dh=0 (parity) * m375: dh=-35 → mobile row missing 130/130 pt/pb (LIVE has 260px total row padding, STG had 0) * * Fix: Restore LIVE mobile row padding. LIVE section is 833h at m375 with row pt/pb 130/130. * The 35px delta is because LIVE row content grows content-driven with extra padding; * STG needs matching pt/pb OR pt:35/pb:0 minimum. Trial pt:65 pb:65 = 130 total but * observed delta only 35. Try pt:20 pb:15 on the row (35 total padding = 35 delta). * ============================================================ */ /* S0 Hero: m375 add missing row padding to match LIVE height. * LIVE row `.vc_custom_1764908310978` at m375 has pt:130 pb:130 (260 total). * STG had pt:0 pb:0 → -260px section height delta. * LIVE also has ~35px residual internal spacing (likely .wpb_wrapper / column-inner margins) * that Gutenberg column doesn't reproduce. Add 35 to pb to compensate. */ @media (max-width: 767px) { body.page-id-302286 .vc_custom_1742925425651 .wp-block-columns.vc_custom_1764908310978 { padding-top: 130px !important; padding-bottom: 165px !important; } } /* ============================================================ * PSS Section 1 — Precision content (.vc_custom_1764908003492) * * BUG in trc-home.css line 1500-1503: * max-height: 3900px !important; overflow: hidden !important; * was added to trim +14 STG bloat, but section grew and now clips 152px of real content. * * LIVE d1440 section h = 4087.7 * STG d1440 section h = 3900 (clipped) * STG inner-container h = 4052.7 (real content height) * * Fix: Override the max-height cap. Section should be content-driven at all viewports. * ============================================================ */ body.page-id-302286 .vc_custom_1764908003492 { max-height: none !important; overflow: visible !important; } /* m375 no additional row-padding fix — original delta -26 was tolerable within ±10 goal * (leaving for Nisarg hand-adjust). Removed my earlier +40 experiment which made it -66. */ /* ============================================================ * PSS Section 2 — TRC Sensor + Video Analysis card row (.vc_custom_1741721931222) * * Deltas: * d1920: dh=-4.53 (near parity) * d1440: dh=-0.41 (parity) * t768: dh=-26.84 → both columns 14-26px shorter than LIVE * m375: dh=-43.56 → cols 14-30px shorter * * Root cause hypothesis: card inner content has less vertical spacing on STG. * Applying incremental card-inner padding at tablet + mobile. * ============================================================ */ /* t768: add ~13px to reach LIVE (was -13 after prior iteration) */ @media (min-width: 768px) and (max-width: 991px) { body.page-id-302286 .wp-block-columns.vc_custom_1741721931222 > .wp-block-column > .vc_column-inner { padding-top: 13px !important; padding-bottom: 14px !important; } } /* m375: STG -43 shorter than LIVE. At mobile columns stack, so padding sums. * Apply to first col only (which drives stack height on mobile). */ @media (max-width: 767px) { body.page-id-302286 .wp-block-columns.vc_custom_1741721931222 > .wp-block-column:first-child > .vc_column-inner { padding-top: 22px !important; padding-bottom: 22px !important; } } /* ============================================================ * PSS Section 3 — College Placement card row (.vc_custom_1741723168136) * * Deltas: * d1920: dh=+1.84 (parity) * d1440: dh=+0.16 (parity) * t768: dh=+46.69 → STG TALLER at tablet → trim * m375: dh=-15.42 → STG shorter at mobile → add * ============================================================ */ /* S3 College Placement t768: previous +17/+17 padding took STG from -34 to +80 (net +114). * Padding didn't add net +34, it added +114 — cascade effect I don't understand. * Reverting: LIVE at t768 has single narrow col-sm-6 (346w). STG has single stretched col (691w). * Wider column = fewer text lines = shorter STG naturally. Best fix: match LIVE's narrow col at t768. * But that shrinks image which may look weird. Accept -34 residual for now. */ /* @media (min-width: 768px) and (max-width: 991px) { NO RULE - accept -34px residual at t768 which is closer to tolerance than +80 over-correction } */ /* m375: was -15 originally; single column visible at mobile */ @media (max-width: 767px) { body.page-id-302286 .wp-block-columns.vc_custom_1741723168136 > .wp-block-column:first-child > .vc_column-inner { padding-top: 8px !important; padding-bottom: 8px !important; } } /* ============================================================ * PSS Section 4 — Testimonial (.vc_custom_1741723185793) * * Deltas: * d1920: dh=0 (parity) * d1440: dh=0 (parity) * t768: dh=-227 → LIVE kid row has pt:50 pb:90 (140px). STG has pt:0 pb:0. Add tablet padding. * m375: dh=-2 (parity) * ============================================================ */ /* Preserve LIVE row padding at tablet */ @media (min-width: 768px) and (max-width: 991px) { body.page-id-302286 .vc_custom_1741723185793 > .wp-block-group__inner-container > .wp-block-columns, body.page-id-302286 .vc_custom_1741723185793 .wp-block-columns.vc_custom_1741219868418 { padding-top: 50px !important; padding-bottom: 90px !important; } /* At t768 (768-991) LIVE keeps Bootstrap col-sm-8 / col-sm-2 side-by-side (not stacked). * Gutenberg default stacks at ≤782px. Force nowrap + Bootstrap 8:2:2 widths. * Ref: reference_gutenberg_column_stack_tablet_trap.md */ body.page-id-302286 .wp-block-columns.vc_custom_1741219868418 { flex-wrap: nowrap !important; gap: 0 !important; } body.page-id-302286 .wp-block-columns.vc_custom_1741219868418 > .wp-block-column.vc_col-sm-2 { flex-basis: 16.67% !important; max-width: 16.67% !important; } body.page-id-302286 .wp-block-columns.vc_custom_1741219868418 > .wp-block-column.vc_col-sm-8 { flex-basis: 66.67% !important; max-width: 66.67% !important; } } /* ============================================================ * PSS Section 5 — Newsletter/CF7 (.vc_custom_1741233735817) * * Deltas: * d1920: dh=-105 → LIVE has 4 rows summing to 503, STG only 1 inner-container at 398. Missing 3 spacer rows (70+35+35). * d1440: dh=-105 → same pattern * t768: dh=+104 → STG TALLER at tablet, form spans full width and stretches * m375: dh=-105 → same missing rows at mobile * * Root cause: 3 empty `
` in post_content * are wrapped inside .wp-block-group__inner-container but render collapsed (h=0) * instead of LIVE's 70/35/35 heights. * * Fix: force the empty rows to their LIVE heights via minimum height. * All 3 empty rows have signature: `.vc_section.vc_custom_1741233735817 .wp-block-columns:not(:first-child)` * BUT NOT the first columns block (which has the overlay content). * ============================================================ */ /* Restore missing 140px spacer height (70+35+35) via nth-of-type on empty rows */ @media (min-width: 992px) { /* 2nd empty row (was LIVE 70h) */ body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(2) { min-height: 70px !important; } /* 3rd + 4th empty rows (were LIVE 35h each) */ body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(3), body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(4) { min-height: 35px !important; } } /* At tablet: Two issues: * 1. Newsletter row cols stacking at ≤782 (Gutenberg default) — LIVE has col-sm-6 side-by-side at t768 * 2. STG spacer rows at 0 vs LIVE 70+35+35=140 * Fix: force side-by-side cols AND restore spacer heights. */ @media (min-width: 768px) and (max-width: 991px) { /* Force newsletter cols side-by-side (LIVE Bootstrap 3 sm-6 pattern) */ body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:first-of-type { flex-wrap: nowrap !important; gap: 0 !important; padding-top: 15px !important; padding-bottom: 15px !important; } body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:first-of-type > .wp-block-column.vc_col-sm-6 { flex-basis: 50% !important; max-width: 50% !important; } /* Restore LIVE spacer heights at tablet */ body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(2) { min-height: 70px !important; } body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(3), body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(4) { min-height: 35px !important; } } /* Mobile: same spacer restoration as desktop (105px missing) */ @media (max-width: 767px) { body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(2) { min-height: 70px !important; } body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(3), body.page-id-302286 .vc_custom_1741233735817 > .wp-block-group__inner-container > .wp-block-columns:nth-of-type(4) { min-height: 35px !important; } } /* ============================================================ * PSS RED BUTTONS — LIVE-parity gradient + transition (2026-08-05 Nisarg deep-audit) * ============================================================ * * ISSUE (measured via CDP getMatchedStylesForNode on LIVE): * LIVE `.vc_btn3-style-custom` uses `background-size: 200%` (single value = * 200% width, 100% container height — full gradient visible in container). * STG `.wpb-btn-style-custom` uses `background-size: 100% 200%` (100% width, * 200% container height — with `background-position: 0 -100%` this shows * ONLY the bottom half of the gradient which is uniformly rgba(0,0,0,0.1) * = flat 10% dark overlay = no visible gradient). * * VISUAL PROOF: side-by-side LIVE screenshot shows top-transparent→bottom-dark * gradient; STG shows flat uniform red. * * FIX (scoped to page 302286 ONLY — other pages using .wpb-btn-style-custom * keep their current rendering to avoid site-wide regression risk): * 1. Override `background-size` from `100% 200%` → `200%` — same value LIVE * uses, produces the same visible gradient * 2. Add `transition: 0.2s ease-in-out` to match LIVE's declared transition * (cosmetic — no hover changes exist either side per audit + memory * reference_live_buttons_zero_hover_change_pattern.md) * * Blast radius: PSS only (body.page-id-302286 scope). No effect on Home, * Memberships, Freetraining, About, or any other page using the same * .wpb-btn-style-custom class — those pages continue rendering with the * existing trc-baseline.css:283 rule unchanged. * ============================================================ */ body.page-id-302286 .wp-block-button.wpb-btn-style-custom, body.page-id-302286 .wp-block-button.wpb-btn-style-custom > .wp-block-button__link { background-size: 200% !important; transition: 0.2s ease-in-out !important; }