/* Theme Name: Prophetic Profit Theme URI: https://propheticprofit.org/ Author: Prophetic Profit Description: An illuminated theme for long-form Islamic writing, with a full Qur'an reader recited by a qari', a tafsir room of thirty-four classical works readable a passage at a time and side by side, fourteen hadith collections readable as narrations or as a book, prayer times, a Qibla compass, a tasbih counter and three hundred and eighty-two adhkar, in eight appearances, each with its own metal. Version: 14.3.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: propheticprofit */ /* ==== BEGIN MAP — written by tools/gen_map.py, do not edit ==== */ /* THE MAP OF THIS FILE. style.css is one file because a WordPress theme's root style.css is what WordPress reads its name and version out of, and because one file means one cascade a reader can follow top to bottom. It is long, so it carries its own contents. The base rules run from the top to the first layer marker below. Everything after that is a dated layer, appended in order, and the LAST rule for a selector is the one that wins. Regenerate with: python tools/gen_map.py --write 16,153 v130-layer-10-home.css v13.0 The home page 16,258 v130-layer-20-adhkar.css v13.0 The adhkar page 16,566 v130-layer-40-reading.css v13.0 Reading pages: posts and prose 16,737 v130-layer-50-book.css v13.0 Book-style reading 17,193 v130-layer-60-qibla.css v13.0 The qibla compass 17,270 v130-layer-65-prayer.css v13.0 Prayer times 17,308 v130-layer-70-arabic.css v13.0 Arabic typography 17,347 v130-layer-80-emblems.css v13.0 Emblems and ornaments 17,367 v131-layer-05-chrome.css v13.1 Header, nav and page chrome 17,388 v131-layer-20-tafsir.css v13.1 The tafsir pages 17,417 v131-layer-25-tafsir-room.css v13.1 The tafsir reading room 17,611 v131-layer-30-hadith.css v13.1 The hadith pages 17,653 v131-layer-40-shamail.css v13.1 The Shama'il 17,971 v132-layer-10-arabic.css v13.2 Arabic typography 18,086 v132-layer-20-hadith.css v13.2 The hadith pages 18,267 v132-layer-30-menus.css v13.2 Menus and drop-downs 18,324 v132-layer-40-adhkar.css v13.2 The adhkar page 18,359 v132-layer-50-tafsir.css v13.2 The tafsir pages 18,600 v132-layer-60-prayer.css v13.2 Prayer times 18,656 v132-layer-70-qibla.css v13.2 The qibla compass 18,722 v132-layer-80-surah-names.css v13.2 Surah names 18,791 v132-layer-90-header-phone.css v13.2 The header, on phones 18,812 v132-layer-95-tafsir-bar-phone.css v13.2 The tafsir bar, on phones 18,856 v140-layer-05-mark.css v14.0 The logo mark 18,889 v140-layer-10-button.css v14.0 Buttons 19,077 v140-layer-15-quran-size.css v14.0 Qur'an text sizing 19,191 v140-layer-20-unwan.css v14.0 The unwan, the title panel above a reading 19,402 v140-layer-25-chapters.css v14.0 Chapter lists 19,470 v140-layer-30-adhkar.css v14.0 The adhkar page 19,640 v140-layer-40-tafsir.css v14.0 The tafsir pages 19,792 v140-layer-50-aa.css v14.0 The Aa text-size control 20,106 v140-layer-60-chrome.css v14.0 Header, nav and page chrome 20,332 v140-layer-70-boxes.css v14.0 Cards and boxes 20,451 v140-layer-80-tafsir.css v14.0 The tafsir pages 20,638 v140-layer-85-unwan.css v14.0 The unwan, the title panel above a reading 20,819 v140-layer-90-polish.css v14.0 Final polish 20,850 v141-layer-10-text.css v14.1 Body text 20,967 v141-layer-20-adhkar.css v14.1 The adhkar page 21,137 v141-layer-30-chrome.css v14.1 Header, nav and page chrome 21,254 v141-layer-40-button.css v14.1 Buttons 21,414 v141-layer-60-tafsir-menu.css v14.1 The tafsir book menu 21,449 v141-layer-70-shamail.css v14.1 The Shama'il 21,541 v141-layer-80-chapters.css v14.1 Chapter lists 21,620 v141-layer-90-picker.css v14.1 The picker sheet 21,742 v141-layer-95-hadith-shelf.css v14.1 The hadith shelf 21,917 v142-layer-10-ayah-size.css v14.2 Ayah text sizing 21,981 v142-layer-20-chrome.css v14.2 Header, nav and page chrome 22,118 v142-layer-40-menus.css v14.2 Menus and drop-downs 22,175 v142-layer-50-tafsir-shelf.css v14.2 The tafsir shelf of books 22,223 v142-layer-60-inline-arabic.css v14.2 Arabic inside an English sentence 22,263 v142-layer-70-menu-life.css v14.2 Menus, lit rather than grey 22,312 v142-layer-80-qibla-step3.css v14.2 Qibla step 3: which way to face 22,330 v142-layer-90-header-centre.css v14.2 The nav, centred on the page 22,365 v142-layer-95-writings-and-others.css v14.2 Latest Writings, and the other commentaries 22,414 v143-layer-00-speed.css v14.3 Speed: what is skipped, what moves by transform, the cross-fade 22,530 v143-layer-10-header.css v14.3 The header, its menus and the drawer 23,345 v143-layer-20-post.css v14.3 A post: title block, tools, On this page, reading bar, Aa 23,975 v143-layer-30-cards.css v14.3 A post as a card: Latest Writings, topics, Read next, Saved 24,170 v143-layer-40-tafsir.css v14.3 The tafsir pages 24,804 v143-layer-50-tools.css v14.3 Prayer times and the Qibla by the sun 25,000 v143-layer-60-quran.css v14.3 The Qur'an reader: the rhythm between ayat 25,034 v143-layer-70-hadith-book.css v14.3 A hadith collection read as a book: the contents and the reading 25,373 v143-layer-80-adhkar.css v14.3 The adhkar page: one list per set, and the head of a set 25,493 v143-layer-90-ink.css v14.3 Room inside a clipped label for Arabic marks; excerpts in Arabic */ /* ==== END MAP ==== */ /* KFGQPC Hafs Smart — the official Uthmani Qur'an typeface from the King Fahd Glorious Qur'an Printing Complex, freely licensed for use and distribution. The Qur'an text data pairs each word with custom glyph codepoints specific to this font, so font-display:block (rather than swap) is deliberate: those codepoints render as blank/tofu in any other font, and a brief invisible wait followed by the correct Uthmani script is far better than visibly flashing broken glyphs. */ @font-face{ font-family:'KFGQPC Hafs Smart'; src:url('assets/fonts/hafs-smart.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:block; /* * ═══════════════════════════════════════════════════════════════════ * v14.0 — THE MISSING size-adjust, AND IT WAS THE WHOLE OF ITEM 1. * ═══════════════════════════════════════════════════════════════════ * * "See how in the home page there is such a big difference in text * sizes in Arabic and Eng & Hadith & qur'an? you should not cause such * issues again please, it should be all reasonable!" * * Every other Arabic face on this site carries a size-adjust — 118% on * Scheherazade, 124% on Amiri, 135% on Uthmani, 112% on Amiri Quran — * because a browser's own em is not the same fraction of the drawn * glyph in any two Arabic fonts, and normalising them is what makes * `font-size: 1.4rem` mean one thing across the site. This face, the * one every ayah is set in, was the only one without. * * MEASURED, not guessed. Al-Fātiḥah 1:1 at 200px, the same ayah in * three faces: * * KFGQPC Hafs Smart (PUA) 1569px wide, no size-adjust * PP Uthmani (Unicode) 1789px wide, at 135% * PP Naskh (Scheherazade) 1859px wide, at 118% * * So an ayah was rendering at 0.84x the size of a hadith set at the * identical font-size — which is exactly the "big difference" on the * home page, where the ayah of the day and the hadith of the day sit * one above the other at 25.6px each and did not look it. * * 118% brings it level with Scheherazade, which is the face it is * compared against most often (hadith text, adhkār text, quoted prose). * * EVERY RULE THAT SETS AN AYAH'S SIZE COMES DOWN BY 1/1.18 in the same * edit — see v140-layer-15-quran-size at the foot of this file — so the * reading pages look exactly as they did and only the RELATIONSHIP * between the scripts changes. */ size-adjust:118%; } /* ========================================================================= THE ARABIC FACES — SELF-HOSTED, AND SIZE-ADJUSTED. v13.0. "please use bold traditional Arabic except when its ayat then Hafs font (or suwar names etc) and make sure its always sized correctly and looks visually perfect, not smaller than Eng as usual, across the entire website" TWO SEPARATE PROBLEMS, ONE MECHANISM. 1. ARABIC LOOKS SMALLER THAN LATIN AT THE SAME font-size, AND IT IS NOT AN ILLUSION. A naskh face spends most of its em on the vowel marks above and the descenders below; the letters themselves sit in a shallow band on the baseline. Amiri's x-height is 433/1000 where a Latin text face is 500-520 and Inter is 727. So 18px of Amiri beside 18px of Newsreader genuinely reads two sizes down, everywhere on this site, on every page. The wrong fix is to hand-raise font-size on the forty-odd Arabic classes: it has to be redone for every new component, it changes line boxes unevenly, and it was already half-done and inconsistent. The right fix is `size-adjust` on the @font-face — one number that scales the glyphs AND the line box, applies to every rule that names the family, and needs nothing per-component. It can only be written on an @font-face we own, which is why these are bundled rather than loaded from Google. 2. TRADITIONAL ARABIC WAS ASKED FOR, CANNOT BE SHIPPED, AND v13.1 STOPS PRETENDING OTHERWISE. "Make 100% sure that traditional Arabic is across all devices not only pc... (super super super important)" Traditional Arabic is a Microsoft/Office face and is not licensed for redistribution. Up to v13.0 'PP Naskh' therefore listed it as a local() reference FIRST and bundled Amiri behind it. That is exactly the fault he reported: the author's PC has Traditional Arabic and renders in it, every phone on earth does not and renders in Amiri, and the two are different-looking faces. The site had two Arabics. v13.1 ships ONE, on every device, with no local() at all: SCHEHERAZADE NEW (SIL, Open Font Licence). It is the closest open face to Traditional Arabic that exists — the same upright, compact, lightly-contrasted naskh with the same short teeth and the same undramatic terminals — where Amiri is the Bulaq press cut, which is more calligraphic and more ornate. Nobody now sees a different Arabic from anybody else, and what everyone sees is the shape that was asked for. SIZE-ADJUST IS 118%, NOT 124%. Measured, not guessed: Scheherazade's alif is 0.705em and its dāl 0.429em against Amiri's 0.696 and 0.397, so it runs about 4.7% larger per em and needs correspondingly less correction to sit level with the Latin beside it. Amiri stays bundled and is still used by name for Qur'anic display (--font-quran) and as the last web fallback. BOLD IS THE DEFAULT WEIGHT FOR ARABIC HERE. Traditional Arabic is a light face and Amiri is a moderate one; at reading size on cream paper both look like a watermark beside Newsreader. Every Arabic rule in this stylesheet declares font-weight:700, and 700 is a real cut of both faces, not a synthesised smear. AYAT ARE THE EXCEPTION AND ALWAYS HAVE BEEN. The Qur'an text is PUA-encoded for KFGQPC Hafs Smart (see data/quran and the @font-face at the top of this file) and renders as tofu in anything else, so it is never touched by any of this. Surah names are ordinary Unicode and cannot use Hafs Smart — that font contains no Arabic letters at all, only ayah glyphs — so they use Amiri Quran, which is the Qur'anic cut of the same Bulaq naskh. ========================================================================= */ @font-face{ font-family:'PP Naskh'; src: url('assets/fonts/scheherazade-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; size-adjust:118%; 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; } @font-face{ font-family:'PP Naskh'; src: url('assets/fonts/scheherazade-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; size-adjust:118%; 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; } /* v14.3 — THE SAME NASKH, FOR ARABIC INSIDE AN ENGLISH LINE. Named straight after the Latin face in --font-display, --font-body and --font-ui (see the note there), so a quoted ḥadīth in an excerpt or a search hit is set in the site's Arabic rather than the device's. The same two files, so nothing more is fetched — with one block left out of its range: U+FDF0–FDFF, the honorific ligatures. ﷺ in an English label was drawn by the device's face at the size of a word; given to this one at its 118% it stood a third taller than the capitals and was cut off at the top of every one-line label that carries it ("The Prophet ﷺ & His Companions" in the Topics menu). Those glyphs go on down the stack exactly as they did before. */ @font-face{ font-family:'PP Naskh Inline'; src: url('assets/fonts/scheherazade-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; size-adjust:118%; 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-FDEF, 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; } @font-face{ font-family:'PP Naskh Inline'; src: url('assets/fonts/scheherazade-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; size-adjust:118%; 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-FDEF, 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; } @font-face{ font-family:'Amiri'; src: url('assets/fonts/amiri-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; size-adjust:124%; 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; } @font-face{ font-family:'Amiri'; src: url('assets/fonts/amiri-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; size-adjust:124%; 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 Quran carries a 1815/1000 ascender for the vocalisation, so its line box is already tall; it needs less of a lift than the text cut and more would make every surah name collide with the rule above it. */ @font-face{ /* KFGQPC Uthmanic Script HAFS — the muṣḥaf hand, as a real Unicode font. See the note in tools/ and CLAUDE-NOTES.txt. This is the face every surah name, every Bismillah and every Qurʾanic heading is set in from v13.1; the PUA word-glyph face ('KFGQPC Hafs Smart') is still what the ayah TEXT itself uses and is a different file for a different job. */ font-family:'PP Uthmani'; src: url('assets/fonts/uthmanic-hafs-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; size-adjust:135%; unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face{ font-family:'Amiri Quran'; src: url('assets/fonts/amiri-quran-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; size-adjust:112%; 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; } /* v14.3 — ʿAYN AND HAMZAH, DRAWN FOR THIS SITE. Literata draws the two half rings of transliteration (ʿ U+02BF, ʾ U+02BE) on a half-em body, so "Qurʾān" and "Ibn ʿAbbās" read as two words each. These two files hold those two marks and nothing else, on a tight body — see tools/gen_ayn_font.py. They lead the serif stacks and, fallback being per glyph, are used for those two characters only. Under 500 bytes each. */ @font-face{ font-family:'PP Ayn'; src: url('assets/fonts/pp-ayn-400.woff2') format('woff2'); font-weight:100 550; font-style:normal; font-display:swap; unicode-range:U+02BE-02BF; } @font-face{ font-family:'PP Ayn'; src: url('assets/fonts/pp-ayn-700.woff2') format('woff2'); font-weight:551 900; font-style:normal; font-display:swap; unicode-range:U+02BE-02BF; } /* The italics, so the browser never slants the upright marks itself — it leans them 14 degrees against Literata Italic's four (gen_ayn_font.py). */ @font-face{ font-family:'PP Ayn'; src: url('assets/fonts/pp-ayn-400i.woff2') format('woff2'); font-weight:100 550; font-style:italic; font-display:swap; unicode-range:U+02BE-02BF; } @font-face{ font-family:'PP Ayn'; src: url('assets/fonts/pp-ayn-700i.woff2') format('woff2'); font-weight:551 900; font-style:italic; font-display:swap; unicode-range:U+02BE-02BF; } /* Noto Naskh Arabic is a variable font; Google serves ONE file for the whole weight axis, so it is declared once across 400-700 rather than twice from the same bytes. */ @font-face{ font-family:'Noto Naskh Arabic'; src: url('assets/fonts/noto-naskh-400.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; size-adjust:120%; 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; } /* ========================================================================= 0. DESIGN TOKENS — eight palettes as of v7.0. Five light (Parchment / Linen / Blush / Sea Glass / Sage) and three dark (Graphite / Midnight / Obsidian), all sharing one set of role-based variable names, so every component below only has to be written once. Colors are stored as space-separated R G B triplets so they can be composited with alpha via rgb(var(--x) / 0.5). Parchment is the default for EVERY reader — see the pre-paint script in header.php for why the operating system's dark-mode preference is deliberately not consulted. ========================================================================= */ :root{ /* Light is the baseline. Any dark palette overrides this to `dark` in its own block, and the pre-paint script sets it inline too so it's correct before this stylesheet has even parsed. */ color-scheme: light; /* structural */ --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --ease: cubic-bezier(.22,.61,.36,1); --header-h: 78px; --header-h-static: 78px; /* type — Fraunces gives the headings a warm, high-contrast editorial voice; Newsreader carries the long-form reading, where its lower contrast is gentler on the eye; Inter handles interface chrome. Arabic content gets its own dedicated faces so it never has to borrow a Latin font: Scheherazade New (a complete, highly legible Naskh with full harakat coverage) for general text and hadith, and Amiri Quran for accurate Qur'anic typesetting. */ /* * v12.1 — Newsreader is inserted ahead of the system serifs as the * fallback. This site writes ḥ ṣ ḍ ṭ ẓ ā ī ū ʿ ʾ constantly — Tafsīr, * Sīrah, Adhkār, al-Ṭabarī — and while Fraunces does carry the common * ones, anything it lacks was previously being supplied by Georgia, * whose colour and axis are noticeably different. Newsreader is already * loaded as the body face and is a much closer match, so a substituted * letter inside a word no longer shows. Fallback is per glyph: this * changes nothing Fraunces already renders. */ /* * v12.3 — WHY 'Amiri' IS AT THE END OF ALL FOUR LATIN STACKS. * * This site writes ﷺ (U+FDFA) in ENGLISH sentences, constantly, and * that character exists in no Latin font on earth. "The sīrah tells * what he ﷺ did" was rendering the ligature as a tofu box in * Fraunces, in Inter and in IBM Plex Mono, on the one glyph the site * cares most about getting right. * * Font fallback in CSS is PER GLYPH, not per element: the browser * walks the whole family list for each character and takes the first * face that has it. So a face at the end of the list is only ever * reached by characters that nothing before it carries — here, ﷺ and * the honorific ligatures beside it. Nothing that already rendered * changes, and Amiri is loaded on every page anyway. */ /* * v14.3 — LITERATA, FOR HEADINGS AND READING BOTH. * * "Al-Rāzī" was reported with its macrons floating loose, and it was * not one title. Drawn side by side at every size and weight, Fraunces * puts the bar of ā, ī and ū a whole letter to the right ("Kathir̄", * "Adhkar̄") in every heading on the site, and Newsreader leaves the dot * on the i under the bar of ī in every paragraph. A site whose own * vocabulary is Tafsīr, Ḥadīth, Adhkār and al-Bukhārī cannot be set in * either. Literata draws all of them correctly, including ḥ ṣ ḍ ṭ ẓ and * ʿ ʾ, in roman and italic. * * It is also one family where there were two: its optical-size axis * gives a title the high-contrast display cut and a paragraph the text * cut, automatically, from font-size. Measured against what it * replaces: the same x-height as Newsreader at text size (so the Arabic * size-adjust calibrated against it still holds) and within 3% of * Fraunces' width at heading size (so no title rewraps). */ /* v14.3 — ARABIC THAT NOBODY MARKED STILL GETS THE SITE'S ARABIC. An excerpt, a search hit or a title that opens with a ḥadīth carries no lang="ar", so its letters fell through these stacks to the first face that has Arabic: Times New Roman or Segoe UI on a PC, SF on an iPhone — three Arabics, where the note above promises one on every device. 'PP Naskh Inline' — the site's naskh, under a name of its own — now comes straight after the Latin face. Its @font-face is limited to the Arabic blocks (unicode-range), so no Latin letter can ever reach it, and it is only fetched on a page that has Arabic. ﷺ is left out of it on purpose; see its @font-face. */ --font-display:'PP Ayn', 'Literata', 'PP Naskh Inline', Georgia, 'Times New Roman', 'Amiri', 'Noto Naskh Arabic', serif; --font-body:'PP Ayn', 'Literata', 'PP Naskh Inline', Georgia, 'Times New Roman', 'Amiri', 'Noto Naskh Arabic', serif; --font-ui:'Inter', 'PP Naskh Inline', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Amiri', 'Noto Naskh Arabic', sans-serif; /* v14.3 — THE UTILITY VOICE IS THE INTERFACE SANS. `--font-mono` was IBM Plex Mono and set every small label on the site — dates, reading times, counts, references, eyebrows — in a typewriter face: "the date used and read time in the top is quite ugly!! … dont use such ugly fonts". The token keeps its name, because 190 rules read it, and now resolves to the interface sans with tabular figures left to each rule. Real code (a in a post, a hint) reads --font-code, and nothing is fetched for it: it is the device's own monospace. */ --font-mono:var(--font-ui); --font-code:ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; /* One Arabic family for the whole site — Traditional Arabic where it Scheherazade New, bundled, on every device without exception — see the long note in the @font-face block above for why this is one face now and not two. */ --font-arabic:'PP Naskh', 'Amiri', 'Noto Naskh Arabic', serif; /* THE WEIGHT EVERY ARABIC RULE IN THIS FILE DECLARES — and in v13.2 it comes down from 700. "on tafsir the text is too bold, across the entire website I dont want huge bold text, be reasonable, I want basic nice looking bold, it must be similar to the text and font of Qur'an itself so its not so weird" He is right, and 700 was a decision made when the Arabic face was Traditional Arabic — a genuinely light hand that needed the weight to hold a page. Scheherazade New is not light: at 400 it has the same colour on the page as the Latin beside it, which is what "similar to the text and font of Qur'an itself" means, since the muṣḥaf face has ONE cut and it is this weight. So: 400 is the reading weight and it is the default everywhere. --ar-weight-strong is the display weight, and it is used only where Arabic is a TITLE — the twenty-one selectors that name --font-arabic-display, plus the ʿunwāns. A title in 700 beside body text in 400 is "basic nice looking bold"; a whole page in 700 is the "huge bold text" he is objecting to. */ --ar-weight:400; --ar-weight-strong:700; /* Display Arabic — used ONLY for large titles: the sīrah headings, the hadith book names, the page heroes. v12.3 — Aref Ruqaa is gone. Ruqʿah is a hand for notes and signage, not for the name of a book, and at title size its steep descenders and blunt terminals fought every Naskh line under them. Traditional Arabic is what was asked for, and it leads. It is a Windows/Office face, so it is the one the author actually sees; for everyone else Noto Naskh Arabic follows, which is the closest web-served cut to it — the same upright, open Naskh with the same modest contrast — and unlike Traditional Arabic it ships a real 700. BOLD IS NOT OPTIONAL HERE: at 3rem in a regular weight on cream paper an upright naskh looks like a watermark. Every rule that uses this token declares font-weight:700. v13.2 — IT IS AMIRI THAT LEADS THIS ONE NOW. "use Amiri Bold on the website too, you decide when to use traditional arabic & when to use Amiri based on beauty and bold level" So the site keeps two Arabic faces and gives each the job it is good at, rather than setting everything in one: BODY --font-arabic Scheherazade New. Upright, compact, lightly contrasted; made to be read for an hour. Hadith text, adhkar text, quoted prose. TITLE --font-arabic-display AMIRI, at 700. A Bulaq naskh with real stroke contrast and long descenders — nothing on this site is more beautiful at 2rem, and it has a true bold, which Scheherazade's display sizes needed and never quite carried. QUR'AN --font-quran / --font-quran-glyphs KFGQPC Hafs. Neither of the other two ever sets scripture. */ --font-arabic-display:'Amiri', 'PP Naskh', 'Noto Naskh Arabic', serif; /* v13.1 — the muṣḥaf hand leads. See the @font-face for 'PP Uthmani' above: this is what fixes "the name of the suwar is in Amiri not Hafs", and it fixes it everywhere at once rather than in the one menu it was reported in. */ /* v13.2 — the chain stops at the two muṣḥaf cuts. It used to fall through to 'PP Naskh' and 'Amiri', so a single missing glyph put an ayah into a hand that is not the muṣḥaf's — which is what "all AYAT on posts MUST be in Hafs in posts!!" is about. Both faces here are bundled, so the fallback is theoretical anyway; removing it makes it impossible rather than unlikely. */ --font-quran:'PP Uthmani', 'Amiri Quran', serif; /* Only for the Hafs Smart PUA-encoded ayah glyphs (see data/quran) — every other Arabic Qur'an-related text on the site (surah names, the Bismillah heading, the pre-existing blog-post "Qur'an verse" quote style) is ordinary Unicode text and uses --font-quran or --font-arabic above, both of which are proven for standard Unicode Quranic typography. */ --font-quran-glyphs:'KFGQPC Hafs Smart', 'Amiri Quran', 'Amiri', serif; } /* ==== BEGIN GENERATED PALETTES — do not edit by hand ==== */ /* Generated by tools/gen_palettes.py. Every value below is checked against every other value it is ever painted on — see that file. 8 palettes x 54 pairs, all passing at emit time. */ /* -------- SAFFRON (slug: saffron) — Gold leaf and Rawḍah green -------- */ :root, html[data-theme="saffron"]{ color-scheme: light; --bg: 250 238 212; --bg-alt: 244 227 192; --surface: 251 244 225; --text: 34 44 38; --text-muted: 84 96 84; --heading: 20 70 52; --heading-soft: 42 92 72; --ink: 13 40 31; --ink-soft: 21 54 42; --on-ink: 250 242 222; --accent: 22 92 68; --accent-ui: 18 84 62; --accent-light: 234 204 136; --accent-2: 132 86 20; --accent-3: 30 96 92; --shadow: 66 54 18; --on-accent: var(--on-ink); --gilt-hi: 255 240 200; --gilt: 241 200 108; --gilt-deep: 200 148 54; --gilt-edge: 126 84 22; --on-gilt: var(--ink); --btn-hi: var(--gilt-hi); --btn: var(--gilt); --btn-deep: var(--gilt-deep); --btn-edge: var(--gilt-edge); --on-btn: var(--ink); --accent-btn: var(--gilt); --mark-hi: 255 240 200; --mark-mid: 241 200 108; --mark-deep: 126 84 22; --mark-pale-a: 255 248 230; --mark-pale-b: 246 219 158; --mark-dot: 13 40 31; --mark-ground-a: 20 52 40; --mark-ground-b: 7 22 17; --cta: 22 92 68; --cta-lift: 38 103 81; --cta-deep: 18 77 57; --cta-edge: 15 61 45; --on-cta: var(--on-accent); --cta-ring: var(--gilt-edge); --ornament: var(--gilt); --wash: 168 120 38; } /* -------- FROST (slug: frost) — Pale ice, deep glacier blue -------- */ html[data-theme="frost"]{ color-scheme: light; --bg: 238 246 253; --bg-alt: 220 235 249; --surface: 249 253 255; --text: 28 45 62; --text-muted: 80 100 122; --heading: 12 38 62; --heading-soft: 38 66 92; --ink: 10 28 46; --ink-soft: 22 44 66; --on-ink: 236 246 254; --accent: 13 97 148; --accent-ui: 11 90 138; --accent-light: 150 205 238; --accent-2: 116 74 30; --accent-3: 10 102 100; --shadow: 20 42 66; --on-accent: var(--on-ink); --gilt-hi: 252 254 255; --gilt: 207 226 242; --gilt-deep: 146 176 204; --gilt-edge: 52 86 118; --on-gilt: var(--ink); --btn-hi: var(--gilt-hi); --btn: var(--gilt); --btn-deep: var(--gilt-deep); --btn-edge: var(--gilt-edge); --on-btn: var(--ink); --accent-btn: var(--gilt); --mark-hi: 252 254 255; --mark-mid: 207 226 242; --mark-deep: 52 86 118; --mark-pale-a: 254 255 255; --mark-pale-b: 223 236 246; --mark-dot: 10 28 46; --mark-ground-a: 20 42 63; --mark-ground-b: 6 15 25; --cta: 13 97 148; --cta-lift: 30 108 155; --cta-deep: 11 81 124; --cta-edge: 9 64 98; --on-cta: var(--on-accent); --cta-ring: var(--gilt-edge); --ornament: var(--accent); --wash: var(--accent); } /* -------- ROSE (slug: rose) — Blush paper, madder crimson -------- */ html[data-theme="rose"]{ color-scheme: light; --bg: 253 238 243; --bg-alt: 250 224 233; --surface: 255 248 251; --text: 58 30 41; --text-muted: 116 76 90; --heading: 122 12 58; --heading-soft: 152 42 88; --ink: 74 10 40; --ink-soft: 102 26 60; --on-ink: 255 241 246; --accent: 190 18 88; --accent-ui: 178 16 82; --accent-light: 250 172 200; --accent-2: 142 74 4; --accent-3: 90 58 166; --shadow: 78 22 48; --on-accent: var(--on-ink); --gilt-hi: 253 222 212; --gilt: 240 178 162; --gilt-deep: 204 128 110; --gilt-edge: 134 58 52; --on-gilt: var(--ink); --btn-hi: var(--gilt-hi); --btn: var(--gilt); --btn-deep: var(--gilt-deep); --btn-edge: var(--gilt-edge); --on-btn: var(--ink); --accent-btn: var(--gilt); --mark-hi: 253 222 212; --mark-mid: 240 178 162; --mark-deep: 134 58 52; --mark-pale-a: 254 240 236; --mark-pale-b: 245 204 194; --mark-dot: 74 10 40; --mark-ground-a: 98 24 57; --mark-ground-b: 41 6 22; --cta: 190 18 88; --cta-lift: 195 35 100; --cta-deep: 160 15 74; --cta-edge: 125 12 58; --on-cta: var(--on-accent); --cta-ring: var(--gilt-edge); --ornament: var(--accent); --wash: var(--accent); } /* -------- EMERALD (slug: emerald) — Green paper, true emerald -------- */ html[data-theme="emerald"]{ color-scheme: light; --bg: 233 250 240; --bg-alt: 213 242 226; --surface: 246 253 249; --text: 20 48 34; --text-muted: 72 106 86; --heading: 2 68 45; --heading-soft: 16 92 66; --ink: 3 46 32; --ink-soft: 11 64 46; --on-ink: 236 252 242; --accent: 0 120 76; --accent-ui: 0 104 65; --accent-light: 126 228 176; --accent-2: 160 68 16; --accent-3: 22 86 154; --shadow: 10 56 40; --on-accent: var(--on-ink); --gilt-hi: 252 233 180; --gilt: 230 186 106; --gilt-deep: 184 138 52; --gilt-edge: 96 74 14; --on-gilt: var(--ink); --btn-hi: var(--gilt-hi); --btn: var(--gilt); --btn-deep: var(--gilt-deep); --btn-edge: var(--gilt-edge); --on-btn: var(--ink); --accent-btn: var(--gilt); --mark-hi: 252 233 180; --mark-mid: 230 186 106; --mark-deep: 96 74 14; --mark-pale-a: 254 245 221; --mark-pale-b: 238 209 157; --mark-dot: 3 46 32; --mark-ground-a: 10 61 44; --mark-ground-b: 2 25 18; --cta: 0 120 76; --cta-lift: 18 129 89; --cta-deep: 0 101 64; --cta-edge: 0 79 50; --on-cta: var(--on-accent); --cta-ring: var(--gilt-edge); --ornament: var(--accent); --wash: var(--accent); } /* -------- OBSIDIAN (slug: obsidian) — Near-black with illuminated gold -------- */ html[data-theme="obsidian"]{ color-scheme: dark; --bg: 18 17 15; --bg-alt: 26 25 22; --surface: 30 29 25; --text: 230 226 216; --text-muted: 166 160 148; --heading: 248 245 238; --heading-soft: 218 213 202; --ink: 10 10 8; --ink-soft: 22 21 18; --on-ink: 242 238 230; --accent: 216 176 88; --accent-ui: 228 190 108; --accent-light: 240 214 156; --accent-2: 212 130 96; --accent-3: 126 176 152; --shadow: 0 0 0; --on-accent: var(--ink); --gilt-hi: 253 229 168; --gilt: 238 196 116; --gilt-deep: 204 158 70; --gilt-edge: 148 106 36; --on-gilt: var(--ink); --btn-hi: var(--gilt-hi); --btn: var(--gilt); --btn-deep: var(--gilt-deep); --btn-edge: var(--gilt-edge); --on-btn: var(--ink); --accent-btn: var(--gilt); --mark-hi: 253 229 168; --mark-mid: 238 196 116; --mark-deep: 148 106 36; --mark-pale-a: 254 243 216; --mark-pale-b: 244 216 163; --mark-dot: 10 10 8; --mark-ground-a: 20 19 16; --mark-ground-b: 6 6 4; --cta: 216 176 88; --cta-lift: 223 190 118; --cta-deep: 194 158 79; --cta-edge: 168 137 69; --on-cta: var(--on-accent); --cta-ring: var(--gilt-edge); --ornament: var(--accent); --wash: var(--accent); } /* -------- MIDNIGHT (slug: midnight) — Sapphire night, moonlight on it -------- */ html[data-theme="midnight"]{ color-scheme: dark; --bg: 11 20 41; --bg-alt: 19 31 58; --surface: 25 39 70; --text: 219 231 248; --text-muted: 150 170 200; --heading: 238 246 255; --heading-soft: 203 219 241; --ink: 7 13 29; --ink-soft: 15 25 47; --on-ink: 232 242 255; --accent: 126 182 244; --accent-ui: 154 202 250; --accent-light: 198 224 252; --accent-2: 238 192 132; --accent-3: 126 224 214; --shadow: 0 0 0; --on-accent: var(--ink); --gilt-hi: 236 246 255; --gilt: 194 219 246; --gilt-deep: 136 176 222; --gilt-edge: 62 104 158; --on-gilt: var(--ink); --btn-hi: var(--gilt-hi); --btn: var(--gilt); --btn-deep: var(--gilt-deep); --btn-edge: var(--gilt-edge); --on-btn: var(--ink); --accent-btn: var(--gilt); --mark-hi: 236 246 255; --mark-mid: 194 219 246; --mark-deep: 62 104 158; --mark-pale-a: 246 251 255; --mark-pale-b: 215 231 249; --mark-dot: 7 13 29; --mark-ground-a: 14 23 44; --mark-ground-b: 4 7 16; --cta: 126 182 244; --cta-lift: 149 195 246; --cta-deep: 113 164 220; --cta-edge: 98 142 190; --on-cta: var(--on-accent); --cta-ring: var(--gilt-edge); --ornament: var(--accent); --wash: var(--accent); } /* -------- VELVET (slug: velvet) — Deep wine, champagne gold -------- */ html[data-theme="velvet"]{ color-scheme: dark; --bg: 28 14 23; --bg-alt: 40 21 33; --surface: 46 25 38; --text: 240 223 232; --text-muted: 186 156 172; --heading: 255 240 247; --heading-soft: 228 204 218; --ink: 17 8 14; --ink-soft: 29 15 24; --on-ink: 250 235 242; --accent: 236 168 192; --accent-ui: 244 190 208; --accent-light: 248 212 226; --accent-2: 238 200 146; --accent-3: 158 204 200; --shadow: 0 0 0; --on-accent: var(--ink); --gilt-hi: 252 236 212; --gilt: 238 210 170; --gilt-deep: 200 166 122; --gilt-edge: 136 104 70; --on-gilt: var(--ink); --btn-hi: var(--gilt-hi); --btn: var(--gilt); --btn-deep: var(--gilt-deep); --btn-edge: var(--gilt-edge); --on-btn: var(--ink); --accent-btn: var(--gilt); --mark-hi: 252 236 212; --mark-mid: 238 210 170; --mark-deep: 136 104 70; --mark-pale-a: 254 246 236; --mark-pale-b: 244 225 199; --mark-dot: 17 8 14; --mark-ground-a: 27 14 22; --mark-ground-b: 9 4 8; --cta: 236 168 192; --cta-lift: 239 184 203; --cta-deep: 212 151 173; --cta-edge: 184 131 150; --on-cta: var(--on-accent); --cta-ring: var(--gilt-edge); --ornament: var(--accent); --wash: var(--accent); } /* -------- JUNIPER (slug: juniper) — Garden green night, jade and gold -------- */ html[data-theme="juniper"]{ color-scheme: dark; --bg: 12 30 24; --bg-alt: 20 42 34; --surface: 24 48 38; --text: 222 238 228; --text-muted: 157 183 167; --heading: 240 252 244; --heading-soft: 208 228 214; --ink: 7 20 15; --ink-soft: 16 32 25; --on-ink: 234 248 238; --accent: 108 222 168; --accent-ui: 135 233 185; --accent-light: 176 240 206; --accent-2: 237 199 121; --accent-3: 241 179 151; --shadow: 0 0 0; --on-accent: var(--ink); --gilt-hi: 250 234 178; --gilt: 228 196 112; --gilt-deep: 182 150 58; --gilt-edge: 120 100 30; --on-gilt: var(--ink); --btn-hi: var(--gilt-hi); --btn: var(--gilt); --btn-deep: var(--gilt-deep); --btn-edge: var(--gilt-edge); --on-btn: var(--ink); --accent-btn: var(--gilt); --mark-hi: 250 234 178; --mark-mid: 228 196 112; --mark-deep: 120 100 30; --mark-pale-a: 253 246 220; --mark-pale-b: 237 216 161; --mark-dot: 7 20 15; --mark-ground-a: 15 30 24; --mark-ground-b: 4 11 8; --cta: 108 222 168; --cta-lift: 134 228 184; --cta-deep: 97 200 151; --cta-edge: 84 173 131; --on-cta: var(--on-accent); --cta-ring: var(--gilt-edge); --ornament: var(--accent); --wash: var(--accent); } /* ==== END GENERATED PALETTES ==== */ @media (prefers-reduced-motion: reduce){ html:root{ scroll-behavior:auto; } *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } } /* Suppresses every transition, site-wide, for the one paint that changing data-theme itself causes — see the long comment on applyTheme() in assets/main.js. This is what stops a palette switch from being hundreds of components' individual hover/focus transitions all animating background/color/border-color/box-shadow at once. The class is added and removed by that same function, a couple of frames apart, so ordinary hover and focus transitions are completely unaffected outside of that one moment. */ html.is-switching-theme, html.is-switching-theme *, html.is-switching-theme *::before, html.is-switching-theme *::after{ transition-property: none !important; } /* ========================================================================= 1. RESET & BASE ========================================================================= */ *,*::before,*::after{ box-sizing:border-box; } /* A real, widespread bug found during testing: [hidden] has the same CSS specificity as a single class selector, so any element with both the `hidden` attribute AND a class that sets its own `display` (the near-universal .btn among many others) had that class's display value silently win over the browser's built-in [hidden]{display:none} — since this stylesheet loads after the browser's defaults, and equal-specificity rules resolve by source order. Caught it by testing an actual hidden element's computed style rather than assuming the attribute "just works". This single rule guarantees `hidden` always wins, for every element on the site, current and future. */ [hidden]{ display:none !important; } /* overflow-x:clip on the root reliably contains the off-canvas mobile menu (which sits translated off the right edge) so it can never open up an empty horizontal scroll strip on phones. */ html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; } body{ margin:0; max-width:100%; background:rgb(var(--bg)); color:rgb(var(--text)); font-family:var(--font-ui); line-height:1.6; -webkit-font-smoothing:antialiased; transition:background 0.35s var(--ease), color 0.35s var(--ease); overflow-x:clip; /* A single long unbroken word, URL, or hashtag anywhere in real content (post body, comments, cards) would otherwise overflow its container; combined with overflow-x:clip above that overflow was being silently cut off — invisible and unreachable — instead of wrapping. This makes every long run of text wrap inside its box, inherited site-wide, on every screen size. */ overflow-wrap:break-word; word-wrap:break-word; } h1,h2,h3,.display{ font-family:var(--font-display); font-weight:600; color:rgb(var(--heading)); margin:0; letter-spacing:-0.01em; } .eyebrow{ font-weight:500; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } .wrap{ max-width:1220px; margin:0 auto; padding:0 28px; } /* Anchor-link targets (nav "Subscribe", footer "View all topics", 404/search "Browse topics", etc. all jump to these IDs) would otherwise land flush under the sticky header, hiding the section's own heading. */ #topics, #writings, #hadith, #essays, #welcome, #support, #subscribe, #comments{ scroll-margin-top:calc(var(--header-h) + 18px); } img,svg{ display:block; max-width:100%; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid rgb(var(--accent)); outline-offset:3px; border-radius:4px; } .bg-texture{ position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.5; background-image: radial-gradient(circle at 12% 8%, rgb(var(--wash) / 0.10), transparent 40%), radial-gradient(circle at 88% 18%, rgb(var(--accent-3) / 0.10), transparent 42%), radial-gradient(circle at 50% 95%, rgb(var(--accent-2) / 0.06), transparent 45%); transition:opacity 0.35s var(--ease); } /* A faint paper-grain, reinforcing the "parchment" identity the warm palette already suggests with real tactile texture rather than a flat wash. Tuned separately for light and dark palettes — multiply reads as fine speckling on light parchment tones; on near-black dark surfaces multiply has almost nothing left to darken, so dark palettes use soft-light instead, which stays visible without washing out. Both were checked by rendering and measuring actual pixel variance before picking these values, not eyeballed. */ .grain-overlay{ position:fixed; inset:0; pointer-events:none; z-index:0; } @media (prefers-reduced-motion: reduce), (forced-colors: active){ /* Not motion, but the same audience that benefits from a visually quieter page — and forced-colors modes should never see a synthetic noise layer fighting the user's chosen palette. */ .grain-overlay{ display:none; } } /* ---- Skip link (accessibility) ---- */ .skip-link{ position:absolute; top:-60px; left:12px; z-index:300; background:rgb(var(--ink)); color:rgb(var(--on-ink)); padding:12px 22px; border-radius:8px; font-weight:600; font-size:0.85rem; transition:top 0.2s var(--ease); } .skip-link:focus{ top:12px; outline:2px solid rgb(var(--accent-light)); } /* ========================================================================= 2. READING PROGRESS BAR (global, most visible on single posts) ========================================================================= */ /* ========================================================================= 3. HEADER / NAVIGATION ========================================================================= */ /* The frosted background lives on a pseudo-element rather than on the header itself. This is deliberate: putting backdrop-filter directly on .site-header would make it the containing block for its position:fixed descendants, which broke the mobile drawer (it sized against the header instead of the viewport). With the blur on ::before, the header no longer traps fixed children, and the drawer fills the screen correctly. */ .site-main{ display:block; } /* * v11.5 — THREE COLUMNS, SO THE NAV IS ACTUALLY IN THE MIDDLE. * * "the header has some design issues... and its not centered properly, * and its messy." * * It was `display:flex; justify-content:space-between` over three * children of very different widths. That does not centre anything: it * pins the logo left, pins the actions right, and drops the nav wherever * the leftover space happens to put it — which moves every time the * wordmark, the tagline or the number of icons changes, and moved again * when v11.1/v11.3 added Tafsīr and Adhkār. Measured at 1920px before * this change, the nav's centre sat 121px left of the page's. * * A three-track grid with the middle track sized to its content puts the * nav on the page's true centre line and keeps it there at every width, * whatever the two side columns contain. The columns are placed by * number rather than by source order on purpose: below 1180px the nav * becomes a fixed-position drawer and leaves the flow entirely, and with * explicit `grid-column` the logo and the actions stay in tracks 1 and 3 * instead of collapsing into 1 and 2. */ /* The lockup is the one item allowed to give. */ /* The two auto margins are what centre the nav between the other two. `min-width:max-content` keeps it from being squeezed into a wrap. */ /* Every item in the actions row is a fixed-size tap target, and none of them may be compressed. */ /* * The bar gets a wider measure than the page it sits over. * * Measured at 1920px with every item present: logo 229 + nav 590 + * actions 280. A grid that centres the middle track needs BOTH side * tracks to be at least as wide as the widest of the two, so the row * needs 280+590+280 = 1150px of content box before the gaps. `.wrap` is * 1220px wide with 28px of padding each side, which leaves 1164 — seven * pixels of slack, i.e. the nav and the icons were one nav item away * from colliding, which is what they had already done at 1200px. This * is not a reading column; it is a rule of chrome across the top of the * window, and 1360 gives it the room the seven-item nav actually needs. */ .logo{ display:flex; align-items:center; gap:12px; flex-shrink:0; min-width:0; } .logo-text{ min-width:0; } .logo-text .name, .logo-text .tagline{ display:block; min-width:0; /* v14.3 — clipped sideways only. `hidden` clips both axes, and with a line-height of 1 it was cutting the descender off the p of "Prophetic" in Literata, whose descenders are longer than Fraunces'. */ overflow-x:clip; overflow-y:visible; text-overflow:ellipsis; white-space:nowrap; } .logo-mark{ width:40px; height:40px; flex-shrink:0; } .logo-text{ display:flex; flex-direction:column; line-height:1.15; gap:3px; } .logo-text .name{ font-family:var(--font-display); font-weight:600; font-size:1.28rem; color:rgb(var(--heading)); letter-spacing:-0.005em; line-height:1; } .logo-text .tagline{ font-family:var(--font-body); font-style:italic; font-size:0.75rem; letter-spacing:0.01em; color:rgb(var(--accent)); text-transform:none; line-height:1.1; } /* * v11.5 — THE ITEM IS THE PILL, NOT THE LABEL. * * The label and its caret were two separate controls with two separate * hover backgrounds and a -6px negative margin pulling them together. * Hovering "Qur'an" lit a pill that stopped short of the caret beside * it, so every dropdown item read as a button with a stray chevron * loose next to it — which is most of what "messy" was pointing at. * * The
  • now carries the pill and both children are transparent, so * one rounded shape lights up for the whole item however you approach * it. The caret still remains a real