/* ============================================================
Ghanti shared bilingual (EN / UR) i18n kit -- i18n.css
------------------------------------------------------------
Mechanism: dual-content. Every translatable piece exists in
BOTH languages in the HTML as sibling elements:
Englishاردو
The inactive language is hidden purely with CSS, keyed off the
element's `lang` attribute (set by i18n.js).
This file MUST be byte-identical across every page so the
privacy/terms pages can reproduce it EXACTLY. Do not fork it.
============================================================ */
/* Urdu webfont. Loaded here via @import so a single to
i18n.css is enough on every page (the page may also add a
direct in for earlier loading — both are fine). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');
/* ── Language visibility toggle ──
Default (no lang attr yet, or lang=en): show EN, hide UR.
lang=ur: show UR, hide EN. */
.lang-ur { display: none; }
html[lang="ur"] .lang-en { display: none; }
html[lang="ur"] .lang-ur { display: inline; }
/* Block-level Urdu pieces (paragraphs, headings, list items, divs)
should restore their natural display instead of forcing inline.
Add `lang-ur-block` alongside `lang-ur` for these. Because these
rules come after the inline rules above, an element carrying BOTH
`lang-ur` and `lang-ur-block` resolves to block (not inline) when
the document is in Urdu, and stays hidden otherwise. */
.lang-ur-block { display: none; }
html[lang="ur"] .lang-ur-block { display: block; }
/* ── Urdu typography ──
Noto Nastaliq Urdu needs generous line-height (~15-20% more).
Applied to any element carrying the Urdu content class. */
html[lang="ur"] .lang-ur,
.lang-ur {
font-family: 'Noto Nastaliq Urdu', 'Inter', sans-serif;
line-height: 2.1;
}
/* When the whole document is in Urdu, raise base line-height a bit
so mixed runs (numbers + Urdu) stay readable. */
html[lang="ur"] body { line-height: 1.9; }
/* ── LTR isolation islands ──
These NEVER mirror or switch script, even inside Urdu/RTL:
digits, phone numbers (+92…), the "Ghanti" wordmark,
e-mail addresses, "Google Play", version strings, URLs.
Wrap such runs in …. */
.ltr {
direction: ltr;
unicode-bidi: isolate;
font-family: 'Inter', sans-serif;
/* keep monospace numerals where the page already uses them */
}
.ltr.mono {
font-family: 'JetBrains Mono', monospace;
}
/* ── RTL layout mirroring ──
When dir=rtl (set by i18n.js for Urdu), flip horizontally-
ordered flex/grid containers and text alignment. The bottom
nav / nav-links and dialpad-style rows are intentionally NOT
mirrored (none on this kit's pages, but documented for parity). */
html[dir="rtl"] body { text-align: right; }
/* Brand wordmark stays LTR even in RTL header. */
html[dir="rtl"] .nav-brand { direction: ltr; }
/* ── Language toggle control (compact EN | اردو) ──
Reusable across nav bars and legal-page headers. */
.lang-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #fff;
font-size: 13px;
font-weight: 700;
font-family: 'Inter', sans-serif;
padding: 7px 14px;
border-radius: 999px;
cursor: pointer;
line-height: 1;
transition: background 0.2s, border-color 0.2s;
-webkit-tap-highlight-color: transparent;
}
.lang-toggle:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.4);
}
.lang-toggle .lang-toggle-label {
/* the script-of-the-OTHER-language label; keep it readable */
font-family: 'Inter', 'Noto Nastaliq Urdu', sans-serif;
}
/* Globe glyph before the label */
.lang-toggle::before {
content: '\1F310'; /* 🌐 */
font-size: 13px;
line-height: 1;
}
/* Variant for use on light/legal backgrounds (dark text). */
.lang-toggle.lang-toggle-dark {
background: rgba(1, 65, 28, 0.08);
border-color: rgba(1, 65, 28, 0.25);
color: #01411C;
}
.lang-toggle.lang-toggle-dark:hover {
background: rgba(1, 65, 28, 0.14);
}
/* In RTL, keep the toggle internals laid out naturally (LTR label). */
html[dir="rtl"] .lang-toggle { direction: ltr; }