/** * Sajelli — global font override. * Loaded AFTER the NexLink kit stylesheet so it wins specificity ties. * * Tajawal is the primary family for both Arabic and Latin glyphs. * Instrument Sans + system stack stay as fallbacks for any glyph Tajawal * doesn't cover. Icon fonts (uicons-*, Font Awesome) are NOT touched — * they're matched by class selectors that override font-family inline. */ :root { --bs-body-font-family: "Tajawal", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html, body { font-family: var(--bs-body-font-family); } /* Kit hardcodes "Instrument Sans" on a few headings — override those too. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6, .lead, .btn, .form-control, .form-select, .nav-link, .navbar, .card-title, .breadcrumb, .dropdown-menu, .dropdown-item, .badge, .alert, .modal, .toast, .list-group, .pagination, table, th, td, input, select, textarea, button { font-family: var(--bs-body-font-family); } /* Tajawal is heavier visually than Instrument Sans — pull line-height tighter on display/heading sizes for Arabic readability. */ h1, .h1, .display-1, .display-2 { line-height: 1.25; } h2, .h2 { line-height: 1.3; } /* Latin/numeric in monospace stays monospace (SKUs, IBANs, codes). */ .font-monospace, code, kbd, samp, pre { font-family: var(--bs-font-monospace) !important; } /* Arabic numerals: Tajawal naturally renders Latin digits, which is what we want (Sajelli's data is numeric and mixed-script numerals create copy/paste headaches — see the existing `bcp47("ar-SA-u-nu-latn")` formatter convention). */ /* ───────────────────────────────────────────────────────────────────── Per-language font overrides. Tajawal renders ar/en/hi/bn/tl beautifully but doesn't have proper glyphs for Urdu Nastaliq script or all the Pashto-specific letters. We swap based on the html[lang] attribute (set by PortalProvider). ───────────────────────────────────────────────────────────────────── */ /* Urdu — Nastaliq script (vertical, calligraphic) */ html[lang="ur"], html[lang="ur"] body, html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] h4, html[lang="ur"] h5, html[lang="ur"] h6, html[lang="ur"] .h1, html[lang="ur"] .h2, html[lang="ur"] .h3, html[lang="ur"] .h4, html[lang="ur"] .h5, html[lang="ur"] .h6, html[lang="ur"] .lead, html[lang="ur"] .btn, html[lang="ur"] .form-control, html[lang="ur"] .form-select, html[lang="ur"] .nav-link, html[lang="ur"] .navbar, html[lang="ur"] .card-title, html[lang="ur"] .breadcrumb, html[lang="ur"] .dropdown-menu, html[lang="ur"] .dropdown-item, html[lang="ur"] .badge, html[lang="ur"] .alert, html[lang="ur"] .modal, html[lang="ur"] .toast, html[lang="ur"] .list-group, html[lang="ur"] .pagination, html[lang="ur"] table, html[lang="ur"] th, html[lang="ur"] td, html[lang="ur"] input, html[lang="ur"] select, html[lang="ur"] textarea, html[lang="ur"] button { font-family: "Noto Nastaliq Urdu", "Tajawal", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* Nastaliq glyphs are tall and ornate — bump line-height so descenders/ascenders don't clip and rows in tables/forms stay readable. */ html[lang="ur"] body { line-height: 1.9; } html[lang="ur"] table, html[lang="ur"] th, html[lang="ur"] td { line-height: 1.8; } html[lang="ur"] .btn, html[lang="ur"] .badge { line-height: 1.6; } html[lang="ur"] h1, html[lang="ur"] .h1, html[lang="ur"] .display-1, html[lang="ur"] .display-2 { line-height: 1.6; } html[lang="ur"] h2, html[lang="ur"] .h2 { line-height: 1.7; } html[lang="ur"] h3, html[lang="ur"] h4, html[lang="ur"] h5, html[lang="ur"] h6, html[lang="ur"] .h3, html[lang="ur"] .h4, html[lang="ur"] .h5, html[lang="ur"] .h6 { line-height: 1.7; } /* Pashto — Naskh script. Tajawal misses some Pashto letters (ښ ګ ړ ږ ځ څ ډ ټ); Noto Naskh Arabic has full Pashto coverage. */ html[lang="ps"], html[lang="ps"] body, html[lang="ps"] h1, html[lang="ps"] h2, html[lang="ps"] h3, html[lang="ps"] h4, html[lang="ps"] h5, html[lang="ps"] h6, html[lang="ps"] .h1, html[lang="ps"] .h2, html[lang="ps"] .h3, html[lang="ps"] .h4, html[lang="ps"] .h5, html[lang="ps"] .h6, html[lang="ps"] .lead, html[lang="ps"] .btn, html[lang="ps"] .form-control, html[lang="ps"] .form-select, html[lang="ps"] .nav-link, html[lang="ps"] .navbar, html[lang="ps"] .card-title, html[lang="ps"] .breadcrumb, html[lang="ps"] .dropdown-menu, html[lang="ps"] .dropdown-item, html[lang="ps"] .badge, html[lang="ps"] .alert, html[lang="ps"] .modal, html[lang="ps"] .toast, html[lang="ps"] .list-group, html[lang="ps"] .pagination, html[lang="ps"] table, html[lang="ps"] th, html[lang="ps"] td, html[lang="ps"] input, html[lang="ps"] select, html[lang="ps"] textarea, html[lang="ps"] button { font-family: "Noto Naskh Arabic", "Tajawal", "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } /* Inline Urdu/Pashto inside other locales — `dir="rtl"` spans, `lang="ur"` etc. Use :lang() so an Urdu phrase embedded in an Arabic page still uses Nastaliq. */ :lang(ur) { font-family: "Noto Nastaliq Urdu", "Tajawal", -apple-system, sans-serif; } :lang(ps) { font-family: "Noto Naskh Arabic", "Tajawal", -apple-system, sans-serif; } /* ───────────────────────────────────────────────────────────────────── Sidebar rail icons — flat, borderless look (override the kit's default rounded-box style on `.app-navbar-tabs .nav-item .menu-link`). We keep the icon color change on active/hover but drop the background and the 8px border-radius, so the icons sit naked on the rail. ───────────────────────────────────────────────────────────────────── */ .app-navbar-tabs .nav-item .menu-link { border: 0 !important; /* drop UA-default