@charset "utf-8"; /* ============================================================================ سِيَر أعلام المعاصرين — نظام التصميم Design system. Single stylesheet, no build step. Concept: «الميزان» — a scholarly manuscript rendered for the screen. ========================================================================== */ @layer reset, tokens, base, layout, type, components, pages, utilities; /* ========================================================================== @layer tokens ========================================================================== */ @layer tokens { :root { color-scheme: dark light; /* ====================================================================== الهوية مأخوذة من الموقع الرسمي shuounislamiya.org Brand tokens lifted verbatim from the parent site's declarations: --si-primary #6c5ce7 · --si-primary-light #a29bfe --si-accent #e84393 · --si-accent-light #fd79a8 --si-bg-dark #0a1452 · --c-main #e62c53 The site is dark-first, exactly as the parent is. ==================================================================== */ /* --- ألوان العلامة : brand ------------------------------------------- */ --si-primary: #6c5ce7; --si-primary-light: #a29bfe; --si-primary-dark: #4b3fc4; --si-primary-glow: rgb(108 92 231 / 0.35); --si-accent: #e84393; --si-accent-light: #fd79a8; --si-rose: #e62c53; --si-bg-dark: #0a1452; --si-text-light: #e0e0e0; --si-border-subtle: rgb(108 92 231 / 0.2); --si-shadow-glow: 0 4px 30px rgb(108 92 231 / 0.15); /* --- المحايدات : neutrals, tuned to the parent's greys ---------------- */ --ink-950: #06060a; --ink-900: #0f0f11; /* the parent's footer background */ --ink-850: #14141a; --ink-800: #1a1a22; --ink-700: #26262f; --ink-600: #3a3a46; --ink-500: #5c5c6b; --ink-400: #8a8a99; --ink-300: #999999; --ink-200: #c0c0c0; --ink-150: #d1d1d1; /* the parent's body colour */ --ink-100: #e0e0e0; /* --si-text-light */ --ink-50: #ececec; /* the parent's heading colour */ --paper-0: #ffffff; /* --- أصباغ الأقسام : the three category pigments --------------------- علماء take the brand violet; أهل الضلال take the brand rose; دعاة take a teal struck to sit evenly between them on the wheel. */ --violet-900: #1a1440; --violet-700: #5546c9; --violet-600: var(--si-primary); --violet-500: var(--si-primary-light); --violet-100: #d9d5fb; --teal-900: #062a2c; --teal-700: #0b8f92; --teal-600: #12a8ab; --teal-500: #2ec4c7; --teal-100: #cdf0f1; --rose-900: #3d0a19; --rose-700: #c4234a; --rose-600: var(--si-rose); --rose-500: var(--si-accent); --rose-100: #fbd7e2; /* لون وظيفي واحد خارج العلامة — a single functional hue for "unverified" */ --amber-700: #9a6a12; --amber-600: #d99a2b; --amber-500: #e8b04e; /* الوهج بدل الذهب — the parent gilds with light, not gold */ --glow-700: var(--si-primary-dark); --glow-600: var(--si-primary); --glow-500: var(--si-primary-light); --glow-200: rgb(108 92 231 / 0.28); --glow-100: rgb(108 92 231 / 0.12); /* --- الأدوار الدلالية : semantic roles (dark is the default) ---------- */ --bg: #0a0b14; --bg-raised: #11121d; --bg-sunken: var(--ink-900); --bg-inset: #171827; --fg: var(--ink-50); --fg-muted: var(--ink-150); --fg-faint: var(--ink-300); --fg-ghost: var(--ink-400); --rule: rgb(108 92 231 / 0.18); --rule-strong: rgb(108 92 231 / 0.34); --rule-gold: rgb(108 92 231 / 0.4); /* accent — retargeted per category by a class on */ --accent-900: var(--violet-900); --accent-700: var(--violet-500); --accent: var(--violet-600); --accent-500: var(--violet-500); --accent-100: var(--violet-100); --accent-wash: color-mix(in oklab, var(--accent) 11%, var(--bg)); --accent-hair: color-mix(in oklab, var(--accent) 42%, transparent); --accent-on: #ffffff; /* text colour that sits on a filled accent */ /* --- الخطوط : type, matching the parent's declared stacks ------------- */ --font-display: "Al-Jazeera", "SF Arabic", "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif; --font-body: "SF Arabic", system-ui, -apple-system, "Segoe UI", "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; --font-ui: "SF Arabic", system-ui, -apple-system, "Segoe UI", "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif; --font-quran: "Amiri Quran", "Amiri", "Noto Naskh Arabic", serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace; /* Arabic reads larger and looser than Latin. These numbers are tuned for IBM Plex Sans Arabic at a 60–70 character measure. */ --fs-3xs: 0.6875rem; /* 11 */ --fs-2xs: 0.75rem; /* 12 */ --fs-xs: 0.8125rem; /* 13 */ --fs-sm: 0.9375rem; /* 15 */ --fs-md: 1.0625rem; /* 17 */ --fs-base: 1.1875rem; /* 19 — body */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: 1.6875rem; /* 27 */ --fs-2xl: 2.0625rem; /* 33 */ --fs-3xl: 2.625rem; /* 42 */ --fs-4xl: 3.375rem; /* 54 */ --fs-5xl: clamp(3rem, 1.6rem + 5.6vw, 5.5rem); --fs-6xl: clamp(3.5rem, 1rem + 9vw, 8rem); --lh-tight: 1.22; --lh-snug: 1.4; --lh-normal: 1.65; --lh-prose: 1.95; /* Arabic long-form needs this much air */ --lh-loose: 2.15; --tracking-none: 0; /* Arabic must NEVER be letter-spaced */ --tracking-latin: 0.02em; /* --- المقاييس : space, radius, shadow -------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem; --r-xs: 2px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 22px; --r-full: 999px; /* On a dark ground a shadow reads as depth only if it is near-black and paired with a faint brand glow — the parent site's --si-shadow-glow. */ --shadow-hair: 0 0 0 1px var(--rule); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-md: 0 2px 6px -1px rgb(0 0 0 / 0.45), 0 10px 26px -8px rgb(0 0 0 / 0.55), 0 0 24px -6px rgb(108 92 231 / 0.14); --shadow-lg: 0 6px 12px -3px rgb(0 0 0 / 0.5), 0 24px 56px -14px rgb(0 0 0 / 0.65), 0 0 44px -10px rgb(108 92 231 / 0.2); /* --- القياسات : measures -------------------------------------------- */ --measure: 36rem; /* prose column */ --measure-wide: 46rem; --margin-rail: 15rem; /* the manuscript margin (حاشية) */ --page: 78rem; /* outer container */ --page-wide: 92rem; --gutter: clamp(1.125rem, 0.4rem + 2.4vw, 3rem); --header-h: 4.25rem; --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 220ms; } /* ---- الوضع الفاتح : an opt-in light theme for long reading ------------- The parent site is dark only. This is offered because a 5000-word biography is punishing to read in reverse contrast, and it stays off unless the reader asks for it. */ :root[data-theme="light"] { --bg: #f7f7fb; --bg-raised: #ffffff; --bg-sunken: #eeeef5; --bg-inset: #f0f0f7; --fg: #010e22; /* the parent's --c-headings */ --fg-muted: #444450; --fg-faint: #66667a; --fg-ghost: #9494a6; --rule: rgb(108 92 231 / 0.16); --rule-strong: rgb(108 92 231 / 0.3); --rule-gold: rgb(108 92 231 / 0.34); --accent-700: var(--si-primary-dark); --violet-700: #4b3fc4; --teal-700: #0a7b7e; --rose-700: #b81c40; --accent-on: #ffffff; } /* ---- تلوين الأقسام : category retargeting ----------------------------- --accent the filled colour (buttons, bars, marks) --accent-700 the *readable* tint used for text on the page background */ .cat-scholars { --accent-900: var(--violet-900); --accent-700: var(--violet-500); --accent: var(--violet-600); --accent-500: var(--violet-500); --accent-100: var(--violet-100); } .cat-preachers { --accent-900: var(--teal-900); --accent-700: var(--teal-500); --accent: var(--teal-600); --accent-500: var(--teal-500); --accent-100: var(--teal-100); } .cat-deviants { --accent-900: var(--rose-900); --accent-700: var(--rose-500); --accent: var(--rose-600); --accent-500: var(--rose-500); --accent-100: var(--rose-100); } :root[data-theme="light"] .cat-scholars { --accent-700: var(--violet-700); } :root[data-theme="light"] .cat-preachers { --accent-700: var(--teal-700); } :root[data-theme="light"] .cat-deviants { --accent-700: var(--rose-700); } } /* ========================================================================== @layer reset ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-block-size: 100svh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul[role="list"], ol[role="list"] { list-style: none; } a { color: inherit; } table { border-collapse: collapse; } :target { scroll-margin-block-start: calc(var(--header-h) + var(--sp-5)); } ::selection { background: color-mix(in oklab, var(--accent) 22%, transparent); } :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } } /* ========================================================================== @layer base ========================================================================== */ @layer base { html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-normal); font-optical-sizing: auto; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums tabular-nums; /* الورق: an all-but-invisible grain so the light theme is not flat */ background-image: radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--glow-600) 4%, transparent), transparent 62%), radial-gradient(circle at 84% 78%, color-mix(in oklab, var(--accent) 3.5%, transparent), transparent 58%); background-attachment: fixed; } /* Western digits inside RTL Arabic must be bidi-isolated or the browser will reorder mixed runs. Every number in the templates is wrapped. */ .num, bdi.num, time { unicode-bidi: isolate; direction: ltr; font-variant-numeric: lining-nums tabular-nums; } ::-webkit-scrollbar { inline-size: 11px; block-size: 11px; } ::-webkit-scrollbar-track { background: var(--bg-sunken); } ::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: var(--r-full); border: 3px solid var(--bg-sunken); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-400); } } /* ========================================================================== @layer layout ========================================================================== */ @layer layout { .wrap { inline-size: min(100% - (var(--gutter) * 2), var(--page)); margin-inline: auto; } .wrap-wide { inline-size: min(100% - (var(--gutter) * 2), var(--page-wide)); margin-inline: auto; } .wrap-prose { inline-size: min(100% - (var(--gutter) * 2), var(--measure-wide)); margin-inline: auto; } .stack > * + * { margin-block-start: var(--flow, var(--sp-4)); } .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--sp-3)); align-items: center; } .between { display: flex; flex-wrap: wrap; gap: var(--gap, var(--sp-4)); align-items: center; justify-content: space-between; } .grid-auto { display: grid; gap: var(--gap, var(--sp-5)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col, 17rem)), 1fr)); } /* الصفحة ذات الحاشية — the manuscript layout: prose + margin rail. In RTL the rail sits on the left (inline-end). Collapses under 68rem. */ .manuscript { display: grid; grid-template-columns: minmax(0, var(--measure)) var(--margin-rail); gap: clamp(1.5rem, 0.5rem + 3vw, 4rem); align-items: start; } @container (max-width: 68rem) { .manuscript { grid-template-columns: minmax(0, 1fr); } } @supports not (container-type: inline-size) { @media (max-width: 68rem) { .manuscript { grid-template-columns: minmax(0, 1fr); } } } .rail { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-4)); font-size: var(--fs-xs); } .full-bleed { inline-size: 100vw; margin-inline-start: 50%; transform: translateX(50%); } [dir="rtl"] .full-bleed { transform: translateX(-50%); } } /* ========================================================================== @layer type ========================================================================== */ @layer type { h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); text-wrap: balance; letter-spacing: var(--tracking-none); } .display { font-family: var(--font-display); font-size: var(--fs-5xl); line-height: 1.08; font-weight: 700; text-wrap: balance; } .h1 { font-size: var(--fs-4xl); } .h2 { font-size: var(--fs-3xl); } .h3 { font-size: var(--fs-2xl); } .h4 { font-size: var(--fs-xl); } .h5 { font-size: var(--fs-lg); } .lede { font-size: var(--fs-lg); line-height: var(--lh-prose); color: var(--fg-muted); text-wrap: pretty; } /* عنوان صغير مرقوم بالذهب — the small caps-equivalent for Arabic: Arabic has no case, so hierarchy comes from size + colour + a gold rule. */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600; color: var(--fg-faint); } .eyebrow::before { content: ""; inline-size: var(--sp-5); block-size: 1px; background: linear-gradient(to left, var(--glow-600), transparent); } /* --- النثر : long-form prose ---------------------------------------- */ .prose { font-size: var(--fs-base); line-height: var(--lh-prose); color: var(--fg); text-wrap: pretty; hanging-punctuation: first allow-end; } .prose > * + * { margin-block-start: 1.15em; } .prose p { text-align: start; } /* never justify Arabic: kashida-less justify tears words apart */ .prose h2 { font-size: var(--fs-2xl); margin-block-start: 2.2em; margin-block-end: 0.55em; } .prose h3 { font-size: var(--fs-xl); margin-block-start: 1.9em; margin-block-end: 0.5em; } .prose h4 { font-size: var(--fs-lg); margin-block-start: 1.6em; margin-block-end: 0.45em; color: var(--fg-muted); } .prose h2 + p, .prose h3 + p, .prose h4 + p { margin-block-start: 0; } .prose a:not(.btn) { color: var(--accent-700); text-decoration: underline; text-decoration-color: var(--accent-hair); text-decoration-thickness: 1px; text-underline-offset: 0.28em; transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease); } .prose a:not(.btn):hover { text-decoration-color: currentColor; } .prose strong, .prose b { font-weight: 700; color: var(--fg); } .prose em { font-style: normal; color: var(--accent-700); font-weight: 600; } .prose ul, .prose ol { padding-inline-start: 1.5em; } .prose li + li { margin-block-start: 0.5em; } .prose ul { list-style: none; padding-inline-start: 1.35em; } .prose ul > li { position: relative; } .prose ul > li::before { content: ""; position: absolute; inset-inline-start: -1.1em; inset-block-start: 0.85em; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--glow-600); } .prose ol { list-style: none; counter-reset: ol; padding-inline-start: 1.9em; } .prose ol > li { position: relative; counter-increment: ol; } .prose ol > li::before { content: counter(ol); position: absolute; inset-inline-start: -1.9em; inset-block-start: 0.3em; font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; color: var(--glow-700); direction: ltr; unicode-bidi: isolate; } .prose hr { border: 0; margin-block: var(--sp-8); block-size: 1px; background: var(--rule); position: relative; overflow: visible; } /* فاصلة مذهّبة — a hand-set ornament instead of a plain rule */ .prose hr::after { content: "❊"; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(50%, -50%); background: var(--bg); padding-inline: var(--sp-4); color: var(--glow-600); font-size: var(--fs-sm); } /* --- الآية : Quranic verse ------------------------------------------- */ .ayah, .prose .ayah { display: block; font-family: var(--font-quran); font-size: 1.32em; line-height: 2.25; color: var(--accent-700); text-align: center; margin-block: 1.6em; padding-inline: var(--sp-4); text-wrap: balance; } .ayah cite { display: block; font-family: var(--font-ui); font-size: 0.52em; font-style: normal; color: var(--fg-faint); margin-block-start: 0.9em; } /* آية داخل الفقرة — keeps the Quranic face without breaking the line */ .ayah-inline { font-family: var(--font-quran); font-size: 1.1em; color: var(--accent-700); } /* --- الحديث : hadith ------------------------------------------------- */ .hadith { font-family: var(--font-display); font-size: 1.16em; line-height: 2.05; padding-inline-start: var(--sp-5); border-inline-start: 2px solid var(--rule-gold); color: var(--fg); } .hadith cite { display: block; font-family: var(--font-ui); font-size: 0.62em; font-style: normal; color: var(--fg-faint); margin-block-start: 0.6em; } /* --- قلتُ : the historian's own verdict, sealed in the margin --------- */ .qultu { --qultu-accent: var(--accent); position: relative; margin-block: 2em; padding: var(--sp-5) var(--sp-6); background: var(--accent-wash); border-inline-start: 3px solid var(--qultu-accent); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: 1.02em; line-height: 1.9; } [dir="rtl"] .qultu { border-radius: var(--r-md) 0 0 var(--r-md); } .qultu::before { content: "قلتُ"; position: absolute; inset-block-start: -0.85em; inset-inline-start: var(--sp-5); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: var(--bg); background: var(--qultu-accent); padding: 0.15em 0.85em; border-radius: var(--r-full); letter-spacing: var(--tracking-none); } .qultu > :first-child { margin-block-start: 0; } /* --- درجة الثبوت : evidence grade chips ------------------------------ */ .grade { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-ui); font-size: 0.72em; font-weight: 600; padding: 0.15em 0.6em; border-radius: var(--r-full); vertical-align: 0.15em; white-space: nowrap; border: 1px solid transparent; } /* Five grades need five separable hues, so a functional amber joins the brand three. It signals "reported, not verified" and nothing else. */ .grade-1 { background: color-mix(in oklab, var(--teal-600) 16%, transparent); color: var(--teal-500); border-color: color-mix(in oklab, var(--teal-600) 32%, transparent); } .grade-2 { background: color-mix(in oklab, var(--violet-600) 18%, transparent); color: var(--violet-500); border-color: color-mix(in oklab, var(--violet-600) 34%, transparent); } .grade-3 { background: color-mix(in oklab, var(--amber-600) 16%, transparent); color: var(--amber-500); border-color: color-mix(in oklab, var(--amber-600) 32%, transparent); } .grade-4 { background: color-mix(in oklab, var(--ink-400) 14%, transparent); color: var(--fg-faint); border-color: var(--rule-strong); } .grade-5 { background: color-mix(in oklab, var(--rose-600) 16%, transparent); color: var(--rose-500); border-color: color-mix(in oklab, var(--rose-600) 32%, transparent); } :root[data-theme="light"] { .grade-1 { color: var(--teal-700); } .grade-2 { color: var(--violet-700); } .grade-3 { color: var(--amber-700); } .grade-5 { color: var(--rose-700); } } /* --- الحاشية : sidenote that floats into the margin rail -------------- */ .sidenote { font-family: var(--font-ui); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--fg-faint); border-inline-start: 2px solid var(--rule-gold); padding-inline-start: var(--sp-3); margin-block: var(--sp-4); } @media (min-width: 68rem) { .prose .sidenote { float: inline-end; inline-size: calc(var(--margin-rail) - 2rem); margin-inline-end: calc(-1 * var(--margin-rail)); margin-block: 0.4em var(--sp-4); } } blockquote:not([class]) { font-family: var(--font-display); font-size: 1.18em; line-height: 1.95; padding-inline-start: var(--sp-5); border-inline-start: 2px solid var(--rule-gold); color: var(--fg-muted); } .prose figure { margin-block: var(--sp-7); } .prose figure img { inline-size: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-hair); } .prose figcaption { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--fg-faint); margin-block-start: var(--sp-3); text-align: center; } .prose table { inline-size: 100%; font-size: 0.92em; margin-block: var(--sp-6); } .prose th, .prose td { padding: var(--sp-3); border-block-end: 1px solid var(--rule); text-align: start; } .prose th { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs); color: var(--fg-faint); } } /* ========================================================================== @layer components ========================================================================== */ @layer components { /* ---- الأزرار : buttons ------------------------------------------------ */ .btn { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--rule-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; padding: 0.62em 1.25em; border-radius: var(--r-full); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--accent-on); --btn-bd: var(--accent); } .btn-primary:hover { --btn-bg: var(--accent-700); --btn-bd: var(--accent-700); } .btn-ghost { --btn-bd: transparent; } .btn-ghost:hover { --btn-bd: var(--rule); background: var(--bg-inset); } .btn-sm { font-size: var(--fs-xs); padding: 0.45em 0.9em; } .btn-icon { padding: 0.55em; aspect-ratio: 1; border-radius: var(--r-full); } .btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; } /* ---- الترويسة : masthead --------------------------------------------- */ .masthead { position: sticky; inset-block-start: 0; z-index: 50; block-size: var(--header-h); display: flex; align-items: center; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-block-end: 1px solid var(--rule); transition: box-shadow var(--dur) var(--ease); } .masthead[data-scrolled] { box-shadow: var(--shadow-sm); } .masthead > .wrap-wide { display: flex; align-items: center; gap: var(--sp-5); inline-size: min(100% - (var(--gutter) * 2), var(--page-wide)); } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: none; } .brand-mark { inline-size: 2.1rem; block-size: 2.1rem; flex: none; color: var(--accent); } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; } .brand-sub { font-size: var(--fs-3xs); color: var(--fg-faint); } .nav { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; } .nav a { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; padding: 0.45em 0.85em; border-radius: var(--r-full); text-decoration: none; color: var(--fg-muted); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .nav a:hover { color: var(--fg); background: var(--bg-inset); } .nav a[aria-current] { color: var(--accent-700); background: var(--accent-wash); font-weight: 600; } @media (max-width: 60rem) { .nav { display: none; } .masthead .nav-toggle { display: inline-flex; } } .nav-toggle { display: none; } /* ---- البحث : search field -------------------------------------------- */ .search { position: relative; display: flex; align-items: center; background: var(--bg-raised); border: 1px solid var(--rule-strong); border-radius: var(--r-full); padding-inline: var(--sp-4); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); min-inline-size: 0; } .search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); } .search input { flex: 1; min-inline-size: 0; border: 0; background: none; outline: none; padding-block: 0.6em; font-size: var(--fs-sm); font-family: var(--font-ui); } .search input::placeholder { color: var(--fg-ghost); } .search svg { inline-size: 1.05em; block-size: 1.05em; color: var(--fg-ghost); flex: none; } .search kbd { font-family: var(--font-mono); font-size: var(--fs-3xs); background: var(--bg-inset); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 0.15em 0.4em; color: var(--fg-faint); direction: ltr; unicode-bidi: isolate; flex: none; } /* ---- بطاقة العَلَم : the person card --------------------------------- A card that reads like a catalogue entry, not a blog teaser. The rank line comes first — the verdict before the name, as in the tarjama. */ .person-card { position: relative; display: grid; gap: var(--sp-4); grid-template-columns: 5.5rem 1fr; padding: var(--sp-5); background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--r-lg); text-decoration: none; isolation: isolate; overflow: hidden; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease); } .person-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--accent); opacity: 0.85; transition: inline-size var(--dur) var(--ease); } .person-card:hover { transform: translateY(-3px); border-color: var(--accent-hair); box-shadow: var(--shadow-md); } .person-card:hover::before { inline-size: 5px; } .person-card:hover .person-card-name { color: var(--accent-700); } .person-card-portrait { inline-size: 5.5rem; block-size: 5.5rem; border-radius: var(--r-md); object-fit: cover; background: var(--bg-inset); box-shadow: var(--shadow-hair); filter: saturate(0.9); transition: filter var(--dur) var(--ease); } .person-card:hover .person-card-portrait { filter: saturate(1); } .person-card-portrait--empty { display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-2xl); color: color-mix(in oklab, var(--accent) 40%, transparent); background: var(--accent-wash); } .person-card-body { display: flex; flex-direction: column; gap: var(--sp-2); min-inline-size: 0; } .person-card-rank { font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600; color: var(--accent-700); } .person-card-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; transition: color var(--dur) var(--ease); } .person-card-excerpt { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .person-card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--fg-faint); margin-block-start: auto; padding-block-start: var(--sp-2); } .person-card-meta > * { display: inline-flex; align-items: center; gap: 0.3em; } /* ---- الوسم : category tag -------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600; padding: 0.25em 0.7em; border-radius: var(--r-full); background: var(--accent-wash); color: var(--accent-700); border: 1px solid var(--accent-hair); text-decoration: none; white-space: nowrap; } .tag::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; } .tag-scholars { --accent: var(--violet-600); --accent-700: var(--violet-500); } .tag-preachers { --accent: var(--teal-600); --accent-700: var(--teal-500); } .tag-deviants { --accent: var(--rose-600); --accent-700: var(--rose-500); } :root[data-theme="light"] .tag-scholars { --accent-700: var(--violet-700); } :root[data-theme="light"] .tag-preachers { --accent-700: var(--teal-700); } :root[data-theme="light"] .tag-deviants { --accent-700: var(--rose-700); } /* ---- شريط الحكم : the verdict band ----------------------------------- The site's thesis made visible. Sits under the hero of every entry. */ .verdict-band { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: linear-gradient(to left, var(--accent-wash), transparent 70%); border: 1px solid var(--accent-hair); border-inline-start: 3px solid var(--accent); font-family: var(--font-ui); } .verdict-band-icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--accent); flex: none; } .verdict-band-label { font-size: var(--fs-2xs); color: var(--fg-faint); display: block; margin-block-end: 0.15em; } .verdict-band-text { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-700); line-height: var(--lh-snug); } /* ---- الفهرس الأبجدي : alphabet rail ----------------------------------- */ .alpha-rail { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: var(--sp-3); background: var(--bg-inset); border-radius: var(--r-lg); border: 1px solid var(--rule); } .alpha-rail a, .alpha-rail span { display: grid; place-items: center; inline-size: 2.1rem; block-size: 2.1rem; border-radius: var(--r-sm); font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; text-decoration: none; color: var(--fg-muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .alpha-rail a:hover { background: var(--accent); color: var(--accent-on); } .alpha-rail span { color: var(--fg-ghost); opacity: 0.4; cursor: default; } .alpha-rail a[aria-current] { background: var(--accent); color: var(--accent-on); } /* ---- فهرس المحتويات : table of contents ------------------------------- */ .toc { font-family: var(--font-ui); font-size: var(--fs-xs); } .toc-title { font-size: var(--fs-2xs); font-weight: 700; color: var(--fg-faint); margin-block-end: var(--sp-3); } .toc ol { list-style: none; display: flex; flex-direction: column; gap: 1px; } .toc a { display: block; padding: 0.45em var(--sp-3); border-radius: var(--r-sm); text-decoration: none; color: var(--fg-muted); line-height: var(--lh-snug); border-inline-start: 2px solid transparent; transition: all var(--dur) var(--ease); } .toc a:hover { color: var(--fg); background: var(--bg-inset); } .toc a[aria-current="true"] { color: var(--accent-700); border-inline-start-color: var(--accent); background: var(--accent-wash); font-weight: 600; } .toc .toc-h3 a { padding-inline-start: var(--sp-5); font-size: var(--fs-3xs); } /* ---- شريط التقدم : reading progress ----------------------------------- */ .progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60; block-size: 2px; background: transparent; pointer-events: none; } .progress-bar { block-size: 100%; inline-size: 0; background: linear-gradient(to left, var(--accent), var(--glow-600)); transition: inline-size 80ms linear; } /* ---- بطاقة المعطيات : the fact rail ----------------------------------- */ .facts { display: flex; flex-direction: column; font-family: var(--font-ui); } .facts dt { font-size: var(--fs-3xs); color: var(--fg-ghost); margin-block-start: var(--sp-3); } .facts dd { font-size: var(--fs-sm); color: var(--fg); font-weight: 500; } .facts > div:first-child dt { margin-block-start: 0; } /* ---- الخط الزمني : timeline spine ------------------------------------- */ .timeline { position: relative; padding-inline-start: var(--sp-6); } .timeline::before { content: ""; position: absolute; inset-block: 0.4em 0; inset-inline-start: 0.32rem; inline-size: 1px; background: linear-gradient(var(--rule-gold), transparent); } .timeline-item { position: relative; padding-block-end: var(--sp-5); } .timeline-item::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--sp-6) + 0.075rem); inset-block-start: 0.5em; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--glow-600); } .timeline-year { font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 700; color: var(--glow-700); direction: ltr; unicode-bidi: isolate; } .timeline-text { font-size: var(--fs-sm); color: var(--fg-muted); line-height: var(--lh-snug); } /* ---- التذييل : footer -------------------------------------------------- */ .footer { margin-block-start: var(--sp-12); padding-block: var(--sp-9) var(--sp-7); border-block-start: 1px solid var(--rule); background: var(--bg-sunken); font-family: var(--font-ui); font-size: var(--fs-sm); } .footer h3 { font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 700; color: var(--fg-faint); margin-block-end: var(--sp-3); } .footer a { color: var(--fg-muted); text-decoration: none; display: block; padding-block: 0.28em; transition: color var(--dur) var(--ease); } .footer a:hover { color: var(--accent-700); } .footer-bottom { margin-block-start: var(--sp-7); padding-block-start: var(--sp-5); border-block-start: 1px solid var(--rule); color: var(--fg-faint); font-size: var(--fs-xs); } /* ---- الترقيم : pagination ---------------------------------------------- */ .pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-block-start: var(--sp-8); } .pager a, .pager span { display: grid; place-items: center; min-inline-size: 2.5rem; block-size: 2.5rem; padding-inline: var(--sp-3); border-radius: var(--r-md); font-family: var(--font-ui); font-size: var(--fs-sm); text-decoration: none; border: 1px solid var(--rule); color: var(--fg-muted); direction: ltr; unicode-bidi: isolate; transition: all var(--dur) var(--ease); } .pager a:hover { border-color: var(--accent); color: var(--accent-700); } .pager [aria-current] { background: var(--accent); color: var(--accent-on); border-color: var(--accent); font-weight: 700; } .pager .is-disabled { opacity: 0.35; pointer-events: none; } /* ---- الحالة الفارغة : empty state -------------------------------------- */ .empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--fg-faint); } .empty-mark { font-size: var(--fs-4xl); color: var(--rule-strong); margin-block-end: var(--sp-4); font-family: var(--font-display); } /* ---- لوحة الأوامر : command palette ------------------------------------ */ .palette::backdrop { background: color-mix(in oklab, var(--ink-900) 45%, transparent); backdrop-filter: blur(3px); } .palette { inline-size: min(100% - 2rem, 40rem); max-block-size: 70svh; margin: 12svh auto auto; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--r-xl); background: var(--bg-raised); color: var(--fg); box-shadow: var(--shadow-lg); overflow: hidden; } .palette[open] { display: flex; flex-direction: column; } .palette-input { inline-size: 100%; border: 0; border-block-end: 1px solid var(--rule); background: none; outline: none; padding: var(--sp-5); font-family: var(--font-ui); font-size: var(--fs-md); } .palette-results { overflow-y: auto; padding: var(--sp-2); } .palette-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); text-decoration: none; color: var(--fg); cursor: pointer; } .palette-item:hover, .palette-item[data-active] { background: var(--accent-wash); } .palette-item mark { background: color-mix(in oklab, var(--glow-500) 40%, transparent); color: inherit; border-radius: 2px; } .palette-hint { padding: var(--sp-3) var(--sp-5); border-block-start: 1px solid var(--rule); font-family: var(--font-ui); font-size: var(--fs-3xs); color: var(--fg-ghost); display: flex; gap: var(--sp-4); } /* ---- زخرفة هندسية : CSS-only geometric ornament ------------------------ An eight-point star tessellation drawn with gradients — no image request, no SVG payload, and it re-tints itself from the accent variable. */ .ornament { --o-size: 46px; --o-color: color-mix(in oklab, var(--accent) 13%, transparent); background-color: transparent; background-image: repeating-conic-gradient(from 45deg at 50% 50%, var(--o-color) 0deg 6deg, transparent 6deg 84deg), repeating-conic-gradient(from 0deg at 50% 50%, var(--o-color) 0deg 5deg, transparent 5deg 85deg); background-size: var(--o-size) var(--o-size); background-position: 0 0, calc(var(--o-size) / 2) calc(var(--o-size) / 2); } .ornament-fade { mask-image: linear-gradient(to bottom, black, transparent); -webkit-mask-image: linear-gradient(to bottom, black, transparent); } /* ---- حد مذهّب : the gilded hairline ------------------------------------ */ .gild { block-size: 1px; border: 0; background: linear-gradient(to left, transparent, var(--rule-gold) 22%, var(--rule-gold) 78%, transparent); } /* ---- إشعار : toast ------------------------------------------------------ */ .toasts { position: fixed; inset-block-end: var(--sp-5); inset-inline-start: var(--sp-5); z-index: 90; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-full); background: var(--ink-900); color: var(--accent-on); font-family: var(--font-ui); font-size: var(--fs-sm); box-shadow: var(--shadow-lg); animation: toast-in 320ms var(--ease-out); } .toast-ok { background: var(--teal-700); } .toast-err { background: var(--rose-700); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } } } /* ========================================================================== @layer pages ========================================================================== */ @layer pages { /* ---- الواجهة : home masthead ------------------------------------------ Typographic, not photographic. The title is the artwork. */ .hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 1rem + 8vw, 7rem) clamp(2.5rem, 1rem + 5vw, 5rem); border-block-end: 1px solid var(--rule); } .hero-ornament { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 100%; opacity: 0.55; pointer-events: none; mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black, transparent 75%); } .hero-inner { position: relative; text-align: center; } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-6xl); line-height: 0.98; text-wrap: balance; background: linear-gradient(165deg, var(--fg) 22%, var(--si-primary-light) 62%, var(--si-accent) 96%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-rule { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-block: var(--sp-5); color: var(--glow-600); } .hero-rule::before, .hero-rule::after { content: ""; block-size: 1px; inline-size: min(22vw, 8rem); background: linear-gradient(to left, transparent, var(--rule-gold)); } .hero-rule::after { background: linear-gradient(to right, transparent, var(--rule-gold)); } .hero-sub { font-size: var(--fs-lg); color: var(--fg-muted); max-inline-size: 44rem; margin-inline: auto; line-height: var(--lh-prose); text-wrap: pretty; } .hero-search { max-inline-size: 34rem; margin: var(--sp-7) auto 0; } .hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-6); margin-block-start: var(--sp-7); font-family: var(--font-ui); } .hero-stat b { display: block; font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--accent-700); direction: ltr; unicode-bidi: isolate; line-height: 1.1; } .hero-stat span { font-size: var(--fs-2xs); color: var(--fg-faint); } /* ---- الأقسام الثلاثة : the three category doors ------------------------ */ .doors { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .door { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6); min-block-size: 11rem; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--bg-raised); text-decoration: none; transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .door::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background: radial-gradient(120% 80% at 100% 0%, var(--accent-wash), transparent 60%); transition: opacity var(--dur) var(--ease); } .door:hover { transform: translateY(-4px); border-color: var(--accent-hair); box-shadow: var(--shadow-md); } .door:hover::after { opacity: 1; } .door-count { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--accent); line-height: 1; direction: ltr; unicode-bidi: isolate; } .door-name { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; } .door-desc { font-size: var(--fs-sm); color: var(--fg-muted); line-height: var(--lh-snug); margin-block-start: auto; } /* ---- صدر الترجمة : the biography hero --------------------------------- Order follows the tarjama: rank, then name, then birth. */ .tarjama-hero { position: relative; padding-block: var(--sp-8) var(--sp-7); border-block-end: 1px solid var(--rule); overflow: hidden; } .tarjama-hero-ornament { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; mask-image: radial-gradient(ellipse 60% 100% at 100% 0%, black, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 100% at 100% 0%, black, transparent 70%); } .tarjama-hero-inner { position: relative; display: grid; gap: var(--sp-6); grid-template-columns: 1fr auto; align-items: start; } @media (max-width: 46rem) { .tarjama-hero-inner { grid-template-columns: 1fr; } } .tarjama-rank { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--accent-700); margin-block-end: var(--sp-2); } .tarjama-name { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; line-height: 1.15; text-wrap: balance; } .tarjama-vitals { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-block-start: var(--sp-4); font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--fg-muted); } .tarjama-vitals > * { display: inline-flex; align-items: center; gap: 0.4em; } .tarjama-vitals svg { inline-size: 1em; block-size: 1em; color: var(--fg-ghost); } .tarjama-portrait { inline-size: clamp(7rem, 16vw, 10.5rem); aspect-ratio: 1; border-radius: var(--r-lg); object-fit: cover; box-shadow: 0 0 0 1px var(--rule), var(--shadow-md); background: var(--bg-inset); } .tarjama-portrait--empty { display: grid; place-items: center; font-family: var(--font-display); font-size: var(--fs-4xl); color: color-mix(in oklab, var(--accent) 35%, transparent); background: var(--accent-wash); } /* ---- جسم الترجمة : the article body ------------------------------------ */ .tarjama-body { container-type: inline-size; padding-block: var(--sp-8); } .cite-box { margin-block-start: var(--sp-8); padding: var(--sp-5); background: var(--bg-inset); border-radius: var(--r-lg); border: 1px solid var(--rule); font-family: var(--font-ui); font-size: var(--fs-xs); } .cite-box h3 { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--fg-faint); margin-block-end: var(--sp-2); } .cite-box code { display: block; font-family: var(--font-mono); font-size: var(--fs-3xs); line-height: 1.7; color: var(--fg-muted); word-break: break-word; } /* ---- التصفح : browse toolbar ------------------------------------------- */ .toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-4); margin-block-end: var(--sp-6); background: var(--bg-raised); border: 1px solid var(--rule); border-radius: var(--r-lg); position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-2)); z-index: 20; backdrop-filter: blur(10px); } .filter-group { display: flex; gap: var(--sp-1); background: var(--bg-inset); padding: 3px; border-radius: var(--r-full); } .filter-group a { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; padding: 0.4em 0.9em; border-radius: var(--r-full); text-decoration: none; color: var(--fg-muted); transition: all var(--dur) var(--ease); white-space: nowrap; } .filter-group a:hover { color: var(--fg); } .filter-group a[aria-current] { background: var(--bg-raised); color: var(--accent-700); box-shadow: var(--shadow-sm); } .result-count { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--fg-faint); margin-inline-start: auto; } /* ---- نتيجة البحث : search result --------------------------------------- */ .result { display: block; padding: var(--sp-5) 0; border-block-end: 1px solid var(--rule); text-decoration: none; } .result:hover .result-name { color: var(--accent-700); } .result-name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; transition: color var(--dur) var(--ease); } .result-snippet { font-size: var(--fs-sm); color: var(--fg-muted); line-height: var(--lh-normal); margin-block-start: var(--sp-2); } .result-snippet mark { background: color-mix(in oklab, var(--glow-500) 35%, transparent); color: var(--fg); border-radius: 2px; padding-inline: 0.15em; } .result-path { font-family: var(--font-ui); font-size: var(--fs-3xs); color: var(--fg-ghost); margin-block-start: var(--sp-2); } /* ---- الطباعة : print --------------------------------------------------- */ @media print { .masthead, .footer, .rail, .toolbar, .progress, .toasts, .no-print, .hero-ornament, .tarjama-hero-ornament { display: none !important; } body { background: #fff; color: #000; font-size: 11.5pt; } .manuscript { grid-template-columns: 1fr; } .prose { font-size: 11.5pt; line-height: 1.75; } .prose a { text-decoration: none; color: #000; } .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; } .qultu { border: 1px solid #999; background: none; break-inside: avoid; } .ayah { color: #000; } h1, h2, h3 { break-after: avoid; } p, blockquote, .qultu { orphans: 3; widows: 3; } } } /* ========================================================================== @layer utilities ========================================================================== */ @layer utilities { .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: var(--sp-4); z-index: 100; background: var(--accent); color: var(--accent-on); padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--r-md) var(--r-md); font-family: var(--font-ui); font-weight: 600; text-decoration: none; transition: inset-block-start var(--dur) var(--ease); } .skip-link:focus { inset-block-start: 0; } .mt-0 { margin-block-start: 0; } .mt-4 { margin-block-start: var(--sp-4); } .mt-5 { margin-block-start: var(--sp-5); } .mt-6 { margin-block-start: var(--sp-6); } .mt-7 { margin-block-start: var(--sp-7); } .mt-8 { margin-block-start: var(--sp-8); } .mt-9 { margin-block-start: var(--sp-9); } .mb-4 { margin-block-end: var(--sp-4); } .mb-5 { margin-block-end: var(--sp-5); } .mb-6 { margin-block-end: var(--sp-6); } .py-8 { padding-block: var(--sp-8); } .py-9 { padding-block: var(--sp-9); } .muted { color: var(--fg-muted); } .faint { color: var(--fg-faint); } .accent { color: var(--accent-700); } .gold { color: var(--glow-700); } .center { text-align: center; } .fs-sm { font-size: var(--fs-sm); } .fs-xs { font-size: var(--fs-xs); } .ui { font-family: var(--font-ui); } .display-font { font-family: var(--font-display); } .flex-1 { flex: 1; } .hide-sm { } @media (max-width: 46rem) { .hide-sm { display: none !important; } } @media (max-width: 60rem) { .hide-md { display: none !important; } } }