/* ============================================================
css/rtl.css
The RTL override layer. Loaded ONLY by /ar/ pages, and it must be
the LAST stylesheet in the on those pages.
<- last, always
Every selector in this file is prefixed [dir="rtl"]. No English page
loads the file, so the worst possible bug in it is an ugly Arabic
page; the revenue-bearing English site cannot be touched from here.
WHY OVERRIDES AND NOT LOGICAL PROPERTIES
docs/arabic-localization-plan.md section 3.6 proposed converting ~45
declarations to logical properties in place. That conversion is NOT
done and is explicitly out of scope for this phase (no English file
may be edited), so this file carries those cases too. If someone
later converts a declaration in a page stylesheet to
padding-inline-start / inset-inline-* / border-inline-*, delete the
matching override below in the same commit.
THREE THINGS THAT ALREADY WORK AND MUST NOT BE "FIXED"
- css/buttons.css:562-575 flips the gold wipe origin and the hover
icon advance for the whole button family. Only its gaps are
patched here (section 10).
- .footer-col h3::before (css/footer.css:111) is a flex item on a
display:flex heading with no physical offset, so it mirrors for
free with the flex direction.
- flex `order` (css/header.css:441-445) is direction-aware in a row
flex container and reverses by itself; the brand lands on the right
and the toggle/CTA/burger cluster on the left with no help.
- env(safe-area-inset-left/right) at css/header.css:408-409, 414-415,
676 and css/main.css:1649-1650 is PHYSICAL by definition. The notch
is on the physical side it is on. Never flip these.
- linear-gradient angles are physical too: they do not auto-flip, so
only the gradients whose CONTENT moved are re-angled below. The DHL
plate (css/main.css:768) is a centred logo backing and stays as is.
THE RULE FOR EVERYONE WHO TOUCHES A PAGE STYLESHEET FROM NOW ON
A new directional declaration (left/right/padding-left/margin-right/
border-left/text-align:left/float/transform-origin:left/a directional
FA glyph) needs a matching line in this file, in the matching section.
Sections mirror the source stylesheets so the two can be diffed.
1. main.css 6. products.css
2. header.css 7. contact.css
3. footer.css 8. legal.css / about.css
4. home.css 9. certificates.css
5. services.css 10. buttons.css gaps
11. reduced motion
============================================================ */
/* ============================================================
1. main.css
============================================================ */
/* Floating badge over hero media (main.css:137). */
[dir="rtl"] .badge-float { left: auto; right: 1rem; }
/* Gold radial bleed on interior page heroes (main.css:309). */
[dir="rtl"] .page-hero::after { right: auto; left: -80px; }
/* FAQ: the +/- marker gutter and the marker itself
(main.css:365-386, and the phone pass at main.css:1682-1683). */
[dir="rtl"] .faq-item summary { padding-right: 1.5rem; padding-left: 3rem; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 1.5rem; }
@media (max-width: 600px) {
[dir="rtl"] .faq-item summary { padding: 1rem 1.25rem 1rem 2.75rem; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 1.125rem; }
}
/* Check lists: tick sits on the start edge (main.css:394, 404). */
[dir="rtl"] .check-list li { padding-left: 0; padding-right: 1.875rem; }
[dir="rtl"] .check-list li::before { left: auto; right: 0; }
/* Skip link. Parked off-screen at main.css:449, revealed at :458 and
restated at :1504 and css/buttons.css:472 — all four are `left`, so the
control would fly in from the wrong edge and its notched corner would
point the wrong way. It is the first tab stop on every page; get it right. */
[dir="rtl"] .skip-link {
left: auto;
right: -9999px;
border-radius: 0 0 0 var(--radius);
}
[dir="rtl"] .skip-link:focus { left: auto; right: 0; }
/* Bento cells (main.css:491, 521, 538, 552). */
[dir="rtl"] .bento-cell:hover .card-arrow i { transform: translateX(-4px); }
[dir="rtl"] .bento-cta {
border-left: 1px solid var(--border);
border-right: 3px solid var(--accent);
}
[dir="rtl"] .bento-num { right: auto; left: 1.375rem; }
@media (max-width: 600px) {
[dir="rtl"] .bento-cta { border-right-width: 1px; }
}
/* Service cards: corner index and the trailing arrow gap
(main.css:603, 616). Both are two-class selectors in the source, so the
chain is repeated in full after the [dir="rtl"] prefix. */
[dir="rtl"] .service-card .service-num { right: auto; left: 1.25rem; }
[dir="rtl"] .service-card .card-arrow i { margin-left: 0; margin-right: 0.25rem; }
/* Partner card badge, which would otherwise sit on top of the icon
(main.css:714). */
[dir="rtl"] .partner-card .card-icon + .badge { right: auto; left: 1.25rem; }
/* Catalogue link: fa-arrow-right (\f061) points away from the reading
direction, so the glyph itself is swapped for fa-arrow-left (\f060)
(main.css:820, 826). */
[dir="rtl"] .partner-distributor .partner-catalog-link::after { content: "\f060"; }
[dir="rtl"] .partner-distributor .partner-catalog-link:hover::after { transform: translateX(-3px); }
/* Scroll progress rail (main.css:928-939). The bar is width:100% and
scaleX-animated, so the origin is what decides which end it grows from,
and the gradient has to run with it. */
[dir="rtl"] .scroll-progress {
left: auto;
right: 0;
transform-origin: 100% 50%;
background: linear-gradient(270deg, var(--accent-dark), var(--accent-light));
}
/* Interior hero grid mask and the h1 underline (main.css:989-990, 1002).
115deg -> 245deg and 90deg -> 270deg: mirrored about the vertical axis. */
[dir="rtl"] .page-hero::before {
mask-image: linear-gradient(245deg, #000 0%, transparent 62%);
-webkit-mask-image: linear-gradient(245deg, #000 0%, transparent 62%);
}
[dir="rtl"] .page-hero h1::after {
background: linear-gradient(270deg, var(--accent), var(--accent-light));
}
/* Dark panel dot-grid mask (main.css:1163-1164). */
[dir="rtl"] :is(.cta-banner, .whatsapp-panel, .fleet-band)::after {
mask-image: linear-gradient(200deg, #000 0%, transparent 70%);
-webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 70%);
}
/* CRITICAL — main.css:1176.
`.btn:hover i.fa-arrow-right, .btn:hover svg { transform: translateX(3px) }`
is a separate, later-loading rule that has nothing to do with
--icon-advance, and it beats css/buttons.css:572 on source order on every
page. Without this block the existing RTL work in buttons.css section 19
is silently defeated and every primary button's arrow still advances to the
right. main.css cannot be edited, so it is overridden here.
:focus-visible is included because buttons.css:136 names it alongside
:hover and its RTL counterpart was never written (see section 10). */
[dir="rtl"] .btn:hover i.fa-arrow-right,
[dir="rtl"] .btn:hover svg,
[dir="rtl"] .btn:focus-visible i.fa-arrow-right,
[dir="rtl"] .btn:focus-visible svg { transform: translateX(-3px); }
/* FAQ open-state marker. The gold edge is declared three times
(main.css:1192, 1194, 1561) and the hover rule at :1558 deliberately
spares the marker edge by naming the other three sides — mirrored, that
same rule wipes the marker instead. All four move to the right edge. */
[dir="rtl"] .faq-item {
/* rest: 1px --border on the trailing edge, 2px transparent marker slot on
the leading edge — the exact mirror of main.css:356-359 + :1192 */
border-left: 1px solid var(--border);
border-right: 2px solid transparent;
}
[dir="rtl"] .faq-item:hover { border-color: var(--border); }
[dir="rtl"] .faq-item[open] {
border-left-color: var(--border);
border-right-color: var(--accent);
}
[dir="rtl"] .faq-item[open]:hover { border-right-color: var(--accent); }
/* Back to top (main.css:1217, restated with safe areas at main.css:1757).
env(safe-area-inset-*) is physical, so the LEFT inset is the correct one to
consult once the button lives in the bottom-left corner. */
[dir="rtl"] .to-top {
right: auto;
left: max(clamp(1rem, 3vw, 1.75rem), env(safe-area-inset-left, 0px));
}
/* ============================================================
2. header.css
============================================================ */
/* Dropdown caret gap (header.css:83). */
[dir="rtl"] .nav-dropdown > a::after { margin-left: 0; margin-right: 0.35rem; }
/* Desktop dropdown panel. header.css:88 pins it to the trigger's right edge;
mirrored, it must pin to the left edge or it overflows the viewport on the
last nav item. */
[dir="rtl"] .dropdown-menu { right: auto; left: 0; }
@media (min-width: 961px) {
/* Staggered entry, header.css:260. */
[dir="rtl"] .dropdown-menu a { transform: translateX(4px); }
[dir="rtl"] .nav-dropdown:hover .dropdown-menu a,
[dir="rtl"] .nav-dropdown:focus-within .dropdown-menu a { transform: none; }
}
@media (max-width: 960px) {
/* The drawer. header.css:193 parks it off the RIGHT edge at
translateX(100%) and slides it in from the right; in RTL it parks off the
LEFT and slides in from the left. The .open reset is restated because
[dir="rtl"] .main-nav (0,2,0) would otherwise beat .main-nav.open (0,2,0)
on source order and the drawer would never arrive. */
[dir="rtl"] .main-nav { transform: translateX(-100%); }
[dir="rtl"] .main-nav.open { transform: none; }
/* The drawer's cast shadow points back at the edge it came from
(header.css:281). */
[dir="rtl"] .main-nav { box-shadow: 18px 0 40px -20px rgba(20, 33, 44, 0.45); }
/* The +/- expander on a collapsible nav row (header.css:215). There is no
`float: inline-end` with adequate support, so this stays physical and
scoped. */
[dir="rtl"] .nav-dropdown > a::after { float: left; }
/* Sub-menu indent inside the drawer (header.css:203). */
[dir="rtl"] .dropdown-menu { padding: 0 1rem 0 0; }
/* Drawer rows fly in from the edge the drawer came from (header.css:285).
The keyframes cannot be redefined under a [dir] scope — @keyframes is
global and last-defined wins for a given name — so a second animation is
declared and the rows are re-pointed at it by name. */
@keyframes navRowInRtl {
from { opacity: 0; transform: translateX(-16px); }
to { opacity: 1; transform: none; }
}
[dir="rtl"] .main-nav.open > ul > li { animation-name: navRowInRtl; }
/* The auto margin that holds the right-hand control cluster together
(header.css:450). Mirrored, it has to push from the other side or the
toggle jumps to the wrong end of the bar. */
[dir="rtl"] .lang-toggle { margin-left: 0; margin-right: auto; }
}
/* Brand lockup padding (header.css:238). */
[dir="rtl"] .brand { padding-right: 0; padding-left: 0.25rem; }
/* ============================================================
3. footer.css
============================================================ */
/* Quick-link nudge on hover (footer.css:126). */
[dir="rtl"] .footer-col ul li a:hover { transform: translateX(-3px); }
/* .footer-col h3::before is a flex item with no physical offset and mirrors
for free. Confirmed on the pilot. Do not add a rule for it. */
/* ============================================================
4. home.css
Lines 285-286 of home.css are minified single-line blocks and are
deliberately not edited; everything they set is handled from here.
============================================================ */
/* The hero scrim. This is the single most important rule in the file: the
gradient is dark at 0% and nearly clear at 100%, because in LTR the copy
sits on the left. Mirrored, the copy sits on the right, on the clear end,
and the body text drops to roughly 2.4:1. 90deg -> 270deg.
The final LTR declaration is home.css:629-633 (two layers); the phone
variant at home.css:634-638 runs vertically and is already direction-neutral
but has to be restated, because this rule is more specific AND later and
would otherwise leak past it. */
[dir="rtl"] .hero::before {
background:
linear-gradient(270deg, rgba(14, 27, 39, 0.82) 0%, rgba(14, 27, 39, 0.62) 45%, rgba(14, 27, 39, 0.14) 100%),
rgba(14, 27, 39, 0.22);
}
@media (max-width: 900px) {
[dir="rtl"] .hero::before {
background: linear-gradient(180deg, rgba(14, 27, 39, 0.68) 0%, rgba(14, 27, 39, 0.78) 45%, rgba(14, 27, 39, 0.88) 100%);
}
}
/* Hero slides (home.css:285, minified). The 3% entry offset comes from the
trailing edge in LTR. `.is-active` is restated for the same
specificity-plus-source-order reason as the drawer above, and the
reduced-motion reset is restated in section 11. */
[dir="rtl"] .hero-slide { transform: translateX(-3%); }
[dir="rtl"] .hero-slide.is-active { transform: translateX(0); }
/* Hero controls (home.css:285, minified): `left: max(1.5rem, calc((100vw -
1200px)/2))` is a hand-rolled "align to the container's inner edge".
NOTE: as of this commit home.css:474-479 resets .hero-controls to
position:static and pulls it into the content column, so these offsets are
inert on the homepage. They are kept because the minified rule is still in
the file, still absolutely positioned, and will apply again the moment that
later reset is scoped or removed. */
[dir="rtl"] .hero-controls {
left: 1.5rem;
right: max(1.5rem, calc((100vw - 1200px) / 2));
}
@media (max-width: 700px) {
[dir="rtl"] .hero-controls { left: auto; right: 1.5rem; }
}
/* Hero caption gap (home.css:285, minified). */
[dir="rtl"] .hero-caption { margin-left: 0; margin-right: 0.7rem; }
/* Dot progress fill (home.css:366-368) and the rail's active underline
(home.css:542-547): both are scaleX animations that must grow from the
start edge. The dots' own left/right pair is symmetric and stays. */
[dir="rtl"] .hero-dots button::before,
[dir="rtl"] .hero-rail-item::after { transform-origin: right; }
/* Rail labels are ragged on the trailing edge (home.css:533). */
[dir="rtl"] .hero-rail-item { text-align: right; }
/* Divider rules that hang off the start edge of the NEXT cell
(home.css:167 and home.css:843). Getting the sign wrong here puts the rule
inside the wrong cell rather than between the two. */
[dir="rtl"] .stat + .stat::before { left: auto; right: -0.625rem; }
[dir="rtl"] .fact-strip-flush > div + div::before {
left: auto;
right: calc(clamp(1rem, 2.5vw, 2rem) / -2);
}
/* Separator dot between proof items on narrow screens (home.css:870). */
@media (max-width: 1080px) {
[dir="rtl"] .hero-proof li + li::before { margin-right: 0; margin-left: 0.5rem; }
}
/* NOT overridden, deliberately:
- .hero::after (home.css:20, :420-432) and
.hero-content.is-active .accent::after (home.css:356-360) are both set to
display:none at home.css:851-853. Adding RTL rules for them would be dead
code that reads as a live requirement.
- .hero-dots button::after {left:12px;right:12px} is symmetric.
- .hero-scroll-cue / .scroll-mouse::before use left:50% + translateX(-50%)
to centre; centring is direction-neutral. */
/* ============================================================
5. services.css
============================================================ */
/* Services hero scrim, same reasoning as the homepage scrim (services.css:3). */
[dir="rtl"] .services-hero {
background-image: linear-gradient(270deg, rgba(14, 27, 39, 0.94), rgba(14, 27, 39, 0.66)), url("/assets/images/photos/umm-qasr-port-aerial.jpg");
}
/* Aside list chevron: fa-chevron-right (\f054) -> fa-chevron-left (\f053)
(services.css:44-50). The glyph is a leading ::before inside a flex row, so
its position mirrors for free; only the direction it points is wrong. */
[dir="rtl"] .detail-aside li a::before { content: "\f053"; }
[dir="rtl"] .detail-aside li a:hover { transform: translateX(-3px); }
/* Gold section rule above each h2 (services.css:66). */
[dir="rtl"] .detail-content h2::before { left: auto; right: 0; }
/* h1 underline fade (services.css:85). */
[dir="rtl"] .services-hero h1::after {
background: linear-gradient(270deg, var(--accent-light), rgba(224, 188, 110, 0));
}
/* ============================================================
6. products.css
============================================================ */
/* Range index plate on family media (products.css:322, and the phone pass at
products.css:847). */
[dir="rtl"] .family-media .family-index { left: auto; right: 0.875rem; }
@media (max-width: 600px) {
[dir="rtl"] .family-media .family-index { left: auto; right: 0.75rem; }
}
/* Item bullets (products.css:385, 393). */
[dir="rtl"] .item-list li { padding-left: 0; padding-right: 1.25rem; }
[dir="rtl"] .item-list li::before { left: auto; right: 0; }
/* Spec tables. Without this the entire table stays left-aligned inside an
RTL page (products.css:495, 502). */
[dir="rtl"] .spec-table caption,
[dir="rtl"] .spec-table th,
[dir="rtl"] .spec-table td { text-align: right; }
/* Brand choice cards (products.css:613, 629, 648). The hover arrow is a
two-class selector in the source, so it beats the buttons.css section 19
:is() list; the prefix here restores matching-or-higher specificity. */
[dir="rtl"] .brand-choice-logo { left: auto; right: 1.25rem; }
[dir="rtl"] .brand-choice-media .badge { right: auto; left: 1.25rem; }
[dir="rtl"] .brand-choice:hover .card-arrow i,
[dir="rtl"] .brand-choice:focus-visible .card-arrow i,
[dir="rtl"] .brand-choice:focus-within .card-arrow i { transform: translateX(-5px); }
/* Price note accent rule (products.css:658). */
[dir="rtl"] .price-note {
border-left: 0;
border-right: 3px solid var(--brand, var(--accent));
}
/* Horizontal catalogue rail: the "this scrolls" fade belongs on the trailing
end, which mirrors (products.css:785-787). */
@media (max-width: 860px) {
[dir="rtl"] .catalog-nav .container {
mask-image: linear-gradient(270deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
-webkit-mask-image: linear-gradient(270deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
padding-right: 0;
padding-left: 2.5rem;
}
}
/* ============================================================
7. contact.css
============================================================ */
[dir="rtl"] .contact-card { text-align: right; }
/* The hours
: dt on the start edge, dd on the end edge, so the pair reads
as a leader line rather than a collapsed column (contact.css:139, 144). */
[dir="rtl"] .hours-list dd { text-align: left; }
@media (max-width: 480px) {
[dir="rtl"] .hours-list dd { text-align: right; }
}
[dir="rtl"] .hours-list-stack dd { text-align: right; }
[dir="rtl"] .enquiry-list li {
border-left: 0;
border-right: 2px solid var(--accent);
}
/* ============================================================
8. legal.css / about.css
============================================================ */
[dir="rtl"] .legal-content ul { padding-left: 0; padding-right: 1.25rem; }
@media (max-width: 600px) {
[dir="rtl"] .legal-content ul { padding-left: 0; padding-right: 1.125rem; }
}
/* legal.css:40-41 deliberately pins the 74ch measure to the content edge so
it lines up with the hero h1. Mirrored, `margin-left: 0` pins it to the
wrong edge and destroys exactly the alignment the source comment describes. */
[dir="rtl"] .legal-content { margin-right: 0; margin-left: auto; }
[dir="rtl"] .legal-content h2::before { left: auto; right: 0; }
[dir="rtl"] :is(.legal-content h2, .legal-content h3, .legal-content p,
.legal-content ul) { text-align: right; }
/* about.css:24. Note about.css:42-43 (.legal-name-block .arabic) is an
Arabic island inside an LTR page; on the Arabic page it is redundant but
harmless and is left alone. */
[dir="rtl"] .legal-name-block {
border-left: 0;
border-right: 4px solid var(--accent);
}
/* about.css:77 narrows the accent to 3px on phones, but the [dir="rtl"] prefix
above out-specifies that media rule, so Arabic kept a 4px edge where English
showed 3px. Restated inside the same breakpoint. */
@media (max-width: 600px) {
[dir="rtl"] .legal-name-block { border-right-width: 3px; }
}
/* ============================================================
9. certificates.css
css/certificates.css:1 is the whole base sheet on one minified line and is
not edited; its directional declarations are handled from here.
============================================================ */
[dir="rtl"] .certificate-hero::before { right: auto; left: -120px; }
[dir="rtl"] .certificate-hero::after { left: auto; right: -100px; }
/* Count pill gap. Declared three times in the source (line 1, line 13,
line 54); 0.75rem is the one that wins. */
[dir="rtl"] .certificate-jumps span { margin-left: 0; margin-right: 0.75rem; }
/* ...and zeroed again inside the brand cards (certificates.css:169-170),
which is a two-class selector and has to be restated at that specificity. */
[dir="rtl"] .certificate-jumps .cert-brand span { margin-right: 0; margin-left: 0; }
/* .preview-toolbar and .certificate-preview span use justify-content:
space-between, which is direction-aware; the close button moves to the
mirrored corner by itself. Verify rather than pre-emptively override. */
/* ============================================================
10. buttons.css section 19 — the gaps
The existing block covers :hover only, while css/buttons.css:135-138
names :hover, :focus-visible and :focus-within together. A keyboard user
currently gets the LTR advance on an RTL page.
============================================================ */
[dir="rtl"] .btn:focus-visible :is(.fa-arrow-right, .fa-chevron-right, .icon-advance),
[dir="rtl"] :is(.btn-quiet, .card-arrow):is(:focus-visible, :focus-within) i,
[dir="rtl"] :is(.bento-cell, .service-card, .brand-choice, .card):is(:focus-visible, :focus-within) .card-arrow i {
transform: translateX(calc(-1 * var(--icon-advance)));
}
/* ============================================================
11. Reduced motion
NOT optional. css/main.css:1239-1249 and css/buttons.css:544-559 already
reset these transforms, but they reset the LTR declarations. Every RTL
transform declared above is new, loads later, and is more specific, so it
would survive those resets untouched.
============================================================ */
@media (prefers-reduced-motion: reduce) {
[dir="rtl"] .btn:hover i.fa-arrow-right,
[dir="rtl"] .btn:hover svg,
[dir="rtl"] .btn:focus-visible i.fa-arrow-right,
[dir="rtl"] .btn:focus-visible svg,
[dir="rtl"] .btn:focus-visible :is(.fa-arrow-right, .fa-chevron-right, .icon-advance),
[dir="rtl"] .bento-cell:hover .card-arrow i,
[dir="rtl"] .brand-choice:hover .card-arrow i,
[dir="rtl"] .brand-choice:focus-visible .card-arrow i,
[dir="rtl"] .brand-choice:focus-within .card-arrow i,
[dir="rtl"] :is(.btn-quiet, .card-arrow):is(:focus-visible, :focus-within) i,
[dir="rtl"] :is(.bento-cell, .service-card, .brand-choice, .card):is(:focus-visible, :focus-within) .card-arrow i,
[dir="rtl"] .detail-aside li a:hover,
[dir="rtl"] .footer-col ul li a:hover,
[dir="rtl"] .partner-distributor .partner-catalog-link:hover::after {
transform: none;
}
/* home.css:285 has @media(prefers-reduced-motion:reduce){.hero-slide{
transform:none}} inside the minified line; the RTL offset above outranks
it, so it is restated. */
[dir="rtl"] .hero-slide,
[dir="rtl"] .hero-slide.is-active { transform: none; }
@media (min-width: 961px) {
[dir="rtl"] .dropdown-menu a { transform: none; }
}
}
/* products.css:36-43. Same failure mode as .hero::before, and for the same
reason: a gradient ANGLE is physical and does not flip with direction, so
mirroring the layout moved the Arabic hero copy off the 0.97 end of the
scrim and onto the 0.62 end — white h1, lead and breadcrumb over a
near-transparent wash on an arbitrary photograph. The radial white bloom at
88% migrates onto the copy instead of away from it for the same reason.
Mirrored about the vertical axis: 100deg -> 260deg, 88% -> 12%. */
[dir="rtl"] .brand-hero::after {
background:
radial-gradient(ellipse 70% 90% at 12% 6%, rgba(255, 255, 255, 0.14), transparent 62%),
linear-gradient(260deg, rgba(14, 27, 39, 0.97) 0%, rgba(16, 30, 43, 0.92) 42%, rgba(16, 30, 43, 0.62) 100%);
}