/** * PROMAREN Blog Redesign — основной стилевой слой. * * Дизайн-система продолжает promaren.ru: * --primary: 203 95% 42%, --background, --foreground, --card, * --border, --radius — те же имена, что и в app/globals.css * на основном сайте, чтобы UI был визуально единым. * * Поддержка тем: тёмная по умолчанию (--theme-* из :root), * светлая включается через [data-theme="light"] на . * * Все стили префиксованы .promaren-blog-* / [data-promaren-blog] * чтобы не пересекаться с существующей версткой adventure-resort. */ /* --------------------------------------------------------------- * 1. Дизайн-токены * * По умолчанию — светлая тема (как просил пользователь). * Переключатель в шапке выставляет html[data-theme="dark"] * → активируются токены тёмной темы. * --------------------------------------------------------------- */ :root { --pb-bg: #ffffff; --pb-bg-elev: #f7f7f7; --pb-fg: #1f1f1f; --pb-fg-muted: #5a5a5a; --pb-card: #ffffff; --pb-card-hover: #f4f8fb; --pb-border: #e5e7eb; --pb-border-strong: #cbd5e1; --pb-primary: hsl(203 95% 42%); --pb-primary-hover: hsl(203 95% 32%); --pb-primary-fg: #ffffff; --pb-accent-bg: hsl(200 100% 95%); --pb-overlay: rgba(0, 0, 0, 0.4); --pb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --pb-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --pb-radius: 12px; --pb-radius-sm: 8px; --pb-container: 1280px; --pb-gap: 24px; } html[data-theme="dark"] { --pb-bg: #000000; --pb-bg-elev: #0d0d0d; --pb-fg: #ffffff; --pb-fg-muted: #a0a0a0; --pb-card: #1a1a1a; --pb-card-hover: #232323; --pb-border: #2a2a2a; --pb-border-strong: #3a3a3a; --pb-primary: hsl(203 95% 50%); --pb-primary-hover: hsl(203 95% 60%); --pb-primary-fg: #ffffff; --pb-accent-bg: hsl(203 95% 14%); --pb-overlay: rgba(0, 0, 0, 0.55); --pb-shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --pb-shadow-md: 0 8px 24px rgba(0,0,0,0.45); } /* На страницах редизайна (body.promaren-blog-redesign) переменные токены темы перебивают встроенный inline `body { background:#000; color:#fff !important }` из header.php (он там для основной тёмной темы adventure-resort). Без этого светлая тема ломается. */ body.promaren-blog-redesign { background: var(--pb-bg) !important; color: var(--pb-fg) !important; } body.promaren-blog-redesign h1, body.promaren-blog-redesign h2, body.promaren-blog-redesign h3, body.promaren-blog-redesign h4, body.promaren-blog-redesign h5, body.promaren-blog-redesign h6 { color: var(--pb-fg) !important; } body.promaren-blog-redesign p, body.promaren-blog-redesign li, body.promaren-blog-redesign span, body.promaren-blog-redesign div, body.promaren-blog-redesign time, body.promaren-blog-redesign blockquote { color: inherit; } /* Главный контент статьи / single — самое читаемое. Используем универсальный селектор `*` чтобы перебить любые жёсткие color из style.css темы (которая прописывает color:#1a1a1a для `.entry-content p span`, `.post-content`, и т.п.). */ body.promaren-blog-redesign .promaren-blog-single__title { color: var(--pb-fg) !important; } body.promaren-blog-redesign .promaren-blog-single__content, body.promaren-blog-redesign .promaren-blog-single__content * { color: var(--pb-fg) !important; } /* Ссылки — primary blue (override universal) */ body.promaren-blog-redesign .promaren-blog-single__content a, body.promaren-blog-redesign .promaren-blog-single__content a * { color: var(--pb-primary) !important; } /* Code/pre — оставим accent muted чтобы выделялись от обычного текста */ body.promaren-blog-redesign .promaren-blog-single__content code, body.promaren-blog-redesign .promaren-blog-single__content pre, body.promaren-blog-redesign .promaren-blog-single__content pre * { color: var(--pb-fg) !important; background: var(--pb-bg-elev) !important; } /* Цитаты — фон карточки + muted текст */ body.promaren-blog-redesign .promaren-blog-single__content blockquote, body.promaren-blog-redesign .promaren-blog-single__content blockquote * { color: var(--pb-fg-muted) !important; background: var(--pb-bg-elev) !important; } /* style.css 1310-1331 имеет селектор `.single main#main article p` со специфичностью (0,1,1,3) — побеждает наши `body.X .Y *` (0,0,2,1) и заливает весь контент статьи `color:#1f2d3d`. На тёмной теме это тёмно-серый на чёрном — нечитаемо. Перебиваем тем же ID-селектором `main#main` и добавляем `article` — получаем (0,1,3,3+) — выше. */ body.promaren-blog-redesign main#main.promaren-blog-single article, body.promaren-blog-redesign main#main.promaren-blog-single article p, body.promaren-blog-redesign main#main.promaren-blog-single article li, body.promaren-blog-redesign main#main.promaren-blog-single article span, body.promaren-blog-redesign main#main.promaren-blog-single article div, body.promaren-blog-redesign main#main.promaren-blog-single article h1, body.promaren-blog-redesign main#main.promaren-blog-single article h2, body.promaren-blog-redesign main#main.promaren-blog-single article h3, body.promaren-blog-redesign main#main.promaren-blog-single article h4, body.promaren-blog-redesign main#main.promaren-blog-single article h5, body.promaren-blog-redesign main#main.promaren-blog-single article h6, body.promaren-blog-redesign main#main.promaren-blog-single article figcaption, body.promaren-blog-redesign main#main.promaren-blog-single article .entry-content, body.promaren-blog-redesign main#main.promaren-blog-single article .promaren-blog-single__content, body.promaren-blog-redesign main#main.promaren-blog-single article .promaren-blog-single__content * { color: var(--pb-fg) !important; } body.promaren-blog-redesign main#main.promaren-blog-single article .promaren-blog-single__meta, body.promaren-blog-redesign main#main.promaren-blog-single article .promaren-blog-single__meta * { color: var(--pb-fg-muted) !important; } body.promaren-blog-redesign main#main.promaren-blog-single article .promaren-blog-single__content blockquote, body.promaren-blog-redesign main#main.promaren-blog-single article .promaren-blog-single__content blockquote * { color: var(--pb-fg-muted) !important; } body.promaren-blog-redesign main#main.promaren-blog-single article a, body.promaren-blog-redesign main#main.promaren-blog-single article .promaren-blog-single__content a, body.promaren-blog-redesign main#main.promaren-blog-single article .promaren-blog-single__content a * { color: var(--pb-primary) !important; } /* Карточки и архивы тоже вынуждаем читать токены */ body.promaren-blog-redesign .promaren-blog-card, body.promaren-blog-redesign .promaren-blog-archive-header, body.promaren-blog-redesign .promaren-blog-stats, body.promaren-blog-redesign .promaren-blog-author, body.promaren-blog-redesign .promaren-blog-subscribe { background: var(--pb-card) !important; color: var(--pb-fg) !important; border-color: var(--pb-border) !important; } body.promaren-blog-redesign .promaren-blog-card__title, body.promaren-blog-redesign .promaren-blog-archive-header__title { color: var(--pb-fg) !important; } body.promaren-blog-redesign .promaren-blog-card__excerpt, body.promaren-blog-redesign .promaren-blog-archive-header__desc, body.promaren-blog-redesign .promaren-blog-card__meta, body.promaren-blog-redesign .promaren-blog-archive-header__kicker, body.promaren-blog-redesign .promaren-blog-toolbar__counter, body.promaren-blog-redesign .promaren-blog-stats__label, body.promaren-blog-redesign .promaren-blog-author__bio, body.promaren-blog-redesign .promaren-blog-subscribe__sub, body.promaren-blog-redesign .promaren-blog-subscribe__alt { color: var(--pb-fg-muted) !important; } /* --------------------------------------------------------------- * 2. Контейнер и сетка * --------------------------------------------------------------- */ .promaren-blog-wrap { box-sizing: border-box; width: 100%; margin: 0 auto; padding: 0 16px; max-width: var(--pb-container); color: var(--pb-fg); } .promaren-blog-section { margin: 32px auto; padding: 0 16px; width: 100%; max-width: var(--pb-container); } @media (min-width: 1024px) { .promaren-blog-section { padding: 0 24px; } } /* --------------------------------------------------------------- * 3. Theme toggle button * --------------------------------------------------------------- */ .promaren-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--pb-border); background: var(--pb-card); color: var(--pb-fg); cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease, color .15s ease; } .promaren-theme-toggle:hover { background: var(--pb-card-hover); border-color: var(--pb-border-strong); } .promaren-theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; } /* По умолчанию (light) показываем moon — кнопка значит «включить dark». В dark-режиме показываем sun — «включить light». Спецификация селектора (0,2,1) равна `.promaren-theme-toggle svg`, но позднее в CSS — побеждает в каскаде. */ .promaren-theme-toggle .pb-icon-sun { display: none !important; } .promaren-theme-toggle .pb-icon-moon { display: block !important; } html[data-theme="dark"] .promaren-theme-toggle .pb-icon-moon { display: none !important; } html[data-theme="dark"] .promaren-theme-toggle .pb-icon-sun { display: block !important; } /* --------------------------------------------------------------- * 4. Tabs (рубрики, sticky под header) * --------------------------------------------------------------- */ .promaren-blog-tabs { position: sticky; top: 56px; /* высота шапки h-14 */ z-index: 40; background: color-mix(in srgb, var(--pb-bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--pb-border); } .promaren-blog-tabs__inner { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 10px 16px; margin: 0 auto; max-width: var(--pb-container); scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .promaren-blog-tabs__inner::-webkit-scrollbar { display: none; } .promaren-blog-tab { flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--pb-border); border-radius: 999px; background: var(--pb-card); color: var(--pb-fg); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; scroll-snap-align: start; white-space: nowrap; } .promaren-blog-tab:hover { background: var(--pb-card-hover); } .promaren-blog-tab.is-active { background: var(--pb-primary); border-color: var(--pb-primary); color: var(--pb-primary-fg); } /* --------------------------------------------------------------- * 5. Hero (featured article) * --------------------------------------------------------------- */ .promaren-blog-hero { position: relative; width: 100%; margin: 24px auto; border-radius: var(--pb-radius); overflow: hidden; background: var(--pb-card); color: #ffffff; min-height: 320px; display: flex; align-items: flex-end; } .promaren-blog-hero__bg { position: absolute; inset: 0; z-index: 0; } .promaren-blog-hero__bg img { width: 100%; height: 100%; object-fit: cover; } .promaren-blog-hero__bg::after { content: ''; position: absolute; inset: 0; /* Тройной слой: 1) горизонтальный — сильное затемнение слева (60%), где сидит заголовок/excerpt/CTA, плавно растворяется к правой части где обычно центральный субъект обложки; 2) вертикальный — лёгкое нижнее затемнение для контраста meta-полосы; 3) радиальный — мягкая виньетка из левого-нижнего угла под текст. Без шага 1 на светлых обложках (студийный портрет, белый bg) заголовок сливался с фоном — пользователь специально просил сильнее затемнить левую часть. */ background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.05) 100%), linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.30) 60%, rgba(0,0,0,0.55) 100%), radial-gradient(120% 70% at 15% 90%, rgba(0,0,0,0.5), transparent 70%); } .promaren-blog-hero__content { position: relative; z-index: 1; padding: 32px 24px; max-width: 720px; } /* Бейдж рубрики в hero — теперь стоит в meta-полосе под заголовком, а не overlay-овером поверх обложки. */ .promaren-blog-hero__badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,0.18); color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.28); } .promaren-blog-hero__title { font-size: clamp(22px, 4vw, 38px); font-weight: 700; line-height: 1.15; margin: 0 0 12px; color: #ffffff !important; /* text-shadow страхует читаемость на сложных обложках — даже если какое-то место картинки слишком яркое и сквозь overlay просвечивает. */ text-shadow: 0 2px 12px rgba(0,0,0,0.65), 0 1px 3px rgba(0,0,0,0.5); } .promaren-blog-hero__excerpt { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.92) !important; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,0.6); } .promaren-blog-hero__meta { display: flex; gap: 12px; align-items: center; color: rgba(255,255,255,0.7); font-size: 13px; margin-bottom: 16px; } /* Hero лежит на тёмной обложке — текст всегда белый, независимо от темы. Универсальный override `body.promaren-blog-redesign h1` в начале файла красит h1 в `var(--pb-fg)` (в light = #1f1f1f) → невидимо. Поэтому повторяем правила с увеличенной специфичностью. */ body.promaren-blog-redesign .promaren-blog-hero .promaren-blog-hero__title, body.promaren-blog-redesign .promaren-blog-hero h1.promaren-blog-hero__title { color: #ffffff !important; } body.promaren-blog-redesign .promaren-blog-hero .promaren-blog-hero__excerpt { color: rgba(255,255,255,0.92) !important; } body.promaren-blog-redesign .promaren-blog-hero .promaren-blog-hero__meta, body.promaren-blog-redesign .promaren-blog-hero .promaren-blog-hero__meta * { color: rgba(255,255,255,0.85) !important; } body.promaren-blog-redesign .promaren-blog-hero .promaren-blog-hero__badge { color: #ffffff !important; } .promaren-blog-hero__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: var(--pb-radius-sm); background: var(--pb-primary); color: var(--pb-primary-fg); font-weight: 600; text-decoration: none; transition: background .15s ease; } .promaren-blog-hero__cta:hover { background: var(--pb-primary-hover); color: var(--pb-primary-fg); } @media (min-width: 768px) { .promaren-blog-hero { min-height: 420px; } .promaren-blog-hero__content { padding: 40px 32px; } } @media (min-width: 1024px) { .promaren-blog-hero { min-height: 480px; } .promaren-blog-hero__content { padding: 56px 48px; } } /* --------------------------------------------------------------- * 6. Search & sort row * --------------------------------------------------------------- */ .promaren-blog-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 24px auto; padding: 0; } .promaren-blog-toolbar__search { position: relative; flex: 1 1 280px; min-width: 0; } .promaren-blog-toolbar__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--pb-fg-muted); pointer-events: none; } .promaren-blog-toolbar__search input { width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: var(--pb-radius-sm); border: 1px solid var(--pb-border); background: var(--pb-card); color: var(--pb-fg); font-size: 15px; } .promaren-blog-toolbar__search input:focus { outline: none; border-color: var(--pb-primary); box-shadow: 0 0 0 3px hsl(203 95% 42% / 0.18); } .promaren-blog-toolbar__sort { height: 44px; padding: 0 14px; border-radius: var(--pb-radius-sm); border: 1px solid var(--pb-border); background: var(--pb-card); color: var(--pb-fg); font-size: 14px; cursor: pointer; } .promaren-blog-toolbar__counter { color: var(--pb-fg-muted); font-size: 14px; margin-left: auto; } /* Кнопка-крестик внутри поля поиска (очистить введённое) */ .promaren-blog-toolbar__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--pb-fg-muted); cursor: pointer; } .promaren-blog-toolbar__clear:hover { background: var(--pb-card-hover); color: var(--pb-fg); } .promaren-blog-toolbar__clear[hidden] { display: none; } /* Чип «Сбросить фильтры» — появляется когда активна рубрика или поиск */ .promaren-blog-toolbar__reset { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pb-border-strong); background: var(--pb-card); color: var(--pb-fg); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .promaren-blog-toolbar__reset:hover { background: var(--pb-primary); color: var(--pb-primary-fg); border-color: var(--pb-primary); } .promaren-blog-toolbar__reset[hidden] { display: none; } /* --------------------------------------------------------------- * 7. Feed grid + card * --------------------------------------------------------------- */ .promaren-blog-feed { display: flex; flex-direction: column; gap: 24px; margin: 24px auto; } .promaren-blog-feed.is-loading { opacity: 0.6; pointer-events: none; } .promaren-blog-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 768px) { .promaren-blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .promaren-blog-grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .promaren-blog-grid--cols-2 { grid-template-columns: repeat(2, 1fr); } } .promaren-blog-card { background: var(--pb-card); border: 1px solid var(--pb-border); border-radius: var(--pb-radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .promaren-blog-card:hover { transform: translateY(-2px); box-shadow: var(--pb-shadow-md); border-color: var(--pb-border-strong); } .promaren-blog-card__link { display: block; color: inherit; text-decoration: none; height: 100%; } .promaren-blog-card__image { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pb-bg-elev); } .promaren-blog-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .promaren-blog-card:hover .promaren-blog-card__image img { transform: scale(1.04); } .promaren-blog-card__image-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--pb-fg-muted); font-weight: 700; letter-spacing: 0.1em; background: linear-gradient(135deg, var(--pb-card) 0%, var(--pb-bg-elev) 100%); } /* Бейдж рубрики теперь в body, над заголовком — не перекрывает обложку */ .promaren-blog-card__badge { display: inline-block; align-self: flex-start; padding: 3px 10px; margin-bottom: 10px; border-radius: 999px; background: var(--pb-accent-bg); color: var(--pb-primary); font-size: 12px; font-weight: 600; line-height: 1.4; border: 1px solid color-mix(in srgb, var(--pb-primary) 25%, transparent); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .promaren-blog-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; } .promaren-blog-card__meta { display: flex; gap: 12px; color: var(--pb-fg-muted); font-size: 13px; margin-top: 12px; } .promaren-blog-card__time::before { content: '· '; } .promaren-blog-card__title { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0 0 8px; color: var(--pb-fg); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .promaren-blog-card__excerpt { font-size: 14px; line-height: 1.5; color: var(--pb-fg-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .promaren-blog-empty { text-align: center; padding: 60px 24px; color: var(--pb-fg-muted); } /* --------------------------------------------------------------- * 8. CTA banners * --------------------------------------------------------------- */ .promaren-blog-cta-banner { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--pb-radius); background: linear-gradient(135deg, var(--pb-primary) 0%, hsl(203 95% 32%) 100%); color: #ffffff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; position: relative; overflow: hidden; } .promaren-blog-cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%); pointer-events: none; } .promaren-blog-cta-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 30px hsl(203 95% 30% / 0.45); color: #ffffff; } .promaren-blog-cta-banner__text { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; } .promaren-blog-cta-banner__title { font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; line-height: 1.25; } .promaren-blog-cta-banner__sub { font-size: 14px; opacity: 0.85; } .promaren-blog-cta-banner__btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px solid rgba(255,255,255,0.5); border-radius: var(--pb-radius-sm); background: transparent; color: #ffffff; font-size: 14px; font-weight: 600; align-self: flex-start; position: relative; z-index: 1; } @media (min-width: 768px) { .promaren-blog-cta-banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 28px 32px; } .promaren-blog-cta-banner__btn { align-self: center; flex: 0 0 auto; } } /* --------------------------------------------------------------- * 9. Load more button * --------------------------------------------------------------- */ .promaren-blog-loadmore { display: inline-flex; align-items: center; justify-content: center; margin: 24px auto; padding: 14px 28px; border: 1px solid var(--pb-border-strong); border-radius: var(--pb-radius-sm); background: var(--pb-card); color: var(--pb-fg); font-weight: 600; cursor: pointer; transition: background .15s ease; } .promaren-blog-loadmore:hover { background: var(--pb-card-hover); } .promaren-blog-loadmore[disabled] { opacity: 0.6; cursor: progress; } .promaren-blog-loadmore-wrap { display: flex; justify-content: center; } /* --------------------------------------------------------------- * 10. Compact stats strip * --------------------------------------------------------------- */ .promaren-blog-stats { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-around; align-items: center; padding: 20px 24px; border: 1px solid var(--pb-border); border-radius: var(--pb-radius); background: var(--pb-card); margin: 32px auto; } .promaren-blog-stats__item { display: flex; flex-direction: column; align-items: center; min-width: 120px; } .promaren-blog-stats__value { font-size: clamp(20px, 3vw, 26px); font-weight: 700; color: var(--pb-primary); } .promaren-blog-stats__label { font-size: 13px; color: var(--pb-fg-muted); } /* --------------------------------------------------------------- * 11. Subscription block * --------------------------------------------------------------- */ .promaren-blog-subscribe { display: flex; flex-direction: column; gap: 16px; padding: 28px 24px; border: 1px solid var(--pb-border); border-radius: var(--pb-radius); background: var(--pb-card); margin: 32px auto; } .promaren-blog-subscribe__title { font-size: 20px; font-weight: 700; margin: 0; } .promaren-blog-subscribe__sub { font-size: 14px; color: var(--pb-fg-muted); margin: 0; } .promaren-blog-subscribe__buttons { display: flex; flex-wrap: wrap; gap: 10px; } .promaren-blog-subscribe__btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: var(--pb-radius-sm); font-weight: 600; text-decoration: none; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; border: 1px solid transparent; } .promaren-blog-subscribe__btn--tg, .promaren-blog-subscribe__btn--max { background: var(--pb-primary); color: var(--pb-primary-fg); } .promaren-blog-subscribe__btn--tg:hover, .promaren-blog-subscribe__btn--max:hover { background: var(--pb-primary-hover); color: var(--pb-primary-fg); transform: translateY(-1px); box-shadow: 0 6px 20px hsl(203 95% 30% / 0.35); } /* MAX иконка через mask-image — заливаем currentColor (белым в primary кнопке). Реальный логотип лежит в assets/img/MaxIcon.png. */ .promaren-blog-subscribe__max-icon { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; background-color: currentColor; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-size: contain; mask-repeat: no-repeat; mask-position: center; } .promaren-blog-subscribe__alt { font-size: 13px; color: var(--pb-fg-muted); } .promaren-blog-subscribe__alt a { color: var(--pb-primary); text-decoration: none; } /* --------------------------------------------------------------- * 12. Author card (compact) * --------------------------------------------------------------- */ .promaren-blog-author { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--pb-border); border-radius: var(--pb-radius); background: var(--pb-card); margin: 32px auto; flex-wrap: wrap; } .promaren-blog-author__photo { width: 64px; height: 64px; border-radius: 999px; background: var(--pb-bg-elev); display: flex; align-items: center; justify-content: center; color: var(--pb-fg-muted); font-weight: 700; overflow: hidden; flex-shrink: 0; } .promaren-blog-author__photo img { width: 100%; height: 100%; object-fit: cover; } .promaren-blog-author__body { flex: 1 1 240px; } .promaren-blog-author__name { font-weight: 700; font-size: 16px; color: var(--pb-fg); } .promaren-blog-author__bio { font-size: 14px; color: var(--pb-fg-muted); margin: 4px 0 0; } .promaren-blog-author__links { display: flex; gap: 12px; flex-shrink: 0; } .promaren-blog-author__links a { color: var(--pb-primary); text-decoration: none; font-weight: 500; font-size: 14px; } /* --------------------------------------------------------------- * 13. Single post — clean reading * --------------------------------------------------------------- */ .promaren-blog-single { max-width: 760px; margin: 32px auto; padding: 0 16px; } .promaren-blog-single__cover { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--pb-radius); overflow: hidden; margin: 0 0 24px; background: var(--pb-card); } .promaren-blog-single__cover img { width: 100%; height: 100%; object-fit: cover; } .promaren-blog-single__meta { display: flex; gap: 12px; color: var(--pb-fg-muted); font-size: 14px; margin-bottom: 8px; } .promaren-blog-single__title { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 16px; font-weight: 700; color: var(--pb-fg); } .promaren-blog-single__content { font-size: 17px; line-height: 1.7; color: var(--pb-fg); } .promaren-blog-single__content h2 { font-size: 26px; margin: 32px 0 16px; } .promaren-blog-single__content h3 { font-size: 22px; margin: 28px 0 12px; } .promaren-blog-single__content p { margin: 0 0 18px; } .promaren-blog-single__content a { color: var(--pb-primary); text-decoration: underline; text-underline-offset: 3px; } .promaren-blog-single__content img { max-width: 100%; height: auto; border-radius: var(--pb-radius-sm); } .promaren-blog-single__content blockquote { border-left: 3px solid var(--pb-primary); padding: 8px 16px; margin: 20px 0; color: var(--pb-fg-muted); background: var(--pb-bg-elev); border-radius: 0 var(--pb-radius-sm) var(--pb-radius-sm) 0; } .promaren-blog-single__content pre { background: var(--pb-bg-elev); border: 1px solid var(--pb-border); border-radius: var(--pb-radius-sm); padding: 16px; overflow: auto; } /* --------------------------------------------------------------- * 14. Archive header (для archive.php) * --------------------------------------------------------------- */ .promaren-blog-archive-header { margin: 24px auto; padding: 24px; border-radius: var(--pb-radius); background: var(--pb-card); border: 1px solid var(--pb-border); } .promaren-blog-archive-header__kicker { color: var(--pb-fg-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; } .promaren-blog-archive-header__title { font-size: clamp(24px, 3.4vw, 34px); font-weight: 700; margin: 0 0 8px; color: var(--pb-fg); } .promaren-blog-archive-header__desc { font-size: 15px; color: var(--pb-fg-muted); margin: 0; } /* --------------------------------------------------------------- * 15. Hide legacy adventure-resort blog blocks on the new layout * (С чего начать / Каталог / Кейс-машина / Пульс / автор-dashboard / * timeline / нумерованная пагинация — в новом дизайне их нет). * --------------------------------------------------------------- */ body.promaren-blog-redesign .maren-blog-above-fold, body.promaren-blog-redesign .promaren-reading-route, body.promaren-blog-redesign .maren-blog-pulse, body.promaren-blog-redesign .promaren-categories-catalog, body.promaren-blog-redesign .promaren-case-machine, body.promaren-blog-redesign .promaren-author-dashboard, body.promaren-blog-redesign .promaren-timeline, body.promaren-blog-redesign .reading-progress-wrap, body.promaren-blog-redesign #secondary, body.promaren-blog-redesign .promaren-archive-header-mascot { display: none !important; } /* На главной блога убираем «Skip to content»-контейнер прежнего шаблона чтобы он не подмешивал bootstrap-сетку поверх нашего layout. */ body.promaren-blog-redesign #skip-content { padding: 0; } /* --------------------------------------------------------------- * 16. Header dynamic categories dropdown — unify with promaren-main-* * --------------------------------------------------------------- */ .promaren-main-header__theme { margin-left: 8px; display: inline-flex; align-items: center; } /* --------------------------------------------------------------- * 17. Header overrides — фиксы по фидбэку: * • hover-gap dropdown'а закрываем «мостом» через padding-top * и убираем visual gap (top: 100% вместо calc(100%+8px)) * • hover на nav-link усиливаем (был почти невидимый * hsl(210 40% 96%) — заменяем на яркий primary-tint) * • dropdown «Продукты» расширяем до 3 колонок чтобы все * 8 продуктов помещались * * Специфичность: `body .promaren-main-*` (0,2,1) перебивает * существующий inline `