/* ============================================================ PakVoices — Urdu (RTL) typography Loaded only when the site language is Urdu (). Font: Noto Nastaliq Urdu (SIL OFL 1.1), self-hosted in /assets/fonts/. ============================================================ */ /* Only the Arabic-script subset is loaded. Latin letters and digits inside Urdu text fall through to Poppins, which keeps English names readable. */ @font-face { font-family: 'Noto Nastaliq Urdu'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/noto-nastaliq-urdu-arabic-400-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Noto Nastaliq Urdu'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/noto-nastaliq-urdu-arabic-500-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Noto Nastaliq Urdu'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/noto-nastaliq-urdu-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: 'Noto Nastaliq Urdu'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/noto-nastaliq-urdu-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Optional: to use Jameel Noori Nastaleeq instead, place its .woff2 at /assets/fonts/JameelNooriNastaleeq.woff2, uncomment below, and put 'Jameel Noori Nastaleeq' first in --ur-font. @font-face { font-family: 'Jameel Noori Nastaleeq'; font-weight: 400; font-display: swap; src: url('/assets/fonts/JameelNooriNastaleeq.woff2') format('woff2'); } */ :root { --ur-font: 'Noto Nastaliq Urdu', 'Poppins', sans-serif; --ur-lh-body: 2.1; /* Nastaliq needs tall lines: ascenders/descenders stack diagonally */ --ur-lh-head: 1.9; --ur-lh-ui: 1.85; } /* ── Base ─────────────────────────────────────────────────── */ html[lang="ur"] body { font-family: var(--ur-font); line-height: var(--ur-lh-ui); } /* Everything that sets its own font (Bootstrap, Poppins, Hind) is re-pointed. Icon fonts (.fa*, .fas, .fab) are deliberately NOT in this list. */ 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"] p, html[lang="ur"] a, html[lang="ur"] span, html[lang="ur"] li, html[lang="ur"] label, html[lang="ur"] strong, html[lang="ur"] .btn, html[lang="ur"] .badge, html[lang="ur"] .nav-link, html[lang="ur"] .dropdown-item, html[lang="ur"] .breadcrumb, html[lang="ur"] .form-control, html[lang="ur"] input, html[lang="ur"] textarea, html[lang="ur"] select, html[lang="ur"] button, html[lang="ur"] .widget-title, html[lang="ur"] .section-title, html[lang="ur"] .card-title, html[lang="ur"] .just-in .ji-label, html[lang="ur"] .post-content, html[lang="ur"] .post-content h2, html[lang="ur"] .post-content h3, html[lang="ur"] .post-content h4 { font-family: var(--ur-font); } /* Keep Font Awesome glyphs intact even inside re-pointed elements */ html[lang="ur"] .fa, html[lang="ur"] .fas, html[lang="ur"] .far, html[lang="ur"] .fab, html[lang="ur"] .fa-solid, html[lang="ur"] .fa-brands { font-family: 'Font Awesome 6 Free'; } html[lang="ur"] .fab, html[lang="ur"] .fa-brands { font-family: 'Font Awesome 6 Brands'; } /* Cursive joining breaks with letter-spacing; no caps or synthetic italics in Urdu */ html[lang="ur"] body *:not(.fa):not(.fas):not(.far):not(.fab) { letter-spacing: 0 !important; text-transform: none !important; } html[lang="ur"] em, html[lang="ur"] i:not([class*="fa"]), html[lang="ur"] blockquote, html[lang="ur"] figcaption { font-style: normal !important; } html[lang="ur"] body { font-synthesis: none; } /* ── Headings ─────────────────────────────────────────────── */ 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"] .card-title { line-height: var(--ur-lh-head) !important; font-weight: 700; } html[lang="ur"] h1.post-title:not([lang="en"]) { font-size: 2rem !important; line-height: 2 !important; } html[lang="ur"] .hero-post h2 { font-size: 1.7rem; } html[lang="ur"] .card-title { font-size: 1.08rem; } html[lang="ur"] h6.card-title { font-size: .95rem !important; } /* ── Article body ─────────────────────────────────────────── */ html[lang="ur"] .post-content { font-size: 1.3rem; line-height: var(--ur-lh-body); word-spacing: .05em; } html[lang="ur"] .post-content.font-lg { font-size: 1.5rem; } html[lang="ur"] .post-content.font-sm { font-size: 1.12rem; } @media (max-width: 991px) { html[lang="ur"] .post-content { font-size: 1.18rem; line-height: 2.05; } } html[lang="ur"] .post-content p { margin-bottom: 1.4rem; } /* ::first-letter splits a joined Urdu letter from its word — disable the drop cap */ html[lang="ur"] .post-content > p:first-of-type::first-letter { float: none; font-size: inherit; line-height: inherit; font-family: inherit; padding: 0; color: inherit; font-weight: inherit; } html[lang="ur"] .post-content ul, html[lang="ur"] .post-content ol { margin: 0 1.5rem 1.5rem 0; padding-right: 1rem; padding-left: 0; } html[lang="ur"] .post-content blockquote { border-left: none; border-right: 4px solid var(--pv-green-light, #2ea84a); border-radius: 10px 0 0 10px; } html[lang="ur"] .post-content h2, html[lang="ur"] .post-content h3 { line-height: 1.9; } html[lang="ur"] .excerpt-box p { font-size: 1.12rem !important; line-height: 2 !important; } /* ── Small UI text: Nastaliq reads small, bump sizes a notch ── */ html[lang="ur"] .small, html[lang="ur"] small { font-size: .92em; } html[lang="ur"] .x-small, html[lang="ur"] .card-meta, html[lang="ur"] .rn-meta, html[lang="ur"] .ji-time { font-size: .82rem !important; line-height: 1.9; } html[lang="ur"] .recent-news-item .rn-title { font-size: .95rem; line-height: 1.9; } html[lang="ur"] .trending-item a.fw-semibold { font-size: .93rem !important; line-height: 1.9 !important; } html[lang="ur"] .nav-link { font-size: 1rem; padding-top: .35rem; padding-bottom: .35rem; } /* Line-clamped blocks: extra room so descenders of the last line are not clipped */ html[lang="ur"] .line-clamp-2, html[lang="ur"] .recent-news-item .rn-title, html[lang="ur"] .trending-item a.fw-semibold { padding-bottom: .15em; } /* ── RTL layout fixes for hand-written LTR CSS ─────────────── */ html[dir="rtl"] .navbar-brand img { transform-origin: right center !important; } html[dir="rtl"] .widget-title::after { left: auto; right: 0; } html[dir="rtl"] .recent-news-item:hover { transform: translateX(-3px); } html[dir="rtl"] .category-badge { left: auto; right: 8px; } html[dir="rtl"] .breaking-badge[style*="right:8px"] { right: auto !important; left: 8px; } html[dir="rtl"] .card-img-wrapper .breaking-badge { right: auto; left: 10px; } html[dir="rtl"] #backToTop { right: auto !important; left: 30px; } html[dir="rtl"] .back-to-top { right: auto; left: 24px; } html[dir="rtl"] .reading-progress { left: auto; right: 0; } html[dir="rtl"] .breaking-label.bg-danger { border-right: none; border-left: 3px solid var(--pv-yellow, #f5c518); } html[dir="rtl"] .excerpt-box { border-left: 0 !important; } html[dir="rtl"] .category-header { border-left: none !important; border-right: 5px solid currentColor; } /* Breaking ticker scrolls the other way in RTL */ html[dir="rtl"] .ticker-content { animation-name: tickerScrollRtl; } @keyframes tickerScrollRtl { from { transform: translateX(0); } to { transform: translateX(50%); } } /* ── Language switcher (both languages) ───────────────────── */ .lang-switch { display: inline-flex; align-items: center; border: 1px solid var(--pv-green-dark, #1a5c2a); border-radius: 999px; overflow: hidden; margin-bottom: .5rem; direction: ltr; /* keep EN | اردو order stable in both modes */ } .lang-switch a { padding: .15rem .85rem; font-size: .85rem; line-height: 1.8; color: var(--pv-green-dark, #1a5c2a); text-decoration: none; font-weight: 600; } .lang-switch a + a { border-left: 1px solid var(--pv-green-dark, #1a5c2a); } .lang-switch a.active { background: var(--pv-green-dark, #1a5c2a); color: #fff; } .lang-switch a:hover:not(.active) { background: rgba(26,92,42,.08); } .lang-switch .ur-label { font-family: 'Noto Nastaliq Urdu', serif; font-size: .95rem; line-height: 1.6; padding-top: .05rem; } /* English text shown inside the Urdu UI (post has no Urdu version yet) */ html[lang="ur"] [lang="en"], html[lang="ur"] [lang="en"] * { font-family: 'Poppins', 'Hind Siliguri', sans-serif; line-height: 1.6; text-align: left; } html[lang="ur"] .post-content[lang="en"] { font-family: 'Hind Siliguri', Georgia, serif; line-height: 1.85; font-size: 1.18rem; } html[lang="ur"] h1[lang="en"], html[lang="ur"] h2[lang="en"], html[lang="ur"] h5[lang="en"], html[lang="ur"] h6[lang="en"] { line-height: 1.35 !important; } .pv-lang-notice { font-size: .9rem; background: #fff8e1; border: 1px solid #f5c518; border-radius: 6px; padding: .4rem .9rem; margin-bottom: 1rem; } /* Email addresses stay left-to-right even in the Urdu UI */ html[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; } html[dir="rtl"] input[type="email"]:placeholder-shown { direction: rtl; } /* Directional icons point the right way in RTL */ html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-chevron-right { transform: scaleX(-1); } /* Mixed-language titles (English post in Urdu UI): each block takes the direction and alignment of its own text */ html[dir="rtl"] .card-title, html[dir="rtl"] .hero-post h2, html[dir="rtl"] .line-clamp-2, html[dir="rtl"] .recent-news-item .rn-title, html[dir="rtl"] .trending-item a, html[dir="rtl"] .search-results-header + form ~ .post-list-item h5 { unicode-bidi: plaintext; text-align: start; } html[dir="rtl"] .card-title [dir="auto"], html[dir="rtl"] .hero-post h2 [dir="auto"], html[dir="rtl"] .post-list-item h5 [dir="auto"] { unicode-bidi: normal; } /* Underlines sit below Nastaliq descenders instead of cutting through them */ html[lang="ur"] a { text-underline-offset: .45em; }