/* ============================================================================= rtl.css — Arabic only ============================================================================= Loaded only when the active language is right-to-left, alongside . Most of the layout needs nothing here, because the stylesheet uses logical properties throughout — margin-inline, inset-inline-start, text-align: end. Those flip on their own. What is left below are the cases where a physical value was unavoidable, plus a few typographic adjustments Arabic wants. The old site set dir="ltr" on every page and never loaded anything like this, so Arabic laid out left-to-right with the nav on the wrong side. ========================================================================== */ /* ------------------------------------------------------------- typography */ [dir="rtl"] body { font-family: var(--font-arabic); /* Naskh sits smaller than Archivo at the same px, and needs more leading. */ font-size: calc(var(--text-base) + 1px); line-height: 1.8; } /* Latin brand marks keep their Latin face and render as one unbroken unit inside RTL text. Note what is NOT here: `direction: ltr`. Setting it makes the element's own text-align resolve left, which pulls the logo away from the right edge of its grid cell and slams it into the last nav item. `unicode-bidi: isolate` alone is enough — Latin characters already carry strong LTR direction, so "bellart.gallery" renders correctly while the box stays right-aligned. */ [dir="rtl"] .logo, [dir="rtl"] .foot-brand { font-family: var(--font-display); unicode-bidi: isolate; text-align: start; } /* Phone numbers, prices and edition counts read left-to-right. */ [dir="rtl"] .work-price, [dir="rtl"] .aw-price, [dir="rtl"] .qv-price, [dir="rtl"] .trust-num, [dir="rtl"] [dir="ltr"] { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .work-price, [dir="rtl"] .aw-price, [dir="rtl"] .qv-price { text-align: start; } /* Arabic headlines lose the negative tracking — it closes up the joins. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .aw-title, [dir="rtl"] .qv-title { letter-spacing: 0; } /* Uppercase and wide letter-spacing do nothing for Arabic and hurt legibility. */ [dir="rtl"] .label, [dir="rtl"] .btn, [dir="rtl"] .tb-btn, [dir="rtl"] .quick-view, [dir="rtl"] .col-name, [dir="rtl"] .feat-tag, [dir="rtl"] .avail, [dir="rtl"] footer.site-foot h4, [dir="rtl"] .flt-head h3, [dir="rtl"] .news-form button { text-transform: none; letter-spacing: 0; } /* ----------------------------------------------------------- transforms */ /* Off-canvas panels slide from the opposite edge. transform is physical, so these are the flips that logical properties cannot do for us. */ [dir="rtl"] .flt { transform: translateX(-102%); } [dir="rtl"] .flt.open { transform: none !important; } @media (max-width: 760px) { /* As a bottom sheet the drawer moves vertically, so the direction of the horizontal flip above must not apply. */ [dir="rtl"] .flt { transform: translateY(102%); } [dir="rtl"] .flt.open { transform: none !important; } } /* ---------------------------------------------------------------- layout */ /* The home page artist grid is hand-placed by column number; mirror it. */ [dir="rtl"] .artist-card:nth-child(1) { grid-column: 8 / 13; } [dir="rtl"] .artist-card:nth-child(2) { grid-column: 1 / 7; } [dir="rtl"] .artist-card:nth-child(3) { grid-column: 6 / 12; } [dir="rtl"] .artist-card:nth-child(4) { grid-column: 1 / 5; } @media (max-width: 1080px) { [dir="rtl"] .artist-card:nth-child(1) { grid-column: 7 / 13; } [dir="rtl"] .artist-card:nth-child(2) { grid-column: 1 / 7; } [dir="rtl"] .artist-card:nth-child(3) { grid-column: 7 / 13; } [dir="rtl"] .artist-card:nth-child(4) { grid-column: 1 / 7; } } /* The horizontal works rail scrolls the other way; the browser handles the scroll direction, but the snap padding is written with max() against the viewport and needs no change. Nothing to do here — noted so the next person does not go looking. */ /* Numeric fields keep their digits aligned as a group. */ [dir="rtl"] .aw-row dd, [dir="rtl"] .qv-row dd { text-align: start; }