/* ============================================================ system4.shop — тема блога (mastershop_premium child) Дизайн по §9 ТЗ. Все стили scoped на .blog-page (класс на ставит Site-обёртка), чтобы не течь в витрину. Каркас (header/footer/палитра/PT Sans) наследуется от витрины. ============================================================ */ .blog-page{ /* --- Токены (из mastershop.css витрины) --- */ --bg-page:#f7f7f7; --bg-card:#ffffff; --text:#000000; --muted:#6e6e6e; --muted-2:#656565; --accent:#d12920; --accent-dark:#b5231b; --border:#ebebeb; --border-2:#dedede; --read:760px; --bp:1000px; } /* колонка контента блога (одна колонка, без сайдбара в v1) */ .blog-page .blog-content{ width:100%; } /* ---------- Хлебные крошки (используем .breadcrumbs витрины) ---------- */ .blog-page .breadcrumbs{ margin:0 0 18px; } /* ============================================================ ЛИСТИНГ ============================================================ */ .blog-intro{ margin:0 0 32px; } .blog-intro__h1, .blog-page h1.blog-intro__h1{ margin:0 0 14px; font-size:32px; line-height:38px; font-weight:600; color:var(--text); } .blog-intro__text{ max-width:var(--read); color:var(--muted); font-size:15px; line-height:1.6; } .blog-intro__text p{ margin:0 0 10px; } /* сетка карточек: 3 / 2 / 1 */ .blog-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; margin:0 0 40px; } @media (max-width:1000px){ .blog-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } } @media (max-width:680px){ .blog-grid{ grid-template-columns:1fr; gap:20px; } } /* карточка статьи */ .blog-card{ position:relative; display:flex; flex-direction:column; background:var(--bg-card); border:1px solid var(--border); border-radius:0; overflow:hidden; transition:border-color .15s ease; } .blog-card:hover{ border-color:var(--accent); } .blog-card__imagewrap{ display:block; aspect-ratio:3/2; overflow:hidden; background:var(--bg-page); } .blog-card__image{ width:100%; height:100%; object-fit:cover; display:block; } .blog-card__imagewrap--placeholder{ display:flex; align-items:center; justify-content:center; color:var(--border-2); } .blog-card__imagewrap--placeholder i{ font-size:42px; } .blog-card__body{ display:flex; flex-direction:column; flex:1; padding:20px; } .blog-card__meta{ font-size:13px; line-height:1.4; color:var(--muted); margin:0 0 8px; } .blog-card__meta .sep{ margin:0 6px; } .blog-card__tag{ color:var(--accent); } .blog-card__title{ margin:0 0 10px; font-size:20px; line-height:26px; font-weight:600; } .blog-card__title a{ color:var(--text); text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s ease; } .blog-card:hover .blog-card__title a, .blog-card__title a:hover{ color:var(--accent); } .blog-card__excerpt{ margin:0 0 15px; font-size:14px; line-height:1.5; color:var(--muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .blog-card__more{ margin-top:auto; font-size:14px; font-weight:600; color:var(--accent); text-decoration:none; } .blog-card__more:hover{ text-decoration:underline; } /* ссылка-оверлей на всю карточку (заголовок остаётся семантической ссылкой) */ .blog-card__overlay{ position:absolute; inset:0; z-index:1; } .blog-card__title a, .blog-card__more{ position:relative; z-index:2; } /* пустое состояние */ .blog-empty{ background:var(--bg-card); border:1px solid var(--border); padding:40px 20px; text-align:center; color:var(--muted); font-size:16px; } /* ---------- Пагинация (нативный {wa_pagination}) ---------- */ .blog-pagination{ margin:40px 0 0; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; } .blog-pagination a, .blog-pagination .selected, .blog-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border:1px solid var(--border); background:var(--bg-card); font-size:14px; color:var(--text); text-decoration:none; line-height:1; transition:border-color .15s, color .15s, background .15s; } .blog-pagination a:hover{ border-color:var(--accent); color:var(--accent); } .blog-pagination .selected, .blog-pagination a.selected{ background:var(--accent); border-color:var(--accent); color:#fff; } /* ============================================================ СТАТЬЯ ============================================================ */ .article{ } .article__head{ max-width:var(--read); } .article__title{ margin:0 0 15px; font-size:32px; line-height:38px; font-weight:600; color:var(--text); } .article__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--muted); border-bottom:1px solid var(--border); padding-bottom:20px; margin:0 0 24px; } .article__author{ display:inline-flex; align-items:center; gap:8px; } .article__author img{ width:28px; height:28px; border-radius:50%; object-fit:cover; } .article__author a{ color:var(--text); text-decoration:none; } .article__author a:hover{ color:var(--accent); } .article__hero{ margin:0 0 28px; } .article__hero img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; } .article__hero-caption{ margin-top:6px; font-size:13px; color:var(--muted); text-align:center; } /* тело статьи */ .article__body{ max-width:var(--read); font-size:16px; line-height:1.7; color:var(--text); } .article__body p{ margin:0 0 20px; } .article__body h2{ margin:40px 0 15px; font-size:24px; line-height:32px; font-weight:600; } .article__body h3{ margin:30px 0 10px; font-size:20px; line-height:28px; font-weight:600; } .article__body a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; } .article__body a:hover{ color:var(--accent); } .article__body ul, .article__body ol{ margin:0 0 20px; padding-left:22px; } .article__body li{ margin-bottom:8px; } .article__body img{ max-width:100%; height:auto; margin:25px 0; display:block; } .article__body figure{ margin:25px 0; } .article__body figcaption{ font-size:13px; color:var(--muted); text-align:center; margin-top:6px; } .article__body blockquote{ border-left:4px solid var(--accent); padding:5px 0 5px 20px; margin:25px 0; color:var(--text); font-style:italic; } .article__body table{ width:100%; border-collapse:collapse; margin:0 0 20px; } .article__body th, .article__body td{ border:1px solid var(--border); padding:10px; text-align:left; } .article__body th{ background:var(--bg-page); } .article__body .table-scroll{ overflow-x:auto; } .article__body .note{ background:#fbeeed; border-left:4px solid var(--accent); padding:15px 20px; margin:25px 0; } /* ---------- Блок «Товари зі статті» / «Рекомендуємо» ---------- */ .article-products{ margin:40px 0; } .article-products__title{ margin:0 0 20px; font-size:24px; line-height:30px; font-weight:600; } .article-products__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } @media (max-width:1000px){ .article-products__grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:680px){ .article-products__grid{ grid-template-columns:repeat(2,1fr); } } /* карточка товара переиспользует .product-tile витрины; ниже — только страховка геометрии */ .article-products .product-tile{ background:var(--bg-card); } .article-products .product-tile__name a{ color:var(--text); text-decoration:none; } .article-products .product-tile__name a:hover{ color:var(--accent); } /* ============================================================ АДАПТИВ ============================================================ */ @media (max-width:1000px){ .blog-intro__h1, .article__title{ font-size:24px; line-height:30px; } .article__head, .article__body{ max-width:100%; } .article__body{ font-size:16px; } }