/* ============================================================ SAHIFAH — DESIGN TOKENS ------------------------------------------------------------ The single source of truth. Every colour, size, space, rule and duration used anywhere in this site is declared here and nowhere else. main.css consumes these variables and must not contain a raw hex value, px font-size or magic number. Sections 1. Colour — brand seeds, tints, shades, semantic roles 2. Typography — families, modular scale, weights, leading 3. Space — modular spacing scale 4. Measure & layout — reading width, containers, grid 5. Line, radius, shadow — the thin warm rule motif 6. Motion & z-index ============================================================ */ :root { /* ========================================================== 1. COLOUR ========================================================== Four seed values are given by the brand. Everything else on the site is a tint or shade derived from them, so the whole palette moves together if a seed is retuned. ---------------------------------------------------------- */ /* -- Seeds ------------------------------------------------- */ --burgundy: #8a2016; /* calligraphy, headings, links */ --cream: #f4eed7; /* logo tile ground, bands, cards */ --ink: #3a2a20; /* warm near-black, body text */ --paper: #fdfcf8; /* near-white reading surface */ /* -- Burgundy ramp ---------------------------------------- Shades darken toward ink for hovers and pressed states; tints lift toward cream for washes and thin rules. */ --burgundy-900: #4d120c; /* deepest — reversed-band ground */ --burgundy-800: #6b190f; /* pressed / active */ --burgundy-700: #7a1c13; /* hover */ --burgundy-600: var(--burgundy); /* base */ --burgundy-400: #b05a4f; /* muted, disabled */ --burgundy-200: #d9a79e; /* rules on cream */ --burgundy-100: #ecd0c9; /* hairlines, focus haze */ --burgundy-050: #f7e6e1; /* tinted wash */ /* -- Cream ramp ------------------------------------------- The band and card grounds. -deep is the logo tile value, -050/-100 sit between cream and paper for subtle layering. */ --cream-050: #fbf8ec; --cream-100: #f8f3e3; --cream-200: var(--cream); --cream-300: #ece3c6; /* card edge against cream ground */ --cream-400: #ddd0ac; /* thin warm rule on cream */ /* -- Ink ramp --------------------------------------------- Warm greys for metadata, captions and secondary text. Every step keeps the brown cast — no neutral grey. */ --ink-900: #2a1d15; /* display headings */ --ink-800: var(--ink); /* body copy */ --ink-600: #6b5849; /* secondary text, metadata, bylines */ --ink-500: #8a7563; /* 4.26:1 on paper — not for text */ --ink-400: #a89482; /* captions, disabled */ --ink-300: #c8b9a8; /* rules on paper */ --ink-200: #ded3c4; /* hairlines */ --ink-100: #efe9df; /* faint fills */ /* -- Semantic roles --------------------------------------- Components reference these, not the ramps above, so a role can be re-pointed without touching a component. */ --colour-bg: var(--paper); /* page ground */ --colour-bg-band: var(--cream-100); /* alternating band */ --colour-bg-band-deep: var(--cream-200); /* heavier band */ --colour-bg-card: var(--paper); --colour-bg-card-cream: var(--cream-050); --colour-bg-inverse: var(--burgundy-900); --colour-bg-wash: var(--burgundy-050); --colour-text: var(--ink-800); --colour-text-strong: var(--ink-900); --colour-text-muted: var(--ink-600); --colour-text-meta: var(--ink-600); --colour-text-inverse: var(--cream-200); --colour-text-inverse-muted: #c9b8a6; --colour-heading: var(--burgundy-600); --colour-heading-deep: var(--burgundy-900); --colour-link: var(--burgundy-600); --colour-link-hover: var(--burgundy-800); --colour-link-underline: var(--burgundy-200); --colour-rule: var(--ink-200); /* thin warm rule on paper */ --colour-rule-strong: var(--ink-300); --colour-rule-cream: var(--cream-400); /* rule on cream */ --colour-rule-accent: var(--burgundy-200); --colour-focus: var(--burgundy-600); --colour-focus-haze: var(--burgundy-100); --colour-focus-inverse: var(--cream-200); /* focus on inverse grounds */ /* Ink laid over an image rather than over a ground, so it is the one colour on the site that carries an alpha channel. It is --ink-900 at 82%, which keeps the warm cast of the ramp while staying legible over any first page. */ --colour-overlay: rgb(42 29 21 / 0.82); /* ========================================================== 2. TYPOGRAPHY ========================================================== */ /* -- Families --------------------------------------------- Fallbacks are metric-sympathetic serifs so a swap from font-display does not reflow the page violently. Amiri sits in the Latin stacks as well. It is never used for Latin — Source Serif 4 and Cormorant cover that — but English prose about Islam contains Arabic-range characters the Latin faces do not have, above all U+FDFA (ﷺ). Per character, the browser walks the stack until a face has the glyph, so those resolve to Amiri instead of a tofu box. */ --font-display: 'Cormorant Garamond', 'Apple Garamond', Garamond, 'Amiri', 'Times New Roman', serif; --font-body: 'Source Serif 4', 'Source Serif Pro', 'Amiri', Charter, Georgia, 'Times New Roman', serif; --font-arabic: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; /* -- Modular scale ---------------------------------------- Base 1rem (16px), ratio 1.25 (major third). Sizes below -0 step down by the same ratio. Display steps are fluid: they interpolate between a 320px and a 1200px viewport so headings never need a media query to resize. */ --ratio: 1.25; --text-2xs: 0.64rem; /* 10.24px — tiny labels */ --text-xs: 0.8rem; /* 12.8px — meta, captions */ --text-sm: 0.9rem; /* 14.4px — UI, small print */ --text-base: 1rem; /* 16px — default */ --text-md: 1.125rem; /* 18px — article body */ --text-lg: 1.25rem; /* 20px — lede, pull text */ --text-xl: 1.563rem; /* 25px — h4 */ --text-2xl: 1.953rem; /* 31px — h3 */ --text-3xl: 2.441rem; /* 39px — h2 */ --text-4xl: 3.052rem; /* 49px — h1 */ --text-5xl: 3.815rem; /* 61px — hero */ /* Fluid display steps — clamp(min, preferred, max). The maximum of each is a step of the scale above, so the desktop sizes stay on the 1.25 ratio. The minimum is an off-scale anchor: at 320px a strict ratio step is too big for the column, so the small end is tuned to the viewport and only the large end is required to land on the scale. The preferred term is the line through the two anchors. */ --text-fluid-h1: clamp(2.25rem, 1.55rem + 3.5vw, var(--text-5xl)); --text-fluid-h2: clamp(1.75rem, 1.35rem + 2vw, var(--text-3xl)); --text-fluid-h3: clamp(1.438rem, 1.24rem + 1vw, var(--text-2xl)); --text-fluid-lede: clamp(var(--text-md), 1.06rem + 0.33vw, 1.313rem); /* Arabic runs optically smaller than Latin at the same nominal size, so Arabic gets its own scale one step up. The inline size is deliberately restrained (1.05em, not 1.15em): see the leading note below — an inline run has to fit the surrounding line box without collision. */ --text-arabic-inline: 1.05em; /* relative to surrounding text */ --text-arabic-block: clamp(1.5rem, 1.15rem + 1.75vw, 2.125rem); --text-arabic-hadith: clamp(1.313rem, 1.05rem + 1.3vw, 1.75rem); /* -- Weights ----------------------------------------------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* -- Line height ------------------------------------------- Long-form body sits at 1.75 — generous but not adrift. Arabic needs more room so diacritics never clip. */ --leading-flat: 1; --leading-tight: 1.15; /* display headings */ --leading-snug: 1.3; /* sub-headings */ --leading-normal: 1.5; /* UI, cards */ --leading-relaxed: 1.65; /* lede, secondary prose */ --leading-body: 1.75; /* article paragraphs */ /* Arabic leading is set from Amiri's real metrics, not by eye. Amiri's content area is 1.758em (ascent 1.124, descent 0.634) against Source Serif 4's 1.371em, and its glyphs can draw as high as 1.85em above the baseline on stacked marks. So Arabic needs materially more room than Latin or the harakat collide with the line above. --leading-arabic block ayah — full clearance --leading-arabic-hadith slightly tighter, longer texts --leading-arabic-inline standalone short runs --leading-arabic-run inline inside an English line: small enough that the inline box (1.55 x 1.05em) stays inside the paragraph's own line box and does not make the leading ragged --leading-body-arabic the paragraph bump applied by :has() when a run is present */ --leading-arabic: 2.1; --leading-arabic-hadith: 1.95; --leading-arabic-inline: 1.9; --leading-arabic-run: 1.55; --leading-body-arabic: 1.9; /* -- Letter spacing ----------------------------------------- */ --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* eyebrows, small caps labels */ --tracking-widest: 0.16em; /* ========================================================== 3. SPACE ---------------------------------------------------------- A 4px base multiplied on an approximately-1.5 progression. Named by t-shirt size so intent survives a value change. ========================================================== */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ /* Vertical rhythm inside prose — the paragraph interval that sets the reading cadence on the article page. */ --space-paragraph: 1.4em; --space-heading-before: 2.25em; --space-heading-after: 0.6em; /* Section padding, fluid between mobile and desktop. */ --space-section: clamp(var(--space-2xl), 5vw, var(--space-3xl)); --space-gutter: clamp(var(--space-sm), 4vw, var(--space-lg)); /* ========================================================== 4. MEASURE & LAYOUT ---------------------------------------------------------- --measure is the article page's reason for existing. Source Serif 4's average advance in running English text, weighted by letter frequency, is 0.4434em. At --text-md (18px) that is 7.98px per character, so: 34rem = 544px / 7.98 = 68.2 characters which sits mid-range in the 65–75 target. If --text-md or the body face changes, recompute rather than eyeball. ========================================================== */ --measure: 34rem; /* = 68ch of Source Serif 4 at 18px */ --measure-narrow: 28rem; /* captions, asides */ --measure-wide: 44rem; /* ledes, block quotes, ayat */ --container-sm: 42rem; --container-md: 58rem; --container-lg: 72rem; --container-xl: 82rem; --grid-gap: var(--space-lg); --grid-gap-tight: var(--space-md); --header-height: 4.5rem; /* The nav dropdown panel. Wide enough that "Publications" above it is never wider than the panel beneath it. */ --nav-menu-width: 11rem; /* PDF first-page thumbnail. The ratio is ISO 216 (1:root 2), so the crop is an A4 page rather than an approximation of one; --thumb-width steps up once there is room for it. */ --thumb-width: 5.5rem; --thumb-width-lg: 7rem; --thumb-ratio: 1 / 1.4142; /* The article rail (contents, further reading). It is only introduced at 75em so the main column never drops below 49rem — see --prose-bleed. */ --rail-width: 15rem; /* Feature blocks inside the article (ayah, hadith, pull quote, figure) step outside the measure to --measure-wide. The bleed is exactly half the difference, so a block is centred on the same axis as the text it interrupts. It is only applied where the column is wide enough to absorb it: free space each side is (column - measure) / 2, and every layout that switches it on keeps the column at 48rem or more, giving 7rem of slack against a 5rem bleed. */ --prose-bleed: calc((var(--measure) - var(--measure-wide)) / 2); /* ========================================================== 5. LINE, RADIUS, SHADOW ---------------------------------------------------------- The logo is drawn as thin warm outlines around cream tiles. --rule-hairline is that line, and it recurs as card borders, section dividers and block frames. ========================================================== */ --rule-hairline: 1px; --rule-thin: 2px; --rule-thick: 3px; --rule-rail: 4px; /* the left rail on quote blocks */ --border-hairline: var(--rule-hairline) solid var(--colour-rule); --border-cream: var(--rule-hairline) solid var(--colour-rule-cream); --border-accent: var(--rule-hairline) solid var(--colour-rule-accent); /* The lockup is seven cream tiles with softly rounded corners and a thin warm outline. --radius-tile is that corner; the smaller steps are its quieter relatives for cards and controls. Nothing here is a pill except deliberate chips. */ --radius-none: 0; --radius-sm: 3px; --radius-md: 5px; --radius-lg: 8px; --radius-tile: 12px; --radius-pill: 999px; /* Tile geometry — the decorative rail that echoes the logo. */ --tile-width: 2.75rem; --tile-height: 1.25rem; --tile-gap: var(--space-3xs); /* Shadows are warm and barely there; depth comes from rules and ground colour, not from drop shadows. */ --shadow-none: none; --shadow-subtle: 0 1px 2px rgb(58 42 32 / 0.04); --shadow-card: 0 1px 3px rgb(58 42 32 / 0.05), 0 8px 24px -12px rgb(58 42 32 / 0.08); --shadow-raised: 0 2px 6px rgb(58 42 32 / 0.07), 0 16px 40px -16px rgb(58 42 32 / 0.12); --focus-ring: 2px solid var(--colour-focus); /* On --colour-bg-inverse the burgundy ring is 1.6:1; cream is 12.8:1. */ --focus-ring-inverse: 2px solid var(--colour-focus-inverse); --focus-offset: 3px; /* ========================================================== 6. MOTION & DEPTH ========================================================== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --transition-colour: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; } /* ------------------------------------------------------------ Print — ink on white. Declared here so main.css can re-point the semantic roles in @media print without naming a colour. ------------------------------------------------------------ */ :root { --print-paper: #ffffff; --print-ink: #000000; } /* ------------------------------------------------------------ Reduced motion — collapse durations rather than unsetting individual transitions in main.css. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; } }