/* ============================================================ Niyat homepage — Bengali locale overrides. Loaded AFTER /assets/homepage.css. Nothing here belongs in the shared sheet: every rule exists because Bengali script has different metrics and different typographic conventions to Latin. Type pairing ------------ Latin keeps Fraunces + Karla so the brand reads the same in every locale. Bengali falls through to: display → Tiro Bangla (literary, calligraphic, high contrast — the closest Bengali analogue to Fraunces) UI/body → Hind Siliguri (humanist, holds up at 11–15px where Tiro's fine strokes would break down) Per-glyph fallback does the switching: Fraunces/Karla have no Bengali coverage, so Bengali always lands on the Bengali face. ============================================================ */ :root{ --serif:"Fraunces","Tiro Bangla",Georgia,serif; --sans:"Karla","Hind Siliguri","Helvetica Neue",sans-serif; /* Bengali display face used on its own where Fraunces would win the cascade but the string is Bengali-only. */ --bn-display:"Tiro Bangla",Georgia,serif; } /* ------------------------------------------------------------ 1. VERTICAL METRICS Bengali stacks a matra (headline) above the x-height and hangs conjuncts + ৃ ূ ্র below the baseline. The Latin line-heights in homepage.css (1.06 on .h1) collide on both edges. ------------------------------------------------------------ */ body{line-height:1.8} /* Negative tracking is a Latin display trick. In Bengali it pulls the pre-base vowel signs (ি ে ৈ) into the preceding conjunct — the gold in a heading collided with the next word's ি at -.022em. Zero it everywhere the shared sheet tightens a heading. */ .h1,.h2,.h1 em,.h2 em,h1,h2,h3, .qcard h3,.ftile h3,.card h3,.step h3,.faq__q,.pane__line, .brand__word,.tcard blockquote,.srcchip__q{letter-spacing:0} .h1{line-height:1.34} .h2{line-height:1.36} /* Tiro Bangla gives ি ে almost no left sidebearing, so at heading size a word starting with a pre-base vowel sits on the previous word's tail. Widen the word space only — never the letter space. */ .h1,.h2,.qcard h3,.ftile h3,.card h3,.step h3,.faq__q{word-spacing:.09em} .lede,.body,.sub{line-height:1.85;max-width:54ch} .faq__a p,.ftile__lead,.card p,.qcard p,.step p{line-height:1.8} .flist li,.ask__points li{line-height:1.7} .fig span{line-height:1.6;max-width:24ch} .foot__brand p{line-height:1.8;max-width:38ch} /* ------------------------------------------------------------ 2. THE WORD MASK .mask has overflow:hidden and only .08em of bottom padding, sized for Fraunces. Bengali's matra sits above the em box and য় ্র ূ hang below it, so grow the box vertically and pull the extra height back out with negative margins — the headline keeps its intended rhythm. The travel distance grows to match, otherwise the word is still partly visible at rest. overflow:hidden clips HORIZONTALLY too, and that is the one that actually bit: Tiro Bangla draws ই (and the ে ৈ ো pre-base vowels) with ink outside the glyph's advance width, so the inline-box edge shaved the top curl of ই in "ইসলামিক" flat. Measured by screenshot- diffing the headline against the same headline with overflow:visible: 248 clipped pixels at 0em, 0 at .06em. .10em is the same fix with headroom; the negative margins cancel it exactly, so the headline's width and height are byte-for-byte what they were (470 x 238.2 at 1440). Do not drop the margins — they are what makes this invisible. ------------------------------------------------------------ */ .mask{ padding-top:.30em; padding-bottom:.30em; margin-top:-.24em; margin-bottom:-.26em; padding-left:.10em; padding-right:.10em; margin-left:-.10em; margin-right:-.10em; } .mask__w{transform:translateY(140%)} .is-in .mask__w{transform:translateY(0)} @media (prefers-reduced-motion:reduce){ .mask__w{transform:none} } /* The gradient sheen is clipped to the glyphs, so it inherits the same descender problem — give it room inside its own box. */ .sheen{padding-bottom:.06em} /* ------------------------------------------------------------ 3. TRACKING AND CASE Bengali has no upper case, so text-transform:uppercase is either a no-op or (on the Latin inside a mixed string) it shouts the brand name. And .16–.24em tracking visually detaches a dependent vowel sign from its base consonant. Both are reset for every micro-label the design tracks out. ------------------------------------------------------------ */ .eyebrow,.qtag,.qtime,.qgo,.flink,.linkline a,.step__n,.tmeta, .cites__lb,.chip,.reask,.dial__mn,.dial__hint,.dnode__tr, .ayah__ref,.cta__rate,.foot h4,.store small,.chat__who small, .chat__empty p+p,.pane__label,.madhab__foot,.brand__tag,.foot__in{ text-transform:none; letter-spacing:.03em; } .eyebrow{font-size:12.5px;font-weight:600} .foot h4{font-size:12px} .step__n{font-size:12px} .dial__mn{font-size:.76rem} .dial__hint{font-size:12px;letter-spacing:.06em} .dnode__tr{font-size:.66rem} .ayah__ref{font-size:13px;letter-spacing:.06em} .cites__lb{font-size:11px} .chat__empty p+p{font-size:12px} /* 9.5px Bengali in the store badges is below the legibility floor. */ .store small{font-size:11px} .tmeta{font-size:12.5px} .qtag{font-size:11.5px;padding:.3em .7em} .qtime{font-size:12.5px} .qgo,.flink,.linkline a{font-size:13px} /* Station numerals are Bengali digits set in the display face. */ .eyebrow__num{font-family:var(--bn-display);letter-spacing:.02em;padding:.2em .55em .25em} /* ------------------------------------------------------------ 4. ITALICS Neither Tiro Bangla's roman nor a synthesised oblique is a real Bengali italic; slanted Bengali reads as a rendering fault. The emphasis the design carries in italic is carried in colour here. Latin runs (the "Niyat" wordmark) keep their italic. ------------------------------------------------------------ */ .h2 em,.h1 em,.ftile h3 em{font-style:normal;color:var(--gold)} .ayah__tr,.chat__empty p,.tcard blockquote,.phone__note{font-style:normal} .ayah__tr{line-height:1.75;max-width:28ch} .tcard blockquote{line-height:1.7;font-size:1.05rem} /* ------------------------------------------------------------ 5. COMPONENT FIT Bengali sets longer than English at the same point size in the tight boxes (nav rail, chat bubbles, suggested questions, dial). ------------------------------------------------------------ */ .nav__links a{font-size:14px} .brand__word{font-family:var(--serif)} .bub{font-size:14.5px;line-height:1.75} .bub em.wf{font-size:18px} .qbtn{font-size:13.5px;line-height:1.55;padding:.65rem .8rem} .chat__who b{font-size:14.5px} .chat__who small{font-size:11px} .chat__empty p{font-size:13.5px;max-width:24ch;line-height:1.7} .chip{font-size:12px;padding:.42rem .65rem;line-height:1.35} .reask{font-size:12px;padding:.45rem .85rem} .ask__hint{font-size:14px;letter-spacing:.03em;text-transform:none} /* The dial centre holds three stacked lines inside 44% of the disc. Bengali meanings are longer than "The Most Merciful" — widen the well and let the meaning wrap to two lines without touching the ring. */ .dial__centre{width:56%} .dial__tr{font-size:1.02rem;line-height:1.5;margin-top:.3rem} .dial__mn{margin-top:.45rem;line-height:1.5} .dnode{width:118px;margin-left:-59px} .dnode__tr{line-height:1.5} @media (max-width:640px){ .dnode{width:100px;margin-left:-50px} .dnode__tr{font-size:.6rem} .dial__centre{width:60%} } /* Counters are Bengali digits (see the numeral shim in the page), which sit slightly taller than Latin lining figures. */ .fig__n{line-height:1.25;font-family:var(--bn-display)} /* FAQ questions run long in Bengali; give the chevron room and stop the two-line question crowding the +. */ .faq__q{line-height:1.55;gap:1rem} .faq__a p{padding-bottom:1.4rem} /* ------------------------------------------------------------ 6. ARABIC INSIDE THE BENGALI PAGE Quranic Arabic keeps Amiri and its own metrics in every locale. ------------------------------------------------------------ */ .ayah,.bub--ar .ar,.dial__ar,.dnode__ar,.bub em.wf{font-family:var(--arab)} .ayah{line-height:1.95} /* ------------------------------------------------------------ 7. RESPONSIVE TOUCH-UPS ------------------------------------------------------------ */ @media (max-width:640px){ .h1{font-size:clamp(1.95rem,7.6vw,2.5rem);line-height:1.4} .h2{line-height:1.42} .eyebrow{font-size:11.5px} .mask{padding-top:.26em;padding-bottom:.26em;margin-top:-.2em;margin-bottom:-.22em} }