/* Start:/local/components/skbpa/docs.center/templates/.default/style.css?178942049116658*/ /* Documentation Center — shared design tokens + shell. Namespace: .skbpa-docs-*. Deliberately independent from Aspro theme CSS — reuses only the SKBPA brand accent (#e36d38, verified from local/templates/aspro-priority_2021/themes/CUSTOM_s1/colors.css). This stylesheet is linked ONLY from skbpa:docs.center/manual/quickstart templates, i.e. only on /manuals/* pages — so the two page-scoped overrides below can never leak onto any other page on the site. */ /* The theme (header.php) always wraps page content in a Bootstrap col-md-3 "left-menu-md" sidebar + col-md-9 "content-md" pair whenever $isMenu is true, regardless of whether anything actually renders inside the sidebar. Our router never populates it (CPriority::ShowPageType ('left_block') is never called), so it's always an empty reserved column pushing our own content right and narrow. SetPageProperty ("MENU","N") -- the theme's real, documented switch for this -- was tried first but $APPLICATION doesn't exist yet at the point in manuals/index.php where it would need to be set (confirmed empirically: header.php itself is what first brings $APPLICATION into scope on this route), so the empty column is collapsed here instead. */ .left-menu-md { display: none !important; } .content-md { width: 100% !important; float: none !important; } /* Same story for the theme's automatic

page-title block (local/templates/aspro-priority_2021/page_blocks/page_title_.php, triggered by SetTitle()) -- it would duplicate our own component's document header one line below it. / .page-top { display: none !important; } /* Defensive belt-and-suspenders against any future content forcing horizontal scroll (a flex/grid child without min-width:0, an oversized image, etc). A live scrollWidth-vs-clientWidth audit found NO actual overflow in our own content at the narrowest width this environment could render (headless Chrome here has a floor of ~500px effective viewport regardless of --window-size below that -- confirmed reproducible across bash, PowerShell, and both headless modes, so it's an environment characteristic, not a page bug). Harmless to keep as a safety net, and scoped to only-our-pages since this stylesheet only ever loads on /manuals/. / html, body { overflow-x: hidden; max-width: 100vw; } /* The Aspro theme sets body{overflow:hidden} sitewide (its own "mfixed_view_always" fixed-header mechanism -- is the real scrolling element, confirmed via document.scrollingElement === HTML; intentionally never scrolls on its own). That's invisible on every other /manuals/ page so far, but it breaks position:sticky on the full manual's TOC sidebar: a sticky element sticks relative to its NEAREST ancestor that establishes a scroll container, and ANY non-visible overflow value -- even just overflow-y -- makes an element qualify, regardless of whether it ever actually scrolls. Confirmed empirically over several rounds: setting only overflow-y:visible still computed as "auto", never "visible" -- the CSS Overflow spec forces overflow-y:visible to compute as auto whenever overflow-x is anything other than visible (which it is here, both from the theme's own rule and our own horizontal-safety rule above), and "auto" still establishes a scroll container. The only fix is overriding BOTH axes to true visible on body. html keeps clipping horizontal overflow on its own (confirmed above, still the real scrolling element), so this doesn't reopen the horizontal- overflow risk the safety net exists for. Scoped to /manuals/* only. / body { overflow: visible !important; } .skbpa-docs { --skbpa-accent: #e36d38; --skbpa-accent-dark: #b14819; --skbpa-accent-ink: #ffffff; --skbpa-bg: #faf9f7; --skbpa-surface: #ffffff; --skbpa-surface-2: #f4f2ef; --skbpa-ink: #211d19; --skbpa-ink-soft: #5c564d; --skbpa-ink-faint: #918a7d; --skbpa-line: #e7e2da; --skbpa-line-soft: #f0ece5; / Callout system (2026-08-19): NOTE / WARNING / IMPORTANT, all inside the brand palette (orange + dark grey + warm neutral) -- NOTE used to be a Bootstrap-style pale blue (#eaf1f5/#2f5c72), which reads as a foreign, un-branded "info" box on skbpa.ru. Three severities, one hue family, increasing saturation: NOTE is the calmest (warm neutral, same surface-2 tone used elsewhere on the page), WARNING is a soft amber, IMPORTANT is the strongest, tied directly to the site's own accent-dark. --skbpa-attention/-danger are kept only so older content using those class names still renders on-brand instead of breaking -- mapped onto the same warning/important tones rather than deleted. / --skbpa-note-bg: #f4f2ef; --skbpa-note-ink: #5c564d; --skbpa-warning-bg: #fdf1e2; --skbpa-warning-ink: #8a5a10; --skbpa-important-bg: #fbe0d1; --skbpa-important-ink: #b14819; --skbpa-attention-bg: #fdf1e2; --skbpa-attention-ink: #8a5a10; --skbpa-danger-bg: #fbe0d1; --skbpa-danger-ink: #b14819; / TYPE TOKENS (2026-09-07). This root used to declare -apple-system/"Segoe UI", which is a perfectly good stack and completely wrong here: the rest of skbpa.ru is Roboto, so every page this component renders -- the interactive manual, Quick Start, the Engineering Knowledge Base -- came out in a different face from the catalogue and the product cards a visitor had just left. Measured before the fix: 822 elements in Segoe UI on the manual page against 694 Roboto across the rest of the site. That, plus a typo'd 'oboto' in the Aspro base stylesheet, is what read as "too many fonts on one screen". Hierarchy is built from size and weight, never from a second family. / --skbpa-font-ui: 'Roboto', Arial, Helvetica, sans-serif; --skbpa-font-mono: Consolas, "Courier New", monospace; --skbpa-text-xs: 12px; --skbpa-text-sm: 14px; --skbpa-text-base: 16px; --skbpa-text-lg: 18px; --skbpa-text-xl: 22px; --skbpa-text-2xl: 28px; / Long technical prose needs air; tables and compact meta do not. / --skbpa-line-tight: 1.35; --skbpa-line-normal: 1.55; --skbpa-line-prose: 1.65; / Three weights, not five. Anything between 400 and 500 is invisible at body sizes and only multiplies the number of things to keep consistent. / --skbpa-weight-regular: 400; --skbpa-weight-medium: 500; --skbpa-weight-bold: 700; font-family: var(--skbpa-font-ui); color: var(--skbpa-ink); background: var(--skbpa-bg); line-height: 1.65; min-height: 60vh; / overflow-x:hidden here (dropped 2026-08-19) breaks position:sticky for any descendant -- sticky requires overflow:visible on every ancestor up to the actual scroll container, and setting overflow-x alone still creates that scroll container in all evergreen browsers. Confirmed empirically: the full-manual sticky TOC computed position:sticky correctly but its rect moved in exact lockstep with the page (never actually stuck) until this was removed. html/body's own overflow-x:hidden (above) is the real page-level defense against horizontal overflow; this was redundant defense-in-depth that ended up costing more than it protected. / } .skbpa-docs { box-sizing: border-box; } .skbpa-docs a { color: var(--skbpa-accent-dark); text-decoration: none; } .skbpa-docs a:hover { text-decoration: underline; } .skbpa-docs-eyebrow { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--skbpa-accent-dark); font-weight: 700; margin-bottom: 8px; } /* --- Header furniture shared by manual + quickstart --- / .skbpa-docs-back-link { font-size: 13.5px; color: var(--skbpa-ink-soft); font-weight: 500; } .skbpa-docs-back-link:hover { color: var(--skbpa-accent-dark); } .skbpa-docs-back-link--top { display: inline-block; margin-bottom: 18px; } / Segmented control geometry matched to the site's own tabs/controls (measured off the live "ЗАКАЗАТЬ"/"Подробнее" CTAs, 2026-08-19): a 99px full pill doesn't belong on skbpa.ru -- everything there is flat with little or no rounding. A moderate 4px keeps this readable as a distinct segmented toggle without looking like a foreign mobile-app control. / .skbpa-docs-switch { display: inline-flex; border: 1px solid var(--skbpa-line); border-radius: 4px; overflow: hidden; flex-shrink: 0; } .skbpa-docs-switch-item { padding: 7px 18px; font-size: 13.5px; font-weight: 600; color: var(--skbpa-ink-soft); background: var(--skbpa-surface); white-space: nowrap; } .skbpa-docs-switch-item:hover { text-decoration: none; background: var(--skbpa-surface-2); } .skbpa-docs-switch-item:focus-visible { outline: 2px solid var(--skbpa-accent); outline-offset: -2px; } .skbpa-docs-switch-item--active { background: var(--skbpa-accent); color: #fff !important; } / Same bug class as the Quick Start nav buttons (2026-08-18): a bare ":hover" rule on the shared ".skbpa-docs-switch-item" selector beats "--active" on specificity alone, so without this the ACTIVE (white text) tab's background fell back to the light hover grey on hover -- white-on-near-white, unreadable. Darken instead of lightening, same direction as every other active/accent control on this page. / .skbpa-docs-switch-item--active:hover, .skbpa-docs-switch-item--active:focus-visible { background: var(--skbpa-accent-dark); } / --- Cover pages (docs.center) --- / .skbpa-docs-cover { max-width: 960px; margin: 0 auto; padding: 48px 20px 80px; } .skbpa-docs-root-head, .skbpa-docs-product-head { text-align: center; margin-bottom: 40px; } .skbpa-docs-root-head h1, .skbpa-docs-product-head h1 { font-size: 32px; margin: 0 0 10px; letter-spacing: -.01em; } .skbpa-docs-lede { color: var(--skbpa-ink-soft); font-size: 16px; max-width: 52ch; margin: 0 auto; } .skbpa-docs-revision { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--skbpa-ink-faint); border: 1px solid var(--skbpa-line); border-radius: 4px; padding: 3px 12px; } .skbpa-docs-select-row { margin: 8px 0 16px; } .skbpa-docs-select-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--skbpa-ink-faint); } .skbpa-docs-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } .skbpa-docs-product-card { display: flex; flex-direction: column; background: var(--skbpa-surface); border: 1px solid var(--skbpa-line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, transform .15s; } .skbpa-docs-product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-1px); } .skbpa-docs-product-card-link { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 16px; color: inherit; } .skbpa-docs-product-card-link:hover { text-decoration: none; } .skbpa-docs-product-photo { align-self: center; width: 100%; max-width: 160px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .skbpa-docs-product-photo img { max-width: 100%; max-height: 100%; object-fit: contain; } .skbpa-docs-product-name { font-weight: 700; font-size: 17px; color: var(--skbpa-ink); } .skbpa-docs-product-rev { font-size: 12.5px; color: var(--skbpa-ink-faint); } / Secondary modifications covered by the same РЭ (e.g. УВП-280Б.01 alongside А.01). / .skbpa-docs-product-also { font-size: 12.5px; color: var(--skbpa-ink-soft); } .skbpa-docs-product-descr { font-size: 13.5px; color: var(--skbpa-ink-soft); margin: 2px 0 0; line-height: 1.5; } .skbpa-docs-product-actions { display: flex; flex-direction: column; border-top: 1px solid var(--skbpa-line-soft); margin-top: auto; } .skbpa-docs-product-actions a { padding: 10px 22px; font-size: 13.5px; font-weight: 600; color: var(--skbpa-ink-soft); border-top: 1px solid var(--skbpa-line-soft); } .skbpa-docs-product-actions a:first-child { border-top: none; } .skbpa-docs-product-actions a:hover { color: var(--skbpa-accent-dark); background: var(--skbpa-surface-2); text-decoration: none; } .skbpa-docs-product-card--stub { align-items: center; justify-content: center; padding: 22px; min-height: 160px; border-style: dashed; box-shadow: none; } .skbpa-docs-product-card--stub:hover { transform: none; box-shadow: none; } .skbpa-docs-product-stub-text { text-align: center; font-size: 13.5px; color: var(--skbpa-ink-faint); line-height: 1.5; } .skbpa-docs-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 32px; } .skbpa-docs-choice { display: flex; flex-direction: column; gap: 6px; background: var(--skbpa-surface); border: 1px solid var(--skbpa-line); border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s, transform .15s, border-color .15s; } .skbpa-docs-choice:hover { box-shadow: 0 8px 22px rgba(227,109,56,.16); border-color: var(--skbpa-accent); transform: translateY(-2px); text-decoration: none; } .skbpa-docs-choice-icon { font-size: 26px; } .skbpa-docs-choice-title { font-weight: 700; font-size: 16.5px; color: var(--skbpa-ink); } .skbpa-docs-choice-desc { font-size: 13.5px; color: var(--skbpa-ink-soft); } .skbpa-docs-choice--pdf { border-style: dashed; } .skbpa-docs-back { display: inline-block; font-size: 14px; color: var(--skbpa-ink-soft); } .skbpa-docs-empty, .skbpa-docs-empty-note { text-align: center; color: var(--skbpa-ink-soft); padding: 60px 20px; } .skbpa-docs-btn { display: inline-block; margin-top: 14px; background: var(--skbpa-accent); color: #fff !important; padding: 9px 20px; border-radius: 0; font-weight: 600; font-size: 14px; } .skbpa-docs-btn:hover { background: var(--skbpa-accent-dark); text-decoration: none; } / --- Callouts (shared by manual + quickstart) --- / .skbpa-docs-callout { border-left: 3px solid var(--skbpa-note-ink); background: var(--skbpa-note-bg); border-radius: 6px; padding: 16px 22px; margin: 20px 0; } .skbpa-docs-callout p:last-child { margin-bottom: 0; } .skbpa-docs-callout--note { border-left-color: var(--skbpa-ink-faint); background: var(--skbpa-note-bg); color: var(--skbpa-note-ink); } .skbpa-docs-callout--warning { border-left-color: var(--skbpa-warning-ink); background: var(--skbpa-warning-bg); color: var(--skbpa-warning-ink); } .skbpa-docs-callout--important { border-left-color: var(--skbpa-important-ink); background: var(--skbpa-important-bg); color: var(--skbpa-important-ink); } .skbpa-docs-callout--attention { border-left-color: var(--skbpa-attention-ink); background: var(--skbpa-attention-bg); color: var(--skbpa-attention-ink); } .skbpa-docs-callout--danger { border-left-color: var(--skbpa-danger-ink); background: var(--skbpa-danger-bg); color: var(--skbpa-danger-ink); } / --- Technical tables (shared by manual chapters) --- / / max-width + overscroll containment added 2026-08-26: without the explicit max-width the wrapper happily grows to its table's min-width (420px) inside a 390px viewport and pushes the whole page sideways, which is exactly what the "no page horizontal overflow" rule forbids. The table still scrolls inside its own box — only the box is now bounded. / .skbpa-docs-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin: 16px 0 22px; border: 1px solid var(--skbpa-line); border-radius: 8px; } .skbpa-docs-table-wrap:focus-visible { outline: 2px solid var(--skbpa-accent); outline-offset: 2px; } .skbpa-docs-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 420px; } .skbpa-docs-table th, .skbpa-docs-table td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--skbpa-line-soft); vertical-align: top; } .skbpa-docs-table thead th { background: var(--skbpa-surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--skbpa-ink-faint); font-weight: 600; } .skbpa-docs-table tbody tr:last-child td { border-bottom: none; } .skbpa-docs-table tbody tr:hover { background: var(--skbpa-surface-2); } @media (max-width: 640px) { .skbpa-docs-cover { padding: 28px 14px 60px; } .skbpa-docs-root-head h1, .skbpa-docs-product-head h1 { font-size: 24px; } } / End / / /local/components/skbpa/docs.center/templates/.default/style.css?178942049116658 */