/* ============================================================ gepard-seo.css — 2026-08-08. Посадочные страницы под поисковые запросы (views/seo/page.ejs). Подключается ВМЕСТЕ с gepard-landing.css и опирается на его переменные (--gl-brand, --gl-ink и т.д.) и на обёртки .gl / .gl-wrap. Здесь — только блоки, которых на главном лендинге нет: калькулятор, таблица сравнения, FAQ-аккордеон. Префикс .seo- вместо .gl-: так сразу видно, что правка касается посадочных, а не главной, и одно нельзя случайно сломать другим. ============================================================ */ /* ---------- появление при прокрутке ---------- 2026-08-08. Блоки выезжают снизу, когда доходят до экрана. Это не украшательство: страница длинная, и без движения она читается как бесконечное полотно — глазу не за что зацепиться на границах разделов. Стартовое состояние задаётся ТОЛЬКО когда на висит класс seo-js. Его ставит скрипт в самом низу страницы. Если JavaScript отключён или скрипт не долетел, класса нет — и весь контент виден как обычно, а не остаётся навсегда прозрачным. Это единственный способ сделать анимацию появления безопасной. */ .seo-js .seo-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--gl-ease), transform .6s var(--gl-ease); } .seo-js .seo-reveal.is-in { opacity: 1; transform: none; } /* Соседние карточки в одном ряду появляются с задержкой друг за другом — волной, а не разом. Задержка маленькая: больше 60 мс уже читается как тормоза, а не как эффект. */ .seo-js .seo-reveal--d1 { transition-delay: .06s; } .seo-js .seo-reveal--d2 { transition-delay: .12s; } .seo-js .seo-reveal--d3 { transition-delay: .18s; } .seo-js .seo-reveal--d4 { transition-delay: .24s; } .seo-js .seo-reveal--d5 { transition-delay: .30s; } .seo-js .seo-reveal--d6 { transition-delay: .36s; } /* Первый экран не ждёт прокрутки — он уже на виду, появляется сразу при загрузке, по очереди сверху вниз. */ .seo-js .seo-in { opacity: 0; animation: seo-fade-up .7s var(--gl-ease) forwards; } .seo-js .seo-in--1 { animation-delay: .05s; } .seo-js .seo-in--2 { animation-delay: .15s; } .seo-js .seo-in--3 { animation-delay: .25s; } .seo-js .seo-in--4 { animation-delay: .35s; } @keyframes seo-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Уважаем системную настройку «уменьшить движение»: у части людей анимация вызывает физический дискомфорт. Всё показываем сразу, без движения. */ @media (prefers-reduced-motion: reduce) { .seo-js .seo-reveal { opacity: 1; transform: none; transition: none; } .seo-js .seo-in { opacity: 1; animation: none; } } /* ---------- общее ---------- */ .seo-sec { padding: 64px 24px; } .seo-sec--soft { background: #FFFFFF; } .seo-sec--dark { background: var(--gl-dark); color: #F2F2F4; } .seo-sec--dark p { color: #C9C9D2; } .seo-sec--dark b { color: #FFFFFF; } .seo-h2 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; } .seo-sub { margin: 0 0 28px; color: var(--gl-ink-3); font-size: 16px; } .seo-sec--dark .seo-h2 { color: #FFFFFF; } .seo-note { margin: 20px 0 0; color: var(--gl-ink-3); font-size: 14.5px; line-height: 1.6; max-width: 780px; } /* Тень у шапки появляется только когда страницу прокрутили: на самом верху она лишняя, а при прокрутке отделяет шапку от уезжающего под неё контента. Класс вешает тот же скрипт внизу страницы. */ .seo-scrolled .gl-nav { box-shadow: 0 1px 16px rgba(19, 19, 22, 0.07); } /* ---------- кнопка ---------- */ .seo-btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 13px; background: linear-gradient(135deg, var(--gl-brand-2), var(--gl-brand-3)); color: #FFFFFF !important; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; box-shadow: 0 8px 22px rgba(224, 83, 14, 0.28); transition: transform .18s var(--gl-ease), box-shadow .18s var(--gl-ease); } .seo-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(224, 83, 14, 0.34); } .seo-btn--lg { padding: 18px 38px; font-size: 17px; } .seo-btn--sm { padding: 10px 18px; font-size: 14px; box-shadow: none; } .seo-btn--light { background: #FFFFFF; color: var(--gl-brand-3) !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); } /* ---------- первый экран ---------- */ .seo-hero { padding: 68px 24px 56px; } .seo-hero__in { max-width: 900px; text-align: center; } .seo-h1 { margin: 0 0 18px; font-size: clamp(30px, 5.2vw, 54px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; } .seo-lead { margin: 0 auto 30px; max-width: 660px; font-size: clamp(16px, 2vw, 19px); line-height: 1.55; color: var(--gl-ink-2); } .seo-cta { display: flex; flex-direction: column; align-items: center; gap: 11px; } .seo-cta__note { font-size: 13.5px; color: var(--gl-ink-3); } .seo-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 44px; } .seo-fact { padding: 22px 16px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--gl-line); } .seo-fact b { display: block; font-size: clamp(20px, 2.6vw, 27px); font-weight: 800; letter-spacing: -0.03em; color: var(--gl-brand-3); } .seo-fact span { display: block; margin-top: 5px; font-size: 13.5px; color: var(--gl-ink-3); } /* ---------- калькулятор ---------- Две колонки: слева управление и пояснение, справа результат и кнопка. Карточка занимает всю ширину контейнера — как таблица и сетки карточек ниже. Раньше она была 720 px при контейнере 1240 и выглядела сбитой влево. Правая колонка фиксированной ширины: цена не должна прыгать по горизонтали, когда меняется число знаков (1 650 → 12 000). */ .seo-calc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: center; padding: 32px; border-radius: 20px; background: #FFFFFF; border: 1px solid var(--gl-line); box-shadow: 0 10px 40px rgba(19, 19, 22, 0.05); } .seo-calc__label { display: block; margin-bottom: 16px; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; } .seo-calc__row { display: flex; align-items: center; gap: 16px; } .seo-calc__row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--gl-brand); } .seo-calc__row output { flex: none; min-width: 62px; padding: 7px 12px; border-radius: 9px; background: #F6F6F7; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; } .seo-calc__note { margin: 18px 0 0; font-size: 14px; line-height: 1.6; color: var(--gl-ink-3); } .seo-calc__right { padding: 24px 22px; border-radius: 16px; text-align: center; background: #FBF6F2; border: 1px solid rgba(224, 83, 14, 0.14); } .seo-calc__cap { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gl-ink-3); } .seo-calc__price { margin-top: 6px; font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; letter-spacing: -0.04em; color: var(--gl-brand-3); line-height: 1.05; /* Моноширинные цифры: без них сумма дёргается при перетаскивании ползунка, потому что «1» уже остальных цифр. */ font-variant-numeric: tabular-nums; } .seo-calc__hint { margin-top: 4px; font-size: 13.5px; color: var(--gl-ink-3); } .seo-calc__free { margin: 12px 0 16px; padding: 6px 12px; display: inline-block; border-radius: 999px; background: #DFF6F1; font-size: 13px; font-weight: 700; color: var(--gl-teal-2); } .seo-calc__right .seo-btn { width: 100%; } /* ---------- два столбца текста ---------- */ .seo-two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .seo-two p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; } /* ---------- терминология ---------- */ .seo-terms { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: start; } .seo-terms p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--gl-ink-2); } .seo-terms ul { margin: 0; padding: 20px 22px; list-style: none; border-radius: 16px; background: #F6F6F7; border: 1px solid var(--gl-line); } .seo-terms li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 15px; line-height: 1.4; color: var(--gl-ink-2); } .seo-terms li:last-child { margin-bottom: 0; } .seo-terms li::before { content: '='; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--gl-brand-3); } /* ---------- ритм текста ---------- Главная мысль страницы («детектор смотрит на ритм, а не на слова») здесь не рассказана, а показана: восемь полосок = восемь предложений подряд. У машины они одной высоты, у человека скачут. Это доходит быстрее любого абзаца — и заодно объясняет, почему синонимайзер бесполезен: он меняет слова внутри полосок, а сами полоски остаются ровными. */ .seo-rhythm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } .seo-rh { padding: 22px; border-radius: 16px; background: #F6F6F7; border: 1px solid var(--gl-line); } .seo-rh p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--gl-ink-3); } .seo-rh__tag { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; } .seo-rh__tag--bad { background: #FDECE4; color: #B03A0C; } .seo-rh__tag--good { background: #DFF6F1; color: var(--gl-teal-2); } .seo-bars { display: flex; align-items: flex-end; gap: 7px; height: 76px; margin-top: 18px; } .seo-bars i { flex: 1; border-radius: 5px 5px 2px 2px; transform-origin: bottom; } /* Полоски растут не при загрузке страницы, а когда блок доезжает до экрана. 2026-08-08, исправление: раньше анимация стояла на самих и отрабатывала сразу — а блок в это время был далеко за нижним краем окна, и главный визуальный аргумент страницы никто не видел. Теперь рост запускается классом .is-in, который вешает наблюдатель прокрутки. */ .seo-js .seo-bars i { transform: scaleY(0); opacity: 0; } .seo-js .seo-bars.is-in i { animation: seo-bar-grow .55s var(--gl-ease) both; } /* Ровные — все одной высоты, оттенок приглушённый. */ .seo-bars--flat i { height: 54%; background: #C9C9D2; } /* Рваные — высоты подобраны так, чтобы соседние заметно отличались: ровно то, чего детектор ждёт от живого текста. */ .seo-bars--live i { background: linear-gradient(180deg, var(--gl-brand-2), var(--gl-brand-3)); } .seo-bars--live i:nth-child(1) { height: 38%; } .seo-bars--live i:nth-child(2) { height: 86%; } .seo-bars--live i:nth-child(3) { height: 52%; } .seo-bars--live i:nth-child(4) { height: 100%; } .seo-bars--live i:nth-child(5) { height: 30%; } .seo-bars--live i:nth-child(6) { height: 68%; } .seo-bars--live i:nth-child(7) { height: 44%; } .seo-bars--live i:nth-child(8) { height: 78%; } /* Полоски вырастают по очереди — взгляд успевает считать разницу между двумя карточками, а не видит обе готовыми одновременно. */ .seo-bars i:nth-child(1) { animation-delay: .00s; } .seo-bars i:nth-child(2) { animation-delay: .06s; } .seo-bars i:nth-child(3) { animation-delay: .12s; } .seo-bars i:nth-child(4) { animation-delay: .18s; } .seo-bars i:nth-child(5) { animation-delay: .24s; } .seo-bars i:nth-child(6) { animation-delay: .30s; } .seo-bars i:nth-child(7) { animation-delay: .36s; } .seo-bars i:nth-child(8) { animation-delay: .42s; } @keyframes seo-bar-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .seo-js .seo-bars i { transform: none; opacity: 1; animation: none; } } /* ---------- «не помогает» / «что делаем мы» ---------- */ .seo-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .seo-vs__card { padding: 24px; border-radius: 16px; border: 1px solid var(--gl-line); } .seo-vs__card--no { background: #FCF7F5; } .seo-vs__card--yes { background: #F4FBF9; border-color: rgba(15, 118, 110, 0.18); } .seo-vs__card b { display: block; margin-bottom: 12px; font-size: 17px; letter-spacing: -0.02em; } .seo-vs__card--no b { color: #B03A0C; } .seo-vs__card--yes b { color: var(--gl-teal-2); } .seo-vs__card ul { margin: 0 0 14px; padding: 0; list-style: none; } .seo-vs__card li { position: relative; padding-left: 24px; margin-bottom: 7px; font-size: 15px; line-height: 1.45; } .seo-vs__card li::before { position: absolute; left: 0; top: -1px; font-size: 15px; font-weight: 700; } .seo-vs__card--no li::before { content: '×'; color: #D0724A; font-size: 18px; top: -3px; } .seo-vs__card--yes li::before { content: '✓'; color: var(--gl-teal-2); } .seo-vs__card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gl-ink-3); } /* ---------- шаги ---------- */ .seo-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .seo-step { padding: 24px 20px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--gl-line); } .seo-step__n { width: 34px; height: 34px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, var(--gl-brand-2), var(--gl-brand-3)); color: #FFFFFF; font-weight: 800; font-size: 15px; } .seo-step b { display: block; margin-bottom: 6px; font-size: 16px; letter-spacing: -0.02em; } .seo-step p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gl-ink-3); } /* ---------- карточки «что не трогаем» ---------- */ .seo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .seo-card { padding: 24px 22px; border-radius: 16px; background: #F6F6F7; border: 1px solid var(--gl-line); } .seo-card__ic { font-size: 24px; margin-bottom: 12px; } .seo-card b { display: block; margin-bottom: 6px; font-size: 16px; letter-spacing: -0.02em; } .seo-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gl-ink-3); } /* ---------- таблица сравнения ---------- */ .seo-table { border-radius: 16px; overflow: hidden; border: 1px solid var(--gl-line); background: #FFFFFF; } /* Четыре колонки: подпись строки + три сравниваемых варианта. Первая колонка шире — в ней текст вроде «Посмотреть результат до оплаты». */ .seo-table__head, .seo-table__row { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; align-items: start; gap: 12px; padding: 15px 22px; } .seo-table__head { background: #F6F6F7; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gl-ink-3); align-items: center; } .seo-table__row { border-top: 1px solid var(--gl-line); font-size: 14.5px; line-height: 1.4; } .seo-table__label { color: var(--gl-ink-2); } /* Наш столбец подсвечен: взгляд должен цепляться за него, а не блуждать. */ .seo-table__us { font-weight: 700; color: var(--gl-brand-3); } /* Столбец синонимайзеров приглушён — он проигрывает по сути, и незачем давать ему тот же вес, что двум работающим вариантам. */ .seo-table__alt { color: var(--gl-ink-3); } /* ---------- FAQ ---------- На
, без JavaScript. Так содержимое ответов есть в HTML сразу и гарантированно попадает в индекс, даже если робот не исполняет скрипты. Сам блок во всю ширину — чтобы левый край совпадал с таблицей и сетками выше. А вот ДЛИНА СТРОКИ ответа ограничена отдельно: на широком экране строка в 150 символов физически трудно читается, глаз теряет начало следующей. Ограничиваем текст, а не коробку. */ .seo-faq { max-width: 100%; } .seo-faq__item { border-radius: 14px; background: #F6F6F7; border: 1px solid var(--gl-line); margin-bottom: 10px; } .seo-faq__item summary { padding: 17px 22px; cursor: pointer; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; list-style: none; position: relative; padding-right: 48px; } .seo-faq__item summary::-webkit-details-marker { display: none; } .seo-faq__item summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--gl-brand-3); transition: transform .2s var(--gl-ease); } .seo-faq__item[open] summary::after { content: '−'; } .seo-faq__a { padding: 0 22px 19px; font-size: 15px; line-height: 1.65; color: var(--gl-ink-2); /* Коробка во всю ширину, а строка — не длиннее комфортной. Ограничение стоит на тексте, а не на контейнере: так левый край блока совпадает с таблицей и сетками выше, а читать по-прежнему удобно. */ max-width: 78ch; } /* ---------- связанные страницы ---------- */ .seo-related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .seo-related__card { display: block; padding: 22px 24px; border-radius: 16px; background: #F6F6F7; border: 1px solid var(--gl-line); transition: transform .18s var(--gl-ease), border-color .18s var(--gl-ease); } .seo-related__card:hover { transform: translateY(-2px); border-color: rgba(224, 83, 14, 0.3); } .seo-related__card b { display: block; margin-bottom: 5px; font-size: 17px; letter-spacing: -0.02em; color: var(--gl-brand-3); } .seo-related__card span { font-size: 14px; line-height: 1.5; color: var(--gl-ink-3); } /* ---------- финальный призыв ---------- */ .seo-final { padding: 66px 24px; background: var(--gl-dark); text-align: center; } .seo-final__in h2 { margin: 0 0 10px; font-size: clamp(24px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; color: #FFFFFF; } .seo-final__in p { margin: 0 0 26px; color: #C9C9D2; font-size: 16px; } /* ---------- подвал ---------- */ .seo-foot { padding: 26px 24px; text-align: center; font-size: 13.5px; color: var(--gl-ink-3); background: #FFFFFF; border-top: 1px solid var(--gl-line); } .seo-foot a { color: var(--gl-ink-2); text-decoration: underline; } /* ============================================================ АДАПТИВНАЯ РАСКЛАДКА Четыре порога, каждый решает конкретную проблему, а не «на всякий случай». Проверено на 1440, 1280, 1024, 900, 640, 430, 375 и 320 px. ============================================================ */ /* Ноутбуки и узкие окна: контейнер упирается в края экрана — добавляем поля, иначе текст липнет к рамке. */ @media (max-width: 1280px) { .gl-wrap { padding-left: 4px; padding-right: 4px; } .seo-calc { grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; } } /* Планшеты: четыре колонки шагов становятся тесными, таблица сравнения ещё держится, но плотность в ней пора уменьшить. */ @media (max-width: 1024px) { .seo-steps { grid-template-columns: repeat(2, 1fr); } .seo-grid { grid-template-columns: repeat(2, 1fr); } .seo-table__head, .seo-table__row { padding: 14px 16px; gap: 10px; } .seo-table__row { font-size: 14px; } } /* Планшет вертикально и большие телефоны. Порог 900 px тот же, что у главного лендинга (gepard-landing.css) — чтобы страницы перестраивались синхронно, а не каждая по-своему. */ @media (max-width: 900px) { .seo-sec { padding: 46px 18px; } .seo-hero { padding: 44px 18px 38px; } .seo-two { grid-template-columns: 1fr; gap: 6px; } /* Полоски ритма встают друг под друга — сравнивать вертикально даже нагляднее, чем в двух узких колонках. */ .seo-rhythm, .seo-vs, .seo-related, .seo-terms { grid-template-columns: 1fr; } .seo-bars { height: 62px; } .seo-grid { grid-template-columns: 1fr; } /* Калькулятор: колонки складываются, результат уходит под управление. */ .seo-calc { grid-template-columns: 1fr; gap: 20px; padding: 22px 18px; } /* Таблица: четыре колонки не помещаются. Строка разворачивается в блок — подпись сверху, под ней три варианта в столбик с префиксами, иначе без шапки непонятно, что к чему относится. */ .seo-table__head { display: none; } .seo-table__row { grid-template-columns: 1fr; gap: 3px; padding: 14px 16px; } .seo-table__label { font-size: 13px; font-weight: 700; color: var(--gl-ink); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; } .seo-table__us::before { content: 'Гепард — '; font-weight: 400; color: var(--gl-ink-3); } .seo-table__alt::before { content: 'Синонимайзер — '; color: var(--gl-ink-4); } .seo-table__them::before { content: 'Вручную — '; color: var(--gl-ink-3); } } /* Телефоны. Здесь главное — ничего не должно вылезать за экран и требовать горизонтальной прокрутки: это худшее, что может случиться с посадочной страницей на телефоне. */ @media (max-width: 640px) { .seo-sec { padding: 38px 16px; } .seo-hero { padding: 34px 16px 30px; } .seo-steps { grid-template-columns: 1fr; } /* Три плашки с цифрами в ряд на узком экране превращаются в нечитаемые столбики — ставим в колонку и разворачиваем в строку. */ .seo-facts { grid-template-columns: 1fr; gap: 8px; } .seo-fact { display: flex; align-items: baseline; gap: 10px; padding: 15px 18px; } .seo-fact b { font-size: 21px; } .seo-fact span { margin-top: 0; } /* Кнопка во всю ширину: на телефоне в неё проще попасть пальцем. */ .seo-btn--lg { width: 100%; padding: 16px 20px; } .seo-cta { align-items: stretch; } .seo-faq__item summary { padding: 15px 44px 15px 18px; font-size: 15px; } .seo-faq__a { padding: 0 18px 17px; font-size: 14.5px; } .seo-vs__card, .seo-rh { padding: 20px 18px; } .seo-final { padding: 48px 16px; } } /* Самые узкие экраны (320–400 px). Ползунок и значение перестают помещаться в одну строку — значение переезжает под него. */ @media (max-width: 400px) { .seo-calc__row { flex-wrap: wrap; } .seo-calc__row output { width: 100%; } .seo-calc__price { font-size: 30px; } .seo-bars { gap: 5px; } } /* ── СТАТЬИ (views/seo/article.ejs) — 2026-08-12 ───────────────────────── Информационные материалы верха воронки. Отличаются от посадочных не косметикой, а задачей: здесь длинный текст, который надо прочитать, а не пробежать глазами до кнопки. Отсюда узкая колонка, крупный шрифт и заметные интервалы — всё ради читаемости, а не плотности. Ширина 760 px выбрана не на глаз: на строку приходится примерно 75–85 символов, и это тот диапазон, где глаз надёжно находит начало следующей строки. Шире — читатель начинает терять строку и уставать. */ .art { padding: 44px 0 20px; } .art__wrap { max-width: 760px; } .art__h1 { font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; } .art__lead { font-size: 19px; line-height: 1.65; color: #43474e; margin: 0 0 30px; } .art__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 34px; } .art__fact { background: #fff; border: 1px solid #e7e9ec; border-radius: 12px; padding: 14px 16px; } .art__fact b { display: block; font-size: 21px; font-weight: 800; color: #F26522; line-height: 1.2; } .art__fact span { display: block; font-size: 13px; color: #6b6f76; margin-top: 4px; line-height: 1.4; } /* Оглавление. Намеренно неяркое: это служебный элемент, он не должен спорить с первым абзацем за внимание. */ .art__toc { background: #fff; border: 1px solid #e7e9ec; border-radius: 12px; padding: 18px 22px; margin: 0 0 40px; } .art__toc b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #82868c; margin-bottom: 10px; } .art__toc ol { margin: 0; padding-left: 20px; } .art__toc li { margin: 6px 0; } .art__toc a { color: #17181a; text-decoration: none; border-bottom: 1px solid #d8dade; } .art__toc a:hover { color: #F26522; border-bottom-color: #F26522; } .art__sec { margin: 0 0 38px; } .art__h2 { font-size: 25px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; scroll-margin-top: 20px; } .art__sec p { font-size: 17px; line-height: 1.75; color: #23262b; margin: 0 0 16px; } .art__list { margin: 0 0 18px; padding-left: 22px; } .art__list li { font-size: 17px; line-height: 1.7; color: #23262b; margin: 9px 0; } /* Врезка для мысли, которую нельзя пропустить. Одна на раздел — если их станет больше, выделение перестанет работать. */ .art__note { background: #FFF6F0; border-left: 3px solid #F26522; border-radius: 0 10px 10px 0; padding: 15px 20px; margin: 0 0 20px; font-size: 16px; line-height: 1.65; color: #2b2118; } .art__cta { background: #fff; border: 1px solid #e7e9ec; border-radius: 16px; padding: 30px 32px; margin: 44px 0 38px; text-align: center; } .art__cta h2 { font-size: 23px; font-weight: 700; margin: 0 0 10px; } .art__cta p { font-size: 16px; line-height: 1.65; color: #5a5f66; margin: 0 auto 20px; max-width: 520px; } .art__sources { border-top: 1px solid #e7e9ec; padding-top: 22px; margin-top: 40px; } .art__sources b { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #82868c; margin-bottom: 10px; } .art__sources ol { margin: 0; padding-left: 20px; } .art__sources li { font-size: 14px; line-height: 1.6; margin: 7px 0; } .art__sources a { color: #5a5f66; } .art__upd { font-size: 13px; color: #9a9ea4; margin: 16px 0 0; } @media (max-width: 900px) { .art__h1 { font-size: 32px; } .art__lead { font-size: 17px; } .art__facts { grid-template-columns: 1fr; } } @media (max-width: 640px) { .art { padding: 28px 0 10px; } .art__h1 { font-size: 27px; } .art__h2 { font-size: 21px; } .art__sec p, .art__list li { font-size: 16px; } .art__cta { padding: 24px 20px; } }