/* ============================================================ * AIN v2 — Saudi identity & i18n layer * ------------------------------------------------------------ * Additive stylesheet, loaded AFTER styles.css. It only adds * new rules and minor RTL adjustments; it does NOT override * existing colors, sizes, or layout properties of the running * application. If something breaks visually, this file can be * unlinked from index.html / login.html with zero impact on * behaviour or live data. * * Performance notes: * - Tajawal is loaded only when [lang="ar"] is set on * via a font-display: swap so the first paint never blocks * on the network. * - JetBrains Mono is loaded once for technical values; it * replaces the current `monospace` fallback for nicer hex * and IP rendering but keeps the same metric-friendly * monospaced cadence so layouts don't shift. * ============================================================ */ /* ---------------------------------------------------------- * SAUDI ACCENT TOKENS * --------------------------------------------------------- */ :root { --ksa-green: #006C35; --ksa-green-soft: rgba(0, 108, 53, 0.18); --ksa-green-line: rgba(0, 108, 53, 0.45); --mono-stack: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ar-stack: 'Tajawal', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif; } /* ---------------------------------------------------------- * MONO UTILITY * ---------------------------------------------------------- * Use .mono for IPs, ports, hex, mac addresses, percentages — * any value an operator might copy. We keep western digits in * RTL too so copy/paste stays safe. * --------------------------------------------------------- */ .mono { font-family: var(--mono-stack); letter-spacing: 0.02em; font-feature-settings: "tnum" 1, "lnum" 1; } /* Existing topbar values use `font-family:monospace`; upgrade * them in place without changing size/colour. */ #tb .tsv, #tb #ttime, .tbtn { font-family: var(--mono-stack); } /* ---------------------------------------------------------- * ARABIC FONT * ---------------------------------------------------------- * Activate Tajawal only when the document is in Arabic. This * keeps English-mode users on the existing system stack and * avoids a FOUT on every page load. * --------------------------------------------------------- */ html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button { font-family: var(--ar-stack); } /* But .mono and the topbar tech values must stay monospaced * even in Arabic mode (numeric tabular alignment). */ html[lang="ar"] .mono, html[lang="ar"] #tb .tsv, html[lang="ar"] #tb #ttime { font-family: var(--mono-stack); } /* ---------------------------------------------------------- * HUD — Hijri / Gregorian / Time * ---------------------------------------------------------- * Sits inside #tb between the counters block (#tbst) and the * existing tools (#ttime, .tbtn, #tbuser). Compact, two-row * blocks with tiny uppercase labels above the value. * * Markup contract (added to index.html later): *
*
*
GREGORIAN
*
…
*
*
*
*
HIJRI
*
…
*
*
* --------------------------------------------------------- */ #thud { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 12px; border-left: 1px solid var(--b2); /* Hide on narrow screens to protect the counters row. */ } .thud-blk { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-width: 0; } .thud-lbl { font-size: 8px; font-weight: 700; letter-spacing: 1px; color: #4A4A4A; text-transform: uppercase; font-family: var(--mono-stack); } .thud-val { font-size: 11px; color: #cfcfcf; font-weight: 600; white-space: nowrap; } html[lang="ar"] .thud-val { font-size: 12px; /* Arabic glyphs read smaller; bump 1px */ font-weight: 500; } .thud-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, 0.06); } /* On narrow viewports collapse the HUD to keep counters visible. * Below ~1280px we hide Gregorian first, then Hijri. */ @media (max-width: 1380px) { #thud .thud-blk:nth-child(1) { display: none; } #thud .thud-sep:nth-child(2) { display: none; } } @media (max-width: 1180px) { #thud { display: none; } } /* ---------------------------------------------------------- * LANG SWITCH BUTTON — Saudi accent * ---------------------------------------------------------- * The existing .tbtn is reused for the AR/EN toggle; we add a * thin Saudi-green underline ONLY when Arabic is active so the * accent appears as a flag-like indicator without overpowering * the cyan primary palette. * --------------------------------------------------------- */ html[lang="ar"] .tbtn:not(.thm) { border-bottom: 1px solid var(--ksa-green-line); } html[lang="ar"] .tbtn:not(.thm):hover { border-bottom-color: var(--ksa-green); color: #6EE7B7; } /* ---------------------------------------------------------- * RTL POLISH * ---------------------------------------------------------- * The existing styles.css already has a small RTL block at * line 325. We extend it here for the new HUD and for places * the original missed (left/right margins, border sides on * #live, gap on #tblogo, etc.). Only minor flips — no layout * inversion of internal scenes (Topology graph, 3D site map) * which stay LTR by design. * --------------------------------------------------------- */ [dir="rtl"] #live { margin-left: 0; margin-right: 14px; } [dir="rtl"] #tbst { margin-left: 0; margin-right: auto; } [dir="rtl"] #tbst .ts { border-left: none; border-right: 1px solid var(--b2); } [dir="rtl"] #tbst .ts:first-child { border-right: none; } [dir="rtl"] #ttime { border-left: none; border-right: 1px solid var(--b2); } [dir="rtl"] #thud { border-left: none; border-right: 1px solid var(--b2); } [dir="rtl"] #tbuser { border-left: none; border-right: 1px solid var(--b2); } [dir="rtl"] #tblogo { border-right: none; border-left: 1px solid var(--b2); } [dir="rtl"] .tbuser-menu { right: auto; left: 0; } [dir="rtl"] .tbtn { margin-right: 0; margin-left: 4px; } /* The nav/subnav already get direction:rtl from styles.css line 325. * Add a small text-align fix that the original missed. */ [dir="rtl"] .ni, [dir="rtl"] .sni { text-align: right; } /* ---------------------------------------------------------- * LIVE PILL — extra polish (optional, harmless if unused) * ---------------------------------------------------------- * The existing #live block already styles the topbar live * indicator. No changes needed; this section is reserved for * future use. Left intentionally empty. * --------------------------------------------------------- */ /* ---------------------------------------------------------- * LOGIN PAGE — Arabic adjustments * ---------------------------------------------------------- * The login page is a simple centred box. RTL mostly works * out-of-the-box; we just need to flip the lang-switch and * footer ordering when in Arabic. * --------------------------------------------------------- */ html[lang="ar"] .lg-tag { letter-spacing: 1px; /* tighter for Arabic */ } html[lang="ar"] .lg-lbl { letter-spacing: 0; text-transform: none; } /* Saudi green accent on the AR/EN toggle in login too. */ html[lang="ar"] #login-page .tbtn { border-bottom: 1px solid var(--ksa-green-line); } /* ---------------------------------------------------------- * UTILITY: visually-hidden (used for aria-only labels later) * --------------------------------------------------------- */ .vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }