/* ========================================================================== Naval Orientation: right-to-left ========================================================================== Loaded only when the document direction is RTL. It is deliberately short, and it should stay short. The bulk of the mirroring is done in the component sheets themselves by using logical properties — padding-inline-start, inset-inline-end, text-align: start — so one rule serves both directions and there is a single source of truth. A mirrored copy of every stylesheet is the usual way to do this and it guarantees the two drift apart. What is left here is what logical properties genuinely cannot express: · transforms translateX has no logical form · gradient angles a 100deg sweep does not know about direction · background-position keywords are physical · SVG internals the charts have their own coordinate system · a handful of icons that point at something rather than decorate Everything below is one of those five. ========================================================================== */ /* ---------- The drawer --------------------------------------------------- inset-inline already parks it against the end edge, so in Arabic it hangs off the left. The transform that hides it has to follow, or it slides in from the wrong side of the screen. */ [dir="rtl"] .no-drawer { transform: translateX(-100%); } [dir="rtl"] .no-drawer.is-open { transform: none; } /* ---------- Arrows that mean "onward" ------------------------------------ An arrow in a button, a link or a card means "this way to the next thing", and in Arabic the next thing is to the left. Chevrons that mean "expand" (the accordion caret, the select) are NOT mirrored: down is down. The nudge on hover flips with them. */ [dir="rtl"] .no-btn__ico, [dir="rtl"] .no-link svg, [dir="rtl"] .no-svccat__arrow, [dir="rtl"] .no-vtype__arrow, [dir="rtl"] .no-port__go, [dir="rtl"] .no-svccard__more svg, [dir="rtl"] .no-svc__more svg, [dir="rtl"] .no-core__link svg, [dir="rtl"] .no-fnews__go, [dir="rtl"] .no-jaside__all svg, [dir="rtl"] .no-crumb svg { transform: scaleX(-1); } [dir="rtl"] .no-btn:hover .no-btn__ico, [dir="rtl"] .no-btn:focus-visible .no-btn__ico { transform: scaleX(-1) translateX(3px); } [dir="rtl"] .no-port:hover .no-port__go, [dir="rtl"] .no-port.is-active .no-port__go { transform: scaleX(-1) translateX(3px); } [dir="rtl"] .no-svccat a:hover .no-svccat__arrow, [dir="rtl"] .no-vtype a:hover .no-vtype__arrow { transform: scaleX(-1) translateX(4px); } /* The previous/next pair swaps meaning, not position: "previous" still points back, which in Arabic is to the right. */ [dir="rtl"] .no-svcnav__link--prev svg, [dir="rtl"] .no-svcnav__link--next svg, [dir="rtl"] .no-gal__nav svg, [dir="rtl"] .no-certrail__arrow svg { transform: scaleX(-1); } [dir="rtl"] .no-certrail__arrow:first-child svg { transform: scaleX(-1) rotate(180deg); } /* ---------- Reveals ------------------------------------------------------ A section that drifts in from the left in English drifts in from the right in Arabic: the motion should come from the edge the reader's eye starts at. */ [dir="rtl"] [data-reveal="left"] { transform: translate3d(30px, 0, 0); } [dir="rtl"] [data-reveal="right"] { transform: translate3d(-30px, 0, 0); } /* ---------- Gradient angles ---------------------------------------------- A gradient angle is physical: 90deg sweeps left to right whatever the document direction, so a scrim built to sit under left-aligned copy stays on the left when the copy moves to the right. Restating each gradient here is how this started, and it was wrong twice over. The list has to be kept in step with the component sheets by hand, and restating one with the `background` shorthand resets background-clip — which turned the Arabic headline into a solid blue bar with invisible text in it, with nothing in the markup to say why. So the component sheets ask for their angle as a token carrying their own value as its fallback: linear-gradient(var(--no-ang-100, 100deg), …). English therefore resolves to exactly the angle it always had, with no declaration here at all, and Arabic gets the mirror — 360 minus the angle — through inheritance, from one place, for all twenty-seven of them. Vertical gradients are absent because there is nothing to mirror. */ [dir="rtl"] { --no-ang-90: 270deg; --no-ang-100: 260deg; --no-ang-115: 245deg; --no-ang-120: 240deg; --no-ang-135: 225deg; --no-ang-165: 195deg; } /* ---------- Background positions ---------------------------------------- The select chevron is a background image, and background-position takes physical keywords only. */ [dir="rtl"] .no-field select { background-position: left .875rem center; } /* ---------- Charts ------------------------------------------------------- The port and world charts are drawn in their own coordinate space from real longitude and latitude. Mirroring them would put Salalah east of Muscat, so the chart stays exactly as it is — geography is not a reading direction. Only the text around it flows RTL. */ [dir="rtl"] .no-map svg { direction: ltr; } [dir="rtl"] .no-map__pin text { direction: rtl; } /* ---------- The logo marquee -------------------------------------------- The strip scrolls by translating its track, and a translate has no logical form. Left alone it runs the same way in both languages, so in Arabic the logos travel against the reading direction — the one piece of the page moving the wrong way, which is more noticeable than it sounds. The content is duplicated, so mirroring the end state loops just as seamlessly. */ @keyframes noMarqueeRTL { to { transform: translateX(50%); } } [dir="rtl"] .no-marquee__track { animation-name: noMarqueeRTL; } /* ---------- Rails and tracks -------------------------------------------- Horizontal scrollers report a negative scrollLeft in RTL; main.js handles the arithmetic. What CSS has to do is keep the first item at the start edge. */ [dir="rtl"] .no-certrail__viewport, [dir="rtl"] .no-rail__track, [dir="rtl"] .no-gal__track { direction: rtl; } /* ---------- Small physical details --------------------------------------- The hero's sonar sweep used to be pushed back across by hand from here. It is declared with inset-inline-end in home.css now, so it mirrors itself and an override would only move it back. */ [dir="rtl"] .no-flist a:hover { transform: translateX(-3px); } [dir="rtl"] .no-cinfo__row:hover { transform: translateX(-3px); } [dir="rtl"] .no-port:hover, [dir="rtl"] .no-port.is-active { transform: translateX(-5px); } @media (max-width: 900px) { [dir="rtl"] .no-port:hover, [dir="rtl"] .no-port.is-active { transform: none; } } /* ---------- Numbers that are not Arabic ---------------------------------- A telephone number is a left-to-right run of weak characters, so in an RTL paragraph the bidirectional algorithm reorders it: +968 9882 4434 renders as "4434 9882 968+", with the plus sign at the wrong end. It is the single most common bug on a bilingual site and it is invisible to anyone reading the markup, because the markup is correct. plaintext tells the browser to work out the direction of this element's contents from the contents, which for a phone number is left to right. */ [dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="https://wa.me"], [dir="rtl"] .no-port__phone, [dir="rtl"] .no-topbar__imo, [dir="rtl"] .no-cinfo__value, [dir="rtl"] .no-fcontact__row a[href^="tel:"] { unicode-bidi: plaintext; } /* An icon that points — a paper plane, a send arrow — is marked with .no-ico--dir at the call site, because only the template knows whether a given glyph is pointing at something or just decorating. */ [dir="rtl"] .no-ico--dir { transform: scaleX(-1); }