/* Arabic RTL overrides for the emplifi.io homepage snapshot. Loaded last, after the theme styles. dir=rtl on handles most flow; this file fixes typography, text alignment, directional icons and a few physically-positioned elements. */ /* ---------- Arabic typography ---------- */ /* Cairo everywhere (matches /resources/football-social-intelligence-hub-ar-bold). */ body, body *:not(svg):not(path):not(use) { font-family: "Cairo", sans-serif !important; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .stat, .large-text, .btn, .section-heads h2, .section-heads h5 { font-weight: 700; } h1, .h1 { font-weight: 900; letter-spacing: 0; } /* Arabic reads better with a touch more line-height */ p, .wysiwyg p, .description, .large-text { line-height: 1.85; } h1, h2, h3, .h2, .h4 { line-height: 1.45; } /* ---------- RTL base ---------- */ html[dir="rtl"] body { direction: rtl; text-align: right; } .wysiwyg, .wysiwyg p, .text-side, .column, .stats, .bot, .top { text-align: right; } .section-heads.center, .section-heads.center * { text-align: center; } /* ---------- Hero, mirrored for RTL: the device/video sits on the LEFT as an inset rounded panel, Arabic copy on the RIGHT over solid navy. The video itself is NOT scaleX-flipped — its English UI text would read backwards — so instead of full-bleed we box it into the left half. Desktop only; on mobile the theme already stacks text above media. ---------- */ @media screen and (min-width: 961px) { section.hero-fullscreen.has-media { background: #000066 !important; } section.hero-fullscreen .image.do-computer { min-width: 0 !important; width: 47% !important; left: 32px !important; right: auto !important; top: 50% !important; height: calc(100% - 64px) !important; transform: translateY(-50%) !important; border-radius: 24px; overflow: hidden; } section.hero-fullscreen .image.do-computer video, section.hero-fullscreen .image.do-computer img { object-position: 72% center !important; } } .hero-fullscreen .text-side { direction: rtl; text-align: right; max-width: 600px; } .hero-fullscreen .text-side .button-container { justify-content: flex-start; } /* RTL + smaller so the headline fits in 4 lines, not 6. */ .hero-fullscreen .text-side h1 { text-align: right !important; direction: rtl; font-size: 33px !important; line-height: 1.42 !important; } .hero-fullscreen .text-side .wysiwyg, .hero-fullscreen .text-side p { text-align: right; } /* ---------- Header: keep utility items on one line; space the Support icon ---------- */ header .menu li > a, header nav li > a { white-space: nowrap; } header a:has(> .menu-image-title) { display: inline-flex; align-items: center; gap: 7px; } /* ---------- Crayola featured story card: mirror the beige panel, the diagonal curve and the clip/ball to the LEFT, to sit with the woman (who flips via flex). ---------- */ section.featured-customer-stories .customer-stories.columns .customer-story.column:nth-of-type(1)::before { left: 0; right: auto; } section.featured-customer-stories .customer-stories.columns .customer-story.column:nth-of-type(1) .curve { left: auto; right: 65%; transform: scaleX(-1); background-position: bottom right; } section.featured-customer-stories .customer-stories.columns .customer-story.column:nth-of-type(1) .ball { left: 0; right: auto; } /* the clip loop + orange dot live inside .ball — mirror their horizontal offsets */ section.featured-customer-stories .customer-stories.columns .customer-story.column:nth-of-type(1) .ball::before { left: auto; right: 55%; transform: rotate(-35deg); } section.featured-customer-stories .customer-stories.columns .customer-story.column:nth-of-type(1) .ball::after { left: auto; right: 75%; } /* Crayola logo + author bullet sit on the right now */ section.featured-customer-stories .customer-stories.columns .customer-story.column:nth-of-type(1) .left .logo-side img { object-position: bottom right; } section.featured-customer-stories .customer-stories.columns .customer-story.column:nth-of-type(1) .left .author div span { padding-left: 0; padding-right: 20px; } section.featured-customer-stories .customer-stories.columns .customer-story.column:nth-of-type(1) .left .author div span::before { left: auto; right: 7px; } /* ---------- Industry tabs (Retail & eCommerce pills): the theme tucks the label pill under the icon circle with physical LTR values — flat-left/ rounded-right corners, translateX(-28px), margin-right:-28px. In RTL the pill sits LEFT of its icon, so mirror all of it: flat edge on the RIGHT (under the icon), rounded end on the LEFT, tuck/pull-back flipped. ---------- */ section.industry-customer-tabs .tab-head .tab-name { border-radius: 48px 0px 0px 48px; transform: translateX(28px); } section.industry-customer-tabs .tab-head.active .tab-name { margin-right: 0; margin-left: -28px; } section.industry-customer-tabs .tab-head .tab-name span { left: auto; right: 5px; } @media screen and (max-width: 840px) { section.industry-customer-tabs .tab-head.tab-head-mobile .tab-name { padding-right: 0px; padding-left: 24px; } } /* Keep Latin numbers / stats rendering left-to-right inside RTL text */ .stat { direction: ltr; unicode-bidi: isolate; } /* ---------- Results stat tiles: mirror the English layout — the brand logo sits on the RIGHT and the stat block (number + label) on the LEFT, away from it, vertically centred on the same row (instead of colliding with the logo). ---------- */ .content .top { align-items: center; } .content .top .stats { text-align: left !important; padding-left: 0 !important; padding-right: 12px !important; } .content .top .stats .stat, .content .top .stats .description { text-align: left !important; } /* ---------- Directional icons (arrows point the other way in RTL) ---------- */ img[src*="button-arrow"], img[src*="white-arrow"], .arrow img, .btn .arrow, .content .arrow, a.btn::after, .btn-arrow { transform: scaleX(-1); } /* carets / chevrons that are vertical should NOT flip */ img[src*="caret-down"] { transform: none; } /* ---------- "button-arrow" CTAs (Read the full story / Learn more): in RTL the text aligns right like the rest, and the arrow sits on the LEFT, pointing left. ---------- */ .button-arrow { text-align: right !important; padding-left: 55px !important; padding-right: 0 !important; } .button-arrow::before { left: 24px !important; right: auto !important; transform: scaleX(-1) !important; } /* ---------- Lists: bullet/padding side ---------- */ ul, ol { padding-right: 1.2em; padding-left: 0; } /* wysiwyg checkmark bullets are pinned absolute-left; move them to the line start (right) in RTL */ .wysiwyg ul li { padding-left: 0 !important; padding-right: 25px !important; } .wysiwyg ul li::before { left: auto !important; right: 0 !important; } /* ---------- Footer utility (legal) links: keep separation in RTL ---------- */ /* The theme separates the links with margin-left, which lands on the wrong side in an RTL flex row (first pair renders glued). Mirror it; specificity must match the theme's `.footer-utility ul li:nth-of-type(n+2)` rules. */ footer .footer-utility ul li:nth-of-type(n+2) { margin-left: 0; margin-right: 30px; } @media screen and (max-width: 1200px) { footer .footer-utility ul li:nth-of-type(n+2) { margin-right: 0; margin-top: 6px; } } /* ---------- Bottom demo CTA (page-cta blue-ver): dir=rtl flows the text column to the RIGHT half, but the laptop bg-image stays pinned at left:50% and lands under the text. Move it to the LEFT half, hugging the center. ---------- */ section.page-cta .columns .bg-image { left: auto; right: 50%; } @media screen and (max-width: 1080px) { section.page-cta .columns .bg-image { left: auto; right: 70%; } } section.page-cta .columns .bg-image img { object-position: bottom right; } /* ---------- Footer language dropdown: in RTL the toggle content sits at the LEFT edge of the wide .current-language box (flex-end), but the menu was pinned right:0 — the box's far-right — so it opened detached, mid-footer. Anchor it left, above the toggle, and mirror the item padding. ---------- */ footer .copyright .columns .column.language-side .current-language ul { right: auto; left: 0; text-align: right; } footer .copyright .columns .column.language-side .current-language ul li a { padding: 6px 24px 6px 120px; } /* ---------- Hide the injected floating "English" pill — redundant with the footer language selector. ---------- */ a[aria-label="View in English"] { display: none !important; } /* ---------- Logo marquee (Slick): force LTR so the track fills the row ---------- */ .logo-scroller, .logo-scroller .logo-scroller-slideshow, .logo-scroller .slick-track, .logo-scroller .slick-slide { direction: ltr; }