/* ============================================================ KAEM Language Toggle — EN / AR lang.css — toggle widget + targeted text-only RTL ============================================================ */ /* ── Toggle widget — base ────────────────────────────────── */ #lang-toggle { display: flex; align-items: center; gap: 2px; /* Push to the right side of the flex header, just left of "Let's Talk" */ margin-left: auto; margin-right: 16px; position: relative; /* Must sit above the absolute-positioned .clapat-nav-wrapper */ z-index: 300; flex-shrink: 0; pointer-events: auto; } .lang-btn { background: none; border: none; padding: 5px 8px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; line-height: 1; outline: none; -webkit-tap-highlight-color: transparent; transition: color 0.25s ease, opacity 0.25s ease; /* ── Default: dark text ───────────────────────────────── dark-content pages (index, who-we-are, product pages) have a LIGHT background → use dark text. */ color: #0c0c0c; opacity: 0.5; } .lang-btn.active { opacity: 1; color: #0c0c0c; } .lang-btn:hover:not(.active) { opacity: 0.75; } .lang-sep { font-size: 10px; color: #0c0c0c; opacity: 0.4; user-select: none; line-height: 1; pointer-events: none; transition: color 0.25s ease; } /* ── light-content pages: DARK background → WHITE text ─── .light-content is on #clapat-page-content (contact.html, software-main-page.html, etc. with bgcolor #02042a). */ .light-content #lang-toggle .lang-btn { color: #ffffff; } .light-content #lang-toggle .lang-btn.active { color: #ffffff; } .light-content #lang-toggle .lang-sep { color: #ffffff; } /* ── white-header: JS adds this to

when scrolling into a light section on a dark-background page → dark. */ .white-header #lang-toggle .lang-btn, .white-header #lang-toggle .lang-sep { color: #0c0c0c !important; } .white-header #lang-toggle .lang-btn.active { color: #0c0c0c !important; } /* ── Desktop guarantee ──────────────────────────────────── */ @media (min-width: 1025px) { #lang-toggle { position: relative; z-index: 300; } } /* ── Mobile / Tablet ────────────────────────────────────── */ @media (max-width: 1024px) { #lang-toggle { margin-left: auto; margin-right: 12px; z-index: 300; } .lang-btn { padding: 4px 5px; font-size: 10px; } } @media (max-width: 479px) { #lang-toggle { margin-right: 8px; } .lang-btn { padding: 3px 4px; font-size: 9px; } } /* ============================================================ ARABIC MODE (.lang-ar on body) IMPORTANT: We NEVER set dir="rtl" on or . Doing so flips every flex container in the entire layout (header, hero, GSAP animations, etc.). Instead we add direction:rtl only to specific TEXT elements that carry [data-i18n] attributes. Layout containers are left completely untouched. ============================================================ */ /* ── Arabic font for all translated text ────────────────── */ body.lang-ar [data-i18n], body.lang-ar [data-i18n-placeholder] { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ── Navigation text — only the text, NOT the flex container */ body.lang-ar .flexnav > li > a .before-span span[data-i18n] { direction: rtl; unicode-bidi: embed; } body.lang-ar .flexnav li > ul li a[data-i18n] { direction: rtl; text-align: right; display: block; } /* ── Hero subtitle spans ─────────────────────────────────── */ body.lang-ar .hero-subtitle span[data-i18n] { direction: rtl; display: block; text-align: center; /* hero subtitles are centred */ unicode-bidi: embed; } /* ── Slide captions ──────────────────────────────────────── */ body.lang-ar .slide-title span[data-i18n] { direction: rtl; text-align: right; display: block; unicode-bidi: embed; } body.lang-ar .slide-description p[data-i18n] { direction: rtl; text-align: right; unicode-bidi: embed; } /* ── Generic content headings ────────────────────────────── */ /* !important overrides inline style="font-family: 'Montserrat-ExtraBold'" */ body.lang-ar h1[data-i18n], body.lang-ar h2[data-i18n], body.lang-ar h3[data-i18n] { direction: rtl; text-align: right !important; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important; unicode-bidi: embed; font-style: normal !important; } /* ── Generic content paragraphs ──────────────────────────── */ /* Matches

*/ body.lang-ar p[data-i18n] { direction: rtl; text-align: right !important; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important; unicode-bidi: embed; } /* Matches

— the p has no data-i18n itself */ body.lang-ar p:has(> span[data-i18n]), body.lang-ar p:has(> [data-i18n]) { direction: rtl; text-align: right !important; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important; } /* ── Inline spans used for headings / labels ─────────────── */ /* !important needed when parent has inline font-family style */ body.lang-ar span[data-i18n] { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important; unicode-bidi: embed; } /* ── Pinned software list (index page) ───────────────────── */ body.lang-ar .pinned-lists li[data-i18n] { direction: rtl; text-align: right; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; /* Cairo renders larger than Montserrat; scale down to match visual weight */ font-size: calc(1rem + 2.5vw) !important; line-height: calc(1rem + 3vw) !important; } /* ── Index intro heading — scale down for Arabic ─────────── */ body.lang-ar .new-hero-title { font-size: calc((1rem + 5vw) / 2) !important; line-height: calc((1rem + 7vw) / 2) !important; } /* Reduce rotator span font-size to match the halved heading size, and give extra line-height for Cairo's tall descenders */ body.lang-ar .new-hero-title span.text-rotator > span { font-size: calc((1rem + 5vw) / 2) !important; line-height: 1.6 !important; } /* Expand the rotator clip-box vertically so Cairo glyph ascenders/descenders are not cut at the top and bottom. padding grows the overflow:hidden clip area; negative margin keeps layout tight. */ body.lang-ar span.text-rotator-wrapper { padding-top: 0.2em; padding-bottom: 0.45em; margin-top: -0.2em; margin-bottom: -0.45em; } /* ── Index address blocks — RTL in Arabic ────────────────── */ body.lang-ar .box-icon-content h6[data-i18n], body.lang-ar .box-icon-content p[data-i18n] { direction: rtl; text-align: right; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* Keep the "a" span hidden in Arabic (translated to empty string) */ body.lang-ar span[data-i18n="index.intro.a"] { display: none; } /* ── Parallax text blocks (Who We Are) ───────────────────── */ /* Before GSAP DOM move: .parallax-list > div > span */ body.lang-ar .parallax-list div span[data-i18n] { direction: rtl; display: block; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* After GSAP DOM move: spans live inside .list-caption within .parallax-content-animation */ /* !important overrides the inline style="font-family: 'Montserrat-ExtraBold'" on the spans */ body.lang-ar .list-caption span[data-i18n] { direction: rtl; display: block; text-align: center; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important; } /* Reduce parallax caption font size in Arabic: .list-caption default is calc((1rem + 12vw) / 2) ≈ 90–120px. Cairo + longer Arabic sentences need a much smaller size. */ body.lang-ar .list-caption { font-size: calc((1rem + 5vw) / 2) !important; line-height: calc((1rem + 7vw) / 2) !important; letter-spacing: 0 !important; } /* ── Parallax pin overlay — must NOT intercept header clicks ─ */ .parallax-content-pin, .parallax-content-animation { pointer-events: none; } /* ── Header "Let's Talk" / Burger text ───────────────────── */ body.lang-ar .header-button .button-text span[data-i18n], body.lang-ar .button-wrap .button-text span[data-i18n] { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; font-size: 11px; letter-spacing: 0; /* Do NOT add direction:rtl here — keeps button in correct position */ } /* ── Contact form — label + input direction only ─────────── */ body.lang-ar .cfv2-label[data-i18n] { direction: rtl; text-align: right; display: block; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } body.lang-ar .cfv2-control { direction: rtl; text-align: right; } body.lang-ar .contact-form-v2-title[data-i18n] { direction: rtl; text-align: right; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ── Contact location titles ──────────────────────────────── */ body.lang-ar .contact-location-title[data-i18n] { direction: rtl; text-align: right; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ── Software page — features menu items ─────────────────── */ body.lang-ar .features-menu-item[data-i18n] { direction: rtl; text-align: right; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ── Software / Products page — dynamic showcase text ────── */ body.lang-ar #software-para, body.lang-ar #software-line1, body.lang-ar #software-line2, body.lang-ar #kiosk-extra-para1, body.lang-ar #kiosk-extra-para2, body.lang-ar #software-words, body.lang-ar #software-os-label { direction: rtl; text-align: right; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ── Products main page — slide captions ─────────────────── */ body.lang-ar .slide-title span[data-i18n], body.lang-ar .slide-desc span[data-i18n] { direction: rtl; text-align: right; display: block; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; unicode-bidi: embed; } /* ── Stats labels — keep centered in Arabic (override the general p rule) ── */ body.lang-ar p[data-i18n^="wwa.stats."] { text-align: center !important; direction: ltr; } /* ── Index software/brands titles — keep centered in Arabic ── */ body.lang-ar p:has(> span[data-i18n="index.software-title"]), body.lang-ar p:has(> span[data-i18n="index.brands-title"]) { text-align: center !important; direction: ltr; } /* ── "Trusted by Businesses" overlay on who-we-are ──────────── */ /* CSS grid stack: img and overlay share the same grid cell so the overlay sits on top of the image without position:absolute quirks */ .wwa-trusted-stack { display: grid; } .wwa-trusted-stack > * { grid-area: 1 / 1; } .wwa-trusted-stack img { width: 100%; height: auto; display: block; } /* Hidden by default — the JPEG image shows its baked English text in EN mode */ .wwa-trusted-overlay { display: none; } /* In Arabic mode: transparent overlay — image shows through fully. Text is pushed down to sit over the same area as the baked English text. A solid teal background behind each h2 covers the underlying English text. */ body.lang-ar .wwa-trusted-overlay { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 6px; padding-top: 20%; /* 20% of width ≈ 46% of image height, matching the JPEG text band */ background: transparent; /* image remains fully visible */ text-align: center; } body.lang-ar .wwa-trusted-overlay h2 { background: rgba(80, 192, 208, 0.92); /* matches dome teal — covers baked English text */ padding: 4px 32px; margin: 0; line-height: 1.25; } /* ── FAQ / details: questions and answers ────────────────── */ body.lang-ar details summary { direction: rtl; text-align: right; } body.lang-ar details summary span[data-i18n] { direction: rtl; text-align: right; display: block; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important; } body.lang-ar div[data-i18n] { direction: rtl; text-align: right; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ── Bullet list items ───────────────────────────────────── */ body.lang-ar li[data-i18n] { direction: rtl; text-align: right; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } body.lang-ar li span[data-i18n] { direction: rtl; text-align: right; display: block; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; } /* ── Footer links / text ──────────────────────────────────── */ body.lang-ar footer [data-i18n] { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; }