/* AUTO-GENERATED from qa-fixes-case-studies.css via rtlcss. Do not edit by hand. Loaded only on AR pages by inc/i18n-setup.php. */ /* ========================================================================== qa-fixes-case-studies.css — /case-studies/ page parity overrides -------------------------------------------------------------------------- Created 2026-05-02 from compare-page.mjs results (3 mismatches in baseline). Each rule scoped to `.rp-case-studies` or `body.page-template-page-case-studies`. PHP edits (inc/hero-content-bindings.php): - Added 'case-studies' to $no_gradient_slugs so hero shortcode emits ONLY the 3 base classes (no _bg_extra_layer / rounded-bottom / bg-light-blue / adjust-padding) matching live's bare-wrapper hero. Same pattern as remotepass-background-check + integrations. No body or template changes — case-studies-body.html is already minimal (just hero + JS-rendered card grid + brands bar + stats). ========================================================================== */ /* ============ §A. WHITE-BG-MASK — hide on case-studies ================== RECURRING-ISSUES.md §2. Standard recurring fix. ========================================================================== */ .page-template-page-case-studies .white-bg-mask, .page-template-page-case-studies .new-footer-white-bg-mask, .rp-case-studies ~ * .white-bg-mask, .rp-case-studies ~ * .new-footer-white-bg-mask { display: none !important; } /* ============ §B. HERO GRADIENT — bare-wrapper variant w/ 20% stop ====== Live's hero on /case-studies/ renders with ONLY the 3 base classes (`.hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg`) — no `_bg_extra_layer`. PHP shortcode now emits 'no-gradient' for this slug. But live still has a linear-gradient bg-image with 20% stop. Same pattern as qa-fixes-background-check.css §B and qa-fixes-integrations.css §B. ========================================================================== */ .rp-case-studies .hero_double_section.new_rp_hero_double_section.new_rp_hero_double_section_bg { background-image: linear-gradient(rgba(228, 235, 254, 0), rgb(228, 235, 254) 20%, rgb(228, 235, 254)); background-position: 100% 0; background-repeat: repeat; background-size: auto; background-attachment: scroll; } /* ============ §C. CASE-STUDIES CARD GRID — restore display: grid ========= Cowork-style visual issue caught by the page-height delta probe: pageHeight 4883 (live) vs 8521 (local) — 3638px taller on local. Root cause: card grid container `.cs-collection-list` (alias `#cs-card-grid` / `.blogs-index.collection-list`) renders `display: block` on local, so the 9 case-study cards stack as single column, each at 1252px wide × 544px tall. Live renders `display: grid; grid-template-columns: 396px 396px 396px; gap: 45.5px 32px`, so cards lay out 3-up at 396×520 each. The `grid-template-columns: 1fr 1fr 1fr` is already set on local (probably from migration.css or a Webflow rule) — but `display` is `block` instead of `grid`. Force grid + the gap. ========================================================================== */ .rp-case-studies .cs-collection-list, .rp-case-studies .blogs-index.collection-list, .rp-case-studies #cs-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 45.5px 32px; } /* 2026-07-21: responsive breakpoints missing from RTL file (added to LTR after generation) */ @media (max-width: 991px) { .rp-case-studies .cs-collection-list, .rp-case-studies .blogs-index.collection-list, .rp-case-studies #cs-card-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .rp-case-studies .cs-collection-list, .rp-case-studies .blogs-index.collection-list, .rp-case-studies #cs-card-grid { grid-template-columns: 1fr; } } /* ============ §D. STATS-MOSAIC INNER CONTAINER — strip 24px padding ===== Section "150+ countries / 20,000+ customers / 200+ in-house experts" inner `.rp-container.new-rp-section-vertical-scroll-container` reports padding=0 24px on local vs 0 on live. The 24px L+R padding compresses the 3-col mosaic. Page-scoped override. ========================================================================== */ .rp-case-studies .new-rp-section-vertical-border-slider-section .rp-container.new-rp-section-vertical-scroll-container { padding: 0; } /* ============ §E. CARD CONTENT-CONTAINER mt2 — restore 1.39em gap ======= Phase 2-case-studies-visual (2026-05-02): each card's inner `.mt2.cs-blog-item-card-content-container` renders with margin-top: 0 on local vs 1.39em (= 18.07px) on live. Live's gap comes from migration.css:2640 `.rp-section .mt2 { margin-top: 1.39em }` — the .cs-collection-list grid sits inside an `.rp-section` ancestor on live but the same chain doesn't fire on local because of how the WP template-part wrapping breaks the cascade (the `.rp-section` ancestor doesn't actually exist in this DOM path on either page — but live's render engine somehow applies the rule, possibly via an implicit wrapper from an older migration step). Result: local cards are 475px tall while live's are 512px (37px shorter). The 18.07px gap accounts for half of the delta; the rest is due to live's broken logo+arrow images reserving more space than their actual rendered size on local. Fix: page-scoped rule replicating the canonical `.rp-section .mt2` margin-top, narrowed to the case-studies card content-container. ========================================================================== */ .rp-case-studies .cs-collection-list .mt2.cs-blog-item-card-content-container { margin-top: 1.39em; } /* The thumb-wrap inside each card also has margin-bottom: 18.07px on live but 0 on local. Both gaps add up because the parent is `display: flex` (via `w-inline-block`) so margins don't collapse — each sibling's vertical margin is preserved. Adding both restores the full 36.14px effective gap and brings card height from 493 → ~512 to match live. */ .rp-case-studies .cs-collection-list .thumb-wrap.cs-thumb-wrap { margin-bottom: 1.39em; } /* ============ §F-pre. Stats card bg + mobile brands — missing from RTL ===== 2026-07-21: these rules were added to LTR after RTL auto-generation. ========================================================================== */ .rp-case-studies .cs-mosaik-item-card { background-color: #E4EBFE; } @media (max-width: 767px) { .rp-case-studies .new-listed-brands-section { background-color: #E4EBFE; } .rp-case-studies .new-listed-brands-sub-section { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 24px; } } /* ============ §F. RTL card — flip arrow + align text right ================ 2026-07-21: JS now outputs Arabic desc + اقرأ المزيد on AR pages. Arrow icon points right (→) — in RTL it must point left (←). Text in cards inherits dir="rtl" from the .rp-ar wrapper so alignment is handled automatically; explicit text-align:right added as a safeguard. ========================================================================== */ .rp-case-studies.rp-ar .rp-blog-item-link-read-more-arraw { transform: scaleX(-1); } .rp-case-studies.rp-ar .rp-blog-item-link-container { flex-direction: row-reverse; } .rp-case-studies.rp-ar .cs-new-rp-p, .rp-case-studies.rp-ar .rp-blog-item-link-read-more { text-align: right; } /* -------------------------------------------------------------------------- Cosmetic-only floor (compare 2026-05-02, post §A–§D): trajectory 3 → 2. Best parity on this project — pageHeight delta 14px (live 4883 vs local 4869 — local is even SLIGHTLY SHORTER, not taller). Residual: 1. whiteBgMaskHidden TRAP per RECURRING-ISSUES §2. 2. pageHeight delta 14px — informational, statistical noise. Zero heading / row / section structural mismatches. §C alone collapsed the original 3638px page-height delta by restoring the 9-card grid from single-column stack to 3×3 layout. -------------------------------------------------------------------------- */