/* ========================================================================= DESIGN WAREHOUSE — rtl.css Everything that changes when the document is right to left, in one layer, scoped to `[dir="rtl"]`. The five layers below it are untouched, so a left-to-right page cannot regress because of anything in here — the file is inert unless ``. Two jobs, and they are not the same job: 1. MIRRORING. The layers below place the rail with `left`, the container's wide gutter with `padding-left`, the hairlines' draw direction with `transform-origin: left`. Those are restated the other way round here. They stay physical down there because that CSS is already measured at five widths; a swap is one file to read instead of sixty declarations to re-verify. 2. ARABIC TYPOGRAPHY — and this is not mirroring at all. Arabic is a connected script, so tracking pulls apart joins that are meant to touch; and a Naskh face carries marks above and below the baseline that a 0.92 display leading clips inside `.line`'s mask. Numerals stay Western (`54`, not `٥٤`). The catalogue is technical, the years and specifications are read as figures, and the records themselves are Latin. ========================================================================= */ /* ---------------------------------------------------------------- fonts --- Prepended after the Latin face, never before it: font fallback is per character, so `Inter` still draws every Latin string — including the record data, which stays English — and the Arabic face catches what Inter has no glyphs for. Putting the Arabic family first would set the Latin in it too, and the page would show two different Latins side by side. -------------------------------------------------------------------------- */ [dir="rtl"] { --font-display: "Instrument Serif", "Noto Naskh Arabic", "Songti SC", "Source Han Serif SC", Georgia, "Times New Roman", serif; --font-text: "Inter", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; /* Naskh needs the vertical room the display leading was never going to give it. `.line`'s mask already carries 0.14em / 0.2em of padding for the Latin descenders, so nothing is clipped by raising these — the mask simply gets the room it was compensating for. */ --lh-display: 1.24; --lh-tight: 1.3; --lh-head: 1.34; /* Small type is where Arabic loses most: at 11px the joins read as a smudge. One step up, and only for the sizes that were at the floor. */ --fs-meta: 0.75rem; --fs-small: 0.875rem; } /* Tracking is off for every text-bearing element. It has to be a blanket rule rather than twenty edits, because the layer below tracks in twenty places — and one added later would silently break the joins again. `!important` is the point: this must beat all of them, including the ones that do not exist yet. Latin fragments inside the page lose their tracking with it; that is the price of one rule instead of twenty. */ [dir="rtl"] :where(h1, h2, h3, h4, p, a, li, dt, dd, label, button, span, b, strong, em, small, address, figcaption, blockquote, time, summary, input, select, textarea) { letter-spacing: 0 !important; } /* ------------------------------------------------------------- container --- The wide gutter belongs to the side the rail is on, and the rail moved. -------------------------------------------------------------------------- */ [dir="rtl"] .container { padding-left: var(--gutter); padding-right: var(--pad-left); } [dir="rtl"] .hero__horizon { left: var(--gutter); right: var(--pad-left); } [dir="rtl"] .skip-link { left: auto; right: var(--s-3); } /* ----------------------------------------------------------------- chrome --- */ [dir="rtl"] .topbar__nav { margin-left: 0; margin-right: auto; } @media (max-width: 640px) { [dir="rtl"] .topbar__cta { margin-left: 0; margin-right: auto; } } [dir="rtl"] .rail { left: auto; right: max(20px, calc((100vw - var(--shell-max)) / 2 + 8px)); } [dir="rtl"] .rail__item { font-size: 0.7rem; } [dir="rtl"] .rail__mark { transform-origin: right center; } /* The bar and the hairlines draw from the edge the text starts at. */ [dir="rtl"] .progress__bar, [dir="rtl"] .hero__horizon, [dir="rtl"] .rule-rise, [dir="rtl"] .btn::before { transform-origin: right center; } /* --------------------------------------------------------------- arrows --- `→` in the markup points the way the text runs. Mirrored, plus the same nudge as the hover state — the mirror is applied first, so a positive translate still moves the arrow the way it now points. -------------------------------------------------------------------------- */ [dir="rtl"] .btn__arrow { transform: scaleX(-1); } [dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); } /* ----------------------------------------------------------- index rows --- */ [dir="rtl"] .index-row__count { text-align: left; } [dir="rtl"] .index-row:hover .index-row__name { transform: translateX(-10px); } [dir="rtl"] .index-row__art { transform: translateX(8px); } [dir="rtl"] .index-row:hover .index-row__art { transform: translateX(0); } /* An inert row never moves, in either direction. */ [dir="rtl"] .index-row--inert .index-row__art { transform: none; } [dir="rtl"] .index-row--inert:hover .index-row__name { transform: none; } /* The stand-in statement in section 04 is marked with a rule on its leading edge, which swaps sides with the direction. */ [dir="rtl"] .work-await { border-left: 0; border-right: 1px solid var(--hair-strong); padding-left: 0; padding-right: var(--s-5); } /* -------------------------------------------------------------- marquee --- The track moves the other way. Two identical sets sit side by side either way, so one set of travel still loops without a seam. -------------------------------------------------------------------------- */ [dir="rtl"] .marquee__set { padding-right: 0; padding-left: var(--s-8); } [dir="rtl"] .marquee__track { animation-name: marquee-scroll-rtl; } @keyframes marquee-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } [dir="rtl"] .scroll-cue__line::after { animation-name: cue-rtl; } @keyframes cue-rtl { 0% { transform: translateX(110%); } 55% { transform: translateX(-260%); } 100% { transform: translateX(-260%); } } /* ----------------------------------------------------------------- text --- Small adjustments the tokens cannot express. -------------------------------------------------------------------------- */ /* The brand marks are Latin, laid out by hand inside their viewBoxes. `dir` is inherited into SVG ``, and with `text-anchor="end"` a right-to-left base direction flips which edge "end" names — the stacked lockup and the topbar wordmark are laid out clear of their own viewBox and disappear. */ [dir="rtl"] .wordmark__svg, [dir="rtl"] .brandmark__svg { direction: ltr; } /* A numeral range is two runs of digits with a neutral dash between them, and in a right-to-left paragraph that neutral resolves to RTL: "1368—1788" would paint as "1788—1368". The value is a single left-to-right run. */ [dir="rtl"] .stat__value { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .hero__kicker { line-height: 1.5; } [dir="rtl"] .hero__sub { line-height: 1.85; } [dir="rtl"] .stat__unit { margin-left: 0; margin-right: 2px; } /* ----------------------------------------------------------------- form --- */ [dir="rtl"] .field label .req { margin-left: 0; margin-right: 3px; } [dir="rtl"] .field select { padding-right: 0; padding-left: 32px; } [dir="rtl"] .checkbox input:checked::after { left: auto; right: 4px; } /* The accent rule sits on the edge the text starts from. */ [dir="rtl"] .form-status, [dir="rtl"] .callout, [dir="rtl"] .detail__credit { border-left: 0; border-right: 2px solid var(--clay); } [dir="rtl"] .callout { padding-left: 0; padding-right: var(--s-5); } [dir="rtl"] .detail__credit { padding-left: 0; padding-right: var(--s-4); } /* --------------------------------------------------------------- browse --- */ [dir="rtl"] .search__icon { margin-right: 0; margin-left: 10px; } [dir="rtl"] .filters { padding-right: 0; padding-left: 6px; } [dir="rtl"] .facet__toggle { text-align: right; } [dir="rtl"] .facet__chevron { border-right: 0; border-left: 1px solid currentColor; } [dir="rtl"] .facet__option input:checked::after { left: auto; right: 3.5px; } [dir="rtl"] .results__count { margin-right: 0; margin-left: auto; } [dir="rtl"] .detail__close { right: auto; left: 0; } [dir="rtl"] .detail__related a:hover { padding-left: 0; padding-right: 6px; } /* ========================================================================= WHAT IS DELIBERATELY NOT MIRRORED The corner brackets on the work cards and the grid cards (`.work-card__frame` and `.card__frame`, `::before` top-left and `::after` bottom-right) are left alone. They are a point-symmetric pair, so they read as balanced either way, and mirroring them would move a decoration that carries no meaning. `.hero--brand .hero__mid`, `.empty` and the two section glows are centred, so there is nothing to mirror — `left: 50%` with `translateX(-50%)` is already direction-neutral. ========================================================================= */