/* ============================================================ RTL + Arabic layer for withtimer.com. Loaded ONLY on dir="rtl" pages, so English and Portuguese pay zero bytes and cannot be affected by anything in here. Additive by design: every rule is scoped to [dir="rtl"] or html[lang="ar"], so the LTR cascade is untouched. That is why this is a separate file rather than a rewrite of the 46 physical declarations in site-components.css - rewriting them as logical properties would put every English page at risk to fix a language nobody is reading yet. ============================================================ */ /* ---- Arabic type ------------------------------------------ Montserrat and JetBrains Mono contain NO Arabic glyphs. unicode-range confines Plex to Arabic; font-display:optional means a slow load falls back to the system Arabic face and nothing shifts (CLS stays 0). */ @font-face{ font-family:'PlexArabic'; src:url('/global/fonts/plex-arabic-400.woff2') format('woff2'); font-weight:400;font-style:normal;font-display:optional; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; } @font-face{ font-family:'PlexArabic'; src:url('/global/fonts/plex-arabic-700.woff2') format('woff2'); font-weight:700;font-style:normal;font-display:optional; unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF; } /* Body is PROPORTIONAL, so Latin-first is safe: brand names keep Montserrat and only Arabic characters fall through to Plex. */ html[lang="ar"]{ --tos-font-body:'Montserrat','PlexArabic','Segoe UI',Tahoma,sans-serif; } /* ★ --tos-font-mono is used 111 times. It must NOT lead with a monospace face in Arabic: ASCII punctuation is shared between scripts, and in a monospace font a period occupies a full cell (the same width as a capital M), which blows sentences apart. That exact bug shipped on HeyPallas. Arabic first here; the genuinely-Latin elements are pinned back below. */ html[lang="ar"]{ --tos-font-mono:'PlexArabic','Segoe UI',Tahoma,sans-serif; } /* Latin-only surfaces keep the real monospace face. */ html[lang="ar"] code, html[lang="ar"] pre, html[lang="ar"] .site-nav-wm, html[lang="ar"] .site-hero-feed, html[lang="ar"] .site-lang{ font-family:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace; } /* letter-spacing SEVERS Arabic cursive joins. Reset it wherever the Latin design tracks type out, and give Arabic the leading it needs. */ html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3, html[lang="ar"] .site-hero-title,html[lang="ar"] .site-section-title, html[lang="ar"] .site-eyebrow,html[lang="ar"] .site-kicker, html[lang="ar"] .site-btn-primary,html[lang="ar"] .site-btn-secondary, html[lang="ar"] .site-footer-col-title,html[lang="ar"] .site-nav-links a, html[lang="ar"] .paper-card,html[lang="ar"] .site-metrics, html[lang="ar"] .site-cta-band-title{ letter-spacing:normal; } html[lang="ar"] body,html[lang="ar"] p,html[lang="ar"] li{line-height:1.9;} html[lang="ar"] h1,html[lang="ar"] .site-hero-title{line-height:1.35;} html[lang="ar"] h2,html[lang="ar"] .site-section-title{line-height:1.45;} /* ---- Directional mirrors ---------------------------------- One entry per physical declaration found in the audit of tos-site.css + site-components.css. Symmetric rules (left:0;right:0) are deliberately absent - they need nothing. */ /* skip link + honeypots: keep them off-screen on the correct side */ [dir="rtl"] .site-skip{left:auto;right:-9999px;} [dir="rtl"] .site-skip:focus{right:var(--tos-space-4);left:auto;} [dir="rtl"] .site-field.hp,[dir="rtl"] .sub-band .hp{left:auto;right:-9999px;} /* nav */ [dir="rtl"] .site-nav-links, [dir="rtl"] .site-nav-toggle, [dir="rtl"] .stem-seal-badge{margin-left:0;margin-right:auto;} [dir="rtl"] .site-hero-title .caret{margin-left:0;margin-right:0.12em;} /* hero feed sits opposite the headline */ [dir="rtl"] .site-hero-feed{right:auto;left:var(--site-pad-x);text-align:right;} /* metric + pulse rails: the divider moves to the other edge, and the "no divider on the last cell" rule has to move with it */ [dir="rtl"] .site-metrics > div, [dir="rtl"] .site-pulse-grid > div{border-right:0;border-left:1px solid var(--tos-rule);} [dir="rtl"] .site-metrics > div:last-child, [dir="rtl"] .site-metrics > div:nth-child(2), [dir="rtl"] .site-pulse-grid > div:last-child{border-left:0;} /* framed diagram corner marks */ [dir="rtl"] .diagram.is-framed::before{left:auto;right:12px;} [dir="rtl"] .diagram.is-framed::after{right:auto;left:12px;} /* cards, quotes, timeline, tables */ [dir="rtl"] .paper-card:hover{padding-left:0;padding-right:var(--tos-space-4);} [dir="rtl"] .ent-cell-idx{right:auto;left:var(--tos-space-4);} [dir="rtl"] .cite-block,[dir="rtl"] .sub-band{border-left:0;border-right:3px solid var(--tos-accent);} [dir="rtl"] .timeline{border-left:0;padding-left:0; border-right:1px solid var(--tos-border-strong);padding-right:var(--tos-space-8);} [dir="rtl"] .timeline-entry::before{left:auto;right:calc(-1 * var(--tos-space-8) - 4.5px);} [dir="rtl"] .ra-steps span b{margin-right:0;margin-left:var(--tos-space-3);} [dir="rtl"] .site-form-success,[dir="rtl"] .paper-prose th{text-align:right;} [dir="rtl"] .paper-prose ol{padding-left:0;padding-right:1.4em;} [dir="rtl"] .paper-toc{border-left:0;padding-left:0; border-right:1px solid var(--tos-rule);padding-right:var(--tos-space-5);} /* prev/next arrows are CSS triangles - the colour sits on the opposite border, so an unmirrored arrow points the wrong way */ [dir="rtl"] .cs-prev:hover::before{border-right-color:initial;border-left-color:var(--tos-accent);} [dir="rtl"] .cs-next:hover::before{border-left-color:initial;border-right-color:var(--tos-accent);} /* showcase rail */ [dir="rtl"] .showcase-step .note{text-align:left;} [dir="rtl"] .showcase-spine::before{left:auto;right:27px;} [dir="rtl"] .showcase-spine .sdot{left:auto;right:24px;} [dir="rtl"] .om-def-tag{margin-left:0;margin-right:10px;} /* Latin runs inside Arabic text (brand names, URLs, code tokens) must stay LTR or their brackets and trailing dots reorder. */ [dir="rtl"] .ltr{direction:ltr;display:inline-block;text-align:left;} /* The wordmark is a logo, not a sentence: "timer_" must keep its trailing cursor. Under bidi the underscore is a neutral character and jumps to the left edge, rendering "_timer". Same for the terminal-style hero feed. */ [dir="rtl"] .site-nav-wm, [dir="rtl"] .site-hero-feed{direction:ltr;} [dir="rtl"] .site-nav-wm{unicode-bidi:isolate;} /* ---- Diagrams -------------------------------------------- SVG diagrams are technical drawings, not prose: the geometry must render IDENTICALLY to the Latin version. Left unguarded the svg inherits dir=rtl, which flips how text-anchor:start/end resolve and shifts every label off its box. Pinning the svg to ltr keeps all x/y coordinates and anchors exactly as authored; a single Arabic label still shapes right-to-left on its own, because bidi handles the run inside the element. 14 labels on the site use text-anchor="end" - those are the ones that would have moved. */ [dir="rtl"] svg{direction:ltr;} /* Arabic labels need the Arabic face and no tracking, same as body copy. */ html[lang="ar"] svg text{font-family:'PlexArabic','Segoe UI',Tahoma,sans-serif;letter-spacing:normal;}