/* ============================================================================ NEVERFAIL · ARABIC LOCALIZATION LAYER (nf-ar.css) — Phase 1 ---------------------------------------------------------------------------- Loaded ONLY by the Arabic page set (concepts/ar/*.html), after each page's inline stylesheet, so these rules win ties in the cascade. The English pages never load this file — zero risk to the approved English rendering. Scope of this layer: 1 · Arabic typography (IBM Plex Sans Arabic over the same type scale; letter-spacing neutralized — Arabic script must never be tracked). 2 · RTL corrections for the few physically-anchored elements that dir="rtl" does not flip automatically (dropdown anchors, timeline rails, absolutely-positioned media columns, modal chrome). 3 · Deliberate NON-flips, documented inline: photographic detection imagery, dashboards, camera-feed chrome and the cinematic homepage hero keep their approved composition (images are never mirrored). ========================================================================== */ /* ---------- 1 · Arabic type foundation ---------- */ :root{ /* Arabic-first human voice; Latin glyphs inside Arabic text render from the same family (IBM Plex Latin) so mixed lines keep one visual weight. The machine voice (JetBrains Mono) is kept for English telemetry chrome. */ --font-human:'IBM Plex Sans Arabic','Inter',-apple-system,BlinkMacSystemFont,sans-serif; } html[dir="rtl"] body{line-height:1.6;} /* Arabic script is connected — negative tracking breaks ligatures, positive tracking breaks words. Zero everywhere type is Arabic. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3{letter-spacing:0;} html[dir="rtl"] h1{line-height:1.22;} html[dir="rtl"] h2{line-height:1.32;} html[dir="rtl"] p{line-height:1.85;} /* Machine-styled labels that carry ARABIC copy switch to the human family (JetBrains Mono has no Arabic glyphs — fallback soup is not acceptable). Pure-telemetry chrome (frame bars, LIVE, camera tags, HUD) stays English and keeps the mono voice — see §3. */ html[dir="rtl"] .eyebrow, html[dir="rtl"] .pillar-idx, html[dir="rtl"] .pillar-aud, html[dir="rtl"] .ov-k, html[dir="rtl"] .env-block .k, html[dir="rtl"] .sector-strip a, html[dir="rtl"] .sector-strip span, html[dir="rtl"] .sol-card .idx, html[dir="rtl"] .ent-card .idx, html[dir="rtl"] .fact-card .idx, html[dir="rtl"] .tab, html[dir="rtl"] .demo-caption, html[dir="rtl"] .clients-note, html[dir="rtl"] .stat-note, html[dir="rtl"] .stat .label, html[dir="rtl"] .flagship-copy .pillar-idx{ font-family:var(--font-human); letter-spacing:0; font-weight:500; } /* numbers keep the tabular machine look but from the Plex family so the Arabic unit words beside them match */ html[dir="rtl"] .stat .num, html[dir="rtl"] .t2-num .v{font-family:var(--font-human);} /* KPI figures: isolate each number as its own bidi unit and pin it to the reading-start (right) so every figure aligns consistently with its Arabic label — mixed values like "2 دقيقة" stay internally correct. Replaces the earlier `plaintext` rule, which resolved pure-number cells (52, 93%, 100%) to LTR and left-aligned them, misaligning against right-aligned labels (audit B1/C1). */ html[dir="rtl"] .stat .num, html[dir="rtl"] .cx-stat .v{unicode-bidi:isolate;text-align:right;} /* ---------- 2 · RTL corrections ---------- */ /* nav dropdown panels anchor to the item's start edge */ html[dir="rtl"] .nav-drop{left:auto;right:-14px;} /* underline wipes grow from the reading start (right) */ html[dir="rtl"] .nav-top::after, html[dir="rtl"] .subnav-link::after{transform-origin:right;} /* mobile-menu close control mirrors to the top-left */ html[dir="rtl"] .mobile-menu .close{right:auto;left:24px;} /* arrow affordances travel toward reading direction (the glyphs themselves are already ← in the Arabic markup) */ html[dir="rtl"] .btn:hover .arr{transform:translateX(-3px);} html[dir="rtl"] .prev-link:hover .arr{transform:translateX(-4px);} html[dir="rtl"] .sol-card.ind-prev:hover .prev-link .arr{transform:translateX(-4px);} html[dir="rtl"] .pillar-cta a:hover .arr{transform:translateX(-3px);} /* workflow / journey rails: structural border moves to the right edge */ html[dir="rtl"] .flow-step{ border-left:0;border-right:2px solid rgba(28,28,23,.14); padding:2px var(--space-3) 2px 0; } html[dir="rtl"] .showcase .flow-step, html[dir="rtl"] .sol-hero .flow-step{border-right-color:rgba(242,240,232,.16);} html[dir="rtl"] .flow-step:hover{border-right-color:rgba(28,28,23,.45);transform:translateX(-2px);} html[dir="rtl"] .showcase .flow-step:hover{border-right-color:rgba(242,240,232,.5);} html[dir="rtl"] .flow-arrow{padding:7px 22px 7px 0;} /* system-activity readout sits beside LIVE, which lands at the left in RTL */ html[dir="rtl"] .nf-sys{right:auto;left:98px;} /* asymmetric paddings on the two flagship copy rails */ html[dir="rtl"] .pillar.pillar-compliance .pillar-copy{padding:var(--space-2) var(--space-2) var(--space-2) 0;} html[dir="rtl"] .flagship-copy{padding:var(--space-4) var(--space-4) var(--space-4) var(--space-2);} @media (max-width:980px){ html[dir="rtl"] .flagship-copy{padding:0;} } /* Industries page — headline-anchored media columns are absolutely positioned against the RIGHT edge in the English build; in RTL the text column takes the right side, so the anchored scene mirrors to the LEFT edge. Widths and drops are untouched. */ @media (min-width:981px){ html[dir="rtl"] #retail .env-media{right:auto;left:var(--space-4);} html[dir="rtl"] #manufacturing .env-media{right:auto;left:24px;} } /* ---------- 2b · Homepage hero (cinematic) ---------- DELIBERATE PARTIAL MIRROR. The hero photograph carries baked-in detection chips on its right half; the approved compositing (left copy column, dark left→clear right scrim, camera drift) is built around that photograph and the image-policy forbids mirroring or re-cropping it. The Arabic hero therefore keeps the approved composition — the copy column stays on the physical left, over the dark scrim — while the copy itself is fully RTL (right-aligned Arabic, mirrored CTA order). Ticker mechanics preserved. */ html[dir="rtl"] .hero-cinema .wrap{direction:ltr;} /* pins the column left, as approved */ html[dir="rtl"] .hero-cinema .hero-copy{direction:rtl;text-align:right;} /* Arabic needs taller question slots: two balanced lines at lh 1.22 + head/foot room. The h1 window, every slot and the scroll distances move together — the ticker's structural contract. Timing and easing untouched. */ html[dir="rtl"] .hero-cinema h1{height:2.75em;line-height:1.22;letter-spacing:0;} html[dir="rtl"] .hero-cinema h1 .rq{ height:2.75em;padding:.125em 0; display:flex;align-items:center;justify-content:flex-start; text-wrap:balance; } @media (prefers-reduced-motion: no-preference){ html[dir="rtl"] .hero-cinema h1 .rq-track{animation:heroScrollAr 12s cubic-bezier(.77,0,.18,1) infinite;} } @keyframes heroScrollAr{ 0%,26.7%{transform:translateY(0);} 33.3%,60%{transform:translateY(-2.75em);} 66.7%,93.3%{transform:translateY(-5.5em);} 100%{transform:translateY(-8.25em);} } /* ---------- 2b-i · Homepage hero — intentional RTL recomposition (desktop) ---------- The photograph is NEVER mirrored (image policy). Its baked-in detection chips (MASK COMPLIANCE, BEING SERVED, QUEUE #1) and the people all live in the centre/right bright half; the clean dark negative space is the LEFT third. In Arabic the eye STARTS at the right edge of the copy, so the previous English-inherited box (right edge ~x724 at 1440) put the reading-anchor of the eyebrow + headline straight onto the MASK chip and the barista. Here we seat the whole copy block into the dark left region so the right reading-spine lands in clean dark space (clear of the chip and the barista) and the lines run further left into the dark — art-directed from BOTH the RTL reading direction AND the real photo, not a mechanical mirror, and NOT forced to the extreme right (which would collide with the people/detections). Only the block's horizontal position moves — the h1 ticker width, its 2-line slots, timing and easing are all untouched. ≤980px keeps the stacked layout. */ @media (min-width:981px){ html[dir="rtl"] .hero-cinema .hero-copy{ transform:translateX(-150px); /* right reading-spine → dark negative space */ } /* pull the CTA row a step closer to the value line so headline → value → CTA read as ONE connected RTL unit (Arabic-only minor rhythm tighten; the lead's bottom margin is the real gap source, space-6 → space-5) */ html[dir="rtl"] .hero-cinema .hero-copy p.lead{margin-bottom:var(--space-5);} } /* Solutions hero copy measure breathes a little wider in Arabic */ html[dir="rtl"] .sol-hero-copy p.lead{max-width:48ch;} /* ---------- P1 · mobile overflow containment (Arabic-only, ≤980) ---------- The compliance flagship's product frame carries a long, nowrap English telemetry label ("AI VISION · PPE DETECTION · HYGIENE COMPLIANCE"). Its min-content width (~404–413px) exceeds the 342px single-column mobile track, and grid items default to `min-width:auto`, so they refuse to shrink and push the page scrollWidth past the viewport (Homepage +65px, Solutions +72px — locked, off-screen-left, non-clipping, but non-zero). `min-width:0` lets the single-column grid item shrink to the track; the frame's own `overflow:hidden` plus the frame-bar's existing `text-overflow:ellipsis` then truncate only the decorative label. No Arabic content is lost and the reading-start (right) is untouched. Scoped to `html[dir="rtl"]` — English (which overflowed harmlessly off the right) is unchanged. */ @media (max-width:980px){ html[dir="rtl"] .pillar > *, html[dir="rtl"] .flagship > *{min-width:0;} /* the truncated label is decorative English telemetry — render it LTR so the ellipsis falls on the tail and the recognizable head ("AI VISION · PPE…") is kept, rather than an odd leading "…". Scoped to the two affected cards. */ html[dir="rtl"] .pillar-compliance .frame-showcase .frame-bar > span:first-child, html[dir="rtl"] .flagship .frame-bar > span:first-child{direction:ltr;} } /* ---------- P2 · About "by the numbers" — balanced mobile figures ---------- The explicit-Arabic figures ("أكثر من 12,000", "أكثر من 3 مليارات") are longer than the compact +12,000 / +3B forms and wrap in the narrow two-column mobile cell. A small Arabic-only step-down (26px → 20px) below 430px keeps all four figures on one balanced line, preserving the value-over-label hierarchy. Wording and factual values are unchanged. */ @media (max-width:430px){ html[dir="rtl"] .t2-num .v{font-size:20px;} } /* ---------- P4 · Homepage client marquee — RTL-native motion (Arabic-only) ---------- The marquee scrolls left in LTR (new logos enter from the right, matching L→R reading). For Arabic the native feel is the mirror: logos drift rightward, new ones entering from the left. Reversing the existing `clientsScroll` keyframe (two identical groups → symmetric −50% loop) stays perfectly seamless; only the direction flips. Same logos, speed, spacing; individual logos are NOT mirrored. Hover-pause and reduced-motion behaviour inherit unchanged. */ html[dir="rtl"] .clients-marquee{direction:ltr;} html[dir="rtl"] .clients-track{animation-name:clientsScrollAr;animation-direction:reverse;} /* 3-group track + one-group translate → gap-free, jump-free loop at the wider Arabic container width; direction:ltr gives the track EN's predictable geometry, reverse keeps the RTL-native rightward drift. Same logos, speed and spacing. */ @keyframes clientsScrollAr{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}} /* honor reduced-motion: fall back to the same static, centered logo grid as EN */ @media (prefers-reduced-motion:reduce){ html[dir="rtl"] .clients-track{animation:none;} } /* ---------- 2c · Try Platform modal (visual layer only) ---------- The overlay markup/logic is untouched; these rules only mirror its chrome. Selectors carry the html[dir] prefix so they outrank the injected styles regardless of injection order. */ html[dir="rtl"] .nf-try-x{right:auto;left:14px;} html[dir="rtl"] .nf-try-live{font-family:var(--font-human);letter-spacing:0;font-weight:500;} html[dir="rtl"] .nf-field select{padding:12px 14px 12px 38px;} html[dir="rtl"] .nf-selectchev{right:auto;left:14px;} html[dir="rtl"] .nf-load-steps{text-align:right;} html[dir="rtl"] .nf-load-fill{left:auto;right:0;} /* identifier-format fields read left-to-right even in the Arabic form (the number field stays RTL: its placeholder is Arabic and digit runs render correctly inside RTL on their own) */ html[dir="rtl"] .nf-field input[type="email"], html[dir="rtl"] .nf-field input[type="tel"]{direction:ltr;text-align:left;} /* ---------- 3 · Deliberate NON-flips (documented) ---------- · .hero-cinema-bg / scrim / .nfl-hud / .nfl-toasts — approved hero compositing over the unmirrored photograph (see §2b). · .tile-tag, .feed-chrome, .op-chips — camera-feed chrome positioned over unmirrored detection photography; physical positions were QA-approved against these exact images and are kept to avoid new collisions. · .frame-bar content, LIVE badges, MONITORING…/PROCESSING… readouts, journey time-stamps — English product telemetry, matching the (English) product screens and demo platform they label. · Dashboards, detection scenes, client and brand logos — image policy: reused untouched, never mirrored, never re-encoded. */ /* ---------- 4 · NEVERFAIL brand lockup — NEVER mirrored (manager feedback) ---------- The logo is one fixed graphic, identical to the English site: red monogram on the LEFT, NEVERFAIL wordmark on the RIGHT. Only the surrounding navigation stays RTL; the lockup's internal order never flips. */ html[dir="rtl"] .brand{direction:ltr;}