/* ============================================================ Steer Media — Arabic / right-to-left layer ------------------------------------------------------------ Loaded after css/style.css, and only by the pages under /ar/. dir="rtl" on already mirrors the flex and grid order, the default text alignment and the scrollbar, so this file only has to carry three things: 1. an Arabic typeface, since Inter has no Arabic glyphs 2. typographic repairs — Arabic will not take the tight tracking or the sub-1.0 leading the Latin display type is set with 3. the physical left/right declarations in style.css, which dir does not flip Keeping it separate means the English pages fetch none of it. ============================================================ */ /* ============================================================ 1. TYPEFACE — IBM Plex Sans Arabic, self-hosted ------------------------------------------------------------ Same reasoning as Inter: the file comes off our own origin with a year's immutable cache instead of two external round trips. Arabic subset only, so the unicode-range hands every Latin character (the brand name, the phone numbers, the figures) back to Inter and nothing double-downloads. SIL Open Font Licence 1.1. ============================================================ */ @font-face{ font-family:'Plex Arabic'; font-style:normal; font-weight:300; font-display:swap; src:url(../fonts/plex-arabic-300.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } @font-face{ font-family:'Plex Arabic'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/plex-arabic-400.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } @font-face{ font-family:'Plex Arabic'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/plex-arabic-500.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } @font-face{ font-family:'Plex Arabic'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/plex-arabic-600.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } @font-face{ font-family:'Plex Arabic'; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/plex-arabic-700.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; } :root[dir="rtl"]{ --font:'Plex Arabic','Inter',-apple-system,BlinkMacSystemFont,sans-serif; } /* ============================================================ 2. TYPOGRAPHY REPAIRS ============================================================ */ /* Arabic is a joined script: tracking of any sign prises the letters of a word apart, and the Latin display type here is set as tight as -.05em. There is no selective version of this fix worth maintaining across 2,900 lines of stylesheet, so it goes off everywhere and the few Latin runs left on these pages (the brand name, the figures) simply sit at their natural width. */ [dir="rtl"] *{letter-spacing:normal!important} /* Leading. The Latin display sizes run down to .85, which clips an alif or a descending yaa outright. */ [dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .hero__wordmark, [dir="rtl"] .studio-hero__title,[dir="rtl"] .studio-intro__statement, [dir="rtl"] .approach2__line,[dir="rtl"] .bigquote,[dir="rtl"] .caps__head, [dir="rtl"] .case h3,[dir="rtl"] .cases__head,[dir="rtl"] .csfeat__h, [dir="rtl"] .anim-phrase,[dir="rtl"] .scatter__title,[dir="rtl"] .svc-item span, [dir="rtl"] .contact__title,[dir="rtl"] .work-hero__title, [dir="rtl"] .work-cta__title,[dir="rtl"] .gal-soon h2,[dir="rtl"] .cs-hero__title, [dir="rtl"] .cs-block__h,[dir="rtl"] .cs-shot--split .cs-shot__note h3, [dir="rtl"] .cs-next__t,[dir="rtl"] .jpost h2,[dir="rtl"] .article-hero__title, [dir="rtl"] .article-body h2,[dir="rtl"] .whys__head,[dir="rtl"] .cs-plate__name, [dir="rtl"] .cs-band__h,[dir="rtl"] .cs-phase__t,[dir="rtl"] .cs-chapters__h, [dir="rtl"] .cs-chap__t,[dir="rtl"] .cs-deliver__k,[dir="rtl"] .cs-pull__t, [dir="rtl"] .cscard__h,[dir="rtl"] .faq__h,[dir="rtl"] .smap__head h2, [dir="rtl"] .svc__h{line-height:1.3} /* The hero wordmark is one word at up to 176px. Arabic words are wider than their English counterparts at the same point size, so the ceiling comes down rather than letting it break. */ [dir="rtl"] .h1,[dir="rtl"] .hero__wordmark{font-size:clamp(44px,9vw,120px)} [dir="rtl"] .studio-hero__title{font-size:clamp(40px,8.4vw,128px)} [dir="rtl"] .contact__title{font-size:clamp(38px,7vw,96px)} [dir="rtl"] .cs-hero__title,[dir="rtl"] .work-hero__title, [dir="rtl"] .article-hero__title{font-size:clamp(30px,4.6vw,66px)} [dir="rtl"] .cases__head,[dir="rtl"] .scatter__title{font-size:clamp(28px,4.6vw,62px)} /* Nothing here is set in a font that has Arabic small caps, and uppercasing is a no-op on Arabic anyway — but it still strips the label's intent, so the labels get their tracking back the only way that reads: a touch of weight. */ [dir="rtl"] .top-text,[dir="rtl"] .footer__label,[dir="rtl"] .filters__label, [dir="rtl"] .nav__link,[dir="rtl"] .dock__link{text-transform:none} /* Latin-only runs — email, phone, URLs, figures with units — must stay left-to-right inside an Arabic paragraph or the browser reorders the punctuation. */ [dir="rtl"] .ltr,[dir="rtl"] a[href^="mailto:"],[dir="rtl"] a[href^="tel:"], [dir="rtl"] .footer__mail,[dir="rtl"] .menu__foot span, [dir="rtl"] code,[dir="rtl"] time{direction:ltr;unicode-bidi:isolate;text-align:start} /* Numerals read as Western digits in Gulf Arabic advertising, and every figure on this site is a statistic, a price or a date. */ [dir="rtl"]{font-variant-numeric:lining-nums} /* ============================================================ 3. PHYSICAL PROPERTIES style.css sets by hand ------------------------------------------------------------ dir mirrors layout and alignment; it does not touch an explicit left/right. These are the ones that carry meaning. ============================================================ */ /* --- the hover "slide" on every list row: it must travel inward, which on an RTL page is to the left --- */ [dir="rtl"] .menu__item,[dir="rtl"] .case,[dir="rtl"] .csfeat, [dir="rtl"] .post,[dir="rtl"] .jpost,[dir="rtl"] .smap__row a{ transition-property:color,padding-right} [dir="rtl"] .menu__item:hover{padding-left:0;padding-right:14px} [dir="rtl"] .case:hover{padding-left:0;padding-right:clamp(6px,1vw,18px)} [dir="rtl"] .csfeat:hover{padding-left:0;padding-right:clamp(4px,.8vw,14px)} [dir="rtl"] .post:hover{padding-left:0;padding-right:14px} [dir="rtl"] .jpost:hover{padding-left:0;padding-right:clamp(6px,1vw,16px)} [dir="rtl"] .smap__row a:hover{padding-left:0;padding-right:8px} /* --- rules and keylines that sat on the left edge --- */ [dir="rtl"] .article-body blockquote{ border-left:0;border-right:2px solid var(--red); padding:6px clamp(20px,3vw,34px) 6px 0} [dir="rtl"] .svc__note{ border-left:0;border-right:2px solid var(--red); padding-left:0;padding-right:16px} [dir="rtl"] .legal__toc{padding-left:10px;padding-right:0} /* --- lists: the marker and its indent --- */ [dir="rtl"] .article-body ul,[dir="rtl"] .article-body ol, [dir="rtl"] .legal__body ul{padding-left:0} [dir="rtl"] .article-body ul,[dir="rtl"] .article-body ol{padding-right:1.25em} [dir="rtl"] .legal__body ul{padding-right:20px} [dir="rtl"] .svc__body ul li{padding:11px 26px 11px 0} [dir="rtl"] .svc__body ul li::before{left:auto;right:2px} [dir="rtl"] .svc__body ol li{padding-left:0;padding-right:44px} [dir="rtl"] .svc__body ol li::before{left:auto;right:0} /* --- tables --- */ [dir="rtl"] .svc__table th,[dir="rtl"] .svc__table td{ text-align:right;padding:11px 0 11px 16px} /* --- figures and meta that were right-aligned against a left column, and now face the other way --- */ [dir="rtl"] .case__result,[dir="rtl"] .wcard__meta, [dir="rtl"] .cs-next__cell--all,[dir="rtl"] .legal__updated{text-align:left} @media (max-width:700px){ [dir="rtl"] .case__result,[dir="rtl"] .cs-next__cell--all{text-align:right} } /* --- the FAQ chevron: pinned to the far edge, and it points down, so only the side it sits on changes --- */ [dir="rtl"] .faq__item summary::after{margin-left:0;margin-right:auto} /* --- badges and controls pinned over media --- */ [dir="rtl"] .reel-ctrls,[dir="rtl"] .carousel__badge, [dir="rtl"] .rcard__sound{right:auto;left:10px} [dir="rtl"] .vband__sound{right:auto;left:clamp(12px,1.4vw,20px)} [dir="rtl"] .vp-controls{left:auto;right:12px} [dir="rtl"] .vp-cap{right:auto;left:14px} [dir="rtl"] .cscard__tag{left:auto;right:14px} [dir="rtl"] .loader__count{right:auto;left:var(--pad)} [dir="rtl"] .cs-browser__url{margin-left:0;margin-right:12px} [dir="rtl"] .filter em{margin-left:0;margin-right:6px} [dir="rtl"] .filters__label{margin-right:0;margin-left:4px} [dir="rtl"] .csfeat__facts b{margin-right:0;margin-left:5px} [dir="rtl"] #lightboxCap i{margin-left:0;margin-right:8px} [dir="rtl"] .bubble--me{margin-left:0;margin-right:auto} /* --- carousel and lightbox arrows: "previous" belongs on the right once the reading order turns round --- */ [dir="rtl"] .carousel__prev{left:auto;right:8px} [dir="rtl"] .carousel__next{right:auto;left:8px} [dir="rtl"] .carousel__prev svg,[dir="rtl"] .carousel__next svg, [dir="rtl"] .lightbox__prev svg,[dir="rtl"] .lightbox__next svg{transform:scaleX(-1)} [dir="rtl"] .lightbox__close{right:auto;left:clamp(14px,3vw,28px)} [dir="rtl"] .lightbox__prev{left:auto;right:clamp(10px,2vw,26px)} [dir="rtl"] .lightbox__next{right:auto;left:clamp(10px,2vw,26px)} @media (max-width:640px){ [dir="rtl"] .lightbox__prev{right:calc(50% - 66px);left:auto} [dir="rtl"] .lightbox__next{left:calc(50% - 66px);right:auto} } /* --- arrow glyphs written into the markup point one way; the two that mean "onward" have to turn round --- */ [dir="rtl"] .nav__cta-dot{margin-left:0} /* ============================================================ 4. THE SCROLL-DRIVEN FILMSTRIPS ------------------------------------------------------------ The studio evolution strip, the homepage reels strip and the case-study chapter rail are all max-content tracks that GSAP drags sideways for the length of their section. Here they are laid out from the right, so the spare width hangs off the LEFT edge and the travel has to be positive to bring it in. The sign comes from DIR in js/main.js, which reads , so there is nothing to override in CSS — the note is here because this is where anyone chasing an RTL layout bug will look first. ============================================================ */ /* --- the "onward" arrow icon. It points up and to the right, which means forward on an English page and backward here. The speaker and the play triangle are NOT direction, so they are left out. --- */ [dir="rtl"] .btn > svg, [dir="rtl"] .cs-phase__arw svg, [dir="rtl"] .office-card__dir svg{transform:scaleX(-1)} /* --- the footer links slide toward the reader on hover --- */ [dir="rtl"] .footer__col a:hover{transform:translateX(-4px)} /* ============================================================ 5. GROWTH THAT STARTS AT THE WRONG EDGE ------------------------------------------------------------ A scaleX fill is anchored by transform-origin, which is a physical edge and does not follow the text direction. Both of these read as something filling up as the reader advances, so on an Arabic page they have to start on the right. ============================================================ */ [dir="rtl"] .hero__services a::after{transform-origin:right} [dir="rtl"] .cs-rail__prog i::after{transform-origin:right center} /* ============================================================ 6. THE RANGE TICKER RUNS THE OTHER WAY ------------------------------------------------------------ The row is doubled in JS and slid by half its width, so the loop meets itself. But a max-content row overflows towards the inline end: in Arabic it starts flush with the RIGHT edge and its spare copy hangs off the left, so sliding further left walks the whole band off the screen instead of looping. Same distance, opposite sign — the join still lands seamlessly. ============================================================ */ @keyframes cs-ticker-run-rtl{ from{transform:translate3d(0,0,0)} to{transform:translate3d(50%,0,0)} } [dir="rtl"] .cs-ticker__row{animation-name:cs-ticker-run-rtl}