/* Voltux — installateursportaal in het Arabisch (Arabisch portaal A1, 2026-09-17). Alleen geladen als de weergavetaal Arabisch is (). Lettertype: Cairo — gekozen door de gebruiker (IBM Plex Sans Arabic was te dun). Eén variabel bestand voor alle diktes 400–800 (30 KB). Zelf gehost in /shared/fonts/ (net als Inter): geen verzoek naar Google, dus geen IP-adres van de installateur naar een derde partij. unicode-range = alleen Arabische tekens: Latijnse tekst, cijfers en e-mailadressen blijven in Inter, zoals in de rest van het portaal. Ontbreekt het bestand, dan valt de browser terug op het Arabische systeemlettertype. Bestand: Google Fonts, Cairo v31, subset "arabic" (2026-09-17). Licentie: SIL Open Font License 1.1. Richting: de browser draait flex/grid al om door dir="rtl". Hier alleen wat vast "links"/"rechts" is in de gewone stylesheets, en pijlen die mee moeten draaien. */ @font-face { font-family: 'Cairo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/shared/fonts/cairo-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } :root[dir="rtl"] { --font-sans: 'Inter', 'Cairo', 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Geeza Pro', system-ui, sans-serif; } /* Arabisch heeft geen hoofdletters en geen letterafstand nodig; iets meer regelhoogte leest rustiger */ :root[dir="rtl"] body { line-height: 1.6; } :root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3 { letter-spacing: 0 !important; } :root[dir="rtl"] [class*="titel"], :root[dir="rtl"] [class*="label"] { letter-spacing: 0; text-transform: none; } /* Latijnse gegevens (: e-mail, telefoon, #1043, IBAN) nooit afbreken midden in */ bdi[dir="ltr"] { unicode-bidi: isolate; white-space: nowrap; } /* Pijlen en "vooruit"-iconen spiegelen */ :root[dir="rtl"] .ti-arrow-left::before, :root[dir="rtl"] .ti-arrow-right::before, :root[dir="rtl"] .ti-chevron-left::before, :root[dir="rtl"] .ti-chevron-right::before, :root[dir="rtl"] .ti-chevrons-left::before, :root[dir="rtl"] .ti-chevrons-right::before, :root[dir="rtl"] .ti-login-2::before, :root[dir="rtl"] .ti-door-exit::before, :root[dir="rtl"] .ti-mail-forward::before, :root[dir="rtl"] .ti-player-play::before { display: inline-block; transform: scaleX(-1); } /* ══ Portaal (werknemer-portal.css) ══ */ :root[dir="rtl"] .wn-toggle-slider::before { left: auto; right: 3px; } :root[dir="rtl"] .wn-toggle input:checked + .wn-toggle-slider::before { transform: translateX(-18px); } :root[dir="rtl"] .wn-sidebar-link.active { box-shadow: inset -3px 0 0 var(--green-500); } /* ══ Opdrachten (A2) ══ */ @media (max-width: 860px) { :root[dir="rtl"] .op-detail { transform: translateX(-100%); } :root[dir="rtl"] body.op-toon-detail .op-detail { transform: none; } } /* ══ Invoervelden met eigen richting (dir="ltr" / dir="auto") ══ Logische padding (padding-inline-start) volgt de richting van het VELD, maar het icoon staat op de richting van de PAGINA. In een Arabische pagina met een Latijns veld (e-mail, wachtwoord, zoeken) liep de tekst daardoor over het icoon heen. Hier vast: icoonkant = rechts. */ :root[dir="rtl"] .wi-invoer input { padding-left: 14px; padding-right: 44px; } :root[dir="rtl"] .wi-invoer:has(.wi-oog) input { padding-left: 50px; } :root[dir="rtl"] .ac-invoer .wn-input { padding-left: 46px; padding-right: var(--space-3); } :root[dir="rtl"] .op-zoek input { padding-left: 12px; padding-right: 34px; }