/* Quran text: KFGQPC Uthmanic Hafs v22 (King Fahd Glorious Quran Printing Complex). Free to use and share; the file is served exactly as published, never modified. Calligraphic surah names, juz names, basmala and surah frame: Quranic Universal Library fonts. */ @font-face { font-family: 'UthmanicHafs'; src: url(/seo/fonts/UthmanicHafs_V22-aa68bffce289.woff2) format('woff2'), url(/assets/UthmanicHafs_V22-BwcbS6sa.ttf) format('truetype'); font-display: swap; } /* SurahNames: declared by each page, cut to its own names (build-seo.mjs) */ @font-face { font-family: 'QuranCommon'; src: url(/seo/fonts/quran-common-63675d54764c.woff2) format('woff2'), url(/assets/quran-common-DW54gqHM.ttf) format('truetype'); font-display: swap; } /* noto-naskh-arabic-arabic-400-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/noto-naskh-arabic-arabic-400-normal-U_i0HMfG.woff2) format('woff2'), url(/assets/noto-naskh-arabic-arabic-400-normal-1AoZhAAW.woff) format('woff'); 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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } /* noto-naskh-arabic-math-400-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/noto-naskh-arabic-math-400-normal-tNY49amj.woff2) format('woff2'), url(/assets/noto-naskh-arabic-math-400-normal-C570QcAC.woff) format('woff'); unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF; } /* noto-naskh-arabic-symbols-400-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/noto-naskh-arabic-symbols-400-normal-BoBMuTRv.woff2) format('woff2'), url(/assets/noto-naskh-arabic-symbols-400-normal-Dyan2v4O.woff) format('woff'); unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF; } /* noto-naskh-arabic-latin-ext-400-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/noto-naskh-arabic-latin-ext-400-normal-BbeOg8Tq.woff2) format('woff2'), url(/assets/noto-naskh-arabic-latin-ext-400-normal-Er5jWGmQ.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* noto-naskh-arabic-latin-400-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/noto-naskh-arabic-latin-400-normal-Dajb6q3W.woff2) format('woff2'), url(/assets/noto-naskh-arabic-latin-400-normal-pwOnwvFs.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* noto-naskh-arabic-arabic-600-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/noto-naskh-arabic-arabic-600-normal-G5n5bgdQ.woff2) format('woff2'), url(/assets/noto-naskh-arabic-arabic-600-normal-DaTr67aF.woff) format('woff'); 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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } /* noto-naskh-arabic-math-600-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/noto-naskh-arabic-math-600-normal-EJZZ5b9D.woff2) format('woff2'), url(/assets/noto-naskh-arabic-math-600-normal-DROtbd6p.woff) format('woff'); unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF; } /* noto-naskh-arabic-symbols-600-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/noto-naskh-arabic-symbols-600-normal-B-3Cxf8g.woff2) format('woff2'), url(/assets/noto-naskh-arabic-symbols-600-normal-C3RTzH7A.woff) format('woff'); unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF; } /* noto-naskh-arabic-latin-ext-600-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/noto-naskh-arabic-latin-ext-600-normal-xG-w6L3Y.woff2) format('woff2'), url(/assets/noto-naskh-arabic-latin-ext-600-normal-B04rPZYM.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* noto-naskh-arabic-latin-600-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/noto-naskh-arabic-latin-600-normal-DByBVxli.woff2) format('woff2'), url(/assets/noto-naskh-arabic-latin-600-normal-16Vd4b9R.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* noto-naskh-arabic-arabic-700-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/noto-naskh-arabic-arabic-700-normal-BdBAMxnO.woff2) format('woff2'), url(/assets/noto-naskh-arabic-arabic-700-normal-fm10sHOa.woff) format('woff'); 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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } /* noto-naskh-arabic-math-700-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/noto-naskh-arabic-math-700-normal-BP-LajJh.woff2) format('woff2'), url(/assets/noto-naskh-arabic-math-700-normal-CDAZVDWY.woff) format('woff'); unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF; } /* noto-naskh-arabic-symbols-700-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/noto-naskh-arabic-symbols-700-normal-s-Hxeun5.woff2) format('woff2'), url(/assets/noto-naskh-arabic-symbols-700-normal-BzCgKmvF.woff) format('woff'); unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF; } /* noto-naskh-arabic-latin-ext-700-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/noto-naskh-arabic-latin-ext-700-normal-BdpHOyev.woff2) format('woff2'), url(/assets/noto-naskh-arabic-latin-ext-700-normal-kZwI4aZI.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* noto-naskh-arabic-latin-700-normal */ @font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/noto-naskh-arabic-latin-700-normal-CG_vrPqD.woff2) format('woff2'), url(/assets/noto-naskh-arabic-latin-700-normal-DP4-Rtre.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* amiri-arabic-400-normal */ @font-face { font-family: 'Amiri'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/amiri-arabic-400-normal-D0NIBXga.woff2) format('woff2'), url(/assets/amiri-arabic-400-normal-C_1DQziU.woff) format('woff'); 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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } /* amiri-latin-ext-400-normal */ @font-face { font-family: 'Amiri'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/amiri-latin-ext-400-normal-C9hoIjPx.woff2) format('woff2'), url(/assets/amiri-latin-ext-400-normal-CGn-6a7O.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* amiri-latin-400-normal */ @font-face { font-family: 'Amiri'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/amiri-latin-400-normal-Czk41Rjn.woff2) format('woff2'), url(/assets/amiri-latin-400-normal-Bv6IM0kz.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* amiri-arabic-700-normal */ @font-face { font-family: 'Amiri'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/amiri-arabic-700-normal-D8FrblyB.woff2) format('woff2'), url(/assets/amiri-arabic-700-normal-dUd6sHq-.woff) format('woff'); 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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; } /* amiri-latin-ext-700-normal */ @font-face { font-family: 'Amiri'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/amiri-latin-ext-700-normal-ByFuOT8o.woff2) format('woff2'), url(/assets/amiri-latin-ext-700-normal-Ck-lxu84.woff) format('woff'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* amiri-latin-700-normal */ @font-face { font-family: 'Amiri'; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/amiri-latin-700-normal-DIjoEGk6.woff2) format('woff2'), url(/assets/amiri-latin-700-normal-BH9dHmOv.woff) format('woff'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Colour themes, generated by tools/make-ornaments.mjs: do not edit by hand. */ :root, :root[data-palette="book"] { --paper: #ffffff; --ink: #1f1d1f; --tajweed: #2a74c8; --bg: #eef2f7; --chrome: #22303f; --chrome-bg: #ffffff; --line: #282630; --rust: #bd6944; --rust-text: #9a4f2f; --blue: #3480d9; --light-blue: #b7d1f0; --lightest-blue: #e3eefa; --peach: #e9c9b8; --navy: #1d3f78; --surface: #ffffff; --surface-2: #f3f6fa; --text: #1f1d1f; --muted: #5d6675; --accent: #1f5fae; --on-accent: #ffffff; --border: #d9e1ec; --shadow: rgb(20 40 70 / 0.18); } :root[data-palette="comfort"] { --paper: #faf6ec; --ink: #2a2420; --tajweed: #2a64a8; --bg: #e8e2d4; --chrome: #3a3128; --chrome-bg: #faf6ec; --line: #4b4038; --rust: #b37256; --rust-text: #8e5034; --blue: #517fb8; --light-blue: #c9d7e9; --lightest-blue: #eaeff5; --peach: #efdccd; --navy: #2f4a70; --surface: #fbf8f1; --surface-2: #f1ebdf; --text: #2a2420; --muted: #6b5f53; --accent: #386194; --on-accent: #ffffff; --border: #e0d6c4; --shadow: rgb(60 40 20 / 0.16); } :root[data-palette="night"] { --paper: #1c1b19; --ink: #e6ddcb; --tajweed: #7faee3; --bg: #0f1114; --chrome: #e6ddcb; --chrome-bg: #1c1b19; --line: #0d0c0b; --rust: #a86d51; --rust-text: #d49a7c; --blue: #4e77a6; --light-blue: #2c3b4f; --lightest-blue: #232a33; --peach: #4a3c33; --navy: #152238; --surface: #1f1e1c; --surface-2: #282624; --text: #e6ddcb; --muted: #a39a8c; --accent: #7faee3; --on-accent: #10151c; --border: #3a3733; --shadow: rgb(0 0 0 / 0.45); } :root[data-palette="shamil"] { --paper: #fffdf7; --ink: #1b1e1b; --tajweed: #2a74c8; --bg: #f5f2e9; --chrome: #1b2a22; --chrome-bg: #fffdf7; --line: #17261e; --rust: #c38a1e; --rust-text: #7a5c14; --blue: #177a52; --light-blue: #c3e5d1; --lightest-blue: #e6f4ec; --peach: #f5dc98; --navy: #0e4630; --surface: #fffdf7; --surface-2: #f4f0e4; --text: #1b2a22; --muted: #56635b; --accent: #1f4d3a; --on-accent: #ffffff; --border: #e3dccb; --shadow: rgb(20 45 32 / 0.16); } :root { --label-font: 'Noto Naskh Arabic', 'Amiri', serif; --ui-font: 'Noto Naskh Arabic', 'Amiri', sans-serif; --title-font: 'Amiri', 'Noto Naskh Arabic', serif; --quran-font: 'UthmanicHafs', serif; --img-frame: url(/img/shamil/frame.svg); --img-cartouche: url(/img/shamil/cartouche.svg); --img-panel: url(/img/shamil/panel.svg); --img-ayah: url(/img/shamil/ayah.svg); --img-hizb: url(/img/shamil/hizb.svg); --img-backdrop: url(/img/shamil/backdrop.svg); --img-shamsa: url(/img/shamil/shamsa.svg); --img-shamsa-plain: url(/img/shamil/shamsa-plain.svg); --img-roundel: url(/img/shamil/roundel.svg); } /* The mushaf page. Colours and ornament images come from the colour theme (palettes.css and theme.js). --w (the page width) is set by the reader for every page. */ /* The smallest size of the rule names (labels.js reads it from here). A name is a few px tall, and how well it reads depends on how many device pixels draw it: 7px on an ordinary screen (a laptop at 100% or 125%), 6.5px on a sharp one (1.5 or more device pixels per px: phones, most tablets, Macs, laptops set to 150%), where it is drawn with 10-20 device pixels and is still as clear (dev/research/REPORT.md, 4.2). The reader lays the pages out again when the window moves to a screen of another sharpness (main.js). (-webkit-min-device-pixel-ratio: Safari before 16 knows no resolution in dppx.) */ :root { --label-floor: 7px; } @media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) { :root { --label-floor: 6.5px; } } /* Since the minimum reading size (reader.js, 2026-09-24: the owner found the names of a phone's page, 6.5px, too hard to read), the names of a Quran page are never smaller than 8px, on every screen: a laptop's or an iPad's page on its side at the minimum (22-23px text) drew them at 6.5-7px, the smallest in the app. The page as wide as a phone's screen sets its own (8-9.5px, reader.js), the reading mode its own (8px, reflow.css). The opening pages keep the screen's (above), and so their shape (reader.js sheetOf: front; .front-shape is the sample page measured for them). The whole page (reader.js THE WHOLE PAGE, 2026-09-25), where it is drawn smaller to be whole, is drawn as printed: reader.js sets its pages' --label-floor to 0 (its names 0.29em, its lines the book's 2.1em; read larger with a pinch). */ .page:not(.front):not(.front-shape) { --label-floor: 8px; } .page { --w: 700px; --bw: calc(var(--w) * 0.078); /* width of the ornamental border */ /* A page made larger in the settings (the page size above 100%: reader.js sets --page-zoom on its view) makes the names' smallest size larger with it, as everything else on the page: at 125% the Quran text grew by a third and the names by nothing (they were at their smallest size), and the page size was the only way the apps (no pinch-zoom there until capacitor.config.json zoomEnabled, 2026-09-25) had to make the names larger. The page then scrolls, so its taller lines cost nothing. */ --label-min: calc(var(--label-floor) * var(--page-zoom, 1)); --label-size: max(0.29em, var(--label-min)); /* as in print (0.29em), but never below the smallest size */ /* The height of a line: room for the ink of the line (about 1.5em) and for two rows of names at their smallest size above it, but never less than the book's 2.1em. On a small page (a phone, a laptop) the names are at their smallest size, larger for the page than in print, and the lines are a little further apart than in the book. On a large page (a desktop, a tablet held upright), where the names are larger than their smallest size, the lines take the book's 2.1em, and the page the book's shape (1:1.49; the names then have 2.07 rows of room, as in print: 0 problems on 604 pages, dev/research/tajweed-labels/notes.md 7). Between the two, as the page grows the names grow into the room kept for them until the line is 2.1em: the page's shape never jumps as a window is resized. */ --line-h: max(2.1em, calc(1.5em + 2.35 * var(--label-min))); width: var(--w); flex: none; position: relative; color: var(--ink); font-size: calc(var(--w) * 0.045); /* refined by the layout code */ border: var(--bw) solid transparent; border-image: var(--img-frame) 100 round; background: var(--paper); box-shadow: 0 1px 3px rgb(0 0 0 / 0.14), 0 10px 28px var(--shadow); } /* Without the rule names (Settings), their empty rows go too: every line takes the book's 2.1em, the page has the book's own shape, and the reader lays the pages out again (main.js). The colours stay. */ .no-labels .page, .no-colours .page { --line-h: 2.1em; } .page-inner { padding: calc(var(--w) * 0.012); } /* ---- the sheet of paper each page lies on (reader/paper.js sets its margins) ---- Its edge is a hairline and it casts a soft shadow, so the paper stands out from the desk in every theme: white paper on a pale desk (book), cream on sand (comfort), dark paper on a darker desk (night), ivory on a warm ivory desk (shamil, the app's green and gold). The frame is printed on it: it casts no shadow of its own there. */ :root { --paper-edge: rgb(31 50 80 / 0.16); --gutter: rgb(31 50 80 / 0.16); } :root[data-palette="comfort"] { --paper-edge: rgb(75 55 35 / 0.2); --gutter: rgb(75 55 35 / 0.17); } :root[data-palette="night"] { --paper-edge: rgb(255 255 255 / 0.1); --gutter: rgb(0 0 0 / 0.5); } :root[data-palette="shamil"] { --paper-edge: rgb(23 45 32 / 0.16); --gutter: rgb(23 45 32 / 0.15); } /* The page turn (turn.css): the colour of its shadows and of the light on the bend and across the back of the turning page, as r g b. On night paper the light is a dim grey: white would glare on dark paper. */ :root { --turn-shadow: 0 0 0; --turn-sheen: 255 255 255; } :root[data-palette="comfort"] { --turn-shadow: 40 26 12; --turn-sheen: 255 252 244; } :root[data-palette="night"] { --turn-shadow: 0 0 0; --turn-sheen: 72 70 66; } :root[data-palette="shamil"] { --turn-shadow: 12 30 20; --turn-sheen: 255 253 247; } .paper { flex: none; position: relative; background: var(--paper); box-shadow: 0 0 0 1px var(--paper-edge), 0 1px 3px rgb(0 0 0 / 0.12), 0 10px 28px var(--shadow); } .paper:not(.none) > .page { box-shadow: none; } /* ?shot, ?audit and ?selftest: the frame alone, as it always was */ .paper.none { background: none; box-shadow: none; } /* The paper curves down into the binding: a soft shade from the spine, over the thin inner margin (--spine) and a little way onto the frame's outer border; it never reaches the text. */ .paper[class*="spine-"]::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none; width: calc(var(--spine) + 2.6%); } .paper.spine-left::after { left: 0; background: linear-gradient(to right, var(--gutter), color-mix(in srgb, var(--gutter) 30%, transparent) 40%, transparent); } .paper.spine-right::after { right: 0; background: linear-gradient(to left, var(--gutter), color-mix(in srgb, var(--gutter) 30%, transparent) 40%, transparent); } /* a page shown alone (a tablet held upright) turns over its right edge: a softer shade there */ .view:not(.spread) > .paper::after { opacity: 0.55; } /* A mushaf page shown alone (a phone, a tablet held upright) says which side it has in the printed mushaf: the shade of the binding falls on its inner edge as in the open book — a right-hand page (odd) is bound at its left edge, a left-hand page (even) at its right (paper.js data-side; the owner, 2026-10-11: «مؤشر للصفحة يمنى أم يسرى»). Only the shade moves: the paper's margins stay as they were, so the page never shifts as the pages turn. It starts a device pixel in from the edge: the page waiting under the one on show for a turn shows a third of a px at the free edge (tools/test-turn.mjs 'still'), which must stay plain paper. */ :root { --bind: rgb(31 50 80 / 0.3); } :root[data-palette="comfort"] { --bind: rgb(75 55 35 / 0.32); } :root[data-palette="night"] { --bind: rgb(0 0 0 / 0.62); } :root[data-palette="shamil"] { --bind: rgb(23 45 32 / 0.3); } .view:not(.spread) > .paper[data-side]::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 3; pointer-events: none; width: calc(var(--spine, 3px) + 4%); opacity: 1; } .view:not(.spread) > .paper[data-side="right"]::after { left: 1px; right: auto; background: linear-gradient(to right, var(--bind), color-mix(in srgb, var(--bind) 35%, transparent) 45%, transparent); } .view:not(.spread) > .paper[data-side="left"]::after { right: 1px; left: auto; background: linear-gradient(to left, var(--bind), color-mix(in srgb, var(--bind) 35%, transparent) 45%, transparent); } /* Two facing pages meet at the spine with no gap, and the open book casts one shadow on the desk (each sheet's own would fall across the other); the sheets keep their hairline edges. */ .view.spread { gap: 0; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 10px 28px var(--shadow); } .view.spread > .paper { box-shadow: 0 0 0 1px var(--paper-edge); } /* Lobed cartouches set into the border, as in print: the surah names and the juz at the top, the page number at the bottom. The whole frame of a page, its bands and cartouches with it, is ONE picture drawn for the page's own size when it is laid out (--frame: reader/frame.js, web/src/frieze.js, from the parts of tools/bands.mjs), laid over the border as the page's background; the frame's own border-image is only what shows before that. A whole number of tiles along every edge, and no joint anywhere: `round` drifted along the sides (Chrome snaps each tile to whole device px), and at the bottom corners a joiner was drawn twice and cut across; pictures laid side by side met on fractions of a device px, and hairlines showed through the joiners where they met. */ .page[data-frame] { border-image-source: none; /* (the longhand: the build's CSS minifier, lightningcss, empties a `border-image: none` into `border-image:`, which the browser drops) */ background: var(--frame) 0 0 / 100% 100% no-repeat border-box, var(--paper); } /* The bands: 8 tiles along the top and bottom edges, each 12.5 % of the edge between the corners (the page's padding box, left 0 to right 0), and every compartment spans whole tiles, so the frieze always ends on a whole joiner at a tile joint: top: names 0 - 37.5 % (tiles 0-2) | two tulips | juz 62.5 - 100 % (tiles 5-7) 3 surahs on the page (.page-head.wide): names 0 - 50 % (tiles 0-3) | one tulip | juz bottom: three tulips | page number 37.5 - 62.5 % (tiles 3-4) | three tulips .page-head / .page-foot lie over them, and their windows over the compartments. The windows' texts are centred by their ink (shapes.js) in the cartouche's paper field: 17 - 83 % of the height, and 0.661 of the height in from each end. */ /* The border's width in whole px, as Chrome draws it (it floors a border's width to whole px): the windows (and their type) then stand exactly over the frame's bands, which are drawn for the border's own width. On a page only the frame's own border and these rules use --bw (front.css's .cover-art too, on the cover, which is left out): pages shot with and without this rule are the same pixels (dev/header-windows/b-lobed-mamluk/floor-check.mjs). In an engine that floors borders to device px, the border becomes whole px as the windows. (Without round(): the windows are < 1px taller than the bands.) */ @supports (width: round(down, 10.5px, 1px)) { .page:not(.cover) { --bw: round(down, calc(var(--w) * 0.078), 1px); } } .page-head, .page-foot { position: absolute; left: 0; right: 0; height: var(--bw); pointer-events: none; } .page-head { top: calc(-1 * var(--bw)); } .page-foot { bottom: calc(-1 * var(--bw)); } .win { position: absolute; top: 0; bottom: 0; width: 37.5%; display: flex; align-items: center; justify-content: center; gap: 0.3em; color: var(--ink); line-height: 1; white-space: nowrap; } .win.juz { right: 0; font-family: 'QuranCommon', var(--ui-font); font-size: calc(var(--bw) * 0.47); } .win.names { left: 0; font-family: 'SurahNames', var(--ui-font); font-size: calc(var(--bw) * 0.54); } /* one name alone is set larger, in em so that the fitting (shapes.js sizes .win-text) still scales it */ .win.names > .win-text > :only-child { font-size: 1.22em; } .win.no { left: 37.5%; width: 25%; font-family: var(--label-font); font-weight: 600; font-size: calc(var(--bw) * 0.4); } .win-text { display: flex; align-items: center; gap: 0.3em; padding: 0 0.15em; } /* three surahs on the page (7 pages, 596-604; reader/dom.js): the four-tile names cartouche */ .page-head.wide .win.names { width: 50%; } /* the page's side in print (reader/dom.js sideMark): a small open book in the middle of the head band, which is left blank there (frieze.js), in the colours of the band's own ornament in each palette: its cover the deep colour of the cartouches' line, the page of that side filled in the ornament's second colour with a gold (rust) ribbon, the other page the light colour of the tulips */ .page-side { position: absolute; top: 10%; bottom: 10%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; } .page-side svg { height: 100%; width: auto; display: block; overflow: visible; } .page-side .bk-cover { fill: var(--navy); } .page-side .pg { fill: color-mix(in srgb, var(--light-blue) 55%, var(--paper)); stroke: var(--navy); stroke-width: 0.9; stroke-linejoin: round; } .page-side .depth, .page-side .ribbon { display: none; } .page-side .spine { stroke: var(--navy); stroke-width: 1.3; } .page-side.right .pg.r, .page-side.left .pg.l { fill: var(--blue); } .page-side.right .depth.r, .page-side.left .depth.l { display: inline; fill: var(--navy); opacity: 0.28; } .page-side.right .ribbon.r, .page-side.left .ribbon.l { display: inline; fill: var(--rust); } /* (three surahs: one blank tile between the cartouches, 50 - 62.5 %) */ .page-head.wide .page-side { left: 56.25%; } /* the page as wide as a phone's screen: the note of a quarter of a hizb beginning on it, in a three-tile cartouche of the foot band on its outer side (reader/shapes.js placeHizbNote, frieze.js 'foot-hizb-r' / 'foot-hizb-l'), its text fitted to the cartouche's paper field (shapes.js): about 8px on a 390px phone */ .win.hizb-note { font-family: var(--label-font); font-weight: 600; font-size: calc(var(--bw) * 0.36); color: var(--rust-text, var(--ink)); } .win.hizb-note.at-right { right: 0; } .win.hizb-note.at-left { left: 0; } /* the text area, framed by a rust rule between two fine lines */ .text-block { position: relative; padding: 0.05em 0.6em; /* room for labels over the first and last letters of a line */ background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 0 0 0.12em var(--rust), 0 0 0 calc(0.12em + 1px) var(--line); } .line { position: relative; height: var(--line-h); /* the ink of the line and the rows of its labels (.page) */ display: flex; align-items: flex-end; justify-content: center; } .line .ink { display: flex; justify-content: space-between; align-items: flex-end; white-space: nowrap; width: 100%; flex: none; transform-origin: center bottom; /* the (narrower) box is centred, so it must grow from its centre */ } /* pages 1 and 2 have 8 lines: same page size as the others, with the lines centred vertically */ .page.centered .text-block { min-height: calc(15 * var(--line-h) + 0.1em); display: flex; flex-direction: column; justify-content: center; } .line .ink.natural { width: max-content; justify-content: flex-start; gap: 0.2em; } .page.centered .line .ink, .line .ink.short { justify-content: center; gap: 0.45em; } .w, .basmala, .rub { font-family: var(--quran-font); line-height: 1.45; } /* a hair of extra weight, closer to the printed calligraphy */ .w { -webkit-text-stroke: 0.018em currentColor; } .tj { color: var(--tajweed); } /* The marks of the reader's highlight() and markWords() (reader.js paintMarks): a band behind the words and the marker of the ayah marked, one per line (laid over the ink, blended so that the ink stays as it is), and the words marked tinted. They change no metric of the page. A host may give them its own look (the app: styles/appb/read.css). */ .line .mark-band { position: absolute; z-index: 0; pointer-events: none; border-radius: 0.28em; background: color-mix(in srgb, var(--tajweed) 14%, white); mix-blend-mode: multiply; } :root[data-palette="night"] .line .mark-band { background: color-mix(in srgb, var(--tajweed) 22%, black); mix-blend-mode: screen; } .w.glossed { background-color: color-mix(in srgb, var(--tajweed) 20%, transparent); border-radius: 0.2em; } /* The page in two halves (the app's Settings 'halves': the class halves on a box around the pages; reader/dom.js data-half): a hairline between line 8 and line 9 of a 15-line page, a small diamond in its middle — over the top of line 9's box, above its names: nothing of the layout changes — and while a recitation is on (the class reciting) the half it is not in dimmed (reader.js paintMarks data-focus: '1', '2', or '12' for an ayah across the cut). */ .halves .line[data-half-start]::before { content: ''; position: absolute; z-index: 0; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none; background: linear-gradient(to right, transparent, var(--rust) 12%, var(--rust) 88%, transparent); } .halves .line[data-half-start]::after { content: ''; position: absolute; z-index: 0; top: 0; left: 50%; width: 0.3em; height: 0.3em; pointer-events: none; background: var(--rust); transform: translate(-50%, -50%) rotate(45deg); } .line[data-half] { transition: opacity 0.3s; } .halves.reciting .page[data-focus="1"] .line[data-half="2"], .halves.reciting .page[data-focus="2"] .line[data-half="1"] { opacity: 0.35; } /* the colour mode (reader/rule-colours.js, Settings 'ruleColours'): each rule's letters and name in its group's colour; grey also the letters never heard (x); iẓhār and hams (none) keep the ink, their names a softer ink. The colours of the colour-coded tajweed mushafs, darkened on paper (at least 3.4:1: the Quran text is large) and lightened at night. */ :root { --rc-lazim: #9c1c1c; --rc-wajib: #d8261c; --rc-arid: #cf6a06; --rc-madd2: #a5800a; --rc-ghunnah: #178a2c; --rc-idgham: #9a9a9a; --rc-qalqalah: #1592cc; --rc-ra: #2b3cc2; } :root[data-palette="night"] { --rc-lazim: #d9605a; --rc-wajib: #ff7a6b; --rc-arid: #f39a3c; --rc-madd2: #dcc155; --rc-ghunnah: #5fcb6c; --rc-idgham: #7f7c76; --rc-qalqalah: #56c3f0; --rc-ra: #94a0ff; } .tj[data-r], .lbl[data-r] { color: var(--rc); } [data-r="lazim"] { --rc: var(--rc-lazim); } [data-r="wajib"] { --rc: var(--rc-wajib); } [data-r="arid"] { --rc: var(--rc-arid); } [data-r="madd2"] { --rc: var(--rc-madd2); } [data-r="ghunnah"] { --rc: var(--rc-ghunnah); } [data-r="idgham"], [data-r="x"] { --rc: var(--rc-idgham); } [data-r="qalqalah"] { --rc: var(--rc-qalqalah); } [data-r="ra"] { --rc: var(--rc-ra); } .tj[data-r="none"] { color: inherit; } .lbl[data-r="none"] { color: color-mix(in srgb, var(--ink) 72%, var(--paper)); } .rule-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); } .rule-key li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.5; } .rule-key li i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--rc); transform: translateY(1px); } .rule-key li.none { grid-column: 1 / -1; opacity: 0.8; font-size: 12px; } .no-colours .tj { color: inherit; } .no-labels .lbl, .no-colours .lbl { display: none; } /* ayah marker: rust ring with blue caps, the number on white */ .ayah { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.3em; height: 1.3em; margin-bottom: 0.1em; background: var(--img-ayah) center / contain no-repeat; font-family: var(--label-font); font-weight: 600; font-size: 1em; line-height: 1; } /* the number is made as large as its white centre allows (fitTextInShapes shrinks it if needed) */ .ayah span { font-size: 0.42em; color: var(--ink); } .ayah span.small { font-size: 0.36em; } .rub { color: var(--rust); } /* surah title: the classic Madinah-mushaf frame (--img-panel, 8240 x 1016) in the theme's colours. The surah's order (ترتيبها) and its number of ayahs (آياتها) sit in the two circles, the calligraphic name in the middle. */ .line.surah { align-items: center; } .surah-panel { position: relative; display: flex; align-items: center; justify-content: center; height: 2.05em; width: calc(2.05em * 8240 / 1016); margin: 0 auto; background: var(--img-panel) center / 100% 100% no-repeat; } .surah-panel .num { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.04em; color: var(--ink); font-family: var(--label-font); font-weight: 600; line-height: 1; } .surah-panel .num.right { left: 79.38%; } /* centres of the two circles in the frame */ .surah-panel .num.left { left: 20.62%; } .surah-panel .num small { font-size: 0.27em; } .surah-panel .num b { font-size: 0.4em; } .surah-title { font-family: 'SurahNames', var(--ui-font); font-size: 1.6em; line-height: 1; color: var(--ink); } /* the basmala over each surah, in its traditional calligraphic form (one glyph, U+FDFD) */ .line.basmala-line { align-items: center; } .basmala { font-family: 'QuranCommon', var(--quran-font); font-size: 1.45em; line-height: 1; } /* hizb marker: a small dome sitting on the border beside the line where the quarter starts */ .hizb { position: absolute; z-index: 2; width: 1.45em; height: 2.4em; padding-top: 0.55em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.03em; background: var(--img-hizb) center / contain no-repeat; color: var(--ink); font-family: var(--label-font); font-weight: 600; line-height: 1.05; text-align: center; transform: translate(-50%, -50%); } .hizb-text { display: flex; flex-direction: column; align-items: center; gap: 0.03em; } .hizb-text > span { font-size: 0.17em; } .hizb-text > b { font-size: 0.22em; } /* tajweed labels, placed by placeLabels() */ .lbl { position: absolute; z-index: 1; font-family: var(--label-font); font-weight: 600; font-size: var(--label-size); line-height: 1.15; color: var(--tajweed); white-space: nowrap; pointer-events: none; } /* debugging aid: ?debug */ .dbg-anchor { position: absolute; width: 1px; background: #e0245e; pointer-events: none; z-index: 3; } /* the sajdah overline (ۤ in the text), drawn over its words above their labels, as in the printed book */ .sajda-line { position: absolute; z-index: 1; background: var(--ink); pointer-events: none; } /* ---- the page as wide as a phone's screen (reader.js: a screen narrower than 616px; web/proto/full-width) ---- The 15 lines are limited by the screen's width, so the lines get all of it: no paper and no desk (the screen is the paper: reader.js paints the stage), and the ornamental frame only at the top and the bottom, as a head-piece and a foot-piece band with the frame's corners and cartouches (frame.js, frieze.js: no sides); the sides are the text area's own rule. Everything inside the text area is laid out by the same code as every page. --fw-em (the Quran text size to start from, at which a line fills the band but the names' room and the page's own margin) and --label-floor (the names' smallest size: 0.45 of the Quran text, 8-9.5px) are set by reader.js, and on the whole page as printed where it is much shorter than the phone's screen, --pitch (reader.js pitchFor, 1-1.35): its lines that much further apart, and the room between the frame's bands and its text area with them, so that the page fills the screen's height. Only heights: its text, its names and every word's place along its line stay. */ .page.full-width { font-size: var(--fw-em, calc(var(--w) * 0.045)); /* refined by the layout code (justify.js) */ border-left-width: 0; border-right-width: 0; box-shadow: none; /* a little more room above each line for the names' rows (2.5 of their smallest size, not 2.35): on all 604 pages at 360/390/412px the groups set in three rows 118/51/100 -> 24/24/16 (dev/readable/full-width) */ --line-h: calc(max(2.1em, calc(1.5em + 2.5 * var(--label-min))) * var(--pitch, 1)); } .no-labels .page.full-width, .no-colours .page.full-width { --line-h: calc(2.1em * var(--pitch, 1)); } /* the bands with the cartouches lie over the frame's tiles between its corners, as on every page */ .page.full-width > .page-head, .page.full-width > .page-foot { left: var(--bw); right: var(--bw); } .page.full-width .page-inner { padding: calc(0.32em * var(--pitch, 1)) 0.2em calc(0.3em * var(--pitch, 1)); } /* The text area's rule a hair of paper away from its edge: a name may reach that edge (labels.js keeps the names inside the text area), and the larger names of this page did, at the end of a crowded line («هَمس» and «مَدّ(٦)» over الٓمٓ on page 50 at 375-390px). The rule moves out into the page's own margin; the text does not move. Room inside it above the first line and below the last: on all 604 pages the names of a first line rose up to 0.072 em above the text area on a phone, and the calligraphy of a last line fell up to 0.064 em below it (بِسُلۡطَٰنِۭ, سَبَإِۭ). (The names are placed from the text area's border box, which padding does not move.) */ .page.full-width .text-block { --rule-gap: 1.25px; padding-top: calc(0.3em * var(--pitch, 1)); padding-bottom: calc(0.17em * var(--pitch, 1)); box-shadow: 0 0 0 var(--rule-gap) var(--paper), 0 0 0 calc(var(--rule-gap) + 1px) var(--line), 0 0 0 calc(var(--rule-gap) + 0.12em) var(--rust), 0 0 0 calc(var(--rule-gap) + 0.12em + 1px) var(--line); } /* pages 1 and 2 (8 lines, centred): the same height as the others with this padding */ .page.full-width.centered .text-block { min-height: calc(15 * var(--line-h) + 0.47em * var(--pitch, 1)); } /* (The names were drawn 0.05 of their size lower here, where labels.js measured the Quran ink one px per CSS px and a phone's screen drew it up to 1.2px beyond that. Since 2026-09-25 the ink is measured at the screen's own sharpness (measure.js skyline), and the names are drawn where labels.js places them: on all 604 pages at 360/390/412px, 2/0/0 pages with a device px of contact left, against 14/17/9 before: dev/readable/integrated/b3/scan-full.mjs.) */ /* the screen is the paper: the sheet (the page and the few px beside it: paper.js FULL) casts no shadow and has no edge */ .paper.full-width { box-shadow: none; } /* ---- the whole page (reader.js WHOLE_PAGE, printedWhole; config.js WHOLE) ---- The app's default view: the mushaf's own page whole on the screen, its Quran text as large as the screen allows (the owner, 2026-09-28: «عاوز حجم الخط أكبر وأوضح … تقلل الهوامش أقصى حد وتقلل المسافة بين الكلمات قليلًا وبين الأسطر»). Its pages (the class 'whole', reader.js wholePage) keep every word, line and page break of the print; only: - the least space between two words is 0.15em, not 0.2 (justify.js sets the text larger for the same lines); - the text area's room beside its lines is 0.3em, not 0.6: the tail of a line's last word reaches up to 0.29em beyond the line, and labels.js keeps the names inside the text area (a name over a line's first or last letter is moved in a little where it would stand further out); its rule a hair of paper away from it, as on the page of a phone's screen (a name may reach the text area's edge), and on book paper a hair of paper between the rule and the frame; - its lines are --whole-h apart (reader.js: the book's 2.1em, less where the height limits the page, down to config.js WHOLE.PITCH_MIN), the names' rows included while the names are the book's 0.29em; larger names (--label-floor, where the height leaves room) take the rows they need, as on every page. On book paper the text area keeps room above its first line and below its last, as on the page of a phone's screen (the names of a first line rose to its rule, the calligraphy of a last line fell on it). At 2.1em a surah frame (2.05em) has a hair of paper above it, less than the tails and kasras of the line above need: it is moved down, or made a hair smaller, where they reach it (shapes.js clearSurahFrames); and the letters of its rule names, not only their boxes, keep two device px from the Quran ink (labels.js nameRoom). */ .page.whole:not(.centered) .line .ink.natural { gap: 0.15em; } .page.whole .text-block { padding-left: 0.3em; padding-right: 0.3em; } .page.whole:not(.full-width) .text-block { --rule-gap: 1.25px; padding-top: 0.3em; padding-bottom: 0.17em; box-shadow: 0 0 0 var(--rule-gap) var(--paper), 0 0 0 calc(var(--rule-gap) + 1px) var(--line), 0 0 0 calc(var(--rule-gap) + 0.12em) var(--rust), 0 0 0 calc(var(--rule-gap) + 0.12em + 1px) var(--line); } .page.whole:not(.full-width) .page-inner { padding: calc(0.12em + 3.25px); } .page.whole:not(.full-width).centered .text-block { min-height: calc(15 * var(--line-h) + 0.47em); } .page.whole { --line-h: max(var(--whole-h, 2.1em), calc(1.5em + 2.35 * var(--label-min))); } .page.full-width.whole { --line-h: calc(max(var(--whole-h, 2.1em), calc(1.5em + 2.5 * var(--label-min))) * var(--pitch, 1)); } .no-labels .page.whole, .no-colours .page.whole { --line-h: var(--whole-h, 2.1em); } .no-labels .page.full-width.whole, .no-colours .page.full-width.whole { --line-h: calc(var(--whole-h, 2.1em) * var(--pitch, 1)); } /* ---- the ink of the Quran text (Settings 'ink': the app's page options and More, «سُمك الخط»; app.js, main.js) ---- 'bold' (the app's default since 2026-09-28, the owner: «أوضح كسُمك كتابة»; the class ink-bold on the root): the words of the mushaf's pages (every view of them, the reading mode's too) drawn with a thicker hair of weight than the 0.018em above — only the Quran words: not the rule names, the ayah markers' digits, the surah frames or the page's windows. measure.js reads the same width (strokeEm), so the rule names are placed over the ink as it is drawn. */ :root.ink-bold .page .w { -webkit-text-stroke-width: 0.03em; }