/* Общие стили SEO-лендингов (дочерние посадочные). Подключается через extraHead. */ /* Шрифт заголовков лендингов с font-display: optional — устраняет FOUT-перевёрстку крупных H1/H2 (источник остаточного CLS на throttled-мобайле). Файл предзагружается в (landingCssTag): на быстром соединении шрифт готов к первой отрисовке и показывается бренд-начертание; на медленном — фолбэк БЕЗ последующего свопа (нет сдвига). */ @font-face { font-family: 'Nunito Sans SEO'; src: url('/fonts/nunitosans-semibold.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: optional; } /* Тело лендингов тоже с font-display: optional — у некоторых страниц (например 223-fz) текст лежит ровно на границе переноса строки, и своп фолбэк→Manrope менял число строк → сдвиг (CLS). optional убирает своп полностью: после ~100мс начертание фиксируется. */ @font-face { font-family: 'Manrope SEO'; src: url('/fonts/manrope-regular.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: optional; } @font-face { font-family: 'Manrope SEO'; src: url('/fonts/manrope-semibold.woff2') format('woff2'); font-weight: 600 800; font-style: normal; font-display: optional; } .seo-landing { /* В стеке только optional-шрифты + системный фолбэк: НЕ включаем глобальные 'Manrope'/'Nunito Sans' (font-display:auto=swap) — иначе во время optional-блока текст рендерится глобальным шрифтом и свопится при его загрузке → сдвиг (CLS). */ font-family: 'Manrope SEO', Tahoma, Geneva, Verdana, sans-serif; color: #1a1a2e; width: 100%; --seo-accent: #F52C44; --seo-ink: #1a1a2e; --seo-muted: #5b6170; --seo-line: rgba(20, 23, 31, 0.1); --seo-bg-soft: #f7f7f9; } .seo-shell { max-width: 1140px; margin: 0 auto; padding: 0 20px; } /* Hero */ .seo-hero { background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4a 60%, #3a2a50 100%); color: #fff; padding: 56px 0 48px; } .seo-hero h1 { font-family: 'Nunito Sans SEO', Tahoma, Geneva, Verdana, sans-serif; font-size: clamp(1.7rem, 4.4vw, 2.7rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 16px; max-width: 880px; } .seo-hero p { font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.55; opacity: 0.9; max-width: 720px; margin: 0 0 26px; } .seo-hero__cta { display: inline-flex; flex-wrap: wrap; gap: 12px; } .seo-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .12s ease, background .2s ease, box-shadow .2s ease; cursor: pointer; border: none; } .seo-btn--primary { background: var(--seo-accent); color: #fff; box-shadow: 0 10px 24px -12px rgba(245, 44, 68, .7); } .seo-btn--primary:hover { background: #d42538; transform: translateY(-1px); } .seo-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); } .seo-btn--ghost:hover { background: rgba(255,255,255,.2); } /* Контентные секции */ .seo-section { padding: 44px 0; } .seo-section--soft { background: var(--seo-bg-soft); } .seo-section h2 { font-family: 'Nunito Sans SEO', Tahoma, Geneva, Verdana, sans-serif; font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 18px; color: var(--seo-ink); } .seo-section h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; color: var(--seo-ink); } .seo-section p { font-size: 1.02rem; line-height: 1.7; color: var(--seo-muted); margin: 0 0 14px; } .seo-section ul, .seo-section ol { margin: 0 0 16px; padding-left: 22px; } .seo-section li { font-size: 1.02rem; line-height: 1.65; color: var(--seo-muted); margin-bottom: 8px; } .seo-section a { color: var(--seo-accent); text-decoration: none; font-weight: 600; } .seo-section a:hover { text-decoration: underline; } /* Сетка карточек (сценарии/преимущества) */ .seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px; } .seo-card { background: #fff; border: 1px solid var(--seo-line); border-radius: 16px; padding: 22px; box-shadow: 0 14px 34px -28px rgba(20,23,31,.3); } .seo-card h3 { margin-bottom: 8px; } .seo-card p { margin: 0; font-size: .97rem; } /* Таблица условий */ .seo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .seo-fact { background: #fff; border: 1px solid var(--seo-line); border-radius: 14px; padding: 18px 20px; } .seo-fact span { display: block; font-size: .85rem; color: var(--seo-muted); margin-bottom: 4px; } .seo-fact strong { font-size: 1.12rem; font-weight: 700; color: var(--seo-ink); } /* Перелинковка */ .seo-links { display: flex; flex-wrap: wrap; gap: 10px; } .seo-links a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: #fff; border: 1px solid var(--seo-line); border-radius: 999px; font-size: .95rem; font-weight: 600; color: var(--seo-ink); text-decoration: none; transition: border-color .2s, color .2s; } .seo-links a:hover { border-color: var(--seo-accent); color: var(--seo-accent); } /* FAQ — нативный аккордеон на
, без JS */ .seo-faq { display: grid; gap: 12px; max-width: 880px; } .faq-card { background: #fff; border: 1px solid var(--seo-line); border-radius: 14px; overflow: hidden; } .faq-card > summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-card > summary::-webkit-details-marker { display: none; } .faq-card-question { font-size: 1.05rem; font-weight: 700; color: var(--seo-ink); margin: 0; } .faq-card > summary::after { content: ''; flex: 0 0 12px; width: 12px; height: 12px; border-right: 2px solid var(--seo-accent); border-bottom: 2px solid var(--seo-accent); transform: rotate(45deg); transition: transform .2s ease; } .faq-card[open] > summary::after { transform: rotate(-135deg); } .faq-card-body { padding: 0 22px 18px; } .faq-card-body p { font-size: 1rem; line-height: 1.7; color: var(--seo-muted); margin: 0 0 10px; } .faq-card-body p:last-child { margin-bottom: 0; } /* CTA-полоса */ .seo-ctabar { background: linear-gradient(135deg, #1a1a2e, #2d2d4a); color: #fff; border-radius: 20px; padding: 34px 28px; text-align: center; } .seo-ctabar h2 { color: #fff; margin-bottom: 10px; } .seo-ctabar p { color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto 22px; } .seo-note { font-size: .85rem; color: #8a90a0; margin-top: 10px; } @media (max-width: 600px) { .seo-hero { padding: 40px 0 34px; } .seo-section { padding: 32px 0; } .seo-ctabar { padding: 26px 18px; } /* CTA-кнопки в столбец на всю ширину: убирает зависимость переноса ряда от ширины текста кнопки (длинная primary-кнопка на 223-fz роняла ghost-кнопку на 2-й ряд при смене метрик шрифта → сдвиг). Полноширинные кнопки = детерминированная высота. */ .seo-hero__cta { flex-direction: column; align-items: stretch; } .seo-hero__cta .seo-btn { width: 100%; } }