/* PSEB — Gurmukhi typography hardening. Loaded on every page (menu, MCQ engine and all 16 lecture decks). Purpose: Gurmukhi stacks glyphs well above and below the base line (tippi ੰ, addak ੱ, bindi ਂ, sihari/bihari, and below-base aunkar ੁ, dulainkar ੂ, pairin haha/rara). With the tight line-heights used for dense slide layouts those marks were being sheared off by line boxes and by ancestors that clip overflow. Everything below is additive — it only touches vertical rhythm and font selection, never colour, spacing between blocks, or the Neon/Classic palettes. */ /* ---- 0. The webfont itself ----------------------------------------- Every stack below asks for 'Noto Sans Gurmukhi' first, but Windows and most Android builds ship no Gurmukhi face at all, so the whole stack fell through and every Punjabi run rendered as tofu (☒☒☒☒). That made vocabulary columns look empty and turned the "ਉਚਾਰਨ: …" pronunciation chips into bare floating colons. The face is self-hosted rather than pulled from fonts.gstatic.com: the service worker only caches same-origin responses, so a CDN link would leave offline students back on tofu. This is the Gurmukhi subset of the upstream variable font (33 KB, wght 100-900). */ @font-face { font-family: 'Noto Sans Gurmukhi'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url('./fonts/noto-sans-gurmukhi-var.woff2') format('woff2'); /* Gurmukhi block + the Indic marks, digits and currency it shares. Latin stays on the page's own body font so headings keep their character. */ unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839; } :root { /* Standardised, de-duplicated Gurmukhi stack. Individual pages define --font-gurmukhi too; this keeps a sane value if one is missing. */ --font-gurmukhi: 'Noto Sans Gurmukhi', 'Mukta Mahee', 'Gurmukhi Sangam MN', 'Nirmala UI', 'Raavi', 'Lohit Gurmukhi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --gurmukhi-line-height: 1.75; --gurmukhi-pad: 0.15em; } /* ---- 1. Font stack + rendering ------------------------------------- `html[lang="pa"]` / `body[lang="pa"]` are excluded on purpose: mcq.html declares , and the page-level font must stay as-is. */ :not(html):not(body)[lang="pa"], :not(html):not(body)[lang="pa-IN"], .gurmukhi, .punjabi, .punjabi-block, .bi-pa, .bi-title, .qf-pa, .qf-answer-pa, .sci-term-pa, .core-lbl { font-family: var(--font-gurmukhi); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "kern" 1, "liga" 1, "mark" 1, "mkmk" 1; } /* ---- 2. Vertical breathing room so diacritics are never sheared ---- line-height grows the inline/line box (works for inline runs too), and the em padding keeps upper marks on the first line and pairin marks on the last line inside the painted area of block containers. */ :not(html):not(body)[lang="pa"], :not(html):not(body)[lang="pa-IN"], .gurmukhi, .punjabi, .punjabi-block, .bi-pa, .bi-title, .qf-answer-pa, .sci-term-pa { line-height: var(--gurmukhi-line-height); padding-top: var(--gurmukhi-pad); padding-bottom: var(--gurmukhi-pad); overflow-wrap: break-word; } /* Headings authored entirely in Gurmukhi need the taller rhythm on the whole line. Mixed Latin+Gurmukhi headings are already covered, because the inline `.punjabi` / [lang="pa"] run below carries its own taller line-height and therefore grows the shared line box on its own. */ h1:lang(pa), h2:lang(pa), h3:lang(pa), h4:lang(pa) { line-height: 1.55; padding-bottom: 0.08em; } /* ---- 2b. Headings: keep the rhythm on the heading, not the inline run ---- A heading is a single short line at 2-3rem, so the body line-height (1.75) applied to an inline `.punjabi` run inflates the shared line box far beyond the glyphs — leaving a visible gap between the title and its underline. Headings are large enough that a 1.3 rhythm already clears every mark, so the inline run inherits and the heading itself carries the breathing room. */ h1 .punjabi, h2 .punjabi, h3 .punjabi, h4 .punjabi, h5 .punjabi, h1 .gurmukhi, h2 .gurmukhi, h3 .gurmukhi, h4 .gurmukhi, h5 .gurmukhi, h1 [lang="pa"], h2 [lang="pa"], h3 [lang="pa"], h4 [lang="pa"], h5 [lang="pa"] { line-height: inherit; padding-top: 0; padding-bottom: 0; } h1 .punjabi-block, h2 .punjabi-block, h3 .punjabi-block, h4 .punjabi-block, h5 .punjabi-block { line-height: 1.3; padding-top: 0; padding-bottom: 0.06em; } /* Minimum rhythm so Gurmukhi marks in a heading are never sheared. Set on the heading itself, so single-line titles stay tight against their underline. */ h1, h2, h3, h4, h5 { line-height: 1.3; } /* ---- 3. Stop ancestors from clipping the taller line boxes ---------- */ .content-box .punjabi, .content-box .punjabi-block, .bi-reading, .bi-reading p, .bi-read-top, .bi-title, .cmd-result, .cmd-result-title, .node-label, .q-prompt, .opt-text { overflow: visible; } /* ---- 4. Chapter divider hero line — largest Gurmukhi on screen, and therefore the most at risk of shearing. */ .chapter-divider .punjabi { line-height: 1.6; padding-top: 0.2em; padding-bottom: 0.2em; } /* ---- 5. MCQ engine (mcq.html) -------------------------------------- Its prompts, options, rationales and summary rows render Punjabi-primary text without a per-node lang attribute, so they are named explicitly. */ .q-prompt, .q-prompt-sub, .opt-text, .opt-sub, .rationale, .objective-title, .objective-body, .q-counter, .meta-rune, .summary-line { line-height: var(--gurmukhi-line-height); overflow: visible; } .q-prompt, .opt-text, .rationale, .objective-body { padding-top: var(--gurmukhi-pad); padding-bottom: var(--gurmukhi-pad); } /* ---- 6. Narrow phones (PSEB students are overwhelmingly on ~360px) -- */ @media (max-width: 480px) { :root { --gurmukhi-line-height: 1.8; --gurmukhi-pad: 0.18em; } :not(html):not(body)[lang="pa"], .gurmukhi, .punjabi, .punjabi-block, .bi-pa { word-break: normal; overflow-wrap: anywhere; hyphens: none; } } @media (max-width: 380px) { :root { --gurmukhi-line-height: 1.85; } }