/* Общая обвязка публичной части: токены, шапка, подвал, кнопки, модалки, формы. Переиспользуется всеми страницами нового дизайна. Секции конкретных страниц - в своих файлах. Свои классы с префиксом hm-. Правила без префикса (body, .modal-*) безопасны: файл подключается только на страницах нового дизайна. */ /* ============ токены ============ */ /* Тема берётся из системы, а data-theme на её перебивает в обе стороны (переключатель в шапке). Поэтому тёмная палитра описана дважды - иначе ручной выбор "светлая" не смог бы победить системную тёмную. */ :root { --hm-ground: #F1F5F8; --hm-surface: #FFFFFF; --hm-surface-2: #E9EFF4; --hm-border: #DAE3EA; --hm-border-strong: #C3D0DA; --hm-ink: #0E1D28; --hm-ink-2: #55697A; --hm-ink-3: #8496A4; --hm-brand: #2A7FAE; --hm-brand-deep: #16577E; --hm-brand-wash: #E4F0F8; --hm-signal: #4F9226; --hm-danger: #C0392B; /* текст на фирменной заливке: на светлом синем - белый, на светло-голубом - тёмный */ --hm-on-brand: #FFFFFF; --hm-nav-bg: rgba(255, 255, 255, .92); --hm-focus-ring: rgba(42, 127, 174, .18); --hm-brand-glow: rgba(42, 127, 174, .2); /* финальный блок тёмно-синий в обеих темах, поэтому текст в нём всегда светлый */ --hm-final-bg: #16577E; --hm-final-sub: #BFDCEE; --hm-ok-ink: #24601A; --hm-ok-bg: #E9F4E1; --hm-ok-border: #C6E3B4; --hm-shadow: 0 1px 2px rgba(14, 29, 40, .06), 0 8px 24px -12px rgba(14, 29, 40, .18); --hm-shadow-lift: 0 2px 4px rgba(14, 29, 40, .06), 0 18px 40px -16px rgba(14, 29, 40, .28); --hm-shadow-modal: 0 24px 60px -20px rgba(14, 29, 40, .45); --hm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --hm-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hm-ground: #0A1219; --hm-surface: #101D26; --hm-surface-2: #17272F; --hm-border: #23353F; --hm-border-strong: #334854; --hm-ink: #E8EFF4; --hm-ink-2: #94A7B4; --hm-ink-3: #6B7F8D; --hm-brand: #4FA3D6; --hm-brand-deep: #86C6EA; --hm-brand-wash: #102A3A; --hm-signal: #7DC24E; --hm-danger: #F1786B; --hm-on-brand: #07131B; --hm-nav-bg: rgba(16, 29, 38, .9); --hm-focus-ring: rgba(79, 163, 214, .28); --hm-brand-glow: rgba(79, 163, 214, .25); --hm-final-bg: #10344B; --hm-final-sub: #9FC4DC; --hm-ok-ink: #B8E39C; --hm-ok-bg: #16281B; --hm-ok-border: #2C4A2E; --hm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6); --hm-shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .7); --hm-shadow-modal: 0 24px 60px -20px rgba(0, 0, 0, .8); } } :root[data-theme="dark"] { --hm-ground: #0A1219; --hm-surface: #101D26; --hm-surface-2: #17272F; --hm-border: #23353F; --hm-border-strong: #334854; --hm-ink: #E8EFF4; --hm-ink-2: #94A7B4; --hm-ink-3: #6B7F8D; --hm-brand: #4FA3D6; --hm-brand-deep: #86C6EA; --hm-brand-wash: #102A3A; --hm-signal: #7DC24E; --hm-danger: #F1786B; --hm-on-brand: #07131B; --hm-nav-bg: rgba(16, 29, 38, .9); --hm-focus-ring: rgba(79, 163, 214, .28); --hm-brand-glow: rgba(79, 163, 214, .25); --hm-final-bg: #10344B; --hm-final-sub: #9FC4DC; --hm-ok-ink: #B8E39C; --hm-ok-bg: #16281B; --hm-ok-border: #2C4A2E; --hm-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6); --hm-shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 40px -16px rgba(0, 0, 0, .7); --hm-shadow-modal: 0 24px 60px -20px rgba(0, 0, 0, .8); } /* Старый sticky-футер из main.css здесь не используется. */ body { margin-bottom: 0; background: var(--hm-surface); font-family: var(--hm-font); color: var(--hm-ink); -webkit-font-smoothing: antialiased; } /* Bootstrap задаёт свои margin заголовкам и абзацам - гасим внутри .hm. :where() держит специфичность на (0,1,0): этого хватает, чтобы перебить голые селекторы Bootstrap (0,0,1), но мало, чтобы случайно перебить свои же классы вроде .hm-hero__sub - иначе их margin молча пропадает. */ .hm :where(h1, h2, h3, p) { margin: 0; } .hm a { text-decoration: none; } .hm-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 40px; } .hm-eyebrow { font-family: var(--hm-mono); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--hm-brand); } /* ============ кнопки ============ */ .hm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 8px; font-family: var(--hm-font); font-size: 15px; font-weight: 600; line-height: 1.2; border: 1px solid transparent; cursor: pointer; } .hm-btn--block { display: flex; width: 100%; } .hm-btn--primary, a.hm-btn--primary { background: var(--hm-brand); border-color: var(--hm-brand); color: var(--hm-on-brand); } .hm-btn--primary:hover, .hm-btn--primary:focus, a.hm-btn--primary:hover, a.hm-btn--primary:focus { background: var(--hm-brand-deep); border-color: var(--hm-brand-deep); color: var(--hm-on-brand); } .hm-btn--ghost, a.hm-btn--ghost { background: transparent; border-color: var(--hm-border-strong); color: var(--hm-ink); } .hm-btn--ghost:hover, .hm-btn--ghost:focus, a.hm-btn--ghost:hover, a.hm-btn--ghost:focus { background: var(--hm-surface-2); border-color: var(--hm-ink-3); color: var(--hm-ink); } .hm-btn:focus-visible, .hm-nav a:focus-visible, .hm-burger:focus-visible { outline: 2px solid var(--hm-brand); outline-offset: 2px; } /* ============ шапка ============ */ /* sticky вместо fixed: поток не сдвигается, компенсирующие отступы не нужны. */ .hm-nav { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 26px; height: 64px; padding: 0 40px; background: var(--hm-nav-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hm-border); } .hm-nav a { text-decoration: none; } .hm-nav__logo { display: flex; align-items: center; flex: none; } .hm-nav__logo-icon { display: block; width: 28px; height: 28px; } .hm-nav__logo-full { display: none; width: 122px; height: 32px; } .hm-nav__links { display: flex; align-items: center; gap: 22px; } .hm-nav__links a { font-size: 14px; color: var(--hm-ink-2); } .hm-nav__links a:hover { color: var(--hm-ink); } .hm-nav__links a.is-active { color: var(--hm-ink); font-weight: 600; } .hm-nav__right { margin-left: auto; display: flex; align-items: center; gap: 16px; } .hm-nav__right a { font-size: 14px; color: var(--hm-ink-2); } .hm-nav__right a:hover { color: var(--hm-ink); } .hm-nav__cta, a.hm-nav__cta { padding: 8px 15px; border-radius: 7px; background: var(--hm-brand); color: var(--hm-on-brand); font-weight: 600; font-size: 13.5px; } .hm-nav__cta:hover, a.hm-nav__cta:hover { background: var(--hm-brand-deep); color: var(--hm-on-brand); } /* ============ переключатель темы ============ */ .hm-theme { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--hm-ink-2); cursor: pointer; } .hm-theme:hover { background: var(--hm-surface-2); color: var(--hm-ink); } .hm-theme:focus-visible { outline: 2px solid var(--hm-brand); outline-offset: 2px; } .hm-theme svg { width: 17px; height: 17px; } /* Иконка показывает, на что переключимся: в светлой теме луна, в тёмной солнце. */ .hm-theme__sun { display: none; } .hm-theme__moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hm-theme__sun { display: block; } :root:not([data-theme="light"]) .hm-theme__moon { display: none; } } :root[data-theme="dark"] .hm-theme__sun { display: block; } :root[data-theme="dark"] .hm-theme__moon { display: none; } :root[data-theme="light"] .hm-theme__sun { display: none; } :root[data-theme="light"] .hm-theme__moon { display: block; } /* ============ переключатель языка ============ */ .hm-lang { position: relative; flex: none; } .hm-lang__btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--hm-ink-2); cursor: pointer; } .hm-lang__btn:hover, .hm-lang.is-open .hm-lang__btn { background: var(--hm-surface-2); color: var(--hm-ink); } .hm-lang__btn:focus-visible { outline: 2px solid var(--hm-brand); outline-offset: 2px; } .hm-lang__btn svg { width: 18px; height: 18px; } .hm-lang__menu { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 150px; padding: 6px; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: 10px; box-shadow: var(--hm-shadow-lift); } .hm-lang.is-open .hm-lang__menu { display: block; } .hm-lang__menu a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--hm-ink-2); white-space: nowrap; } .hm-lang__menu a:hover { background: var(--hm-surface-2); color: var(--hm-ink); } .hm-lang__menu a.is-active { color: var(--hm-ink); font-weight: 600; background: var(--hm-brand-wash); } .hm-burger { display: none; flex-direction: column; justify-content: center; gap: 4px; margin-left: auto; width: 40px; height: 40px; padding: 0; background: transparent; border: 1px solid var(--hm-border); border-radius: 8px; cursor: pointer; } .hm-burger span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--hm-ink-2); border-radius: 2px; } .hm-nav__panel { display: none; } /* ============ панель бургера ============ */ /* Три блока с разным весом: список страниц, строка переключателей, кнопки входа. Разделители между ними - границы блоков, а не каждой строки: у языка и темы своя рамка, и лишние линии превращали панель в сплошную решётку. */ .hm-panel__links { display: flex; flex-direction: column; } .hm-panel__links a { padding: 12px 2px; font-size: 15px; color: var(--hm-ink-2); } .hm-panel__links a + a { border-top: 1px solid var(--hm-border); } .hm-panel__links a.is-active { color: var(--hm-ink); font-weight: 600; } .hm-panel__tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0; border-top: 1px solid var(--hm-border); } .hm-panel__auth { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid var(--hm-border); } /* Кнопки делят строку поровну, каждой хватает на подпись в обеих локалях. */ .hm-panel__auth .hm-btn { flex: 1 1 0; min-width: 0; } /* Выход - действие редкое и не парное к остальным: отдельной строкой, без веса кнопки. */ .hm-panel__exit, a.hm-panel__exit { flex: 1 0 100%; padding: 4px 2px; text-align: center; font-size: 14px; color: var(--hm-ink-3); } /* ============ сегментный переключатель ============ */ /* Язык и тема: вариантов по два, оба видно сразу и выбор в один тап. */ .hm-seg { display: flex; align-items: center; flex: none; gap: 2px; padding: 3px; background: var(--hm-surface-2); border: 1px solid var(--hm-border); border-radius: 9px; } .hm-seg__icon { display: flex; align-items: center; justify-content: center; width: 26px; color: var(--hm-ink-3); } .hm-seg__icon svg { width: 16px; height: 16px; } .hm-seg__item, a.hm-seg__item { display: flex; align-items: center; justify-content: center; min-width: 42px; height: 32px; padding: 0 10px; background: transparent; border: 0; border-radius: 7px; font-family: var(--hm-font); font-size: 13px; font-weight: 600; color: var(--hm-ink-2); cursor: pointer; } .hm-seg__item.is-active, a.hm-seg__item.is-active { background: var(--hm-surface); color: var(--hm-ink); box-shadow: var(--hm-shadow); } .hm-seg__item:focus-visible { outline: 2px solid var(--hm-brand); outline-offset: 1px; } .hm-seg__item--icon { min-width: 40px; padding: 0; } .hm-seg__item--icon svg { width: 16px; height: 16px; } @media (max-width: 900px) { .hm-nav { padding: 0 20px; gap: 12px; } .hm-nav__links, .hm-nav__right { display: none; } /* Ссылки ушли под бургер - место освободилось, показываем логотип с надписью. */ .hm-nav__logo-icon { display: none; } .hm-nav__logo-full { display: block; } .hm-burger { display: flex; } /* Панель может быть выше экрана (список страниц + переключатели + кнопки), поэтому скроллится сама, а не уезжает под край окна. */ .hm-nav__panel.is-open { display: block; position: absolute; top: 64px; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; padding: 6px 20px 18px; background: var(--hm-surface); border-bottom: 1px solid var(--hm-border); box-shadow: var(--hm-shadow); } } /* ============ шапка внутренней страницы ============ */ /* Заголовок раздела на подложке. Одна на все внутренние страницы: у главной свой .hm-hero, а docs, price и faq выглядят одинаково. Подпись под h1 (.hm-phead__sub) - необязательная, и по умолчанию её быть не должно. Заводить её стоит, только если она говорит то, чего нет на странице: у документации подпись пересказывала оглавление, стоящее следующим блоком, и её убрали. Оправданно она стоит на двух страницах: у приложения отвечает, зачем нужен APK, у политики конфиденциальности показывает дату обновления. Ширина ограничена: строка в 1000px нечитаема. */ .hm-phead { padding: 44px 0 40px; background: var(--hm-surface-2); border-bottom: 1px solid var(--hm-border); } .hm-phead h1 { font-size: 38px; line-height: 1.15; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; } .hm-phead__sub { margin-top: 14px; max-width: 46em; font-size: 16px; line-height: 1.6; color: var(--hm-ink-2); } /* ============ секции ============ */ .hm-sec { padding: 74px 0; background: var(--hm-surface); } .hm-sec--tint { background: var(--hm-surface-2); border-top: 1px solid var(--hm-border); border-bottom: 1px solid var(--hm-border); } .hm-sec__head { max-width: 40em; } .hm-sec__head h2 { margin-top: 12px; font-size: 32px; line-height: 1.2; letter-spacing: -.022em; font-weight: 700; text-wrap: balance; } .hm-sec__head p { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--hm-ink-2); } /* ============ карточки ============ */ .hm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; } /* Для списка ровно из четырёх карточек: в сетке по три четвёртая встаёт на свою строку одна и читается как забытая. Так показывает премиум-возможности страница цены. Своих медиазапросов модификатору не нужно: правила .hm-cards для 992 и 620 стоят ниже по файлу, специфичность у них та же, и на узких экранах они его перебивают порядком - колонок становится 2, потом 1. Отсюда же ограничение: держать это правило ВЫШЕ тех медиазапросов, иначе четыре колонки останутся и на телефоне. */ .hm-cards--4 { grid-template-columns: repeat(4, 1fr); } .hm-card { background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: 11px; padding: 22px; display: flex; flex-direction: column; gap: 9px; } .hm-card__ico { width: 34px; height: 34px; border-radius: 8px; background: var(--hm-brand-wash); color: var(--hm-brand); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .hm-card__ico svg { width: 17px; height: 17px; } .hm-card h3 { font-size: 16px; font-weight: 650; letter-spacing: -.01em; } .hm-card p { font-size: 14.5px; line-height: 1.58; color: var(--hm-ink-2); } /* ============ шаги ============ */ /* Пронумерованная последовательность действий. Была только у главной, но страница приложения показывает установку тем же списком - значит, компонент общий. */ .hm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 38px; } .hm-step { padding: 22px 18px; background: var(--hm-surface); border: 1px solid var(--hm-border); border-radius: 11px; display: flex; flex-direction: column; gap: 8px; } .hm-step__n { font-family: var(--hm-mono); font-size: 12px; font-weight: 600; color: var(--hm-brand); letter-spacing: .06em; } .hm-step h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; } .hm-step p { font-size: 14px; line-height: 1.55; color: var(--hm-ink-2); } .hm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 8px; border: 1px solid var(--hm-border); background: var(--hm-surface); font-size: 14px; color: var(--hm-ink-2); } .hm-chip b { color: var(--hm-ink); font-weight: 650; } /* ============ страница-справочник ============ */ /* Раскладка «липкое оглавление + разделы» и типографика статьи. Общая, потому что так устроены обе страницы документации: руководство (docs.php) и справочник API (api.php). Своё у них только содержимое разделов - скриншоты в docs.css, методы в api.css. */ /* Плавная прокрутка к разделу. Класс is-ready вешает scripts/docpage.js после загрузки страницы, и это не украшательство: если отдать smooth сразу на html, браузер не доедет до якоря при заходе по ссылке вида /docs.php#api-key - анимация начального перехода срывается, и страница молча остаётся на самом верху. Проверено на документации: со smooth сразу scrollY после захода по ссылке = 0, с is-ready - раздел ровно под шапкой. Тем, кто просил меньше движения, анимацию не навязываем: она укачивает. */ @media (prefers-reduced-motion: no-preference) { html.is-ready { scroll-behavior: smooth; } } /* minmax(0, 1fr): без него широкая картинка или длинная строка кода растянет колонку, потому что дефолтный min-width у grid-элемента - auto, а не 0. align-items не трогаем: колонке с оглавлением нужен дефолтный stretch, иначе она станет высотой со своё содержимое, и липнуть внутри неё будет негде. */ .hm-doc { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; } /* ============ оглавление ============ */ /* Прокручивается только список (.hm-toc__list): заголовок и подсказка приколоты, иначе на невысоком экране подсказку обрезает и о ней невозможно узнать. */ .hm-toc { position: sticky; top: 88px; display: flex; flex-direction: column; max-height: calc(100vh - 116px); } .hm-toc__title { flex: none; margin-bottom: 10px; font-family: var(--hm-mono); font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--hm-ink-3); } /* min-height: 0 обязателен - без него flex-элемент отказывается сжиматься ниже своего содержимого и список вылезает за пределы меню вместо прокрутки. position: relative делает список системой координат для offsetTop в скрипте. */ .hm-toc__list { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hm-border-strong) transparent; } /* Запасной вариант для старых webkit без scrollbar-width (Safari до 18.2). Там, где стандартное свойство выше поддерживается, эти правила браузером игнорируются - это не дубль, а фолбэк, и толщина у них поэтому разная. */ .hm-toc__list::-webkit-scrollbar { width: 6px; } .hm-toc__list::-webkit-scrollbar-track { background: transparent; } .hm-toc__list::-webkit-scrollbar-thumb { background: var(--hm-border-strong); border-radius: 3px; } .hm-toc__list::-webkit-scrollbar-thumb:hover { background: var(--hm-ink-3); } .hm-toc__link { display: flex; gap: 10px; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; line-height: 1.45; color: var(--hm-ink-2); } .hm-toc__link:hover { background: var(--hm-surface-2); color: var(--hm-ink); } .hm-toc__link.is-active { background: var(--hm-brand-wash); color: var(--hm-ink); font-weight: 600; } .hm-toc__link:focus-visible { outline: 2px solid var(--hm-brand); outline-offset: 2px; } .hm-toc__n { flex: none; font-family: var(--hm-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--hm-ink-3); } .hm-toc__link.is-active .hm-toc__n { color: var(--hm-brand); } /* Ссылка наружу (WebHook в блоге). Своего раздела на странице у неё нет, подсвечиваться ей нечем - значок нужен, чтобы это было видно до клика. */ .hm-toc__link--out .hm-toc__n svg { width: 11px; height: 11px; vertical-align: -1px; } .hm-toc__note { flex: none; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hm-border); font-size: 13px; line-height: 1.5; color: var(--hm-ink-3); } .hm-toc__note a { color: var(--hm-brand); font-weight: 600; } .hm-toc__note a:hover { color: var(--hm-brand-deep); } /* ============ раздел ============ */ .hm-doc__main { min-width: 0; } /* Липкая шапка перекрыла бы заголовок, к которому прыгнули по якорю. */ .hm-doc__item { scroll-margin-top: 84px; } .hm-doc__item + .hm-doc__item { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--hm-border); } .hm-doc__h { display: flex; align-items: baseline; gap: 12px; font-size: 24px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; color: var(--hm-ink); } .hm-doc__n { flex: none; font-family: var(--hm-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--hm-brand); } /* Ссылка на сам раздел: показываем по наведению, чтобы не рябило в заголовках. */ .hm-doc__anchor { position: relative; font-family: var(--hm-mono); font-size: 16px; color: var(--hm-ink-3); opacity: 0; } .hm-doc__item:hover .hm-doc__anchor { opacity: 1; } .hm-doc__anchor:hover { color: var(--hm-brand); } .hm-doc__anchor:focus-visible { opacity: 1; outline: 2px solid var(--hm-brand); outline-offset: 2px; } /* Наведения нет - значит, показываем всегда: на телефоне решётку иначе не найти. */ @media (hover: none) { .hm-doc__anchor { opacity: 1; } } .hm-doc__anchor.is-copied { opacity: 1; color: var(--hm-brand); } /* Подтверждение копирования. Текст приходит из locale.json через data-атрибут: в CSS его не написать, а страница двуязычная. */ .hm-doc__anchor.is-copied::after { content: attr(data-copied); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 5px 9px; border-radius: 6px; background: var(--hm-ink); color: var(--hm-surface); font-family: var(--hm-font); font-size: 12px; font-weight: 500; white-space: nowrap; pointer-events: none; } /* ============ тело раздела ============ */ /* Размечено по тегам: тело раздела - это статья из p/h3/ul, своих классов там почти нет. */ .hm-doc__body { margin-top: 18px; font-size: 15.5px; line-height: 1.7; color: var(--hm-ink); } .hm-doc__body p { margin: 0 0 14px; } /* Подзаголовок внутри раздела. В документации это был абзац целиком жирным. */ .hm-doc__body h3 { margin: 26px 0 10px; font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -.01em; color: var(--hm-ink); } /* Отступы по краям задают заголовок раздела сверху и разделитель снизу. */ .hm-doc__body > :first-child { margin-top: 0; } .hm-doc__body > :last-child { margin-bottom: 0; } .hm-doc__body ul, .hm-doc__body ol { margin: 0 0 14px; padding-left: 26px; } .hm-doc__body li { margin-bottom: 4px; } .hm-doc__body b, .hm-doc__body strong { font-weight: 650; color: var(--hm-ink); } .hm-doc__body a { color: var(--hm-brand); text-decoration: underline; } .hm-doc__body a:hover { color: var(--hm-brand-deep); } /* Картинка внутри статьи - и скриншот руководства, и иллюстрация поста блога. display:block заодно убирает лишние ~5px снизу: строчная картинка встаёт на базовую линию текста и добирает её высоту. max-width обязателен: в постах блога ширина проставлена инлайном (style="width: 500px"), и на узком экране картинка вылезла бы за край. */ .hm-doc__body img { display: block; max-width: 100%; height: auto; margin: 6px 0; border: 1px solid var(--hm-border); border-radius: 8px; } /* ============ подвал ============ */ .hm-foot { padding: 34px 0; background: var(--hm-surface); border-top: 1px solid var(--hm-border); } .hm-foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 13.5px; color: var(--hm-ink-3); } .hm-foot__row a { color: var(--hm-ink-2); text-decoration: none; } .hm-foot__row a:hover { color: var(--hm-ink); } .hm-foot__copy { margin-right: auto; } .hm-foot__soc { display: flex; align-items: center; gap: 12px; } .hm-foot__soc img { height: 20px; width: auto; display: block; opacity: .65; } .hm-foot__soc a:hover img { opacity: 1; } /* ============ модалки ============ */ /* Скелет .modal / .modal-dialog / .modal-content остаётся бутстраповским: на нём висит bootstrap.js и вызов $('#signin').modal('hide') из main_full.js. Меняем только вид. */ .hm-modal .modal-dialog { width: auto; max-width: 440px; margin: 40px auto; padding: 0 16px; } .hm-modal .modal-content { border: 1px solid var(--hm-border); border-radius: 14px; box-shadow: var(--hm-shadow-modal); background: var(--hm-surface); } .hm-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 0; } .hm-modal__title { margin: 0; font-family: var(--hm-font); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--hm-ink); } .hm-modal__close { flex: none; width: 32px; height: 32px; padding: 0; font-size: 20px; line-height: 1; color: var(--hm-ink-3); background: transparent; border: 1px solid transparent; border-radius: 7px; cursor: pointer; opacity: 1; } .hm-modal__close:hover { background: var(--hm-surface-2); color: var(--hm-ink); opacity: 1; } .hm-modal__body { padding: 18px 22px 24px; } .hm-modal__form { display: flex; flex-direction: column; gap: 14px; } .hm-field { display: flex; flex-direction: column; gap: 6px; } .hm-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--hm-ink-2); } .hm-input { width: 100%; padding: 11px 13px; font-family: var(--hm-font); font-size: 15px; color: var(--hm-ink); background: var(--hm-surface); border: 1px solid var(--hm-border-strong); border-radius: 8px; } .hm-input::placeholder { color: var(--hm-ink-3); } .hm-input:focus { outline: none; border-color: var(--hm-brand); box-shadow: 0 0 0 3px var(--hm-focus-ring); } .hm-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; color: var(--hm-ink-2); cursor: pointer; } .hm-check input { margin: 0; } .hm-modal__error { margin: 0; font-size: 14px; line-height: 1.5; color: var(--hm-danger); } .hm-modal__error:empty { display: none; } .hm-modal__hint { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--hm-ink-2); } .hm-modal__ok { padding: 11px 13px; font-size: 14px; line-height: 1.5; color: var(--hm-ok-ink); background: var(--hm-ok-bg); border: 1px solid var(--hm-ok-border); border-radius: 8px; } .hm-modal__ok a { color: var(--hm-ok-ink); text-decoration: underline; } .hm-or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--hm-ink-3); } .hm-or::before, .hm-or::after { content: ""; flex: 1; height: 1px; background: var(--hm-border); } .hm-oauth { gap: 10px; font-weight: 550; } .hm-oauth svg { width: 18px; height: 18px; flex: none; } /* Согласие с политикой под кнопками входа и регистрации. Мельче и тусклее .hm-modal__hint: это сноска, которую читают один раз, а не подсказка к полю, за которой человек следит. Стоит последней в форме - значит, относится и к кнопке входа, и ко входу через Google. */ .hm-modal__agree { margin: 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--hm-ink-3); } .hm-modal__agree a { color: var(--hm-brand); font-weight: 600; } .hm-modal__agree a:hover { color: var(--hm-brand-deep); } @media (max-width: 768px) { .hm-wrap { padding: 0 20px; } .hm-sec { padding: 48px 0; } .hm-sec__head h2 { font-size: 24px; } .hm-phead { padding: 36px 0 32px; } .hm-phead h1 { font-size: 27px; } .hm-phead__sub { font-size: 15px; } .hm-modal .modal-dialog { margin: 20px auto; } .hm-doc__h { font-size: 20px; } .hm-doc__item + .hm-doc__item { margin-top: 32px; padding-top: 32px; } } @media (max-width: 992px) { .hm-cards { grid-template-columns: repeat(2, 1fr); } .hm-steps { grid-template-columns: repeat(2, 1fr); } .hm-doc { grid-template-columns: 1fr; gap: 30px; } /* Липнуть больше некуда: оглавление стало карточкой над текстом. Прокрутка списка здесь тоже не нужна - страница и так прокручивается. */ .hm-toc { position: static; max-height: none; padding: 16px; border: 1px solid var(--hm-border); border-radius: 11px; background: var(--hm-surface-2); } .hm-toc__list { overflow-y: visible; } } @media (max-width: 620px) { .hm-cards, .hm-steps { grid-template-columns: 1fr; margin-top: 28px; } }