/* trc-rebuild-memberships.css — page-scoped rebuild CSS for section-by-section native-Gutenberg rebuild. * Owned by rebuild agent for /memberships/. Do not edit manually mid-rebuild. * Created 2026-08-05. * * All selectors are scoped to body.page-id-302275 to prevent site-wide impact. * All !important usage is documented with WHY per Rule 6 (senior WP dev persona). */ /* ========================================================================= * S0 HERO — "UNLOCK YOUR FULL SWIM POTENTIAL" * * LIVE target (measured d1440): * - Section h: 631px, w: full (alignfull cover) * - Row: 1296w × 631h, padding 130/0/130/0, margin 0 72px * - H2 title: 32px/700/lh:35.2 Montserrat, color visible-white via .heading-white span * - P subtitle: 22px/400/lh:37.4 Montserrat, white * - Button: 305×57 bg#D43125 rounded 5px * * STG state pre-fix: * - Used

with lineHeight:1.1 but no explicit fontSize * - Gutenberg h1 default cascades to ~50px → title WAY too big * - Cover minHeight:631 with padding 130/130 → total 891px on desktop * * Fix chain: * (a) PHP _rebuild_memberships_s0.php converts

→

+ fontSize:32px * (b) This CSS enforces heading size + column padding + mobile min-height * ========================================================================= */ /* Font attrs (fs/fw/lh/color/family) now come from sitewide .heading-white / .sub-heading-white classes in trc-baseline.css. Post_content restores the `` + `` wrappers via _fix_mem_hero_restore_span.php. Only margins remain here. */ body.page-id-302275 .trc-memberships-hero .trc-memberships-hero-title { margin-top: 0 !important; margin-bottom: 35px !important; } body.page-id-302275 .trc-memberships-hero .trc-memberships-hero-sub { margin-top: 0 !important; margin-bottom: 35px !important; } /* Cover padding matches LIVE row padding 130/0/130/0 + LIVE section h=631 @ d1440 */ body.page-id-302275 .trc-memberships-hero.wp-block-cover { padding-top: 130px; padding-bottom: 130px; min-height: 631px; } /* WIDEN inner-container to match LIVE row width per viewport. LIVE `.vc_row.vc_custom_1741879932255` uses width:90% pattern: d1920 viewport: row=1728 (90% of 1920), heading w=834 x=111 d1600 viewport: row=1440 (90% of 1600), heading w=690 x=95 d1440 viewport: row=1296 (90% of 1440), heading w=618 x=87 STG cover inner-container defaults to theme.json contentSize (~664) → columns squeeze to 310w → heading wraps too many lines vs LIVE 2 lines. Use width:90% (matches LIVE per-viewport scaling) + max-width safety cap. */ body.page-id-302275 .trc-memberships-hero .wp-block-cover__inner-container { width: 90% !important; max-width: 1728px !important; /* safety cap for ultra-wide viewports */ margin-left: auto !important; margin-right: auto !important; } /* Inner col-inner padding matches LIVE `.vc_column-inner { padding: 0 15px }` */ body.page-id-302275 .trc-memberships-hero .wp-block-columns > .wp-block-column { padding-left: 15px !important; padding-right: 15px !important; } /* Keep cols side-by-side at t768-991 (LIVE Bootstrap `.vc_col-sm-6` behavior). Gutenberg default: .wp-block-columns.is-layout-flex { flex-wrap: wrap } @ max-width:781. Override with higher-specificity selector chain (adds .is-layout-flex + .wp-block-column-is-layout-flow). */ @media (min-width: 768px) and (max-width: 991px) { body.page-id-302275 .trc-memberships-hero .wp-block-columns.is-layout-flex { flex-wrap: nowrap !important; } body.page-id-302275 .trc-memberships-hero .wp-block-columns.is-layout-flex > .wp-block-column { flex-basis: 50% !important; min-width: 0 !important; /* prevent min-content grow forcing stack */ flex-grow: 0 !important; flex-shrink: 1 !important; } /* LIVE row at t768 = 664w. Constrain inner-container. */ body.page-id-302275 .trc-memberships-hero .wp-block-cover__inner-container { max-width: 664px !important; } /* Match LIVE section h=853 at t768 */ body.page-id-302275 .trc-memberships-hero.wp-block-cover { min-height: 853px !important; } } /* Mobile: LIVE m375 section h=740, single column full-width */ @media (max-width: 767px) { body.page-id-302275 .trc-memberships-hero.wp-block-cover { padding-top: 60px; padding-bottom: 60px; min-height: 740px !important; } /* Mobile heading fs: handled by sitewide .heading-white mobile media query */ body.page-id-302275 .trc-memberships-hero .wp-block-cover__inner-container { max-width: 100% !important; } body.page-id-302275 .trc-memberships-hero .wp-block-columns > .wp-block-column { padding-left: 0 !important; padding-right: 0 !important; } /* Hide empty right column on mobile */ body.page-id-302275 .trc-memberships-hero .wp-block-columns > .wp-block-column:last-child:empty { display: none !important; } } /* Font sizes: LIVE keeps 32/22 at ALL viewports (measured). Prior mobile CSS was setting fs:28/18 which shrunk mobile text — remove step-down. */ /* ========================================================================= * S1 INTRO — "SWIM YOUR BEST NO MATTER YOUR GOAL" * * LIVE target (d1440): * - Section h: 564 * - H3 title: 32px/700/lh:38.4 Montserrat (LIVE .heading-default) * - "NO MATTER YOUR GOAL" wrapped in .body-red / .trc-red span → red color * - Video iframe on right col, aspect 16:9 * * Fix: enforce heading + spacing to match LIVE, mobile size step-down * ========================================================================= */ body.page-id-302275 .trc-memberships-intro .trc-intro-heading { font-size: 32px !important; font-weight: 700 !important; line-height: 1.2 !important; font-family: 'Montserrat', sans-serif !important; } @media (max-width: 767px) { body.page-id-302275 .trc-memberships-intro .trc-intro-heading { font-size: 24px !important; } } /* ========================================================================= * S2 PRICING — "JOIN OUR MEMBERSHIP TODAY!" * * LIVE target (d1440): section h=1183, 3 pricing cards in row * - Silver (middle) highlighted with red border ~2px * - Card image + name + features list + prices + JOIN button * * STG state: * - Structure matches (3 cards) * - Slight border/spacing differences on silver * ========================================================================= */ body.page-id-302275 .trc-memberships-pricing .trc-pricing-heading { font-size: 32px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; font-family: 'Montserrat', sans-serif !important; } @media (max-width: 767px) { body.page-id-302275 .trc-memberships-pricing .trc-pricing-heading { font-size: 24px !important; } } /* Silver card red border (highlight variant) */ body.page-id-302275 .trc-memberships-pricing .trc-pricing-highlighted { border: 2px solid #D43125; border-radius: 8px; } /* ========================================================================= * S3 REASONS — "5 REASONS THE RACE CLUB MEMBERSHIP OUTPERFORMS..." * * LIVE target (d1440): section h=691, 3+2 grid of numbered items * * ROW MARGIN FIX (2026-08-05 Nisarg): LIVE `.vc_row.wpb_row.vc_row-fluid` * uses margin:0 5% (measured 94.5/1920=4.92% @ d1920, 70.5/1440=4.9% @ d1440, * 36.9/768=4.8%, 17.25/375=4.6%). STG rows had margin:0/0 — cards stretched * flush to viewport, missing the LIVE inset. Restore 5% side margins. * ========================================================================= */ body.page-id-302275 .trc-memberships-reasons .trc-reasons-row, body.page-id-302275 .trc-memberships-reasons .trc-reasons-row-2 { margin-left: 5% !important; margin-right: 5% !important; } body.page-id-302275 .trc-memberships-reasons .trc-reasons-heading { font-size: 32px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; font-family: 'Montserrat', sans-serif !important; } @media (max-width: 767px) { body.page-id-302275 .trc-memberships-reasons .trc-reasons-heading { font-size: 24px !important; } } /* Numbered pill "01" "02" etc. */ body.page-id-302275 .trc-memberships-reasons .trc-num-pill { display: inline-block; background-color: #D43125; color: #fff; font-weight: 700; padding: 4px 10px; border-radius: 4px; margin-right: 8px; font-size: 14px; } /* ========================================================================= * S4 CTA — "TAKE YOUR SWIMMING TO THE NEXT LEVEL" * * LIVE target: section h=517, BG image with dim overlay ~40% * H3: 50px/700/lh:55 white, centered * * STG state: has dimRatio:40 in block markup (already correct) * ========================================================================= */ body.page-id-302275 .trc-memberships-cta .trc-cta-title { font-size: 50px !important; font-weight: 700 !important; line-height: 1.1 !important; text-align: center !important; font-family: 'Montserrat', sans-serif !important; color: #fff !important; } @media (max-width: 991px) { body.page-id-302275 .trc-memberships-cta .trc-cta-title { font-size: 40px !important; } } @media (max-width: 767px) { body.page-id-302275 .trc-memberships-cta .trc-cta-title { font-size: 30px !important; } } /* CTA button matches LIVE red pill */ body.page-id-302275 .trc-memberships-cta .trc-cta-btn .wp-block-button__link { background-color: #D43125 !important; color: #fff !important; border-radius: 5px !important; padding: 18px 22px !important; /* KAAM-35664 — 22px matches LIVE's ~21px effective side padding (was 25px → button ran ~5px wide) */ font-size: 14px !important; /* KAAM-35664 — LIVE 'Take Your Swimming' CTA measures 14px (hero CTA is 16px); was mis-set to 16px → button ran ~20px wide */ font-weight: 500 !important; font-family: 'Montserrat', sans-serif !important; } /* ========================================================================= * S6 FAQ — accordion via
+ snippet trc-memberships-faq-accordion.php * * DO NOT alter structure — snippet's jQuery slideDown/slideUp already works * (commit c9f0d20f). Only surface-level heading style. * ========================================================================= */ /* (No changes — leave existing snippet CSS as source of truth.) */ /* ========================================================================= * S7 LATEST RELEASES — [latest_two_each count="2"] * * Preserves shortcode output. No structural change needed. Grid style * inherited from theme. * ========================================================================= */