/* Right-to-left pages (Arabic). Linked by the shell only when . The layout itself mirrors through the logical properties in styles.css and pages.css; this file handles what CSS cannot infer: arrows drawn as glyphs, tickers that run one way, letter-spacing (Arabic letters join, so any tracking breaks the word), and the italic serif accent, which has no Arabic face. */ /* Arabic never takes tracking, and uppercase is meaningless */ [dir="rtl"] :where(h1, h2, h3, h4, p, span, a, button, li, dt, dd, label, input, textarea, select, option, address, figcaption, small, em, strong) { letter-spacing: 0; text-transform: none; } /* the italic accent: the Latin serif has no Arabic glyphs, so the accent is the Arabic serif, upright */ [dir="rtl"] :where(em, .display-2 em, .phero__title em, .h2 em, .clients__title em, .team__title em, .ahero__title em, .chero__title em) { font-family: "Noto Naskh Arabic", var(--sans); font-style: normal; } /* arrows and chevrons drawn as glyphs point the other way */ [dir="rtl"] :where(.menu__go, .globe__arrow, .csend__arrow, .cform__badge, .prail__go, .pj-next__arrow, .bfeat__cta i, .wk-card__cta i, .tile__arrow, .nav__cta-badge svg, .foot__link::after, .link--arrow::after) { transform: scaleX(-1); } [dir="rtl"] .chero__scroll .chero__dot, [dir="rtl"] .work__hint, [dir="rtl"] .team__hint { direction: rtl; } /* tickers and marquees run the other way */ [dir="rtl"] :where(.marquee__track, .hero__ticker-track, .ticker__track, .pj-over__track, .bsplit__track) { animation-direction: reverse; } /* the breadcrumb separator */ [dir="rtl"] .crumbs li + li::before { margin-inline-end: 0.6rem; margin-inline-start: 0; } /* numbers, phone numbers, code and email stay left-to-right inside right-to-left text */ [dir="rtl"] :where(.mono, code, pre, [href^="tel:"], [href^="mailto:"], .menu__num, .acc__num, .globe__num, .prail__index, .stats__value, .stat__value, time, .globe__meta) { direction: ltr; unicode-bidi: isolate; display: inline-block; } [dir="rtl"] .foot__contact, [dir="rtl"] .menu__meta { text-align: end; } /* forms: the floating labels and the underline sit at the start edge */ [dir="rtl"] :where(.cfield__label, .field__error, .cform__status) { text-align: start; } [dir="rtl"] select { background-position: left 0.75rem center; } /* the service key on the home rows is set at the end edge by the physical translate; keep it in view */ [dir="rtl"] .svc__cap--long { transform: none; } /* ---- home page ---- */ /* the client logo rows are laid out and driven left-to-right; the fade mask is symmetrical */ [dir="rtl"] .clients__row { direction: ltr; } /* the giant serif word behind the services panel is Latin, set one letter per box: keep the letters in reading order and anchor it beside the keyboard, running under the glass panel */ [dir="rtl"] .services.is-explore .services__word { direction: ltr; inset-inline-start: auto; right: calc(var(--board-w) + clamp(1rem, 3vw, 3rem)); } /* the keyboard hint is prose, not code: it reads right-to-left and mirrors with the keys */ [dir="rtl"] .services__hint { direction: rtl; unicode-bidi: normal; display: block; } [dir="rtl"] .services.is-explore .services__hint { display: block; } /* the project strip's progress bar fills from the reading edge */ [dir="rtl"] .work__progress > span { transform-origin: right; } /* the footer wordmark is the Latin brand: its three words keep their order */ [dir="rtl"] .foot__mark { direction: ltr; }