@charset "UTF-8"; /*! * Case-study carousel — the rules Swiper and Bootstrap do not supply. * * template-parts/case-study-carousel.php is shared markup (About, the homepage, * and the quiz thank-you page all render it), so its CSS lives here instead of * being copy-pasted per consumer — same pattern as logo-marquee.scss and * cta-two-path.scss. Enqueued by rs_enqueue_case_study_carousel() in * functions.php, which every consuming template calls. * * Unscoped on purpose: `.caseStudySwiper` only ever appears inside this one * partial, so there is no other page content for a page-level id/class to * protect against. * * What deliberately stays OUT of this file: arrow/pagination-bullet colour. * Both default to white — main.scss's own unscoped `.caseStudySwiper` rule sets * the bullet fill, and the partial's inline SVGs hardcode `fill="#FFFFFE"` — which * reads fine on About's dark/yellow band. Home repaints both to charcoal in its * own page.scss because its band is light. That is a real per-page difference * driven by each page's surrounding background, not duplication, so it is not * pulled in here. */ .caseStudySwiper { /* Pins the card's own type scale to the root rem, independent of whatever ambient body font-size the host page happens to set. About and Home's body is already 16px (root rem) so this is a no-op there. It matters on the quiz thank-you page: that page's IDs are not in rs_new_design_page_ids() (see template-quiz-thank-you.php's own "CSS REALITY" note), so Elementor's global Kit typography — 20px on — is still live there. Without this, the same 5-line clamp on .case-excerpt renders 1.25x taller purely from inherited font-size, which is exactly the height mismatch this file exists to prevent. `rem`, not a literal `16px`: the root element is 16px on every page that has been checked (including quiz-thank-you), so it is the stable anchor — `body`'s own font-size is what drifts. line-height needs the same treatment and for the same reason: Elementor's Kit CSS sets it in a unit anchored to root rem rather than as a plain unitless factor, so it does not shrink back down just because font-size above was pinned. 1.5 is Bootstrap's own unmodified $line-height-base — what About/Home's line-height already resolves to at their 16px body font, so this is a no-op for them too. */ font-size: 1rem; line-height: 1.5; /* Cards are all the same height, as in production (uniformly 725px at 1440). Swiper sets an explicit height per slide only when told to; with `height:auto` the slides shrink to their own content and the row goes ragged, because one excerpt is much longer than the others. `align-items:stretch` on the wrapper makes every slide take the tallest card's height, and the card then fills its slide so the "Read the Case Study" button stays pinned to the bottom. */ /* The nav arrows are