/* * RTL overrides for right-to-left locales (Arabic). * * Loaded after main.css only when is_rtl() is true. It lives in its own file on * purpose: main.css is a build artifact whose SCSS sources are not in this * repository, so anything written there would be lost on the next design build. * * Flexbox and grid already mirror themselves from dir="rtl" on , and so * does Swiper, which reads the computed direction of its container. What is * listed here is everything main.css pins with a physical property: absolute * offsets, one-sided padding and margins, left-aligned text, and the two * direction-based layout tricks. * * Sections are ordered to match main.css. */ /* ── Typography ──────────────────────────────────────────────────────────── */ /* * Neither brand font ships Arabic glyphs, so Arabic copy would fall back to * whatever sans-serif the device happens to have. * * main.css sets font-family in 209 places, all of them naming "Inter" or * "Plus Jakarta Sans". Rather than override all 209 - a list that goes stale the * moment the design build changes - IBM Plex Sans Arabic is declared UNDER BOTH * BRAND NAMES, restricted to the Arabic unicode ranges. The browser then picks * it per character: Arabic renders in Plex, Latin inside the same paragraph * (brand names, URLs, numbers) still renders in the real brand face. * * Self-hosted rather than pulled from Google Fonts, because the aliasing needs * control over the family name in the @font-face rule. SIL Open Font License, * see assets/fonts/LICENSE-IBM-Plex-Sans-Arabic.txt. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-600.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-700.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-600.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-700.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011; } /* * Arabic sits on a taller x-height and carries ascenders, descenders and * diacritics that the Latin leading of this theme crops. A modest bump keeps * the vertical rhythm without reflowing the layout. */ body { line-height: 1.75; } /* Latin-only values must not be reordered by the bidi algorithm. */ a[href^="tel:"], a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; } /* * Stat figures ("100+", "-34%", "+97") are digits and signs, and the page * direction moves a sign to the far side of its number: "+100", "34%-". Setting * the figure LTR would fix that but scramble a translated Arabic unit, and it * would also turn its alignment and overflow to the wrong side of the column. * A left-to-right mark at each end binds a leading or trailing sign to the * digits and leaves everything else to the page direction. Matched by name: * counter containers such as .blog-hero-section__counter hold Arabic labels. * Some case studies leave a value empty; the marks alone would give it a full * line box, so empty values are skipped and collapse as they do in SK. */ .numbers-section__value:not(:empty)::before, .numbers-section__value:not(:empty)::after, [class*="__stat-value"]:not(:empty)::before, [class*="__stat-value"]:not(:empty)::after, .blog-hero-section__counter-value:not(:empty)::before, .blog-hero-section__counter-value:not(:empty)::after { content: "\200E"; } /* * Arabic is a joined script: tracking pulls its letters apart instead of * airing them out. The eyebrow labels, footer column titles and card * categories are letter-spaced for Latin capitals only. */ [class*="label"], .footer__col-title, .numbers-section__title, .blog-card__category, .portfolio-single-hero-section__tag { letter-spacing: 0; } /* * The body line-height above never reaches most text: every component in * main.css sets its own, tuned for Latin at 1.0-1.15. Arabic stacks dots, * hamza and harakat above and below the line, and at that leading one line's * marks sit on the next line's descenders. Text blocks get 1.6, headings 1.3. * Scoped to html[dir=rtl] to outrank main.css's two-class selectors. */ html[dir="rtl"] p, html[dir="rtl"] [class*="__text"], html[dir="rtl"] [class*="__desc"], html[dir="rtl"] [class*="__subtitle"] { line-height: 1.6; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] [class*="__title"] { line-height: 1.3; } /* * Arabic has no italic, and the Arabic face ships none: the browser would slant * the glyphs mechanically, which reads as a rendering fault, not as emphasis. */ html[dir="rtl"] em, html[dir="rtl"] i, html[dir="rtl"] cite, html[dir="rtl"] blockquote { font-style: normal; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ /* * Arrows and chevrons point along the reading direction, so they mirror. * * The chevron is inlined in 35 templates as a 6x11 SVG, which the attribute * selector picks out exactly - flipping every icon inside a button instead would * also mirror decorative glyphs that must stay as drawn. */ svg[width="6"], .btn--arrow svg, .services-section__card-arrow svg, .header__megamenu-card-arrow svg, .service-subservices-section__arrow svg, .vacancies-section__link svg { transform: scaleX(-1); } /* ── Header ──────────────────────────────────────────────────────────────── */ .header__megamenu-card-title span { margin-left: 0; margin-right: 6px; } .header__megamenu-card-tags__item { text-align: right; } .header__mobile-nav-item--has-sub .header__mobile-nav-link svg { margin-left: 0; margin-right: auto; } .header__mobile-sub { padding: 0 16px 24px 0; } /* ── Footer ──────────────────────────────────────────────────────────────── */ /* * The banner is drawn with the swan at the magenta end of the gradient, facing * the copy. Moving the swan to the left is not enough: the gradient and the * swan turn round with it. The swan in banner-image.svg is the logo mark * already mirrored to face left, so flipping it back is the logo as drawn. */ .footer__cta-inner { background-image: linear-gradient(268.2deg, #32E0C4 -3.91%, #7A70D0 13.99%, #7606AF 50.41%, #C200DC 99.19%); } .footer__cta-inner:after { right: auto; left: 0; transform: scaleX(-1); } /* ── Marquee ─────────────────────────────────────────────────────────────── */ /* * The logo track is wider than the screen. In RTL it hangs off the left edge, * so the default slide to -50% drags it out of view and leaves the strip empty * for half of every loop. Sliding the other way shows the second copy of the * logos exactly as the LTR loop does. */ .marquee-section__track { animation-name: marquee-rtl; } @keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } /* ── Text + image section ────────────────────────────────────────────────── */ /* * main.css reverses this row by flipping `direction` rather than by reordering * flex items, which inverts once the page itself is RTL. Swap both halves so * "reversed" keeps meaning "the other way round from the default row". */ .text-image-section--reversed .text-image-section__inner { direction: ltr; } .text-image-section--reversed .text-image-section__inner > * { direction: rtl; } .text-image-section__content ul, .text-image-section__content ol { padding-left: 0; padding-right: 16px; } /* ── Services ────────────────────────────────────────────────────────────── */ /* The card arrow turns 45 degrees on hover; mirrored, it turns the other way. */ .services-section__card:hover .services-section__card-arrow { transform: rotate(-45deg); } /* ── Reviews ─────────────────────────────────────────────────────────────── */ /* * rich-content.css pins the client logo over the right half of the card * footer. In RTL the author moves into that half, so the logo takes the left. */ .reviews-section .reviews-section__card-icon { right: auto; left: 0; object-position: left center; } /* ── Contact form ────────────────────────────────────────────────────────── */ /* The chevron sits where the selected text starts in RTL; move it to the end. */ .contact-section__form-select { background-position: left 16px center; padding-left: 40px; } /* * Browsers keep a phone field left-to-right in any page direction, which is * right for the digits but leaves this one field aligned to the far side of * its label. Only the alignment follows the page. */ .contact-section__form-input[type="tel"] { text-align: right; } /* ── Newsletter ──────────────────────────────────────────────────────────── */ .newsletter-section__form input { padding: 14px 36px 14px 70px; } .newsletter-section__form .subscribe-status { padding: 12px 36px 0 0; } .newsletter-section__form .btn { right: auto; left: 6px; } /* ── Blog hero ───────────────────────────────────────────────────────────── */ .blog-hero-section__counter-label { text-align: right; } .blog-hero-section__subscribe input { padding: 14px 36px 14px 70px; } .blog-hero-section__subscribe .subscribe-status { padding: 14px 38px 0 0; } .blog-hero-section__subscribe .btn { right: auto; left: 6px; } /* ── Featured post ───────────────────────────────────────────────────────── */ .featured-post-section__media { margin-right: 0; margin-left: 20px; } /* ── Blog listing ────────────────────────────────────────────────────────── */ .blog-listing-section__group { padding-left: 0; padding-right: 24px; } @media (min-width: 1270px) { .blog-listing-section__group { padding-left: 0; padding-right: calc((100vw - 1270px) / 2 + 24px); } } .blog-listing-section__group-header { padding-right: 0; padding-left: 40px; } @media (max-width: 1024px) { .blog-listing-section__group-header { padding-right: 0; padding-left: 24px; } } @media (max-width: 768px) { .blog-listing-section__group-header { padding-left: 0; } } /* ── Article content ─────────────────────────────────────────────────────── */ .article-content-section__wysiwyg ul, .article-content-section__wysiwyg ol { padding-left: 0; padding-right: 40px; } .article-content-section__wysiwyg blockquote { border-left: none; border-right: 3px solid #8A3FFC; border-radius: 8px 0 0 8px; } /* ── Contact info ────────────────────────────────────────────────────────── */ .contact-info-section__card-icon { margin: 0 12px 42px auto; } /* ── Portfolio ───────────────────────────────────────────────────────────── */ .portfolio-process-section__step:not(:last-child)::after { content: "←"; right: auto; left: -12px; } /* ── Vocabulary ──────────────────────────────────────────────────────────── */ /* * The Arabic alphabet has 28 letters. At 42px each the bar outgrows the * container on every desktop width, and main.css only lets it scroll below * 1024px, so the outer letters end up off-screen and unreachable. Above that * breakpoint the circles shrink just enough to fit instead. */ @media (min-width: 1024px) { .vocabulary-alpha__link { flex: 0 1 42px; width: auto; height: auto; min-width: 0; aspect-ratio: 1; } /* Shrinking circles fill the bar edge to edge; keep SK's inset at the caps. */ .vocabulary-alpha__inner { padding-inline: 12px; } } .vocabulary-hero__search input { padding: 12px 64px 12px 24px; } .vocabulary-hero__search button { left: auto; right: 27px; } /* ── Service subservices ─────────────────────────────────────────────────── */ .service-subservices-section__card-icon { left: auto; right: 32px; } .service-subservices-section__arrow { right: auto; left: 32px; } /* The card arrow lifts to 45 degrees on hover; mirrored, it lifts the other way. */ .service-subservices-section__card:hover .service-subservices-section__arrow { transform: rotate(-45deg); } /* ── Text pages ──────────────────────────────────────────────────────────── */ .text-page-section__content ul, .text-page-section__content ol { padding-left: 0; padding-right: 40px; } /* ── Academy ─────────────────────────────────────────────────────────────── */ .academy-text-section__content ul { padding-left: 0; padding-right: 20px; } .academy-text-section__title { padding-right: 0; padding-left: 40px; } /* ── Search ──────────────────────────────────────────────────────────────── */ /* main.css has no rules for the search page; Arabic descenders of the heading would otherwise reach into the first result line. */ .search-results__title { margin-bottom: 24px; } /* ── Filter modal ────────────────────────────────────────────────────────── */ .filter-modal__item { text-align: right; } /* ── Rich content (rich-content.css) ─────────────────────────────────────── */ /* * rich-content.css indents top-level lists with an !important padding-left, * which outranks every section rule above. Without matching !important here * the bullets of glossary, post and course copy hang outside the column. */ .ds-rich-content > ul, .ds-rich-content > ol, .ds-rich-content > .wp-block-list { padding-left: 0 !important; padding-right: 24px !important; } /* ── Academy / contact hero stats ────────────────────────────────────────── */ /* * The items shrink (min-width:0) to make room for a long Arabic label, until the * 64px figures are wider than their column and run into each other. Keep the * figures whole, let the labels wrap instead, and align the columns at the top. */ .contact-hero-section__stats { align-items: flex-start; } .contact-hero-section__stat-value { white-space: nowrap; } .contact-hero-section__stat-label { max-width: 14em; } /* ── Portfolio figures and hero ──────────────────────────────────────────── */ @media (max-width: 768px) { /* "+500 ألف" must not break between the figure and its unit. */ .portfolio-results-section__stat-value { white-space: nowrap; } /* * main.css places the base rule (align-items:flex-end) after this mobile one, * so the intended start alignment is lost; in RTL flex-end is the left edge. */ .portfolio-hero-section__featured-content { align-items: flex-start; } } /* ── Article table of contents ───────────────────────────────────────────── */ /* Wrapped Arabic entries at line-height 1 put one line's marks on the next. */ .article-content-section__toc-link { line-height: 1.5; } /* ── Cookie consent (CookieScript, injected by GTM) ──────────────────────── */ /* * The banner has no Arabic version yet and renders its Slovak/English text; in * an RTL page the sentence punctuation lands at the wrong end. Keep it LTR until * Arabic is enabled in the CookieScript dashboard. */ #cookiescript_injected, #cookiescript_injected_wrapper { direction: ltr; text-align: left; }