/* Arabic.ai, Arabic right-to-left layer (arabic-ai-ar/rtl/ar.css). Loaded on every page after brand.css and pages.css by build_ar.py. The English files stay as they are; everything Arabic-specific is here. Type: IBM Plex Sans Arabic (SIL Open Font License 1.1, OFL.txt beside the font files), self-hosted, Arabic codepoints only. The URLs below say /brand/fonts/; the build points them at the English build's identical copy (/brand/fonts/) when there is one. It is put first in each font stack as its own family, so Arabic letters use it and Latin letters and digits keep Aeonik (which has no Arabic). */ @font-face{font-family:'AAI Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.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} @font-face{font-family:'AAI Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-500-normal.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} @font-face{font-family:'AAI Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-600-normal.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} @font-face{font-family:'AAI Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-700-normal.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} /* The same face for the small monospaced labels (eyebrows, field names, dates, tags), 12% larger: the English sets these in spaced Latin capitals, which Arabic letters at the same size fall well short of. Same files, so nothing more is downloaded. */ @font-face{font-family:'AAI Arabic Label';font-style:normal;font-weight:400;font-display:swap;size-adjust:112%;src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-400-normal.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} @font-face{font-family:'AAI Arabic Label';font-style:normal;font-weight:500;font-display:swap;size-adjust:112%;src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-500-normal.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} @font-face{font-family:'AAI Arabic Label';font-style:normal;font-weight:600;font-display:swap;size-adjust:112%;src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-600-normal.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} @font-face{font-family:'AAI Arabic Label';font-style:normal;font-weight:700;font-display:swap;size-adjust:112%;src:url(/brand/fonts/ibm-plex-sans-arabic-arabic-700-normal.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} /* In the monospaced labels, spaces and punctuation between Arabic words come from Aeonik (a proportional face), so Arabic phrases are not spread out; Latin letters and digits stay mono. */ @font-face{font-family:'AAI Punct';font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/immutable/media/AeonikPro_Regular-s.p.00jgyx3zdprqc.woff2) format('woff2');unicode-range:U+20-22,U+27-29,U+2C,U+2E,U+3A-3B,U+3F,U+A0} :root,body{--font-aeonik:'AAI Arabic',aeonik,'aeonik Fallback'!important;--font-aeonik-mono:'AAI Arabic Label','AAI Punct',mono,'mono Fallback'!important;--font-mono:'AAI Arabic Label','AAI Punct',mono,'mono Fallback'!important} code,pre,kbd,samp,.sd3-code{font-family:mono,'AAI Arabic','mono Fallback',ui-monospace,monospace!important} .aai-at{--at-serif:'TRJN DaVinci Display','AAI Arabic',Georgia,serif;--at-sans:'Neue Montreal','AAI Arabic',aeonik,system-ui,sans-serif} .pm-stage [lang=ar],.aai-at__doc [lang=ar],.aai-at__scan-ar,.aai-at__say{font-family:var(--font-aeonik)!important} /* Arabic letters join: tracking would pull them apart. */ html[lang=ar] body,html[lang=ar] body *{letter-spacing:0!important} /* ---- Direction-bearing icons --------------------------------------------------------------- Arrows and chevrons point the way Arabic reads. Checkmarks, play and vertical arrows stay. The icons are found by their drawing, so the same rule covers every page and script. */ svg:has(>path[d="M5 12h14M13 5l7 7-7 7"]),svg:has(>path[d="M7 17 17 7M8 7h9v9"]),svg:has(>path[d="m9 18 6-6-6-6"]), svg:has(>path[d="M7 17 17 7"]),svg:has(>path[d^="M14.536 21.686"]){transform:scaleX(-1)} /* ---- Bar above the navbar ------------------------------------------------------------------ */ .pg-ann__close{right:auto;left:max(8px,calc(var(--pg-gut) - 10px))} @media (max-width:767px){.pg-ann{padding:9px 16px 0 48px}.pg-ann p{margin-right:0;margin-left:.3em}} [role=region][aria-label="إعلان"] button.absolute{right:auto!important;left:.75rem} @media (min-width:768px){[role=region][aria-label="إعلان"] button.absolute{left:var(--grid-inset)}} /* Hero "Scroll to explore" cue: bottom right in English (compiled right-10 on phones, brand.css right:var(--grid-inset) from 768 px), so bottom left here. */ .HomeHero .absolute[class~="right-[72px]"][class~="max-md:right-10"]{right:auto!important;left:2.5rem} @media (min-width:768px){.HomeHero .absolute[class~="right-[72px]"][class~="max-md:right-10"]{left:var(--grid-inset)}} /* On phones the bar's text and link run inline; the space before the link is a physical margin. */ @media (max-width:639px){[class*="max-w-[1472px]"] .flex.flex-wrap.gap-x-3.gap-y-1>*+*{margin-left:0;margin-right:6px}} /* Homepage navbar: the language switch and CTA are pushed to the outer edge by a physical margin-left:auto, which in the mirrored grid would leave them inside their cell. */ @media (min-width:768px){header .md\:ml-auto{margin-left:0;margin-right:auto}} /* Menu hover-preview cards (brand.css pushes them right with margin-left:auto). */ header [class*="min-h-[192px]"] .rounded-xl{margin-left:0;margin-right:auto} /* ---- Buttons -------------------------------------------------------------------------------- The arrow button (FlatCta) runs in its "left" direction here (rtl/patches.py): chevron on the left, pointing left. Its padding is physical in the compiled CSS: the wide side goes to the text. */ .FlatCta .pl-4.pr-1{padding-left:.25rem!important;padding-right:1rem!important} /* ---- Product stages ------------------------------------------------------------------------- The WebGL cards slide to the side the English build chose, and the stage text sits opposite them on wide screens. The grid keeps that physical placement; the text in it reads right to left. */ .PullApartContent{direction:ltr} .PullApartContent>*{direction:rtl} /* The intro ("الذكاء. تحت سيطرتكم.") stays centred like the English (12 October 2026, the user's note); its column is the centred one (3xl:col-start-5). The product stages beside the stack read from the right. */ @media (min-width:1450px){.PullApartContent .text-center:not([class*="3xl:col-start-5"]),.PullApartContent [class*="text-left"]{text-align:right!important}} /* ---- Inner pages ---------------------------------------------------------------------------- */ /* In a row of steps (1024px and up) a step's owner tag sits at the foot of the card, so the tags line up even when an Arabic description takes a line more than its neighbours (the cards of a row are already equal height). Phones show the steps as a rail, laid out by pages.css. */ @media (min-width:1024px){ .pg-step:has(.pg-step__owner){display:flex;flex-direction:column;align-items:flex-start} .pg-step:has(.pg-step__owner)>*{max-width:100%} .pg-step:has(.pg-step__owner) p:has(+ .pg-step__owner){margin-bottom:14px} .pg-step .pg-step__owner{margin-top:auto!important} } .pg-table th{text-align:right;padding:16px 0 16px 16px} .pg-table td{padding:18px 0 18px 16px} /* The product logo above each stage's eyebrow lines up with the right-aligned Arabic in both columns. */ @media (min-width:1450px){.PullApartContent>div>[class*="__category"]::before{background-position:right center!important}} /* ---- Line height ----------------------------------------------------------------------------- Arabic letters rise and fall further than Latin ones, and Arabic headings set as tight as the English (1.0 to 1.1) collide. Headings get about 1.3, running text about 1.75. */ html[lang=ar] :is(h1,h2,h3,.header1,.header2,.header3,.header3-regular,.header4-regular,.pg-h1,.pg-h2,.aai-bento__title){line-height:1.3!important} html[lang=ar] :is(h4,h5,.pg-h3,.aai-partner__title,.header5-regular){line-height:1.4!important} /* Stage titles: the English keeps each on one line at a size fitted to the English length; the longer Arabic titles may wrap (balanced) where one line would overflow, as on phones. */ .PullApartContent .RichText.header4-regular::before{line-height:1.3!important;white-space:normal!important;text-wrap:balance} [class*="ScrollingQuote"] :is(p,strong,em){line-height:1.3!important} html[lang=ar] :is(.pg-lead,.pg-text,.pg-article p,.pg-article li,.body1,.body2-regular,.aai-partner__text){line-height:1.75!important} .pg-cta{line-height:1.3} /* The navbar CTA stays 44 px tall, level with the language switch beside it (English: 15 + 14 + 15; here 12.9 + 18.2 + 12.9 at the Arabic line height). */ .pg-header__cta{padding-top:12.9px;padding-bottom:12.9px} /* ---- Alignment in brand.css ------------------------------------------------------------------ The compiled utilities are mirrored by the build (text-align left <-> right). brand.css rules that say "left" for English copy are mirrored here; its rules for Arabic sample text already say right. */ .navigation-link-mobile{text-align:right} section.BlogPreview [class~="md:mb-20"] p{text-align:right} section.BlogPreview [class~="md:mb-20"] :is(div,span){text-align:right!important} .bv-dep__modes button{text-align:right} /* ---- Bento visuals and their stories (brand.css "bv-", "aai-story", "aai-at") ---------------- Their layout mirrors with the page; these are the physical sides brand.css sets. */ .aai-story__close{right:auto;left:24px} /* the story's close button */ .aai-at__specialists li.is-picked::after{right:auto;left:.8em} /* the tick on a picked specialist */ /* The small Atelier is drawn 500px wide and scaled to its box (bento.js, pages.js "fit"). Right to left the 500px stage starts at the box's right edge, so it scales from there. */ .aai-at__stage{transform-origin:top right} .bv-ann__ok{margin-left:0;margin-right:auto} /* "reviewed", at the row's far end */ .bv-fund__line li::before{left:auto;right:0} /* the funding timeline's dots */ /* bars and rules grow from the side the reading starts */ .bv-llm__bar,.bv-llm__bars i,.bv-bench__bar,.bv-fund__line::before,.aai-at__conf i,.bv-ann__segs i::after{transform-origin:right} .bv-llm__docs b{right:auto;left:-5px} /* the badge on the sell sheet's document icons */ /* LLM sell sheet figures (91.9%): number and sign are flex items, so right to left the sign would lead. They keep the English order and sit at the start (right) edge. */ .bv-llm__fig{direction:ltr;justify-content:flex-end} /* "Trusted by" logo marquee: two copies of the list drift by half the track. Laid out right to left the copies sit off the left edge and the row empties, so the marquee (logos only) keeps the English layout and drifts the other way (logos move right, as the partners carousel does). Phones show a still grid. */ @media (min-width:768px){.aai-trusted__marquee{direction:ltr}.aai-trusted__track{animation-direction:reverse}} /* labels set under 11px for Latin capitals; Arabic letters at that size are too small to read */ .aai-at__no{font-size:.8em} .bv-ann__tag{font-size:11px} .aai-lang__soon,.pm-stage .m-tag{font-size:11px} /* ---- Products menu window (920 x 447 stage, clone-support.js "Products menu") ---------------- Mirrored: the product's copy sits on the right, next to the menu titles, and its moment and cards on the left. The segmented controls' thumbs start from the right. */ .pm-stage{text-align:right} .pm-intro{left:auto;right:0} .pm-copy{padding-right:0;padding-left:32px} .pm-cta{padding:0 20px 0 18px} .pm-scene{left:0;right:calc((100% + var(--g)) / 2)} .pm-solo .pm-scene{left:0;right:0} /* the scene alone (inner pages' hero panels) fills its stage */ .pm-detail :is(.pm-wave,.pm-bars){margin-left:0;margin-right:-48px} .pm-stage .m-thumb{left:auto;right:3px;transform:translateX(calc(var(--i,0) * -100%))} .pm-stage .m-dock-thumb{left:auto;right:5px;transform:translateX(calc(var(--i,0) * (-100% - 4px)))} .pm-stage .m-bubble{margin:10px 14% 0 0!important} .pm-stage .m-player{padding:6px 6px 6px 12px} .pm-stage .m-player .pm-swap,.pm-bars b{text-align:left} .pm-title{line-height:1.3!important} .pm-title .w{padding-bottom:.12em;margin-bottom:-.12em} /* Skip link: parked off the right edge (in a right-to-left page, overflow on the left scrolls). */ .pg-skip{left:auto;right:-9999px} .pg-skip:focus{left:auto;right:8px} /* Two-pane sliders 200% wide (the phone menu's categories and their links; the arrow button's icon strip): in RTL the second pane lies to the left of the first, so they slide the other way. */ .w-\[200\%\].-translate-x-1\/2{--tw-translate-x:50%} /* Lucide chevrons and arrows used by the compiled navigation. */ svg:is(.lucide-chevron-right,.lucide-chevron-left,.lucide-arrow-right,.lucide-arrow-left,.lucide-arrow-up-right,.lucide-move-right){transform:scaleX(-1)} svg:has(>path[d="m15 18-6-6 6-6"]){transform:scaleX(-1)} /* The Voice Studio sample is Arabic already; its English gloss would only repeat it in Arabic. */ .pg-ex-voice__en{display:none} /* ---- Industry pages (rewritten 10 October 2026) ----------------------------------------------- pages.css draws most of these with logical properties; the physical ones are mirrored here. The arrowheads in the horizontal flows (rotated borders) point left, and the blocks reveal from the right. */ @media (min-width:1024px){ .pg-ind-apps [role=tab]{padding:24px 24px 24px 28px} .pg-ind-widen__signals{padding:0 24px 4px 0} .pg-ind-flow__step+.pg-ind-flow__step::after,.pg-ind-flow__join::after,.pg-ind-trace__line::after{transform:rotate(135deg)} } @media (min-width:700px){.pg-ind-options li{padding:24px 36px 24px 0}} .pg-js .pg-ind-widen .pg-ind-widen__block{clip-path:inset(0 0 0 100%)} .pg-js .pg-ind-widen.is-in .pg-ind-widen__block{clip-path:inset(0)} /* Certificate seals: text set on a circle runs left to right along its path (in a right-to-left page it would start from the path's end and fall off it). Each Arabic word still reads normally. */ .pg-tile__seal text{direction:ltr;unicode-bidi:isolate}