/* === shangarf.css === */ /* ============================================================================ شنگرف — 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{ color-scheme:light; /* ── 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: #727483; /* 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)} :is(.c-tafsir,.c-adyan,.c-ravan,.c-mawzuat,.c-sokhan){ --accent:var(--c-deep); --accent-soft:color-mix(in srgb,var(--c-deep) 12%,var(--paper-high)); } /* ---------- نخودی — the middle ground ----------------------------------- The default page is already a warm cream; this is the same page one step further into the paper, for the long session in a bright room where the white end of the cream starts to glare. It is not a second palette: only the ground, the rule and the two ink softenings move, so every collection colour, the gold and the ayah block are inherited from the light theme untouched. Ink stays the navy-slate — a brown-black ink on a deeper cream is what makes this kind of theme look like aged newsprint instead of paper. */ :root[data-theme="sepia"]{ color-scheme:light; --paper: #F4E9D2; --paper-deep: #E9DBBE; --paper-mid: #EFE3C9; --paper-high: #FAF2E1; --ink: #2A3044; /* 10.4:1 on --paper */ --ink-soft: #565C74; /* 5.4:1 */ --ink-faint: #6E7082; /* 3.1:1 — large/secondary only, as in light */ --line: rgba(150,110,40,.34); --line-strong:rgba(150,110,40,.56); --line-cool: rgba(21,41,78,.14); /* bridge private family tokens (ravankavi --surface etc.) to the theme */ --surface:var(--paper-high); --surface-2:var(--paper-mid); --ink-2:var(--ink-soft); --muted:var(--ink-soft); --faint:var(--ink-faint); --line-2:var(--line-strong); } /* ---------- night reading ---------------------------------------------- */ :root[data-theme="dark"]{ color-scheme: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; /* bridge private family tokens (ravankavi --surface etc.) to the theme */ --surface:var(--paper-high); --surface-2:var(--paper-mid); --ink-2:var(--ink-soft); --muted:var(--ink-soft); --faint:var(--ink-faint); --line-2:var(--line-strong); } :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:normal;} .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%)} /* --- گاه‌شمار · 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} } /* ════════ palette swap — owner 2026-07-23 ════════════════════════════════ تفسیرِ سوره‌ها ⇄ روانکاوی و فرهنگ. تفسیر takes روانکاوی's current teal; روانکاوی becomes a light violet in the tone of the other collections. Done at the palette level (both themes) so every sub-page — series, متن, timeline box, index — follows automatically. */ :root,:root[data-theme="dark"]{ --lajvard-deep:#00556C; --lajvard:#00758B; --lajvard-tint:#94C3C8; --lajvard-wash:#D1E4E1; --nili-deep:#4A3A80; --nili:#6E57AC; --nili-tint:#C7BDE0; --nili-wash:#E8E3F3; } /* the series/متن pages also carry surah/styles.css's own theme var --navy (progress bar, some accents), hardcoded per t-* class. Remap the two swapped collections there too so nothing stays the old navy/rust. */ .t-lajvard{--navy:#00556C;--navy-2:#00758B;--navy-deep:#003D4E;--navy-rgb:0,85,108} .t-rust{--navy:#4A3A80;--navy-2:#6E57AC;--navy-deep:#38295F;--navy-rgb:74,58,128} /* player chrome takes the page's own collection colour (a dark shade of it), not the fixed navy it shipped with — «رنگِ پلیر همرنگِ صفحات». Derived from --c-deep so it follows the tafsir⇄ravankavi swap and every other collection. !important beats surah/styles.css's per-theme --pl-* blocks. */ body:is(.c-tafsir,.c-adyan,.c-ravan,.c-mawzuat,.c-sokhan){ /* a HINT of the collection on near-black — the saturated mix read as loud */ --pl-card:color-mix(in srgb,var(--c-deep) 26%,#0A0F16)!important; --pl-frame:color-mix(in srgb,var(--c-deep) 16%,#070B10)!important; --pl-badge:var(--c-deep)!important; } /* the fixed now-playing bar hardcodes #16263e navy — tie it to the collection too */ .npbar{background:color-mix(in srgb,var(--c-deep) 26%,#0A0F16)!important} .np-pp{color:var(--c-deep)!important} /* آیهٔ قرآن: lighter weight — it shipped at 700 (bold) near-black, which reads heavy; a regular weight is airier and closer to a Naskh setting. Text itself is never touched (R7), only the weight. */ .quran-ar,.ayah-ar,.matn-body .quran-ar{font-weight:400!important} /* ══ روانکاوی hub → shangarf template + the new purple (content unchanged) ══ ravankavi/assets/styles.css keeps its own private vars; shangarf already overrides the shared ones (paper/ink/line). Bridge the rest to shangarf tokens (per-thinker identity colours stay), then dress the masthead as a سرلوح band and tidy the section heads. Scoped to c-ravan. */ body.c-ravan{ --surface:var(--paper-high);--surface-2:var(--paper-mid); --ink-2:var(--ink-soft);--muted:var(--ink-soft);--faint:var(--ink-faint); --line-2:var(--line-strong); --accent:var(--c);--accent-soft:var(--c-wash); --shadow-sm:var(--shadow); } /* light purple box + dark-purple text (owner: بنفشِ کم‌رنگ متناسبِ فهرست‌ها، فونت بنفشِ تیره) — matches the section-index row washes. */ body.c-ravan .mast{ background:var(--c-wash); color:var(--c-deep);border:1px solid var(--c-tint);border-radius:16px;overflow:hidden; padding:24px clamp(18px,4vw,30px) 22px;margin:16px 0 10px;box-shadow:var(--shadow-sm)} body.c-ravan .mast h1{color:var(--c-deep)} body.c-ravan .mast .kick{color:var(--c)} body.c-ravan .mast .sub{color:var(--c-deep)} body.c-ravan .mast .byl{color:var(--c-deep);border-top-color:var(--c-tint)} body.c-ravan .mast .pill{background:var(--paper-high);border-color:var(--c-tint);color:var(--c-deep)} body.c-ravan .mast .pill .n{color:var(--c-deep)} body.c-ravan h2.sec{color:var(--c-deep)} body.c-ravan h2.sec .n{color:var(--c)} /* the relocated نقشهٔ جلسات bar wears the collection colour on its strip */ body.c-ravan a[href="/ravankavi/sessions.html"].tcard .top{background:var(--c)} /* ══ FULL-WIDTH prose — owner hard rule (repeated): descriptive text must fill its box, never stop mid-width. The reading transcript (.matn measure) is the one deliberate exception. ══ */ .prose,.byl,.lead,.gloss,.mast .byl,.mast .sub,.site-speaker-sub, .page-head .lead,.catalog-head p,.tl-sub,.detail-note,.ses-note, .iz-note,.mast .meta-row{max-width:none!important} /* ══ متفکرها cards → a purple ramp, harmonised with the new روانکاوی colour (was a rainbow of per-thinker hues). Inline hex on the strips, so !important. ══ */ body.c-ravan a[href*="/thinkers/freud"] .top{background:#3A2C63!important} body.c-ravan a[href*="/thinkers/jung"] .top{background:#4A3A80!important} body.c-ravan a[href*="/thinkers/adler"] .top{background:#6E57AC!important} body.c-ravan a[href*="/thinkers/niet"] .top{background:#5A4795!important} body.c-ravan a[href*="/thinkers/lacan"] .top{background:#8574B8!important} body.c-ravan .tgrid .tcard .go{color:var(--c-deep)!important} /* the green «متنِ کامل» tag is now a real link to the transcript page */ .tag.t-ok.ses-textlink{cursor:pointer;text-decoration:none;transition:filter .14s} .tag.t-ok.ses-textlink:hover{filter:brightness(.92);text-decoration:none} /* ══ نقشهٔ جلسات — inline collapsible session list (owner: کشویی باز شود، جلسات زیرش، سطرها بنفشِ کم‌رنگ) ══ */ .sesmap-wrap{margin:0 0 22px} .sesmap-toggle{width:100%;display:block;font:inherit;color:inherit;text-align:inherit; cursor:pointer;-webkit-appearance:none;appearance:none;padding:0} .sesmap-toggle .rg{color:var(--c-deep)} .sm-chev{display:inline-block;transition:transform .2s;color:var(--c-deep);font-size:.85em} .sesmap-toggle.open .sm-chev{transform:rotate(180deg)} .sesmap-panel{margin-top:8px;display:grid;gap:5px;border:1px solid var(--c-tint); border-radius:12px;padding:10px;background:var(--paper-high); max-height:62vh;overflow:auto;scrollbar-width:thin} /* the class display:grid outranks the UA [hidden] rule, so the attribute must be re-hidden explicitly — otherwise the panel is always open and can't close. */ .sesmap-panel[hidden]{display:none} .smrow{display:grid;grid-template-columns:2.6rem 1fr auto;gap:11px;align-items:center; padding:9px 12px;border-radius:9px;text-decoration:none; background:var(--c-wash); border:1px solid color-mix(in srgb,var(--c) 20%,var(--paper-high)); transition:background .13s,border-color .13s} a.smrow:hover{background:color-mix(in srgb,var(--c) 26%,var(--paper-high)); border-color:color-mix(in srgb,var(--c) 42%,var(--paper-high));text-decoration:none} .smrow-nolink{opacity:.55} .smn{font-family:var(--ff-latin);font-weight:800;font-size:.82rem;text-align:center; color:var(--c-deep);font-variant-numeric:tabular-nums} .smt{font-size:.9rem;font-weight:600;color:var(--ink);min-width:0;line-height:1.5} .smgo{font-size:.82rem;color:var(--c-deep)} .smfull{display:block;text-align:center;margin-top:7px;padding:9px;font-size:.82rem; font-weight:700;color:var(--c-deep);text-decoration:none} .smfull:hover{text-decoration:underline;text-underline-offset:3px} /* ══ پلی‌لیست = the archive-row look, per collection — light wash + dark ink, NOT a dark card (owner, repeated: «رنگِ موضوع مثلِ فهرست درس‌گفتارها»). Overrides the dark --pl-card design directly on every series' playlist. ══ */ .pl-item{background:color-mix(in srgb,var(--c) 15%,var(--paper-high))!important; border:1px solid color-mix(in srgb,var(--c) 24%,var(--paper-high))!important;border-radius:12px} .pl-item.open{box-shadow:var(--shadow)!important} .pl-item.playing{background:color-mix(in srgb,var(--c) 24%,var(--paper-high))!important; border-color:color-mix(in srgb,var(--c) 42%,var(--paper-high))!important} .pl-num{background:color-mix(in srgb,var(--c) 30%,var(--paper-high))!important;color:var(--c-deep)!important} .pl-name{color:var(--ink)!important} /* owner QA 2026-07-24: the reading-desk toolbars were hidden here while the controls were half-built. RESTORED 2026-07-27 by owner instruction, after the T-03 rebuild gave them a real size / leading / theme axis. The blanket `.readbar,.readbar2{display:none!important}` used to live on this line; it beat reading-desk.css's `display:flex` regardless of load order, so the whole control set was unreachable on every page at every width. Visibility now belongs to reading-desk.css alone — do not re-add a hide here, or the two files will fight and this one always wins. */ .pl-play{background:transparent!important;color:var(--c-deep)!important; border-inline-start:1px solid color-mix(in srgb,var(--c) 24%,var(--paper-high))!important} .pl-play:hover,.pl-item.open .pl-play{background:color-mix(in srgb,var(--c) 16%,var(--paper-high))!important} /* the expanded audio widget, relit for the light card */ .pl-item.open .pl-body{border-top:1px solid color-mix(in srgb,var(--c) 22%,var(--paper-high))!important; background:color-mix(in srgb,var(--c) 7%,var(--paper-high))} .aud{color:var(--ink)!important} .aud-cur,.aud-rem{color:var(--ink-soft)!important} .aud-seek{background:color-mix(in srgb,var(--c) 28%,var(--paper-high))!important} .aud-seek::-webkit-slider-thumb{background:var(--c-deep)!important} .aud-seek::-moz-range-thumb{background:var(--c-deep)!important} .aud-dl{color:var(--ink-soft)!important}.aud-dl:hover{color:var(--c-deep)!important} .aud-rate{color:var(--ink-soft)!important;border-color:color-mix(in srgb,var(--c) 28%,var(--paper-high))!important} .aud-rate:hover{border-color:var(--c-tint)!important} /* header player: the play/pause button now sits at the far-left of the bar (owner), moved out of the transport cluster — give it breathing room. */ .np-r2 .np-pp.np-pp-main{margin-inline-start:6px} /* ±30 skip = plain text «-30» / «+30» (owner: no circles), sign on the left, Latin, LTR. */ .np-skip .sk-lbl{font:800 13.5px/1 var(--ff-latin);direction:ltr;letter-spacing:-.02em} .np-skip{min-width:38px} /* ══ متنِ جلسه — single column (SOLE layout owner as of 2026-07-25 phase 1) ══ The transcript's toc-panel + the 2-col grid pushed the body far down and drew the TOC as a bare numbered rail. Hide that sidebar TOC and flow one column; the section headings live in the text. A per-topic refs/TOC page comes later. Width/margin previously forced by mvp2-compat's grid rule; now owned here. */ body.mvp2-live main.matn-wrap, body.mvp2-live .matn-wrap.mvp2-reading{ display:block;grid-template-columns:none;grid-template-rows:none; width:min(1180px,calc(100% - 34px));max-width:none;margin:30px auto 60px;padding:0} body.mvp2-live main.matn-wrap .toc-panel, body.mvp2-live .matn-wrap.mvp2-reading .toc-panel{display:none} body.mvp2-live main.matn-wrap > *{max-width:var(--read-max,74rem);margin-inline:auto} body.mvp2-live main.matn-wrap .readbar2{max-width:var(--read-max,74rem);margin-inline:auto} body.mvp2-live main.matn-wrap .matn-lead{margin:0 auto 8px} body.mvp2-live main.matn-wrap .matn-body{margin-top:6px;min-width:0;width:auto;padding:0 0 30px} /* narrower list pages across the whole site (owner: «عرضِ فهرست‌ها کلاً کمتر، تمام صفحات») */ .page{max-width:46rem!important} /* matn heading aligned to the RIGHT with the body text — the flex rubric rule was offsetting the title text ~18px left, so it read as centred (owner). !important retained: mvp2-compat still sets colour/font-size on h2 and legacy surah/styles.css may reintroduce the flex-after rule. */ body.mvp2-live main.matn-wrap .matn-body h2{display:block!important;text-align:right!important;padding-inline:0!important} body.mvp2-live main.matn-wrap .matn-body h2::before, body.mvp2-live main.matn-wrap .matn-body h2::after{display:none!important} /* ════════════════════════════════════════════════════════════════════════ چکیدهٔ جلسه — the per-session abstract box Mounted under a playing session in the playlist and under a clicked row in the متنِ جلسات list. It borrows the page's collection colour for its frame, its key words and its terms, so it reads as part of the section rather than a generic callout. Prominent transcript shortcuts sit above AND below. ════════════════════════════════════════════════════════════════════════ */ .ck-box{margin:0;padding:16px 18px 14px; background:color-mix(in srgb,var(--c) 6%,var(--paper-high)); border:1px solid color-mix(in srgb,var(--c) 22%,var(--paper-high)); border-radius:12px} .pl-item .ck-box{margin:2px 12px 12px; background:color-mix(in srgb,var(--c) 4%,var(--paper-high))} /* ravankavi's rows own an accordion body already — the box rides inside it */ .ses-body .ck-box{margin:10px 0 4px; background:color-mix(in srgb,var(--c) 4%,var(--paper-high))} .ck-wrap{margin:0 0 7px;animation:ck-in .16s ease} @keyframes ck-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} /* every rule below is scoped under .ck-box on purpose: the series pages still load their legacy styles.css, whose `.pane h4`/`.pane p` (0,1,1) outrank a bare `.ck-h` (0,1,0) — the gold heading that leaked through on first build. */ .ck-box .ck-lede{margin:0;font-size:14.5px;line-height:2;color:var(--ink); text-align:justify} .ck-box .ck-key{font-weight:700;color:var(--c-deep)} .ck-box .ck-h{display:flex;align-items:center;gap:9px;margin:15px 0 7px; font-size:12.5px;font-weight:800;color:var(--c-deep);letter-spacing:-.01em} .ck-box .ck-h::after{content:"";flex:1;height:1px; background:color-mix(in srgb,var(--c) 26%,transparent)} .ck-box .ck-secs,.ck-box .ck-cons{margin:0;padding:0;list-style:none} .ck-box .ck-secs li,.ck-box .ck-cons li{position:relative;padding-inline-start:16px; margin:0 0 4px;font-size:13.5px;line-height:1.85;color:var(--ink-soft)} .ck-box .ck-secs li::before,.ck-box .ck-cons li::before{content:"";position:absolute; inset-inline-start:2px;top:.82em;width:5px;height:5px;border-radius:50%; background:color-mix(in srgb,var(--c) 55%,transparent)} .ck-box .ck-cons li{margin-bottom:6px} .ck-box .ck-term{color:var(--c-deep);font-weight:700} .ck-box .ck-note{color:var(--ink-soft)} .ck-box .ck-note::before{content:" — ";color:var(--ink-faint)} /* the way through to the transcript — the same button above and below */ .ck-box .ck-bar{display:flex;justify-content:center} .ck-box .ck-bar-t{margin:0 0 13px} .ck-box .ck-bar-b{margin:15px 0 2px} .ck-box .ck-go{display:inline-flex;align-items:center;gap:7px; padding:9px 20px;border-radius:999px;font-size:13px;font-weight:700; color:#FBF6EC;background:var(--c-deep);text-decoration:none; border:1px solid transparent;transition:background .14s,transform .16s ease} .ck-box .ck-go:hover{background:var(--c);text-decoration:none;transform:translateY(-1px)} /* a row that has an abstract shows it is openable */ .ses-row.ck-has{cursor:pointer} .ses-row.ck-on{background:color-mix(in srgb,var(--c) 13%,var(--paper-high)); border-color:color-mix(in srgb,var(--c) 38%,var(--paper-high))} @media (max-width:34rem){ .ck-box{padding:13px 14px 12px} .ck-lede{font-size:14px;line-height:1.95} .pl-item .ck-box{margin-inline:8px} } /* ════════════════════════════════════════════════════════════════════════ بازخوردِ مالک ۲۰۲۶-۰۷-۲۴ — عرضِ متن و اندازهٔ تیترها 1) The transcript column was 672px (--measure 42rem) under a 1105px title: the text read as half a page. The owner's rule now covers the transcript too — «عرض متنها همه جا هم‌ارز تیترها باشه» — so the reading measure is dropped and the body fills its wrapper, level with the heading above it. 2) Headings were oversized (the matn h1 hit 38px at 1280px). The whole type scale steps down; the two clamps that bypass the tokens are re-set here. ════════════════════════════════════════════════════════════════════════ */ /* ── 1 · متن هم‌عرضِ تیتر + سقفِ مشترک ───────────────────────────────── Phase-1 (2026-07-25): mvp2-compat no longer pins max-width/grid with !important, so the `html` specificity bump is no longer required against that sheet. Values unchanged (--read-max:74rem). A single rule replaces the old two-step (none → --read-max) cascade. */ :root{ --fs-display: clamp(25px, 3.9vw, 33px); --fs-h1: clamp(19px, 2.6vw, 24px); --fs-h2: 18px; --fs-h3: 16px; --read-max: 74rem; } body.mvp2-live main.matn-wrap > *, body.mvp2-live .matn-wrap .matn-body, body.mvp2-live main.matn-wrap .readbar2, .matn, .desk[data-rail="mini"] .matn, .desk[data-rail="off"] .matn{ max-width:var(--read-max);margin-inline:auto} /* h1 size: was forced via html+!important against mvp2-compat's larger clamp; compat no longer sets font-size, so a normal rule is enough. Keep !important only to beat any leftover surah/styles.css heading sizes. */ body.mvp2-live .s-head h1, body.mvp2-live .hero h1{font-size:clamp(1.2rem,2.1vw,1.55rem)!important} .idx-head h1,.hero h1{font-size:clamp(1.2rem,2.6vw,1.5rem)} .page-head h1,main:has(.catalog) h1{font-size:clamp(1.35rem,3vw,1.9rem)} .catalog-head h2{font-size:1.2rem} .mast h1{font-size:clamp(1.25rem,2.7vw,1.7rem)} /* the banner's own text takes the SAME ceiling, so title and body stay equal */ body.mvp2-live .s-head h1, body.mvp2-live .s-head .s-meta, body.mvp2-live .s-head .back{max-width:var(--read-max);margin-inline:auto} /* mobile: a comfortable gutter, never text on the glass edge */ @media (max-width:34rem){ body.mvp2-live .matn-wrap .matn-body{padding-inline:4px} body.mvp2-live main.matn-wrap{padding-inline:14px;width:min(100% - 24px,1180px)} } /* (سطرهای فشرده در shangarf-site.css است — آن فایل بعد از این بار می‌شود) */ /* ── تیترهای سرلوح وسط‌چین ─────────────────────────────────────────────── `.sarlouh h1` carries a 56rem measure but had no `margin-inline:auto`, so on any viewport wider than that measure the BOX sat flush to the RTL start and the centred text inside it read as pushed to the right — «منابعِ تکمیلی» on /resources/ was the visible case. Centring the box fixes every banner at once. (Only boxes narrower than their parent are affected; nothing else moves.) */ .sarlouh h1,.sarlouh .sub,.sarlouh .kicker,.sarlouh .lead, .mast h1,.mast .sub,.mast .kick, .page-head h1,.page-head .lead, .s-head h1,.s-head .s-meta{margin-inline:auto!important} /* === reading-desk.css === */ /* ============================================================================ دفترِ خواندن — Reading Desk Shangarf extension for long-form pages · Claude Design lane · 2026-07-19 The brief: a collapsible side index so the text can be read full-width, plus a font-size control. The reference (shahname.web.app) keeps one long list open beside the text — good, but it is binary: the list is either there, eating a third of the screen, or you lose your place entirely. This does three things it doesn't: 1. THREE RAIL STATES, not two. باز (full TOC + apparatus) → تیغه (a slim numbered spine that still shows where you are, and expands on hover) → بسته (gone; the text takes the full measure). The middle state is the point: you can reclaim ~85% of the rail's width and still never lose your position in an 11,000-word transcript. 2. THE INDEX KNOWS WHERE YOU ARE. An IntersectionObserver marks the section being read; the spine shows it as a filled pip, the open rail highlights the row, and a hairline progress bar under the header reports how far through the session you are. The reference list is inert by comparison. 3. TEXT SIZE IS A READING SETTING, not a zoom. Four steps scale the body, the ayah and the translation together on their own ratios — scripture keeps its dominance over prose at every step — while the chrome stays put. Every setting persists per-reader in localStorage. ========================================================================= */ /* ---------- reading settings: four text steps --------------------------- */ /* Prose only: 16→20. قلعهٔ آیه — the ayah block and its فولادوند translation are deliberately NOT on this ladder. They used to be (22→28 / 15→18), which meant the typography control resized scripture; the owner's ruling (2026-07-27) is that the reading controls must never touch the ayah. --fs-ayah / --lh-ayah / --fs-tr therefore keep the fixed values set in shangarf.css and are not restated here — restating them at this specificity is exactly how the ladder captured them the first time. */ :root[data-fs="1"]{--fs-body:16px} :root[data-fs="2"]{--fs-body:17px} :root[data-fs="3"]{--fs-body:18.5px} :root[data-fs="4"]{--fs-body:20px} /* ---------- reading settings: three leading steps ----------------------- */ /* Leading is its own axis, not a side effect of size. It used to ride along with the size ladder (1.9→2.05, a range too narrow to be worth having); a reader who wants air between the lines usually does not want larger glyphs as well. Step 2 is the previous default exactly, so an untouched reader sees no change. The ayah keeps --lh-ayah and is untouched here for the same reason as above. */ :root[data-lh="1"]{--lh-body:1.75} :root[data-lh="2"]{--lh-body:1.95} :root[data-lh="3"]{--lh-body:2.25} /* ---------- قلعهٔ آیه, part two: the المیزان boxes ---------------------- 117 pages (almizan/*, nazm-fehrest) carry their own inline