/* 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 product video/dashboard: DO NOT mirror it. `.do-computer` holds the "Command center" product UI (a video with a screenshot poster) — scaleX(-1) makes all its English UI text read backwards. Layout (Arabic copy on the right, media below/beside) is handled by RTL flow + flex order, so the media just needs to render un-mirrored. ---------- */ .hero-fullscreen .image.do-computer, .hero-fullscreen .image.do-computer video, .hero-fullscreen .image.do-computer img { transform: none !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; } /* Stat values mix pure numbers ("73.6%", "+750K") with Arabic units ("8 ملايين+"). A forced `direction:ltr` broke the Arabic ones (rendered "+ملايين 8"). `unicode-bidi: plaintext` picks each value's direction from its own first strong character, so all of them read correctly. */ .stat, .stat .value, .stats .value, .content .top .stat { unicode-bidi: plaintext; } /* ---------- 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; } /* ---------- Footer utility (legal) links: keep separation in RTL ---------- */ .menu-footer-utility-menu li { margin-inline: 9px; } /* ---------- 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; } /* ---------- Forms (Marketo / HubSpot / search): RTL text + right-aligned fields and labels; placeholders read right-to-left. Applies to every page's demo / contact / assessment / newsletter form. ---------- */ .mktoForm, .mktoForm *, form input, form textarea, form select { direction: rtl; } .mktoForm input, .mktoForm textarea, .mktoForm select, form input[type="text"], form input[type="email"], form input[type="tel"], form textarea, form select { text-align: right; } .mktoForm .mktoLabel, .mktoForm label, form label { text-align: right; } .mktoForm input::placeholder, .mktoForm textarea::placeholder, form input::placeholder, form textarea::placeholder { text-align: right; } /* checkbox/consent rows: box on the right of its label */ .mktoForm .mktoCheckboxList, .mktoForm .mktoFieldWrap { text-align: right; } /* ---------- Customer-story slick carousel (product / solutions pages): the snapshot froze slick's LTR translateX, so under dir=rtl the active card is shoved off-screen and clipped, and re-init produces half-cards. It's a testimonial widget, so render ONE story statically: kill the frozen transform + clones and show the first real slide full-width, centred. ---------- */ .customer-story-slider-container { direction: rtl; overflow: hidden; } .customer-story-slider-container .slick-list { overflow: hidden !important; padding: 0 !important; } /* kill the frozen transform, center the single card at its NATURAL width so the image/curve/text proportions the card was designed at are preserved */ .customer-story-slider-container .slick-track { transform: none !important; width: auto !important; left: 0 !important; display: flex !important; justify-content: center !important; } .customer-story-slider-container .slick-slide { display: none !important; float: none !important; } .customer-story-slider-container .slick-slide[data-slick-index="0"] { display: block !important; } /* keep the card's proven geometry: the flex `.columns` must stay LTR so its single 487px `.text-side` column stays on the LEFT (away from the absolutely- positioned image on the right). Only the quote text reads RTL, right-aligned. (Setting the container RTL made the flex column start from the right, over the image.) */ .customer-story-slider-container .customer-story-single, .customer-story-slider-container .customer-story-single .container, .customer-story-slider-container .customer-story-single .columns { direction: ltr; } .customer-story-slider-container .customer-story-single .text-side, .customer-story-slider-container .customer-story-single .wysiwyg, .customer-story-slider-container .customer-story-single p, .customer-story-slider-container .customer-story-single h1, .customer-story-slider-container .customer-story-single h2, .customer-story-slider-container .customer-story-single .author { direction: rtl; text-align: right; } /* carousel arrows aren't wired to a working slick in the snapshot — hide them */ .customer-story-slider-container ~ .slick-arrow, .customer-story-slider-container .slick-arrow, .customer-story-slider-container .slick-dots, .customer-story-nav, .customer-story-arrows { display: none !important; } /* ---------- `.hero-curved` split hero (solutions, careers, company, contact, faqs, product-tours, webinar, women-of-emplifi, socialbakers, comparison pages…): the photo is `position:absolute` on the RIGHT half; the text container spans full width, so RTL right-aligned text lands ON TOP of the photo with the left half empty. Constrain the text to the clean LEFT half (ending before the image at ~48%), Arabic right-aligned within it. ---------- */ @media screen and (min-width: 861px) { .hero-curved .container { max-width: 46% !important; margin-left: 0 !important; margin-right: auto !important; direction: rtl; text-align: right; } .hero-curved .container * { text-align: right; } /* the button row shouldn't stretch full-width */ .hero-curved .container .button-container, .hero-curved .container .buttons { justify-content: flex-start; } } /* ---------- Blog/press hero eyebrow: category + reading-time were two adjacent
in .subheads with no separator, rendering glued ("المدوّنة15 دقيقة قراءة"). Space them with a bullet separator. ---------- */ .subheads { display: inline-flex; align-items: center; flex-wrap: wrap; } .subheads h5 { margin: 0; } .subheads h5:not(:first-child) { margin-inline-start: 14px; } .subheads h5:not(:first-child)::before { content: "•"; margin-inline-end: 14px; opacity: .45; font-weight: 400; } /* ---------- Colored CTA bands with a right-side image (`.prev-callout` on the competitor-comparison pages, `.prev-industry-customer-tabs` on industry pages): EN puts the heading/body/button LEFT with a photo/tablet on the RIGHT. Under dir=rtl the right-aligned text lands ON TOP of the image with the left half empty (heading + body clipped at the right edge, button cut off). Hold the `.columns` flex LTR so the text column stays LEFT and the image RIGHT; the text itself reads RTL right-aligned. Desktop only — mobile stacks. ------- */ @media screen and (min-width: 861px) { .page-cta.blue-ver .columns, section.callout .columns { direction: ltr !important; } .page-cta.blue-ver .columns .column, .page-cta.blue-ver .columns .text-side, .page-cta.blue-ver .columns h1, .page-cta.blue-ver .columns h2, .page-cta.blue-ver .columns p, .page-cta.blue-ver .columns .wysiwyg, section.callout .columns .column, section.callout .columns .text-side, section.callout .columns h1, section.callout .columns h2, section.callout .columns p, section.callout .columns .wysiwyg { direction: rtl !important; text-align: right !important; } }