/* 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-two classical works readable a passage at a time, thirteen hadith collections (the Shama'il readable as narrations or as a book), prayer times, a Qibla compass, a tasbih counter and two hundred and thirty-four adhkar, in eight appearances, each with its own metal. Version: 13.2.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: propheticprofit */ /* 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; } /* ========================================================================= 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; } @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; } /* 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. */ --font-display:'Fraunces', 'Newsreader', Georgia, 'Times New Roman', 'Amiri', 'Noto Naskh Arabic', serif; --font-body:'Newsreader', Georgia, 'Times New Roman', 'Amiri', 'Noto Naskh Arabic', serif; --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Amiri', 'Noto Naskh Arabic', sans-serif; --font-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, 'Amiri', 'Noto Naskh Arabic', 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 48 pairs, all passing at emit time. */ /* -------- SAFFRON (slug: saffron) — Golden paper, burnt spice ink -------- */ :root, html[data-theme="saffron"]{ color-scheme: light; --bg: 255 245 222; --bg-alt: 252 234 197; --surface: 255 251 238; --text: 58 42 18; --text-muted: 117 91 46; --heading: 93 43 6; --heading-soft: 122 70 20; --ink: 56 31 6; --ink-soft: 80 48 14; --on-ink: 255 246 228; --accent: 168 74 8; --accent-ui: 158 68 6; --accent-light: 247 197 121; --accent-2: 16 100 86; --accent-3: 139 36 46; --shadow: 86 54 12; --on-accent: var(--on-ink); --gilt-hi: 252 224 168; --gilt: 230 178 96; --gilt-deep: 192 136 52; --gilt-edge: 114 70 12; --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); } /* -------- PORCELAIN (slug: porcelain) — Glazed white, cold steel ink -------- */ html[data-theme="porcelain"]{ color-scheme: light; --bg: 240 247 252; --bg-alt: 225 238 248; --surface: 250 253 255; --text: 33 48 62; --text-muted: 86 103 121; --heading: 18 40 60; --heading-soft: 44 68 90; --ink: 14 30 46; --ink-soft: 27 46 66; --on-ink: 238 247 253; --accent: 19 102 148; --accent-ui: 17 95 138; --accent-light: 158 208 236; --accent-2: 120 76 32; --accent-3: 14 104 98; --shadow: 24 44 64; --on-accent: var(--on-ink); --gilt-hi: 250 253 255; --gilt: 206 222 236; --gilt-deep: 150 175 198; --gilt-edge: 58 88 116; --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); } /* -------- DAMASK (slug: damask) — Blush paper, madder crimson -------- */ html[data-theme="damask"]{ 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); } /* -------- 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); } /* -------- 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); } /* -------- MIDNIGHT (slug: midnight) — Blue-black night, frost light -------- */ html[data-theme="midnight"]{ color-scheme: dark; --bg: 10 17 30; --bg-alt: 17 27 44; --surface: 22 34 52; --text: 220 232 245; --text-muted: 148 169 193; --heading: 240 248 255; --heading-soft: 205 220 238; --ink: 6 11 21; --ink-soft: 14 23 37; --on-ink: 233 243 253; --accent: 122 186 238; --accent-ui: 152 205 246; --accent-light: 196 226 250; --accent-2: 234 190 130; --accent-3: 128 222 212; --shadow: 0 0 0; --on-accent: var(--ink); --gilt-hi: 238 248 255; --gilt: 198 222 244; --gilt-deep: 142 180 216; --gilt-edge: 68 108 152; --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); } /* -------- 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); } /* -------- 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); } /* ==== 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-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:rgb(var(--accent)); 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; } ::selection{ background:rgb(var(--accent) / 0.28); color:rgb(var(--heading)); } .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(--accent) / 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; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; opacity:0.05; } html[data-scheme="dark"] .grain-overlay{ mix-blend-mode:soft-light; opacity:0.16; } @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) ========================================================================= */ .reading-progress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:210; background:linear-gradient(90deg, rgb(var(--accent)), rgb(var(--accent-light))); transition:width 0.1s linear, opacity 0.2s ease; opacity:0; } .reading-progress.show{ opacity:1; } /* ========================================================================= 3. HEADER / NAVIGATION ========================================================================= */ .site-header{ position:fixed; top:0; left:0; right:0; width:100%; z-index:100; background:transparent; border-bottom:1px solid rgb(var(--heading) / 0.08); transition:box-shadow 0.3s var(--ease), border-color 0.35s var(--ease), transform 0.3s var(--ease); } /* 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-header::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgb(var(--bg) / 0.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:background 0.35s var(--ease); } .site-header.scrolled{ box-shadow:0 8px 24px -16px rgb(var(--shadow) / 0.35); } .site-header.hide-on-scroll{ transform:translateY(-100%); } .site-main{ display:block; padding-top:calc(var(--header-h-static) + 4px); } /* * 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. */ .header-inner{ /* * v12.1 — THE SIDE TRACKS SHARE THE SPARE SPACE, BUT NEVER BELOW * WHAT IS ACTUALLY IN THEM. * * This was `minmax(0,1fr) auto minmax(0,1fr)`: both outer tracks took * an EQUAL share of the leftover width with no regard for their * contents. That is only safe while the two sides are about the same * size, and they are not — the logo lockup is ~211px and the actions * row ~319px. So from roughly 1240px downwards the shared track came * out smaller than the actions needed, and the actions (justify-self: * end) spilled leftwards over the last nav item: the clock icon * printed on top of the word "About". * * That is why this fault kept returning. Every previous attempt * adjusted paddings and breakpoints; the cause was the equal share, * which no padding can rescue once the two sides differ. * * `max-content` as the track minimum states the missing rule: share * the spare space evenly, but never below the width of what you are * holding. Above about 1290px both sides are under their fair share, * the tracks come out equal, and the nav is exactly centred on the * page. Below that the actions keep their width, the logo side gives * up the difference, and the nav slides a few pixels left instead of * being painted over. * * Verified by measuring the nav-to-actions and logo-to-nav gaps at * every tested width from 1181px to 1920px: no negative gap anywhere. */ /* * ═════════════════════════════════════════════════════════════════ * v12.2 — THE BAR IS A FLEX ROW WITH AUTO MARGINS, NOT A GRID. * ═════════════════════════════════════════════════════════════════ * * THE GRID COULD NOT DO THE JOB, AND THE REASON IS ARITHMETIC. * * v12.1 fixed the overlap by giving the two side tracks a max-content * minimum, and that fix was right. What it could not do — what no * three-track grid can do — is put the nav in the middle of the bar * when the two sides differ in width. The lockup is about 211px and * the actions row about 341px. `minmax(max-content,1fr)` hands each * track its own contents first and splits the rest evenly, so the * sides come out 211+n and 341+n and never match. `1fr auto 1fr` * splits first and clamps up, which is equal — but only while half * the leftover clears 341px, and inside a 1360px bar holding a 670px * nav it never does. Measured: the nav's midpoint was 21px left of * centre at 1280px and 40px left at 1600px. Small enough to read as * carelessness rather than as a bug, which is how it was reported. * * AND MATHEMATICAL CENTRING WAS THE WRONG TARGET ANYWAY. Put the nav * on the page's exact centre line with a 211px lockup on one side and * a 341px cluster on the other, and the gap to the left of the nav * comes out 130px wider than the gap to its right. It is centred, and * it looks lopsided, because what an eye checks in a bar like this is * the two gaps and not the centre line. * * So: `margin-inline: auto` on the nav. An auto margin on a flex item * absorbs free space, and two of them absorb it in equal halves — the * gap to the left of the nav and the gap to its right are the same * number at EVERY width, by construction, whatever the two sides * happen to contain. The bar is balanced at 1181px and at 2560px and * at every step between, and it stays balanced if a nav item or a * header button is ever added or removed. * * IT ALSO CANNOT OVERLAP, which is the property v12.1 bought and this * must not give back. When the free space reaches zero the auto * margins are zero and the row simply packs; nothing is overlaid, * because flex items are laid out one after another and never on top * of one another. `min-width:max-content` on the nav and on the * actions stops either of them being compressed below its contents; * the lockup is the one thing allowed to give, and it gives by * eliding its tagline. */ display:flex; align-items:center; gap:16px; justify-content:space-between; /* Longhand top/bottom ONLY — not shorthand `padding`. This element carries both `.wrap` and `.header-inner`, both classes at the same specificity (0,1,0). A shorthand `padding` here would set all four sides and, being later in the file, would beat `.wrap{padding:0 28px}` outright on every side. Longhand top/bottom touches only those two sides, so `.wrap`'s own left/right survives the cascade. */ padding-top:16px; padding-bottom:16px; transition:padding 0.3s var(--ease); } /* The lockup is the one item allowed to give. */ .header-inner > .logo{ flex:0 1 auto; min-width:0; } /* 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. */ .header-inner > .main-nav{ flex:0 0 auto; margin-inline:auto; } /* Every item in the actions row is a fixed-size tap target, and none of them may be compressed. */ .header-inner > .header-actions{ flex:0 0 auto; min-width:max-content; } /* * 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. */ .site-header .header-inner{ max-width:1360px; } .site-header.scrolled .header-inner{ padding-top:10px; padding-bottom:10px; } .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; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .logo-mark{ width:40px; height:40px; flex-shrink:0; transition:transform 0.5s var(--ease); } .logo:hover .logo-mark{ transform:rotate(45deg); } .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; } .main-nav{ display:flex; align-items:center; gap:2px; } .main-nav ul{ list-style:none; display:flex; align-items:center; gap:2px; margin:0; padding:0; } /* * 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