@charset "UTF-8"; /* ========================================================================== Andrey Proskuryakov — общие стили. ========================================================================== */ :root { --font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Светлая палитра. Тёмная — ниже, в блоке «Тёмная тема». */ color-scheme: light; --bg: #ffffff; --fg: #000000; --fg-body: #222222; --fg-muted: #444444; --fg-soft: #6b6b6b; --fg-faint: #8a8a8a; /* Минимальный серый, проходящий контраст 4.5:1 на белом (WCAG AA). В макете здесь стояли #9a9a9a и #8a8a8a — норму они не проходили. */ --fg-min: #767676; --line: #e2e2e2; --line-soft: #dddddd; --line-underline: #cccccc; --line-tab: #d8d8d8; /* Подложка под hero, пока картинка не загрузилась */ --hero-bg: #f2f2f2; --content-width: 480px; /* Отступ от края экрана: hero и строки внутри вкладок. Сама полоса вкладок идёт во всю ширину. */ --edge: 10px; } /* Тёмная тема ------------------------------------------------------------ По умолчанию тема идёт за настройкой устройства. Кнопка в подвале ставит на data-theme и перебивает системную настройку в обе стороны — выбор запоминается в localStorage (см. app.js). Палитра описана дважды: одним селектором «системная настройка ИЛИ ручной выбор» не выражается. Меняя цвет, правьте оба блока. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #111111; --fg: #f5f5f5; --fg-body: #d8d8d8; --fg-muted: #b4b4b4; --fg-soft: #9e9e9e; --fg-faint: #808080; --fg-min: #8f8f8f; --line: #2b2b2b; --line-soft: #3a3a3a; --line-underline: #4a4a4a; --line-tab: #333333; --hero-bg: #1c1c1c; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #111111; --fg: #f5f5f5; --fg-body: #d8d8d8; --fg-muted: #b4b4b4; --fg-soft: #9e9e9e; --fg-faint: #808080; --fg-min: #8f8f8f; --line: #2b2b2b; --line-soft: #3a3a3a; --line-underline: #4a4a4a; --line-tab: #333333; --hero-bg: #1c1c1c; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--fg); text-decoration: none; } a:hover { color: var(--fg-soft); } :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; } [hidden] { display: none !important; } /* Обёртка страницы ------------------------------------------------------- */ .page { display: flex; justify-content: center; min-height: 100vh; background: var(--bg); color: var(--fg); } .page--home { padding: 10px 0; } .page--legal { padding: 56px 16px 64px; } .page__inner { width: 100%; max-width: var(--content-width); } /* Шапка главной ---------------------------------------------------------- */ /* Рамка вокруг hero: сверху отступ даёт .page--home, по бокам — здесь */ .hero-frame { display: block; padding: 0 var(--edge); } .hero { display: block; width: 100%; height: 305px; object-fit: cover; object-position: top; background: var(--hero-bg); } /* Заглавные буквы на сайте — дело стилей, а не текста. В конфигах и массивах всё написано как в жизни: тот же текст уходит в мета-теги, микроразметку, aria-подписи и в чек, где капс неуместен. */ .name { margin: 26px 0 0; font-size: 15px; font-weight: 400; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; } .role { margin: 12px 0 0; font-size: 15px; font-weight: 400; letter-spacing: 0.06em; text-align: center; } .rate { margin-top: 22px; color: var(--fg-muted); font-size: 13px; letter-spacing: 0.04em; line-height: 1.8; text-align: center; text-transform: uppercase; } .contact-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 13px; letter-spacing: 0.04em; } .contact-line__link { display: flex; align-items: center; gap: 8px; padding-bottom: 2px; border-bottom: 1px solid var(--line-underline); color: var(--fg); } /* Вкладки ---------------------------------------------------------------- */ .tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; } .tab { display: block; padding: 14px 0 16px; border: none; border-bottom: 1px solid var(--line-tab); background: transparent; color: var(--fg-min); font-family: inherit; font-size: 14px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; cursor: pointer; } .tab:hover { color: var(--fg); } .tab.is-active { border-bottom: 2px solid var(--fg); color: var(--fg); } .panel { padding-top: 44px; } /* Строка публикации / услуги --------------------------------------------- */ .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 var(--edge) 42px; } .row__text { font-size: 14px; line-height: 1.85; letter-spacing: 0.03em; text-transform: uppercase; text-wrap: pretty; } .row__meta { color: var(--fg-soft); } .btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 120px; height: 44px; border: 1px solid var(--fg); background: transparent; color: var(--fg); font-family: inherit; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .btn:hover { background: var(--fg); color: var(--bg); } .more { display: flex; justify-content: center; padding: 2px 0 8px; } /* Пока JS не отработал — показываем все публикации и прячем «ЕЩЁ». Так список целиком доступен поисковикам и посетителям без JS. */ .row--extra { display: flex; } html.js .row--extra { display: none; } html:not(.js) .more { display: none; } /* Кнопка оплаты — та же .btn, но внутри формы: заказ создаётся POST-ом. Форме нужны нулевые поля, иначе она сдвигает строку услуги. */ .row__pay { flex: none; margin: 0; } /* Пока касса выставляет счёт, на месте подписи крутится кружок. Подпись не убираем, а делаем прозрачной: ширина кнопки задана, но так строка точно не шелохнётся, а экранный диктор по-прежнему читает aria-label. Наведение в это время ничего не подсвечивает — нажимать всё равно нечего. */ .btn.is-loading, .btn.is-loading:hover { position: relative; background: transparent; color: transparent; cursor: default; } .btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 1px solid var(--line-underline); border-top-color: var(--fg); border-radius: 50%; animation: btn-spin 0.7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* Кому анимация мешает — кружок остаётся, но крутится медленно и не мельтешит: совсем убрать его нельзя, иначе непонятно, что идёт работа. */ @media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation-duration: 2.4s; } } /* Подвал ----------------------------------------------------------------- */ .footer { margin-top: 24px; padding-top: 36px; border-top: 1px solid var(--line); text-align: center; } .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 0 16px; } .socials__link { display: flex; align-items: center; gap: 8px; color: var(--fg-muted); font-size: 11px; letter-spacing: 0.08em; } .socials__link:hover { color: var(--fg); } .requisites { margin-top: 34px; padding: 0 16px; color: var(--fg-soft); font-size: 11px; letter-spacing: 0.06em; line-height: 2; } /* Реквизиты выводятся не на всех языках (config/site.php → show_requisites). Когда их нет, ссылки берут их отступ, иначе подвал слипается. */ .socials + .legal-links { margin-top: 34px; } .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; padding: 0 16px; color: var(--fg-soft); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .legal-links a { border-bottom: 1px solid var(--line-soft); color: var(--fg-soft); } .legal-links a:hover { color: var(--fg); } /* Карточки платёжных систем и переключатель темы: общая рамка и цвет, различается только ширина — у кнопки темы квадрат. */ .badges { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; } .badges__item, .badges__theme { display: flex; align-items: center; justify-content: center; height: 30px; border: 1px solid var(--line-soft); color: var(--fg-min); } .badges__item { width: 54px; font-size: 10px; letter-spacing: 0.14em; } .badges__theme { width: 30px; padding: 0; background: transparent; cursor: pointer; } .badges__theme:hover { border-color: var(--fg); color: var(--fg); } /* Видна иконка выбранного режима, а не текущего цвета: «как на устройстве» выглядит то светлым, то тёмным, и отличить его от ручного выбора можно только по значку. Режим — это атрибут data-theme на , его ставит app.js; пока атрибута нет, тему задаёт система. */ .theme-icon { display: none; } html:not([data-theme]) .theme-icon--auto, html[data-theme="dark"] .theme-icon--moon, html[data-theme="light"] .theme-icon--sun { display: inline-block; } /* Без JS переключать тему нечем — кнопки нет, остаётся системная настройка */ html:not(.js) .badges__theme { display: none; } /* Плашка про cookie ------------------------------------------------------ */ /* Плашка приклеена к низу экрана и накрывает конец страницы — а там теперь кнопки: переключатель темы и «НА ГЛАВНУЮ». Пока плашка висит, подвал получает запас снизу, чтобы до них можно было дотянуться. Класс ставит app.js — плашка появляется только с JS. */ html.has-cookie .footer, html.has-cookie .legal__footer { padding-bottom: 84px; } /* Ширина совпадает с текстовым столбцом строк: max-width страницы минус боковые отступы --edge, поэтому плашка стоит ровно под контентом. */ .cookie { position: fixed; left: 50%; bottom: var(--edge); z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: calc(100% - var(--edge) * 2); max-width: calc(var(--content-width) - var(--edge) * 2); padding: 12px 14px; transform: translateX(-50%); border: 1px solid var(--fg); background: var(--bg); } .cookie__text { margin: 0; color: var(--fg-muted); font-size: 11px; letter-spacing: 0.05em; line-height: 1.7; text-wrap: pretty; } .cookie__link { border-bottom: 1px solid var(--line-underline); color: var(--fg-muted); } .cookie__link:hover { color: var(--fg); } .cookie__btn { width: 64px; height: 34px; font-size: 12px; } /* Юридические страницы ---------------------------------------------------- */ .legal__title { margin: 0 0 40px; font-size: 15px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.7; text-align: center; text-transform: uppercase; } .legal__notice { margin: 0 0 32px; padding: 14px 16px; border: 1px solid var(--line); color: var(--fg-soft); font-size: 12px; line-height: 1.8; letter-spacing: 0.02em; text-wrap: pretty; } .legal h2 { margin: 36px 0 16px; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; } .legal p { margin: 0 0 18px; color: var(--fg-body); font-size: 13px; line-height: 1.9; letter-spacing: 0.02em; text-wrap: pretty; } /* Абзац-подводка перед списком стоит чуть ближе к нему */ .legal p.is-lead-in { margin-bottom: 14px; } .legal ul { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; } .legal ul li { position: relative; padding-left: 20px; color: var(--fg-body); font-size: 13px; line-height: 1.9; letter-spacing: 0.02em; } .legal ul li::before { content: "—"; position: absolute; left: 0; color: var(--fg-faint); } .legal ol { display: grid; gap: 10px; margin: 0 0 20px; padding-left: 22px; } .legal ol li { color: var(--fg-body); font-size: 13px; line-height: 1.9; letter-spacing: 0.02em; } .legal a { border-bottom: 1px solid var(--line-underline); } .legal a.is-url { word-break: break-all; } .legal__footer { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--fg-soft); font-size: 11px; letter-spacing: 0.08em; line-height: 2; text-align: center; } /* Заглавные — только ссылке: рядом в том же подвале стоят реквизиты ИП, и «ИП ПРОСКУРЯКОВ А.В.» выглядело бы криком. */ .legal__footer a { border-bottom: 1px solid var(--line-soft); color: var(--fg-soft); text-transform: uppercase; } .legal__footer a:hover { color: var(--fg); } /* Страницы возврата из платёжной системы ---------------------------------- */ /* Заголовок здесь общий с юридическими страницами (.legal__title): и там, и тут это одна строка капсом по центру — второй такой же стиль ни к чему. */ .page--pay { padding: 56px 16px 64px; } .pay__text { margin: 0 0 32px; color: var(--fg-body); font-size: 13px; line-height: 1.9; letter-spacing: 0.02em; text-align: center; text-wrap: pretty; } .pay__order { padding: 18px 16px; border: 1px solid var(--line); font-size: 12px; line-height: 2; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; } .pay__order-line { color: var(--fg-soft); } .pay__actions { display: flex; justify-content: center; gap: 12px; margin-top: 36px; } /* Подписи здесь длиннее «КУПИТЬ» и в 120 px не помещаются — эти кнопки растут по тексту. */ .pay__actions .btn { width: auto; padding: 0 20px; } /* Печать ------------------------------------------------------------------ */ @media print { /* На бумаге всегда светлая тема: фон принтер не печатает, а светлый текст по белому не прочитать. Селектор с [data-theme] нужен, чтобы перебить ручной выбор — у него та же специфичность. */ :root, :root[data-theme] { color-scheme: light; --bg: #ffffff; --fg: #000000; --fg-body: #222222; --fg-muted: #444444; --fg-soft: #6b6b6b; --fg-faint: #8a8a8a; --fg-min: #767676; --line: #e2e2e2; --line-soft: #dddddd; --line-underline: #cccccc; --line-tab: #d8d8d8; } .page { display: block; min-height: 0; padding: 0; } .page__inner { max-width: none; } .legal__footer, .tabs, .more, .cookie, .badges__theme { display: none; } .legal a { border-bottom: none; } }