/* ============================================================================ 阿拉伯语等 RTL 语言的方向修正层。只在 的页面加载 （见 zh-head.html 的 RTL_STYLESHEET 占位符），中文 / 英文站不会多请求这一份。 ⚠️ 写这个文件前必须知道的一条：**flex / grid 会自己跟着 dir 翻转**。 给一个 dir=rtl 容器再加 flex-direction: row-reverse，等于翻两次＝没翻， 反而会把已经正确的顺序倒回 LTR。第一版这里写了一串 row-reverse， 结果 .fab-tile（本该是 column：图标在上文字在下）被强行改成横排， 文字直接溢出 3.35rem 宽的方块——就是那个「按钮文字被切掉」的现象。 所以本文件只覆盖**物理属性**，也就是 CSS 里写死、不会跟 dir 走的那些： left / right、border-left / border-right、border-radius 的四角顺序、 box-shadow 的水平偏移、以及个别写死的 text-align: left。 顺序类（flex-direction / justify-content / text-align: start）一律不碰。 ========================================================================= */ /* 阿拉伯文没有 Noto Sans SC 字形，先落到系统阿语字体再回落原字体栈。 */ [dir='rtl'] body, [dir='rtl'] button, [dir='rtl'] input, [dir='rtl'] textarea, [dir='rtl'] select { font-family: 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, Arial, sans-serif; } /* ── 跳到正文：视觉隐藏在起始角外，聚焦后弹回起始角 ────────────────────── */ [dir='rtl'] .skip { left: auto; right: -9999px; } [dir='rtl'] .skip:focus { left: auto; right: var(--space); } /* ── 下载按钮：主按钮 + 卡尺拼成一个胶囊，圆角与分隔线要换边 ──────────── */ [dir='rtl'] .btn-download { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } [dir='rtl'] .btn-download-caret { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-left: none; border-right: 1px solid rgba(255, 255, 255, 0.22); } [dir='rtl'] .download-menu { right: auto; left: 0; } /* ── 右下角快捷服务栏整体挪到左下角 ───────────────────────────────────── */ [dir='rtl'] .fab-rail { right: auto; left: max(0.35rem, env(safe-area-inset-left, 0px)); align-items: flex-start; } /* 竖条原本贴右屏边：圆角只在左侧、右边框省掉、阴影往左打。贴左边后全部镜像。 */ [dir='rtl'] .fab-stack { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right: 1px solid var(--line); border-left: none; box-shadow: 4px 8px 28px rgba(15, 23, 42, 0.12); } [dir='rtl'] .fab-modal__close { right: auto; left: 0.55rem; } /* ── 图标方向 ─────────────────────────────────────────────────────────── */ /* 「查看全部 N 个行业领域 ›」的箭头在 RTL 下要指向左边 */ [dir='rtl'] .mega-more .icon-chevron-right { display: inline-block; transform: scaleX(-1); } /* ── 正文列表缩进 ─────────────────────────────────────────────────────── */ /* 基础样式用 padding-left 做列表缩进，RTL 下项目符号在右、缩进却留在左， 文字会贴着右边缘。这里统一改成右缩进。 排除 main[dir="ltr"]：那是「该语言正文未翻译、回落中文原文」的子树， 它内部仍是 LTR，不能套 RTL 规则。 */ [dir='rtl'] main:not([dir='ltr']) ul, [dir='rtl'] main:not([dir='ltr']) ol { padding-left: 0; padding-right: 1.15rem; } /* ── 未翻译回落子树：保持中文原文的 LTR 排版 ──────────────────────────── */ [dir='rtl'] main[dir='ltr'] { text-align: left; } /* ── 永远保持 LTR 的内容 ──────────────────────────────────────────────── */ /* 版本号、电话、邮箱、代码在阿语段落里会被双向算法拆乱（比如 131-4101-5749 被重排成 5749-4101-131），用 isolate 把它们隔离出来按 LTR 渲染。 品牌名 TotalClaw 是纯拉丁字母，双向算法本身处理得对，不用特殊处理。 */ [dir='rtl'] code, [dir='rtl'] pre, [dir='rtl'] kbd, [dir='rtl'] samp, [dir='rtl'] .download-menu-ver, [dir='rtl'] .footer-domain, [dir='rtl'] .footer-legal__site, [dir='rtl'] [href^='tel:'], [dir='rtl'] [href^='mailto:'] { direction: ltr; unicode-bidi: isolate; } [dir='rtl'] pre, [dir='rtl'] code { text-align: left; }