/* Arabic (RTL) layer for the LODISNA capture. * * Loaded last in so it wins the cascade over the theme's LTR rules. * * THE FONT IS THE WHOLE POINT. The theme sets font-family: Type1/Type2 on nearly * every element, and those faces carry no Arabic glyphs. A font missing the * glyphs pushes the browser into per-character fallback, and per-character * fallback destroys Arabic shaping: every letter renders in its isolated form * and the words come apart. That is why the headings looked like loose letters. * So Cairo — vendored into ./fonts/ — is forced with !important over every * element the theme styles, and it carries Latin too, so LODISNA, Volvo and * HVO100 keep rendering inside Arabic sentences from the same family. */ /* ---- vendored Arabic + Latin faces ------------------------------------- */ @font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/cairo-400-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/cairo-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/cairo-600-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/cairo-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/cairo-700-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Cairo"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/cairo-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } /* ---- force the family over the theme ----------------------------------- */ /* The theme names Type1/Type2 on individual selectors, so a body rule alone loses on specificity. This has to reach everything that renders text. */ html[dir="rtl"], html[dir="rtl"] * { font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif !important; } /* Icon fonts must keep their own family or the glyphs turn into letters. */ html[dir="rtl"] [class*="fa-"], html[dir="rtl"] [class*="icon-"], html[dir="rtl"] .vcpb-plugin-icons, html[dir="rtl"] .vc_grid_v1, html[dir="rtl"] i[class^="icon"], html[dir="rtl"] i[class*=" icon"], html[dir="rtl"] .swiper-button-next, html[dir="rtl"] .swiper-button-prev { font-family: inherit !important; } html[dir="rtl"] [class*="fa-"]::before, html[dir="rtl"] [class*="icon-"]::before, html[dir="rtl"] .swiper-button-next::after, html[dir="rtl"] .swiper-button-prev::after { font-family: revert !important; } /* Letter-spacing tuned for a Latin display face pulls Arabic letters apart even when they are correctly joined. Arabic is never letter-spaced. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] a, html[dir="rtl"] span, html[dir="rtl"] li, html[dir="rtl"] button, html[dir="rtl"] .btn { letter-spacing: normal !important; word-spacing: normal !important; } /* ---- the hero headline ------------------------------------------------- */ /* The theme sets the hero h1 to a fixed 200px, sized for "TRANSPORT" / * "& LOGISTICS". Arabic says the same thing in more characters — النقل / * والخدمات اللوجستية — so at 200px the second line runs past the viewport and * gets clipped. Only the hero h1 carries children (article headings are * a plain h1 at 64px), so scoping on the span keeps article titles untouched. */ /* DESKTOP ONLY. The 200px problem exists only on wide screens; on a phone the * theme already drops the hero to ~64px, and applying 8.4vw there computed * 32.8px — half the English size — which is why the Arabic hero looked shrunken * on mobile while English did not. Below 900px the theme's own size is left * alone. */ @media (min-width: 900px) { html[dir="rtl"] h1 > span { font-size: clamp(28px, 8.4vw, 150px); line-height: 1.12; display: block; white-space: normal; overflow-wrap: break-word; } html[dir="rtl"] h1:has(> span) { line-height: 1.12; } } /* PHONE ONLY. At the theme's own mobile size (64px) the Arabic hero does not * fit: "والخدمات اللوجستية" needs ~570px against the 366px available, and the * theme forbids wrapping, so the line ran off the right edge entirely — * measured at x=378..745 in a 390px viewport. Allow it to wrap and size it to * the viewport so the longest line lands inside. Desktop is untouched: this * block cannot apply above 899px. */ @media (max-width: 899px) { html[dir="rtl"] h1 > span { font-size: clamp(22px, 10.5vw, 46px); line-height: 1.18; white-space: normal !important; overflow-wrap: break-word; display: block; } html[dir="rtl"] h1 { white-space: normal !important; } /* The open mobile menu sat flush against the right edge: measured, its list box * was 23..390 in a 390px viewport, against 12..378 for English — 12px of inset * on the left and none on the right. Mirror the inset so the Arabic items stand * off the edge by the same amount the English ones do. */ html[dir="rtl"] nav ul, html[dir="rtl"] .menu, html[dir="rtl"] header ul, html[dir="rtl"] [class*="menu"] ul { margin-right: 12px; } } /* ---- base direction ---------------------------------------------------- */ html[dir="rtl"], html[dir="rtl"] body { direction: rtl; text-align: right; } /* Arabic sits lower in its em box than Latin, so body copy gets a little more leading. Headings do NOT: the theme draws decorative rules at fixed offsets from the heading block, and extra leading pushes the last line down onto them. Measured at 1288px: the rule sits at y=557 in both languages, while a 1.45 line-height made the Arabic heading's third line land on it. Cairo carries enough internal leading that 1.15 clears its diacritics without growing the block. */ html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] td, html[dir="rtl"] dd { line-height: 1.9; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { line-height: 1.15; } /* ---- text alignment ---------------------------------------------------- */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6, html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] dt, html[dir="rtl"] dd, html[dir="rtl"] blockquote, html[dir="rtl"] figcaption, html[dir="rtl"] label { text-align: right; } html[dir="rtl"] .text-center, html[dir="rtl"] [class*="align-center"], html[dir="rtl"] [style*="text-align: center"], html[dir="rtl"] [style*="text-align:center"] { text-align: center !important; } /* ---- lists ------------------------------------------------------------- */ html[dir="rtl"] ul, html[dir="rtl"] ol { padding-right: 1.4em; padding-left: 0; } html[dir="rtl"] ul li, html[dir="rtl"] ol li { text-align: right; } /* ---- floats and flow --------------------------------------------------- */ html[dir="rtl"] .alignleft { float: right; margin-left: 1.5em; margin-right: 0; } html[dir="rtl"] .alignright { float: left; margin-right: 1.5em; margin-left: 0; } html[dir="rtl"] .row, html[dir="rtl"] [class*="grid"], html[dir="rtl"] [class*="columns"], html[dir="rtl"] [class*="flex-row"] { direction: rtl; } html[dir="rtl"] [class*="row-reverse"] { flex-direction: row !important; } /* ---- navigation and footer -------------------------------------------- */ html[dir="rtl"] nav ul, html[dir="rtl"] .menu, html[dir="rtl"] .nav, html[dir="rtl"] header ul, html[dir="rtl"] footer ul { padding-right: 0; } html[dir="rtl"] nav li, html[dir="rtl"] .menu li { text-align: right; } html[dir="rtl"] .sub-menu, html[dir="rtl"] .dropdown-menu, html[dir="rtl"] [class*="submenu"] { right: 0; left: auto; text-align: right; } /* ---- forms ------------------------------------------------------------- */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; direction: rtl; } html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="number"] { direction: ltr; text-align: right; } /* ---- tables ------------------------------------------------------------ */ html[dir="rtl"] table { direction: rtl; } html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; } /* ---- things that must NOT flip ---------------------------------------- */ html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] kbd, html[dir="rtl"] samp, html[dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; text-align: left; } /* Sliders and the WebGL canvas are positioned by script in pixel space; flipping their container fights the script and makes them jitter. */ html[dir="rtl"] .swiper, html[dir="rtl"] .swiper-wrapper, html[dir="rtl"] [class*="marquee"], html[dir="rtl"] [class*="carousel"], html[dir="rtl"] [class*="slider"], html[dir="rtl"] canvas { direction: ltr; } html[dir="rtl"] .swiper-slide, html[dir="rtl"] [class*="slide"] > * { direction: rtl; text-align: right; } /* The language switcher names languages in their own scripts. */ html[dir="rtl"] .trp-language-switcher, html[dir="rtl"] .trp_language_switcher_shortcode { direction: ltr; } html[dir="rtl"] .trp-ls-shortcode-language { text-align: left; } html[dir="rtl"] body { scrollbar-gutter: stable; } /* ---- left-to-right data inside right-to-left copy ---------------------- */ /* A phone number and a street address are LEFT-TO-RIGHT runs. Dropped into an * RTL paragraph the bidi algorithm keeps the digits inside each group in order * but lays the GROUPS out right to left, because the spaces between them are * neutral and take the paragraph direction. Measured on /ar/ at 1440x900, * reading each rendered box left to right: * * [+34] 948 85 34 53 painted 53 34 85 948 ]34+[ * [+33] 5 59 93 24 56 painted 56 24 93 59 5 ]33+[ * [+212] 539 940 932 painted 932 940 539 ]212+[ * 12 Rue Alegera BP 80052 painted Rue Alegera BP 80052 12 * 64990 Mouguerre painted Mouguerre 64990 * 90000 Tangier painted Tangier 90000 * 31119 Imárcoain (Nav.) painted Imárcoain (Navarra) 31119 * * direction:ltr alone does NOT fix this — on an inline box the direction * property has no bidi effect while unicode-bidi is normal, which is why the * elements rtl.js had already forced to ltr still painted backwards. * * unicode-bidi:plaintext is the right tool rather than a blanket direction:ltr: * it resolves EACH line (a
ends a bidi paragraph) from its own first * strong character. So the Latin address lines and the phone numbers — which * contain no strong character at all, and therefore default to LTR — come out * left to right, while "مدينة النقل في بامبلونا." on the line above them stays * right to left with its full stop on the left where it belongs. A blanket * direction:ltr would have flipped that Arabic line's punctuation to the wrong * end. text-align is untouched, so every line still hugs the right edge of its * column. * * Site-wide, not footer-only: the same strings appear in the body of * /ar/contact/, and they have to read the same way on every page. */ html[dir="rtl"] .pamplona, html[dir="rtl"] .francia, html[dir="rtl"] .marruecos, html[dir="rtl"] [id^="datos-"], html[dir="rtl"] a[href^="tel:"], html[dir="rtl"] a[href*="goo.gl"], html[dir="rtl"] a[href*="google.com/maps"] { unicode-bidi: plaintext; } /* ---- footer, phone only ------------------------------------------------ */ /* Same query the theme uses for its own mobile footer, so nothing here can * reach a desktop window that merely happens to be narrow. */ @media screen and (max-device-width: 440px) { /* The theme parks the certification label beside the city with left:24vw, * width:22vw — i.e. hard against the right-hand edge of the 48vw PAMPLONA * column. That is clear of a left-aligned "PAMPLONA" (ink 11.7..82) but lands * exactly on a right-aligned "بامبلونا" (ink 135.3..175.5): measured, the * label's own ink was 128.3..179.4 at y 55.8..68.8, two text runs on top of * each other. Mirrored inside the column — 48vw - 24vw - 22vw = 2vw — the * label sits at the other end of the same line, ink 42.5..93.6, clear of the * city by 41.7px. Desktop is untouched: there the label is at its static * position above the city already, ink 956..1008.4 against the city's * 966..1008.4 at y 461.5, and does not collide. */ html[dir="rtl"] .footer #cert { left: 2vw; } /* rtl.css pins [class*="submenu"] to right:0 so the footer's legal-link * column mirrors. That left it flush with the viewport edge — every link * ended at exactly x=390 in a 390px window while every other footer column * stops at 378. Give it the same 12px inset. */ html[dir="rtl"] .footer .submenu { right: 12px; } } /* ======================================================================== */ /* ==== ARABIC PAGE DEFECTS (contact block, policy tables, back-to-top) ==== */ /* Appended block. Nothing above this line was edited or reformatted. */ /* ======================================================================== */ /* ---- /ar/contact/ : the address column was printed over the maps -------- */ /* The theme puts the map and the address side by side and separates them with * `margin-right: 2vw` on the map — a physical gutter that assumes the map is on * the LEFT. In RTL the map is on the right, so that margin lands on the OUTSIDE * edge and the gutter between the two columns disappears. * * Measured at 1440x900, /ar/contact/ against /en/contact/: * EN map 720..1154 text 1183..1414 gutter 29px, text clear of the map * AR map 977..1411 text 815..977 gutter 0px, text touching the map * and the city label #direcc-spain sat at 1358..1440, hard against the viewport * edge, where English has it at 720..836 inside its own column. * * On a phone the theme also gives the address `margin-left: 54vw` to clear an * absolutely positioned map — another physical offset. In RTL the map moves to * the right and that margin pushes the text right as well, so the two land on * top of one another. Measured at 390x844: * EN map 12..209 text 222..378 (13px apart) * AR map 174..371 text 225..378 (146px of overlap — the defect) * * Both are fixed by mirroring the offsets rather than by inventing new ones, so * the design keeps its own 2vw gutter and its own 54vw column split. */ html[dir="rtl"] #maps-spain, html[dir="rtl"] #maps-france { margin-right: 0; margin-left: 2vw; } /* Desktop only — the complement of the theme's own `max-device-width: 440px` * mobile block, so a narrow desktop window cannot pick this up while the * theme's phone rules are inactive. #direcciones is `left: 50vw; width: 50vw`, * i.e. it starts in the middle and ends ON the right edge of the screen. In LTR * that end is the harmless one; in RTL it is where every line begins, so the * column is pulled 2vw off the edge — the same inset English has at the far end * of its own column. */ @media screen and (min-device-width: 441px) { html[dir="rtl"] #direcciones { width: 48vw; } } /* Phone only — the same query the theme uses for the rules being mirrored. */ @media screen and (max-device-width: 440px) { html[dir="rtl"] #datos-spain, html[dir="rtl"] #datos-france { margin-left: 0; margin-right: 54vw; } } /* ---- the "back to top" pill: Arabic ink outside its own border ---------- */ /* The pill is sized for capitals: `padding: 0.1vw 0.5vw 0.05vw` is under a pixel * top and bottom, and the label is centred on a 13.1px line box. Latin caps are * 12px tall and fit. Cairo's Arabic ink box is 20px at the same 10.92px font * size — the ascenders on ا/ل and the descender on ى — so it spilled past the * border on both edges. Measured on /ar/contact/ at 390x844: * EN border y 422.3..438.0 text y 423.7..435.7 (inside) * AR border y 422.3..438.0 text y 419.7..439.7 (2.6px out at the top, * 1.7px out at the bottom) * and at 1440x900 AR text y 447.3..469.3 against a border of 449.8..467.8, so * this is a genuine desktop fault too, not a phone-only one. * The horizontal padding is raised as well: at 1.95px the first letter sat on * the 11.7px rounded stroke at the right-hand end of the pill. * .back-home is the same component at the other end of the same section and * measured the same way (AR text 1170.3..1190.3 inside a 1172.6..1190.0 * border), so the pair is corrected together and keeps matching. */ html[dir="rtl"] .backtotop .backtop, html[dir="rtl"] .backtotop .back-home { line-height: 1.9; padding-top: 0.15em; padding-bottom: 0.15em; padding-left: 0.9em; padding-right: 0.9em; } /* ---- hero paragraph clipped on the right ------------------------------- */ /* On a phone the theme lays these out as `position: relative; width: 94vw; * left: 3vw` — a physical nudge that, in LTR, moves a box sitting at x=0 out to * the 3vw page margin. In RTL the box already starts at the RIGHT margin, and * `left: 3vw` pushes it a further 11.7px OFF the screen; the section is * `overflow-x: hidden`, so the overflow is cut rather than scrollable, and in * RTL the cut edge is the one every line BEGINS at. Measured at 390x844: * EN article x 12..378 (inside a 390px viewport) * AR article x 35..402 (the first letters of every line lost) * Mirroring the offset restores x 12..378. Desktop is not affected — there the * article is `position: absolute` with an explicit `left`, and AR and EN both * measure x 43..533 — so this is scoped to the theme's own phone query. */ @media screen and (max-device-width: 440px) { html[dir="rtl"] #logistica article, html[dir="rtl"] #empresa article { left: auto; right: 3vw; } } /* ---- the staggered hero heading ---------------------------------------- */ /* The two lines are deliberately offset: line 1 to the left, line 2 to the * right, so English reads OPERADOR then LOGÍSTICO down and across. Arabic reads * the other way, so keeping the same physical alignment put the FIRST word * (مشغّل) at the far left and the second (لوجستي) at the right — the stagger ran * backwards. Swapping the two alignments mirrors the design. */ html[dir="rtl"] #main_logistica h1 span { text-align: left; } html[dir="rtl"] #main_logistica h1 span:first-child { text-align: right; } /* ---- the cookie / privacy tables on a phone ----------------------------- */ /* These are Word-style tables: `` with a hard-coded pixel * width on every cell (199/57/113/104/95/85). In a 366px column the browser * cannot honour them, so it scales them down and the description column ends up * about 80px wide — Arabic then wraps to one word per line for 20+ rows — while * the rest of the table hangs off the side of the screen. Measured at 390x844 on * /ar/politica-privacidad/: table x -118..378, and `.scroll-content` * scrollWidth − clientWidth = 118, with no scroll container anywhere above it * (every ancestor is overflow-x: visible and .scroller is overflow: hidden), so * those 118px are simply invisible: the "لا" cell measured x -116..-49 and the * heading read "odisna.com" with the "www.l" cut off. * * On a phone the columns are stacked instead, each value under its own column * heading — the heading text is copied onto the cells by rtl.js as data-lds-th. * Desktop keeps the real table, and English keeps it at every size. Note that * the English page overflows at this width too — that is a fault of the original * markup, not of the RTL layer — but it is only ruinous in Arabic, where the cut * edge is the one every line starts from. */ @media screen and (max-device-width: 440px) { html[dir="rtl"] table.lds-stack, html[dir="rtl"] table.lds-stack thead, html[dir="rtl"] table.lds-stack tbody, html[dir="rtl"] table.lds-stack tr, html[dir="rtl"] table.lds-stack th, html[dir="rtl"] table.lds-stack td { display: block; width: auto !important; max-width: 100%; } html[dir="rtl"] table.lds-stack { margin: 0; } html[dir="rtl"] table.lds-stack thead, html[dir="rtl"] table.lds-stack tr.lds-th-row { display: none; } html[dir="rtl"] table.lds-stack tr { border: 1px solid var(--azul); padding: 2.5vw 3vw; margin-bottom: 3vw; } html[dir="rtl"] table.lds-stack td, html[dir="rtl"] table.lds-stack th { border: 0; padding: 1vw 0; height: auto; overflow-wrap: anywhere; } html[dir="rtl"] table.lds-stack td + td, html[dir="rtl"] table.lds-stack th + th { border-top: 1px solid rgba(1, 28, 77, 0.18); } /* Vertical-centring spacers from the original Word export; see rtl.js. */ html[dir="rtl"] table.lds-stack .lds-blank { display: none; } html[dir="rtl"] table.lds-stack td[data-lds-th]::before { content: attr(data-lds-th); display: block; font-weight: 700; font-size: 85%; opacity: 0.65; margin-bottom: 0.15em; } /* A bare URL is one unbreakable token: the Google support link measured * x −91..379, its first 91px off the left edge of the screen. Breaking is * allowed only inside these policy pages and only on a phone. */ html[dir="rtl"] .cookie_pag p, html[dir="rtl"] .cookie_pag a, html[dir="rtl"] .cookie_pag li, html[dir="rtl"] .poli p, html[dir="rtl"] .poli a, html[dir="rtl"] .poli li { overflow-wrap: anywhere; } } /* ---- policy-table cells that are not Arabic ---------------------------- */ /* `_ga` painted as `ga_` and `.lodisna.com` as `lodisna.com.`: a leading dot * and a leading underscore are bidi-neutral, so inside a right-to-left cell * they were carried to the far end of the run. plaintext resolves each cell * from its OWN first strong character, so a cell holding a domain or a cookie * name comes out left to right and an Arabic cell is untouched. text-align is * not changed, so every value still hugs the right edge of its column. This is * a text fault, not a layout one, and it is present at both sizes. */ html[dir="rtl"] .cookie_pag td, html[dir="rtl"] .cookie_pag th, html[dir="rtl"] .poli td, html[dir="rtl"] .poli th { unicode-bidi: plaintext; } /* ---- /ar/hiring/ : the submit button sat on the acceptance line --------- */ /* `#aceptar_form` is `position: absolute; left: 7vw` — a physical inset from * the START of the button row in English, but from the FAR end of it in Arabic, * so the acceptance sentence ran all the way to the right edge and the submit * pill was painted over its words. Measured at 390x844 before the fix: submit * x 333..377 against `#aceptar_form p` x 69..377. English overlaps only its own * checkbox (submit x 28..75, box x 56..364); mirroring the inset reproduces * that same relationship on the other side. */ html[dir="rtl"] #aceptar_form { left: auto; right: 7vw; } /* ---- bare URLs inside the policy copy ---------------------------------- */ /* `www.google.com/analytics/` painted as `/www.google.com/analytics`: the * trailing slash is bidi-neutral, so an RTL paragraph carried it round to the * other end of the link. Resolving each anchor from its own first strong * character keeps a URL left-to-right and leaves an Arabic link text alone. */ html[dir="rtl"] .cookie_pag a, html[dir="rtl"] .poli a { unicode-bidi: plaintext; }