/* Brand fonts — official Mumaken identity files. Converted from TTF/OTF to WOFF2. Loaded with font-display:swap so text renders immediately in a system fallback and switches when ready. */ /* ─── ZainMobVariable (Arabic) — used by the v1 landing design ── The figma CSS asks for these family names by their full ID: "ZainMobVariable200-ZainMobVariable200" ← hero headline (kashida, light) "ZainMobVariable400-ZainMobVariable400" ← body paragraphs "ZainMobVariable600-ZainMobVariable600" ← display headings (kashida, bold) "Zain-Regular" ← body paragraphs / subtitles "Zain-ExtraBold" ← strong inline emphasis Headings keep the ZAIN-mob-variable display font (with kashida) at weights 200 and 600. Body text and subtitles use the regular Zain sans-serif for readability. */ /* 200 family → actual ZainMobVariable 200 (display font with kashida, light) */ @font-face { font-family: "ZainMobVariable200-ZainMobVariable200"; src: url("../fonts/zain-mob/ZainMobVariable-200.4ed2a32d2c37.woff2") format("woff2"), url("../fonts/zain-mob/ZainMobVariable-200.73bc6fd0034d.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; } /* 400 family → Zain Regular (clean sans for body text) */ @font-face { font-family: "ZainMobVariable400-ZainMobVariable400"; src: url("../fonts/zain/Zain-Regular.c485b8d2709a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* 600 family → ZainMobVariable 600 (display with kashida, bold) */ @font-face { font-family: "ZainMobVariable600-ZainMobVariable600"; src: url("../fonts/zain-mob/ZainMobVariable-600.b05fd7a79f5b.woff2") format("woff2"), url("../fonts/zain-mob/ZainMobVariable-600.be63bcf07fc8.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } /* Standalone Zain weights the figma CSS references directly */ @font-face { font-family: "Zain-Regular"; src: url("../fonts/zain/Zain-Regular.c485b8d2709a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Zain-ExtraBold"; src: url("../fonts/zain/Zain-ExtraBold.60174a9b1cc2.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* Convenience alias so the rest of the site can still ask for "ZainMob" */ @font-face { font-family: "ZainMob"; src: url("../fonts/zain-mob/ZainMobVariable-200.4ed2a32d2c37.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "ZainMob"; src: url("../fonts/zain-mob/ZainMobVariable-400.873df7cb34cd.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "ZainMob"; src: url("../fonts/zain-mob/ZainMobVariable-600.b05fd7a79f5b.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "ZainMob"; src: url("../fonts/zain-mob/ZainMobVariable-800.dee9b884cc3c.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* ─── Inter aliases — figma uses "Inter-Black/Bold/Regular" as separate families. We don't have Inter locally, so map them to the Google Fonts Inter loaded in the page . Defining them here also gives us a stable named fallback that's known to be Arabic-safe via "ZainMob". */ @font-face { font-family: "Inter-Black"; src: local("Inter Black"), local("Inter-Black"), local("Inter"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter-Bold"; src: local("Inter Bold"), local("Inter-Bold"), local("Inter"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Inter-Regular"; src: local("Inter"), local("Inter-Regular"); font-weight: 400; font-style: normal; font-display: swap; } /* ─── Zain (Arabic) ───────────────────────────────────────────── */ @font-face { font-family: "Zain"; src: url("../fonts/zain/Zain-Light.7c37603863b8.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Zain"; src: url("../fonts/zain/Zain-Regular.c485b8d2709a.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Zain"; src: url("../fonts/zain/Zain-Bold.d5862976db4a.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Zain"; src: url("../fonts/zain/Zain-ExtraBold.60174a9b1cc2.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Zain"; src: url("../fonts/zain/Zain-Black.9dfe49e916fb.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* ZainSwash — variable font with the elongated kashida ("long" axis 0–800) used on display headlines to match the PDF look. */ @font-face { font-family: "ZainSwash"; src: url("../fonts/zain/Zain-Swashes-VF.76767d2a5f72.woff2") format("woff2-variations"), url("../fonts/zain/Zain-Swashes-VF.76767d2a5f72.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ─── Adobe Arabic (English/Latin) ───────────────────────────── */ @font-face { font-family: "AdobeArabic"; src: url("../fonts/adobe-arabic/AdobeArabic-Regular.64c8807b89e6.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "AdobeArabic"; src: url("../fonts/adobe-arabic/AdobeArabic-Italic.bc884101c762.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "AdobeArabic"; src: url("../fonts/adobe-arabic/AdobeArabic-Bold.f9632dae0c05.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "AdobeArabic"; src: url("../fonts/adobe-arabic/AdobeArabic-BoldItalic.41c4d9ad387c.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }