/* ── Блог: статья. Тёмная по умолчанию, светлая по атрибуту data-bl-theme на . Цвет только из токенов --bl-*, структура одна ── */ :root { --bl-bg: #0e1015; --bl-halo: radial-gradient(1100px 620px at 50% -13%, rgba(255,193,7,.10), transparent 62%); --bl-ink: #e8eaee; --bl-text: #cfd3da; --bl-dim: #9aa3ae; --bl-mute: #7f8791; --bl-line: rgba(255,255,255,.09); --bl-line2: rgba(255,255,255,.07); --bl-line3: rgba(255,255,255,.05); --bl-hover: rgba(255,255,255,.05); --bl-glass: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); --bl-paper: #171a21; --bl-chip: #1b1f27; --bl-amber: #ffc107; --bl-amber-soft: rgba(255,193,7,.10); --bl-amber-edge: rgba(255,193,7,.40); --bl-accent: #ffc107; --bl-dot: #ffc107; --bl-link: #ffc107; --bl-link-hover: #ffda6a; --bl-link-line: rgba(255,193,7,.42); --bl-table: #151820; --bl-th: #242527; --bl-th-ink: #f4c842; --bl-tip: #ffc107; --bl-tip-bg: rgba(255,193,7,.07); --bl-warn: #ffe08a; --bl-warn-bg: rgba(255,224,138,.07); --bl-ok: #8fe8a0; --bl-ok-bg: rgba(30,158,56,.12); --bl-ok-ink: #8fe8a0; --bl-shadow: 0 14px 34px rgba(0,0,0,.45); --bl-paper-edge: transparent; --bl-key: linear-gradient(180deg, #ffda6a 0%, #ffc107 50%, #e0a800 100%); --bl-code: #0f1218; --bl-code-ink: #ffe36a; color-scheme: dark; } html[data-bl-theme="light"] { --bl-bg: #ffffff; --bl-halo: none; --bl-ink: #111; --bl-text: #1a1a1a; --bl-dim: #6c757d; --bl-mute: #8a939c; --bl-line: #dee2e6; --bl-line2: #e9ecef; --bl-line3: #f1f3f5; --bl-hover: #f4f6f8; --bl-glass: linear-gradient(180deg, #fafbfc, #f2f4f6); --bl-paper: #ffffff; --bl-chip: #ffffff; --bl-amber-soft: rgba(255,193,7,.16); --bl-amber-edge: #e0a800; --bl-accent: #9a6a00; --bl-dot: #e0a800; --bl-link: #0d6efd; --bl-link-hover: #0a58ca; --bl-link-line: rgba(13,110,253,.35); --bl-table: #fff; --bl-th: #f8f9fa; --bl-th-ink: #111; --bl-tip: #0d6efd; --bl-tip-bg: #eef5ff; --bl-warn: #f59f00; --bl-warn-bg: #fff8ec; --bl-ok: #28a745; --bl-ok-bg: #f1fbf1; --bl-ok-ink: #1e7e34; --bl-shadow: 0 6px 20px rgba(0,0,0,.08); --bl-paper-edge: #dee2e6; --bl-code: #f4f6f8; --bl-code-ink: #7a4f00; color-scheme: light; } body { background: var(--bl-halo) no-repeat, var(--bl-bg) !important; } html:not([data-bl-theme="light"]) footer { background: rgba(11,13,17,.85) !important; border-color: var(--bl-line) !important; } html:not([data-bl-theme="light"]) footer a { color: var(--bl-dim) !important; } .bl-wrap { max-width: 1400px; margin: 0 auto; padding: 26px 20px 72px; color: var(--bl-text); } .bl-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bl-dim); } .bl-eyebrow-hl { color: var(--bl-accent); } /* ── сетка: содержание | статья | термины. Шапка в колонке статьи, панели с самого верха ── */ .bl-grid { display: grid; grid-template-columns: 248px minmax(0, 720px) 280px; column-gap: 44px; justify-content: center; align-items: start; } html.bl-noterms .bl-grid { grid-template-columns: 248px minmax(0, 720px) 248px; } /* пустая правая дорожка держит статью по центру */ .bl-hero { grid-column: 2; grid-row: 1; margin: 0 0 30px; } .bl-nav { grid-column: 1; grid-row: 1 / span 2; } .bl-main { grid-column: 2; grid-row: 2; } .bl-side { grid-column: 3; grid-row: 1 / span 2; } .bl-nav, .bl-side { position: sticky; top: calc(var(--nav-h, 70px) + 18px); max-height: calc(100vh - var(--nav-h, 70px) - 36px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bl-line) transparent; } html.bl-noterms .bl-side { display: none; } /* ── шапка ── */ .bl-hero h1 { margin: 0 0 18px; font-size: 2rem; line-height: 1.16; font-weight: 700; letter-spacing: -.02em; color: var(--bl-ink); text-wrap: balance; } .bl-lead { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.62; color: var(--bl-text); text-wrap: pretty; } .bl-lead strong { color: var(--bl-ink); } .bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 13.5px; color: var(--bl-dim); } .bl-meta > span:not(:last-of-type)::after { content: "·"; margin: 0 10px; color: var(--bl-mute); } .bl-theme { margin-left: 14px; width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--bl-line); background: var(--bl-glass); color: var(--bl-dim); cursor: pointer; transition: color .15s, border-color .15s; } .bl-theme:hover { color: var(--bl-accent); border-color: var(--bl-amber-edge); } .bl-theme svg { width: 17px; height: 17px; } .bl-ico-moon, html[data-bl-theme="light"] .bl-ico-sun { display: none; } html[data-bl-theme="light"] .bl-ico-moon { display: block; } /* ── левая панель: содержание и сервисы ── */ .bl-nav { background: var(--bl-glass); border: 1px solid var(--bl-line); border-radius: var(--ctr-radius); padding: 14px 12px 10px; } .bl-nav-head { display: flex; align-items: center; gap: 10px; margin: 0 4px 9px; } .bl-nav-head .bl-x { margin-left: auto; } /* кубик с домиком «к списку статей»: клавиша, как номера разделов; под курсором — янтарная */ .bl-home { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--ctr-radius); color: var(--bl-ink); background: var(--bl-chip); border: 1px solid var(--bl-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 var(--bl-line); transition: transform .1s, color .15s; } .bl-home:hover { color: #1a1a1a; background: var(--bl-key); border-color: #cc9a00; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 #b38705; } .bl-home:active { transform: translateY(2px); box-shadow: none; } .bl-home svg { width: 17px; height: 17px; } .bl-progress { height: 3px; margin: 0 4px; border-radius: 2px; background: var(--bl-line); overflow: hidden; } .bl-progress i { display: block; height: 100%; background: var(--bl-amber); transform: scaleX(0); transform-origin: left; transition: transform .12s linear; } .bl-progress-cap { min-height: 16px; margin: 7px 4px 10px; font-size: 12px; color: var(--bl-dim); font-variant-numeric: tabular-nums; } .bl-toc { position: relative; list-style: none; margin: 0; padding: 0; } .bl-toc::before, .bl-toc-fill { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; border-radius: 1px; } .bl-toc::before { background: var(--bl-line); } .bl-toc-fill { background: var(--bl-amber); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; z-index: 0; } .bl-toc a { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 5px 8px 5px 4px; border-radius: var(--ctr-radius); font-size: 13.5px; line-height: 1.35; color: var(--bl-text); text-decoration: none; transition: background .15s, color .15s; } .bl-toc a > span:last-child { padding-top: 3px; } .bl-toc a:hover { background: var(--bl-hover); color: var(--bl-ink); } .bl-num { position: relative; z-index: 1; flex: 0 0 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-size: 12px; font-weight: 800; color: var(--bl-dim); background: var(--bl-chip); border: 1px solid var(--bl-line); font-variant-numeric: tabular-nums; transition: color .2s, border-color .2s; } .bl-toc a.done { color: var(--bl-dim); } .bl-toc a.done .bl-num { color: var(--bl-accent); border-color: var(--bl-amber-edge); } .bl-toc a.on { background: var(--bl-amber-soft); color: var(--bl-ink); font-weight: 600; } .bl-toc a.on .bl-num { color: #1a1a1a; border-color: #cc9a00; background: var(--bl-key); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .bl-svcs { margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--bl-line); } .bl-svcs .bl-eyebrow { margin: 0 4px 6px; } .bl-svc { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 12px 7px 4px; border-radius: var(--ctr-radius); color: var(--bl-text); text-decoration: none; transition: background .15s; } .bl-svc:hover { background: var(--bl-hover); color: var(--bl-text); } .bl-ic { width: 24px; height: 24px; display: block; } .bl-svc-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ctr-radius); background: var(--bl-chip); border: 1px solid var(--bl-line); color: var(--bl-ink); --acc: var(--bl-amber); } .bl-svc b { display: block; font-size: 13.5px; line-height: 1.25; font-weight: 700; color: var(--bl-ink); } .bl-svc small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--bl-dim); } .bl-svc em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--bl-ok-ink); } .bl-svc-go { position: absolute; right: 4px; top: 50%; margin-top: -10px; line-height: 20px; color: var(--bl-accent); opacity: 0; transition: opacity .15s, transform .15s; } .bl-svc:hover .bl-svc-go { opacity: 1; transform: translateX(2px); } .bl-top { display: block; margin-top: 8px; padding: 6px; text-align: center; font-size: 12.5px; color: var(--bl-dim); text-decoration: none; border-radius: var(--ctr-radius); } .bl-top:hover { color: var(--bl-ink); background: var(--bl-hover); } /* ── текст статьи ── */ .bl-main { position: relative; min-width: 0; font-size: 17px; line-height: 1.7; color: var(--bl-text); counter-reset: sec; } .bl-main p { margin: 0 0 14px; } .bl-main strong { color: var(--bl-ink); font-weight: 700; } .bl-main a { color: var(--bl-link); text-decoration: underline; text-decoration-color: var(--bl-link-line); text-decoration-thickness: 1px; text-underline-offset: 3px; } .bl-main a:hover { color: var(--bl-link-hover); text-decoration-color: currentColor; } .bl-main h2 { counter-increment: sec; display: flex; align-items: center; gap: 14px; margin: 58px 0 16px; padding-top: 28px; border-top: 1px solid var(--bl-line); font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--bl-ink); text-wrap: balance; scroll-margin-top: calc(var(--nav-h, 70px) + 22px); } .bl-main > h2:first-child { margin-top: 0; } .bl-main h2::before { content: counter(sec); flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-size: 15px; font-weight: 800; letter-spacing: 0; color: #1a1a1a; background: var(--bl-key); box-shadow: inset 0 0 0 1px #cc9a00, inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px rgba(0,0,0,.25); } .bl-main h2.bl-flash::before { animation: blFlash 1.4s ease-out; } @keyframes blFlash { 0%, 30% { transform: scale(1.18); box-shadow: inset 0 0 0 1px #cc9a00, 0 0 0 7px rgba(255,193,7,.25); } 100% { transform: none; } } .bl-main h3 { position: relative; margin: 30px 0 8px; padding-left: 18px; font-size: 1.15rem; line-height: 1.35; font-weight: 700; color: var(--bl-ink); scroll-margin-top: calc(var(--nav-h, 70px) + 22px); } .bl-main h3::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--bl-dot); } .bl-main h4 { margin: 22px 0 6px; font-size: 1.02rem; line-height: 1.4; font-weight: 700; color: var(--bl-ink); } .bl-main ul { list-style: none; margin: 10px 0 18px; padding: 0; } .bl-main ul > li { position: relative; margin-bottom: 8px; padding-left: 22px; } .bl-main ul > li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--bl-dot); } .bl-main ol { margin: 10px 0 18px; padding-left: 26px; } .bl-main ol > li { margin-bottom: 8px; padding-left: 4px; } .bl-main ol > li::marker { font-weight: 700; color: var(--bl-accent); font-variant-numeric: tabular-nums; } .bl-main code { padding: 1px 5px; border-radius: 4px; font: .88em/1.4 Consolas, "Courier New", monospace; color: var(--bl-ink); background: var(--bl-chip); border: 1px solid var(--bl-line); overflow-wrap: anywhere; } .bl-main figure { margin: 0 0 34px; text-align: center; } .bl-main figure img { max-width: 100%; height: auto; padding: 14px; background: #fff; border-radius: 2px; border: 1px solid var(--bl-paper-edge); box-shadow: var(--bl-shadow); cursor: zoom-in; transition: transform .2s; } .bl-main figure img:hover { transform: translateY(-2px); } .bl-main figure img.small { max-width: min(100%, 320px); } .bl-main figcaption { margin-top: 10px; font-size: 13.5px; color: var(--bl-dim); } .bl-table { margin: 18px 0 24px; overflow-x: auto; border: 1px solid var(--bl-line); border-radius: var(--ctr-radius); background: var(--bl-table); } .bl-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; } .bl-table th { padding: 11px 14px; text-align: left; vertical-align: top; font-weight: 700; color: var(--bl-th-ink); background: var(--bl-th); border-bottom: 1px solid var(--bl-line); } .bl-table td { padding: 11px 14px; vertical-align: top; color: var(--bl-text); border-top: 1px solid var(--bl-line2); } .bl-table th + th, .bl-table td + td { border-left: 1px solid var(--bl-line3); } .bl-table tr:first-child td { border-top: 0; } .bl-table th ~ td, .bl-table tr:has(th) + tr td { border-top: 0; } .bl-main .callout { margin: 22px 0; padding: 14px 18px; font-size: 15px; line-height: 1.6; background: var(--bl-ok-bg); border-left: 3px solid var(--bl-ok); border-radius: 0 var(--ctr-radius) var(--ctr-radius) 0; } .bl-main .callout.tip { background: var(--bl-tip-bg); border-left-color: var(--bl-tip); } .bl-main .callout.warn { background: var(--bl-warn-bg); border-left-color: var(--bl-warn); } .bl-main .callout-title { display: block; margin-bottom: 4px; font-weight: 700; color: var(--bl-ink); } .bl-main .callout > :last-child { margin-bottom: 0; } .bl-main .faq-item { padding: 16px 0; border-top: 1px solid var(--bl-line2); } .bl-main .faq-item:first-of-type { border-top: 0; padding-top: 4px; } .bl-main .faq-q { margin-bottom: 6px; font-size: 16px; font-weight: 700; line-height: 1.45; color: var(--bl-ink); } .bl-main .faq-a { font-size: 16px; line-height: 1.65; } /* короткий призыв посреди текста: в месте, где боль сильнее всего */ .bl-main .cta-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin: 22px 0; padding: 14px 18px; border-radius: var(--ctr-radius); background: var(--bl-ok-bg); border: 1px solid var(--bl-line); } .bl-main .cta-inline p { flex: 1 1 300px; margin: 0; font-size: 15px; line-height: 1.55; } .bl-main .cta-inline .btn-3d { flex: none; padding: 9px 18px; font-size: 14px; } /* шпаргалка по сканерам: источник, уверенность, строка байтов */ .bl-main .src { font-size: 13px; color: var(--bl-dim); } .bl-main .model-table table { min-width: 760px; } .bl-main .confidence { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--bl-ok-ink); background: var(--bl-ok-bg); } .bl-main .confidence.check { color: var(--bl-warn); background: var(--bl-warn-bg); } .bl-main .hexline { padding: 12px 14px; border-radius: var(--ctr-radius); font-family: Consolas, "Courier New", monospace; color: var(--bl-code-ink); background: var(--bl-code); border: 1px solid var(--bl-line); overflow-wrap: anywhere; } /* кусок XML: строки не переносим, листается вбок в своей рамке */ .bl-main pre { margin: 18px 0; padding: 12px 14px; overflow-x: auto; border-radius: var(--ctr-radius); color: var(--bl-code-ink); background: var(--bl-code); border: 1px solid var(--bl-line); font: 13px/1.6 Consolas, "Courier New", monospace; } .bl-main pre code { padding: 0; border: 0; background: none; color: inherit; font: inherit; overflow-wrap: normal; } /* ── низ статьи: витрина сервиса и соседние статьи ── */ .bl-end { margin-top: 48px; } .bl-main a.btn-3d { display: inline-block; padding: 12px 30px; font-size: 16px; color: #fff; text-decoration: none; } .bl-back { margin-top: 26px; text-align: center; } .bl-main .bl-back .btn-3d { padding: 10px 24px; font-size: 15px; } .bl-cta-h { margin: 0 0 8px; font-size: 1.45rem; line-height: 1.25; font-weight: 700; color: var(--bl-ink); } .bl-cta-sub { margin: 12px 0 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--bl-dim); } .bl-show { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 26px; align-items: center; padding: 24px; background: var(--bl-glass); border: 1px solid var(--bl-line); border-radius: var(--ctr-radius); } .bl-show::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #1e9e38, #8fe8a0); } .bl-show-wide { grid-template-columns: minmax(0, 1fr); text-align: center; } .bl-show-solo { grid-template-columns: minmax(0, 1fr); text-align: center; } .bl-show-img img { width: 100%; height: auto; padding: 8px; background: #fff; border-radius: 2px; border: 1px solid var(--bl-paper-edge); box-shadow: var(--bl-shadow); } .bl-show-wide .bl-show-img img { padding: 0; border-radius: var(--ctr-radius); border-color: var(--bl-line); } .bl-show-txt p { margin-bottom: 16px; font-size: 15.5px; } .bl-show-wide .bl-show-txt p, .bl-show-solo .bl-show-txt p { max-width: 560px; margin-left: auto; margin-right: auto; } .bl-hub { margin-top: 36px; } .bl-hub-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; } .bl-main .bl-hub-links a { padding: 7px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--bl-ink); text-decoration: none; background: var(--bl-glass); border: 1px solid var(--bl-line); } .bl-main .bl-hub-links a:hover { border-color: var(--bl-amber-edge); color: var(--bl-ink); } .bl-hub-title { margin-bottom: 10px; text-align: center; } .bl-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .bl-main .bl-hub-grid a { display: block; padding: 14px 15px; border-radius: var(--ctr-radius); font-size: 14.5px; line-height: 1.4; font-weight: 600; color: var(--bl-ink); text-decoration: none; background: var(--bl-glass); border: 1px solid var(--bl-line); transition: border-color .15s, transform .15s; } .bl-main .bl-hub-grid a:hover { border-color: var(--bl-amber-edge); transform: translateY(-1px); color: var(--bl-ink); } .bl-hub-grid small { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bl-accent); } .bl-fine { max-width: 560px; margin: 30px auto 0 !important; text-align: center; font-size: 13.5px; line-height: 1.55; color: var(--bl-dim); } /* ── справа: словарик терминов читаемого раздела ── */ .bl-card { padding: 16px; background: var(--bl-glass); border: 1px solid var(--bl-line); border-radius: var(--ctr-radius); font-size: 14px; line-height: 1.5; } .bl-term { border-bottom: 1px dotted var(--bl-accent); cursor: help; } .bl-term:hover, .bl-term.on { color: var(--bl-accent); } .bl-term:focus-visible { outline: 2px solid var(--bl-amber); outline-offset: 2px; border-radius: 2px; } .bl-gl-defs { margin-top: 8px; } .bl-gl-def { padding: 9px 0; border-top: 1px solid var(--bl-line2); font-size: 13.5px; line-height: 1.5; } .bl-gl-def:first-child { border-top: 0; padding-top: 2px; } .bl-gl-def b { display: block; margin-bottom: 2px; font-size: 14.5px; color: var(--bl-ink); } .bl-gl-empty { margin: 0; font-size: 13.5px; color: var(--bl-dim); } .bl-gl-all { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bl-line2); } .bl-gl-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .bl-gl-chips button { padding: 3px 9px; border-radius: 999px; font-size: 12.5px; color: var(--bl-dim); background: var(--bl-chip); border: 1px solid var(--bl-line); cursor: pointer; } .bl-gl-chips button:hover { color: var(--bl-ink); border-color: var(--bl-amber-edge); } .bl-gl-chips button.on { color: #1a1a1a; background: var(--bl-key); border-color: #cc9a00; } /* лайтбокс */ .lightbox { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.85); cursor: zoom-out; } .lightbox.active { display: flex; } .lightbox img { max-width: 95%; max-height: 95vh; border-radius: 2px; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,.5); } /* ── шторки: правая (термины) — уже 1280px, левая (содержание) — уже 1024px ── Оболочка едет целиком, кончик торчит из её края. Закрытая оболочка лежит под подложкой: пока открыта соседняя шторка, нажатие на этот кончик попадает в подложку и только закрывает соседнюю. */ .bl-backdrop, .bl-peek, .bl-side-head { display: none; } .bl-shell { display: contents; } .bl-x { display: none; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; font-size: 16px; line-height: 1; color: var(--bl-ink); background: var(--bl-chip); border: 1px solid var(--bl-line); cursor: pointer; } @media (max-width: 1279.98px) { .bl-grid, html.bl-noterms .bl-grid { grid-template-columns: 248px minmax(0, 720px); } .bl-shell-r { display: block; position: fixed; z-index: 1048; top: 0; bottom: 0; right: 0; width: min(320px, calc(100vw - 72px)); transform: translateX(100%); transition: transform .28s cubic-bezier(.3,.8,.3,1), z-index 0s .28s; } html.bl-open-r .bl-shell-r { transform: none; z-index: 1050; transition: transform .28s cubic-bezier(.3,.8,.3,1), z-index 0s; } html.bl-noterms .bl-shell-r { display: none; } .bl-shell.bl-dragging { z-index: 1050; transition: none; user-select: none; } .bl-shell a, .bl-shell img { -webkit-user-drag: none; } /* ссылка не должна утаскиваться браузером вместо шторки */ .bl-side { position: absolute; inset: 0; max-height: none; padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); touch-action: pan-y; background: var(--bl-paper); border-left: 1px solid var(--bl-line); border-radius: var(--ctr-radius) 0 0 var(--ctr-radius); box-shadow: -8px 0 28px rgba(0,0,0,.45); visibility: hidden; transition: visibility 0s .28s; } html.bl-open-r .bl-side, .bl-shell-r.bl-dragging .bl-side { visibility: visible; transition: none; } .bl-side-head { display: flex; justify-content: flex-end; margin-bottom: 2px; } .bl-side-head .bl-x { display: grid; } .bl-side .bl-card { padding: 0; background: none; border: 0; } /* в шторке рамка карточки лишняя */ .bl-peek { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: 28px; padding: 9px 0 10px; border: 1px solid var(--bl-line); background: var(--bl-paper); touch-action: none; cursor: grab; } .bl-peek-grip { width: 6px; height: 14px; background: radial-gradient(circle, var(--bl-mute) 1px, transparent 1.4px) 0 0 / 3px 3.5px; } .bl-peek-r { right: 100%; border-right: 0; border-radius: 12px 0 0 12px; box-shadow: -6px 0 18px rgba(0,0,0,.28); } .bl-peek-lbl { writing-mode: vertical-rl; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--bl-accent); } .bl-backdrop { display: block; position: fixed; inset: 0; z-index: 1049; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .22s; } html.bl-drawer .bl-backdrop { opacity: 1; pointer-events: auto; } html.bl-drag .bl-backdrop { transition: none; } html.bl-drawer, html.bl-drawer body { overflow: hidden; } } @media (max-width: 1023.98px) { /* поля по бокам: --gl и --gr — полосы под кончики шторок */ .bl-wrap { --gl: 22px; --gr: 18px; padding: 20px var(--gr) 56px var(--gl); } html.bl-noterms .bl-wrap { --gr: 4px; } .bl-grid, html.bl-noterms .bl-grid { grid-template-columns: minmax(0, 1fr); } .bl-hero, .bl-main { grid-column: 1; } .bl-main h2, .bl-main h3 { scroll-margin-top: calc(var(--nav-h, 56px) + 18px); } .bl-shell-l { display: block; position: fixed; z-index: 1048; top: 0; bottom: 0; left: 0; width: min(320px, calc(100vw - 72px)); transform: translateX(-100%); transition: transform .28s cubic-bezier(.3,.8,.3,1), z-index 0s .28s; } html.bl-open-l .bl-shell-l { transform: none; z-index: 1050; transition: transform .28s cubic-bezier(.3,.8,.3,1), z-index 0s; } .bl-nav { position: absolute; inset: 0; max-height: none; padding: 14px 12px calc(18px + env(safe-area-inset-bottom)); touch-action: pan-y; background: var(--bl-paper); border: 0; border-right: 1px solid var(--bl-line); border-radius: 0 var(--ctr-radius) var(--ctr-radius) 0; box-shadow: 8px 0 28px rgba(0,0,0,.45); visibility: hidden; transition: visibility 0s .28s; } html.bl-open-l .bl-nav, .bl-shell-l.bl-dragging .bl-nav { visibility: visible; transition: none; } .bl-nav-head .bl-x { display: grid; } .bl-peek-l { left: 100%; border-left: 0; border-radius: 0 12px 12px 0; box-shadow: 6px 0 18px rgba(0,0,0,.28); } .bl-peek-nums { position: relative; display: flex; flex-direction: column; gap: 5px; } .bl-peek-nums::before, .bl-peek-fill { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: var(--bl-line); } .bl-peek-fill { background: var(--bl-amber); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; } .bl-peek-nums i { position: relative; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 800; color: var(--bl-dim); background: var(--bl-chip); border: 1px solid var(--bl-line); font-variant-numeric: tabular-nums; } .bl-peek-nums i.done { color: var(--bl-accent); border-color: var(--bl-amber-edge); } .bl-peek-nums i.on { color: #1a1a1a; background: var(--bl-key); border-color: #cc9a00; } .bl-peek-flag { position: absolute; left: calc(100% + 8px); top: var(--fy, 50%); max-width: calc(100vw - 90px); padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; color: var(--bl-ink); background: var(--bl-paper); border: 1px solid var(--bl-amber-edge); box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; transform: translate(-6px, -50%); transition: opacity .2s, transform .2s; } .bl-peek-flag.show { opacity: 1; transform: translate(0, -50%); } html.bl-drawer .bl-peek-flag { opacity: 0; } .bl-toc a { padding-top: 7px; padding-bottom: 7px; font-size: 14.5px; } .bl-svc b { font-size: 14.5px; } } @media (max-width: 700px) { .bl-main { font-size: 16px; line-height: 1.65; } .bl-main h2 { font-size: 1.28rem; gap: 11px; margin-top: 44px; padding-top: 22px; } .bl-main h2::before { width: 30px; height: 30px; font-size: 14px; } .bl-main h3 { font-size: 1.08rem; } .bl-main figure img { padding: 8px; } .bl-hero h1 { font-size: 1.7rem; } .bl-lead { font-size: 1rem; } .bl-hub-grid, .bl-show { grid-template-columns: minmax(0, 1fr); } .bl-show { padding: 22px 16px 18px; text-align: center; } .bl-hub-links { justify-content: space-between; } /* стрелки врозь: левая ссылка к левому краю, правая к правому */ .bl-main .bl-hub-links a { padding: 6px 12px; font-size: 13.5px; } .bl-main .bl-hub-links a:last-child { margin-left: auto; } .bl-main .cta-inline .btn-3d { flex: 1 1 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .bl-shell, .bl-toc-fill, .bl-progress i, .bl-peek-fill, .bl-peek-flag { transition: none; } .bl-main h2.bl-flash::before { animation: none; } } /* ══ Список статей /blog/: разделы, липкая панель с поиском и тегами. Цвет — токены --bl-* и --bi-* ══ */ :root { --bi-bar: #171a21; --bi-field: #0f1218; --bi-field-edge: rgba(255,255,255,.12); --bi-field-in: inset 0 2px 4px rgba(0,0,0,.35); --bi-cover: linear-gradient(160deg, #1b1f28, #12151b); --bi-halo: rgba(255,193,7,.17); --bi-cover-op: .13; --bi-new: #8fe8a0; --bi-new-bg: rgba(30,158,56,.14); --bi-new-edge: rgba(143,232,160,.32); --bi-x: #ff9b9b; --bi-lift: 0 10px 26px rgba(0,0,0,.40); --bi-stuck: 0 10px 24px rgba(0,0,0,.45); --bi-rule: #d9dde3; } html[data-bl-theme="light"] { --bi-bar: #fff; --bi-field: #fff; --bi-field-edge: #ced4da; --bi-field-in: inset 0 2px 4px rgba(0,0,0,.06); --bi-cover: linear-gradient(160deg, #f8f9fb, #eceff3); --bi-halo: rgba(255,193,7,.30); --bi-cover-op: .10; --bi-new: #1e7e34; --bi-new-bg: #eaf7ee; --bi-new-edge: #b7e2c2; --bi-x: #dc3545; --bi-lift: 0 8px 22px rgba(0,0,0,.08); --bi-stuck: 0 8px 20px rgba(0,0,0,.08); --bi-rule: #1a1a1a; } .bi { max-width: 1240px; margin: 0 auto; padding: 26px 20px 80px; color: var(--bl-text); } .bi-ic { width: 20px; height: 20px; display: block; flex: none; --acc: var(--bl-amber); } /* ── шапка ── */ .bi-hero { max-width: 1000px; margin: 4px auto 26px; text-align: center; } .bi-hero h1 { margin: 10px 0 12px; font-size: 2rem; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; color: var(--bl-ink); } .bi-lead { max-width: 600px; margin: 0 auto 14px; font-size: 1.05rem; line-height: 1.6; color: var(--bl-text); text-wrap: pretty; } .bi-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0; font-size: 13.5px; color: var(--bl-dim); } .bi-hero-meta > span:not(:last-of-type)::after { content: "·"; margin: 0 10px; color: var(--bl-mute); } /* кнопки разделов под заголовком — только уже 1024px, где нет левой колонки */ .bi-cats-top { display: none; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; } .bi-cats-top a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 10px; border-radius: 10px; background: var(--bl-glass); border: 1px solid var(--bl-line); color: var(--bl-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s, transform .15s, opacity .15s; } .bi-cats-top a:hover { border-color: var(--bl-amber-edge); transform: translateY(-1px); color: var(--bl-ink); } .bi-cat-n { font-size: 12px; font-weight: 700; color: var(--bl-dim); font-variant-numeric: tabular-nums; } .bi-cats a.off, .bi-cats-top a.off { opacity: .38; pointer-events: none; } /* ── липкая панель: поиск и теги. Бумага, непрозрачная, цвет не меняет ── */ .bi-bar { position: sticky; top: var(--nav-h, 70px); z-index: 1015; display: flex; align-items: center; gap: 14px; margin-bottom: 26px; padding: 10px; background: var(--bi-bar); border: 1px solid var(--bl-line); border-radius: var(--ctr-radius); transition: box-shadow .2s; } .bi-bar.stuck { border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: var(--bi-stuck); } .bi-search { position: relative; flex: 0 0 270px; margin: 0; } .bi-search input { width: 100%; height: 40px; padding: 0 36px 0 38px; border-radius: 6px; border: 1px solid var(--bi-field-edge); background: var(--bi-field); box-shadow: var(--bi-field-in); color: var(--bl-ink); font-size: 15px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s; } .bi-search input::placeholder { color: var(--bl-mute); } .bi-search input::-webkit-search-cancel-button { display: none; } .bi-search input:focus { border-color: var(--bl-amber-edge); box-shadow: var(--bi-field-in), 0 0 0 3px var(--bl-amber-soft); } .bi-search-ic { position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--bl-dim); pointer-events: none; } .bi-kbd { position: absolute; right: 9px; top: 50%; margin-top: -10px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--bl-line); background: none; box-shadow: none; color: var(--bl-dim); font: 600 12px/1 system-ui, sans-serif; pointer-events: none; } .bi-search input:focus ~ .bi-kbd, .bi-search input:not(:placeholder-shown) ~ .bi-kbd { display: none; } .bi-clear { position: absolute; right: 6px; top: 50%; margin-top: -14px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--bi-x); font-size: 14px; cursor: pointer; } .bi-clear:hover { background: var(--bl-hover); } .bi-chips { flex: 1; min-width: 0; padding: 1px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%); } .bi-chips::-webkit-scrollbar { display: none; } .bi-chips-in { display: flex; flex-wrap: wrap; gap: 5px; } /* ширину для трёх рядов ставит скрипт, когда не влезают */ .bi-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--bl-line); background: var(--bl-chip); color: var(--bl-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s, opacity .15s; } .bi-chip i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--bl-mute); font-variant-numeric: tabular-nums; } .bi-chip:hover { border-color: var(--bl-amber-edge); color: var(--bl-ink); } .bi-chip[aria-pressed="true"] { color: #1a1a1a; background: var(--bl-key); border-color: #b38705; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .bi-chip[aria-pressed="true"] i { color: rgba(26,26,26,.62); } .bi-chip:disabled { opacity: .35; cursor: default; border-color: var(--bl-line); color: var(--bl-text); } /* ── раскладка: слева разделы (как в статье), справа лента ── */ .bi-grid { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 32px; align-items: start; } .bi-rail { position: sticky; top: calc(var(--nav-h, 70px) + var(--bar-h, 62px) + 16px); display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - var(--nav-h, 70px) - var(--bar-h, 62px) - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bl-line) transparent; } .bi-box { padding: 12px 10px 10px; background: var(--bl-glass); border: 1px solid var(--bl-line); border-radius: var(--ctr-radius); } .bi-box > .bl-eyebrow { margin: 0 6px 8px; } .bi-cats a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px 5px 4px; border-radius: var(--ctr-radius); color: var(--bl-text); font-size: 14px; line-height: 1.3; text-decoration: none; transition: background .15s, color .15s, opacity .15s; } .bi-cats a:hover { background: var(--bl-hover); color: var(--bl-ink); } .bi-cat-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--ctr-radius); background: var(--bl-chip); border: 1px solid var(--bl-line); color: var(--bl-ink); } .bi-cats a.on { background: var(--bl-amber-soft); color: var(--bl-ink); font-weight: 600; } .bi-cats a.on .bi-cat-ic { border-color: var(--bl-amber-edge); } .bi-cats a.on .bi-cat-n { color: var(--bl-accent); } .bi-svc { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 14px 7px 4px; border-radius: var(--ctr-radius); color: var(--bl-text); text-decoration: none; transition: background .15s; } .bi-svc:hover { background: var(--bl-hover); color: var(--bl-text); } .bi-svc-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ctr-radius); background: var(--bl-chip); border: 1px solid var(--bl-line); color: var(--bl-ink); } .bi-svc-ico .bi-ic { width: 24px; height: 24px; } .bi-svc b { display: block; font-size: 13.5px; line-height: 1.25; font-weight: 700; color: var(--bl-ink); } .bi-svc small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--bl-dim); } .bi-svc em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--bl-ok-ink); } .bi-svc-go { position: absolute; right: 4px; top: 50%; margin-top: -10px; line-height: 20px; color: var(--bl-accent); opacity: 0; transition: opacity .15s, transform .15s; } .bi-svc:hover .bi-svc-go { opacity: 1; transform: translateX(2px); } /* ── разделы ── */ .bi-status { margin: -6px 0 22px; text-align: center; font-size: 14px; color: var(--bl-dim); } .bi-status b { color: var(--bl-ink); } .bi-status button { padding: 0; border: 0; background: none; color: var(--bl-accent); font-weight: 600; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } .bi-feed { container-type: inline-size; } .bi-sec { margin-bottom: 44px; padding-top: 20px; border-top: 3px solid var(--bi-rule); scroll-margin-top: calc(var(--nav-h, 70px) + var(--bar-h, 62px) + 12px); } .bi-sec[hidden], .bi-card[hidden] { display: none; } .bi-sec-head { margin-bottom: 18px; text-align: center; } .bi-sec-ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: var(--bl-glass); border: 1px solid var(--bl-line); color: var(--bl-ink); --acc: var(--bl-amber); } .bi-sec-ic svg { width: 32px; height: 32px; } .bi-sec-head h2 { margin: 10px 0 4px; font-size: 1.45rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--bl-ink); text-wrap: balance; } .bi-sec-n { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--bl-mute); font-variant-numeric: tabular-nums; } .bi-sec-head p { max-width: 560px; margin: 0 auto 10px; font-size: 14.5px; line-height: 1.5; color: var(--bl-dim); } .bi-sec-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; } /* лента шире 720px: карточки слева, заголовок раздела справа и едет вместе с разделом */ @container (min-width: 720px) { .bi-sec { display: grid; grid-template-columns: minmax(0, 1fr) clamp(180px, 23cqi, 220px); column-gap: 26px; align-items: start; } .bi-sec > .bi-list { grid-column: 1; grid-row: 1; } .bi-sec-head { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--nav-h, 70px) + var(--bar-h, 62px) + 20px); margin: 0; padding-top: 2px; } .bi-sec-head h2 { margin-top: 12px; font-size: 1.25rem; } .bi-sec-head p { font-size: 13.5px; } .bi-sec-links { flex-direction: column; align-items: center; gap: 6px; } } .bi-sec-links a { font-size: 13.5px; font-weight: 600; color: var(--bl-accent); text-decoration: none; } .bi-sec-links a::after { content: "\00a0→"; } .bi-sec-links a:hover { color: var(--bl-accent); text-decoration: underline; text-underline-offset: 3px; } .bi-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; } .bi-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-align: center; border-radius: var(--ctr-radius); background: var(--bl-glass); border: 1px solid var(--bl-line); transition: border-color .15s, transform .15s, box-shadow .15s, background .15s; } .bi-card:hover { border-color: var(--bl-amber-edge); transform: translateY(-1px); box-shadow: var(--bi-lift); } .bi-card:has(.bi-link:focus-visible) { outline: 2px solid var(--bl-amber); outline-offset: 2px; } .bi-cover { position: relative; height: 112px; display: grid; place-items: center; padding: 0 16px; overflow: hidden; border-bottom: 1px solid var(--bl-line2); background: radial-gradient(240px 130px at var(--hx, 70%) -10%, var(--bi-halo), transparent 70%), var(--bi-cover); } .bi-cover-w { position: relative; font-size: 27px; font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--bl-ink); } .bi-cover-ic { position: absolute; right: -12px; bottom: -20px; width: 104px; height: 104px; color: var(--bl-ink); --acc: var(--bl-amber); opacity: var(--bi-cover-op); transform: rotate(-8deg); } .bi-body { display: flex; flex-direction: column; flex: 1; padding: 13px 16px 15px; } .bi-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 0; margin-bottom: 8px; font-size: 12.5px; color: var(--bl-dim); font-variant-numeric: tabular-nums; } .bi-meta > :not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--bl-mute); } .bi-new, .bi-upd { font-weight: 700; color: var(--bi-new); } .bi-new { padding: 0 7px; border-radius: 6px; background: var(--bi-new-bg); border: 1px solid var(--bi-new-edge); font-size: 12px; line-height: 20px; } .bi-card h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; font-weight: 700; color: var(--bl-ink); text-wrap: balance; } .bi-link { color: inherit; text-decoration: none; outline: none; } .bi-link:hover { color: inherit; } .bi-link::after { content: ""; position: absolute; inset: 0; } .bi-short { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--bl-dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bi-hit { margin: -6px 0 12px; font-size: 12.5px; line-height: 1.4; color: var(--bl-dim); } .hl { font-weight: 700; color: var(--bl-accent); } .bi-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: auto; } .bi-tag { height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--bl-line); background: var(--bl-chip); color: var(--bl-dim); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .bi-tag:hover { color: var(--bl-ink); border-color: var(--bl-amber-edge); } .bi-tag.on { color: var(--bl-accent); border-color: var(--bl-amber-edge); background: var(--bl-amber-soft); } /* ── пусто и низ ── */ .bi-empty { max-width: 540px; margin: 0 auto; padding: 36px 16px 30px; text-align: center; } .bi-empty-ic { width: 64px; height: 64px; color: var(--bl-dim); --acc: var(--bl-amber); } .bi-empty-t { margin: 10px 0 6px; font-size: 1.2rem; font-weight: 700; color: var(--bl-ink); } .bi-empty-s { margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--bl-dim); } .bi-empty-s a { color: var(--bl-accent); font-weight: 600; } .bi-cta { max-width: 760px; margin: 40px auto 0; padding: 26px 22px; text-align: center; border: 1px solid var(--bl-line); border-radius: var(--ctr-radius); background: radial-gradient(420px 160px at 50% 0%, var(--bl-amber-soft), transparent 70%), var(--bl-glass); } .bi-cta-t { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; color: var(--bl-ink); } .bi-cta-s { max-width: 520px; margin: 0 auto 16px; font-size: 14.5px; line-height: 1.55; color: var(--bl-dim); } .bi-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 22px; } .bi-cta .btn-3d { padding: 10px 22px; font-size: 15px; font-weight: 700; text-decoration: none; } .bi-cta-alt { font-size: 14px; font-weight: 600; color: var(--bl-accent); text-decoration: none; } .bi-cta-alt:hover { color: var(--bl-accent); text-decoration: underline; text-underline-offset: 3px; } /* ── узкие экраны ── */ @media (max-width: 1023px) { .bi-grid { grid-template-columns: minmax(0, 1fr); } .bi-rail { display: none; } .bi-cats-top { display: flex; } .bi-bar { flex-wrap: wrap; gap: 8px; } /* поиск — строкой, теги под ним во всю ширину */ .bi-search, .bi-chips { flex: 1 1 100%; } } @media (max-width: 760px) { .bi { padding: 14px 0 110px; } /* поля даёт container-fluid */ .bi-hero { margin-bottom: 20px; } .bi-hero h1 { margin: 6px 0 10px; font-size: 1.7rem; } .bi-lead { font-size: 1rem; } .bi-hero-meta > span:nth-child(2) { display: none; } .bi-cats-top { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; margin: 16px -12px 0; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .bi-cats-top::-webkit-scrollbar { display: none; } .bi-cats-top a { flex: none; height: 36px; font-size: 13.5px; } .bi-cats-top a:last-child { margin-right: 22px; } .bi-bar { margin: 0 -12px 22px; padding: 8px 12px; border-left: 0; border-right: 0; border-radius: 0; } .bi-bar.stuck { border-top-color: transparent; } .bi-search input { font-size: 16px; } .bi-kbd { display: none !important; } .bi-chips { flex: 1 1 calc(100% + 24px); margin: 0 -12px; padding: 1px 12px; } .bi-chip { height: 28px; } .bi-list { grid-template-columns: minmax(0, 1fr); } .bi-sec { margin-bottom: 36px; } .bi-sec-head { margin-bottom: 14px; } .bi-sec-ic { width: 42px; height: 42px; border-radius: 10px; } .bi-sec-ic svg { width: 27px; height: 27px; } .bi-sec-head h2 { margin: 8px 0 2px; font-size: 1.25rem; } .bi-sec-head p { font-size: 14px; } .bi-cta { margin-top: 28px; padding: 22px 16px; } } @media (prefers-reduced-motion: reduce) { .bi-card, .bi-cats-top a { transition: none; } .bi-card:hover { transform: none; } }