/* ============================================================================ شنگرف — Shangarf Design System dars-goftarha.ir · academic reading system · Claude Design lane · 2026-07-19 PALETTE — taken from the live /references page, not invented That page is warm cream paper, NAVY-SLATE ink (#2B3148, never brown), a deep navy accent (#15294E / #1D3460) and a family of golds (#B08434 / #CAA052 / #D8BE8A). Those anchors are extended here into two full ramps — nine navy steps and seven gold — so structure is built from many related shades rather than one light blue and one dark blue. THE FIVE COLLECTIONS = FIVE POINTS ON THAT COOL ARC لاجورد lapis #1D3460 → تفسیر قرآن (the page's own accent) زنگارِ آبی blue-verdigris #155A63 → ادیان و موضوعاتِ دینی نیلی indigo #3B2A6B → روانکاوی و فرهنگ فولادی steel blue #1F4C7A → موضوعاتِ قرآنی برنز bronze #8A6420 → سخنرانی‌های موضوعی (the page's gold) زر gold #B08434 → RESERVED: scripture only. Every page declares its collection once (class on ) and the whole chrome — header band, headings, TOC rail, links, playlist, chips — keys off it. Colour is wayfinding, not garnish. ========================================================================= */ /* ---------- faces ------------------------------------------------------- */ @font-face{font-family:'Estedad';font-weight:400;font-display:swap;src:url('fonts/Estedad-Regular.woff2') format('woff2')} @font-face{font-family:'Estedad';font-weight:500;font-display:swap;src:url('fonts/Estedad-Medium.woff2') format('woff2')} @font-face{font-family:'Estedad';font-weight:600;font-display:swap;src:url('fonts/Estedad-SemiBold.woff2') format('woff2')} @font-face{font-family:'Estedad';font-weight:700;font-display:swap;src:url('fonts/Estedad-Bold.woff2') format('woff2')} @font-face{font-family:'Estedad';font-weight:800;font-display:swap;src:url('fonts/Estedad-ExtraBold.woff2') format('woff2')} @font-face{font-family:'Inter';font-weight:400;font-display:swap;src:url('fonts/Inter-400.woff2') format('woff2')} @font-face{font-family:'Inter';font-weight:500;font-display:swap;src:url('fonts/Inter-500.woff2') format('woff2')} @font-face{font-family:'Inter';font-weight:700;font-display:swap;src:url('fonts/Inter-700.woff2') format('woff2')} /* ---------- tokens ------------------------------------------------------ */ :root{ /* ── paper & ink ──────────────────────────────────────────────────────── Taken from the live /references page, not invented. Its character is a warm cream ground with a NAVY-SLATE ink — the text is never brown-black, it is a dark blue-grey, and that is what makes the gold read as gold. */ --paper: #FBF6EC; /* surface — the reading ground */ --paper-deep: #F3EAD8; /* paper — recessed: rails, zebra rows */ --paper-mid: #F7EFE0; /* surface-2 — between the two */ --paper-high: #FFFCF4; /* raised: cards standing off the page */ --ink: #2B3148; /* مرکب — navy-slate body text, 11.9:1 */ --ink-soft: #5A6079; /* secondary — 5.8:1 */ --ink-faint: #8B8EA0; /* metadata — 3.0:1, large/secondary only */ --line: rgba(176,132,52,.30); /* gold hairline, as on the page */ --line-strong:rgba(176,132,52,.52); --line-cool: rgba(21,41,78,.12); /* the quieter navy rule */ /* ── the navy ramp — THE ARC COLOURS, taken literally ─────────────────── The references page draws its category arc from a single accent tinted toward white: shade(i) = color-mix(in srgb, #15294E (88 − i/(n−1)·62)%, #FFFFFF) So the "spectrum" of that page is ONE navy at six lightnesses, not a set of different hues. --n-300…--n-800 below are those exact six values; --n-100 and --n-200 extend the same hue darker for text and bands. */ --n-100:#15294E; /* the accent at full strength */ --n-200:#233659; /* 94 % */ --n-300:#314363; /* 88 % — arc segment 1 */ --n-400:#4D5C78; /* 76 % — arc segment 2 */ --n-500:#6C788F; /* 63 % — arc segment 3 */ --n-600:#8892A5; /* 51 % — arc segment 4 */ --n-700:#A6AEBC; /* 38 % — arc segment 5 */ --n-800:#C2C7D1; /* 26 % — arc segment 6 */ --n-900:#DDE0E6; /* 14 % — the same ramp, one step softer */ /* ── the gold ramp — seven steps from the page's three anchors ───────── */ --g-100:#6B4E18; --g-200:#946D22; --g-300:#B08434; --g-400:#CAA052; --g-500:#D8BE8A; --g-600:#E5CF9D; --g-700:#EFE3C6; /* ── the five collections = five stops on that one ramp ───────────────── Not five hues. The references page distinguishes six categories using a single navy at six lightnesses, and that is the whole idea: the archive reads as one body of work, and depth of tint — not a change of colour — says which part of it you are in. Each collection takes its arc value as `base`, a deep step of the same hue as `deep` for text, and the same hue washed almost to paper as `wash`. All five sit on the one ramp — the gold that briefly stood in for the topical lectures is gone. Gold is scripture. */ /* Five SUBJECTS, so five hues — not five steps of one navy. The ramp that used to live here was the references page's single-accent arc taken literally; measured at the row wash, all ten pairs of it fell under ΔE 5. These are the site's own per-topic colours, which the reader already meets on the archive cards. */ --lajvard-deep:#214981; --lajvard:#4A689F; --lajvard-tint:#B3BED0; --lajvard-wash:#DEE1E5; --zangar-deep:#7C2E41; --zangar:#9D5060; --zangar-tint:#D6B4B6; --zangar-wash:#EDDDD9; --nili-deep:#00556C; --nili:#00758B; --nili-tint:#94C3C8; --nili-wash:#D1E4E1; --fooladi-deep:#235323; --fooladi:#467342; --fooladi-tint:#B1C2A9; --fooladi-wash:#DEE3D4; --boronz-deep:#63420F; --boronz:#856131; --boronz-tint:#CCBBA2; --boronz-wash:#E9E0D1; /* زر — scripture only. The page's own gold, at full strength. */ --zar: #B08434; --zar-deep: #6B4E18; --zar-line: #CAA052; --zar-wash: #FAF3E4; /* the active pigment — every page sets these via a collection class */ --c-deep: var(--lajvard-deep); --c: var(--lajvard); --c-tint: var(--lajvard-tint); --c-wash: var(--lajvard-wash); /* type scale — Persian-tuned (Estedad), generous leading for long reading */ --fs-display: clamp(30px, 5.2vw, 42px); --fs-h1: clamp(23px, 3.4vw, 29px); --fs-h2: 21px; --fs-h3: 17.5px; --fs-body: 17px; --lh-body: 1.95; --fs-side: 14.5px; --fs-meta: 13px; --fs-micro: 11.5px; --fs-ayah: 24px; --lh-ayah: 2.3; --fs-tr: 15.5px; --measure: 42rem; /* ~68 Persian chars at 17px */ --rail: 19rem; /* rhythm */ --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s5:34px; --s6:54px; --radius:10px; --radius-lg:16px; --shadow: 0 1px 2px rgba(38,33,25,.05), 0 8px 28px -12px rgba(38,33,25,.14); --ff: 'Estedad','Inter',system-ui,sans-serif; --ff-latin:'Inter','Estedad',sans-serif; /* Quranic Arabic: propose Amiri/Scheherazade as the canonical face; Estedad carries it faithfully until the face is adopted. Never re-type the text. */ --ff-ayah:'Amiri','Scheherazade New','Estedad',serif; } /* collection switches — one class on recolours the whole page */ .c-tafsir {--c-deep:var(--lajvard-deep); --c:var(--lajvard); --c-tint:var(--lajvard-tint); --c-wash:var(--lajvard-wash)} .c-adyan {--c-deep:var(--zangar-deep);--c:var(--zangar);--c-tint:var(--zangar-tint);--c-wash:var(--zangar-wash)} .c-ravan {--c-deep:var(--nili-deep);--c:var(--nili);--c-tint:var(--nili-tint);--c-wash:var(--nili-wash)} .c-mawzuat {--c-deep:var(--fooladi-deep);--c:var(--fooladi);--c-tint:var(--fooladi-tint);--c-wash:var(--fooladi-wash)} .c-sokhan {--c-deep:var(--boronz-deep); --c:var(--boronz); --c-tint:var(--boronz-tint); --c-wash:var(--boronz-wash)} /* ---------- night reading ---------------------------------------------- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ /* the same palette after dark: the navy becomes the ground and the ink becomes a warm off-white, so the gold still reads as the page's gold */ --paper:#131722; --paper-deep:#0F131C; --paper-mid:#161B27; --paper-high:#1A1F2C; --ink:#E6E4DC; --ink-soft:#AFB3C2; --ink-faint:#7C8296; --line:rgba(202,160,82,.26); --line-strong:rgba(202,160,82,.44); --line-cool:rgba(190,200,225,.13); --n-100:#C9D2E8; --n-200:#B3BEDA; --n-300:#9AA7C9; --n-400:#8391B8; --n-500:#6E7CA6; --n-600:#5B6892; --n-700:#4A557B; --n-800:#3A4365; --n-900:#2C344F; --g-100:#F0E4C8; --g-200:#E2CFA2; --g-300:#CFB477; --g-400:#B99553; --g-500:#96773B; --g-600:#71592A; --g-700:#4E3D1D; --lajvard-deep:#214981; --lajvard:#4A689F; --lajvard-tint:#B3BED0; --lajvard-wash:#DEE1E5; --zangar-deep:#7C2E41; --zangar:#9D5060; --zangar-tint:#D6B4B6; --zangar-wash:#EDDDD9; --nili-deep:#00556C; --nili:#00758B; --nili-tint:#94C3C8; --nili-wash:#D1E4E1; --fooladi-deep:#235323; --fooladi:#467342; --fooladi-tint:#B1C2A9; --fooladi-wash:#DEE3D4; --boronz-deep:#63420F; --boronz:#856131; --boronz-tint:#CCBBA2; --boronz-wash:#E9E0D1; --zar:#CAA052; --zar-deep:#E2C070; --zar-line:#8A6B2A; --zar-wash:#221C10; --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.55); } /* pigments invert in the dark: bands go light, so their text goes ink */ :root:not([data-theme="light"]) .sarlouh{color:#171410} :root:not([data-theme="light"]) .sarlouh .kicker{background:rgba(23,20,16,.10);border-color:rgba(23,20,16,.28)} :root:not([data-theme="light"]) .matn h2 .no, :root:not([data-theme="light"]) .ayah-head .cite, :root:not([data-theme="light"]) .btn, :root:not([data-theme="light"]) .pl-btn.main, :root:not([data-theme="light"]) .pl-row.playing .pl-no{color:#171410} } :root[data-theme="dark"]{ /* the same palette after dark: the navy becomes the ground and the ink becomes a warm off-white, so the gold still reads as the page's gold */ --paper:#131722; --paper-deep:#0F131C; --paper-mid:#161B27; --paper-high:#1A1F2C; --ink:#E6E4DC; --ink-soft:#AFB3C2; --ink-faint:#7C8296; --line:rgba(202,160,82,.26); --line-strong:rgba(202,160,82,.44); --line-cool:rgba(190,200,225,.13); --n-100:#C9D2E8; --n-200:#B3BEDA; --n-300:#9AA7C9; --n-400:#8391B8; --n-500:#6E7CA6; --n-600:#5B6892; --n-700:#4A557B; --n-800:#3A4365; --n-900:#2C344F; --g-100:#F0E4C8; --g-200:#E2CFA2; --g-300:#CFB477; --g-400:#B99553; --g-500:#96773B; --g-600:#71592A; --g-700:#4E3D1D; --lajvard-deep:#214981; --lajvard:#4A689F; --lajvard-tint:#B3BED0; --lajvard-wash:#DEE1E5; --zangar-deep:#7C2E41; --zangar:#9D5060; --zangar-tint:#D6B4B6; --zangar-wash:#EDDDD9; --nili-deep:#00556C; --nili:#00758B; --nili-tint:#94C3C8; --nili-wash:#D1E4E1; --fooladi-deep:#235323; --fooladi:#467342; --fooladi-tint:#B1C2A9; --fooladi-wash:#DEE3D4; --boronz-deep:#63420F; --boronz:#856131; --boronz-tint:#CCBBA2; --boronz-wash:#E9E0D1; --zar:#CAA052; --zar-deep:#E2C070; --zar-line:#8A6B2A; --zar-wash:#221C10; } :root[data-theme="dark"] .sarlouh, :root[data-theme="dark"] .plate, :root[data-theme="dark"] .matn h2 .no, :root[data-theme="dark"] .ayah-head .cite, :root[data-theme="dark"] .btn, :root[data-theme="dark"] .pl-btn.main, :root[data-theme="dark"] .pl-row.playing .pl-no{color:#171410} :root[data-theme="dark"] .sarlouh .kicker{background:rgba(23,20,16,.10);border-color:rgba(23,20,16,.28)} /* ---------- base -------------------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink); font:400 var(--fs-body)/var(--lh-body) var(--ff); direction:rtl;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0;font-family:var(--ff)} p{margin:0 0 1.05em} a{color:var(--c);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px} :focus-visible{outline:2.5px solid var(--c);outline-offset:2px;border-radius:3px} ::selection{background:var(--c-tint);color:var(--ink)} .num,[dir="ltr"].num{font-variant-numeric:tabular-nums} .latin{font-family:var(--ff-latin);direction:ltr;unicode-bidi:isolate} /* ============================================================================ COMPONENTS ========================================================================= */ /* --- سرلوح · the page frontispiece band --------------------------------- */ .sarlouh{background:linear-gradient(165deg, color-mix(in oklab, var(--c) 88%, var(--n-100)) 0%, var(--c-deep) 58%, color-mix(in oklab, var(--c-deep) 82%, var(--n-100)) 100%); color:#FBF6EC;position:relative;overflow:hidden} .sarlouh::after{ /* woven double rule at the base — the جدول of the page */ content:"";position:absolute;inset-inline:0;bottom:0;height:7px; background: linear-gradient(0deg, var(--zar) 0 2px, transparent 2px 4px, color-mix(in oklab, var(--zar-line) 70%, transparent) 4px 5px, transparent 5px); } .sarlouh-in{max-width:72rem;margin-inline:auto;padding:26px clamp(18px,4vw,44px) 30px} .crumbs{display:flex;gap:8px;align-items:center;font-size:var(--fs-meta);opacity:.85;margin-bottom:14px;flex-wrap:wrap} .crumbs a{color:inherit;font-weight:500} .crumbs .sep{opacity:.5} .sarlouh h1{font-size:var(--fs-h1);font-weight:700;line-height:1.65;max-width:56rem;letter-spacing:-.01em} .sarlouh .kicker{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-meta); font-weight:600;background:rgba(251,247,238,.14);border:1px solid rgba(251,247,238,.25); padding:4px 13px;border-radius:999px;margin-bottom:13px} .sarlouh .meta{margin-top:12px;font-size:var(--fs-meta);opacity:.82;display:flex;gap:18px;flex-wrap:wrap} .sarlouh .meta b{font-weight:600;opacity:1} /* collection identity chip (used everywhere) */ .qalam{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-micro);font-weight:600; color:var(--c-deep);background:var(--c-wash);border:1px solid var(--c-tint); padding:3px 11px;border-radius:999px;white-space:nowrap} .qalam::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c);flex:none} .qalam.q-tafsir {color:var(--lajvard-deep);background:var(--lajvard-wash);border-color:var(--lajvard-tint)} .qalam.q-tafsir::before{background:var(--lajvard)} .qalam.q-adyan {color:var(--zangar-deep);background:var(--zangar-wash);border-color:var(--zangar-tint)} .qalam.q-adyan::before{background:var(--zangar)} .qalam.q-ravan {color:var(--nili-deep);background:var(--nili-wash);border-color:var(--nili-tint)} .qalam.q-ravan::before{background:var(--nili)} .qalam.q-mawzuat {color:var(--fooladi-deep);background:var(--fooladi-wash);border-color:var(--fooladi-tint)} .qalam.q-mawzuat::before{background:var(--fooladi)} .qalam.q-sokhan {color:var(--boronz-deep);background:var(--boronz-wash);border-color:var(--boronz-tint)} .qalam.q-sokhan::before{background:var(--boronz)} /* --- layout: reading page = body column + scholarly rail ---------------- */ .page{max-width:72rem;margin-inline:auto;padding:0 clamp(18px,4vw,44px) var(--s6)} /* the rail (TOC + apparatus) sits at the START side — the RIGHT in RTL (owner request: vertical menus/lists on the right). Rail takes grid column 1 via order. */ .reading{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:clamp(24px,4vw,56px); align-items:start;padding-top:var(--s5)} @media (max-width:64rem){.reading{grid-template-columns:1fr}.rail{position:static}} .rail{order:-1;position:sticky;top:18px;max-height:calc(100vh - 36px);overflow:auto; display:flex;flex-direction:column;gap:var(--s4);scrollbar-width:thin} /* --- فهرست · TOC panel --------------------------------------------------- */ .tocx{background:var(--paper-high);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow);overflow:hidden} .tocx > h2{font-size:var(--fs-meta);font-weight:700;color:var(--c-deep); background:linear-gradient(180deg,var(--c-wash),color-mix(in oklab,var(--c-wash) 55%,var(--paper-mid)));border-bottom:1px solid var(--line); padding:10px 16px;display:flex;gap:8px;align-items:center} .tocx ol{list-style:none;margin:0;padding:8px 0;counter-reset:toc} .tocx li{counter-increment:toc} .tocx a{display:flex;gap:11px;align-items:baseline;padding:6.5px 16px; font-size:var(--fs-side);line-height:1.6;color:var(--ink-soft)} .tocx a::before{content:counter(toc, persian);font-size:var(--fs-micro);font-weight:600; color:var(--c);min-width:1.35em;text-align:center;background:var(--c-wash); border-radius:6px;padding:1px 0;transform:translateY(-1px)} .tocx a:hover{background:var(--paper-deep);color:var(--ink);text-decoration:none} .tocx a.now{color:var(--c-deep);font-weight:600;background:var(--c-wash)} /* --- دستگاهِ ارجاع · reference apparatus -------------------------------- */ .appx{background:var(--paper-high);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow);overflow:hidden} .appx > h2{font-size:var(--fs-meta);font-weight:700;color:var(--ink-soft); border-bottom:1px solid var(--line);padding:10px 16px;background:var(--paper-deep)} .appx ol{list-style:none;margin:0;padding:6px 0} .appx a{display:block;padding:8px 16px} .appx a:hover{background:var(--paper-deep);text-decoration:none} .appx .t{display:block;font-size:var(--fs-side);font-weight:600;color:var(--ink)} .appx .m{display:block;font-size:var(--fs-micro);color:var(--ink-faint);margin-top:2px;line-height:1.7} /* --- the transcript body ------------------------------------------------- */ .matn{max-width:var(--measure)} .matn > p{text-align:justify;hyphens:auto} .matn .lede{font-size:15px;color:var(--ink-faint);border-inline-start:3px solid var(--c-tint); padding:2px 14px 2px 0;margin-bottom:var(--s5)} /* rubricated section heading — the shangarf move */ .matn h2{font-size:var(--fs-h2);font-weight:700;color:var(--c-deep); margin:var(--s6) 0 var(--s3);line-height:1.6;display:flex;gap:13px;align-items:baseline; scroll-margin-top:24px} .matn h2 .no{flex:none;font-size:13px;font-weight:700;color:var(--paper); background:var(--c);border-radius:7px;padding:2px 9px;transform:translateY(-3px)} .matn h2::after{content:"";flex:1;height:1px;background:var(--line-strong);opacity:.6;transform:translateY(-6px)} /* --- بیتِ قرآن · the scripture block ------------------------------------ */ /* Gold frame, ink text. The only gold on the site. */ .ayah{background:var(--zar-wash);border:1px solid var(--zar-line);border-radius:4px; margin:var(--s5) 0;position:relative;box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--zar-line);page-break-inside:avoid;break-inside:avoid} .ayah-in{padding:22px 28px 18px} .ayah-head{display:flex;justify-content:space-between;align-items:center;gap:12px; margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--zar-line)} .ayah-head .tag{display:flex;align-items:center;gap:9px;font-size:var(--fs-micro); font-weight:700;color:var(--zar-deep)} .ayah-head .tag::before{content:"۞";font-size:19px;line-height:1;color:var(--zar)} .ayah-head .cite{font-size:var(--fs-meta);font-weight:700;color:var(--paper); background:var(--zar);padding:2.5px 13px;border-radius:999px} .ayah-ar{font-family:var(--ff-ayah);font-size:var(--fs-ayah);line-height:var(--lh-ayah); color:var(--ink);text-align:justify;margin:0} .ayah-sep{display:flex;align-items:center;gap:10px;margin:15px 0 12px;color:var(--zar)} .ayah-sep::before,.ayah-sep::after{content:"";flex:1;height:1px;background:var(--zar-line)} .ayah-sep span{font-size:var(--fs-micro);font-weight:600;color:var(--zar-deep)} .ayah-fa{font-size:var(--fs-tr);line-height:2;color:var(--ink-soft);text-align:justify;margin:0} /* --- گیومهٔ گفتار · inline speech / aside -------------------------------- */ .matn .hazerin{background:var(--paper-deep);border-inline-start:3px solid var(--line-strong); border-radius:8px;padding:10px 16px;font-size:15.5px;color:var(--ink-soft)} /* --- audio playlist (series page) ---------------------------------------- */ .playlist{background:var(--paper-high);border:1px solid var(--line);border-radius:var(--radius-lg); overflow:hidden;box-shadow:var(--shadow)} .pl-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center; padding:13px 18px;border-bottom:1px solid var(--line)} .pl-row:last-child{border-bottom:0} .pl-row:nth-child(even){background:var(--paper)} .pl-row:hover{background:var(--c-wash)} .pl-row.playing{background:var(--c-wash);box-shadow:inset 3px 0 0 var(--c)} .pl-no{width:34px;height:34px;border-radius:9px;background:var(--c-wash);color:var(--c-deep); font-weight:700;font-size:14px;display:grid;place-items:center;border:1px solid var(--c-tint)} .pl-row.playing .pl-no{background:var(--c);color:var(--paper);border-color:var(--c)} .pl-t{min-width:0} .pl-t .t{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.6} .pl-t .m{font-size:var(--fs-micro);color:var(--ink-faint);margin-top:2px;display:flex;gap:12px} .pl-act{display:flex;gap:7px;align-items:center} .pl-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--c-tint); background:var(--paper-high);color:var(--c-deep);display:grid;place-items:center;cursor:pointer} .pl-btn.main{background:var(--c);border-color:var(--c);color:var(--paper)} .pl-btn:hover{background:var(--c-deep);border-color:var(--c-deep);color:var(--paper)} .pl-btn svg{width:15px;height:15px;fill:currentColor} /* tab bar as archive folder tabs */ /* No row-reverse. The document is already RTL, so a plain flex row starts at the RIGHT — DOM order IS visual order. Reversing it put پخش صوتی, which the owner wants first, at the far LEFT of the four tabs. */ .tabsx{display:flex;gap:6px;padding:0 6px;margin-bottom:-1px;position:relative;z-index:2; justify-content:flex-start;overflow-x:auto} .tabx{font:600 14.5px/1 var(--ff);color:var(--ink-faint);background:var(--paper-deep); border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0; padding:11px 20px 12px;cursor:pointer;white-space:nowrap} .tabx:hover{color:var(--ink)} .tabx.on{background:var(--paper-high);color:var(--c-deep);font-weight:700; box-shadow:inset 0 3px 0 var(--c)} .panex{background:var(--paper-high);border:1px solid var(--line); border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);padding:clamp(16px,3vw,30px)} /* --- reference page pieces ----------------------------------------------- */ .idcard{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center} .idcard .face{width:108px;height:108px;border-radius:14px;object-fit:cover; border:3px solid var(--paper-high);box-shadow:var(--shadow)} .statrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s4)} .stat{background:var(--paper-high);border:1px solid var(--line);border-radius:12px; padding:10px 18px;text-align:center;min-width:96px} .stat b{display:block;font-size:21px;font-weight:800;color:var(--c-deep)} .stat span{font-size:var(--fs-micro);color:var(--ink-faint)} /* حضور · presence ribbon: distribution across the five collections */ .ribbon{display:flex;height:16px;border-radius:999px;overflow:hidden;border:1px solid var(--line-strong)} .ribbon i{display:block;height:100%} .rb-tafsir{background:var(--lajvard)} .rb-adyan{background:var(--zangar)} .rb-ravan{background:var(--nili)} .rb-mawzuat{background:var(--fooladi)} .rb-sokhan{background:var(--boronz)} .ribbon-leg{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;font-size:var(--fs-micro);color:var(--ink-soft)} .ribbon-leg i{display:inline-block;width:9px;height:9px;border-radius:2.5px;margin-inline-start:5px;transform:translateY(1px)} /* aspect table */ .aspects{width:100%;border-collapse:collapse;font-size:var(--fs-side)} .aspects th{font-size:var(--fs-micro);font-weight:700;color:var(--ink-faint);text-align:right; padding:8px 12px;border-bottom:2px solid var(--line-strong)} .aspects td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .aspects .bar{height:7px;border-radius:999px;background:var(--paper-deep);overflow:hidden;min-width:120px} .aspects .bar i{display:block;height:100%;border-radius:999px;background:var(--c)} /* session hit rows (deep links into transcripts) */ .hits{list-style:none;margin:0;padding:0} .hits li{border-bottom:1px solid var(--line)} .hits a{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:10px 6px} .hits a:hover{background:var(--c-wash);text-decoration:none} .hits .no{font-size:var(--fs-micro);font-weight:700;color:var(--c-deep);background:var(--c-wash); border:1px solid var(--c-tint);border-radius:6px;padding:2px 9px} .hits .t{font-size:var(--fs-side);color:var(--ink)} .hits .go{font-size:var(--fs-micro);color:var(--ink-faint)} /* --- hub: collection bookplates ------------------------------------------ */ .plates{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .plate{border-radius:var(--radius-lg);padding:24px 24px 20px;color:#FBF6EC;position:relative; overflow:hidden;display:flex;flex-direction:column;gap:6px;min-height:168px; box-shadow:var(--shadow);transition:transform .16s ease} .plate:hover{transform:translateY(-3px);text-decoration:none} .plate h2{font-size:19px;font-weight:800;line-height:1.5} .plate .desc{font-size:var(--fs-meta);opacity:.8;line-height:1.8} .plate .count{margin-top:auto;display:flex;align-items:baseline;gap:8px} .plate .count b{font-size:36px;font-weight:800;line-height:1} .plate .count span{font-size:var(--fs-micro);opacity:.75} .plate::after{content:"";position:absolute;inset-inline-end:-34px;top:-34px;width:120px;height:120px; border-radius:50%;background:rgba(251,247,238,.09)} .p-tafsir{background:linear-gradient(160deg,var(--lajvard) 0%,var(--lajvard-deep) 90%)} .p-adyan{background:linear-gradient(160deg,var(--zangar) 0%,var(--zangar-deep) 90%)} .p-ravan{background:linear-gradient(160deg,var(--nili) 0%,var(--nili-deep) 90%)} .p-mawzuat{background:linear-gradient(160deg,var(--fooladi) 0%,var(--fooladi-deep) 90%)} .p-sokhan{background:linear-gradient(160deg,var(--boronz) 0%,var(--boronz-deep) 90%)} @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .plate{color:#171410} } /* --- گاه‌شمار · 23-year timeline ----------------------------------------- */ .gahshomar{border-inline-start:2.5px solid var(--line-strong);padding-inline-start:26px;position:relative} .g-year{position:relative;margin:26px 0 10px;display:flex;align-items:center;gap:12px} .g-year b{font-size:16px;font-weight:800;color:var(--ink)} .g-year::before{content:"";position:absolute;inset-inline-start:-33.5px;width:13px;height:13px; border-radius:50%;background:var(--paper);border:3px solid var(--ink-soft)} .g-year .place{font-size:var(--fs-micro);color:var(--ink-faint)} .g-item{display:grid;grid-template-columns:4px 1fr auto;gap:13px;align-items:center; padding:7px 12px;margin:3px 0;border-radius:9px; background:color-mix(in srgb, var(--gc, var(--c)) 16%, var(--paper-high)); border:1px solid color-mix(in srgb, var(--gc, var(--c)) 22%, var(--paper-high))} .g-item:hover{background:color-mix(in srgb, var(--gc, var(--c)) 15%, var(--paper-high)); text-decoration:none; border-color:color-mix(in srgb, var(--gc, var(--c)) 44%, var(--paper-high))} .g-item i{display:block;width:4px;height:22px;border-radius:2px} .g-item .t{font-size:var(--fs-side);font-weight:600;color:var(--ink)} .g-item .m{font-size:var(--fs-micro);color:var(--ink-faint);white-space:nowrap} .gi-tafsir{--gc:var(--lajvard)} .gi-adyan{--gc:var(--zangar)} .gi-ravan{--gc:var(--nili)} .gi-mawzuat{--gc:var(--fooladi)} .gi-sokhan{--gc:var(--boronz)} .g-item i{background:var(--gc, var(--c))} /* --- misc ---------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--ff); color:var(--paper);background:var(--c);border:1px solid var(--c);border-radius:10px; padding:10px 20px;cursor:pointer} .btn:hover{background:var(--c-deep);text-decoration:none} .btn.ghost{background:transparent;color:var(--c-deep)} .footerx{border-top:1px solid var(--line);margin-top:var(--s6);padding:22px 0 30px; font-size:var(--fs-micro);color:var(--ink-faint);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} /* --- print --------------------------------------------------------------- */ @media print{ :root{--paper:#fff;--paper-high:#fff;--paper-deep:#f6f2ea} body{font-size:11pt;line-height:1.8} .rail,.tabsx,.pl-act,.btn,.crumbs{display:none!important} .sarlouh{background:#fff;color:#000;border-bottom:2.5pt solid #000} .sarlouh::after{display:none} .matn h2{color:#000} .ayah{box-shadow:none;border:1.5pt solid #8a6d1e} .ayah,.playlist,.stat,table{page-break-inside:avoid;break-inside:avoid} .matn{max-width:none} a{color:inherit} }