/* * فهرست مطالب مقاله (inc/article-toc.php) — نوار چیپ چسبان + دیالوگ فهرست کامل. * * هر قانون با :is(#nz-blog-content,body) و کلاس ریشهٔ دوبار تکرارشده شروع می‌شود تا * ویژگی شناسه داشته باشد و از قانون‌های .prose قالب ببرد. !important فقط جایی آمده که * خودِ قالب !important دارد (font-size/line-height روی p و div داخل .prose، و * font-family/font-size/font-weight روی nav و nav a و button از تنظیمات فونت پیشخوان — * inc/theme-settings.php «Menu Styles» و «Button Styles»). * رنگ متن لینک‌ها روی است، نه خودِ ، تا قانون‌های * «a {color … !important}» قالب/المنتور رنگ چیپ فعال را خراب نکنند. * * --zm-header-h را اسکریپت از ارتفاع واقعی #site-header می‌گذارد؛ اعداد زیر فقط پیش‌فرض‌اند. * --zm-gutter: فاصلهٔ کناری ستون مقاله روی موبایل (برای تمام‌عرض شدن نوار). * * Type scale (memory/persian-typography.md): every control and every list row is on the UI rung, * 16/1.75 weight 500, H3 rows included (the indent and the muted colour mark the level; 14px is * for meta, not for navigation people have to read). The dialog title is on the lead rung, 20/1.7. * Vazirmatn has real 400–700 faces (variant C, October 2026); the UI rung stays at 500. */ :root { --zm-header-h: 93px; --zm-toc-bar-h: 0px; } @media (max-width: 1023px) { :root { --zm-header-h: 80px; } } html:has(#zm-toc) { --zm-toc-bar-h: 57px; } @media (max-height: 500px) { html:has(#zm-toc) { --zm-toc-bar-h: 0px; } } /* Direct loads of #anchor (and old TOC+ links) land below the fixed header and the bar. */ html { scroll-padding-top: calc(var(--zm-header-h) + var(--zm-toc-bar-h) + 12px); } /* ---------- palette tokens (GROWTH-TEAL, October 2026) ---------- * Names follow the palette judge's :root block. Re-toned for variant C «گرافیت» (October 2026): * bar rgba(18,19,22,.94) = the page #121316 at 94%, worst case #202124 over a white logo; sheet * #1c1d21. Re-verified there: chip label 10.86:1 (9.41 worst), chip border 4.89:1 (3.39 worst, * focused), active label 8.41:1, ring 14.73:1, ring vs gap band 14.73:1 (C40 needs 9). * State layers are translucent and composite over whatever is behind them; states * do not stack and are written :hover → :focus-visible → :active. */ :is(#nz-blog-content, body) :is(.zm-toc.zm-toc, .zm-toc-sheet.zm-toc-sheet) { --zm-btn-outline-fg: #e6e7e9; --zm-btn-outline-border: #80838a; --zm-btn-outline-layer-hover: rgb(230 231 233 / 0.08); --zm-btn-outline-layer-focus: rgb(230 231 233 / 0.1); --zm-btn-outline-layer-pressed: rgb(230 231 233 / 0.1); --zm-btn-pill-fg: #d6d7da; --zm-btn-pill-border: #80838a; --zm-btn-pill-layer-hover: rgb(214 215 218 / 0.08); --zm-btn-pill-layer-focus: rgb(214 215 218 / 0.1); --zm-btn-pill-layer-pressed: rgb(214 215 218 / 0.1); --zm-chip-fg: #c4c6ca; --zm-chip-border: #80838a; --zm-chip-layer-hover: rgb(196 198 202 / 0.08); --zm-chip-layer-focus: rgb(196 198 202 / 0.1); --zm-chip-layer-pressed: rgb(196 198 202 / 0.1); --zm-chip-active-bg: #134e4a; --zm-chip-active-fg: #ccfbf1; --zm-chip-active-border: #2dd4c6; --zm-chip-active-bg-hover: #225c57; --zm-chip-active-bg-focus: #265f5b; --zm-chip-active-bg-pressed: #265f5b; --zm-focus: #99f6e4; --zm-focus-gap: #121316; } /* ---------- the sticky bar ---------- */ :is(#nz-blog-content, body) .zm-toc.zm-toc { position: sticky; top: var(--zm-header-h); z-index: 20; /* below the header (30) and the LBank bar (49) */ box-sizing: border-box; margin: 20px 0 8px; padding: 0; direction: rtl; background: rgba(18, 19, 22, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 0; border-bottom: 1px solid #2c2e33; transition: transform 0.22s ease, visibility 0.22s; /* the root is a