/* ========================================================================= seo-zona.ru — тема новостника Загружается ПОСЛЕ bootstrap.min.css. Из Bootstrap используются только сетка (.row/.col-*) и горстка утилит; его компоненты не подключены и не нужны. Правило именования: всё своё — с префиксом .sz-. Голые классы Bootstrap (.nav, .card, .btn, .badge, .section, .container) НЕ переопределяем — тема грузится позже и молча сломала бы дефолтные страницы поиска и 404, которых в макете не было (THEMES_GUIDE §11.21). Светлая/тёмная — через [data-theme] на ; параллельно ведём [data-bs-theme], чтобы за темой шло и то, что красит сам Bootstrap. ========================================================================= */ /* --- Токены ------------------------------------------------------------ */ :root { --bg: #ffffff; --surface: #f5f6f8; --surface-2: #eceef2; --ink: #10131a; --ink-soft: #333a48; --muted: #5c6675; --line: #e3e6ec; --accent: #2f4bff; --accent-2: #eaedff; --on-accent: #ffffff; --signal: #00875f; --signal-bg: #e7f7f1; --source: #8a5200; --source-bg: #fdf3e3; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(16,19,26,.05), 0 8px 24px rgba(16,19,26,.06); --maxw: 1220px; /* Onest — вариативный, self-hosted, лежит в ядре движка. В макете стоял Inter; заменён сознательно: Onest уже отдаётся с этого домена, покрывает начертания 400–800 двумя файлами и нарисован под кириллицу. Тянуть ради макета второе семейство незачем. */ --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } :root[data-theme="dark"] { --bg: #0d1015; --surface: #151922; --surface-2: #1d2230; --ink: #e9edf5; --ink-soft: #c6cddb; --muted: #97a1b2; --line: #262c39; --accent: #7d93ff; --accent-2: #1b2140; --on-accent: #0d1015; --signal: #35d6a4; --signal-bg: #10281f; --source: #e5ab5c; --source-bg: #2a2114; --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35); } /* --- База -------------------------------------------------------------- */ * { -webkit-tap-highlight-color: transparent; } body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Базовый размер иконок дефолтных компонентов. Тема не грузит site-base.css, а голый без размера рисуется в SVG-дефолт 300×150 — на 62px это давало гигантские стрелки в листинге (THEMES_GUIDE §11.14). */ .icon { width: 1em; height: 1em; vertical-align: -.125em; flex: none; } .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } h1, h2, h3, h4 { font-weight: 680; letter-spacing: -.02em; line-height: 1.18; } .sz-eyebrow { font-size: 12px; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); } /* Отступ контентных страниц. Скоупим на :not(.homepage), иначе паддинг главной складывался бы с секциями и давал зазор в полэкрана на внутренних (THEMES_GUIDE §11.21, кейс Terra Nera). */ body:not(.homepage) .sz-page { padding-block: 28px 8px; } /* --- Шапка ------------------------------------------------------------- */ .sz-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .sz-header__bar { display: flex; align-items: center; gap: 22px; height: 64px; } .sz-logo { display: flex; align-items: center; gap: 10px; flex: none; } .sz-logo:hover { text-decoration: none; } /* Знак — инлайновый SVG на currentColor, без плашки: в тёмной теме плашка превращалась в яркий прямоугольник рядом с текстом, а знак идёт за темой сам. */ .sz-logo__mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--accent); } .sz-logo__mark svg { width: 100%; height: 100%; display: block; } .sz-logo__text { font-weight: 720; font-size: 18px; letter-spacing: -.03em; color: var(--ink); } .sz-logo__text span { color: var(--muted); font-weight: 500; } /* Меню. Разметку печатает NavigationService из navigations/navigation_items: container_type='nav', container_class='sz-nav'. Один и тот же {%navigation:main%} стоит во фрагменте шапки дважды — в строке и в выпадающем мобильном блоке; какая копия видна, решает media-query ниже. Источник пунктов при этом один, править их можно в админке. */ .sz-nav { display: flex; gap: 2px; margin-inline-start: auto; } .sz-nav a { display: inline-block; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 14.5px; font-weight: 520; white-space: nowrap; } .sz-nav a:hover { background: var(--surface); color: var(--ink); text-decoration: none; } .sz-nav a[aria-current="page"] { background: var(--accent-2); color: var(--accent); } .sz-actions { display: flex; align-items: center; gap: 6px; flex: none; } .sz-iconbtn { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: transparent; color: var(--ink-soft); cursor: pointer; transition: background .15s ease, color .15s ease; } .sz-iconbtn:hover { background: var(--surface); color: var(--ink); } .sz-iconbtn svg { width: 18px; height: 18px; } /* Иконка темы: показываем ту, что соответствует режиму */ .sz-iconbtn .i-sun { display: none; } :root[data-theme="dark"] .sz-iconbtn .i-sun { display: block; } :root[data-theme="dark"] .sz-iconbtn .i-moon { display: none; } .sz-burger { display: none; } /* Мобильное меню */ .sz-mobile { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: 10px 0 16px; } .sz-mobile.is-open { display: block; } .sz-mobile .sz-nav { display: block; margin: 0; } .sz-mobile .sz-nav a { display: block; padding: 11px 4px; border-radius: 0; color: var(--ink-soft); font-weight: 540; font-size: 16px; border-bottom: 1px solid var(--line); } .sz-mobile .sz-nav a:last-child { border-bottom: 0; } .sz-mobile .sz-nav a:hover { background: transparent; color: var(--accent); } @media (max-width: 991px) { /* Меню строки прячем, а кнопки прижимаем вправо сами: до этой ширины их прижимало auto-поле меню, и без замены они уехали бы к логотипу. */ .sz-header__bar > .sz-nav { display: none; } .sz-header__bar .sz-actions { margin-inline-start: auto; } .sz-burger { display: grid; } } @media (min-width: 992px) { .sz-mobile { display: none !important; } } /* --- Полоса статуса ленты ---------------------------------------------- */ .sz-strip { border-bottom: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--muted); } .sz-strip__in { display: flex; align-items: center; gap: 10px; min-height: 40px; flex-wrap: wrap; } .sz-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; } .sz-strip strong { color: var(--ink-soft); font-weight: 600; } /* --- Крошки ------------------------------------------------------------ Разметку печатает движковый universal-breadcrumbs (он же даёт BreadcrumbList). Скоупим по id — так мы не трогаем сам класс .breadcrumb, который Bootstrap отдаёт другим страницам. */ #universal-breadcrumbs { background: transparent !important; padding: 0 !important; border-bottom: 1px solid var(--line); } #universal-breadcrumbs .container { max-width: var(--maxw); padding-inline: 20px; } #universal-breadcrumbs .breadcrumb { font-size: 13px; padding-block: 12px; margin: 0; --bs-breadcrumb-divider: '/'; } #universal-breadcrumbs .breadcrumb-item, #universal-breadcrumbs .breadcrumb-item a { color: var(--muted); } #universal-breadcrumbs .breadcrumb-item a:hover { color: var(--accent); } #universal-breadcrumbs .breadcrumb-item.active { color: var(--ink-soft); } #universal-breadcrumbs .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); opacity: .5; } /* --- Бейдж рубрики ----------------------------------------------------- */ .sz-badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--accent-2); color: var(--accent); font-size: 11.5px; font-weight: 660; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .sz-badge:hover { text-decoration: none; filter: brightness(.97); } .sz-badge--author { background: var(--signal-bg); color: var(--signal); } /* --- Мета -------------------------------------------------------------- */ .sz-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); } .sz-meta__sep { opacity: .45; } /* --- Карточка ---------------------------------------------------------- */ .sz-card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .sz-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow); } .sz-card__thumb { aspect-ratio: 16 / 9; background: radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), linear-gradient(135deg, var(--surface-2), var(--surface)); position: relative; overflow: hidden; } .sz-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sz-card__body { padding: 16px 17px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .sz-card__title { font-size: 17px; font-weight: 660; line-height: 1.3; letter-spacing: -.015em; margin: 0; } .sz-card__title a { color: var(--ink); } .sz-card__title a:hover { color: var(--accent); text-decoration: none; } .sz-card__lead { font-size: 14.5px; color: var(--muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sz-card__foot { margin-top: auto; padding-top: 4px; } .sz-card--flat .sz-card__body { padding: 15px 16px; } /* --- Главный материал -------------------------------------------------- */ .sz-lead-card { display: grid; gap: 0; } @media (min-width: 992px) { .sz-lead-card { grid-template-columns: 1.35fr 1fr; align-items: stretch; } .sz-lead-card .sz-card__thumb { aspect-ratio: auto; height: 100%; min-height: 320px; } } .sz-lead-card .sz-card__title { font-size: clamp(22px, 2.4vw, 31px); } .sz-lead-card .sz-card__lead { font-size: 16px; -webkit-line-clamp: 4; line-clamp: 4; } .sz-lead-card .sz-card__body { padding: 24px 26px 26px; gap: 12px; justify-content: center; } /* --- Заголовок секции -------------------------------------------------- */ .sz-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .sz-sechead h1, .sz-sechead h2 { font-size: 20px; margin: 0; letter-spacing: -.02em; } .sz-sechead a { font-size: 14px; font-weight: 560; white-space: nowrap; } /* Заголовок рубрики — крупнее секционного: это h1 страницы */ .sz-sechead--page h1 { font-size: clamp(24px, 3vw, 32px); } /* --- Сайдбар ----------------------------------------------------------- */ .sz-aside { display: flex; flex-direction: column; gap: 22px; } .sz-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; } .sz-panel h2, .sz-panel h3 { font-size: 15px; margin: 0 0 14px; letter-spacing: -.01em; } .sz-panel p { font-size: 14.5px; color: var(--muted); margin: 0; } .sz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sz-list li { padding: 11px 0; border-top: 1px solid var(--line); } .sz-list li:first-child { padding-top: 0; border-top: 0; } .sz-list a { color: var(--ink); font-size: 14.5px; font-weight: 550; line-height: 1.35; display: block; } .sz-list a:hover { color: var(--accent); text-decoration: none; } .sz-list .sz-meta { margin-top: 5px; font-size: 12.5px; } .sz-list a[aria-current="page"] { color: var(--accent); } .sz-num { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-inline-end: 7px; } /* --- Статья ------------------------------------------------------------ */ .sz-article { max-width: 760px; } .sz-article h1 { font-size: clamp(27px, 3.6vw, 40px); margin: 12px 0 16px; } .sz-article__lead { font-size: 19px; line-height: 1.5; color: var(--ink-soft); margin-bottom: 26px; } .sz-hero-img { aspect-ratio: 21 / 9; border-radius: var(--radius); background: radial-gradient(120% 130% at 20% 5%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%), linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); margin-bottom: 28px; overflow: hidden; } .sz-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sz-body { font-size: 17px; line-height: 1.72; color: var(--ink-soft); } .sz-body > * + * { margin-top: 20px; } .sz-body h2 { font-size: 23px; color: var(--ink); margin-top: 34px; } .sz-body h3 { font-size: 19px; color: var(--ink); margin-top: 28px; } .sz-body ul, .sz-body ol { padding-inline-start: 22px; } .sz-body li + li { margin-top: 7px; } .sz-body strong { color: var(--ink); font-weight: 650; } .sz-body img { max-width: 100%; height: auto; border-radius: var(--radius); } .sz-body blockquote { margin: 0; padding-inline-start: 18px; border-inline-start: 3px solid var(--accent); color: var(--ink); font-size: 18px; } .sz-body table { width: 100%; border-collapse: collapse; font-size: 15px; } .sz-body th, .sz-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: start; } .sz-body th { background: var(--surface); color: var(--ink); font-weight: 650; } /* Блоки-обязательства: «Коротко» и «Что это меняет» */ .sz-box { border-radius: var(--radius); padding: 18px 20px; border: 1px solid var(--line); background: var(--surface); } .sz-box__label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; } .sz-box ul { margin: 0; padding-inline-start: 20px; } .sz-box li + li { margin-top: 7px; } .sz-box p:last-child { margin-bottom: 0; } .sz-box--tldr .sz-box__label { color: var(--muted); } /* «Что это меняет» — визуально акцентный по требованию SITE_STRUCTURE §4: материал без этого блока не публикуется, и он должен читаться как вывод редакции, а не как ещё один абзац. */ .sz-box--impact { background: var(--signal-bg); border-color: color-mix(in srgb, var(--signal) 32%, var(--line)); border-inline-start: 3px solid var(--signal); } .sz-box--impact .sz-box__label { color: var(--signal); } .sz-box--source { background: var(--source-bg); border-color: color-mix(in srgb, var(--source) 30%, var(--line)); font-size: 14.5px; } .sz-box--source .sz-box__label { color: var(--source); } .sz-box--source a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* Чипы «кому важно» */ .sz-chips { display: flex; flex-wrap: wrap; gap: 8px; } .sz-chip { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 13px; color: var(--ink-soft); } a.sz-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } /* --- Контентные страницы (о проекте, контакты, политика) --------------- */ .sz-page .page-content { max-width: 760px; } .sz-page .page-title { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 20px; } .sz-page .content-text { font-size: 17px; line-height: 1.72; color: var(--ink-soft); } .sz-page .content-text > * + * { margin-top: 18px; } .sz-page .content-text h2 { font-size: 22px; color: var(--ink); margin-top: 32px; } .sz-page .content-text h3 { font-size: 18px; color: var(--ink); margin-top: 26px; } .sz-page .content-text ul, .sz-page .content-text ol { padding-inline-start: 22px; } .sz-page .content-text li + li { margin-top: 6px; } .sz-page .content-text strong { color: var(--ink); font-weight: 650; } /* --- Пагинация --------------------------------------------------------- Своя, ссылками. Дефолтный компонент движка рисует только JS-кнопку «Загрузить ещё» (её ведёт catalog-filters.js, которого тема не грузит), и обходчику после первой страницы идти некуда. */ .sz-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 36px; } .sz-pager a, .sz-pager span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 560; color: var(--ink-soft); } .sz-pager a:hover { background: var(--surface); color: var(--ink); text-decoration: none; } .sz-pager .is-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .sz-pager .is-gap { border-color: transparent; color: var(--muted); } /* --- Пустое состояние -------------------------------------------------- */ .sz-empty { text-align: center; padding: 64px 20px; color: var(--muted); font-size: 16px; } /* --- Флеш-сообщения ---------------------------------------------------- */ .sz-flash { margin-top: 20px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); font-size: 15px; } .sz-flash--success { background: var(--signal-bg); border-color: color-mix(in srgb, var(--signal) 32%, var(--line)); } .sz-flash--error, .sz-flash--danger { background: var(--source-bg); border-color: color-mix(in srgb, var(--source) 30%, var(--line)); } /* --- Подвал ------------------------------------------------------------ */ .sz-footer { margin-top: 72px; border-top: 1px solid var(--line); background: var(--surface); padding: 44px 0 30px; } .sz-footer h2, .sz-footer h3, .sz-footer h4 { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .sz-footer ul { list-style: none; margin: 0; padding: 0; } .sz-footer li + li { margin-top: 9px; } .sz-footer a { color: var(--ink-soft); font-size: 14.5px; } .sz-footer a:hover { color: var(--accent); } /* Меню в подвале печатает тот же NavigationService. Рубрики приезжают тем же {%navigation:main%}, что и в шапке (