/* Портал «Плати по всему миру · Помощь» — стили по дизайн-спеке (mockup v2) */ /* ── Палитра ── Все цвета живут здесь и только здесь: в правилах ниже не должно быть ни одного «зашитого» цвета, кроме тех, что одинаковы в любой теме (белый на синей кнопке, затемнение лайтбокса, фирменные цвета мессенджеров). Тёмная тема — это второй набор значений тех же токенов, см. ниже. Контраст каждой пары «текст на фоне» проверен по WCAG, минимум 4,5. */ :root { /* поверхности */ --bg: #f1f1ee; --card: #fff; --soft: #fafaf8; --code-bg: #f4f4f1; --line: #e5e5e0; --line-hi: #cfcfc8; /* текст */ --ink: #131316; --gray: #6f6f77; --gray-dark: #5a5a62; --dim: #b9b9b4; /* Серый и цвет ссылок подобраны по контрасту: прежние #9a9aa2 и #3b82f6 давали 2,5 и 3,7 при норме 4,5 — счётчики, даты и категории не читались на солнце и на плохом экране. Текущие дают 4,4 и 4,8 на фоне страницы. */ --link: #2b64d6; /* акцент: --accent — заливка (на ней белый текст), --accent-ink — сам текст, иконки и рамки фокуса. В тёмной теме заливка и текст расходятся сильнее */ --accent: #2f5bff; --accent-ink: #2f5bff; --accent-strong: #2449d6; /* заливка без текста поверх (кружок со стрелкой) — там читаемость не ограничивает, поэтому в тёмной теме синий берём ярче */ --accent-hot: #2f5bff; --accent-soft: #eef1ff; --green: #35c26a; --sel: #cdd8ff; --header-bg: #f1f1ee; /* шапка: в тёмной теме отделяется от страницы */ /* Главные акценты страницы. В светлой теме их роль играет чёрное на светлом: кнопка поддержки, карточка «24/7». В тёмной так не выйдет — тёмное на тёмном исчезает, поэтому там же стоят светлая кнопка и синяя карточка. */ --btn: #17171a; --btn-ink: #fff; /* кнопка в шапке */ --hi-bg: #17171a; --hi-line: #17171a; --hi-ink: #fff; /* карточка-акцент */ --hi-cap: #b9b9c2; --hi-num: #fff; /* тёмные панели («Остались вопросы?», эскалация под статьёй) */ --dark: #17171a; --dark-grad: #17171a; --dark-ink: #fff; --dark-cap: #9d9da6; --dark-edge: transparent; /* контур панели, нужен только в тёмной теме */ --on-dark-btn: #fff; --on-dark-btn-ink: #131316; --dark-line: rgba(255,255,255,.35); --dark-btn: #fff; --dark-btn-ink: #131316; /* синяя панель поиска на главной */ --hero-bg: radial-gradient(120% 160% at 15% 0%, #4aa8f5 0%, transparent 55%), radial-gradient(130% 170% at 90% 20%, #2f6bf0 0%, transparent 55%), linear-gradient(150deg, #2f7bf0 0%, #2f5bff 45%, #2348d6 100%); --hero-ink: #fff; --hero-dim: rgba(255,255,255,.85); --hero-line: rgba(255,255,255,.45); --hero-inp: rgba(255,255,255,.96); --hero-inp-hi: #fff; --hero-inp-solid: #fff; --hero-clear-hi: rgba(19,19,22,.07); --hero-inp-ink: #131316; --hero-ph: #6f6f77; --hero-edge: transparent; /* контур панели, нужен только в тёмной теме */ /* callout'ы */ --warn-bg: #faf6ec; --warn-line: #ecdfbe; --warn-bar: #eab308; --warn-ink: #a07d1c; --warn-pill: #ecd9a8; --info-line: #d5ddff; --info-pill: #c4d0ff; --ok-bg: #f2fbf5; --ok-line: #c9ecd4; --ok-pill: #b8e6c6; --bad-bg: #fdf1f0; --bad-line: #f3cdc9; --bad-ink: #e05b4d; --bad-pill: #f0c1bb; /* тени, подложки, полосы прокрутки */ /* чипы-метки («База знаний», «Свежее»): не кнопки, поэтому мягкая заливка без обводки-кнопки — от кликабельных чипов «Содержания» их отличает именно приём, а не только цвет */ --pill-bg: #fff; --pill-line: #e5e5e0; --pill-ink: #5a5a62; --pop: #fff; --sh-pop: 0 20px 50px rgba(20,15,60,.22); --sh-1: 0 8px 20px rgba(19,19,22,.08); --sh-2: 0 10px 24px rgba(19,19,22,.14); --sh-card: 0 14px 34px rgba(20,20,40,.08); --scroll: rgba(19,19,22,.2); --scroll-hi: rgba(19,19,22,.38); --tap-bg: rgba(19,19,22,.07); --nav-hover: rgba(255,255,255,.7); --shot: none; /* фильтр для скриншотов, см. тёмную тему */ color-scheme: light; } /* ── Тёмная тема ── Ставится атрибутом data-theme на : его проставляет search.js до отрисовки страницы (см. «раннюю» вставку в генератора) — либо по выбору человека, либо по настройке системы. Поэтому здесь один набор значений, а не два: медиазапрос про системную тему разбирает скрипт. Тёмный портал — не инверсия светлого: фон почти чёрный, но поверхности разной высоты (страница → карточка → мягкий блок) различимы, а синий расходится на заливку (#3563ee, белый текст читается) и текст (#8ab0ff). */ :root[data-theme="dark"] { --bg: #0f1014; --card: #17181d; --soft: #1e1f26; --code-bg: #23242b; --line: #32343c; --line-hi: #474a55; --ink: #ecedf0; --gray: #a8a8b4; --gray-dark: #c0c0ca; --dim: #5b5c66; --header-bg: #0d0e11; /* акценты наоборот: светлая кнопка и синяя карточка вместо чёрных */ /* Кнопка в шапке — синяя: светлой она в точности повторяла плашку «24/7», и статичная справка выглядела так же, как нажимаемое действие. Теперь синий в тёмной теме означает ровно одно — «сюда можно нажать». */ --btn: #2f6bff; --btn-ink: #fff; /* Карточка-акцент выделяется рамкой и цветом числа, а не заливкой: синяя сливалась с панелью поиска над ней, светлая спорила с кнопкой. Крупных цветных плашек в тёмной теме нет — на тёмном фоне заливка среднего тона всегда выглядит запылённой. */ --hi-bg: #17181d; --hi-line: #4166bd; --hi-ink: #ecedf0; --hi-cap: #c0c0ca; --hi-num: #7fa8ff; --link: #7aa5ff; --accent: #2f6bff; --accent-ink: #7fa8ff; --accent-strong: #4d84ff; --accent-hot: #4d84ff; --accent-soft: #17224a; --green: #2fe07a; --sel: #2c3f78; /* Тёмные панели — чистый синий, а не сине-серый: с примесью серого большая плашка выглядит замутнённой. Градиент даёт глубину, сплошной --dark остаётся для мелочей (кружки иконок, всплывающее сообщение). */ --dark: #171c30; --dark-ink: #f0f2f8; --dark-cap: #a9b3cd; --dark-grad: linear-gradient(150deg, #1a2140 0%, #12162a 55%, #0e111f 100%); --dark-edge: rgba(255,255,255,.09); --dark-line: rgba(255,255,255,.26); /* главная кнопка на панели — тоже синяя: то же действие, тот же цвет */ --dark-btn: #2f6bff; --dark-btn-ink: #fff; --on-dark-btn: rgba(255,255,255,.1); --on-dark-btn-ink: #f0f2f8; /* панель поиска: тот же синий, но приглушённый — на тёмной странице исходный градиент светил как фонарь */ --hero-bg: radial-gradient(120% 150% at 12% -12%, #3f97ff 0%, transparent 58%), radial-gradient(140% 180% at 92% 15%, #3a5cff 0%, transparent 60%), linear-gradient(155deg, #2569d8 0%, #2743bd 48%, #141d64 100%); --hero-ink: #f2f4ff; --hero-dim: rgba(255,255,255,.8); --hero-line: rgba(255,255,255,.45); /* Поле поиска в тёмной теме НЕ переопределяем — оно остаётся светлым, как в светлой. Полупрозрачное белое поле (.14) с белёсой подсказкой (.68) давало контраст 3,0 при норме 4,5: и фон поля, и текст на нём светлели от одной и той же панели. Тёмное поле пробовать нельзя — на синем оно выглядит дырой; поэтому светлое поле с тёмным текстом, как было. */ --hero-edge: rgba(255,255,255,.08); --warn-bg: #2a2415; --warn-line: #4a3f22; --warn-bar: #d8a520; --warn-ink: #e8c26a; --warn-pill: #5a4c2a; --info-line: #2f3d68; --info-pill: #3a4a7a; --ok-bg: #12281b; --ok-line: #245437; --ok-pill: #2e6b45; --bad-bg: #2c1917; --bad-line: #5a2f2a; --bad-ink: #ff8a7a; --bad-pill: #6b3a33; --pill-bg: #17224a; --pill-line: #3a5bb0; --pill-ink: #a3c2ff; --pop: #22232a; --sh-pop: 0 20px 50px rgba(0,0,0,.55); --sh-1: 0 8px 20px rgba(0,0,0,.4); --sh-2: 0 10px 24px rgba(0,0,0,.5); --sh-card: 0 14px 34px rgba(0,0,0,.45); --scroll: rgba(233,233,236,.22); --scroll-hi: rgba(233,233,236,.4); --tap-bg: rgba(255,255,255,.09); --nav-hover: rgba(255,255,255,.06); /* белые скриншоты на тёмной странице слепят — гасим их, при наведении и в лайтбоксе возвращаем полную яркость */ --shot: brightness(.86); color-scheme: dark; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } /* ── Плавная смена страниц ── */ /* Chromium/Safari 18+: нативный кроссфейд между документами */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; } /* Фолбэк без View Transitions: мягкое появление страницы */ @keyframes ppm-page-in { from { opacity: 0; } to { opacity: 1; } } @supports not (view-transition-name: root) { body { animation: ppm-page-in .22s ease-out; } } @media (prefers-reduced-motion: reduce) { *, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } a { color: var(--link); } /* ── Системные мелочи, которые иначе рисует браузер ──────────────────────── */ /* Схема объявлена явно в палитре (color-scheme у :root и у тёмной темы): иначе браузер сам подкрашивает поля ввода, автозаполнение и полосы прокрутки. */ :root { accent-color: var(--accent); } /* Выделение текста — фирменное: клиенты копируют адреса, коды и названия */ ::selection { background: var(--sel); color: var(--ink); } /* Рамка фокуса: мышью не мешаем, с клавиатуры показываем всегда — иначе тот, кто ходит по Tab, не понимает, где находится */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 6px; } /* У полей ввода своя подсветка — рамка плюс мягкий ореол. Системная рамка поверх неё давала два синих кольца подряд, это било по глазам. */ input:focus-visible, textarea:focus-visible { outline: none; } .h-search input:focus, .paper .svc-filter input:focus, .helpful textarea:focus { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); } .hero-searchbox input:focus { background: var(--hero-inp-hi); box-shadow: 0 10px 30px rgba(40,30,90,.18), 0 0 0 3px rgba(255,255,255,.55); } .search-panel :focus-visible, .btn-dark:focus-visible, .cta :focus-visible, .escalate :focus-visible { outline-color: #fff; } /* На телефоне браузер подсвечивает касание серым прямоугольником поверх ссылки; убираем его, но оставляем свою обратную связь на нажатие */ * { -webkit-tap-highlight-color: transparent; } a:active, button:active, .cat:active, .row:active { opacity: .72; } /* Курсор в полях и автозаполнение Chrome (жёлтый фон) */ input, textarea { caret-color: var(--accent-ink); } input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 60px var(--card) inset; -webkit-text-fill-color: var(--ink); } .hero-searchbox input:-webkit-autofill { -webkit-box-shadow: 0 0 0 60px var(--hero-inp-solid) inset; -webkit-text-fill-color: var(--hero-inp-ink); } .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pill-ink); border: 1px solid var(--pill-line); background: var(--pill-bg); padding: 7px 14px; border-radius: 999px; } /* крестик очистки — появляется, когда в поле что-то набрано (см. search.js) */ .s-clear { position: absolute; right: 9px; top: 0; bottom: 0; margin: auto 0; width: 30px; height: 30px; display: none; align-items: center; justify-content: center; border: none; background: transparent; border-radius: 50%; cursor: pointer; color: var(--gray); transition: background .15s ease, color .15s ease; } .has-text .s-clear { display: flex; } .s-clear:hover { background: var(--tap-bg); color: var(--ink); } .s-clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .hero-searchbox .s-clear { right: 14px; } /* ── Полосы прокрутки ── Системный бегунок в macOS и Windows выглядит по-разному и спорит со стилем страницы. Рисуем свой: тонкая скруглённая пилюля цвета текста на прозрачном поле, темнее под курсором. Область захвата шире самой пилюли (прозрачная рамка + background-clip), чтобы в неё легко было попасть мышью. Firefox своих псевдоэлементов не поддерживает — там работают две строки scrollbar-width/scrollbar-color. */ html, .side.tall, .paper .tbl-scroll, .suggest { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; } html::-webkit-scrollbar, .side.tall::-webkit-scrollbar, .paper .tbl-scroll::-webkit-scrollbar, .suggest::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track, .side.tall::-webkit-scrollbar-track, .paper .tbl-scroll::-webkit-scrollbar-track, .suggest::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb, .side.tall::-webkit-scrollbar-thumb, .paper .tbl-scroll::-webkit-scrollbar-thumb, .suggest::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; transition: background-color .15s ease; } html::-webkit-scrollbar-thumb:hover, .side.tall::-webkit-scrollbar-thumb:hover, .paper .tbl-scroll::-webkit-scrollbar-thumb:hover, .suggest::-webkit-scrollbar-thumb:hover { background: var(--scroll-hi); background-clip: content-box; } .side.tall::-webkit-scrollbar-corner, .paper .tbl-scroll::-webkit-scrollbar-corner { background: transparent; } svg.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ── Шапка ── */ header.site { position: sticky; top: 0; z-index: 30; /* фон непрозрачный: backdrop-filter на липкой шапке заставлял браузер перерисовывать размытие при каждом кадре прокрутки — страница мерцала */ background: var(--header-bg); border-bottom: 1px solid var(--line); } .nav { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 18px; } .logo { display: flex; align-items: center; text-decoration: none; flex: none; } .logo .lockup { height: 46px; width: auto; display: block; } /* подпись в лого чёрная (зашита в png) — в тёмной теме показываем вариант со светлой подписью; это переключение картинок, а не цветов, поэтому живёт здесь, а не в токенах темы */ .logo .lk-d { display: none; } :root[data-theme="dark"] .logo .lk-l { display: none; } :root[data-theme="dark"] .logo .lk-d { display: block; } .h-search { flex: 1; max-width: 400px; position: relative; } /* мобильный блок поиска под шапкой; на десктопе спрятан, поле живёт в шапке */ .m-search { display: none; } .h-search input { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 0 40px 0 42px; font-size: 14px; color: var(--ink); } .h-search input:focus { border-color: var(--accent-ink); } /* Длинная подсказка или запрос не влезают в поле на телефоне — обрезаем многоточием, а не на полуслове («почему платё») */ .h-search input, .hero-searchbox input, [data-svc-filter] { text-overflow: ellipsis; } .h-search input::placeholder, .hero-searchbox input::placeholder, [data-svc-filter]::placeholder { text-overflow: ellipsis; } /* Пока поле не тронуто, подсказка видна; при фокусе — прячется: на телефоне курсор мигал перед «Например: почему платё…», и текст выглядел как недоудалённый чужой запрос */ .h-search input:focus::placeholder, .hero-searchbox input:focus::placeholder, [data-svc-filter]:focus::placeholder { color: transparent; } /* иконку центрируем растяжкой по высоте поля: у span с инлайновой svg есть межстрочный «воздух», из-за него transform: translateY(-50%) ставил лупу чуть выше строки текста */ .h-search .s-ic { position: absolute; left: 16px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--gray); } .h-search .s-ic svg.ic { width: 18px; height: 18px; } .btn-dark { text-decoration: none; color: var(--btn-ink) !important; background: var(--btn); flex: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 999px; transition: opacity .15s ease; } .btn-dark:hover { opacity: .82; } /* Правая группа шапки: переключатель темы и кнопка поддержки идут парой, иначе space-between растаскивает их по разным краям строки */ .nav-act { display: flex; align-items: center; gap: 10px; flex: none; } /* Переключатель темы: круглая кнопка рядом с «Написать в поддержку». Показываем ту иконку, которая обещает результат нажатия: в светлой теме луну («станет тёмной»), в тёмной — солнце. Вторая иконка спрятана. */ .theme-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--gray-dark); cursor: pointer; padding: 0; transition: color .15s ease, border-color .15s ease, background .15s ease; } .theme-btn:hover { color: var(--accent-ink); border-color: var(--accent-ink); } .theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-btn .i-sun { display: none; } :root[data-theme="dark"] .theme-btn .i-sun { display: block; } :root[data-theme="dark"] .theme-btn .i-moon { display: none; } /* Пока скрипт не решил, какая тема (первые миллисекунды) — кнопки не видно: иначе она успевает мигнуть не той иконкой */ html:not([data-theme]) .theme-btn { visibility: hidden; } /* на широком экране — только надпись, иконка спрятана */ .btn-dark svg { display: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Подсказки поиска */ .suggest { position: absolute; left: 0; right: 0; top: 50px; text-align: left; z-index: 40; background: var(--pop); border-radius: 16px; box-shadow: var(--sh-pop); overflow: hidden; display: none; } .suggest.open { display: block; } .suggest a { display: block; padding: 12px 18px; text-decoration: none; color: var(--ink); font-size: 14.5px; } .suggest a .s-cat { display: block; font-size: 12px; color: var(--gray); margin-top: 1px; } .suggest mark { background: none; color: var(--accent-ink); font-weight: 700; } .suggest a:hover, .suggest a.sel { background: var(--accent-soft); } .suggest .none { padding: 13px 18px; color: var(--gray-dark); font-size: 14px; } /* Только прямая ссылка в самой фразе («напишите в поддержку»): без «>» это правило сбрасывало отступы и у чипов «Часто ищут» внутри .pop, и текст упирался в края пилюли. */ .suggest .none > a { display: inline; padding: 0; color: var(--accent-ink); font-weight: 600; } /* ── Главная ── */ .hero { padding: 56px 0 8px; } .hero h1 { font-size: clamp(36px, 5.5vw, 58px); line-height: 1.05; letter-spacing: -2px; font-weight: 650; margin-top: 22px; } .hero h1 .dim { display: block; color: var(--dim); } .search-panel { margin-top: 34px; border-radius: 28px; padding: 50px 28px 56px; text-align: center; position: relative; background: var(--hero-bg); /* тонкий внутренний контур: на тёмной странице панель без него выглядит наклеенным прямоугольником */ box-shadow: inset 0 0 0 1px var(--hero-edge); } .search-panel h2 { color: var(--hero-ink); font-size: clamp(21px, 3vw, 28px); font-weight: 650; letter-spacing: -.7px; } .search-panel p { color: var(--hero-dim); font-size: 15px; margin-top: 6px; } .hero-searchbox { max-width: 560px; margin: 24px auto 0; position: relative; z-index: 5; } .hero-searchbox input { width: 100%; height: 56px; border: none; border-radius: 999px; padding: 0 50px 0 52px; font-size: 16px; color: var(--hero-inp-ink); background: var(--hero-inp); box-shadow: 0 10px 30px rgba(40,30,90,.18); } /* лупа, подсказка в поле и крестик — одного цвета: в тёмной теме поле на синей панели светлое, и серые иконки на нём терялись */ .hero-searchbox .s-ic, .hero-searchbox .s-clear { color: var(--hero-ph); position: absolute; } .hero-searchbox .s-ic { left: 20px; top: 0; bottom: 0; display: flex; align-items: center; } .hero-searchbox input::placeholder { color: var(--hero-ph); } .hero-searchbox .s-clear:hover { background: var(--hero-clear-hi); color: var(--hero-inp-ink); } .hero-searchbox .suggest { top: 64px; } .search-panel .quick { margin-top: 16px; font-size: 13.5px; color: var(--hero-dim); } .search-panel .quick a { color: var(--hero-ink); text-decoration: none; border-bottom: 1px solid var(--hero-line); margin: 0 5px; } .bento { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 12px; margin-top: 12px; } .bcard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; min-height: 130px; display: flex; flex-direction: column; justify-content: space-between; } .bcard .cap { font-size: 13.5px; color: var(--gray-dark); line-height: 1.45; } .bcard .num { font-size: 38px; font-weight: 650; letter-spacing: -1.5px; line-height: 1; margin-top: 14px; } .bcard.dark { background: var(--hi-bg); border-color: var(--hi-line); color: var(--hi-ink); } .bcard.dark .num { color: var(--hi-num); } .bcard.dark .cap { color: var(--hi-cap); } .sec { padding: 54px 0 0; } .sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 22px; } .sec-head h2 { font-size: clamp(24px, 3.2vw, 34px); font-weight: 650; letter-spacing: -1.2px; margin-top: 12px; } .sec-head .aside { max-width: 300px; color: var(--gray-dark); font-size: 14px; } .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px 18px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease; } .cat:hover { transform: translateY(-3px); box-shadow: var(--sh-card); } .cat h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.2px; margin-bottom: 5px; } .cat p { font-size: 13.5px; color: var(--gray-dark); line-height: 1.5; } /* низ карточки прижат к нижнему краю: счётчик слева, иконка раздела справа — так строки счётчиков выравниваются между карточками разной высоты */ .cat .foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; } .cat .cnt { font-size: 13px; font-weight: 600; color: var(--gray); } .cat .foot svg.ic { width: 22px; height: 22px; color: var(--accent-ink); stroke-width: 1.5; } .rows { display: flex; flex-direction: column; gap: 10px; } .row { display: flex; align-items: center; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 15px 18px 15px 26px; text-decoration: none; color: var(--ink); transition: all .16s ease; } .row .t { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; flex: 1; } .row .b { font-size: 13px; color: var(--gray); flex: none; } .row .arr { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--accent-hot); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; transition: transform .16s ease; } .row:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* дата на наведённой строке — белая: полупрозрачная давала 3,6 в светлой теме и 3,2 в тёмной при норме 4,5. От заголовка её отличают размер и насыщенность */ .row:hover .b { color: #fff; } .row:hover .arr { background: #fff; color: var(--accent); transform: rotate(-45deg); } .cta { margin: 64px 0 30px; background: var(--dark-grad); color: var(--dark-ink); border-radius: 26px; box-shadow: inset 0 0 0 1px var(--dark-edge); padding: 48px 46px; display: flex; align-items: center; justify-content: space-between; gap: 26px; } .cta h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 650; letter-spacing: -1.4px; } .cta p { color: var(--dark-cap); margin-top: 8px; font-size: 14.5px; max-width: 420px; } .cta .btns { flex: none; display: flex; gap: 10px; flex-wrap: wrap; } .cta a { text-decoration: none; background: var(--dark-btn); color: var(--dark-btn-ink); font-weight: 650; font-size: 15px; padding: 15px 26px; border-radius: 999px; transition: transform .15s ease; } .cta a:hover { transform: scale(1.04); } .cta a.ghost { background: none; color: var(--dark-ink); border: 1px solid var(--dark-line); } .cta a.ghost:hover { border-color: var(--dark-ink); } footer.site { padding: 26px 0 44px; color: var(--gray); font-size: 13px; } footer.site .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* ссылки — гибкой строкой с gap, а не отступом слева: при переносе на узком экране отступ у первой ссылки в новой строке выбивал её из общего поля */ footer.site .wrap > span:last-child { display: flex; flex-wrap: wrap; gap: 6px 18px; } footer.site a { color: var(--gray-dark); text-decoration: none; white-space: nowrap; } /* ── Страница раздела ── */ .sec-page { padding: 30px 0 26px; } .sec-page h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 650; letter-spacing: -1.4px; } .sec-page .lead { color: var(--gray-dark); font-size: 16px; margin-top: 8px; max-width: 620px; } .sec-page .cnt { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--gray); } .sec-page + .rows { margin-bottom: 8px; } /* ── Статья ── */ /* боковые 24px обязательны: это те же поля, что у .wrap — иначе колонки статьи съезжают на 24px относительно шапки и подвала (сокращение padding обнуляло их) */ .layout { display: grid; grid-template-columns: 264px 1fr; gap: 44px; padding: 48px 24px 70px; align-items: start; } /* без min-width:0 широкая таблица распирает колонку грида и всю страницу */ .layout > main { min-width: 0; } /* длинный список статей не помещается в экран: даём ему собственную прокрутку, иначе низ меню виден только после прокрутки всей страницы */ /* Своя прокрутка нужна только длинному меню; класс tall ставит search.js, когда список действительно не помещается в экран. Раньше overflow был всегда, и на коротком меню колесо сначала съедало пару пикселей внутри блока — казалось, что сайдбар слегка ездит туда-сюда. */ .side { position: sticky; top: 88px; } .side.tall { max-height: calc(100vh - 108px); overflow-y: auto; } /* Список статей раздела: на широком экране всегда раскрыт, заголовок не нужен */ .side-list > summary { display: none; } .side .back { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--gray-dark); margin-bottom: 20px; } .side .back:hover { color: var(--accent-ink); } .side h4 { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); margin: 14px 0 8px; } .side nav { display: flex; flex-direction: column; gap: 4px; } .side nav a { text-decoration: none; color: var(--gray-dark); font-size: 14px; line-height: 1.4; padding: 8px 13px; border-radius: 11px; transition: background .18s ease, color .18s ease; } .side nav a:hover { color: var(--ink); background: var(--nav-hover); } .side nav a.active { color: var(--ink); font-weight: 650; background: var(--card); border: 1px solid var(--line); } .crumbs { font-size: 13px; color: var(--gray); margin-bottom: 16px; } /* на страницах раздела и поиска крошки лежат в голом .wrap (без .layout с его padding) — без этого правила они прилипают вплотную к шапке */ .wrap > .crumbs { padding-top: 48px; } .crumbs a { color: var(--gray-dark); text-decoration: none; } .crumbs a:hover { color: var(--accent-ink); } h1.a-title { font-size: clamp(27px, 3.8vw, 40px); font-weight: 650; letter-spacing: -1.4px; line-height: 1.14; } .meta { display: flex; gap: 12px; align-items: center; margin: 12px 0 8px; font-size: 13px; color: var(--gray); flex-wrap: wrap; } .meta .fresh { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--gray-dark); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; } .meta .fresh::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); } .toc { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 26px; } .toc a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--gray-dark); border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; } .toc a:hover { color: var(--accent-ink); border-color: var(--accent-ink); } .toc .lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); align-self: center; margin-right: 4px; } .paper { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 40px 46px; overflow-wrap: break-word; } .paper h2 { font-size: 22px; font-weight: 650; letter-spacing: -.5px; margin: 34px 0 14px; scroll-margin-top: 100px; } /* без пустой строки в начале статьи (баннер не трогаем — он уходит под шапку) */ .paper > :first-child:not(.banner) { margin-top: 0; } .paper h3 { font-size: 18px; font-weight: 650; margin: 26px 0 10px; } .paper h4 { font-size: 16px; font-weight: 650; margin: 22px 0 8px; } /* Шаги-заголовки отделяем линией — как шаги-списки, иначе они сливаются с текстом */ .paper h3.step, .paper h4.step { display: flex; align-items: center; gap: 14px; font-size: 17px; margin: 26px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); } /* первый шаг раздела линией не отбиваем — её роль играет сам заголовок */ .paper > .step:first-child, .paper h2 + .step, .paper h3 + .step { padding-top: 0; border-top: none; } .paper .step .n { font-size: 38px; font-weight: 750; color: var(--accent-ink); line-height: 1; letter-spacing: -2px; min-width: 26px; flex: none; } .paper p { margin: 10px 0; } .paper img { max-width: 100%; width: auto; height: auto; border-radius: 14px; margin: 8px 0; } .paper figure { margin: 12px 0; } /* Скриншоты почти все на белом фоне: в тёмной теме они бьют по глазам ярким пятном посреди статьи. Гасим их (токен --shot), при наведении и в лайтбоксе возвращаем как есть — рассмотреть мелкую деталь нужно в полном цвете. */ .paper img, .paper .tile img { filter: var(--shot); transition: filter .2s ease; } .paper a.img-zoom:hover img, .paper .tile:hover img { filter: none; } /* Ширина картинок — по сетке в 12 колонок (класс ставит генератор, см. img_cols): 4 — вертикальный скрин телефона, 5 — умеренно вертикальная, 6 — квадрат, 9 — обычная горизонтальная, 10 — широкая панорама. Прицельный кроп мелкого элемента генератор дополнительно ограничивает inline-потолком max-width, чтобы он не растягивался и не мылился — в том числе на узком экране. */ .paper a.img-zoom { display: block; width: fit-content; cursor: zoom-in; line-height: 0; } .paper a.img-zoom img { width: 100%; margin: 0; transition: opacity .35s ease; } .paper a.img-zoom.col-4 { width: 33.33%; } .paper a.img-zoom.col-5 { width: 41.66%; } .paper a.img-zoom.col-6 { width: 50%; } .paper a.img-zoom.col-8 { width: 66.66%; } .paper a.img-zoom.col-9 { width: 75%; } .paper a.img-zoom.col-10 { width: 83.33%; } /* Несколько скриншотов в одном абзаце (класс shots ставит генератор): в ряд по два с зазором; inline-потолок max-width от генератора при этом продолжает держать масштаб мелких скринов. */ .paper p.shots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; } .paper p.shots a.img-zoom { width: calc(50% - 7px); } .paper figure.banner { margin: -40px -46px 26px; } .paper figure.banner img { width: 100%; max-width: none; max-height: none; border-radius: 22px 22px 0 0; margin: 0; display: block; } /* маркеры одинаковые на всех уровнях: вложенные ul браузер иначе рисует кружками */ .paper ul, .paper ul ul { padding-left: 1.3em; margin: 10px 0; list-style: disc; } .paper hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; } .paper code { background: var(--code-bg); border-radius: 6px; padding: 1px 6px; font-size: .92em; } /* Шаги: ol верхнего уровня — большие синие цифры */ .paper > ol { list-style: none; counter-reset: st; padding-left: 0; margin: 12px 0; } .paper > ol > li { counter-increment: st; display: grid; grid-template-columns: 64px 1fr; gap: 0 10px; /* row-gap 0: расстояние внутри шага задают отступы абзацев */ padding: 18px 0; border-top: 1px solid var(--line); align-items: start; position: relative; } /* цифра вне потока: иначе её высота (44px) растягивает первую строку грида и между абзацами шага появляется лишняя пустота */ .paper > ol > li::before { content: counter(st); font-size: 44px; font-weight: 650; line-height: .9; letter-spacing: -3px; color: var(--accent-ink); position: absolute; left: 0; top: 14px; } .paper > ol > li > * { grid-column: 2; margin: 6px 0 0; } .paper > ol > li > :first-child { margin-top: 0; } /* у последнего шага снизу нет линии — и его отступ читается как пустая строка */ .paper > ol > li:last-child { padding-bottom: 0; } /* если статья начинается сразу со списка шагов, линия сверху ни от чего не отделяет */ .paper > ol:first-child > li:first-child { border-top: none; padding-top: 0; } /* но текст, который идёт следом за списком, нельзя прижимать к последнему шагу */ .paper > ol + * { margin-top: 18px; } .paper > ol.ol-sub { list-style: decimal; padding-left: 1.4em; } .paper > ol.ol-sub > li { display: list-item; border: none; padding: 2px 0; } .paper > ol.ol-sub > li::before { content: none; } .paper > ol.ol-sub > li > * { grid-column: auto; } .paper > ol.ol-sub li p { margin: 2px 0; } .paper ol ol { list-style: decimal; padding-left: 1.4em; } .paper ol ol > li { display: list-item; border: none; padding: 2px 0; } /* абзацы-обёртки из Kaiten внутри пунктов — без раздутых отступов */ .paper ol ol li p, .paper ul li p { margin: 2px 0; } .paper ol ol > li::before { content: none; } /* Callout'ы с ярлыками-пилюлями */ .paper .callout { border-radius: 14px; border: 1px solid var(--line); background: var(--soft); padding: 16px 18px 14px; margin: 16px 0; } .paper .callout > p { margin: 8px 0 0; } .paper .callout > :first-child { margin-top: 0; } .paper .callout > :last-child { margin-bottom: 0; } .paper .callout ul { margin: 0; padding-left: 1.2em; } .paper .callout ul li { margin: 4px 0; } /* базовый callout — просто серый бабл; пилюли-ярлыки только у типизированных */ .paper .callout:is(.warning, .info, .success, .danger)::before { display: block; width: fit-content; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; margin: 0 0 10px; font-size: 10.5px; line-height: 1.4; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-dark); } .paper .callout.warning { background: var(--warn-bg); border-color: var(--warn-line); border-left: 3px solid var(--warn-bar); } .paper .callout.warning::before { content: "Важно"; color: var(--warn-ink); border-color: var(--warn-pill); } .paper .callout.info { background: var(--accent-soft); border-color: var(--info-line); border-left: 3px solid var(--accent-ink); } .paper .callout.info::before { content: "Совет"; color: var(--accent-ink); border-color: var(--info-pill); } .paper .callout.success { background: var(--ok-bg); border-color: var(--ok-line); border-left: 3px solid var(--green); } .paper .callout.success::before { content: "Готово"; color: var(--green); border-color: var(--ok-pill); } .paper .callout.danger { background: var(--bad-bg); border-color: var(--bad-line); border-left: 3px solid var(--bad-ink); } .paper .callout.danger::before { content: "Внимание"; color: var(--bad-ink); border-color: var(--bad-pill); } /* Карточки-преимущества: пары «эмодзи + заголовок» / описание из текста статьи */ .paper .fcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 12px; margin: 18px 0; } .paper .fcard { background: var(--soft); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; } .paper .fcard .ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 20px; line-height: 1; } .paper .fcard .t { font-weight: 650; font-size: 15.5px; line-height: 1.35; margin-bottom: 6px; } .paper .fcard p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gray-dark); } /* Плитки-витрина: картинка + подпись, кликается целиком */ .paper .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 14px; margin: 18px 0; } .paper .tile { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); } .paper .tile .shot { overflow: hidden; line-height: 0; } .paper .tile img { display: block; width: 100%; max-width: none; max-height: none; margin: 0; border-radius: 0; } .paper .tile .cap { display: block; padding: 13px 16px 15px; } .paper .tile .cap b { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.35; } .paper .tile .cap span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--gray-dark); } /* Аккордеон: перечни ошибок и частых вопросов (нативный
) */ .paper .accordion { margin: 16px 0; border-top: 1px solid var(--line); } .paper .acc-item { border-bottom: 1px solid var(--line); } .paper .acc-item > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 15px 4px; font-size: 16px; font-weight: 650; list-style: none; transition: color .15s; } .paper .acc-item > summary::-webkit-details-marker { display: none; } /* браузерная рамка фокуса после клика мышью дублирует серый разделитель строк — гасим её; клавиатурному фокусу оставляем свою, заметную */ .paper .acc-item > summary:focus { outline: none; } .paper .acc-item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; } .paper .acc-item > summary::after { content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--gray); border-bottom: 2px solid var(--gray); border-radius: 1px; transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s, border-color .2s; } .paper .acc-item[open] > summary { color: var(--accent-ink); } .paper .acc-item[open] > summary::after { border-color: var(--accent-ink); transform: rotate(-135deg) translate(-3px, -3px); } .paper .acc-item > summary:hover { color: var(--accent-ink); } .paper .acc-body { padding: 0 4px 16px; } /* раскрытие ведёт search.js: CSS-анимация на [open] в браузере повторно не запускалась, а закрытие на одном CSS не анимируется вовсе */ .paper .acc-body > :first-child { margin-top: 0; } /* списки внутри аккордеона — обычные, но с отступом: иначе из-за глобального сброса padding цифры и точки вылезают за левый край */ .paper .acc-body ol { list-style: decimal; padding-left: 1.6em; margin: 10px 0; } .paper .acc-body ol > li { display: list-item; border: none; padding: 3px 0; } .paper .acc-body ol > li::before { content: none; } .paper .acc-body ol > li > * { grid-column: auto; margin: 2px 0; } @media (prefers-reduced-motion: reduce) { .paper .acc-item > summary::after { transition: none; } } /* Поиск по каталогу сервисов */ .paper .svc-filter { margin: 18px 0 6px; position: relative; } .paper .svc-filter input { width: 100%; height: 46px; padding: 0 44px 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font: inherit; font-size: 15px; color: var(--ink); transition: border-color .15s, box-shadow .15s; } .paper .svc-filter input::-webkit-search-cancel-button { display: none; } .paper .svc-empty { margin: 12px 2px 0; color: var(--gray-dark); font-size: 14.5px; } /* Таблицы */ .paper .tbl-scroll { overflow-x: auto; margin: 12px 0; } /* width:auto + min-width — узкие таблицы тянутся на всю ширину, широкие уезжают в горизонтальный скролл .tbl-scroll, а не ломают страницу */ .paper table { border-collapse: collapse; width: auto; min-width: 100%; font-size: 14.5px; } .paper table th { font-size: 14px; font-weight: 650; color: var(--ink); border: none; border-bottom: 2px solid var(--line); background: var(--soft); padding: 12px; text-align: left; vertical-align: middle; } .paper table th:first-child { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-dark); } .paper table td { border: none; border-bottom: 1px solid var(--line); padding: 12px; vertical-align: middle; } /* «одинаково у всех» — ячейка на всю ширину: по центру и подсветкой */ .paper table td[colspan] { text-align: center; background: var(--accent-soft); font-weight: 550; } .paper table td:first-child, .paper table th:first-child { min-width: 170px; } .paper table p { margin: 0; } /* таблицы из Kaiten вместо используют жирную первую строку */ .paper table tr:first-child td { background: var(--soft); border-bottom: 2px solid var(--line); } /* ...но если настоящий, первая строка тела — обычная */ .paper table thead + tbody tr:first-child td { background: none; border-bottom: 1px solid var(--line); } .paper table thead + tbody tr:first-child td[colspan] { background: var(--soft); } .paper blockquote { border-left: 3px solid var(--accent-ink); background: none; padding: 4px 0 4px 18px; margin: 14px 0; font-size: 1.05em; } .escalate { margin-top: 24px; background: var(--dark-grad); color: var(--dark-ink); border-radius: 20px; box-shadow: inset 0 0 0 1px var(--dark-edge); padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .escalate .t { font-size: 18px; font-weight: 650; letter-spacing: -.3px; } .escalate p { font-size: 13.5px; color: var(--dark-cap); margin-top: 3px; max-width: 420px; } .support-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 6px; } .support-btns a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px 9px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; } .support-btns a:hover { transform: translateY(-1px); border-color: var(--line-hi); box-shadow: var(--sh-1); } .support-btns .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; } .support-btns .ico svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .support-btns .ico.tg { background: #2aabee; } .support-btns .ico.mail { background: var(--dark); } .support-btns .ico.max { background: linear-gradient(135deg, #8a5cff, #4d7dff); } .support-btns .ico.web { background: var(--dark); } .escalate .support-btns { margin: 0; } .escalate .support-btns a { border: none; background: var(--on-dark-btn); color: var(--on-dark-btn-ink); } /* Кнопка «наверх»: появляется на длинных страницах, когда ушли вниз */ .to-top { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s, box-shadow .2s, border-color .2s; box-shadow: var(--sh-1); } .to-top.show { opacity: 1; visibility: visible; transform: none; } .to-top:hover { border-color: var(--line-hi); box-shadow: var(--sh-2); } .to-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (prefers-reduced-motion: reduce) { .to-top { transition: none; } } .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; } .pager a { text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; transition: border-color .15s ease; } .pager a:hover { border-color: var(--accent-ink); } .pager .dir { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gray); } .pager .ttl { display: block; font-size: 14.5px; font-weight: 650; margin-top: 5px; letter-spacing: -.2px; } .pager a.next { text-align: right; } /* ── Страница результатов поиска ── */ /* боковые 24px — как у .wrap на этом же элементе (см. .layout и .nav): в сокращённом padding нули по бокам прижимали результаты к краю экрана */ .search-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 70px; } .search-page h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 650; letter-spacing: -1.2px; margin-bottom: 6px; } .search-page .n { color: var(--gray-dark); font-size: 14px; margin-bottom: 22px; } .result { animation: res-in .42s cubic-bezier(.22,.61,.36,1) both; display: block; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px 24px; margin-bottom: 12px; text-decoration: none; color: var(--ink); transition: border-color .15s ease; } .result:hover { border-color: var(--accent-ink); } /* каскад появления: задержку каждой карточке ставит search.js */ @keyframes res-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } } .result .r-t { font-size: 17px; font-weight: 650; letter-spacing: -.3px; } .result .r-t mark, .result .r-x mark { background: none; color: var(--accent-ink); font-weight: 700; } .result .r-c { font-size: 12.5px; color: var(--gray); margin: 3px 0 6px; } /* отрывок — ровно две строки с многоточием: длина текста разная, без ограничения карточки скакали по высоте */ .result .r-x { font-size: 14px; color: var(--gray-dark); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; } .search-empty { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; color: var(--gray-dark); } .search-empty a { font-weight: 600; } /* предупреждение над частичной выдачей: точного ответа нет, ниже — похожие */ .search-note { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; color: var(--gray-dark); font-size: 14px; } .search-note a { font-weight: 600; } /* ── Оценка статьи ── */ .helpful { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding: 18px 22px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: height .32s cubic-bezier(.22,.61,.36,1), opacity .17s ease; } .helpful .hq { font-size: 15px; font-weight: 600; } /* смена состояний: гасим старое, проявляем новое, высоту ведём плавно */ .helpful.fading { opacity: 0; } .helpful > * { transition: opacity .2s ease; } .helpful .hb { display: flex; gap: 8px; } .helpful button { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px 20px; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--ink); transition: border-color .15s ease, color .15s ease, background .15s ease; } .helpful button:hover { border-color: var(--accent-ink); color: var(--accent-ink); background: var(--accent-soft); } /* Состояние с полем отзыва: вопрос строкой сверху, поле во всю ширину, кнопка под ним справа. В одну строку это не помещалось — поле сжималось до узкой полоски, а текст подсказки не влезал. */ .helpful.asking { display: block; } .helpful.asking .hq { display: block; margin-bottom: 12px; } .helpful .hform { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .helpful .hrow { display: flex; gap: 8px; } .helpful textarea { width: 100%; font: inherit; font-size: 14.5px; line-height: 1.5; resize: vertical; min-height: 88px; color: var(--ink); padding: 12px 15px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); } .helpful textarea::placeholder { color: var(--gray); } .helpful textarea:focus { border-color: var(--accent-ink); background: var(--card); } .helpful .hform button { background: var(--accent); border-color: var(--accent); color: #fff; padding: 9px 24px; } .helpful .hform button:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; } /* «Пропустить» — тихая: без заливки, серым; действие по умолчанию — «Отправить». Стоит после общего правила кнопок формы, иначе синяя заливка перекрывает */ .helpful .hform button.hskip { background: transparent; border-color: transparent; color: var(--gray); } .helpful .hform button.hskip:hover { background: transparent; border-color: var(--line); color: var(--ink); } /* ── Плавность ── */ html { scroll-behavior: smooth; } /* блоки появляются мягко; отрисовка на отдельном слое (translate3d + backface), иначе браузер перерисовывает их вместе со страницей и прокрутка дёргается */ .rv { opacity: 0; transform: translate3d(0, 12px, 0); backface-visibility: hidden; } .rv.shown { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rv, .rv.shown { opacity: 1; transform: none; transition: none; } } /* ── Лайтбокс: скриншот поверх статьи ── */ .lightbox { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; gap: 10px; background: rgba(12, 12, 16, .82); padding: 40px 20px; opacity: 0; transition: opacity .2s ease; } .lightbox.on { display: flex; opacity: 1; } .lightbox img { max-width: min(1100px, 92vw); max-height: 88vh; object-fit: contain; border-radius: 14px; background: #fff; animation: lb-in .22s cubic-bezier(.22,.61,.36,1); } @keyframes lb-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } .lightbox .lb-close, .lightbox .lb-nav { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; transition: background .15s ease; } .lightbox .lb-close:hover, .lightbox .lb-nav:hover { background: rgba(255,255,255,.28); } .lightbox .lb-close { top: 18px; right: 18px; } .lightbox .lb-prev { left: 16px; } .lightbox .lb-next { right: 16px; } .lightbox svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .lightbox .lb-count { position: absolute; bottom: 20px; color: rgba(255,255,255,.7); font-size: 13px; } .paper a.img-zoom img.img-load { opacity: 0; } /* ── Ссылка на раздел и шаг ── */ .paper h2 .anchor, .paper .step .anchor { display: inline-flex; align-items: center; margin-left: 8px; opacity: 0; color: var(--gray); transition: opacity .15s ease, color .15s ease; } /* иконка не занимает места в строке (свисает в поле карточки): иначе у заголовка ровно в ширину колонки она переносила бы текст или, без nw, сама падала бы пустой второй строкой */ .paper h2 .anchor { margin-right: -23px; } .paper h2:hover .anchor, .paper .step:hover .anchor, .paper .anchor:focus-visible { opacity: 1; } .paper .anchor:hover { color: var(--accent-ink); } .paper .anchor svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } /* последнее слово заголовка склеено с якорем — переносятся только вместе */ .paper h2 .nw { white-space: nowrap; } .paper .step .anchor { margin-left: auto; } @keyframes hit-in { from { background: var(--accent-soft); } to { background: transparent; } } .paper h2.hit, .paper .step.hit { animation: hit-in 1.6s ease; border-radius: 8px; } /* значения, которые копируются кликом */ .paper code.copyable { cursor: pointer; transition: background .15s ease; } .paper code.copyable:hover { background: var(--accent-soft); color: var(--accent-ink); } /* всплывающее сообщение «скопировано» */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); background: var(--dark); color: var(--dark-ink); font-size: 14px; font-weight: 500; padding: 11px 20px; border-radius: 999px; z-index: 95; pointer-events: none; opacity: 0; transition: opacity .2s ease, transform .2s ease; } .toast.on { opacity: 1; transform: translate(-50%, 0); } /* активный раздел в «Содержании» */ .toc a.now { background: var(--accent); border-color: var(--accent); color: #fff; } /* «Ещё по теме» */ .related { margin-top: 30px; } .related .rel-h { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin-bottom: 12px; } /* Статья обновлена на этой неделе. Без слова: дата рядом и так всё говорит, а «свежее» звучало как про продукты. Точка помогает выцепить строку взглядом. */ /* Точка — текстовый символ, а не inline-block: перед inline-block браузер может перенести строку, и на телефоне точка уезжала на пустую строку под заголовком. Между словом и текстом без пробела переноса не бывает. */ .row.fresh .t::after { content: "\25CF"; margin-left: 8px; color: var(--green); font-size: 9px; vertical-align: 2px; } .row.fresh .b { color: var(--green); } /* На наведённой строке зелёный уходит: на синем он даёт 2,2 в светлой теме и 2,6 в тёмной при норме 4,5. Свежесть держит сама точка у заголовка. */ .row:hover.fresh .b { color: #fff; } .row:hover.fresh .t::after { color: #fff; } /* частые запросы в пустом поиске */ .pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--gray); } .pop a { text-decoration: none; color: var(--gray-dark); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; } .pop a:hover { border-color: var(--accent-ink); color: var(--accent-ink); } /* кольцо прогресса вокруг кнопки «наверх» */ .to-top .ring { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); transform: rotate(-90deg); pointer-events: none; } .to-top .ring circle { fill: none; stroke: var(--accent-hot); stroke-width: 2; opacity: .9; transition: stroke-dashoffset .1s linear; } /* ── Адаптив ── */ @media (max-width: 900px) { .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; } .bento { grid-template-columns: 1fr 1fr; } .bcard.dark { grid-column: span 2; } .cats { grid-template-columns: 1fr 1fr; } .row .b { display: none; } .cta { flex-direction: column; align-items: flex-start; padding: 34px 26px; } /* сверху 36, а не 48: на узком экране воздух уже даёт поле поиска под шапкой */ .layout { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; } .wrap > .crumbs { padding-top: 28px; } .side, .side.tall { position: static; order: 2; max-height: none; overflow: visible; } /* под статьёй список всего раздела разворачивать незачем — сворачиваем в одну строку, открыть можно нажатием */ /* Заголовок-гармошка в стиле остальных подписей списков («Ещё по теме»): белая пилюля выглядела инородно — единственная нажимаемая пилюля среди карточек, при открытии повисала над списком */ .side-list > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 4px 0; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); } .side-list > summary::-webkit-details-marker { display: none; } .side-list > summary .n { font-weight: 700; font-size: 13px; color: var(--gray); } .side-list > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-bottom: 2px; border-right: 2px solid var(--gray); border-bottom: 2px solid var(--gray); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; } .side-list[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .side-list .side-body { padding-top: 10px; } .side .back { margin-bottom: 12px; } /* На телефоне список раздела стоит под статьёй на общем фоне, и десктопные стили разваливались: активная статья выглядела карточкой, остальные — голым текстом. Здесь все строки — одинаковые карточки, активная отмечена рамкой-акцентом; и убираем зазор, который сайдбар тянул за собой перед подвалом. */ .side nav { gap: 8px; } .side nav a { background: var(--card); padding: 13px 16px; border-radius: 14px; border: 1px solid transparent; color: var(--ink); } .side nav a.active { border-color: var(--accent); font-weight: 650; } .side h4 { margin: 16px 0 10px; } .side { margin-bottom: 0; } .paper { padding: 26px 20px; } .paper figure.banner { margin: -26px -20px 18px; } .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; } /* на узком экране колонки шире: иначе скрины нечитаемы */ .paper a.img-zoom.col-4 { width: 60%; } .paper a.img-zoom.col-5 { width: 72%; } .paper a.img-zoom.col-6 { width: 85%; } .paper a.img-zoom.col-8, .paper a.img-zoom.col-9, .paper a.img-zoom.col-10 { width: 100%; } /* сдвоенные скриншоты — в одну колонку с отступом; узкие скрины держит их inline-потолок max-width */ .paper p.shots { gap: 12px; } .paper p.shots a.img-zoom { width: 100%; } .paper > ol > li { grid-template-columns: 48px 1fr; } .paper > ol > li::before { font-size: 34px; } .pager { grid-template-columns: 1fr; } .pager a.next { text-align: left; } /* воздух над «База знаний»: десктопные 56px на телефоне выглядят дырой между шапкой и контентом */ .hero { padding-top: 24px; } .search-page { padding-bottom: 36px; } /* подвал: на узком экране ссылки рвались как попало («Почта» одна на строке) — раскладываем в две ровные колонки; копирайт под ними, последней строкой (порядок меняет flex, разметка общая с десктопом) */ footer.site .wrap { flex-direction: column; gap: 18px; } footer.site .wrap > span:first-child { order: 2; } footer.site .wrap > span:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; } /* поиск не прячем: переносим на отдельную строку шапки во всю ширину; шапка на мобильном не липкая — иначе съедает пол-экрана */ header.site { position: static; } /* боковые 24px — те же, что у .wrap: сокращение padding до «12px 0» обнуляло их, и на узком экране логотип с кнопкой упирались в края */ .nav { flex-wrap: wrap; height: auto; padding: 12px 24px; row-gap: 10px; } /* поле поиска — под шапкой, а не второй строкой внутри неё */ .nav .h-search { display: none; } .m-search { display: block; padding: 14px 0 2px; } .m-search .h-search { max-width: none; } /* на узком экране надпись съедает всю строку — оставляем круглую иконку */ .btn-dark { font-size: 13px; padding: 9px; border-radius: 999px; } .btn-dark span { display: none; } .btn-dark svg { display: block; } .paper h2 { scroll-margin-top: 12px; } } @media (max-width: 560px) { .bento, .cats { grid-template-columns: 1fr; } .bcard.dark { grid-column: auto; } } /* Таблица-сравнение на телефоне: строка разворачивается в блок «параметр → карта: значение», подпись берётся из data-th (её проставляет генератор). Так четыре колонки читаются на 375 px без горизонтальной прокрутки. */ @media (max-width: 620px) { .paper .cmp-tbl { overflow-x: visible; } .paper .cmp-tbl table { width: 100%; min-width: 0; } .paper .cmp-tbl .thr { display: none; } .paper .cmp-tbl tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); } .paper .cmp-tbl tr:last-child { border-bottom: none; } .paper .cmp-tbl td { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border: none; padding: 3px 0; text-align: right; } .paper .cmp-tbl td::before { content: attr(data-th); flex: none; text-align: left; color: var(--gray-dark); font-size: 13.5px; font-weight: 400; } .paper .cmp-tbl td:first-child { display: block; text-align: left; font-weight: 650; margin-bottom: 4px; } .paper .cmp-tbl td[colspan] { display: block; text-align: center; } .paper .cmp-tbl td p { margin: 0; } } /* Каталог сервисов на телефоне: три колонки в 375 px не помещаются, а боковая прокрутка режет примечание на полуслове. Раскладываем строку таблицы в блок: сервис и ответ в одну строку, примечание — под ними. */ @media (max-width: 620px) { .paper .svc-tbl { overflow-x: visible; } .paper .svc-tbl table { width: 100%; min-width: 0; } .paper .svc-tbl tr:first-child { display: none; } /* шапка не нужна */ .paper .svc-tbl tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 11px 0; border-bottom: 1px solid var(--line); } .paper .svc-tbl td { display: block; border: none; padding: 0; text-align: left; } .paper .svc-tbl td:nth-child(2) { text-align: right; white-space: nowrap; } .paper .svc-tbl td:nth-child(3) { grid-column: 1 / -1; font-size: 13.5px; color: var(--gray-dark); } .paper .svc-tbl td:nth-child(3):empty { display: none; } .paper .svc-tbl td p { margin: 0; } } /* ── Режим встраивания (?embed=1) ── Портал внутри чужого приложения (вебвью мобильного приложения, миниапп, iframe). Убираем свой «хром»: лого, переключатель темы, кнопку поддержки в шапке и футер — навигацию и брендинг рисует принимающее приложение, второй комплект только мешает. Поиск оставляем: это инструмент страницы, а не навигация сайта. Контент, «Содержание», prev/next, «Статья помогла?» и блок «Остались вопросы?» остаются как есть. Режим включает THEME_BOOT по ?embed=1 и держит его в sessionStorage, чтобы он не терялся при переходах по внутренним ссылкам. */ :root[data-embed="1"] .logo, :root[data-embed="1"] .nav-act, :root[data-embed="1"] footer.site { display: none; } /* шапка перестаёт быть липкой: прокрутку внутри вебвью ведёт приложение, и собственная нативная панель сверху уже есть — вторая полоса поверх контента отъедала бы экран. Высоту отпускаем: без лого 66 px не нужны */ :root[data-embed="1"] header.site { position: static; } :root[data-embed="1"] .nav { height: auto; padding: 10px 0; } /* на главной шапка идёт без поля поиска (у неё своё, крупное) — там от полосы в этом режиме не остаётся ничего, прячем её целиком */ :root[data-embed="1"] header.site:not(:has(.h-search)) { display: none; } /* до 900 px поле поиска и так уезжает из шапки в блок под ней (.m-search), и полоса снова пустеет — на телефоне в этом режиме шапки нет вовсе */ @media (max-width: 900px) { :root[data-embed="1"] header.site { display: none; } :root[data-embed="1"] .m-search { padding-top: 10px; } } /* ── Печать ── Клиент распечатывает инструкцию, а не сайт: убираем интерфейс, разворачиваем аккордеоны, не разрываем шаги и таблицы между страницами, у внешних ссылок дописываем адрес — на бумаге кликнуть нельзя. */ @media print { /* На бумаге тема всегда светлая: тёмный портал распечатался бы либо чёрными плашками на весь лист, либо (если принтер их выкинет) белым по белому. Возвращаем светлые значения — дальше правила ниже работают как обычно. */ :root, :root[data-theme="dark"] { --bg: #fff; --card: #fff; --soft: #f7f7f5; --code-bg: #f2f2ef; --line: #d9d9d4; --line-hi: #c4c4bd; --ink: #000; --gray: #555; --gray-dark: #333; --dim: #888; --link: #000; --accent: #2f5bff; --accent-ink: #1f47c8; --accent-hot: #2f5bff; --accent-soft: #eef1ff; --green: #2a9c55; --dark: #17171a; --dark-ink: #fff; --warn-bg: #faf6ec; --warn-line: #e0d2ab; --warn-bar: #d9a406; --warn-ink: #7a5f12; --warn-pill: #e0c893; --info-line: #c3cdf5; --info-pill: #b3c1f0; --ok-bg: #f2fbf5; --ok-line: #bfe0cb; --ok-pill: #a8dbb8; --bad-bg: #fdf1f0; --bad-line: #e6bdb8; --bad-ink: #b03d31; --bad-pill: #e6b0a9; /* чипы-метки и карточка «24/7» на главной — тоже печатаются */ --pill-bg: #fff; --pill-line: #d9d9d4; --pill-ink: #333; --hi-bg: #17171a; --hi-line: #17171a; --hi-ink: #fff; --hi-cap: #c8c8ce; --hi-num: #fff; --hero-bg: radial-gradient(120% 160% at 15% 0%, #4aa8f5 0%, transparent 55%), radial-gradient(130% 170% at 90% 20%, #2f6bf0 0%, transparent 55%), linear-gradient(150deg, #2f7bf0 0%, #2f5bff 45%, #2348d6 100%); --hero-ink: #fff; --hero-dim: rgba(255,255,255,.85); --hero-line: rgba(255,255,255,.45); --hero-edge: transparent; --shot: none; color-scheme: light; /* Тени, полосы прокрутки, подсветку наведения и всплывающие блоки не возвращаем: на бумаге их не видно, они либо скрыты, либо не печатаются. */ } header.site, footer.site, .side, .to-top, .helpful, .escalate, .pager, .toc, .crumbs, .h-search, .hero-searchbox, .svc-filter, .cta, .related, .lightbox, .toast, .paper .anchor { display: none !important; } body { background: #fff; font-size: 11.5pt; } .wrap, .layout { display: block; max-width: none; padding: 0; } .paper { border: none; border-radius: 0; padding: 0; background: #fff; box-shadow: none; } .paper figure.banner { display: none; } a { color: #000; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; } a[href^="mailto"]::after, a.img-zoom::after { content: ""; } /* аккордеоны на бумаге раскрыты: свёрнутый текст просто не напечатается */ .paper .acc-item > summary::after { display: none; } .paper .acc-body { display: block !important; } .paper h2, .paper h3, .paper .step { break-after: avoid; page-break-after: avoid; } .paper table, .paper figure, .paper a.img-zoom, .paper .callout, .paper > ol > li { break-inside: avoid; page-break-inside: avoid; } .paper .tbl-scroll { overflow: visible; } .paper a.img-zoom { max-width: 60%; } .a-title { font-size: 20pt; margin-bottom: 6pt; } .meta { color: #666; font-size: 9pt; } }