/* * AI Blog — оформление витрины. * * Все классы с префиксом aiblog- : чужую вёрстку не задеваем. * * Цвета и размеры вынесены в CSS-переменные и заданы через currentColor / * наследование, поэтому по умолчанию блог берёт типографику темы магазина и * не выглядит чужеродным. Значения переопределяются из настроек модуля — * блок .aiblog{--aiblog-accent: …} подставляется в . */ .aiblog { --aiblog-accent: #2f6fed; --aiblog-text: inherit; --aiblog-muted: #7c8794; --aiblog-surface: #ffffff; --aiblog-line: rgba(124, 135, 148, .22); --aiblog-radius: 10px; --aiblog-content-width: 760px; --aiblog-font-size: 17px; --aiblog-gap: 26px; } .aiblog, .aiblog a { color: var(--aiblog-text); } .aiblog a { text-decoration: none; } .aiblog a:hover, .aiblog a:focus { color: var(--aiblog-accent); text-decoration: none; } /* ---------- Шапка раздела ---------- */ .aiblog-head { margin: 0 0 28px; } .aiblog-head h1, .aiblog-title { margin: 0 0 10px; line-height: 1.2; font-weight: 700; } .aiblog-head p { color: var(--aiblog-muted); margin: 0; max-width: 70ch; } /* ---------- Фильтр по рубрикам ---------- */ .aiblog-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; list-style: none; } .aiblog-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--aiblog-line); border-radius: 999px; font-size: 14px; line-height: 1.4; transition: border-color .15s, color .15s, background-color .15s; } .aiblog-tag:hover, .aiblog-tag:focus, .aiblog-tag.is-active { border-color: var(--aiblog-accent); color: var(--aiblog-accent); } .aiblog-tag.is-active { background: var(--aiblog-accent); color: #fff; } .aiblog-tag-count { opacity: .65; font-size: 12px; } /* ---------- Сетка карточек ---------- */ .aiblog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--aiblog-gap); margin-bottom: 32px; } .aiblog-grid[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aiblog-grid[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aiblog-grid[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .aiblog-card { display: flex; flex-direction: column; background: var(--aiblog-surface); border-radius: var(--aiblog-radius); overflow: hidden; height: 100%; transition: transform .18s ease, box-shadow .18s ease; } .aiblog-card-shadow { box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .07); } .aiblog-card-border { border: 1px solid var(--aiblog-line); } .aiblog-card-flat { background: transparent; } .aiblog-card-shadow:hover { transform: translateY(-3px); box-shadow: 0 2px 6px rgba(16, 24, 40, .08), 0 14px 34px rgba(16, 24, 40, .12); } .aiblog-card-border:hover { border-color: var(--aiblog-accent); } /* Соотношение сторон держим сами: не зависим от того, что вернул ресайзер, и карточки в ряду не разъезжаются по высоте. */ .aiblog-card-media { display: block; position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(124, 135, 148, .12), rgba(124, 135, 148, .04)); overflow: hidden; } .aiblog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .aiblog-card:hover .aiblog-card-media img { transform: scale(1.04); } /* Запасной вариант для старых браузеров без aspect-ratio */ @supports not (aspect-ratio: 16 / 9) { .aiblog-card-media { padding-top: 56.25%; } .aiblog-card-media img { position: absolute; inset: 0; } } .aiblog-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1 1 auto; gap: 10px; } .aiblog-card-flat .aiblog-card-body { padding-left: 0; padding-right: 0; } .aiblog-card-cat { align-self: flex-start; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--aiblog-accent); font-weight: 600; } .aiblog-card-title { margin: 0; font-size: 19px; line-height: 1.35; font-weight: 600; } .aiblog-card-excerpt { margin: 0; color: var(--aiblog-muted); font-size: 15px; line-height: 1.55; } .aiblog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--aiblog-muted); font-size: 13px; margin-top: auto; padding-top: 4px; } .aiblog-meta > * + *::before { content: "•"; margin-right: 10px; opacity: .5; } /* «Читать» в карточке: очевидная точка входа в статью. Вся карточка и так кликабельна, но явная ссылка заметно повышает переходы и подсказывает, что блок вообще ведёт куда-то дальше. */ .aiblog-read { align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--aiblog-accent); white-space: nowrap; } .aiblog-read:hover { text-decoration: underline; } .aiblog-list-item .aiblog-read { display: inline-block; margin-top: 6px; } /* ---------- Статья ---------- */ .aiblog-article { max-width: var(--aiblog-content-width); margin: 0 auto; } .aiblog-article-head { margin-bottom: 24px; } .aiblog-article .aiblog-title { font-size: clamp(26px, 4vw, 40px); letter-spacing: -.01em; } .aiblog-cover { margin: 0 0 30px; border-radius: var(--aiblog-radius); overflow: hidden; aspect-ratio: 1200 / 630; background: linear-gradient(135deg, rgba(124, 135, 148, .12), rgba(124, 135, 148, .04)); } .aiblog-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } @supports not (aspect-ratio: 1200 / 630) { .aiblog-cover { position: relative; padding-top: 52.5%; } .aiblog-cover img { position: absolute; inset: 0; } } .aiblog-content { font-size: var(--aiblog-font-size); line-height: 1.72; } .aiblog-content > * + * { margin-top: 1.1em; } .aiblog-content h2 { margin: 1.9em 0 .6em; font-size: 1.42em; line-height: 1.3; font-weight: 700; scroll-margin-top: 90px; } .aiblog-content h3 { margin: 1.5em 0 .5em; font-size: 1.16em; line-height: 1.35; font-weight: 600; scroll-margin-top: 90px; } .aiblog-content p { margin: 0 0 1.1em; } .aiblog-content a { color: var(--aiblog-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .aiblog-content ul, .aiblog-content ol { margin: 0 0 1.2em; padding-left: 1.4em; } .aiblog-content li { margin-bottom: .5em; } .aiblog-content li::marker { color: var(--aiblog-accent); } .aiblog-content img { max-width: 100%; height: auto; border-radius: var(--aiblog-radius); } .aiblog-content blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--aiblog-accent); color: var(--aiblog-muted); font-size: 1.03em; } .aiblog-content pre { background: rgba(124, 135, 148, .1); border-radius: var(--aiblog-radius); padding: 16px 18px; overflow-x: auto; font-size: .92em; line-height: 1.5; } .aiblog-content code { background: rgba(124, 135, 148, .14); border-radius: 4px; padding: .15em .4em; font-size: .92em; } .aiblog-content pre code { background: none; padding: 0; } .aiblog-table-wrap { overflow-x: auto; margin-bottom: 1.4em; } .aiblog-content table { width: 100%; border-collapse: collapse; } .aiblog-content th, .aiblog-content td { border: 1px solid var(--aiblog-line); padding: 10px 12px; text-align: left; } .aiblog-content th { background: rgba(124, 135, 148, .08); font-weight: 600; } /* ---------- Оглавление ---------- */ .aiblog-toc { background: rgba(124, 135, 148, .07); border-radius: var(--aiblog-radius); padding: 18px 22px; margin-bottom: 30px; } .aiblog-toc-title { font-weight: 600; margin-bottom: 10px; font-size: 15px; } .aiblog-toc ol { list-style: none; padding: 0; margin: 0; counter-reset: aiblog-toc; } .aiblog-toc li { padding: 3px 0; counter-increment: aiblog-toc; } .aiblog-toc li::before { content: counter(aiblog-toc) "."; color: var(--aiblog-muted); margin-right: 8px; font-variant-numeric: tabular-nums; } .aiblog-toc a { border-bottom: 1px solid transparent; } .aiblog-toc a:hover { border-bottom-color: currentColor; } .aiblog-toc-3 { padding-left: 20px; font-size: .95em; } /* ---------- Блоки под статьёй ---------- */ .aiblog-section { margin-top: 46px; } .aiblog-section > h2 { font-size: 22px; margin: 0 0 18px; font-weight: 700; } .aiblog-faq-item { border-bottom: 1px solid var(--aiblog-line); padding: 16px 0; } .aiblog-faq-item:first-of-type { border-top: 1px solid var(--aiblog-line); } .aiblog-faq-q { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.4; } .aiblog-faq-a { color: var(--aiblog-muted); } .aiblog-faq-a p:last-child { margin-bottom: 0; } /* Аккордеон на
: никакого JS. Свой маркер вместо системного треугольника — он по-разному выглядит в разных браузерах. */ details.aiblog-faq-item > summary.aiblog-faq-q { margin: 0; cursor: pointer; list-style: none; display: flex; align-items: flex-start; gap: 12px; padding-right: 4px; transition: color .15s; } details.aiblog-faq-item > summary.aiblog-faq-q::-webkit-details-marker { display: none; } details.aiblog-faq-item > summary.aiblog-faq-q::marker { content: ""; } details.aiblog-faq-item > summary.aiblog-faq-q:hover { color: var(--aiblog-accent); } details.aiblog-faq-item > summary.aiblog-faq-q::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin: 6px 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transform-origin: center; opacity: .55; transition: transform .2s ease, opacity .15s; } details.aiblog-faq-item[open] > summary.aiblog-faq-q::after { transform: rotate(-135deg); margin-top: 9px; opacity: .9; } details.aiblog-faq-item[open] > summary.aiblog-faq-q { color: var(--aiblog-accent); } details.aiblog-faq-item > .aiblog-faq-a { padding-top: 10px; } /* Клавиатурная навигация должна быть видимой. */ details.aiblog-faq-item > summary.aiblog-faq-q:focus-visible { outline: 2px solid var(--aiblog-accent); outline-offset: 3px; border-radius: 3px; } /* При печати раскрываем все ответы: на бумаге аккордеон бессмыслен. */ @media print { details.aiblog-faq-item > .aiblog-faq-a { display: block !important; } details.aiblog-faq-item > summary.aiblog-faq-q::after { display: none; } } .aiblog-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 20px; } .aiblog-product { text-align: center; } .aiblog-product-media { display: block; border-radius: var(--aiblog-radius); overflow: hidden; background: rgba(124, 135, 148, .08); margin-bottom: 10px; aspect-ratio: 1 / 1; } .aiblog-product-media img { width: 100%; height: 100%; object-fit: contain; display: block; } .aiblog-product-name { font-size: 14px; line-height: 1.4; display: block; } .aiblog-product-price { font-weight: 700; margin-top: 6px; } .aiblog-related { display: grid; gap: 12px; } .aiblog-related a { display: block; padding: 14px 18px; border: 1px solid var(--aiblog-line); border-radius: var(--aiblog-radius); font-weight: 500; transition: border-color .15s, transform .15s; } .aiblog-related a:hover { border-color: var(--aiblog-accent); transform: translateX(3px); } .aiblog-disclosure { margin: 34px 0 0; padding: 12px 16px; border-radius: var(--aiblog-radius); background: rgba(124, 135, 148, .08); color: var(--aiblog-muted); font-size: 13px; line-height: 1.5; } .aiblog-empty { padding: 60px 20px; text-align: center; color: var(--aiblog-muted); border: 1px dashed var(--aiblog-line); border-radius: var(--aiblog-radius); } .aiblog-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 10px; } .aiblog-foot .text-right { color: var(--aiblog-muted); font-size: 14px; } .aiblog-rss { font-size: 13px; color: var(--aiblog-muted); } /* ---------- Виджет: список / сетка / слайдер ---------- */ .aiblog-widget { margin-bottom: 30px; } .aiblog-widget-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .aiblog-widget-head h3 { margin: 0; font-size: 20px; font-weight: 700; } .aiblog-widget-tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .aiblog-widget-more { font-size: 14px; color: var(--aiblog-accent); white-space: nowrap; } .aiblog-list { display: grid; gap: 16px; } .aiblog-list-item { display: flex; gap: 12px; align-items: flex-start; } .aiblog-list-media { flex: 0 0 92px; border-radius: calc(var(--aiblog-radius) - 2px); overflow: hidden; aspect-ratio: 16 / 10; background: rgba(124, 135, 148, .1); } .aiblog-list-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .aiblog-list-title { font-size: 15px; line-height: 1.35; font-weight: 500; display: block; margin-bottom: 4px; } /* Слайдер на CSS scroll-snap: без сторонних библиотек, работает с тач-скроллом из коробки, стрелки — прогрессивное улучшение поверх обычной прокрутки. */ .aiblog-slider { position: relative; } .aiblog-track { display: grid; grid-auto-flow: column; /* Не «1fr»: с ним карточки всегда умещаются в контейнер и слайдеру нечего прокручивать. Точную ширину задаёт блок стилей экземпляра. */ grid-auto-columns: 280px; gap: var(--aiblog-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .aiblog-slider[data-columns="1"] .aiblog-track { grid-auto-columns: 100%; } .aiblog-slider[data-columns="2"] .aiblog-track { grid-auto-columns: calc(50% - var(--aiblog-gap) / 2); } .aiblog-slider[data-columns="3"] .aiblog-track { grid-auto-columns: calc(33.333% - var(--aiblog-gap) * 2 / 3); } .aiblog-slider[data-columns="4"] .aiblog-track { grid-auto-columns: calc(25% - var(--aiblog-gap) * 3 / 4); } .aiblog-track > * { scroll-snap-align: start; } .aiblog-track::-webkit-scrollbar { height: 6px; } .aiblog-track::-webkit-scrollbar-thumb { background: var(--aiblog-line); border-radius: 3px; } /* Стрелки стоят в шапке блока. Абсолютные кнопки по бокам ленты выносятся за границы виджета и обрезаются контейнерами тем (или наезжают на край экрана) — в шапке они видны всегда и ни от чего не зависят. */ .aiblog-arrows { display: flex; gap: 6px; } .aiblog-arrows[hidden] { display: none; } .aiblog-arrow { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--aiblog-line); background: var(--aiblog-surface); color: inherit; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .15s, border-color .15s, color .15s; } .aiblog-arrow:hover:not([disabled]) { border-color: var(--aiblog-accent); color: var(--aiblog-accent); } .aiblog-arrow[disabled] { opacity: .35; cursor: default; } /* Оформление под вшитый Swiper. Точки листания показываем только там, где спрятаны стрелки, — на телефоне и планшете; на широком экране они лишние. */ .aiblog-dots.swiper-pagination { position: static; margin-top: 14px; display: none; } @media (max-width: 767px) { .aiblog-dots.swiper-pagination { display: block; } } .aiblog-arrow.swiper-button-disabled { opacity: .35; cursor: default; } /* Карточка сама является слайдом. height:auto нужен, чтобы она тянулась до высоты самой высокой в ряду (wrapper у Swiper — flex со stretch), иначе «Читать» у соседних карточек стоит на разной высоте. */ .aiblog-slider .swiper-slide { height: auto; } .aiblog-track { cursor: grab; } .aiblog-track:active { cursor: grabbing; } .aiblog-track:focus { outline: none; } .aiblog-track:focus-visible { outline: 2px solid var(--aiblog-accent); outline-offset: 3px; } @media (max-width: 767px) { .aiblog-arrows { display: none; } /* на тач-устройствах достаточно свайпа */ } /* ---------- Адаптивность ---------- */ @media (max-width: 991px) { .aiblog-grid[data-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aiblog-grid[data-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aiblog-slider[data-columns="3"] .aiblog-track, .aiblog-slider[data-columns="4"] .aiblog-track { grid-auto-columns: calc(50% - var(--aiblog-gap) / 2); } } @media (max-width: 767px) { .aiblog { --aiblog-gap: 18px; --aiblog-font-size: 16px; } .aiblog-grid, .aiblog-grid[data-columns="2"], .aiblog-grid[data-columns="3"], .aiblog-grid[data-columns="4"] { grid-template-columns: 1fr; } .aiblog-slider[data-columns="1"] .aiblog-track, .aiblog-slider[data-columns="2"] .aiblog-track, .aiblog-slider[data-columns="3"] .aiblog-track, .aiblog-slider[data-columns="4"] .aiblog-track { grid-auto-columns: 86%; } .aiblog-card-title { font-size: 17px; } .aiblog-card-body { padding: 16px 16px 18px; } .aiblog-toc { padding: 14px 16px; } .aiblog-section { margin-top: 34px; } .aiblog-products { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; } } @media print { .aiblog-toc, .aiblog-related, .aiblog-products, .aiblog-arrow { display: none; } .aiblog-content { font-size: 12pt; } }