/* ============================================================================ nss-docs-l05.css — L05 «documents/reading»: слой чтения статей, хабов и первоисточников (namespaced: nssd-*). Подключается последним в . Все правила используют существующие токены темы (base.css / theme-light.css): --bg-1/--bg-2, --border/--border-strong, --text/--text-dim/--text-faint, --cyan, --radius-md — слой работает и в светлой (PT), и в тёмной теме. Без JS классы nssd-* на страницы не добавляются — вид не меняется. Слой НЕ трогает: vyshka-assistant, assistant-widget, nss-motion-lane1, nss-nav-lane1, pt-nav. ========================================================================== */ /* ---------- базовые якоря чтения ---------- Смещения якорей НЕ переопределяем: у сайта уже есть собственный набор (html{scroll-padding-top:110px} в nss-modern-20260925.css, :where([id]){scroll-margin-top:80px} в anim.css, section[id] в adaptive.css). Добавка своего scroll-padding дала бы двойное смещение. */ /* ---------- типографика длинного текста (мера строки ~60–75ch) ---------- min(): ch-метрика + жёсткий пиксельный потолок. В текущем шрифтовом стеке «0» широкий (72ch ≈ 772px), поэтому потолок 41rem (656px) держит меру строки в комфортном для чтения диапазоне. */ .nssd-body > p, .nssd-body > ul, .nssd-body > ol, .nssd-body > blockquote { max-width: min(72ch, 41rem); } .nssd-body { font-size: 1.03rem; } /* иерархия h1/h2/h3: без смены размеров фабрики — только ритм и якорная подсветка */ .nssd-body > h2 { margin-top: 2.6em; } .nssd-body > h3 { margin-top: 2em; } /* различение: тело / цитата / supplementary */ .nssd-body > blockquote { padding: 1rem 1.25rem; border-left: 3px solid var(--cyan); background: var(--bg-1); border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0; font-size: 1.05em; } .nssd-body > p small, .nssd-body .table-caption, .nssd-body .v-form-note { color: var(--text-faint); } /* подсветка целевого заголовка (:target и фокус) */ .nssd-body :is(h2, h3):target, .nssd-body :is(h2, h3):focus-visible, .nssd-body .nssd-flash { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 4px; } @keyframes nssd-flash-kf { 0% { background-color: var(--cyan-soft, rgba(0, 229, 255, .12)); } 100% { background-color: transparent; } } .nssd-body .nssd-flash { animation: nssd-flash-kf 1.6s ease-out 1; } /* ---------- сетка «оглавление + статья» (≥1024px) ---------- */ @media (min-width: 1024px) { .nssd-grid { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 2.75rem; align-items: start; } } /* ---------- оглавление ---------- */ .nssd-toc { font-size: .82rem; color: var(--text-dim); margin: 0 0 1.75rem; } @media (min-width: 1024px) { .nssd-toc { position: sticky; top: 7rem; margin: 0; max-height: calc(100vh - 9rem); overflow-y: auto; } } .nssd-toc__title { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .9rem; } .nssd-toc__toggle { display: none; width: 100%; min-height: 48px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md, 10px); background: var(--bg-2); color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; position: relative; } .nssd-toc__toggle::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--cyan); font-size: 1.3rem; font-weight: 400; } .nssd-toc__toggle[aria-expanded='true']::after { content: '−'; } @media (max-width: 1023.98px) { .nssd-toc__toggle { display: block; } .nssd-toc__list[hidden] { display: none; } .nssd-toc__title { display: none; } } .nssd-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-strong); } @media (max-width: 1023.98px) { .nssd-toc__list { margin-top: .6rem; padding: .4rem 0 .4rem .9rem; background: var(--bg-1); border-left: 2px solid var(--border-strong); border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0; } } .nssd-toc__item { margin: 0; } .nssd-toc__item > a, .nssd-toc__sub a { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 8px 10px 8px 14px; color: var(--text-dim); text-decoration: none; border-radius: 8px; position: relative; } .nssd-toc__item > a:hover, .nssd-toc__sub a:hover { color: var(--cyan); background: var(--bg-1); } .nssd-toc__item > a[aria-current='location'] { color: var(--cyan); font-weight: 600; } .nssd-toc__item > a[aria-current='location']::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: var(--cyan); } .nssd-toc__num { font-size: .64rem; color: var(--text-faint); font-variant-numeric: tabular-nums; flex: none; } .nssd-toc__label { overflow-wrap: anywhere; } .nssd-toc__sub { list-style: none; margin: 0; padding-left: .8rem; } .nssd-toc__item--h3 > a, .nssd-toc__sub a { font-size: .78rem; } .nssd-toc__foot { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--border-strong); } .nssd-toc__all { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--cyan); font-weight: 600; text-decoration: none; } .nssd-toc__all::after { content: '→'; } .nssd-toc__all:hover { text-decoration: underline; } /* ---------- блок «Первоисточник» ---------- */ .nssd-srcctx { position: relative; border: 1px solid var(--border-strong); border-left: 3px solid var(--cyan); border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0; background: var(--bg-1); padding: .9rem 1.1rem; margin: 1rem 0; } .nssd-srcctx:is(td, th) { border-radius: var(--radius-md, 10px); } .nssd-srcbadge { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: .35rem; } a.nssd-src-link { color: var(--cyan); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; } a.nssd-src-link::after { content: ' ↗'; font-size: .85em; } /* внутри таблицы — мягче: без карточки, только бейдж и ссылка */ td.nssd-srcctx, .nssd-srcctx td { border: 0; background: transparent; padding: inherit; } td.nssd-srcctx .nssd-srcbadge { margin-bottom: .15rem; } /* ---------- хаб-навигации (augment существующих) ---------- */ .nssd-hubnav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.5rem; } .nssd-hubnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 15px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-2); color: var(--text-dim); text-decoration: none; font-size: .85rem; } .nssd-hubnav a:hover { border-color: var(--cyan); color: var(--cyan); } .nssd-hubnav a[aria-current='location'] { border-color: var(--cyan); color: var(--cyan); font-weight: 600; } /* ---------- похожие материалы (оформление существующих списков) ---------- */ .nssd-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .nssd-related ul li { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); background: var(--bg-2); padding: .25rem .25rem .25rem 0; } .nssd-related ul li > a:first-child, .nssd-related ul li a { display: block; min-height: 44px; padding: 10px 16px; color: var(--text); font-weight: 600; text-decoration: none; } .nssd-related ul li a:hover { color: var(--cyan); } /* ---------- кнопка «Наверх» ---------- Размещение: справа внизу, НАД персонажем ВЫШКА (vya-root, зона ~64×68px у нижнего края). Ниже нельзя — там маскот; слева внизу — кнопка «Приостановить анимацию» (nss-mbtn-l1) и мобильный sticky-cta, пересекать их нельзя. */ .nssd-top { position: fixed; right: 1.25rem; bottom: 6.5rem; z-index: 60; min-width: 44px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-md, 10px); background: var(--glass-strong, var(--bg-2)); color: var(--text); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); } .nssd-top:hover { border-color: var(--cyan); color: var(--cyan); } .nssd-top[hidden] { display: none; } /* ---------- фокус ---------- */ .nssd-toc a:focus-visible, .nssd-toc__toggle:focus-visible, .nssd-top:focus-visible, .nssd-hubnav a:focus-visible, .nssd-related a:focus-visible, a.nssd-src-link:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; } /* ---------- мобильная/single-column адаптация (390/768) ---------- */ @media (max-width: 1023.98px) { .nssd-grid { display: block; } .nssd-toc { margin-bottom: 1.5rem; } } @media (max-width: 560px) { .nssd-body { font-size: 1rem; } .nssd-top { right: 1rem; bottom: 6rem; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .nssd-toc, .nssd-top, .nssd-hubnav a, .nssd-srcctx { transition: none !important; animation: none !important; } .nssd-body .nssd-flash { animation: none !important; } html { scroll-behavior: auto; } } /* ---------- печать ---------- */ @media print { .nssd-toc, .nssd-top, .nssd-hubnav { display: none !important; } .nssd-grid { display: block; } .nssd-body > p, .nssd-body > ul, .nssd-body > ol, .nssd-body > blockquote { max-width: none; } }