/* ========================================================= BLOG ARTICLE — BASE (LIGHT ARTICLE ON GLOBAL SITE) ВАЖНО: влияет только на [data-page="blog-article"] ========================================================= */ /* ========================================================= 0) NO LAYOUT SHIFT FROM SCROLLBAR (ARTICLE ONLY) Без :has() — применяемся сразу через ========================================================= */ html[data-page="blog-article"]{ overflow-y: auto; /* ✅ важно */ scrollbar-gutter: stable; /* ✅ место под скроллбар без прыжков */ } /* body можно оставить visible, но безопаснее auto */ body[data-page="blog-article"]{ overflow-y: auto; /* ✅ чтобы не ловить странности */ } /* режем горизонтальный вылет */ body[data-page="blog-article"]{ overflow-x: clip; } /* ========================================================= 1) TOKENS + PAGE BASE ========================================================= */ body[data-page="blog-article"]{ --brand-violet:#857BFF; --brand-blue:#00A3FF; --article-accent: var(--brand-blue); --article-accent2: var(--brand-violet); --ease: cubic-bezier(.2,.8,.2,1); --t-fast: .12s; --t-base: .18s; --focus: 0 0 0 3px rgba(0,163,255,.22), 0 0 0 1px rgba(0,0,0,.10) inset; --post-max: 920px; --post-pad: clamp(14px, 2.2vw, 18px); --post-gap: clamp(14px, 2.4vw, 22px); --radius-xl: 26px; --radius-lg: 18px; --text-main: rgba(0,0,0,.88); --text-soft: rgba(0,0,0,.62); --text-mute: rgba(0,0,0,.52); --line: rgba(0,0,0,.10); margin: 0; /* НЕ задаём фон body — глобальный фон сайта остаётся как есть */ background: transparent !important; background-color: transparent !important; color: var(--text-main); } /* ========================================================= 2) HEADER/TOPBAR — FULL WIDTH, БЕЗ “ПОЛОСКИ” СПРАВА Если в styles.css .header::before использует var(--page-sb-w), тут делаем "как на главной": right: 0 ========================================================= */ body[data-page="blog-article"] .header::before{ right: 0 !important; } /* ========================================================= 3) MAIN WRAPPER — БЕЛЫЙ ФОН НА ВЕСЬ КОНТЕНТ СТАТЬИ Важно: никаких 100vw (оно даёт горизонтальный сдвиг на scrollbar) ========================================================= */ body[data-page="blog-article"] .blog-article-main{ position: relative; z-index: 1; background: #fff !important; color: var(--text-main); padding-top: calc(var(--header-h-desktop, 84px) + var(--content-top-gap, 18px)) !important; padding-bottom: 72px; width: 100%; max-width: 100%; } body[data-page="blog-article"] .blog-article-main > *{ position: relative; z-index: 1; } body[data-page="blog-article"] .post{ color: var(--text-main); } body[data-page="blog-article"] .post-inner{ max-width: var(--post-max); margin-inline: auto; padding-inline: var(--post-pad); } /* ========================================================= 4) HERO (BANNER) ========================================================= */ body[data-page="blog-article"] .post-hero{ position: relative; border-radius: var(--radius-xl); overflow: hidden; padding: clamp(16px, 3.2vw, 26px); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 18px 45px rgba(0,0,0,.14); min-height: clamp(200px, 24vw, 300px); max-height: 360px; display: grid; align-content: center; } body[data-page="blog-article"] .post-hero, body[data-page="blog-article"] .post-hero *{ color: rgba(255,255,255,.92); } body[data-page="blog-article"] .post-hero__inner{ margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: clamp(10px, 2vw, 16px); min-width: 0; position: relative; } body[data-page="blog-article"] .post-hero__inner::before{ content:""; position:absolute; inset:-40px; z-index:0; pointer-events:none; background: radial-gradient(14px 14px at 18% 38%, rgba(255,255,255,.20), transparent 70%), radial-gradient(12px 12px at 78% 28%, rgba(0,163,255,.24), transparent 72%), radial-gradient(10px 10px at 64% 72%, rgba(133,123,255,.24), transparent 72%), repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 26px), radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.10) 0, transparent 60%), radial-gradient(1px 1px at 60% 10%, rgba(255,255,255,.08) 0, transparent 60%), radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.07) 0, transparent 60%); opacity: .95; } body[data-page="blog-article"] .post-hero__inner > *{ position: relative; z-index: 1; } body[data-page="blog-article"] .post-hero__left{ min-width: 0; } body[data-page="blog-article"] .post-heroTitle{ margin: 0 0 10px; font-family: Unbounded, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 900; font-size: clamp(30px, 4.0vw, 48px); line-height: 1.06; letter-spacing: -0.02em; color: rgba(255,255,255,.98); text-shadow: 0 14px 34px rgba(0,0,0,.35); overflow-wrap: anywhere; word-break: break-word; display: block; overflow: hidden; max-height: calc(1.06em * 2); } body[data-page="blog-article"] .post-hero__right{ min-width: 0; height: 100%; display: grid; align-items: center; justify-items: end; } body[data-page="blog-article"] .post-hero__img{ width: min(100%, clamp(300px, 40vw, 460px)); height: auto; max-height: 100%; display: block; object-fit: contain; transform: translateX(clamp(-8px, -1.0vw, -14px)) translateY(clamp(-8px, -0.8vw, -16px)); filter: drop-shadow(0 22px 38px rgba(0,0,0,.32)); } /* CHIP */ body[data-page="blog-article"] .post-kicker{ position: absolute; top: clamp(12px, 1.6vw, 18px); left: clamp(12px, 1.6vw, 18px); margin: 0; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.92) !important; font-weight: 800; letter-spacing: .02em; font-size: 12px; } body[data-page="blog-article"] .post-kicker *{ color: inherit !important; } /* ========================================================= 5) ARTICLE TITLE / META / LEAD ========================================================= */ body[data-page="blog-article"] .post-title{ margin: 14px 0 10px; font-family: Unbounded, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 900; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.06; letter-spacing: -0.02em; color: rgba(0,0,0,.92); } body[data-page="blog-article"] .post-meta{ display:flex; flex-wrap: wrap; gap: 10px; align-items:center; font-size: 13px; margin-bottom: 0; color: var(--text-soft); } body[data-page="blog-article"] .post-dot{ opacity: .5; } body[data-page="blog-article"] .post-lead{ margin: 0; color: rgba(0,0,0,.78); font-size: clamp(15px, 1.8vw, 18px); line-height: 1.62; max-width: 78ch; } /* ========================================================= 6) TOC ========================================================= */ body[data-page="blog-article"] .post-toc{ margin-top: 16px; padding: var(--post-pad); border-radius: var(--radius-lg); background: rgba(0,0,0,.02); border: 1px solid rgba(0,0,0,.10); box-shadow: 0 18px 45px rgba(0,0,0,.08); } body[data-page="blog-article"] .post-toc-title{ margin: 0 0 10px; font-size: 14px; font-weight: 900; letter-spacing: .01em; color: rgba(0,0,0,.88); } body[data-page="blog-article"] .post-toc-list{ margin: 0; padding-left: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; } body[data-page="blog-article"] .post-toc a{ color: rgba(0,0,0,.68); text-decoration: none; transition: color var(--t-base) var(--ease); } body[data-page="blog-article"] .post-toc a:hover{ color: rgba(0,0,0,.92); } body[data-page="blog-article"] .post-toc a:focus-visible{ outline: none; border-radius: 10px; box-shadow: var(--focus); padding: 2px 6px; margin-left: -6px; } /* ========================================================= 7) SECTIONS / TYPO ========================================================= */ body[data-page="blog-article"] .post-section{ margin-top: var(--post-gap); } body[data-page="blog-article"] .post-section h2, body[data-page="blog-article"] .post-section h3{ scroll-margin-top: calc(var(--header-h-desktop, 84px) + 18px); } body[data-page="blog-article"] .post-section h2{ margin: 0 0 10px; font-family: Unbounded, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 900; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.01em; color: rgba(0,0,0,.92); } body[data-page="blog-article"] .post-section h3{ margin: 0 0 8px; font-weight: 900; font-size: 16px; letter-spacing: -0.01em; color: rgba(0,0,0,.88); } body[data-page="blog-article"] .post p{ margin: 10px 0; color: var(--text-main); line-height: 1.68; font-size: 15px; } body[data-page="blog-article"] .post strong{ color: rgba(0,0,0,.92); font-weight: 800; } body[data-page="blog-article"] .post a{ color: rgba(0,0,0,.82); text-decoration: underline; text-decoration-color: rgba(0,0,0,.22); text-underline-offset: 3px; transition: text-decoration-color var(--t-base) var(--ease), color var(--t-base) var(--ease); } body[data-page="blog-article"] .post a:hover{ color: rgba(0,0,0,.95); text-decoration-color: rgba(0,0,0,.40); } /* lists */ body[data-page="blog-article"] .post ul, body[data-page="blog-article"] .post ol{ margin: 10px 0; padding-left: 22px; line-height: 1.65; } body[data-page="blog-article"] .post li{ margin: 6px 0; color: rgba(0,0,0,.82); } /* code */ body[data-page="blog-article"] .post code{ padding: 2px 6px; border-radius: 10px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.10); color: rgba(0,0,0,.90); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .92em; } body[data-page="blog-article"] .post pre{ overflow: auto; padding: 14px; border-radius: 16px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.10); } body[data-page="blog-article"] .post pre code{ padding: 0; border: none; background: transparent; font-size: 13px; line-height: 1.55; } /* tables */ body[data-page="blog-article"] .post table{ width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 16px; border: 1px solid rgba(0,0,0,.10); background: rgba(0,0,0,.02); } body[data-page="blog-article"] .post th, body[data-page="blog-article"] .post td{ padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.08); text-align: left; vertical-align: top; } body[data-page="blog-article"] .post th{ color: rgba(0,0,0,.88); font-weight: 900; background: rgba(0,0,0,.03); } body[data-page="blog-article"] .post tr:last-child td{ border-bottom: none; } /* ========================================================= 8) GRID 2 + CARD ========================================================= */ body[data-page="blog-article"] .post-grid-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0; } body[data-page="blog-article"] .card{ border-radius: var(--radius-lg); padding: 14px 14px 12px; background: rgba(0,0,0,.02); border: 1px solid rgba(0,0,0,.10); box-shadow: 0 18px 45px rgba(0,0,0,.08); } body[data-page="blog-article"] .card ul{ margin: 8px 0 0; } /* ========================================================= 9) CALLOUTS ========================================================= */ body[data-page="blog-article"] .callout{ position: relative; margin: 14px 0; padding: 12px 14px; border-radius: 18px; background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.10); } body[data-page="blog-article"] .callout::before{ content:""; position:absolute; left: 10px; top: 12px; bottom: 12px; width: 3px; border-radius: 999px; background: rgba(0,0,0,.22); } body[data-page="blog-article"] .callout strong{ font-weight: 900; } body[data-page="blog-article"] .callout--note{ background: rgba(0,163,255,.08); border-color: rgba(0,163,255,.22); } body[data-page="blog-article"] .callout--note::before{ background: rgba(0,163,255,.65); } body[data-page="blog-article"] .callout--tip{ background: rgba(133,123,255,.08); border-color: rgba(133,123,255,.22); } body[data-page="blog-article"] .callout--tip::before{ background: rgba(133,123,255,.65); } body[data-page="blog-article"] .callout--warn{ background: rgba(255,161,66,.12); border-color: rgba(255,161,66,.30); } body[data-page="blog-article"] .callout--warn::before{ background: rgba(255,161,66,.75); } body[data-page="blog-article"] .callout--product{ background: linear-gradient(180deg, rgba(133,123,255,.10), rgba(0,163,255,.08)); border-color: rgba(0,0,0,.10); } body[data-page="blog-article"] .callout--product::before{ background: linear-gradient(180deg, rgba(133,123,255,.9), rgba(0,163,255,.9)); } /* ========================================================= 10) STEPS ========================================================= */ body[data-page="blog-article"] .post-steps{ margin: 12px 0; padding-left: 0; counter-reset: steps; list-style: none; display: grid; gap: 10px; } body[data-page="blog-article"] .post-steps > li{ counter-increment: steps; position: relative; padding: 12px 14px 12px 46px; border-radius: 18px; background: rgba(0,0,0,.02); border: 1px solid rgba(0,0,0,.10); } body[data-page="blog-article"] .post-steps > li::before{ content: counter(steps); position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.12); color: rgba(0,0,0,.78); font-weight: 900; font-size: 12px; } /* ========================================================= 11) BREADCRUMB ========================================================= */ body[data-page="blog-article"] .blog-breadcrumb{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 26px; width: 100%; } /* ========================================================= 12) RESPONSIVE ========================================================= */ @media (max-width: 1104px){ body[data-page="blog-article"] .post-toc-list{ grid-template-columns: 1fr; gap: 8px; } body[data-page="blog-article"] .post-grid-2{ grid-template-columns: 1fr; } body[data-page="blog-article"] .post-hero{ border-radius: 24px; } } @media (max-width: 640px){ body[data-page="blog-article"] .blog-article-main{ padding-bottom: 56px; } body[data-page="blog-article"] .post-hero{ border-radius: 22px; padding: 14px; min-height: 0; max-height: none; display: flex; flex-direction: column; align-items: stretch; } body[data-page="blog-article"] .post-kicker{ position: static; top: auto; left: auto; margin: 0 0 10px 0; align-self: flex-start; line-height: 1; } body[data-page="blog-article"] .post-hero__inner{ grid-template-columns: 1fr; gap: 10px; margin-top: 0; } body[data-page="blog-article"] .post-heroTitle{ font-size: clamp(24px, 7.6vw, 32px); line-height: 1.08; max-height: none; overflow: visible; } body[data-page="blog-article"] .post-meta{ gap: 8px; flex-wrap: wrap; } body[data-page="blog-article"] .post-hero__right{ justify-items: start; margin-top: 6px; } body[data-page="blog-article"] .post-hero__img{ width: min(100%, 360px); max-width: 100%; transform: none; } body[data-page="blog-article"] .post-title{ font-size: clamp(24px, 7vw, 34px); } body[data-page="blog-article"] .post p{ font-size: 15px; } }