/* Публичный блог — вёрстка перенесена из блога Digital Pulse (templates/blog_*.html) один в один: те же классы (bg-/bx-/bp-), те же размеры, тени и радиусы. Отличие только в источнике данных: бренд, акцент и тексты берутся из проекта, поэтому --brand задаётся инлайном в каждой страницы. */ :root{ --ink:#15182a; --muted:#5d6885; --faint:#8a93ad; --line:#ecedf6; --bg:#f5f6fd; --panel:#fff; --brand:#3157ff; --brand-2:#6b86ff; --brand-soft:#eef2ff; --navy:#0f0e23; } *{box-sizing:border-box; margin:0} body{background:var(--bg); color:var(--ink); font:400 16px/1.65 'Inter', system-ui, sans-serif; -webkit-font-smoothing:antialiased} a{color:var(--brand); text-decoration:none} img{max-width:100%} .bg-wrap{width:min(1180px, calc(100% - 40px)); margin-inline:auto; padding:44px 0 64px} .bg-crumbs{font-size:13px; color:var(--faint); margin-bottom:18px; font-weight:600} .bg-crumbs a{color:var(--muted); display:inline-block; padding:6px 2px} .bg-foot{border-top:1px solid var(--line); background:#fff} .bg-foot-in{width:min(1180px, calc(100% - 40px)); margin-inline:auto; padding:22px 0; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:var(--faint); font-size:13.5px} .bg-foot-in a{color:var(--muted); display:inline-block; padding:6px 2px} @media (max-width:760px){ .bg-wrap{padding:28px 0 44px} } /* ── список статей ─────────────────────────────────────────────────────── */ /* Шапка в колонку: лид занимает всю ширину, а не жмётся рядом с поиском — в узкой колонке описание разваливалось на пять коротких строк. */ .bx-head{margin-bottom:22px} .bx-eyebrow{display:inline-block; color:var(--brand); background:var(--brand-soft); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:6px 12px; border-radius:999px; margin-bottom:14px} .bx-head h1{font-size:clamp(28px,4vw,40px); line-height:1.15; letter-spacing:-.02em} .bx-lead{margin-top:14px; padding-left:18px; border-left:3px solid var(--brand)} .bx-lead p{color:var(--muted); font-size:18px; line-height:1.62} @media (min-width:1100px){ .bx-lead p{font-size:18.5px} } .bx-search{display:flex; gap:8px; margin-top:22px} .bx-search input{border:1px solid var(--line); border-radius:12px; padding:12px 16px; font:inherit; font-size:15px; width:min(420px,100%); background:#fff} .bx-search button{border:0; border-radius:12px; background:var(--brand); color:#fff; font:inherit; font-weight:700; padding:11px 18px; cursor:pointer} .bx-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; align-items:center} .bx-chips:last-of-type{margin-bottom:26px} .bx-chips-label{font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-right:4px} .bx-chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 15px; font-size:13.5px; font-weight:700; color:var(--muted)} .bx-chip:hover{border-color:var(--brand); color:var(--brand)} .bx-chip.on{background:var(--brand); border-color:var(--brand); color:#fff} .bx-chip i{font-style:normal; font-size:12px; font-weight:800; color:var(--faint); margin-left:6px} .bx-chip.on i{color:rgba(255,255,255,.75)} .bx-feat{display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-bottom:20px; box-shadow:0 10px 26px rgba(20,20,60,.07)} .bx-feat img{width:100%; height:100%; object-fit:cover; display:block; min-height:260px} .bx-feat-body{padding:30px 34px; display:flex; flex-direction:column; gap:12px} .bx-feat-body h2{font-size:clamp(20px,2.4vw,27px); line-height:1.25; letter-spacing:-.015em} .bx-feat-body h2 a{color:var(--ink)} .bx-feat-body h2 a:hover{color:var(--brand)} .bx-feat-body p{color:var(--muted); font-size:15px; flex:1} .bx-tag{display:inline-block; background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:4px 11px; font-size:12px; font-weight:800} .bx-meta{color:var(--faint); font-size:13px; font-weight:600; display:flex; gap:12px; flex-wrap:wrap} .bx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px} .bx-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; display:flex; flex-direction:column; gap:10px; box-shadow:0 6px 18px rgba(20,20,60,.05); transition:transform .18s, box-shadow .18s} .bx-card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,20,60,.10)} /* Обложка выходит за padding карточки на 24px с каждой стороны. Глобальное img{max-width:100%} этот вылет срезало — справа оставалась белая полоса. */ .bx-cover{width:calc(100% + 48px); max-width:none; margin:-24px -24px 4px; border-radius:17px 17px 0 0; display:block; aspect-ratio:1200/630; object-fit:cover} .bx-card > a{display:block} .bx-card h2{font-size:18px; line-height:1.32; letter-spacing:-.01em} .bx-card h2 a{color:var(--ink)} .bx-card h2 a:hover{color:var(--brand)} .bx-card p{color:var(--muted); font-size:14.5px; flex:1} .bx-empty{background:var(--panel); border:1px dashed var(--line); border-radius:18px; padding:48px; text-align:center; color:var(--muted)} .bx-pager{display:flex; justify-content:center; gap:8px; margin-top:28px} .bx-pager a,.bx-pager span{min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:11px; border:1px solid var(--line); background:#fff; font-weight:700; font-size:14px; color:var(--muted); padding:0 12px} .bx-pager .cur{background:var(--brand); border-color:var(--brand); color:#fff} .bx-cta{margin-top:40px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-radius:20px; padding:36px; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px} .bx-cta b{font-size:22px; display:block; margin-bottom:6px; letter-spacing:-.01em} .bx-cta span{opacity:.88; font-size:15px} .bx-cta a{background:#fff; color:var(--brand); font-weight:800; padding:14px 26px; border-radius:13px; white-space:nowrap} @media (max-width:760px){ .bx-feat{grid-template-columns:1fr} .bx-feat img{min-height:0} .bx-search{width:100%} .bx-search input{flex:1; width:auto; min-width:0} } /* ── страница статьи ───────────────────────────────────────────────────── */ .bp-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:99; background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .1s linear} .bp-doc{background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:0 10px 26px rgba(20,20,60,.06); max-width:840px; margin-inline:auto; padding:clamp(26px,5vw,52px)} .bp-doc h1{font-size:clamp(26px,3.6vw,36px); line-height:1.18; letter-spacing:-.02em; margin:10px 0 8px} .bp-meta{color:var(--faint); font-size:13.5px; font-weight:600; display:flex; flex-wrap:wrap; gap:12px; align-items:center} .bp-tag{background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:4px 11px; font-size:12px; font-weight:800} .bp-draft{display:inline-block; background:#fef3c7; color:#92400e; font-size:12px; font-weight:800; padding:4px 11px; border-radius:999px} /* «Коротко» — в той же манере, что и оглавление */ .bp-tldr{margin:22px 0 0; border:1px solid #d5ddff; background:var(--brand-soft); border-radius:14px; padding:18px 22px} .bp-tldr b{display:block; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); margin-bottom:10px} .bp-tldr ul{margin:0; padding-left:20px} .bp-tldr li{margin-bottom:7px; font-size:15.5px; color:#29304a} .bp-tldr li:last-child{margin-bottom:0} .bp-toc{margin:22px 0 0; border:1px solid var(--line); background:#fafbff; border-radius:14px; padding:18px 22px} .bp-toc b{display:block; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); margin-bottom:10px} .bp-toc ol{margin:0; padding-left:20px} .bp-toc li{margin-bottom:6px; font-size:14.5px} .bp-toc a{color:var(--ink); font-weight:600; display:inline-block; padding:4px 0} .bp-toc a:hover{color:var(--brand)} .bp-toc a.is-on{color:var(--brand)} .bp-body{margin-top:26px; font-size:16.5px; color:#29304a} .bp-body h2{font-size:23px; margin:34px 0 12px; letter-spacing:-.01em; scroll-margin-top:20px} .bp-body h3{font-size:18px; margin:26px 0 10px} .bp-body p{margin:0 0 14px} .bp-body ul,.bp-body ol{margin:0 0 16px; padding-left:24px} .bp-body li{margin-bottom:7px} .bp-body blockquote{border-left:3px solid var(--brand); background:var(--brand-soft); border-radius:0 12px 12px 0; padding:14px 18px; margin:0 0 16px} .bp-body blockquote p{margin:0} .bp-body code{background:#f1f3fb; border-radius:6px; padding:2px 7px; font-size:14px} .bp-tblwrap{overflow-x:auto; margin:0 0 18px; border:1px solid var(--line); border-radius:12px} .bp-body table{width:100%; border-collapse:collapse; font-size:14.5px} .bp-body th{background:var(--brand-soft); color:var(--ink); text-align:left; font-weight:700; padding:10px 14px; border-bottom:1px solid #dfe4f7; white-space:nowrap} .bp-body td{padding:9px 14px; border-bottom:1px solid var(--line); vertical-align:top} .bp-body tbody tr:last-child td{border-bottom:0} .bp-body tbody tr:nth-child(even) td{background:#fafbff} .bp-body img{max-width:100%; border-radius:12px} .bp-body hr{border:0; border-top:1px solid var(--line); margin:26px 0} .bp-body a{font-weight:600} .bp-inline-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; background:var(--brand-soft); border:1px solid #d5ddff; border-radius:16px; padding:20px 24px; margin:30px 0} .bp-inline-cta b{display:block; font-size:16.5px; margin-bottom:3px; color:var(--ink)} .bp-inline-cta span{color:var(--muted); font-size:14px} .bp-inline-cta a{background:var(--brand); color:#fff; font-weight:800; padding:11px 20px; border-radius:11px; white-space:nowrap} .bp-faq{margin-top:34px} .bp-faq h2{font-size:23px; letter-spacing:-.01em; margin-bottom:14px} .bp-faq details{border:1px solid var(--line); border-radius:14px; background:#fafbff; padding:0 20px; margin-bottom:10px} .bp-faq summary{cursor:pointer; font-weight:700; font-size:15.5px; padding:15px 0; list-style:none; position:relative; padding-right:28px} .bp-faq summary::-webkit-details-marker{display:none} .bp-faq summary::after{content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); color:var(--brand); font-size:20px; font-weight:800; transition:transform .15s} .bp-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .bp-faq details p{color:#29304a; font-size:15px; margin:0 0 16px} .bp-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line)} .bp-author{display:flex; align-items:center; gap:12px} .bp-author .ava{width:44px; height:44px; border-radius:13px; flex:0 0 44px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px} .bp-author b{display:block; font-size:14.5px} .bp-author b a{color:var(--ink)} .bp-author b a:hover{color:var(--brand)} .bp-author span{color:var(--faint); font-size:12.5px; font-weight:600; display:block} .bp-share{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .bp-share span{color:var(--faint); font-size:13px; font-weight:700; margin-right:2px} .bp-share a,.bp-share button{border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:10px; padding:8px 13px; font:inherit; font-size:13px; font-weight:700; cursor:pointer} .bp-share a:hover,.bp-share button:hover{color:var(--brand); border-color:var(--brand)} .bp-cta{margin-top:32px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); border-radius:18px; padding:30px; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px} .bp-cta b{font-size:19px; display:block; margin-bottom:4px} .bp-cta span{opacity:.85; font-size:14.5px} .bp-cta a{background:#fff; color:var(--brand); font-weight:800; padding:13px 24px; border-radius:12px; white-space:nowrap} .bp-pn{max-width:840px; margin:18px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:12px} .bp-pn a{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 18px; color:var(--ink); font-weight:700; font-size:14px; line-height:1.35; transition:border-color .15s, color .15s} .bp-pn a:hover{border-color:var(--brand); color:var(--brand)} .bp-pn a span{display:block; color:var(--faint); font-weight:600; font-size:12px; margin-bottom:5px} .bp-pn a.next{text-align:right} .bp-pn .bp-pn-empty{visibility:hidden} @media (max-width:560px){ .bp-pn{grid-template-columns:1fr} .bp-pn .bp-pn-empty{display:none} } .bp-others{max-width:840px; margin:34px auto 0} .bp-others h2{font-size:20px; margin-bottom:14px} .bp-others-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px} .bp-other{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px} .bp-other a{color:var(--ink); font-weight:700; font-size:15px; line-height:1.35} .bp-other a:hover{color:var(--brand)} .bp-other span{display:block; color:var(--faint); font-size:12.5px; margin-top:7px; font-weight:600} /* страница автора — теми же карточками */ .ba-hero{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-bottom:22px} .ba-hero .ava{width:72px; height:72px; border-radius:20px; flex:0 0 72px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; font-weight:800; font-size:30px} .ba-hero h1{font-size:clamp(24px,3vw,34px); line-height:1.15; letter-spacing:-.02em} .ba-hero .role{color:var(--brand); font-weight:700; font-size:14.5px; margin-top:4px} .ba-hero p{color:var(--muted); margin-top:8px; font-size:16px; max-width:640px}