/* ========================================================================= Xi'an Blaze — i18n layer: language switcher + RTL adjustments Loaded on every page alongside site.css / products.css. ========================================================================= */ /* ---- 1. Language switcher --------------------------------------------- * A compact two-button segmented control. Sits at the right edge of the nav (mirrored to the left in RTL). It reuses the brand green as accent. */ .lang-switch { display: inline-flex; align-items: center; border: 1px solid #ddd; border-radius: 999px; overflow: hidden; background: #fff; font-family: "DM Sans", system-ui, sans-serif; -webkit-user-select: none; user-select: none; } .lang-switch button { border: 0; background: transparent; color: #555; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; padding: 5px 10px; cursor: pointer; line-height: 1.4; transition: background .15s ease, color .15s ease; } .lang-switch button:hover { color: #1a5c45; } .lang-switch button.is-active { background: #1a5c45; color: #fff; } /* In RTL keep the active/hover colors consistent; the control itself mirrors automatically because the nav is flippend via flex-direction. */ /* Tuck the switcher next to the nav links. */ .site-nav-links .lang-switch { margin-inline-start: 16px; } /* Mobile nav (hamburger open): stack the switcher full width under links. */ @media (max-width: 700px) { .site-nav-links.open .lang-switch { margin-inline-start: 0; margin-top: 8px; align-self: stretch; justify-content: center; } .site-nav-links.open .lang-switch button { flex: 1; padding: 10px 0; } } /* ---- 2. RTL global adjustments ---------------------------------------- * When we mirror the layout. Most components already use logical properties (margin-inline, padding-inline) thanks to flexbox/grids; here we fix the few physical ones that don't flip automatically. */ html[dir="rtl"] body { font-family: "Noto Sans Arabic", "DM Sans", system-ui, sans-serif; } html[data-lang="zh"] body, body.lang-zh { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "DM Sans", system-ui, sans-serif; } html[dir="rtl"] { letter-spacing: 0 !important; /* Arabic ignores letter-spacing */ } /* The WhatsApp float sits bottom-right in LTR; mirror to bottom-left in RTL. */ html[dir="rtl"] .wa-float { right: auto; left: 20px; } @media (max-width: 767px) { html[dir="rtl"] .wa-float { right: auto; left: 16px; } } /* The nav uses flex + justify-content:space-between. Under dir="rtl" the browser mirrors the flex main axis automatically (brand→right, links→left), so we deliberately do NOT add flex-direction:row-reverse here — that would double-flip and put them back in LTR positions. The natural mirroring already gives the correct RTL reading order. The mobile dropdown uses left:0;right:0 (full-width stretch) which works in both directions. */ /* Proof chips / stat strips: grids auto-flip; numbers and labels are center-aligned in LTR and must stay centered in RTL too. */ html[dir="rtl"] .proof-num, html[dir="rtl"] .stat-num { text-align: center; } /* intro-commit has a left border accent; mirror to right in RTL. */ html[dir="rtl"] .intro-commit { border-left: 0; border-right: 3px solid var(--gold); } /* Blockquote / lead paragraphs: English used text-align:justify — Arabic reads right-to-left, keep justify but it now fills RTL naturally. */ html[dir="rtl"] .company-intro-spread .intro-body p { text-align: justify; } /* The hero uses a 2-col grid; under RTL the browser flips column order automatically for grid, so nothing extra is needed. But some hero rules use physical padding (padding-right on hero-left). Normalize to logical. */ @media (min-width: 768px) { html[dir="rtl"] .hero-left { padding-right: 16px; padding-left: 24px; } html[dir="rtl"] .hero-right { padding-left: 24px; padding-right: 16px; } /* products.css defines `body.products-page .hero-left/.hero-right` at the same specificity inside this same breakpoint and loads after this file, so it wins the cascade tie-break. Re-assert with a more specific selector scoped to the products page so the RTL padding actually takes effect there. */ html[dir="rtl"] body.products-page .hero-left { padding-right: 16px; padding-left: 24px; } html[dir="rtl"] body.products-page .hero-right { padding-left: 24px; padding-right: 16px; } } /* saudi-card ::before accent pill — anchor to the right (start) in RTL and stop it stretching by clearing the physical `left`. */ html[dir="rtl"] .saudi-card::before { left: auto; right: 14px; } html[dir="rtl"] .products-page .hero-right .saudi-card::before { left: auto; right: 14px; } /* The screenshot/techspec grids use 2 columns; in RTL we want the reading order to go right-to-left, which grid auto-flips. Nothing to do. */ /* Caption text and section intros: ensure they read start-aligned in RTL rather than inheriting a centered/left rule meant for LTR. */ html[dir="rtl"] .terminal-caption, html[dir="rtl"] .screenshot-caption, html[dir="rtl"] .techspec-desc, html[dir="rtl"] .sec-intro { text-align: start; } /* feat-list bullet markers: the arrow lives in ::before at physical left:0 with padding-left on the li. Mirror both, and point the arrow leftwards. */ html[dir="rtl"] .feat-list li { text-align: start; padding-left: 0; padding-right: 16px; } html[dir="rtl"] .feat-list li::before { content: '\2190'; /* ← */ left: auto; right: 0; } /* ---- 3. RTL: physically-positioned gold dividers & accents ------------- * The brochure styles inline in each page position several decorative elements with physical left/right values. Grid columns auto-flip under dir="rtl" but these decorations don't, so re-anchor them here. */ /* Company-intro spread: vertical gold rule between the text column (62%) and the image column. Columns flip in RTL → anchor from the right. */ html[dir="rtl"] .company-intro-spread .intro-spread-layout::after { left: auto; right: calc(62% - 14px); } /* Hero spread: vertical gold rule between hero-left (55%) and hero-right. */ html[dir="rtl"] .hero::after { left: auto; right: 55%; } /* hero-lead / hero-scope-note carry a gold accent bar on their left edge (start of the text in LTR). Move it to the right edge for RTL. */ html[dir="rtl"] .hero-lead { border-left: 0; padding-left: 0; border-right: 2px solid var(--gold); padding-right: 16px; } html[dir="rtl"] .hero-scope-note { border-left: 0; padding-left: 0; border-right: 2px solid rgba(184,145,42,.35); padding-right: 16px; } /* Track-record quote: gold accent bar must sit on the start edge of the text. LTR uses border-left; RTL mirrors to border-right (right of Arabic text). */ html[dir="rtl"] .tr-quote { border-left: 0; padding-left: 0; border-right: 2px solid var(--gold); padding-right: 18px; } /* Home page replaces intro-commit's border with a ::before bar at left:0 (and sets border-left:none). Mirror the bar and drop the generic border-right we add above so the accent isn't doubled. */ html[dir="rtl"] body.home-page .company-intro-spread .intro-commit { border-right: 0; } html[dir="rtl"] body.home-page .company-intro-spread .intro-commit::before { left: auto; right: 0; } /* Home page scenario cards: caption reserves 84px on the right for the "→" arrow (flex end). In RTL the arrow ends up on the left → mirror padding, flip the glyph and the hover nudge direction. */ html[dir="rtl"] body.home-page .company-intro-scenario figcaption { padding-right: 12px; padding-left: 84px; } html[dir="rtl"] body.home-page .company-intro-scenario figcaption::after { content: "\2190"; /* ← */ } html[dir="rtl"] body.home-page .company-intro-scenario-link:hover .company-intro-scenario figcaption::after { transform: translateX(-3px); } /* Stats strip: separator borders between cells (physical border-right). */ html[dir="rtl"] .stat-item { border-right: none; border-left: 1px solid rgba(255,255,255,.25); } html[dir="rtl"] .stat-item:last-child { border-left: none; } @media (max-width: 767px) { /* mobile: 2-col grid with border-bottom rows; odd cell keeps a vertical separator toward its neighbour — flip it too. */ html[dir="rtl"] .stat-item { border-left: none; border-bottom: 1px solid rgba(255,255,255,.25); } html[dir="rtl"] .stat-item:nth-child(odd) { border-right: none; border-left: 1px solid rgba(255,255,255,.25); } } /* Case cards: physical border-right separators (desktop). */ html[dir="rtl"] .case-card { border-right: none; border-left: 1px solid var(--border); } html[dir="rtl"] .case-card:last-child { border-left: none; } @media (max-width: 767px) { html[dir="rtl"] .case-card { border-left: none; border-bottom: 1px solid var(--border); } } /* Product-card index number pinned top-right → pin top-left in RTL. */ html[dir="rtl"] .prod-num { right: auto; left: 16px; } /* Service timeline: gold gradient fades along reading direction. */ html[dir="rtl"] .timeline::before { background: linear-gradient(to left, var(--gold), rgba(184,145,42,.2)); } /* Footer meta block sits at the flex end (left side in RTL); keep its text aligned toward the outer edge. */ html[dir="rtl"] .footer-right { text-align: left; } /* products.css top-aligns the products-page hero text column (justify-content:flex-start). English copy is long enough to fill the column, but the more compact Arabic copy ends well above the taller feature card, leaving a dead gap at the bottom. Centre the text column in RTL so the whitespace splits evenly, matching the balanced EN look. */ @media (min-width: 768px) { html[dir="rtl"] body.products-page .hero-left { justify-content: center; } } /* products.css tightens saudi-card / univ-bar left padding on the products page hero — mirror that tightening in RTL. */ html[dir="rtl"] body.products-page .hero-right .saudi-card { padding-left: 20px; padding-right: 14px; } html[dir="rtl"] body.products-page .hero-right .univ-bar { padding-left: 16px; padding-right: 14px; } /* ---- Footer secondary links (White-Label / Custom Dev / FAQ) ---------- */ .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 10px; font-family: "DM Sans", system-ui, sans-serif; font-size: 0.85rem; } .site-footer-links a { color: #1a5c45; text-decoration: none; font-weight: 500; } /* 深色简单页（白标/定制/FAQ）页脚链接用金色 */ body.simple-page .site-footer-links a, body.simple-page .simple-footer-links a { color: #D4AA4E; } .site-footer-links a:hover { text-decoration: underline; } /* Slightly tighter nav gap so 6 items + lang switch still fit on desktop */ @media (min-width: 701px) { .site-nav-links { gap: 18px; } .site-nav-links a { font-size: 13.5px; } } /* Keep in-copy white-label link readable on dark CTA strips */ .tr-cta-text a { color: inherit; text-decoration: underline; font-weight: 600; }