/* * Стили блога витрины (/blog, /blog/) — SEO-доработки 2026-09, пакет N. * Отдельный файл (public/storefront.css правит другой исполнитель): подключается * ТОЛЬКО страницами блога (``, React * поднимает его в после storefront.css). Токены — как у остальной витрины: * шрифт FuturaPT наследуется от body, чёрный текст, серые #636363 / рамки #e9e9e9, * ширины и отступы совпадают с каталогом (.works-catalog-list) и CMS (.sf-cms). */ .sf-blog { color: #000; } /* ---- Лента: сетка карточек --------------------------------------------------- */ .sf-blog__grid { display: flex; flex-wrap: wrap; margin: 0 -15px 40px; } .sf-blog-card { width: 33.333%; padding: 0 15px 40px; box-sizing: border-box; display: flex; flex-direction: column; } .sf-blog-card__cover { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f5f5f5; margin-bottom: 16px; } .sf-blog-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .sf-blog-card:hover .sf-blog-card__cover img { transform: scale(1.03); } .sf-blog-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; line-height: 140%; text-transform: uppercase; letter-spacing: 0.04em; color: #636363; margin-bottom: 10px; } .sf-blog-card__title { font-weight: 400; font-size: 22px; line-height: 125%; margin: 0 0 10px; } .sf-blog-card__title a { color: inherit; text-decoration: none; } .sf-blog-card__title a:hover { opacity: 0.6; } .sf-blog-card__excerpt { font-size: 16px; line-height: 145%; color: #333; margin: 0 0 14px; } .sf-blog-card__more { margin-top: auto; align-self: flex-start; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: #000; text-decoration: none; border-bottom: 1px solid #000; padding-bottom: 3px; } .sf-blog-card__more:hover { opacity: 0.6; } /* ---- Статья ------------------------------------------------------------------- */ .sf-article { max-width: 860px; margin: 0 auto 40px; } .sf-article__head { margin-bottom: 28px; } .sf-article__group { font-size: 13px; line-height: 140%; text-transform: uppercase; letter-spacing: 0.04em; color: #636363; margin-bottom: 12px; } .sf-article__title { font-weight: 400; font-size: 40px; line-height: 115%; margin: 0 0 14px; } .sf-article__meta { font-size: 14px; line-height: 140%; color: #636363; } .sf-article__cover { margin: 0 0 32px; } .sf-article__cover img { display: block; width: 100%; height: auto; } /* Типографика тела статьи (rich-text из админки). */ .sf-article__body { font-size: 18px; line-height: 150%; } .sf-article__body h2 { font-weight: 400; font-size: 28px; line-height: 125%; margin: 36px 0 14px; } .sf-article__body h3 { font-weight: 400; font-size: 22px; line-height: 130%; margin: 28px 0 12px; } .sf-article__body h4 { font-weight: 400; font-size: 19px; line-height: 130%; margin: 22px 0 10px; } .sf-article__body p { margin: 0 0 16px; } .sf-article__body ul, .sf-article__body ol { margin: 0 0 16px; padding-left: 24px; } .sf-article__body li { margin-bottom: 8px; } .sf-article__body a { color: #000; text-decoration: underline; } .sf-article__body a:hover { text-decoration: none; } .sf-article__body img { max-width: 100%; height: auto; display: block; margin: 24px auto; } .sf-article__body figure { margin: 24px 0; } .sf-article__body figcaption { font-size: 14px; color: #636363; text-align: center; margin-top: 8px; } .sf-article__body blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 2px solid #000; font-size: 20px; line-height: 145%; } .sf-article__body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; } .sf-article__body th, .sf-article__body td { padding: 10px 12px; border: 1px solid #c1c1c1; text-align: left; } .sf-article__body iframe, .sf-article__body video { max-width: 100%; } .sf-article__body > *:first-child { margin-top: 0; } .sf-article__body > *:last-child { margin-bottom: 0; } /* Низ статьи: перелинковка в каталог + «Все статьи». */ .sf-article__footer { margin-top: 40px; padding-top: 28px; border-top: 1px solid #e9e9e9; } .sf-article__catalog-title { font-size: 13px; line-height: 140%; text-transform: uppercase; letter-spacing: 0.04em; color: #636363; margin-bottom: 12px; } .sf-article__catalog-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; } .sf-article__catalog-list a { display: inline-block; padding: 9px 18px; border: 1px solid #000; color: #000; text-decoration: none; font-size: 14px; line-height: 140%; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.15s, color 0.15s; } .sf-article__catalog-list a:hover { background: #000; color: #fff; } .sf-article__all { display: inline-block; font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: #000; text-decoration: none; border-bottom: 1px solid #000; padding-bottom: 3px; } .sf-article__all:hover { opacity: 0.6; } /* ---- Адаптив ------------------------------------------------------------------ */ @media (max-width: 991px) { .sf-blog-card { width: 50%; } .sf-article__title { font-size: 32px; } .sf-article__body { font-size: 17px; } .sf-article__body h2 { font-size: 24px; } } @media (max-width: 600px) { .sf-blog__grid { margin: 0 0 30px; } .sf-blog-card { width: 100%; padding: 0 0 32px; } .sf-blog-card__title { font-size: 20px; } .sf-article__title { font-size: 26px; } .sf-article__body { font-size: 16px; } .sf-article__body h2 { font-size: 22px; } .sf-article__body h3 { font-size: 19px; } }