/* =========================================================================== Thmanyah typeface (خط ثمانية) — self-hosted webfont layer + kashida toolkit --------------------------------------------------------------------------- Loaded AFTER main.min.css and BEFORE rtl-i18n.css, which is where the Arabic font stack (--ff-arabic) is actually wired into the page. The family ships as three separate optical families, each in five static weights (300 / 400 / 500 / 700 / 900 — there is NO 600): Thmanyah Sans خط ثمانية الرقمي UI, digital, interfaces Thmanyah Serif Text خط ثمانية للنصوص long-form body copy Thmanyah Serif Display خط ثمانية للعناوين headlines, big type Source package (OTF + licence + the foundry's aesthetics guide) lives in assets-src/fonts/Thmanyah-Font-Family/ — deliberately outside public/ so the 18 MB PDF and the desktop OTFs never ship to the CDN. Only the 15 woff2 files below are deployed. Sections 1. @font-face — Thmanyah Sans 2. @font-face — Thmanyah Serif Text 3. @font-face — Thmanyah Serif Display 4. Family tokens 5. Family utilities (opt any element into another optical family) 6. Kashida toolkit (تطويل / كشيدة) ========================================================================= */ /* ---- Script coverage ------------------------------------------------------ Every face below carries the same `unicode-range`, and it is the whole mechanism behind one rule: on an Arabic page, Arabic renders in Thmanyah and everything Latin — English words, Western numerals, ASCII punctuation — renders in Manrope, the face the English side of the site already uses. Thmanyah does ship Latin and 0-9, but its Latin is a display companion to the Arabic rather than a text face, and an English word or a year set in it looks wrong beside the rest of the site. Rather than patch that per element, the range simply does not claim those codepoints, so the browser falls through to the next family in the stack by itself — per character, no JavaScript, no wrapper spans. Thmanyah keeps exactly three things: · every Arabic block, including both presentation-forms blocks · Arabic-Indic numerals ٠-٩ and Arabic punctuation ، ؛ ؟ ۔, which live inside U+0600-06FF and which Manrope has no glyph for at all · « » (U+00AB/U+00BB), the quotation marks Arabic copy actually sets Everything else goes to Manrope. Note that this deliberately includes the shared ASCII marks: the alternative kept `&` in Thmanyah and left the brand reading B&P with a serif ampersand between two sans letters, which is a far more visible mismatch than a Manrope full stop at the end of an Arabic sentence. */ /* ---- 1. Thmanyah Sans — خط ثمانية الرقمي ----------------- */ @font-face { font-family: "Thmanyah Sans"; src: url("/fonts/thmanyah/sans-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Sans"; src: url("/fonts/thmanyah/sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Sans"; src: url("/fonts/thmanyah/sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* The family has no 600. main.css asks for it in a lot of accent labels, so Bold claims 600-800 explicitly rather than leaving a UA free to synthesise a fake semibold. */ @font-face { font-family: "Thmanyah Sans"; src: url("/fonts/thmanyah/sans-700.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Sans"; src: url("/fonts/thmanyah/sans-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* ---- 2. Thmanyah Serif Text — خط ثمانية للنصوص ----------- */ @font-face { font-family: "Thmanyah Serif Text"; src: url("/fonts/thmanyah/serif-text-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Serif Text"; src: url("/fonts/thmanyah/serif-text-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Serif Text"; src: url("/fonts/thmanyah/serif-text-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Serif Text"; src: url("/fonts/thmanyah/serif-text-700.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Serif Text"; src: url("/fonts/thmanyah/serif-text-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* ---- 3. Thmanyah Serif Display — خط ثمانية للعناوين ------ */ @font-face { font-family: "Thmanyah Serif Display"; src: url("/fonts/thmanyah/serif-display-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Serif Display"; src: url("/fonts/thmanyah/serif-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Serif Display"; src: url("/fonts/thmanyah/serif-display-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Serif Display"; src: url("/fonts/thmanyah/serif-display-700.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: "Thmanyah Serif Display"; src: url("/fonts/thmanyah/serif-display-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; unicode-range: U+00AB, U+00BB, U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* ---- 4. Family tokens ---------------------------------------------------- rtl-i18n.css §1 points --ff-arabic at the Serif Text token and promotes display-role elements to the Display one. Manrope sits second in every stack: it is what the unicode-range above hands Latin and Western numerals to, and it is the face the English side of the site already uses, so the two scripts stay visually related. Thmanyah Sans is declared but unused — see rtl-i18n.css §1. Nothing references its token, so the browser never downloads those five files. */ :root { --ff-thmanyah-sans: "Thmanyah Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ff-thmanyah-text: "Thmanyah Serif Text", "Manrope", Georgia, serif; --ff-thmanyah-display: "Thmanyah Serif Display", "Manrope", Georgia, serif; } /* ---- 5. Role + utility hooks --------------------------------------------- rtl-i18n.css §1 paints every element on an Arabic page with `font-family: var(--ff-ar-role, var(--ff-arabic)) !important` and `font-feature-settings: var(--ar-feat, normal)`. Everything below steers those two custom properties rather than trying to out-specify an `!important` blanket rule — properties inherit, so setting one on a heading also covers the spans inside it. All three families share the same metrics (1000 upem, 521 x-height, 700 cap-height), so moving an element between them never reflows the page. */ .locale-ar .ff-ar-sans { --ff-ar-role: var(--ff-thmanyah-sans); } .locale-ar .ff-ar-text { --ff-ar-role: var(--ff-thmanyah-text); } .locale-ar .ff-ar-display { --ff-ar-role: var(--ff-thmanyah-display); } /* =========================================================================== 6. Kashida toolkit — كشيدة / تطويل --------------------------------------------------------------------------- Two mechanisms, applied at two different layers of the site: (a) SWASH FINALS — الأحرف المرسلة. Pure CSS, no content change. The `swsh` feature swaps the ISOLATED and FINAL form of 15 Arabic letters (ب ت ث س ش ص ض ف ق ك م ن ي ى ئ) for a long swept tail. Initial and medial forms are untouched, so it can only ever affect the last letter of a word — exactly the rule the foundry's guide states. rtl-i18n.css §1b turns this on for display-role elements site-wide. The classes here are for one-off use on top of that. (b) TATWEEL KASHIDA — تطويل. Literal U+0640 characters in the copy. The font's required-ligature table (`rlig`, always on) turns letter + ـ … ـ into a properly drawn extended glyph, in five graded steps. The first costs ≈ 0.21–0.28em (it swaps the letter for a kashida-bearing glyph); each one after adds a steady ≈ 0.123em, to a ceiling of ≈ 0.7em at five. A sixth changes nothing. src/lib/arabic-type.js applies this to every Arabic string on its way to the page — headlines, labels, buttons and body prose alike. The foundry's rules, which both layers are tuned to: · never on two adjacent words · at most one per sentence · never inside long body copy ========================================================================= */ /* Turn a swash on, or off, for one element. Both steer the same property the blanket rule reads, so they work anywhere without !important. */ .locale-ar .kashida { --ar-feat: "swsh" 1; } .locale-ar .kashida-none { --ar-feat: normal; } /* The brand mark. `salt` swaps the kaf of وشُــــركاؤه for its swash alternate — kaf is the one letter in this family carrying initial and medial alternates, which is why the feature does anything at all on a name ending in ـه. The tatweel and the harakat that complete the house form are in the string itself; see BRAND_HOUSE in src/lib/arabic-type.js. */ .locale-ar .brand-ar, .locale-ar .salt-ar { --ar-feat: "salt" 1; } /* Same feature, two names, because they mark different intentions: .brand-ar says "this run is the firm's mark"; .salt-ar says "flourish this run". Note what salt does to a whole sentence — it swaps the kaf wherever it falls, but ALSO every word-final ب ت ث س ش ص ض ف ق ك م ن ي ى. On a run longer than a few words that is more than the foundry's guide asks for, so reach for it deliberately, not by default. */ /* The `salt` route the foundry's guide names ("Stylistic Alternates" in Figma and Adobe). Identical result for Arabic letters; it additionally reaches the a/g Latin alternates and the fatha variants. */ .locale-ar .kashida-salt { --ar-feat: "salt" 1; } /* Extended fatha — الفتحة الممتدة (ss03 … ss07). The foundry's guide says to pick the level by how many tatweels the word carries. Measured against this family, that lands as: class feature fatha width sits over .shadda-1 ss03 0.334em a 2-tatweel kashida (0.361em) .shadda-2 ss04 0.469em 3 tatweels (0.483em) .shadda-3 ss05 0.604em 4 tatweels (0.606em) .shadda-4 ss06 0.738em 5 tatweels (0.732em) .shadda-5 ss07 0.872em longer than the font stretches Only U+064E is substituted, so a damma or a tanween in the same element is untouched — which is why the class can sit on a whole heading. Display sizes only; the guide is explicit that this never belongs in long text. */ .locale-ar .shadda-1 { --ar-feat: "ss03" 1; } .locale-ar .shadda-2 { --ar-feat: "ss04" 1; } .locale-ar .shadda-3 { --ar-feat: "ss05" 1; } .locale-ar .shadda-4 { --ar-feat: "ss06" 1; } .locale-ar .shadda-5 { --ar-feat: "ss07" 1; } .locale-ar .kashida.shadda-1 { --ar-feat: "swsh" 1, "ss03" 1; } .locale-ar .kashida.shadda-2 { --ar-feat: "swsh" 1, "ss04" 1; } .locale-ar .kashida.shadda-3 { --ar-feat: "swsh" 1, "ss05" 1; } .locale-ar .kashida.shadda-4 { --ar-feat: "swsh" 1, "ss06" 1; } .locale-ar .kashida.shadda-5 { --ar-feat: "swsh" 1, "ss07" 1; } /* A swash tail can overhang the line above or below at large sizes. Add this to the heading (not the span) if a descender ever collides. */ .locale-ar .kashida-room { padding-bottom: 0.12em; } /* End of file */